1. This is our seminar JavaScript And DOM This is our seminar JavaScript And DOM

2. Member: Hu ỳ nh Qu ố c Thanh Thái Thánh Tr ị

3. Main content What’s JavaScript? Different between ID and Name Method getElementById () and getElementsByName (). How to manipulate properties of HTML tags? Events of JavaScript.

4. Main content What’s JavaScript? Different between ID and Name. Method Method getElementById () and getElementsByName (). How to manipulate properties of HTML tags? Events of JavaScript.

5. What’s JavaScript? JavaScript is designed to interact with the HTML page. JavaScript is usually embedded directly into HTML pages. JavaScript is a scripting language(scripting language is the small language program) JavaScript is a language interpreter (ie the script is executed without compiling first). JavaScript and Java are two completely different language about the content and design.

6. JavaScript do for: JavaScript provides the HTML design a programming tool - HTML design people often are not programmers, but JavaScript is a scripting language with syntax very easy. Most people can put the code is in your HTML pages. JavaScript can add text to the HTML page JavaScript can interact with the event - A short code can be executed when events occur, such as: load complete page or click on a certain HTML element. JavaScript can read write the HTML element - JavaScript can read and change the HTML element. JavaScript can be used to pass data - JavaScript can be used to standardize data for the server to avoid multiple handling. JavaScript can be used to create cookie - JavaScript can store and get information on the client.

7. Placing JavaScript in HTML Using tag tag to insert JavaScript into HTML pages EX: document.write("Hello World!")

8. JavaScript code executed outside When you want to execute the JavaScript on several pages that we should write a script file *. js, then call the properties that it used "src". *. Js file does not contain tag Example: For example, the javascript code stored in the file test.js as follows: document.write ( "This script is external") Call the script using attribute "src" from HTML

9. Placement JavaScript code Placed between tag and : the script will execute as soon as the page is opened. Placed between tag and : The script in the body is executed when the page is open. Placed between tag and or and : The script can be placed in the head or the body of the HTML tag. Number of the script is not limited.

10. Operator OperatorDescriptionSampleResults + Sum x= 2+2 s = “2” + “2” x=4 x=“22” - Subtraction x=2 5-x 3 * Multiplication x=4 x*5 20 / Division 15/5 5/2 3 2.5 % Get the balance of the division 5%2 10%8 10%2 120120 ++ An increase x=5 x++ X=6 -- Reduced to a x=5 x-- X=4

11. Operator assigned OperatorSampleOperation equivalent =X=Y +=X+=YX=X+Y -=X-=YX=X-Y *=X*=YX=X*Y /=X/=YX=X/Y %=X%=YX=X%Y

12. Comparison operators OperatorDescriptionSample ==compared with 5==8 returns false !=compared with 5!=8 returns true >larger 5>8 returns false <smaller 5<8 returns true >=Greater than or equal 5>=8 returns false <=less than or equal 5<=8 returns true

13. Logical operator OperatorDescriptionSample && Authority AND. x=6 y=3 (x 1) return TRUE || Authority OR x=6 y=3 (x==5 || y==5) return false ! Authority NOT x=6 y=3 x != y return true

14. Operator on the variable type string Used to "+" to link the chain together Ex txt1 = "What a very"; txt2 = "nice day!"; txt3 = txt1 + txt2; / / Results txt3 = "verynice What a day!".

16. Conditional statements If…else if (condition) { // code to be executed if condition is true } switch switch(n) { case 1: execute code block 1 break; case 2: execute code block 2 break; default: code to be executed if n is different from case 1 and 2 }

17. JavaScript loops For loop for (var = startvalue; var <= endvalue; var = increment) { // code to be executed } While loop while (var<=endvalue) { // code to be executed } For…In for (variable in object) { // code to be executed }

18. Some examples

19. Main content What’s JavaScript? Different between ID and Name. Method Method getElementById () and getElementsByName (). How to manipulate properties of HTML tags? Events of JavaScript.

20. Different between ID and Name ID and Name are two identifiers to retrieve values [values] of a certain object. Id commonly used in the DOM structure for access to the object (,,...) with the aim may be (add / delete / milk) content of the object. Name: identifier for the element of the form (,,...) Each object has only one unique id. Often used in the CSS id for the object's calculated only on the page (eg frame edges (wrapper), the main menu (main menu ),...). Name of the card can overlap.

21. Main content What’s JavaScript? Different between ID and Name. Method Method getElementById () and getElementsByName (). How to manipulate properties of HTML tags? Events of JavaScript.

22. Method getElementById () and getElementsByName () Method getElementById () and getElementsByName () is used to access the HTML tags. getElementById ( "id") to access a card with the id specified. getElementsByName ( "Name") to get on the list of cards with the card attribute "name" parameter "Name" of the function.

23. Ex: Use getElementById() getElementById example Function{ changeColor(newColor){ elem = document.getElementById("para1"); elem.style.color = newColor;} Some text here blue red

24. Ex: use getElementsByIName() // return some of the forms // // up_forms = document.getElementsByName("up");

25. Main content What’s JavaScript? Different between ID and Name. Method Method getElementById () and getElementsByName (). How to manipulate properties of HTML tags? Events of JavaScript.

26. Manipulate HTML properties Use tag. Use methods in JavaScript. ◦ setAttribute(). ◦ getAttribute(). ◦ removeAttribute(). Use HTML DOM objects.

27. Manipulate HTML properties… Use methods in JavaScript. ◦ getAttribute(). ◦ setAttribute(). ◦ removeAttribute(). Ex: getAttribute() //returns "test.gif“ getvalue=document.getElementById("myimage").g etAttribute("src")

28. Manipulate HTML properties… Ex: setAttribute() document.getElementById("myimage").set Attribute(“otherImage.gif");

29. Manipulate properties (cont…) Use HTML DOM objects. ◦ objectName.propertyName = value Ex: document.getElementById(“link").href=“new_lin k.html“

30. Main content What’s JavaScript? Different between ID and Name. Method Method getElementById () and getElementsByName (). How to manipulate properties of HTML tags? Events of JavaScript.

31. Events Every element on a web page has certain events which can trigger a javascript. Examples of events: ◦ A mouse click ◦ A web page or an image loading ◦ Mousing over a hot spot on the web page ◦ Selecting an input field in an HTML form ◦ Submitting an HTML form ◦ A keystroke

32. Events… EventDescription onblurAn element loses focus onerrorAn error occurs onfocusAn element gains focus onloadThe document has completely loaded onresetA form reset command is issued onscrollThe document is scrolled onselectThe selection of element has changed onsubmitA form submit command is issued

33. Events Keyboard EventDescription onkeydownA key has been pressed onkeypressonkeydown followed by onkeyup onkeyupA key has been released Mouse EventDescription onmousedownA mouse button has been pressed onmousemoveThe mouse has been moved onmouseoutThe mouse pointer has left an element onmouseoverThe mouse pointer has entered an element onmouseupA mouse button has been released onclickA mouse button has been clicked ondblclickA mouse button has been double-clicked (clicked twice rapidly)

34. DEMO

35. The end Thank for your attention!