Java Script Fundamental Course Web Design and Development
Java. Script Fundamental Course: Web Design and Development Lecturer: SOK Phearin Email: phearin. sok@gmail. com Tel: (+855) 92 990 233
ម តក • Introduction to Java. Script • Java. Script - Where To Code • Java. Script Output • Basic Syntax • Java. Script Principles (Data Types, Variables, Operators) • Arrays and Objects
DHTML = Dynamic Hyper Text Markup Language (Dynamic HTML) DHTML = HTML + CSS + Java. Script
Java. Script <!DOCTYPE html> <body> <script type="text/javascript"> alert('Hello World!'); </script> </body> </html>
Java. Script Execution • Java. Script ម នតរវប នដណ រក រន ព លគ ហទពរតរវប នផទក ឬព លដ លម នសកមមភ ពពអនកបរ បរ ស ឬBrowser។ <!DOCTYPE html> <html> Page Loading <body> <script type="text/javascript"> alert('Hello World!'); </script> </body> </html> (Webpage Loading) <!DOCTYPE html> <body> Event Fired <p id="demo">Original Content</p> <button type="button" onclick="document. get. Element. By. Id('demo'). inner. HT ML = 'Hello World!'”>Click Me!</button> </body> </html>
Internal Java. Script in <head> <!DOCTYPE html> <html> Java. Script <head> <script type=”text/javascript"> សរស រកនងសល ក function my. Function() { document. get. Element. By. Id("demo"). inner. HTML = "Hello Java. Script!"; } </script> <title>Java. Script in Head</title> </head> <body> <p id="demo">Here is a paragraph. </p> <button type="button" onclick="my. Function()">Try it</button> </body> </html> <head>
Internal Java. Script in <body> <!DOCTYPE html> <head> <title>Java. Script in Head</title> </head> <body> <p id="demo">Here is a paragraph. </p> Java. Script សរស រកនងសល ក <button type="button" onclick="my. Function()">Try it</button> <script type="text/javascript"> function my. Function() { document. get. Element. By. Id("demo"). inner. HTML = "Hello Java. Script!"; } </script> </body> </html> <body>
External Java. Script • Java. Script HTML។ តរវប នដ កន ឯកស រមយផស ងដ ចដ យឡ កពឯកស រ ហ យឯកស រន តរវប នភជ បជ មយនងឯកស រ HTML <script ដ យបរ បរ សសល ក type=“text/javascript” src=“path/to/javascriptfile”></script> ជ ជនយ។ <head> <script type="text/javascript" src="myscript. js"> </head> My Page. html function my. Function() { document. get. Element. By. Id("demo"). inner. HTML = "Hello Java. Script!"; myscript. js }
window. alert <!DOCTYPE html> <body> <script type="text/javascript"> alert('Hello World!'); </script> </body> </html>
document. write <!DOCTYPE html> <body> <script type="text/javascript"> document. write('Hello World!'); </script> </body> </html>
inner. HTML <!DOCTYPE html> <body> <p id="demo">Original Content</p> <button type="button" onclick="document. get. Element. By. Id('demo'). inner. HTML = 'Hello World!'">Click Me!</button> </body> </html>
console. log <!DOCTYPE html> <body> <p>Here is the console log demonstration. Open the Java. Script Console in your browser to see the output. </p> <script type="text/javascript"> console. log("Hello World!"); </script> </body> </html>
Basic Syntax • Comments របស Java. Script ម នលកខណ ដចខ ងករ ម • មយបនទ ត បរ សញញ // ឧទ ហរណ៖ //my first program • ចរ នបនទ ត បរ សញញ /* comments here */ ឧទ ហរណ៖ /* to document the code and ease for reading, a good programmer always use comments. */
Variables and Data Types <!DOCTYPE html> <body> <p id="mypara"></p> <script type="text/javascript"> var gender = "male"; var married = false; var name = "Lihour", address = "Phnom Penh", price = 200; document. get. Element. By. Id("mypara"). inner. HTML = name; </script> </body> </html>
Simple Array Demonstration <!DOCTYPE html> <body> <p id="mypara"></p> <script type="text/javascript"> var student. Names = ["Sarath", "Lihour", "Sin Try", "Kasy", "Royal"]; document. get. Element. By. Id("mypara"). inner. HTML = student. Names[0]; </script> </body> </html>
Simple Object Demonstration <!DOCTYPE html> <body> <p id="mypara"></p> <script type="text/javascript"> var student = {name: "Sin Try", gender: "male", age: 18, id: 1001}; document. get. Element. By. Id("mypara"). inner. HTML = student. name; </script> </body> </html>
Operators <!DOCTYPE html> <body> <h 1>The Operators Demo</h 1> <p id="mypara"></p> <script type="text/javascript"> var a = 10, b = 15; var c = a + b; var d = (a + b) / b; document. get. Element. By. Id("mypara"). inner. HTML = c; // document. get. Element. By. Id("mypara"). inner. HTML = d; </script> </body> </html>
Operators <!DOCTYPE html> <body> <h 1>The Operators Demo</h 1> <p id="mypara"></p> <script type="text/javascript"> var name = "Sin Try"; var age = 18; var myinfo = name + age; document. get. Element. By. Id("mypara"). inner. HTML = myinfo; </script> </body> </html>
Operators <!DOCTYPE html> <body> <h 1>The Operators Demo</h 1> <script type="text/javascript"> var a = 4, b = 5; var c = (a==4) && (b==5); document. write(“Comparison Result : (a==4) && (b==5)” + c); var d = (a==4) && (b!=5); document. write(“Comparison Result : (a==4) && (b!=5)” + d); </script> </body> </html>
![Popup Boxes • Alert box with text and [OK] button • Just a message](http://slidetodoc.com/presentation_image_h2/ac8a30b541f189ebb7a69f4fac81a524/image-35.jpg "Popup Boxes • Alert box with text and [OK] button • Just a message")
Popup Boxes • Alert box with text and [OK] button • Just a message shown in a dialog box: • Confirmation box • alert("Some text here"); Contains text, [OK] button and [Cancel] button: confirm("Are you sure? "); • Prompt box • Contains text, input field with default value: prompt ("enter amount", 10);
- Slides: 35