1. CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา 1

2. Content JavaScript Introduction JavaScript Where To JavaScript Output JavaScript Variables JavaScript Operators JavaScript Data Types JavaScript Arrays JavaScript Objects 2

3. Content JavaScript Functions JavaScript Scope JavaScript String Methods JavaScript Number Methods JavaScript Math Object JavaScript If...Else Statements JavaScript Switch Statement JavaScript For Loop JavaScript While Loop 3

4. JavaScript Introduction JavaScript is the most popular programming language in the world. This page contains some examples of what JavaScript can do. 4 The Tag Example document.getElementById("demo").innerHTML = "My First JavaScript";

5. JavaScript Where To JavaScript in function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } My Web Page A Paragraph Try it 5

6. JavaScript Where To (cont.) JavaScript in My Web Page A Paragraph Try it function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } 6

7. JavaScript Where To (cont.) External JavaScript Example 7

8. JavaScript Output JavaScript Display Possibilities Writing into an alert box, using window.alert(). Writing into the HTML output using document.write(). Writing into an HTML element, using innerHTML. Writing into the browser console, using console.log(). 8

9. JavaScript Output (cont.) Using window.alert() window.alert(5 + 6); 9 Using document.write() document.write(5 + 6); Using innerHTML document.getElementById("demo").innerHTML = 5 + 6;

10. JavaScript Output (cont.) Using window.alert() window.alert(5 + 6); 10 Using document.write() document.write(5 + 6); Using innerHTML document.getElementById("demo").innerHTML = 5 + 6;

11. JavaScript Variables Example var x = 5; var y = 6; var z = x + y; 11 Much Like Algebra Example var price1 = 5; var price2 = 6; var total = price1 + price2; One Statement, Many Variables Example var person = "John Doe", carName = "Volvo", price = 200;

12. JavaScript Operators JavaScript Arithmetic Operators 12 OperatorDescription +Addition -Subtraction *Multiplication /Division %Modulus ++Increment --Decrement

13. JavaScript Operators JavaScript Assignment Operators 13 OperatorExampleSame As =x = y +=x += yx = x + y -=x -= yx = x - y *=x *= yx = x * y /=x /= yx = x / y %=x %= yx = x % y

14. JavaScript Operators JavaScript Comparison and Logical Operators 14 OperatorDescription ==equal to ===equal value and equal type !=not equal !==not equal value or not equal type >greater than <less than >=greater than or equal to <=less than or equal to

15. JavaScript Data Types String, Number, Boolean, Array, Object. JavaScript Data Types var length = 16; // Number var lastName = "Johnson"; // String var cars = ["Saab", "Volvo", "BMW"]; // Array var x = {firstName:"John", lastName:"Doe"}; // Object 15 The Concept of Data Types JavaScript evaluates expressions from left to right. Different sequences can produce different. var x = 16 + 4 + "Volvo"; //output 20Volvo var x = "Volvo" + 16 + 4; //output Volvo164

16. JavaScript Data Types (cont.) JavaScript Has Dynamic Types var x; // Now x is undefined var x = 5; // Now x is a Number var x = "John"; // Now x is a String 16 JavaScript Strings var carName = "Volvo XC60"; // Using double quotes var carName = 'Volvo XC60'; // Using single quotes JavaScript Numbers var x1 = 34.00; // Written with decimals var x2 = 34; // Written without decimals

17. JavaScript Data Types (cont.) JavaScript Booleans var x = true; var y = false; 17 JavaScript Arrays var cars = ["Saab", "Volvo", "BMW"]; JavaScript Objects var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; The typeof Operator typeof "John" // Returns string typeof [1,2,3,4] // Returns object

18. JavaScript Data Types (cont.) JavaScript Booleans var x = true; var y = false; 18 JavaScript Arrays var cars = ["Saab", "Volvo", "BMW"]; JavaScript Objects var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; The typeof Operator typeof "John" // Returns string typeof [1,2,3,4] // Returns object

19. JavaScript Arrays Try it Yourself var cars = ["Saab", "Volvo", "BMW"]; Or var cars = [ "Saab", "Volvo", "BMW" ]; 19 Access the Elements of an Array var name = cars[0]; // Saab var name = cars[1]; // Volvo var name = cars[2]; // BMW

20. JavaScript Arrays (cont.) The length Property Example var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.length; // the length of fruits is 4 20 Adding Array Elements var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.push("Lemon"); // adds a new element (Lemon) to fruits

21. JavaScript Arrays (cont.) Looping Array Elements Example var index; var fruits = ["Banana", "Orange", "Apple", "Mango"]; for (index = 0; index < fruits.length; index++) { text += fruits[index]; } 21

22. JavaScript Objects Real Life Objects, Properties, and Methods 22

23. JavaScript Objects Object Properties var person = { firstName:"John", lastName:"Doe", age:50, eyeColor:"blue“ }; 23 PropertyProperty Value firstNameJohn lastNameDoe age50 eyeColorblue

24. JavaScript Objects Object Methods var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function(c) { return this.firstName + " " + this.lastName; } }; 24 PropertyProperty Value firstNameJohn lastNameDoe age50 eyeColorblue fullNamefunction() {return this.firstName + " " + this.lastName;}

25. JavaScript Objects Accessing Object Properties Example person.lastName; Or person["lastName"]; 25 Accessing Object Methods Example name = person.fullName();

26. JavaScript Functions A JavaScript function is a block of code designed to perform a particular task. A JavaScript function is executed when "something" invokes it (calls it). Example function myFunction(p1, p2) { return p1 * p2; } Syntax function name(parameter1, parameter2, parameter3) { code to be executed } 26

27. JavaScript Functions (cont.) Function Return Example var x = myFunction(4, 3); // Function is called, return value will end up in x function myFunction(a, b) { return a * b; // Function returns the product of a and b } 27

28. JavaScript Scope In JavaScript, objects and functions are also variables. In JavaScript, scope is the set of variables, objects, and functions you have access to. 28 Local JavaScript Variables // code here can not use carName function myFunction() { var carName = "Volvo"; // code here can use carName } Global JavaScript Variables var carName = " Volvo"; // code here can use carName function myFunction() { // code here can use carName }

29. JavaScript Events JavaScript Scope In JavaScript, objects and functions are also variables. In JavaScript, scope is the set of variables, objects, and functions you have access to. Example The time is? 29

30. JavaScript Events (cont.) 30 EventDescription onchangeAn HTML element has been changed onclickThe user clicks an HTML element onmouseoverThe user moves the mouse over an HTML element onmouseoutThe user moves the mouse away from an HTML element onkeydownThe user pushes a keyboard key onloadThe browser has finished loading the page The list is much longer: W3Schools JavaScript Reference HTML DOM Events.W3Schools JavaScript Reference HTML DOM Events

31. JavaScript String Methods Finding a String in a String var str = "Please locate where 'locate' occurs!"; var pos = str.indexOf("locate"); Or var pos = str.search("locate"); 31 The slice() Method var str = "Apple, Banana, Kiwi"; var res = str.slice(7,13); // Banana The substring() Method var str = "Apple, Banana, Kiwi"; var res = str.substring(7,13); // Banana

32. JavaScript String Methods (cont.) The substr() Method var str = "Apple, Banana, Kiwi"; var res = str.substr(7,6); // Banana 32 Replacing String Content str = "Please visit Microsoft!"; var n = str.replace("Microsoft","W3Schools"); Converting to Upper and Lower Case var text1 = "Hello World!"; // String var text2 = text1.toUpperCase(); // text2 is text1 converted to upper var text3 = text1.toLowerCase(); // text2 is text1 converted to lower

33. JavaScript Number Methods The toString() Method Example var x = 123; x.toString(); // returns 123 from variable x (123).toString(); // returns 123 from literal 123 (100 + 23).toString(); // returns 123 from expression 100 + 23 33 The Number() Method Example x = true; Number(x); // returns 1 x = false; Number(x); // returns 0

34. JavaScript Number Methods (cont.) The parseInt() Method Example parseInt("10"); // returns 10 parseInt("10.33"); // returns 10 parseInt("10 20 30"); // returns 10 parseInt("10 years"); // returns 10 parseInt("years 10"); // returns NaN 34 The parseFloat() Method Example parseFloat("10"); // returns 10 parseFloat("10.33"); // returns 10.33 parseFloat("10 20 30"); // returns 10 parseFloat("10 years"); // returns 10 parseFloat("years 10"); // returns NaN

35. JavaScript Math Object Math.min() and Math.max() Example Math.min(0, 150, 30, 20, -8, -200); // returns -200 Math.max(0, 150, 30, 20, -8, -200); // returns 150 35 Math.random() Example Math.random(); // returns a random number Math.round() Example Math.round(4.7); // returns 5 Math.round(4.4); // returns 4

36. JavaScript Math Object (cont.) Math.ceil() Example Math.ceil(4.4); // returns 5 36 Math.floor() Example Math.floor(4.7); // returns 4 Math.floor(Math.random() * 11); // returns a random number between 0 and 10

37. JavaScript If...Else Statements The if Statement Example if (hour < 18) { greeting = "Good day"; } 37 The else if Statement Example if (time < 10) { greeting = "Good morning"; } else if (time < 20) { greeting = "Good day"; } else { greeting = "Good evening"; } The else Statement Example if (hour < 18) { greeting = "Good day"; } else { greeting = "Good evening"; }

38. JavaScript Switch Statement Syntax Example switch(expression) { case n: code block break; case n: code block break; default: default code block } 38 Syntax Example switch(test = “cat") { case 0: test = “cat”; break; case 1: test = “dog”; break; case 2: test = “fish”; break; default: test = “undefined” }

39. JavaScript For Loop Syntax for (statement 1; statement 2; statement 3) { code block to be executed } 39 Example var cars = ["BMW", "Volvo", "Saab", "Ford"]; var text = ""; var i; for (i = 0; i < cars.length; i++) { text += cars[i] + " "; } document.getElementById("demo").innerHTML = text;

40. JavaScript While Loop Syntax while (condition) { code block to be executed } 40 Example function myFunction() { var text = ""; var i = 0; while (i < 10) { text += " The number is " + i; i++; } document.getElementById("demo").innerHTML = text; }

41. JavaScript While Loop (cont.) Syntax do { code block to be executed } while (condition); 41 Example function myFunction() { var text = "" var i = 0; do { text += " The number is " + i; i++; } while (i < 10) document.getElementById("demo").innerHTML = text; }

42. 42 THE END