JavaScript Introduction Web Technologies I. Zsolt Tóth University of Miskolc 2016 Zsolt Tóth (UM) JavaScript Introduction 2016 1 / 31
Introduction Table of Contents 1 Introduction 2 Syntax Variables Control Flow Statements Functions 3 {B,D}OM Document Object Model Browser Object Model Zsolt Tóth (UM) JavaScript Introduction 2016 2 / 31
Introduction JavaScript untyped high level Object based Not object oriented Script language Client side Browser interprets + Simple + Easy-to-learn + Form checking / validation + Animated elements + AJAX + JSON Processing - Security Zsolt Tóth (UM) JavaScript Introduction 2016 3 / 31
Introduction History 1995 May Netscape Mocha 1995 Sept Mocha LiveScript 1995 Dec LiveScript JavaScript 1998 Standardization ISO Standard JQuery JavaScript Object Notation TypeScript AngularJS Zsolt Tóth (UM) JavaScript Introduction 2016 4 / 31
Introduction Usage HTML document <script> tag Within HTML <head> <body> External file *.js linking function definitions C, Java like syntax < s c r i p t src =" myscript. j s " > </ s c r i p t > < s c r i p t > a l e r t ( "My F i r s t JavaScript " ) ; </ s c r i p t > Zsolt Tóth (UM) JavaScript Introduction 2016 5 / 31
Introduction Events onload onsubmit onchange onkeydown onkeyup onclick ondbclick <body onload =" a l e r t ( Hello World! ) " >... </ body> Zsolt Tóth (UM) JavaScript Introduction 2016 6 / 31
Table of Contents Syntax Variables 1 Introduction 2 Syntax Variables Control Flow Statements Functions 3 {B,D}OM Document Object Model Browser Object Model Zsolt Tóth (UM) JavaScript Introduction 2016 7 / 31
Syntax Variables Definition untyped var Starts with character, $, _ Case-sensitive undefined null js > x = 5 ; 5 js > y = " 5 " ; 5 js > y = x + y ; 55 js > Zsolt Tóth (UM) JavaScript Introduction 2016 8 / 31
Syntax Variables String, Number, Boolean String " Captain Jack Sparrow" "Captain" Jack Sparrow Number 42, 42.00 3.1415e3 = 3141.5 3.1415e-1 = 0.31415 Boolean true false x =1; 1 js > y = t r u e ; t r u e js > x + y 2 x y 0 js > Zsolt Tóth (UM) JavaScript Introduction 2016 9 / 31
Syntax Variables Arrays index between 0 and n-1 array[index] Contains Simple types Arrays Objects Functions js > var cars = [ " t r a b a n t ", "bmw " ] ; js > cars trabant,bmw js > cars [ 5 ] = " panda " panda js > cars trabant,bmw,,,, panda js > Zsolt Tóth (UM) JavaScript Introduction 2016 10 / 31
Syntax Variables Obejcts data structure. operator Variables (fields) Methods var person=new Object ( ) ; person. f i r s t n a m e =" John " ; person. lastname ="Doe " ; person. age =50; person. eyecolor =" blue " ; Zsolt Tóth (UM) JavaScript Introduction 2016 11 / 31
Syntax Variables API Objects Math Basic mathematical functions and constants round() random() [0,1] sqrt() max() min() PI E Date new Date(); Current date ms 1970-01-01 var d = new Date ( ) ; a l e r t ( d + 7 ) ; Zsolt Tóth (UM) JavaScript Introduction 2016 12 / 31
Syntax Variables API Objects String str[3] "alma".length = 4 Escape sequences indexof() match() replace() touppercase() tolowercase() split() trim() RegExp Pattern recognition /pattern/modifier new RegExp(pattern, modifier); Examples [abc], [ abc], [A-Z], [0-9], (a b c),.,\s *,+,? {n}, {n,m} Modifiers test() i case insensitive g global search JavaScript m multiline Zsolt Tóth (UM) JavaScript Introduction 2016 13 / 31
Table of Contents Syntax Control Flow Statements 1 Introduction 2 Syntax Variables Control Flow Statements Functions 3 {B,D}OM Document Object Model Browser Object Model Zsolt Tóth (UM) JavaScript Introduction 2016 14 / 31
Syntax Control Flow Statements if, switch if (condition) {...} if (condition) {...} else {...} else if block condition? true : false; break! Number Char switch ( n ) { case 0:... break ; case 1:... break ; d e f a u l t :... } Zsolt Tóth (UM) JavaScript Introduction 2016 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 2016 16 / 31
for Syntax Control Flow Statements Iterative Parameters 1 Initialization 2 Condition 3 Incrementation f o r ( i = 0; i < 5; i ++) {... } Arrays Object properties f o r ( var x i n obj ) {... } Zsolt Tóth (UM) JavaScript Introduction 2016 17 / 31
while, do... while Syntax Control Flow Statements while ( c o n d i t i o n ) {... } do {... } while ( c o n d i t i o n ) ; Zsolt Tóth (UM) JavaScript Introduction 2016 18 / 31
Syntax Control Flow Statements break, continue break loops switch label goto label! continue loops goto end of the loop loop does not break! Zsolt Tóth (UM) JavaScript Introduction 2016 19 / 31
Table of Contents Syntax Functions 1 Introduction 2 Syntax Variables Control Flow Statements Functions 3 {B,D}OM Document Object Model Browser Object Model Zsolt Tóth (UM) JavaScript Introduction 2016 20 / 31
Syntax Functions Function Definition Untyped parameters? return type? return? f u n c t i o n sayhello ( ) { a l e r t ( Hello World! ) ; } Zsolt Tóth (UM) JavaScript Introduction 2016 21 / 31
Syntax Functions Parameters enumerate variables, Type is not defined Variable names a, b, c X name, job, grosssalary f u n c t i o n add ( a, b ) { a l e r t ( a + b ) ; } Zsolt Tóth (UM) JavaScript Introduction 2016 22 / 31
Syntax Functions Return Type Untyped! Function can return with Simple type Array Object Function Choose function names wisely. 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 2016 23 / 31
Syntax Functions Closure Programming technique Anonymous function Record stores a function Function as a variable Event 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 2016 24 / 31
Syntax Functions Callback Functions Function as a parameter Expected behavior Generalization Event 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 2016 25 / 31
Tartalomjegyzék {B,D}OM Document Object Model 1 Introduction 2 Syntax Variables Control Flow Statements Functions 3 {B,D}OM Document Object Model Browser Object Model Zsolt Tóth (UM) JavaScript Introduction 2016 26 / 31
{B,D}OM Document Object Model Hyerarchical Datamodel PCR Containing relationship Tree-structure Describes HTML documents Nodes are objects API Zsolt Tóth (UM) JavaScript Introduction 2016 27 / 31
Document Object Model {B,D}OM Document Object Model Zsolt Tóth (UM) JavaScript Introduction 2016 28 / 31
{B,D}OM Document Object Model document document HTML elements query modification appending Methods getelementbyid() getelementsbytagname() createelement() appendchild() removechild() Attributes forms[] innerhtml attribute style onclick Zsolt Tóth (UM) JavaScript Introduction 2016 29 / 31
Table of Contents {B,D}OM Browser Object Model 1 Introduction 2 Syntax Variables Control Flow Statements Functions 3 {B,D}OM Document Object Model Browser Object Model Zsolt Tóth (UM) JavaScript Introduction 2016 30 / 31
{B,D}OM Browser Object Model Browser Object Model Repreents the browsers state one browser many documents window History history navigator alert() cookie Zsolt Tóth (UM) JavaScript Introduction 2016 31 / 31