Here, you'll discover how simple it is to add interactivity to a webpage using JavaScript. However, it's essential to have some basic understanding of HTML and CSS before diving in.
If you're new to web development, begin your learning journey here »
Now, let's delve into the world of the most widely used client-side scripting language.
You can add JavaScript to a webpage in three main ways:
<script> and </script> tags..js extension and then linking it within the page using the src attribute of the <script> tag.onclick, onmouseover, onkeypress, onload, and so on.In the following sections, we'll explore each of these methods in detail:
You can directly embed JavaScript code within your web pages by placing it between <script> and </script> tags. The <script> tag signals to the browser that the enclosed statements should be interpreted as executable script rather than HTML. Here's an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Embedding JavaScript</title>
</head>
<body>
<script>
var greet = "Hello World!";
document.write(greet); // Prints: Hello World!
</script>
</body>
</html>The JavaScript code in the example above will simply print a text message on the webpage. In upcoming chapters, you'll learn what each of these JavaScript statements means.
Note: The type attribute for the <script> tag (e.g., <script type="text/javascript">) is no longer required since HTML5. JavaScript is the default scripting language for HTML5.
You can store your JavaScript code in a separate file with a .js extension and then include that file in your HTML document using the src attribute of the <script> tag, like so:
This approach is beneficial when you want to use the same scripts across multiple pages. It helps in avoiding repetition and simplifies the maintenance of your website.
Now, let's create a JavaScript file named "hello.js" and add the following code to it:
// A function to display a message
function sayHello() {
alert("Hello World!");
}
// Call function on click of the button
document.getElementById("myBtn").onclick = sayHello;To utilize this external JavaScript file in a webpage, include it using the <script> tag, as demonstrated below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Including External JavaScript File</title>
</head>
<body>
<button type="button" id="myBtn">Click Me</button>
<script src="js/hello.js"></script>
</body>
</html>Note: Typically, when a browser downloads an external JavaScript file for the first time, it caches it, similar to how it caches images and style sheets. This caching mechanism speeds up the loading of web pages since the file doesn't need to be repeatedly downloaded from the web server.
Another method is to insert JavaScript code directly within HTML tags using special tag attributes like onclick, onmouseover, onkeypress, onload, etc.
However, it's generally recommended to avoid inserting large amounts of JavaScript code inline because it can clutter your HTML and make your JavaScript harder to manage. Here's an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inlining JavaScript</title>
</head>
<body>
<button onclick="alert('Hello World!')">Click Me</button>
</body>
</html>The example above will display an alert message when the button element is clicked.
Tip: It's a good practice to separate the content and structure of your web page (HTML) from its presentation (CSS) and behavior (JavaScript).
The <script> element can be positioned within either the <head> or <body> section of an HTML document. However, for optimal performance, it's best to place scripts at the end of the <body> section, just before the closing </body> tag. This approach enhances webpage loading speed by preventing interference with the initial page rendering process.
Each <script> tag pauses the page rendering process until the associated JavaScript code is fully downloaded and executed. Placing scripts unnecessarily in the <head> section of the document can significantly impact website performance.
Tip: You can include multiple <script> elements within a single document. However, they are executed sequentially in the order they appear in the document, following a top-to-bottom approach.
Client-side scripting, like JavaScript or VBScript, runs directly within the user's web browser, while server-side scripting, like PHP, ASP, Java, Python, or Ruby, operates on the web server and sends HTML output to the browser.
Client-side scripting offers several advantages over traditional server-side methods. For instance, with JavaScript, you can instantly validate form inputs, alerting users to errors before they submit data to the server. This real-time validation minimizes unnecessary bandwidth usage and server resource consumption.
Moreover, client-side scripts tend to execute faster because they run on the user's local machine, whereas server-side scripts are processed remotely, resulting in slower response times.
To delve deeper into server-side scripting, explore our PHP tutorial section.