Setting up your environment
In this tutorial you will learn how to add javascript to html page.
JavaScript was initially created to “make web pages alive”. The programs in this language are called scripts. They can be written right in a web page’s HTML and run automatically as the page loads. Scripts are provided and executed as plain text. They don’t need special preparation or compilation to run.
Minimum things required to code Java Script:
- Notepad ++ to write text document.
- Web browser to run and test the code. Chrome and Firefox are two good options, they support latest JavaScript features and helpful plugins are available.
Extra tools:
Integrated Development Environment: An Integrated Development Environment (IDE) is a special application that is used to write, run, and debug code. Popular IDEs are Visual Studio Code, Atom, Sublime Text, and Web Storm.
Online editor: There are great online editors are available for coding java script.
Using the browser console: Try It
The console is used by developers to log what is going on and do any debugging. Debugging is finding the problem when an application is not displaying the desired behaviour.
Note: Press F12, while you are in web browser to get browser console.
console.log("Hello world!");
If you click on this console tab, enter the first JavaScript code above, and then hit Enter, this will show you the output of your code therein. It will look like the following screenshot:
Adding JavaScript to a web page
There are typically three ways to add JavaScript to a web page:
- Type the JavaScript directly in the HTML between <script> and </script> tag.
- Creating an external JavaScript file with the .js extension and then load it within the page through the src attribute of the <script> tag.
- Placing the JavaScript code directly inside an HTML tag using the special tag attributes such as onclick, onmouseover, onkeypress, onload, etc.
Placing Java Script code directly in HTML:
The Java Script code can be placed in <head>or <body> or end of the <body> section of an HTML document. JavaScript statements are placed within the <script>... </script> HTML tags in a web page as follows.
Example: Try It
<script type="text/javascript">
alert("Hello, World!");
</script>
An example of how to write a very simple web page that prints a text message on the web page.
1)Open code editor like notepad++ and create a basic HTML file (index.html) as follows:
Basic HTML template: Try It
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML Basic Template</title> </head> <body> </body> </html>
2)Place the Java Script code in the <body> section of the HTML page as follows: Try It
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Creating a script Block</title> </head> <body><script> document.write("Hello, World!");// Prints: Hello World! </script></body> </html>
Note: <script> tag is the default scripting language for JavaScript. So the type attribute for <script> tag (i.e. <script type="text/javascript">) is not required in HTML5.
Placing Java Script code in different sections of HTML
Inside head tag.
Many developers prefer to put JavaScript code within the
tags, it is the best place to store function definitions and objects.Example: Try It
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS Tutorial</title><script> //javascript code can be placed here alert("Alert from head section!"); </script></head> <body> </body> </html>
Inside body tag.
If you want text displayed at a specific spot in the document, you might want to place the JavaScript code within the <body>tags
Example: Try It
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS Tutorial</title> </head> <body><script> //javascript code can be placed here alert("Alert from body section!"); </script></body> </html>
End of the body tag
Placing JavaScript code at the end of <body> tags is considered a good practice. This ensures that <head> and most of HTML <body> content are loaded before JavaScript code is triggered.
Example: Try It
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS Tutorial</title> </head> <body> </body> </html><script> //javascript code can be placed here alert("Alert from end of the body section!"); </script>
Script element order of execution:
We can place any number of <script> element in a single document. However, they are executed in the order in which they appear in the document, from top to bottom as follows.
Example: Try It
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS Tutorial</title><script> alert("Alert message from head section."); </script></head> <body><script> alert("Alert message from body section, before html code!"); </script><h1>Hello World</h1> </body> </html><script> alert("Alert message from body section, after html code!"); </script>
Linking an external file to our web page:
When scripts are long or need to be shared by other pages, they are usually placed inexternal files, separate from the HTML page.The JS code can also be kept in an external file and then linking it in <head> section of HTML. External file should contain JavaScript code and must be saved with '.js' extension. Use of external files for placing JavaScript code is preferred as it helps in separation of the content and behaviour of the web page. Maintaining a single source file is easier and also allows us to reuse the same code.
Example: Try It
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Linking an external file</title> </head> <body><script src="app.js"> </script></body> </html>
app.js:
alert("Hell, World! From external file.");
Note: Usually when an external JavaScript file is downloaded for first time, it is stored in the browser's cache (just like images and style sheets), so it won't need to be downloaded multiple times
Placing the JavaScript Code Inline
You can also place JavaScript code inline by inserting it directly inside the HTML tag using the special tag attributes such as onclick, onmouseover, onkeypress, onload, etc. However, you should avoid placing large amount of JavaScript code inline as it clutters up your HTML with JavaScript and makes your JavaScript code difficult to maintain.
Example: Try It
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Inline Java Script</title> </head> <body><script> <button onclick="alert('Hello World!')">Click Me</button> </script></body> </html>
Tip: You should always keep the content and structure of your web page (i.e. HTML) separate out from presentation (CSS), and behavior (JavaScript).
Formatting code
Code needs to be formatted well. Well formatted code is easy to read and understand.
Code without new lines:
Example: Try It
Code with new lines:
Example: Try It
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inline Java Script</title>
</head>
<body>
<script>
<button onclick="alert('Hello World!')">Click Me</button>
</script>
</body>
</html>
Code with new lines and indentation:
Example: Try It
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inline Java Script</title>
</head>
<body>
<script>
<button onclick="alert('Hello World!')">Click Me</button>
</script>
</body>
</html>
As you can see in the above Code with new lines and indentation, we can now easily see when the code blocks end and the code is easy to understand.