Introduction to JavaScript

JavaScript is the most popular and widely used client-side scripting language. Client-side scripting refers to scripts that run within your web browser. It is designed to add interactivity and dynamic effects to web pages by manipulating the content returned from a web server.

What You Can Do with JavaScript

There are lot more things you can do with JavaScript.

You can modify the content of a web page by adding or removing elements.
You can change the style and position of the elements on a web page.
You can monitor events like a mouse click, hover, etc., and react to them.
You can perform and control transitions and animations.
You can create alert pop-ups to display info or warning messages to the user.
You can perform operations based on user inputs and display the results.
You can validate user inputs before submitting them to the server.

Adding JavaScript to Your Web Pages

There are typically three ways to add JavaScript to a web page:

Embedding the JavaScript code between a pair of <script> and </script> tag.
Creating an external JavaScript file with the .js extension and then load it within the page through the src attribute of the <script> tag.
Placing the JavaScript code directly inside an HTML tag using the special tag attributes such as onclick, onmouseover, onkeypress, onload, etc.

The following sections will describe each of these procedures in detail:

Embedding the JavaScript Code

You can embed the JavaScript code directly within your web pages by placing it between the <script> and </script> tags. The <script> tag indicates to the browser that the contained statements are to be interpreted as executable script and not HTML. Here’s an example:

Refer 1-EmbeddedJS.HTML

Calling an External JavaScript File

You can also place your JavaScript code into a separate file with a .js extension, and then call that file in your document through the src attribute of the <script> tag, like this:

This is useful if you want the same scripts available to multiple documents. It saves you from repeating the same task over and over again and makes your website much easier to maintain.

Well, let’s create a JavaScript file named “hello.js” and place the following code in it:

// A function to display a message function sayHello() { alert(“Hello World!”); } // Call function on click of the button document.getElementById(“myBtn”).onclick = sayHello;

Now, you can call this external JavaScript file within a web page using the <script> the tag.

Refer 2-ExternalJS.HTML

Placing the JavaScript Code Inline

You can also place JavaScript code inline by inserting it directly inside the HTML tag using the special tag attributes such
as onclick, onmouseover, onkeypress, onload, etc.

However, you should avoid placing a large amount of JavaScript code inline as it clutters up your HTML with JavaScript and makes your code difficult to maintain.

Refer 3-InlineJS.HTML

Positioning of Script inside HTML Document

The <script> element can be placed in the <head>, or <body> section of an HTML document. But ideally, scripts should be placed at the end of the body section, just before the closing </body> tag, it will make your web pages load faster since it prevents obstruction of initial page rendering.

Each <script> tag blocks the page rendering process until it has fully downloaded and executed the JavaScript code, so placing them in the head section (i.e. <head> element) of the document without any valid reason will significantly impact your website performance.

Difference Between Client-side and Server-side Scripting

Client-side scripting languages such as JavaScript, VBScript, etc. are interpreted and executed by the web browser, while server-side scripting languages such as PHP, ASP, Java, Python, Ruby, etc. runs on the webserver and the output sent back to the web browser in HTML format.

Also, the response from a server-side script is slower as compared to a client-side script, because server-side scripts are processed on the remote computer, not on the user’s local computer.

Client-side scripting	Server-side scripting
Source code is visible to the user.	Source code is not visible to the user because its output of server-side is an HTML page.
It usually depends on the browser and its version.	In this, any server-side technology can be useful and it does not depend on the client.
It runs on the user’s computer.	It runs on a web server.
There are many advantages link with this like faster. response times, a more interactive application.	The primary advantage is its the ability to highly customize, response requirements, access rights based on user.
It does not provide security for data.	It provides more security for data.
It is a technique used in web development in which scripts run on the client’s browser.	It is a technique that uses scripts on a webserver to produce a response that is customized for each client’s request.
HTML, CSS, and javascript are used.	PHP, Python, Java, Ruby are used.

If you liked our content Introduction to JavaScript, then you may also like XSLT

Introduction to JavaScript || Client Side Scripting || BCIS Notes