Download JavaScript: Understanding Client-Side Scripting with Javascript and more Slides Computer Science in PDF only on Docsity!

CONTENTS

Client‐data

script  It refers to class of computer^ programs^ on^ the^ web^ that are executed client‐side, by^ the^ user`s^ web^ browser^ , instead of server side.  These are often embedded^ with^ in^ an^ HTML^ document but they may also be contained^ in^ a^ separate^ file^ , which is referenced by the^ document^ that^ uses^ it.  Client‐side scripts may also^ contain^ instructions^ for the browser to follow if the^ user^ interacts^ within^ a document in a certain way

JAVASCRIPT^

and^ WHAT CAN^ IT^ DO^ ^ Most^ popular^ scripting^ language

on^ the^ internet^ and^ works^ in all^ major^ browsers^ such^ as^ internet

explorer ^ Usually^ embedded^ directly^ into

web^ pages ^ It^ is^ an^ interpreted^ language ^ It^ gives^ HTML^ designers^ a^ programming

tool. ^ It^ can^ put^ dynamic^ text^ into

an^ html^ page ^ It^ can^ react^ to^ events ^ It^ can^ read^ and^ write^ HTML

elements ^ Can^ be^ used^ to^ validate^ data. ^ Can^ be^ used^ to^ create^ computer

Advantages^ of^

javascript  Speed :‐ being client side,^ javascript^ is^ very^ fast^ because any code functions can be^ run^ immediately^ instead^

of having^ to^ contact^ to^ the^ server

and^ wait^ for^ an^ answer. ^ Simplicity^ :‐^ javascript^ is^

relatively^ simple^ to^ learn^ and implement. ^ Versatility^ :‐^ javascript^ plays

nicely^ with^ other languages^ and^ be^ used^ in^ a^

huge^ variety^ of^ applications. ^ Server^ Load^ :‐^ being^ client

–side^ reduces^ the^ website server. ^ Easy^ to^ debug^ and^ testing ^ No^ special^ editor^ is^ required

for^ it.

Disadvantages

of Javascript^ ^ Security^ :‐^ as^ the^ code

executes^ the^ user`s computer, in some cases^ it^ can^ be^ exploited^ for malicious purpose.  Relying on End User :‐^ Javscript^ is^ sometimes interpreted differently^ by^ different^ browsers^. Where as server side script^ will^ always^ produce the same output, client^ side^ scripts^ can^ be^ a^ little predictable

How^ to^ add

HTML^ tags to^ the^ javascript^ ^ To^ insert^ a^ javascript

into^ an^ HTML

page^ ,^ we^ use^ the^

Javascript^ code

and^ blocks

^ Javascript^ code^ is^ a^ sequence

of^ Javascript^ statements. ^ Each^ statement^ is^ executed

by^ the^ browser^ in^ the sequence^ they^ are^ written  Javascript^ statements^ are^ grouped

together^ in^ a^ block. ^ Block^ start^ with^ a^ left^ curly

bracket^ and^ ends^ with^ a right^ curly^ bracket.  The^ purpose^ of^ block^ is^ to^ make

the^ sequence^ of statement^ execute^ together.

JavaScript^ Comments^ ^ Single^ line^ comment^ start

with^ // ^ Example^ //write^ a^ heading ^ Javascript^ multiple^ line^ comments

start^ with^ /^ and end^ with/.  Example^ /*the^ code^ will^ write

one^ heading^ and^ two pragraphs.*/

Javascript^ operators^ ^ Arithmetic^ operators^ ^ Assignment^ operators^ ^ Comparison^ operators^ ^ Logical^ operators^ ^ Conditional^ operator

Arithmetic^ operators

:^ Y=

OPERATOR^ DESCRIPTION

EXAMPLE^ RESULT +^ ADDITION^

X=Y+2^ X= _^ SUBTRACTION

X=Y‐^2 X= *^ MULTIPLICATION

X=Y*2^ X= /^ DIVISION^

X=Y/2^ X=2. %^ MODULUS^

X=Y%2^ X= ++^ INCREMENT^

X=++Y^ X= _^ DECREMENT X=_Y^ X=

Assignment^ operators:X=10,Y=5 OPERATOR^ EXAMPLE^

SAME^ AS^ RESULT =^ X=Y^

X= +=^ X+=Y^

X=X+Y^ X= ‐=^ X‐=Y^

X=X‐Y^ X= =^ X=Y^

X=X*Y^ X= /=^ X/=Y^

X=X/Y^ X= %=^ X%=Y^

X=X%Y^ X=

Comparison^ Operators

:^ X=5 docsity.com

Logical^ Operators:X=6,Y=3^ OPERATOR^ DESCRIPTION

EXAMPLE

&&^ AND^

(X<10&&^ Y^ >^ 1) IS^ TRUE

||^ OR^

(X==5^ ||^ Y==5) IS^ FALSE)

!^ NOT^

!(X==Y)^ IS TRUE docsity.com

Alert^ Box:^ ^ An^ alert^ box^ is^ often^ used

if^ you^ want^ to^ make^ sure information comes through^ to^ the^ user. ^ When^ an^ alert^ box^ pops^ up,

the^ user^ will^ have^ to^ click “OK”^ to^ proceed.  Syntax^ :^ alert(“sometext”);

Confirm^ Box:^ ^ A^ confirm^ box^ is^ often^ used

if^ you^ want^ the^ user^ to verify^ or^ accept^ something.  When^ a^ confirm^ box^ pops^ up,

the^ user^ will^ have^ to click^ either^ “OK”^ or^ “cancel’

to^ proceed. ^ If^ the^ user^ clicks^ “OK”,^ the

box^ returns^ true.^ If^ the^ user clicks^ “cancel”,^ the^ box^ returns

false. ^ Syntax^ :^ confirm(“sometext”);

Prompt^ Box:^ ^ A^ prompt^ box^ is^ often^ used

if^ you^ want^ the^ user^ to input^ a^ value^ before^ entering

a^ page. ^ When^ a^ prompt^ box^ pops

up,^ the^ user^ will^ have^ to^ click either “OK’ or “cancel” to proceed^ after^ entering^ an input value. ^ If^ the^ user^ clicks^ “OK”^ the

box^ returns^ the^ input^ value. If the user clicks “cancel” the^ box^ returns^ null. ^ Syntax:^ prompt^ (sometext”,^ “defaultvalue”);

Javascript^ functions^ ^ A^ function^ contains^ a^ code

that^ will^ be^ executed^ by^ an event or by a call to the function. ^ We^ may^ call^ a^ function^ from

anywhere^ with^ in^ a^ page ^ Functions^ can^ be^ defined

both^ in^ the^ ^ and^ in the section of a document ^ Syntax^ :‐ Function^ function^ name(var1,

var2…varx) { Some^ code }

Example^ of^ function

The^ return^ statement^ ^ The^ return^ statement^ is^ used^ to^ specify

the^ value^ that^ is^ returned^ from^ thr functions. ^ Therefore^ the^ functions^ that^ are^ going

to^ return^ a^ value^ must^ use^ the^ return statement. Example

JavaScript

events

JavaScript

events

^ Events^ are^ the^ beating

heart^ of^ any^ JavaScript application. ^ This^ gives^ us^ an^ overview

of^ what^ event^ handling is^ ,^ what^ its^ problems^ are

and^ how^ to^ write^ proper cross‐browser^ scripts  Without^ events^ there^ are

no^ scripts. ^ Whenever^ a^ user^ of^ JavaScript

takes^ action^ ,^ he causes^ an^ event.

Event^ Modeling^ ^ This^ is^ example^ of^ event modeling^ in^ which^ we displays the date when a^ button^ is^ clicked.

My^ First^ Web^ Page

)>Display Date

Document^ Object

Model

^ The^ document^ object^ model

is^ an^ application programming^ interface(API)

for^ valid^ HTML^ and^ well^ – formed^ XML^ documents.  It^ defines^ the^ logic^ structure

of^ documents^ and^ the^ way a^ document^ is^ accessed^ and

manipulated. ^ With^ the^ Document^ Object

Model^ ,^ programmers^ can build^ documents^ ,^ navigate their^ structure^ and^ add, modify^ ,^ or^ delete^ elements

and^ contents.