Getting started with Javascript


How JavaScript stands out from the rest

  • JS is an interpreted language which means that it requires no compilation steps. This provides an easy development process. The syntax is completely interpreted by the web browser just like HTML tags.
  • It is embedded within HTML hence it does not require any special or separate editor for programs to be edited or compiled.
  • Being an interpreted language, scripts in JavaScript are tested line by line, and the errors are also listed as they are encountered.
  • JavaScript is a programming language that is completely independent of the hardware on which it works. It is a language that is understood by any JavaScript enabled browser, and its applications work on any machine that has an appropriate JavaScript enabled browser installed. This machine can be anywhere on the network.

Displaying a simple output with JS


document.write() method can be used for displaying a message on a webpage. Below is the code for displaying Hello World



<script>
 document.write("Hello World");
</script>
Live Demo!


Where to put JavaScript code in a webpage?


You can add Javascript code in an HTML web page by employing the dedicated HTML tag <script> that wraps around JavaScript code.

The <script> tag can be placed in the <head> section of your HTML, in the html <body> section, or after the </body> close tag, depending on when you want the JavaScript to load.


Javascript inside <head>


Let's say we have a blank HTML Document: 


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" >
</head>
<body>

<h1> Hello World </h1>

</body>
</html>


And we need to add this Javascript code to the above HTML page: 



<script>
alert('Hello World!');
</script>


This will enable the webpage to display an alert message regardless of when the user loads the site.

To begin with, we'll be adding the Javascript code with the <head> tags. This will signal the browser to run the code before running rest of the page. We can add the Javascript code below the <title> tags, for instance, as shown below: 



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First Javascript Code</title>
<script>

alert('Hello World!');

</script>
</head>
<body>

<h1> Hello World </h1>

</body>
</html>
Live Demo!


Now as soon as you load the page, it will show you an alert!


Javascript inside <body>


The functionality of javascript code remains the same whether it's in the header or body. If we're modifying what's there in the body of HTML web page, we will need to put it under the head so that it displays on the page.



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First Javascript Code</title>
</head>
<body>

<script>
document.write('Hello World!');
</script>

</body>
</html>
Live Demo!


While dealing with small scripts, we can write them within the html page. But in case we have large scripts, or scripts that are to be used on multiple pages, keeping Javascript code on the same page won't be a good idea because including it can make it unweildy or difficult to read.


Javascript in an external file


Now, let's create a new JavaScript file script.js , and place our code in it:


document.write('Hello World!');


We can add a reference to this script to or below the <body> section, with the following line of code:



<script src="script.js"></script>


Let's look at this line in the context of our html document:



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learn Javascript</title>
</head>
<body>
<h1>My Heading</h1>

<script src="external_javascript.js"></script>

</body>
</html>
Live Demo!

And now the js code can be used in multiple files, and can be modified from a single source!