javascript – introductionusers.iit.uni-miskolc.hu/~tothzs/edu/webtech/lectures/05js.pdf ·...

JavaScript – IntroductionWeb Technologies I.

Zsolt Tóth

University of Miskolc

2018

Zsolt Tóth (UM) JavaScript – Introduction 2018 1 / 31

Introduction

Table of Contents

1 Introduction

2 SyntaxVariablesControl Flow StatementsFunctions

3 {B,D}OMDocument Object ModelBrowser Object Model


Introduction

JavaScript

untypedhigh levelObject basedNot object orientedScript languageClient sideBrowser interprets

+ Simple+ Easy-to-learn+ Form checking / validation+ Animated elements+ AJAX+ JSON Processing- Security


Introduction

History

1995 May Netscape Mocha1995 SeptMocha→ LiveScript1995 DecLiveScript → JavaScript1998 StandardizationISO Standard

JQueryJavaScript Object NotationTypeScriptAngularJS


Introduction

Usage

HTML document<script> tagWithin HTML

<head><body>

External file*.jslinking

function definitionsC, Java like syntax

< s c r i p t >a l e r t ("My F i r s t JavaScr ip t ") ;</ s c r i p t >

< s c r i p t s rc =" myScr ipt . j s " > </ s c r i p t >


Introduction

Events

onloadonsubmitonchangeonkeydownonkeyuponclickondbclick

<bodyonload =" a l e r t (’ He l lo World ! ’ ) " >. . .</body>


Syntax Variables

Table of Contents

1 Introduction




Syntax Variables

Definition

untypedvar

Starts with character, $, _

Case-sensitiveundefined

null

j s > x = ’ 5 ’ ;5js > y = " 5 " ;5js > y = x + y ;55js >


Syntax Variables

String, Number, Boolean

String"’Captain’ Jack Sparrow"’"Captain" Jack Sparrow’

Number42, 42.003.1415e3 = 3141.53.1415e-1 = 0.31415

Booleantruefalse

x =1;1js > y = t rue ;t r uejs > x + y2x −y0js >


Syntax Variables

Arrays

index between 0 and n-1array[index ]Contains

Simple typesArraysObjectsFunctions

j s > var cars =[ " t r aban t " , "bmw " ] ;j s > carst rabant ,bmwjs > cars [ 5 ] = " panda "pandajs > carst rabant ,bmw, , , , pandajs >


Syntax Variables

Obejcts

data structure. operatorVariables (fields)Methods

var person=new Object ( ) ;person . f i r s tname ="John " ;person . lastname ="Doe " ;person . age=50;person . eyecolor =" blue " ;


Syntax Variables

API Objects

MathBasic mathematical functionsand constantsround()

random() ∈ [0,1]sqrt()

max()

min()

PI

E

Datenew Date();

Current datems1970-01-01

var d = new Date ( ) ;a l e r t ( d + 7 ) ;


Syntax Variables

API Objects

Stringstr[3]

"alma".length = 4Escape sequencesindexOf()

match()

replace()

toUpperCase()

toLowerCase()

split()

trim()

RegExpPattern recognition/pattern/modifier

new RegExp(pattern,modifier);

Examples[abc], [∧abc], [A-Z], [0-9],(a|b|c),.,\s*,+,? {n}, {n,m}

Modifiersi case–insensitive

g global searchJavaScript

m multilinetest()


Syntax Control Flow Statements

Table of Contents

1 Introduction





if, switch

if (condition) {...}

if (condition) {...}else {...}

else ifblockcondition ? true :

false;

break!NumberChar

swi tch ( n ){case 0: . . . break ;case 1: . . . break ;d e f a u l t : . . .}



Conditions

== Value=== Value and type

!= Not equals!== Not equals or

different type<,<=,>,>= less, more, etc.

&& and|| or! negation



for

IterativeParameters

1 Initialization2 Condition3 Incrementation

f o r ( i = 0 ; i < 5 ; i ++){. . .}

ArraysObject properties

f o r ( var x i n ob j ){. . .}



while, do. . .while

whi le ( c o n d i t i o n ){. . .}

do{. . .}wh i le ( co n d i t i o n ) ;



break, continue

break

loopsswitchlabel

goto label!

continue

loopsgoto end of the looploop does not break!


Syntax Functions

Table of Contents

1 Introduction




Syntax Functions

Function Definition

Untyped¿ parameters ?¿ return type ?¿ return ?

f u n c t i o n sayHel lo ( ) {a l e r t ( ’ He l lo World ! ’ ) ;

}


Syntax Functions

Parameters

enumerate variables ,Type is not definedVariable names

a, b, c Xname, job, grossSalary X

f u n c t i o n add ( a , b ) {a l e r t ( a + b ) ;

}


Syntax Functions

Return Type

Untyped!Function can return with

Simple typeArrayObjectFunction

Choose function nameswisely.

f u n c t i o n f a c t ( n ){i f ( n <= 1){r e t u r n 1 ;}r e t u r n n ∗ f a c t ( n−1);}


Syntax Functions

Closure

Programming techniqueAnonymous functionRecord stores a functionFunction as a variableEvent handling

var add = ( f u n c t i o n ( ) {var counter = 0 ;r e t u r n f u n c t i o n ( ) {

r e t u r n counter += 1;}

} ) ( ) ;


Syntax Functions

Callback Functions

Function as a parameterExpected behaviorGeneralizationEvent handling

$ ( document ) . ready (f u n c t i o n ( ) {a l e r t ( ’document i s ready ! ’ ) ;} ) ;


{B,D}OM Document Object Model

Tartalomjegyzék

1 Introduction





Hierarchical Data Model

PCRContaining relationshipTree-structureDescribes HTML documentsNodes are objectsAPI



Document Object Model



document

document

HTML elementsquerymodificationappending

MethodsgetElementById()

getElementsByTagName()createElement()appendChild()removeChild()

Attributesforms[]

innerHTML

attributestyleonclick


{B,D}OM Browser Object Model

Table of Contents

1 Introduction




{B,D}OM Browser Object Model

Browser Object Model

Repreents the browsers stateone browser – manydocumentswindow

Historyhistory

navigator

alert()

cookie


javascript – introductionusers.iit.uni-miskolc.hu/~tothzs/edu/webtech/lectures/05js.pdf ·...

Documents