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