How do you embedded javascript in html and describe the steps?

Last update on August 19 2022 21:50:38 (UTC/GMT +8 hours)

The HTML Document

An HTML document is made up of HTML elements, HTML element attributes, comments, special characters, and doctype. If you like to add presentational features to an HTML document you can attach css to an HTML document, to add dynamic user experience (e.g. popup, alert message, animations etc.) to an HTML document you can add JavaScipt to your HTML document.

If javascript is disabled in the browser property, even though an external script is attached or a script is written within <script>...</script> tags in an HTML document, it becomes inactive.

Certain JavaScripts do not work with all the browsers and sometimes a script works on and above (or vice a versa) a particular version of a web browser.

The script Tag

The script is an HTML element. Html script element is used to enclose client side scripts like JavaScript within an HTML document.

Syntax

<script>
  JavaScript statements....... 
  </script>

There are four types of attributes in script element:

1. language

The language attribute is used to specify the scripting language and it's version for the enclosed code. In the following example, JavaScript version is 1.2. If a specific browser does not support the said JavaScript version, the code is ignored. If you do not specify a language attribute, the default behavior depends on the browser version. The language attribute is deprecated in HTML 4.01.

Example

 <script language = "JavaScript1.2">
  JavaScript statements....... 
  </script> 

2. src

This attribute specifies the location of an external script. This attribute is useful for sharing functions among many different pages. Note that external JavaScript files contain only JavaScript statements and files must have the extension .js.

Example

 <script src = "common.js">
  JavaScript statements....... 
  </script> 

3. defer

If you set defer attribute, the browser delays the execution of the script or it changes the order of the execution of the script. This can improve the performance by delaying execution of scripts until the content of body is read and displayed by the browser.

4. type

This attribute specifies the scripting language. The scripting language is specified as a content type (e.g., "text/javascript" ). The attribute is supported by all modern browser.

Example

 <script type="text/javascript">
  JavaScript statements....... 
  </script> 

The noscript tag

If any browser does not support the JavaScript code the alternate content placed within noscript tag is being executed.

Example

<noscript>
  ... code ....
  </noscript> 

Javascript in HTML document

There are two general areas in HTML document where JavaScript can be placed. First is between <head>......</head> section, another is specific location in <body>......</body> section. If you want to display a message 'Good Morning' (through the JavaScript alert command) at the time of page loading then you must place the script at the <head>......</head> section. In the following examples you will see the different location of <script>.....</script> tags in a HTML document.

Script in the Head

<!DOCTYPE html>
  <head>
  <meta charset="utf-8" />
  <title> Script in head section </title>
  <script type = "text/javascript">
  JavaScript statements....... 
  </script>
  </head>
  <body>
  </body>
  </html> 

Script in the Body

<!DOCTYPE html>
  <head>
  <meta charset="utf-8" />
  <title> Script in the Body </title>
  </head>
  <body>
  <script type = "text/javascript">
  JavaScript statements....... 
  </script>
  </body>
  </html>
  

Scripts in the Head and Body

<!DOCTYPE html>
  <head>
  <meta charset="utf-8" />
  <title> Script in head and body section </title>
  <script type = "text/javascript">
  JavaScript statements....... 
  </script>
  </head>
  <body>
  <script type = "text/javascript">
  JavaScript statements....... 
  </script>
  </body>
  </html> 

Two Scripts in the Body

<!DOCTYPE html>
  <head>
  <meta charset="utf-8" />
  <title> Two Scripts in the Body </title>
  </head>
  <body>
  <script type = "text/javascript" scr="jsexample.js" >
  </script>
  <script type = "text/javascript">
  JavaScript statements....... 
  </script>
  </body>
  </html> 
 

Note: Optionally, if your script is not required to be executed before the content of the body is displayed, and your script takes longer time to load objects, you can place your script at the end of the body element.

Double or Single Quotes in JavaScript

There is no preferred method, you can use either. If you use one form of the quote (either single or double) in the string, you may use other as the literal.

Previous: JavaScript and ECMA Specification
Next: JavaScript Syntax and comments

JavaScript: Tips of the Day

Property name

const { name: myName } = { name: 'Owen' };

console.log(name);

When we unpack the property name from the object on the right-hand side, we assign its value "Owen" to a variable with the name myName.
With { name: myName }, we tell JavaScript that we want to create a new variable called myName with the value of the name property on the right-hand side.
Since we try to log name, a variable that is not defined, a ReferenceError gets thrown.

Ref: https://bit.ly/3jFRBje

How do you embed JavaScript in HTML?

Adding JavaScript into an HTML Document You can add JavaScript code in an HTML document 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 or in the <body> section, depending on when you want the JavaScript to load.

Where can you embed JavaScript code in HTML pages?

JavaScript in body or head: Scripts can be placed inside the body or the head section of an HTML page or inside both head and body. JavaScript in head: A JavaScript function is placed inside the head section of an HTML page and the function is invoked when a button is clicked.

How JavaScript is used in HTML?

JavaScript is a text-based programming language used both on the client-side and server-side that allows you to make web pages interactive. Where HTML and CSS are languages that give structure and style to web pages, JavaScript gives web pages interactive elements that engage a user.

What is the first step to insert JavaScript into HTML document?

The first way to add JavaScript to HTML is a direct one. You can do so by using the <script></script> tag that should encompass all the JS code you write. JS code can be added: between the <head> tags.