Java Script Advance Java Script Forms HTML form

Java. Script Forms HTML form validation can be done by Java. Script. If a

The function can be called when the form is submitted: <form name="my. Form" action="/action_page.

The HTML DOM (Document Object Model) When a web page is loaded, the browser

With the object model, Java. Script gets all the power it needs to create

What is the DOM? The DOM is a W 3 C (World Wide Web

What is the HTML DOM? The HTML DOM is a standard object model and

HTML DOM methods are actions you can perform (on HTML Elements). HTML DOM properties

Finding HTML Elements Method Description document. get. Element. By. Id(id); Find an element by

Changing HTML Elements Method Description element. inner. HTML = new html content Change the

Adding and Deleting Elements Method Description document. create. Element(element) Create an HTML element document.

<!DOCTYPE html> <body> <p>This is a p element</p> <p>This is also a p element.

Adding Events Handlers Method Description document. get. Element. By. Id(id). onclick = function(){code} Adding

Exercise: 1. Use the get. Elements. By. Tag. Name method to find the <p>

Changing the Value of an Attribute <!DOCTYPE html> <body> <img id="my. Image" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="smiley. gif“>

Java. Script HTML DOM - Changing CSS html> <body> <p id="p 2">Hello World!</p> <script>

Exercise 1. Use the HTML DOM to hide the <p> element. 2. Use the

Java. Script HTML DOM Events Examples of HTML events: When a user clicks the

<!DOCTYPE html> <body> <h 1 onclick="this. inner. HTML = 'Ooops!'">Click on this text!</h 1>

<!DOCTYPE html> <body> <h 1 onclick="change. Text(this)">Click on this text!</h 1> <script> function change.

The onload and onunload Events The onchange Event <!DOCTYPE html> <head> <script> function my.

Mouse Events Keyboard Events Form Events Document/Window Events click keypress submit load dblclick keydown

Java. Script Errors - Throw and Try to Catch The try statement lets you

Slides: 23

Download presentation

Java Script Advance

Java. Script Forms HTML form validation can be done by Java. Script. If a form field (fname) is empty, this function alerts a message, and returns false, to prevent the form from being submitted: function validate. Form() { var x = document. forms["my. Form"]["fname"]. value; if (x == "") { alert("Name must be filled out"); return false; } }

The function can be called when the form is submitted: <form name="my. Form" action="/action_page. php" onsubmit="re turn validate. Form()" method="post"> Name: <input type="text" name="fname"> <input type="submit" value="Submit"> </form>

The HTML DOM (Document Object Model) When a web page is loaded, the browser creates a Document Object Model of the page. The HTML DOM model is constructed as a tree of Objects:

With the object model, Java. Script gets all the power it needs to create dynamic HTML: Java. Script can change all the HTML elements in the page Java. Script can change all the HTML attributes in the page Java. Script can change all the CSS styles in the page Java. Script can remove existing HTML elements and attributes Java. Script can add new HTML elements and attributes Java. Script can react to all existing HTML events in the page Java. Script can create new HTML events in the page

What is the DOM? The DOM is a W 3 C (World Wide Web Consortium) standard. The DOM defines a standard for accessing documents: "The W 3 C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document. "

What is the HTML DOM? The HTML DOM is a standard object model and programming interface for HTML. It defines: The HTML elements as objects The properties of all HTML elements The methods to access all HTML elements The events for all HTML elements

HTML DOM methods are actions you can perform (on HTML Elements). HTML DOM properties are values (of HTML Elements) that you can set or change.

Finding HTML Elements Method Description document. get. Element. By. Id(id); Find an element by element id document. get. Elements. By. Tag. Name(“ Find elements by tag name P”); document. get. Elements. By. Class. Name Find elements by class name (“s 1”)

Changing HTML Elements Method Description element. inner. HTML = new html content Change the inner HTML of an element. attribute = new value Change the attribute value of an HTML element. set. Attribute(attribute, value) Change the attribute value of an HTML element. style. property = new style Change the style of an HTML element

Adding and Deleting Elements Method Description document. create. Element(element) Create an HTML element document. remove. Child(element) Remove an HTML element document. append. Child(element) Add an HTML element document. replace. Child(element) Replace an HTML element document. write(text) Write into the HTML output stream

<!DOCTYPE html> <body> <p>This is a p element</p> <p>This is also a p element. </p> <script> function my. Function() { var x = document. get. Elements. By. Tag. Name("P" ); var i; for (i = 0; i < x. length; i++) { x[i]. style. background. Color = "red"; <p>This is also a p element - Click the button to change the background color of all p elements in this document. </p> <button onclick="my. Function()">Try it</button> } } </script> </body>

Adding Events Handlers Method Description document. get. Element. By. Id(id). onclick = function(){code} Adding event handler code to an onclick event

Exercise: 1. Use the get. Elements. By. Tag. Name method to find the <p> element, and change its text to "Good Job!". 2. Use the DOM to find and display the document's title.

Changing the Value of an Attribute <!DOCTYPE html> <body> <img id="my. Image" src="smiley. gif“> <script> document. get. Element. By. Id("my. Image"). set. Attri bute(“width”, ” 200”); </script> </body> </html>

Java. Script HTML DOM - Changing CSS html> <body> <p id="p 2">Hello World!</p> <script> document. get. Element. By. Id("p 2"). inner. HTML = “Hello pakistan"; </script> <p>The paragraph above was changed by a script. </p> </body> </html>

Exercise 1. Use the HTML DOM to hide the <p> element. 2. Use the HTML DOM to change the text size of <p> to 40 pixels. 3. Write a Java. Script function to add rows to a table. 4. Write a Java. Script program to remove items from a dropdown list. 5. Write a Java. Script program to count and display the items of a dropdown list, in an alert window.

Java. Script HTML DOM Events Examples of HTML events: When a user clicks the mouse When a web page has loaded When an image has been loaded When the mouse moves over an element When an input field is changed When an HTML form is submitted When a user strokes a key

<!DOCTYPE html> <body> <h 1 onclick="this. inner. HTML = 'Ooops!'">Click on this text!</h 1> </body> </html>

<!DOCTYPE html> <body> <h 1 onclick="change. Text(this)">Click on this text!</h 1> <script> function change. Text(id) { id. inner. HTML = "Ooops!"; } </script> </body> </html>

The onload and onunload Events The onchange Event <!DOCTYPE html> <head> <script> function my. Function() { var x = document. get. Element. By. Id("fname"); x. value = x. value. to. Upper. Case(); } </script> </head> <body> Enter your name: <input type="text" id="fname" onchange="my. Function()"> <p>When you leave the input field, a function is triggered which transforms the input text to upper case. </p> </body> </html>

Mouse Events Keyboard Events Form Events Document/Window Events click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll blur unload mouseleave

Java. Script Errors - Throw and Try to Catch The try statement lets you test a block of code for errors. The catch statement lets you handle the error. The throw statement lets you create custom errors. The finally statement lets you execute code, after try and catch, regardless of the result.