JavaScript: Write HTML output
Example
("<h1>This is a heading</h1>");
("<p>This is a paragraph</p>");
Tip: You can only use it in HTML output. If you use this method after the document is loaded, the entire document will be overwritten.
JavaScript: Respond to events
Example
<button type="button" onclick="alert('Welcome!')">Click here</button>
The alert() function is not commonly used in JavaScript, but it is very convenient for code testing.
The onclick event is just one of many things you will learn about in this tutorial.
JavaScript: Change HTML content
Using JavaScript to handle HTML content is a very powerful feature.
Example
x=("demo") //Find elements="Hello JavaScript"; //Change content
You will see ("some id"). This method is defined in HTML DOM.
DOM (Document Object Model) is a formal W3C standard used to access HTML elements.
JavaScript: Change HTML style
Changing the style of HTML elements is a variant that changes HTML attributes.
Example
x=("demo") //Find the element="#ff0000"; //Change style
JavaScript: Verify input
JavaScript is often used to verify user input.
Example
if isNaN(x) {alert("Not Numeric")};
The scripts in HTML must be between the <script> and </script> tags.
Scripts can be placed in the <body> and <head> sections of the HTML page.
<script> tag
To insert JavaScript into HTML pages, use the <script> tag.
<script> and </script> will tell JavaScript where to start and end.
The line of code between <script> and </script> contains JavaScript:
<script>
alert("My First JavaScript");
</script>
You don't need to understand the above code. Just understand that the browser interprets and executes JavaScript between <script> and </script>.
Those old instances may use type="text/javascript" in the <script> tag. This is no longer necessary now. JavaScript is the default scripting language in all modern browsers and HTML5.
JavaScript in <body>
In this example, JavaScript writes text to the HTML <body> when the page is loading:
Example
<!DOCTYPE html>
<html>
<body>
.
.
<script>
("<h1>This is a heading</h1>");
("<p>This is a paragraph</p>");
</script>
.
.
</body>
</html>
JavaScript functions and events
The JavaScript statement in the example above will be executed when the page is loaded.
Usually, we need to execute code when an event occurs, such as when the user clicks a button.
If we put JavaScript code into a function, we can call the function when the event occurs.
You will learn more about JavaScript functions and events in a later chapter.
JavaScript in <head> or <body>
You can put an unlimited number of scripts in your HTML document.
Scripts can be located in the <body> or <head> section of HTML, or exist in both sections.
The usual practice is to put the function in the <head> section, or at the bottom of the page. This allows them to be placed in the same location without interfering with the content of the page.
JavaScript functions in <head>
In this example, we place a JavaScript function in the <head> section of the HTML page.
This function will be called when the button is clicked:
Example
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p >A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
JavaScript functions in <body>
In this example, we place a JavaScript function into the <body> section of the HTML page.
This function will be called when the button is clicked:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p >A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
("demo").innerHTML="My First JavaScript Function";
}
</script>
</body>
</html>
Tip: We put JavaScript at the bottom of the page code so that we can ensure that the script is executed after the <p> element is created.
External JavaScript
You can also save the script to an external file. External files usually contain code used by multiple web pages.
The file extension of the external JavaScript file is .js.
To use an external file, set the .js file in the "src" property of the <script> tag:
Example
<!DOCTYPE html> <html> <body> <script src=""></script> </body> </html>
It is OK to refer to script files in <head> or <body>. The actual operation effect is exactly the same as when you write a script in the <script> tag.
Tip: External scripts cannot contain <script> tags.