การสร้าง WebPage ด้วย Java Script Wachirawut Thamviset.

งานนำเสนอเรื่อง: "การสร้าง WebPage ด้วย Java Script Wachirawut Thamviset."— ใบสำเนางานนำเสนอ:

1 การสร้าง WebPage ด้วย Java Script Wachirawut Thamviset

2 What is JavaScript? JavaScript is a scripting language A scripting language is a lightweight programming language A JavaScript is lines of executable computer code A JavaScript can be inserted into an HTML page JavaScript is an open scripting language that anyone can use without purchasing a license JavaScript is supported by all major browsers like Netscape and Internet Explorer

3 How Does it Work? When a JavaScript is inserted into an HTML document, the Internet browser will read the HTML and interpret the JavaScript. The JavaScript can be executed immediately, or at a later event. – var i=5; for(i=0;i

4 What can a JavaScript Do? JavaScript gives HTML designers a programming tool HTML authors are normally not programmers, but since JavaScript is a very light programming language with a very simple syntax, almost anyone can start putting small "snippets" of code into their HTML documents

5 What can a JavaScript Do? JavaScript can put dynamic text into an HTML page A JavaScript statement like this: document.write(" " + name + " ") can write a variable text into the display of an HTML page, just like the static HTML text: Bill Gates does.

6 What can a JavaScript Do? JavaScript can react to events A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element.

7 What can a JavaScript Do? JavaScript can read and write HTML elements A JavaScript can read an HTML element and change the content of an HTML element.

8 What can a JavaScript Do? JavaScript can be used to validate data JavaScripts can be used to validate data in a form before it is submitted to a server. This function is particularly well suited to save the server from extra processing.

9 JavaScript Joke Customer: "My browser gives me a JavaScript error.” “ Is JavaScript a dangerous virus?"

10 How to Put a JavaScript Into an HTML Document document.write("Hello World!") Hello World

11 Ending Statements with a Semicolon? With the traditional programming languages C++ and Java, each code statement has to end with a semicolon. Many programmers continue this habit when writing JavaScript, but in general, semicolons are optional and are required only if you want to put more than one statement on a single line

12 How to Handle Older Browsers <!-- some statements //--> ใส่ <!-- เพื่อไม่ให้ Browser รุ่นเก่าๆ ที่ไม่สนับสนุน JavaScript แสดงผล Code ของ Java Script

13 Where to Put the JavaScript Head section –Scripts that contain functions go in the head section of the document. Then we can be sure that the script is loaded before the function is called. Body section –Execute a script that is placed in the body section. External script –How to access an external script.

14 Scripts in the head section: some statements Script ในส่วนนี้จะถูก Load ให้ทำงานก่อนส่วนอื่นๆ ใช้ในการสร้าง Function หรือ การกำหนดตัวแปร ค่าเริ่มต้นต่างๆ

15 Scripts in the body section: some statements ใช้สำหรับการ Genarate Content ของ WebPage

16 Scripts in both the body and the head section: some statements some statements เขียน script ได้ ทั้ง 2 ที่

17 How to Run an External JavaScript สามารถเขียน Script แยกไว้ในไฟล์ภายนอก HTML ปกติจะตั้งเป็น.JS document.write("This script is external") file: xxx.js

18 Variables A variable is a "container" for information you want to store. A variable's value can change during the script. You can refer to a variable by name to see its value or to change its value. Rules for Variable names: Variable names are case sensitive They must begin with a letter or the underscore character

19 Variables Declare a Variable # สร้างด้วยประโยค var var strname = some value var i = 5 # สร้างโดยไม่ใช้ประโยค var Strname = some value i = 5

20 Variables Lifetime of Variables When you declare a variable within a function, the variable can only be accessed within that function. When you exit the function, the variable is destroyed. These variables are called local variables. You can have local variables with the same name in different functions, because each is recognized only by the function in which it is declared. If you declare a variable outside a function, all the functions on your page can access it. The lifetime of these variables starts when they are declared, and ends when the page is closed.

21 JavaScript Operators Arithmetic Operators (+,-,*,/,%) Comparison Operators (==,>=,,<) Assignment Shorthand Operators (+=,-=,*=,/=,%=) Logical Operators (&&,||,!) String Operator เหมือน C/C++ สามารถ รวม String ได้ เหมือน Java เช่น S1= “Computer” + “ Science”; S2 = “5+10 = “ + 5 +10;

22 Functions ฟังก์ชันหรือโปรแกรมย่อย ควรนิยามฟังก์ชันไว้ในส่วนหัวของไฟล์ และ เพื่อเรียกใช้ได้ในภายหลัง การเรียกฟังก์ชัน : – สามารถเรียกจากการกำหนด Event ของ เอกสาร เช่น OnClick, OnMouseEnter … – หรือ เรียกจากฟังก์ชัน ด้วยกันเอง

23 Functions การสร้างฟังก์ชัน function myfunction(argument1,argument2,etc) { some statements } function myfunction(a,b) { c=a+b; return c; } มีการ return ผลลัพธ์ การเรียก x = myfunction(5,3); y = myfunction(“Hello”,”JavaScript”);

24 ประโยคเงื่อนไข if ( เงื่อนไข ){ Statements } if ( เงื่อนไข ){ Statements เมื่อเป็นจริง }else { Statement เมื่อเป็นเท็จ }

25 ประโยคเงื่อนไข var r=Math.random() if (r>0.5) { document.write(” LOVE ") } else { document.write(” NOT LOVE ") }

26 ประโยคเงื่อนไข switch (expression) { case label1: code to be executed if expression = label1 break case label2: code to be executed if expression = label2 break default: code to be executed if expression is different from both label1 and label2 }

27 ประโยคเงื่อนไข Conditional Operator รูปแบบ : variablename=(condition)?value 1:value2 ตัวอย่าง greeting=(visitor=="PRES")?"Dear President ":"Dear "

28 การวนลูป (Looping) for (initialization; condition; increment){ statement } while (condition){ statement will repeat the loop while a condition is true. } do { statement will repeat the loop while a condition is true. } while (condition)

29 Object ใน JavaScript Window Objects HTML Objects หรือ Document Object Built-in Objects User Define Objects