Welcome! If you like our Blog so please Follow this blog and also +1 this blog here---->

Sunday 16 September 2012

Pin It

Javascript Tutorial 2: JavaScript How To and Where To

How To

A JavaScript is surrounded by a <script> and </script> tag.
JavaScript is typically used to manipulate HTML elements.

The <script> Tag

To insert a JavaScript into an HTML page, use the <script> tag.
The <script> and </script> tells where the JavaScript starts and ends.
The lines between the <script> and </script> contain the JavaScript:
<script>
alert("My First JavaScript");
</script>
You don't have to understand the code above. Just take it for a fact, that the browser will interpret and execute the JavaScript code between the <script> and </script> tags. 

Writing to The Document Output

The example below writes a <p> element directly into the HTML document output:

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<script>
document.write("<p>My First JavaScript</p>");
</script>


</body>
</html>


Warning

Use document.write() only to write directly into the document output.
If you execute document.write after the document has finished loading, the entire HTML page will be overwritten.

Where To

A JavaScript can be put in the <body> and in the <head> section of an HTML page.

JavaScript in <body>

The example below manipulate the content of an existing <p> element when the page loads:

Example

<!DOCTYPE html>
<html>
<body><h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<script>
document.getElementById("demo").innerHTML="My First JavaScript";
</script>

</body>
</html>


JavaScript Functions and Events

The JavaScript statement in the example above, is executed when the page loads, but that is not always what we want.
Sometimes we want to execute a JavaScript when an event occurs, such as when a user clicks a button. Then we can write the script inside a function, and call the function when the event occurs.
You will learn more about JavaScript functions and events in later chapters.

A JavaScript Function in <head>

The example below calls a function in the <head> section when a button is clicked:

Example

<!DOCTYPE html>
<html><head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>

</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>


A JavaScript Function in <body>

This example also calls a function when a button is clicked, but the function is in the <body>:

Example

<!DOCTYPE html>
<html>
<body><h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>

</body>
</html>