JavaScript

JavaScript

  • Last Updated : 09 Jan, 2023

JavaScript (JS) is the world’s most popular lightweight, interpreted compiled programming language. It is also known as a scripting language for web pages. It can be used for Client-side as well as Server-side developments.

JavaScript Tutorial

JavaScript can be added to your HTML file in two ways:

  • Internal JavaScript: We can add JS code directly to our HTML file by writing the code inside the <script> tag. The <script> tag can either be placed inside the <head> or the <body> tag according to the requirement.
  • External JavaScript File: We can create a file with .js extension and paste the JS code inside it. After creating the file, add this file in <script src=”file_name.js”> tag inside <head> tag of the HTML file.

Why JavaScript is used?

JavaScript is the most popular programming language for both client-side and server-side to make interactive web pages. It is mainly used to develop websites and web-based applications.

  • Creating Interactive Websites: JavaScript is used to make the web pages dynamic and interactive. It means using JavaScript, we can change the web page content and styles dynamically.
  • Building Applications: JavaScript is used to make web and mobile applications. To build the web and mobile apps, we can use most popular JavaScript frameworks like – ReactJS, React Native, Node.js etc.
  • Web Servers: We can make robust server applications using JavaScript. To be precise we use JavaScript frameworks like Node.js and Express.js to build these servers.
  • Game Development: JavaSCript can be used to design Browser games. In JavaScript, lots of game engines available that provide frameworks for building games.

How JavaScript is different from HTML?

  • JavaScript is an advanced programming language that makes web pages more interactive and dynamic whereas HTML is a standard markup language that provides the primary structure of a website.
  • JavaScript simply adds dynamic content to websites to make them look good and HTML work on the look of the website without the interactive effects and all.
  • JavaScript manipulates the content to create dynamic web pages whereas HTML pages are static which means the content cannot be changed.
  • JavaScript is not cross-browser compatible whereas HTML is cross-browser compatible.
  • JavaScript can be embedded inside HTML but HTML can not be embedded inside JavaScript.

Why to learn JavaScript ?

JavaScript is the most popular and hence the most loved language around the globe. Apart from this, there are abundant reasons to learn it. Below are a listing of few important points:

  • No need of compilers: Since JavaScript is an interpreted language, therefore it does not need any compiler for compilations.
  • Used both Client and Server-side: Earlier JavaScript was used to build client-side applications only, but with the evolution of its frameworks namely Node.js and Express.js, it is now widely used for building server-side applications too.
  • Helps to build a complete solution: As we saw, JavaScript is widely used in both client and server-side applications, therefore it helps us to build an end-to-end solution to a given problem.
  • Used everywhere: JavaScript is so loved because it can be used anywhere. It can be used to develop websites, games or mobile apps, etc.
  • Huge community support: JavaScript has a huge community of users and mentors who love this language and take it’s legacy forward.

Why Study JavaScript?

JavaScript is one of the 3 languages all web developers must learn:

   1. HTML to define the content of web pages

   2. CSS to specify the layout of web pages

   3. JavaScript to program the behavior of web pages

This tutorial covers every version of JavaScript:

  • The Original JavaScript ES1 ES2 ES3 (1997-1999)
  • The First Main Revision ES5 (2009)
  • The Second Revision ES6 (2015)
  • All Yearly Additions (2016, 2017, 2018, 2019, 2020)

JavaScript Can Change HTML Content

One of many JavaScript HTML methods is getElementById().

The example below "finds" an HTML element (with id="demo"), and changes the element content (innerHTML) to "Hello JavaScript":

Example

document.getElementById("demo").innerHTML = "Hello JavaScript";

JavaScript Can Change HTML Attribute Values

In this example JavaScript changes the value of the src (source) attribute of an <img> tag:

The Light Bulb


JavaScript Can Change HTML Styles (CSS)

Changing the style of an HTML element, is a variant of changing an HTML attribute:

Example

document.getElementById("demo").style.fontSize = "35px";

JavaScript in <head> or <body>

You can place any number of scripts in an HTML document.

Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.

JavaScript in <head>

In this example, a JavaScript function is placed in the <head> section of an HTML page.

The function is invoked (called) when a button is clicked:

Example

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").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>

JavaScript in <body>

In this example, a JavaScript function is placed in the <body> section of an HTML page.

The function is invoked (called) when a button is clicked:

Example

<!DOCTYPE html>
<html>
<body>

<h2>Demo JavaScript in Body</h2>

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

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

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>

External JavaScript Advantages

Placing scripts in external files has some advantages:

  • It separates HTML and code
  • It makes HTML and JavaScript easier to read and maintain
  • Cached JavaScript files can speed up page loads

To add several script files to one page  - use several script tags:


Javascript Outputs


JavaScript Display Possibilities

JavaScript can "display" data in different ways:

  • Writing into an HTML element, using innerHTML.
  • Writing into the HTML output using document.write().
  • Writing into an alert box, using window.alert().
  • Writing into the browser console, using console.log().

Using innerHTML

To access an HTML element, JavaScript can use the document.getElementById(id) method.

The id attribute defines the HTML element. The innerHTML property defines the HTML content:

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My First Paragraph</p>

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

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>

Create your website or online store with Mozello

Quickly, easily, without programming.

Report abuse Learn more