JavaScript Introduction

When building a website, the programming language used along with HTML & CSS is the JavaScript.

The HTML provides the basic structure to the web page, the CSS styles the visible HTML elements, and the JavaScript adds some functions to the webpage.

The functions can be client-side (runs on the user's browser) or the server-side (loading data from servers).

The JavaScript is easy to learn and is used worldwide in almost all of the web pages in the world.

The uses of JavaScript can be simple from changing content to processing data on the servers.

So, as a developer, we should know about this programming language.

Where to get ?

The JavaScript is pre-installed in the user's browser, either is is a smartphone or any laptop, computers etc.

We doesn't had to do any special thing for using JavaScript. We had to just learn the language for writing it, and we are good to go.

First JavaScript Example

We will start with a basic example of JavaScript, which will show a alert dialog (default from the browser) on the click of a button.

window.alert("Hello World !!");

Example Explained

• The window.alert("") method of JavaScript shows the dialog.
• The text inside the quotes will be shown in the dialog.
• The window.alert("") method is used in the button onclick attribute.
• The button onclick attribute is called whenever the mouse is clicked on the button.

The quotes used inside the brackets can be single or double.

What can JavaScript do ?

The JavaScript can be used for a lot of purposes from changing content to processing data. Here we will see some basic examples of what we can do with JavaScript.

JavaScript can Change HTML Content

The JavaScript can change the Content of any HTML element.

First we had to find the Element of which we had to change the content. The most commonly used method of JavaScript is document.getElementById(""). The document here refers to the whole web page. The getElementById("ex") method will find the element with id defined as "ex".

The id is unique in the whole web page i.e. no two elements can have same id.

document.getElementById("ex").innerHTML = "Hello World !";

Example Explained

• The document.getElementById("ex") will find the element with id "ex".
• The innerHTML method of JavaScript is used to change the content of the Element.
• The innerHTML method is also readable i.e. if we doesn't provide a value to it, it will return the content already inside the HTML element.

JavaScript Can Change HTML Attribute Values

The JavaScript can change the attribute values of the HTML element.

First we had to find the Element of which we had to change the attribute value. The most commonly used method of JavaScript is document.getElementById(""). The document here refers to the whole web page. The getElementById("ex") method will find the element with id defined as "ex".

document.getElementById("ex").src = "full_heart.jpg";

Example Explained

• The document.getElementById("ex") will find the element with id "ex" in the whole page. The id is unique within the whole web page i.e. no two or more element have the same id.
• The src method of JavaScript will change the element "src" to a new one. The "src" here is applied to the "img" element.
• The src method of JavaScript is also readable i.e. if we doesn't apply a new value to it, it will return the value already defined as "src" in the element.

JavaScript Can Change CSS Styles to HTML Element

The JavaScript can change the CSS Styles that is applied to an HTML Element. It is same as changing the attribute values, and all the CSS styles are defined in the style attribute.

The change in style attribute values will change the CSS Styles.

First we had to find the Element of which we had to change the CSS Styles. The most commonly used method of JavaScript is document.getElementById(""). The document here refers to the whole web page. The getElementById("ex") method will find the element with id defined as "ex".

document.getElementById("ex").style.fontSize = "25px";

Example Explained

• The document.getElementById("ex") will find the element with id defined as "ex" in the whole web page. The id is unique within the whole web page.
• The style method of JavaScript changes the value of the style attribute.
• The fontSize method of JavaScript will change the font size of the element.

JavaScript Can Hide HTML Elements

The JavaScript can be used to hide HTML Elements. It is same as changing the CSS Styles with JavaScript previously described. The display:none; is used here with "CSS Styles property" for hiding the HTML Elements.

First we had to find the Element of which we had to change the CSS Styles. The most commonly used method of JavaScript is document.getElementById(""). The document here refers to the whole web page. The getElementById("ex") method will find the element with id defined as "ex".

document.getElementById("ex").style.display = "none";

Example Explained

• The document.getElementById("ex") will find the element with id defined as "ex" in the whole web page. The id is unique within the whole web page.
• The style method of JavaScript changes the value of the style attribute.
• The display method of JavaScript will change the display property of the element to "none" i.e. hide the element.

JavaScript Can Show HTML Elements

The JavaScript can also be used to show hidden HTML Elements. It is same as changing the CSS Styles with JavaScript previously described. The display:block; is used here with "CSS Styles property" for hiding the HTML Elements.

The value of the display property can be "block, inline, inline-block etc." depending on the HTML Elements.

• block : For block-level elements e.g. div, p etc.
• inline: For inline level elements e.g. span, i etc.

First we had to find the Element of which we had to change the CSS Styles. The most commonly used method of JavaScript is document.getElementById(""). The document here refers to the whole web page. The getElementById("ex") method will find the element with id defined as "ex".

document.getElementById("ex").style.display = "block";

Example Explained

• The document.getElementById("ex") will find the element with id defined as "ex" in the whole web page. The id is unique within the whole web page.
• The style method of JavaScript changes the value of the style attribute.
• The display method of JavaScript will change the display property of the element to "block" i.e. shows the hidden element.

Where to add JavaScript ?

In HTML, JavaScript is added between <script> and </script> tags.

<script>
document.getElementById("ex").innerHTML = "My First JavaScript";
</script>

Previously <script type="text/javascript"> is used for adding JavaScript to HTML document.
With new updates to JavaScript and the browser, the type attribute is no longer required, as "JavaScript" is the default language for writing scripts in HTML.

The JavaScript can also be added to the Web page from external sources. Below are the ways with which JavaScript can be added to HTML document.

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

Between <head> ... </head> element

Functions and Events in JavaScript

In JavaScript, the function is a block of JavaScript code, that runs when called for i.e. when an event is occurred (clicking of a button).

We can place any number of JavaScript code in an HTML document.

Below is the example of adding JavaScript code to the <head> element.
The function is executed when an "event" is occurred (on the clicking of a button).

<!DOCTYPE html>

<html>

<head>

<script>

function myFunction() {

  document.getElementById("ex").innerHTML = "Paragraph changed.";

}

</script>

</head>

<body>

<h2>Demo JavaScript in Head</h2>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

</body>

</html>

Between <body> ... </body> element

Below is the example of adding JavaScript code to the <body> element.
The function is executed when an "event" is occurred (on the clicking of a button).

The JavaScript code can be placed anywhere within the <body> element.
*Always add the JavaScript code which changes the behaviour, content etc. of the HTML element at the bottom of <body> element as shown in the below example i.e. the function changes the content of an HTML element, so it is added to the end of <body> element.
This increases the page display speed, as script interpretation slows down the display, and also help in the proper working of the JavaScript code.

<!DOCTYPE html>

<html>

<body>

<h2>Demo JavaScript in Body</h2>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

<!-- Added to bottom of body element -->

<script>

function myFunction() {

  document.getElementById("ex").innerHTML = "Paragraph changed.";

}

</script>

</body>

</html>

Inside the event attributes

The JavaScript code can also be added directly to the event attributes of any HTML element. Below is the example, where the script will be executed on the click of a button (Event Atrributes).

<button type="button" onclick="document.getElementById('ex').innerHTML = 'Paragraph changed.';">Change</button>

Adding JavaScript from External Sources

The JavaScript code is written in an external file as shown below, and the source url of it is added to the "src" attribute of the <script>.

External File : myScript.js

function myFunction() {
document.getElementById("ex").innerHTML = "Paragraph changed.";
}

Adding to HTML document

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

Above example will do the same work as all the previous examples of adding JavaScript to HTML document.

Features

• JavaScript files have the file extension .js.
• It is useful when the same code is used in multiple web pages. It reduces the time of code writing.
• We can place an external script reference in <head> or <body>. It will behave exactly as the inline JavaScript code.
• The external .js file cannot contain <script> tags.

Advantages

• It separates HTML document and JavaScript code from each other. This makes us easy to read and maintain both.
• The External JavaScript code is cached on some browser i.e. if someone opens the webpage again, the previously loaded JavaScript code will be added to the web page, that as a result increases the page load speed.
• For adding multiple external script files to one page - use multiple script tags.
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>