Download - CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา
![Page 1: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/1.jpg)
CHAPTER 4Java Script
อ. ยื�นยืง กั�นทะเนตรคณะเทคโนโลยื�สารสนเทศและกัารส��อสาร
มหาวิ�ทยืาล�ยืพะเยืา
1
![Page 2: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/2.jpg)
Content
• JavaScript Introduction• JavaScript Where To• JavaScript Output• JavaScript Variables• JavaScript Operators• JavaScript Data Types• JavaScript Arrays• JavaScript Objects
2
![Page 3: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/3.jpg)
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
![Page 4: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/4.jpg)
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>
![Page 5: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/5.jpg)
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
![Page 6: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/6.jpg)
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
![Page 7: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/7.jpg)
JavaScript Where To (cont.)External JavaScriptExample<!DOCTYPE html><html><body>
<script src="myScript.js"></script></body></html>
7
![Page 8: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/8.jpg)
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
![Page 9: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/9.jpg)
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>
![Page 10: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/10.jpg)
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>
![Page 11: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/11.jpg)
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;
![Page 12: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/12.jpg)
JavaScript OperatorsJavaScript Arithmetic Operators
12
Operator Description+ Addition- Subtraction
* Multiplication
/ Division
% Modulus
++ Increment
-- Decrement
![Page 13: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/13.jpg)
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
![Page 14: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/14.jpg)
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
![Page 15: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/15.jpg)
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
![Page 16: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/16.jpg)
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
![Page 17: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/17.jpg)
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
![Page 18: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/18.jpg)
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
![Page 19: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/19.jpg)
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
![Page 20: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/20.jpg)
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
![Page 21: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/21.jpg)
JavaScript Arrays (cont.)Looping Array ElementsExamplevar index;var fruits = ["Banana", "Orange", "Apple", "Mango"];for (index = 0; index < fruits.length; index++) { text += fruits[index];}
21
![Page 22: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/22.jpg)
JavaScript ObjectsReal Life Objects, Properties, and Methods
22
![Page 23: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/23.jpg)
JavaScript ObjectsObject Propertiesvar person = {
firstName:"John", lastName:"Doe", age:50,eyeColor:"blue“
};
23
Property Property Value
firstName John
lastName Doe
age 50
eyeColor blue
![Page 24: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/24.jpg)
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;}
![Page 25: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/25.jpg)
JavaScript ObjectsAccessing Object PropertiesExample
person.lastName; Or person["lastName"];
25
Accessing Object MethodsExample
name = person.fullName();
![Page 26: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/26.jpg)
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
![Page 27: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/27.jpg)
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
![Page 28: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/28.jpg)
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
}
![Page 29: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/29.jpg)
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
![Page 30: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/30.jpg)
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.
![Page 31: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/31.jpg)
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
![Page 32: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/32.jpg)
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
![Page 33: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/33.jpg)
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
![Page 34: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/34.jpg)
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
![Page 35: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/35.jpg)
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
![Page 36: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/36.jpg)
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
![Page 37: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/37.jpg)
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";}
![Page 38: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/38.jpg)
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”}
![Page 39: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/39.jpg)
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>
![Page 40: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/40.jpg)
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>
![Page 41: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/41.jpg)
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>
![Page 42: CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา](https://reader036.vdocuments.mx/reader036/viewer/2022062321/56649ebe5503460f94bc7c60/html5/thumbnails/42.jpg)
42
THE END