If you are new to JavaScript, then the following article will guide you through the steps you need to take in order to implement JavaScript in an HTML page.
Lets go through each steps, one at a time …
Step 1 : Fire Up A Code Editor
Source Code Editors or simply Code Editors are specially designed text editors used by software developers to simplify writing high quality code and speed up the development process.
(Displays only one color - black, supports only one font and has simple search-replace features)
Notepad++ is a code editor.
(Text editor with support for syntax highlighting, indentations, autocomplete and brace matching functionalities etc.)
Code Editors generally have the following features :
- Syntax highlighting : Display text in different colors and fonts according to the category of terms.
- Indentations : Format source code by adding up spaces at the beginning of a code block in a conventional way to signal the type of code in the block.
- Autocomplete : The application predicts the rest of the code that a user is typing.
- Brace Matching : A syntax highlighting feature that highlights matching sets of braces (square brackets, curly brackets, or parentheses).
There are others you can choose from : Atom, Notepad++, Sublime Text etc.
They are more powerful code editors with some robust features like
- Integrated Build Process
- Project Manager
- Performance Profile
- Deployment Tools
Examples: Visual Studio IDE, Netbeans, WebStorm
Step 2 : Paste In Some HTML
Create a new file with a proper name eg: index.html and paste in the below HTML code :
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>HTML Snippet</title>
</head>
<body></body>
</html>
Up until now, you have just setup a basic HTML page with no content. You can directly open the HTML file using a web browser. The next step is to add some JavaScript code.
Step 3 : Write Some JavaScript
JavaScript can be included in an HTML page by enclosing the code using the ‘script‘ tags and placing it anywhere within the HTML document.
The scripts are generally placed within the ‘head‘ or the ‘body‘ tag or in both.
There are no limitations to the number of scripts that you can include within an HTML document. However, Including too many JavaScript from various sources can degrade your HTML page load time. We will talk more about this later in the JavaScript Best Practices guide.
Example : Simple JavaScript
<script>
alert(“Hello !! I am JavaScript”);
</script>
The use of the type attribute: <script type=”text/javascript”> is no longer needed now days because JavaScript has become the default scripting language in HTML.
Example : JavaScript in Head Tags
If you need your JavaScript to be executed before the page is fully rendered, then you need to place it in the head of your HTML document as follows :
See the Pen dh-JavaScript-In-The-Head by Ozesh Thapa (@zaagan) on CodePen.
Example : JavaScript in The Body
Similar to placing it in the head, JavaScript can also be placed in the body of the HTML document. Placing your scripts at the bottom of the ‘body‘ element improves the display speed because script interpretation slows down the display.
See the Pen dh-JavaScript-In-The-Body by Ozesh Thapa (@zaagan) on CodePen.
Example : JavaScript From External Source
Large applications normally contains thousands of lines of JavaScript code. The code itself is mostly re-used by many different pages. In such cases, JavaScript code is often separated in a different file and later on included in the HTML document.
Some of its advantages are :
JavaScript files have the file extension : .js.
The script in the .js file cannot contain the script tags.
In the following example, The JavaScript file is placed in the same folder as the current page.
<script src=”myJavaScriptFile.js”></script>
We will talk more about this later in the JavaScript Best Practices guide.
