JavaScript is an object oriented scripting language used to create interactive web pages. Browsers can interpret JavaScript without the need of separate compiler like HTML tags. It is mainly used in client side scripting to offer features that can be achieved within the browser without sending requests to web server. Doing client side scripting is a good way to cut down on the server round trip times.
- Script is a programming language that is interpreted and runs in the context of some other application (in this case, the browser).
- And client side implies that the script is executed on the client rather than getting submitted to the server giving a much better response to the user.
Syntax
JavaScript is included in HTML page using the <SCRIPT> tag. The syntax looks something like this:
<SCRIPT LANGUAGE=JavaScript>
(JavaScript code goes here)
</SCRIPT>The SCRIPT tag can be either inside the HEAD tag or inside the BODY tag of the HTML document. The former is better in order to separate it from the actual HTML tags.
The browser interprets the script while parsing the HTML tags. The script could do very simple things like validations or some really complex things like changing the content of the HTML page itself! One of the most obvious examples could be – if a user leaves some mandatory fields blank, it does not make sense for the form to be submitted at all!! This could be trapped at the client itself using simple JavaScript functions.
History of JavaScript
Netscape created JavaScript with the original name as “LiveScript” – a scripting language that could be used both on the client and server side. It was then rechristened as “JavaScript” with the release of Navigator 2.0. Subsequent releases of the browser have resulted in more advanced versions of JavaScript.
Warning: It is easy to assume that JavaScript is a subset of Java – it isn’t! It is much closer to C. It has object-based features but is not a pure object-oriented language.
Advantages of Using JavaScript
Below are some reasons why JavaScript became a preferred scripting language among web developers:
- JavaScript is self interpreted language without a need of compiler.
- It can be easily embedded within the HTML document.
- Have simple syntax and very easy to learn.
- Platform independent – it can run on any web browser that has JavaScript enabled.
- Very easy to debug and test.
Examples of JavaScript
You can display a welcome message to visitors of your site when the page is loaded by using the below JavaScript code:
<HTML>
<HEAD>
<TITLE>ALERT BOX EXAMPLE</TITLE>
</HEAD>
<BODY>
<SCRIPT Language="JavaScript">
alert("Welcome to Our Website!!!");
document.write('<IMG SRC=""/>');
</SCRIPT>
</BODY>
</HTML>The welcome message will look like below when loaded in Google Chrome browser:
There are many other simple to complex practical examples. For example, Google AdSense uses asynchronous JavaScript to load advertisements in parallel to the content delivery. This helps the ads are delivered in parallel without blocking the content. You can paste the code within header area of any page to display ads.
Blocking JavaScript
Ever since advertisements started using JavaScript, it became one of the annoying factors for the readers who don’t want to get disturbed with the ads on the page. All web browsers by default have an option to enable or disable JavaScript. In Google Chrome you can disable JavaScript under advanced settings option as shown below:
There are also plugins and extensions available for browser to disable JavaScript content.
Learn more on how to disable JavaScript on browsers.
JavaScript Libraries
Nowadays JavaScript is being used in different forms based on libraries and frameworks. These libraries are generally hosted on server side and some popular examples include Ajax and jQuery. Many popular companies like Google offers the simplified and updated libraries so that developers can include in their product.
JavaScript Vs Page Speed
Using more JavaScript on a web page will drastically drag down the speed. Google PageSpeed Insights is one of the popular tools to test the speed of a web page. You can find two JavaScript related issues when testing any web page in Google PageSpeed tool.
Eliminate Render-blocking JavaScript and CSS in Above-the-fold Content
This indicates the content on the above the fold area is being blocked by the scripts on the page. This affects the loading speed as the content will be displayed only after the script files are loaded. The solution here could be to place the script files in the footer area of the page. Learn more on how to fix render-blocking scripts.
Minify JavaScript
Uncompressed JavaScript files with .js extension can be large in size and affect the page loading speed. The solution here is to compress the script files and deliver with .min.js extension.
Note that, the appearance of the web page may get disturbed if you compress or move the JavaScript to footer. Hence, make sure to test the page on various devices when minifying or moving JavaScript files to footer area.
Conclusion
JavaScript is an unavoidable part of any web site and helps to achieve complex features. JavaScript uses both client and server side scripting to complete tasks dynamically. Though it looks attractive, using more number of scripts will drag down the speed of a web page. It is evident that the page speed is more important compared to achieving a small function in a website. Follow the below guidelines when using JavaScript on your website:
- Use less number of script files and combine multiple files.
- It is good idea to deliver the static script files using content delivery network (CDN).
- Enable scripts only on the required pages. For example, it may not make good sense of displaying a JavaScript slider on home page while the script is loaded on all the pages on your site. Check the plugins allow to load the script files only on required pages before installing it on your site.
- Use jQuery and Ajax library files from Google or any other CDN to improve the page loading speed.
