JavaScript Introduction

Size: px

Start display at page:

Download "JavaScript Introduction"

Posy Barber
6 years ago
Views:

1 JavaScript Introduction Web Technologies I. Zsolt Tóth University of Miskolc 2016 Zsolt Tóth (UM) JavaScript Introduction / 31

2 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 / 31

3 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 / 31

4 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 / 31

5 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 / 31

6 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 / 31

7 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 / 31

8 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 / 31

9 Syntax Variables String, Number, Boolean String " Captain Jack Sparrow" "Captain" Jack Sparrow Number 42, e3 = e-1 = 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 / 31

10 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 / 31

11 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 / 31

12 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 var d = new Date ( ) ; a l e r t ( d + 7 ) ; Zsolt Tóth (UM) JavaScript Introduction / 31

13 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 / 31

14 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 / 31

15 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 / 31

16 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 / 31

17 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 / 31

18 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 / 31

19 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 / 31

20 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 / 31

21 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 / 31

22 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 / 31

23 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 / 31

24 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 / 31

25 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 / 31

26 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 / 31

27 {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 / 31

28 Document Object Model {B,D}OM Document Object Model Zsolt Tóth (UM) JavaScript Introduction / 31

29 {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 / 31

30 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 / 31

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 / 31

SEEM4570 System Design and Implementation Lecture 03 JavaScript

SEEM4570 System Design and Implementation Lecture 03 JavaScript JavaScript (JS)! Developed by Netscape! A cross platform script language! Mainly used in web environment! Run programs on browsers (HTML