JavaScript Content • • • • • • • Introduction Syntax Variables and Operators JavaScript Operators Conditional statements For loops While loops Content • • • • • • • Alert, Confirm and Prompt Functions 10 Functions 11 Strings 12 Arrays 13 Associative Arrays 14 References Introduction • First developed by Netscape • Ease traffic between server and client • Ten fundamental aspects: – – – – – – – – – – Can be included in HTML Dependent on the environment Interpreted language Flexible language Based on objects Event driven Is not Java Many-functionally Is evolving Covers diverse context Syntax • Adding JavaScript in an HTML page • Hiding code in old browsers • Syntax conventions 2.1 Adding JavaScript in an HTML page • Use “” and “” • JavaScript code can be added: – In HTML file – In an external js file 2.1 Adding JavaScript in an HTML page Figure 1: JavaScript written within web page 2.1 Adding JavaScript in an HTML page Figure 2: JavaScript written in an external file 2.2 Hiding code in old browsers • Avoid the appearance of JS code on web page • To hide code, use “ and “ >” • Example: > 2.3 Syntax conventions • • • • • • • Case-sensitive Semicolon (;) Blank spaces Quotes Special Characters Comments The name of the variables and functions 10 12.4 Array Methods • reverse() – reverses the position of the elements in an array – [Firsrt] [last], [Firsrt+1] [last-1], … – Example: > fruits = [“banana", "apricot", “apple"]; 111 12.4 Array Methods • shift() – removes the first element from an array – returns that element – Example: > apple 112 12.4 Array Methods • slice(start, end) – gets a part from start to end of an array – returns a new array – Example: > apple, apricot 113 12.4 Array Methods • splice(index, number, element1, …, elementN) – removes number elements of array (from index) – adds elements in array from index (element1,…) – Example: + tutorials.splice(1, 2, "JavaScript") + ""); document.write(tutorials); > php,JavaScript,flash 114 12.4 Array Methods • sort() – sorts elements of array in an alphabetical order – Example: > css 115 12.4 Array Methods • toString() – converts an array to a string – elements are separated by comma – Example: > “php,html,flash” 116 12.4 Array Methods • unshift(element1, element2, …) – add elements to the beginning of array – return the number of elements in new array – Example: > 4, yahoo.com 117 12.5 Moving Through Array • use for() instruction • Example: > 118 13 Associative Arrays • Introduction • Traversing Arrays 119 13.1 Introduction • Associative arrays are: – arrays that use string in place of index number • Syntax: var array_name = new Array(); array_name['key1'] = value1; array_name['key2'] = value2; //  "array_name“:the name of the array  'key1', 'key2‘: index associated with each element  "value1", "value2" are the values of the elements 120 13.1 Introduction • Example: > http://coursesweb.net 121 13.2 Traversing Arrays • Using for … in • Using for each … in 122 13.2.1 Using for … in ' - value='+ arrex[key]+ ''); } Index=site - value=coursesweb.net > Index=course - value=Web programming Index=tutorials - value=JavaScript 123 13.2.2 Using for each … in > Web programming JavaScript 124 14 References 125 [...]... instructions • Example: var=1; is the same as var = 1; 13 2.3.4 Quotes • Used to delimit strings • Example: – ‘I learn JavaScript’ – “I learn JavaScript” 14 2.3.5 Special Characters • • • • \b \r \’ Example: \f \t \” \n \\ To display text: “JavaScript” Course \ Use syntax: document.write ("\" JavaScript \" Course \\") 15 2.3.6 Comments • To specify role of variables, instructions • To add comment on a single... Example: 11, prints Hello! var d = new Date(); var time = d.getHours(); if (time>11) { document.write("Hello!"); } >< /script> 35 5.2 The “if … else” statement • Syntax: if (condition) { #The code will be #executed if condition # is true … } else{ #The code will be #executed if condition #is false … } • Example: ... any member of an array – Example: array_name[key] 31 4.9 Conditional operator • Syntax: variable = (condition) ? val1 : val2; • Example: var visitor = "man"; message = (visitor=="man") ? "Sir " : "Dear Madam"; document.write(message) < /script> 32 4.10 Operator precedence Table 5: Operator precedence 33 5 Conditional statements • The “if” statement • The “if … else” statement... variable’s value • Operator kinds: – Binary – Unary • Operator types: Arithmetic Assigning Comparison Logical Strings Operators Conditional Functions Operators Objects Operators Logical Typeof 20 4 JavaScript Operators • • • • • • • Arithmetic operators Comparison operators Strings operators Functions operators Objects operators Conditional operators Operators precedence Assigning operators Logical... 11, prints Hello! //Otherwise "It's o`clock" var d = new Date() ; var time = d.getHours(); if (time>11) { document.write("Hello!") ;} else { document.write("It’s " +time+ " o’clock"); } < /script> 36 ... an HTML page • Use “ ” and “< /script> ” • JavaScript code can be added: – In HTML file – In an external js file 2.1 Adding JavaScript in an HTML page Figure 1: JavaScript written within... learn JavaScript’ – “I learn JavaScript” 14 2.3.5 Special Characters • • • •  ’ Example: f ” \ To display text: “JavaScript” Course Use syntax: document.write ("" JavaScript... driven Is not Java Many-functionally Is evolving Covers diverse context Syntax • Adding JavaScript in an HTML page • Hiding code in old browsers • Syntax conventions 2.1 Adding JavaScript in an