Scribd
Upload
113 views

Java Script Advance

The document discusses using JavaScript to validate HTML forms. It provides an example function called validateForm() that checks if a form field is empty and alerts a message to prevent form submission if empty. This function can be called using the onsubmit event when the form is submitted. It also discusses how the DOM represents the page as an object model and how JavaScript can manipulate HTML elements, attributes, styles, events using various DOM methods.

Uploaded by

Adnan Rai
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
113 views

Java Script Advance

The document discusses using JavaScript to validate HTML forms. It provides an example function called validateForm() that checks if a form field is empty and alerts a message to prevent form submission if empty. This function can be called using the onsubmit event when the form is submitted. It also discusses how the DOM represents the page as an object model and how JavaScript can manipulate HTML elements, attributes, styles, events using various DOM methods.

Uploaded by

Adnan Rai
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 23

Java Script Advance

JavaScript Forms
HTML form validation can be done by JavaScript.
If a form field (fname) is empty, this function alerts a message, and returns false, to
prevent the form from being submitted:

function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == "") {
        alert("Name must be filled out");
        return false;
    }
}
The function can be called when the
form is submitted:
<form name="myForm" action="/action_page.php" onsubmit="re
turn validateForm()" 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, JavaScript gets all the power it needs to create dynamic HTML:

JavaScript can change all the HTML elements in the page


JavaScript can change all the HTML attributes in the page
JavaScript can change all the CSS styles in the page
JavaScript can remove existing HTML elements and attributes
JavaScript can add new HTML elements and attributes
JavaScript can react to all existing HTML events in the page
JavaScript can create new HTML events in the page
What is the DOM?

The DOM is a W3C (World Wide Web Consortium) standard.

The DOM defines a standard for accessing documents:

"The W3C 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.getElementById(id); Find an element by element id

document.getElementsByTagName(“ Find elements by tag name


P”);

document.getElementsByClassName Find elements by class name


(“s1”)
Changing HTML Elements
Method Description
element.innerHTML =  new html Change the inner HTML of an element
content
element.attribute = new value Change the attribute value of an HTML
element
element.setAttribute(attribute, value) Change the attribute value of an HTML
element
element.style.property = new style Change the style of an HTML element
Adding and Deleting Elements
Method Description

document.createElement(element) Create an HTML element

document.removeChild(element) Remove an HTML element

document.appendChild(element) Add an HTML element

document.replaceChild(element) Replace an HTML element

document.write(text) Write into the HTML output stream


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

</body>
Adding Events Handlers
Method Description

document.getElementById(id).onclick = Adding event handler code to an onclick


function(){code} event
Exercise:
1. Use the getElementsByTagName 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>
<html>
<body>

<img id="myImage" src="smiley.gif“ >

<script>
document.getElementById("myImage").setAttri
bute(“width”,”200”);
</script>

</body>
</html>
JavaScript HTML DOM - Changing
CSS
html>
<body>

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").innerHTML = “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 JavaScript function to add rows to a table.
4. Write a JavaScript program to remove items from a dropdown list.
5. Write a JavaScript program to count and display the items of a dropdown list,
in an alert window.
JavaScript 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>
<html>
<body>

<h1 onclick="this.innerHTML = 'Ooops!'">Click on this


text!</h1>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h1 onclick="changeText(this)">Click on this


text!</h1>

<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>

</body>
</html>
The onload and onunload Events

The onchange Event

<!DOCTYPE html>
<html> <body>
<head>
<script> Enter your name: <input type="text" id="fname"
onchange="myFunction()">
function myFunction() {
<p>When you leave the input field, a function is triggered
var x = document.getElementById("fname");
which transforms the input text to upper case.</p>
x.value = x.value.toUpperCase();
} </body>
</script> </html>
</head>
Mouse Events Keyboard Events Form Events Document/Window Events

click keypress submit load

dblclick keydown change resize

mouseenter keyup focus scroll

mouseleave   blur unload


JavaScript 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.

You might also like