javascript – introductionusers.iit.uni-miskolc.hu/~tothzs/edu/webtech/lectures/05js.pdf ·...
Post on 03-Jun-2020
4 Views
Preview:
TRANSCRIPT
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
Zsolt Tóth (UM) JavaScript – Introduction 2018 2 / 31
Introduction
JavaScript
untypedhigh levelObject basedNot object orientedScript languageClient sideBrowser interprets
+ Simple+ Easy-to-learn+ Form checking / validation+ Animated elements+ AJAX+ JSON Processing- Security
Zsolt Tóth (UM) JavaScript – Introduction 2018 3 / 31
Introduction
History
1995 May Netscape Mocha1995 SeptMocha→ LiveScript1995 DecLiveScript → JavaScript1998 StandardizationISO Standard
JQueryJavaScript Object NotationTypeScriptAngularJS
Zsolt Tóth (UM) JavaScript – Introduction 2018 4 / 31
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 >
Zsolt Tóth (UM) JavaScript – Introduction 2018 5 / 31
Introduction
Events
onloadonsubmitonchangeonkeydownonkeyuponclickondbclick
<bodyonload =" a l e r t (’ He l lo World ! ’ ) " >. . .</body>
Zsolt Tóth (UM) JavaScript – Introduction 2018 6 / 31
Syntax Variables
Table of Contents
1 Introduction
2 SyntaxVariablesControl Flow StatementsFunctions
3 {B,D}OMDocument Object ModelBrowser Object Model
Zsolt Tóth (UM) JavaScript – Introduction 2018 7 / 31
Syntax Variables
Definition
untypedvar
Starts with character, $, _
Case-sensitiveundefined
null
j s > x = ’ 5 ’ ;5js > y = " 5 " ;5js > y = x + y ;55js >
Zsolt Tóth (UM) JavaScript – Introduction 2018 8 / 31
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 >
Zsolt Tóth (UM) JavaScript – Introduction 2018 9 / 31
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 >
Zsolt Tóth (UM) JavaScript – Introduction 2018 10 / 31
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 " ;
Zsolt Tóth (UM) JavaScript – Introduction 2018 11 / 31
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 ) ;
Zsolt Tóth (UM) JavaScript – Introduction 2018 12 / 31
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()
Zsolt Tóth (UM) JavaScript – Introduction 2018 13 / 31
Syntax Control Flow Statements
Table of Contents
1 Introduction
2 SyntaxVariablesControl Flow StatementsFunctions
3 {B,D}OMDocument Object ModelBrowser Object Model
Zsolt Tóth (UM) JavaScript – Introduction 2018 14 / 31
Syntax Control Flow Statements
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 : . . .}
Zsolt Tóth (UM) JavaScript – Introduction 2018 15 / 31
Syntax Control Flow Statements
Conditions
== Value=== Value and type
!= Not equals!== Not equals or
different type<,<=,>,>= less, more, etc.
&& and|| or! negation
Zsolt Tóth (UM) JavaScript – Introduction 2018 16 / 31
Syntax Control Flow Statements
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 ){. . .}
Zsolt Tóth (UM) JavaScript – Introduction 2018 17 / 31
Syntax Control Flow Statements
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 ) ;
Zsolt Tóth (UM) JavaScript – Introduction 2018 18 / 31
Syntax Control Flow Statements
break, continue
break
loopsswitchlabel
goto label!
continue
loopsgoto end of the looploop does not break!
Zsolt Tóth (UM) JavaScript – Introduction 2018 19 / 31
Syntax Functions
Table of Contents
1 Introduction
2 SyntaxVariablesControl Flow StatementsFunctions
3 {B,D}OMDocument Object ModelBrowser Object Model
Zsolt Tóth (UM) JavaScript – Introduction 2018 20 / 31
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 ! ’ ) ;
}
Zsolt Tóth (UM) JavaScript – Introduction 2018 21 / 31
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 ) ;
}
Zsolt Tóth (UM) JavaScript – Introduction 2018 22 / 31
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);}
Zsolt Tóth (UM) JavaScript – Introduction 2018 23 / 31
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;}
} ) ( ) ;
Zsolt Tóth (UM) JavaScript – Introduction 2018 24 / 31
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 ! ’ ) ;} ) ;
Zsolt Tóth (UM) JavaScript – Introduction 2018 25 / 31
{B,D}OM Document Object Model
Tartalomjegyzék
1 Introduction
2 SyntaxVariablesControl Flow StatementsFunctions
3 {B,D}OMDocument Object ModelBrowser Object Model
Zsolt Tóth (UM) JavaScript – Introduction 2018 26 / 31
{B,D}OM Document Object Model
Hierarchical Data Model
PCRContaining relationshipTree-structureDescribes HTML documentsNodes are objectsAPI
Zsolt Tóth (UM) JavaScript – Introduction 2018 27 / 31
{B,D}OM Document Object Model
Document Object Model
Zsolt Tóth (UM) JavaScript – Introduction 2018 28 / 31
{B,D}OM Document Object Model
document
document
HTML elementsquerymodificationappending
MethodsgetElementById()
getElementsByTagName()createElement()appendChild()removeChild()
Attributesforms[]
innerHTML
attributestyleonclick
Zsolt Tóth (UM) JavaScript – Introduction 2018 29 / 31
{B,D}OM Browser Object Model
Table of Contents
1 Introduction
2 SyntaxVariablesControl Flow StatementsFunctions
3 {B,D}OMDocument Object ModelBrowser Object Model
Zsolt Tóth (UM) JavaScript – Introduction 2018 30 / 31
{B,D}OM Browser Object Model
Browser Object Model
Repreents the browsers stateone browser – manydocumentswindow
Historyhistory
navigator
alert()
cookie
Zsolt Tóth (UM) JavaScript – Introduction 2018 31 / 31
top related