chapter 4 java script อ. ยืนยง กันทะเนตร...
TRANSCRIPT
CHAPTER 4Java Script
อ. ยื�นยืง กั�นทะเนตรคณะเทคโนโลยื�สารสนเทศและกัารส��อสาร
มหาวิ�ทยืาล�ยืพะเยืา
1
Content
• JavaScript Introduction• JavaScript Where To• JavaScript Output• JavaScript Variables• JavaScript Operators• JavaScript Data Types• JavaScript Arrays• JavaScript Objects
2
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
JavaScript Introduction
JavaScript is the most popular programming language in the world.
This page contains some examples of what JavaScript can do.
4
The <script> TagExample<script>
document.getElementById("demo").innerHTML = "My First JavaScript";</script>
JavaScript Where ToJavaScript in <head><!DOCTYPE html><html><head><script>function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed.";}</script></head><body><h1>My Web Page</h1><p id="demo">A Paragraph</p><button type="button" onclick="myFunction()">Try it</button></body></html> 5
JavaScript Where To (cont.)JavaScript in <body><!DOCTYPE html><html><body> <h1>My Web Page</h1><p id="demo">A Paragraph</p><button type="button" onclick="myFunction()">Try it</button>
<script>function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed.";}</script>
</body></html>
6
JavaScript Where To (cont.)External JavaScriptExample<!DOCTYPE html><html><body>
<script src="myScript.js"></script></body></html>
7
JavaScript OutputJavaScript 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
JavaScript Output (cont.)Using window.alert()<script>
window.alert(5 + 6);</script>
9
Using document.write()<script>
document.write(5 + 6);</script>
Using innerHTML<p id="demo"></p>
<script>document.getElementById("demo").innerHTML = 5 + 6;
</script>
JavaScript Output (cont.)Using window.alert()<script>
window.alert(5 + 6);</script>
10
Using document.write()<script>
document.write(5 + 6);</script>
Using innerHTML<p id="demo"></p>
<script>document.getElementById("demo").innerHTML = 5 + 6;
</script>
JavaScript VariablesJavaScript VariablesExamplevar x = 5;var y = 6;var z = x + y;
11
Much Like AlgebraExamplevar price1 = 5;var price2 = 6;var total = price1 + price2;
One Statement, Many VariablesExample var person = "John Doe", carName = "Volvo",
price = 200;
JavaScript OperatorsJavaScript Arithmetic Operators
12
Operator Description+ Addition- Subtraction
* Multiplication
/ Division
% Modulus
++ Increment
-- Decrement
JavaScript OperatorsJavaScript Assignment Operators
13
Operator Example Same As= x = y x = y
+= x += y x = x + y-= x -= y x = x - y*= x *= y x = x * y/= x /= y x = x / y%= x %= y x = x % y
JavaScript OperatorsJavaScript Comparison and Logical Operators
14
Operator Description== 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
JavaScript Data TypesString, Number, Boolean, Array, Object.
JavaScript Data Typesvar length = 16; // Numbervar lastName = "Johnson"; // Stringvar cars = ["Saab", "Volvo", "BMW"]; // Arrayvar x = {firstName:"John", lastName:"Doe"}; // Object
15
The Concept of Data TypesJavaScript evaluates expressions from left to right. Different sequences can produce different .var x = 16 + 4 + "Volvo"; //output 20Volvovar x = "Volvo" + 16 + 4; //output Volvo164
JavaScript Data Types (cont.)JavaScript Has Dynamic Typesvar x; // Now x is undefinedvar x = 5; // Now x is a Numbervar x = "John"; // Now x is a String
16
JavaScript Stringsvar carName = "Volvo XC60"; // Using double quotesvar carName = 'Volvo XC60'; // Using single quotes
JavaScript Numbersvar x1 = 34.00; // Written with decimalsvar x2 = 34; // Written without decimals
JavaScript Data Types (cont.)JavaScript Booleansvar x = true;var y = false;
17
JavaScript Arraysvar cars = ["Saab", "Volvo", "BMW"];
JavaScript Objectsvar person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
The typeof Operatortypeof "John" // Returns stringtypeof [1,2,3,4] // Returns object
JavaScript Data Types (cont.)JavaScript Booleansvar x = true;var y = false;
18
JavaScript Arraysvar cars = ["Saab", "Volvo", "BMW"];
JavaScript Objectsvar person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
The typeof Operatortypeof "John" // Returns stringtypeof [1,2,3,4] // Returns object
JavaScript ArraysTry it Yourselfvar cars = ["Saab", "Volvo", "BMW"];Orvar cars = [ "Saab", "Volvo", "BMW"];
19
Access the Elements of an Arrayvar name = cars[0]; // Saabvar name = cars[1]; // Volvovar name = cars[2]; // BMW
JavaScript Arrays (cont.)The length PropertyExamplevar fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.length; // the length of fruits is 4
20
Adding Array Elementsvar fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.push("Lemon"); // adds a new element (Lemon) to fruits
JavaScript Arrays (cont.)Looping Array ElementsExamplevar index;var fruits = ["Banana", "Orange", "Apple", "Mango"];for (index = 0; index < fruits.length; index++) { text += fruits[index];}
21
JavaScript ObjectsReal Life Objects, Properties, and Methods
22
JavaScript ObjectsObject Propertiesvar person = {
firstName:"John", lastName:"Doe", age:50,eyeColor:"blue“
};
23
Property Property Value
firstName John
lastName Doe
age 50
eyeColor blue
JavaScript ObjectsObject Methodsvar person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function(c) { return this.firstName + " " + this.lastName; }};
24
Property Property Value
firstName John
lastName Doe
age 50
eyeColor blue
fullName function() {return this.firstName + " " + this.lastName;}
JavaScript ObjectsAccessing Object PropertiesExample
person.lastName; Or person["lastName"];
25
Accessing Object MethodsExample
name = person.fullName();
JavaScript FunctionsA JavaScript function is a block of code designed to perform a particular task.A JavaScript function is executed when "something" invokes it (calls it).
Examplefunction myFunction(p1, p2) { return p1 * p2; }Syntaxfunction name(parameter1, parameter2, parameter3) { code to be executed}
26
JavaScript Functions (cont.)Function Return
Examplevar 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
JavaScript ScopeJavaScript ScopeIn 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 carNamefunction myFunction() {
// code here can use carName
}
JavaScript EventsJavaScript ScopeIn JavaScript, objects and functions are also variables.In JavaScript, scope is the set of variables, objects, and functions you have access to.
Example<button onclick="displayDate()">The time is?</button>
29
JavaScript Events (cont.)
30
Event Description
onchange An HTML element has been changed
onclick The user clicks an HTML element
onmouseover The user moves the mouse over an HTML element
onmouseout The user moves the mouse away from an HTML element
onkeydown The user pushes a keyboard key
onload The browser has finished loading the page
The list is much longer: W3Schools JavaScript Reference HTML DOM Events.
JavaScript String MethodsFinding a String in a Stringvar str = "Please locate where 'locate' occurs!";var pos = str.indexOf("locate"); Orvar pos = str.search("locate");
31
The slice() Methodvar str = "Apple, Banana, Kiwi";var res = str.slice(7,13); // Banana
The substring() Methodvar str = "Apple, Banana, Kiwi";var res = str.substring(7,13); // Banana
JavaScript String Methods (cont.)The substr() Methodvar str = "Apple, Banana, Kiwi";var res = str.substr(7,6); // Banana
32
Replacing String Contentstr = "Please visit Microsoft!";var n = str.replace("Microsoft","W3Schools");
Converting to Upper and Lower Casevar text1 = "Hello World!"; // Stringvar text2 = text1.toUpperCase(); // text2 is text1 converted to uppervar text3 = text1.toLowerCase(); // text2 is text1 converted to lower
JavaScript Number MethodsThe toString() MethodExamplevar 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() MethodExamplex = true;Number(x); // returns 1x = false; Number(x); // returns 0
JavaScript Number Methods (cont.)The parseInt() MethodExampleparseInt("10"); // returns 10parseInt("10.33"); // returns 10parseInt("10 20 30"); // returns 10parseInt("10 years"); // returns 10parseInt("years 10"); // returns NaN
34
The parseFloat() MethodExampleparseFloat("10"); // returns 10parseFloat("10.33"); // returns 10.33parseFloat("10 20 30"); // returns 10parseFloat("10 years"); // returns 10parseFloat("years 10"); // returns NaN
JavaScript Math ObjectMath.min() and Math.max()ExampleMath.min(0, 150, 30, 20, -8, -200); // returns -200Math.max(0, 150, 30, 20, -8, -200); // returns 150
35
Math.random()ExampleMath.random(); // returns a random number
Math.round()ExampleMath.round(4.7); // returns 5Math.round(4.4); // returns 4
JavaScript Math Object (cont.)Math.ceil()ExampleMath.ceil(4.4); // returns 5
36
Math.floor()ExampleMath.floor(4.7); // returns 4Math.floor(Math.random() * 11); // returns a random number between 0 and 10
JavaScript If...Else StatementsThe if StatementExampleif (hour < 18) { greeting = "Good day";}
37
The else if StatementExampleif (time < 10) { greeting = "Good morning";} else if (time < 20) { greeting = "Good day";} else { greeting = "Good evening";}
The else StatementExampleif (hour < 18) { greeting = "Good day";} else { greeting = "Good evening";}
JavaScript Switch StatementSyntaxExampleswitch(expression) { case n: code block break; case n: code block break; default: default code block}
38
SyntaxExampleswitch(test = “cat") { case 0: test = “cat”; break; case 1: test = “dog”; break; case 2: test = “fish”; break; default: test = “undefined”}
JavaScript For LoopSyntaxfor (statement 1; statement 2; statement 3) { code block to be executed}
39
Example<script>var cars = ["BMW", "Volvo", "Saab", "Ford"];var text = "";var i;for (i = 0; i < cars.length; i++) { text += cars[i] + "<br>";}document.getElementById("demo").innerHTML = text;</script>
JavaScript While LoopSyntaxwhile (condition) { code block to be executed}
40
Example<script>function myFunction() { var text = ""; var i = 0; while (i < 10) { text += "<br>The number is " + i; i++; }document.getElementById("demo").innerHTML = text;}</script>
JavaScript While Loop (cont.)Syntaxdo { code block to be executed}while (condition);
41
Example<script>function myFunction() { var text = "" var i = 0; do { text += "<br>The number is " + i; i++; } while (i < 10) document.getElementById("demo").innerHTML = text;}</script>
42
THE END