Introduction To Javascript:

What is JavaScript ?

• JavaScript (js) is a light-weight object-oriented programming language

• JS used by several websites for scripting the webpages.

• It is an interpreted programming Langauge.

• JS is full-fledged programming language that enables dynamic interactivity on websites when applied to an HTML document.

Features of JavaScript :

There are following features of JavaScript:

1. All popular web browsers support JavaScript as they provide built-in execution environments.

2. JavaScript follows the syntax and structure of the C programming language. Thus, it is a structured programming language.

3. JavaScript is a weakly typed language, where certain types are implicitly cast (depending on the operation).

4. JavaScript is an object-oriented programming language that uses prototypes rather than using classes for inheritance.

5. It is a light-weighted and interpreted language.

6. It is a case-sensitive language.

7. JavaScript is supportable in several operating systems including, Windows, macOS, etc.

8. It provides good control to the users over the web browsers.

History of JavaScript :

• In 1993, Mosaic, the first popular web browser, came into existence.

• In the year 1994, Netscape was founded by Marc Andreessen. He realized that the web needed to become more dynamic. Thus, a 'glue language' was believed to be provided to HTML to make web designing easy for designers and part-time programmers.

• JS was introduced in the year 1995 for adding programs to the webpages in the Netscape Navigator browser

Application of JavaScript :

JavaScript is used to create interactive websites. It is mainly used for:

• Client-side validation,

• Dynamic drop-down menus,

• Displaying date and time,

• Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm dialog box and prompt dialog box),

• Displaying clocks etc.

Limitations of JavaScript :

• Security risks:

  JavaScript can be used to fetch data using AJAX or by manipulating tags that load data such as <img>, <object>, <script>. These attacks are called cross-site script attacks. They inject JS that is not part of the site into the visitor’s browser thus fetching the details.

• Performance:

  JavaScript does not provide the same level of performance as offered by many traditional languages as a complex program written in JavaScript would be comparatively slow. But as JavaScript is used to perform simple tasks in a browser, so performance is not considered a big restriction in its use.

• Complexity:

  To master a scripting language, programmers must have a thorough knowledge of all the programming concepts, core language objects, and client and server-side objects otherwise it would be difficult for them to write advanced scripts using JavaScript.

• Weak error handling and type checking facilities:

  It is a weakly typed language as there is no need to specify the data type of the variable. So wrong type checking is not performed by compile.

Why JavaScript is known as a lightweight programming language ?

• JavaScript is considered lightweight due to the fact that it has low CPU usage, is easy to implement.

• JS has a minimalist syntax. Minimalist syntax as in, has no data types. Everything is treated here as an object.

• It is very easy to learn because of its syntax similar to C++ and Java.

• A lightweight language does not consume much of your CPU’s resources.

• It doesn’t put excess strain on your CPU or RAM.

• JavaScript runs in the browser even though it has complex paradigms and logic which means it uses fewer resources than other languages.

• For example, NodeJs, a variation of JavaScript not only performs faster computations but also uses fewer resources than its counterparts such as Dart or Java.

Is JavaScript Compiled or Interpreted or both ?

• JavaScript is both compiled and interpreted.

• In the earlier versions of JavaScript, it used only the interpreter that executed code line by line and shows the result immediately.

• But with time the performance became an issue as interpretation is quite slow.

• Therefore, in the newer versions of JS, probably after the V8, the JIT compiler was also incorporated to optimize the execution and display the result more quickly.

• This JIT compiler generates a bytecode that is relatively easier to code. This bytecode is a set of highly optimized instructions.

• The V8 engine initially uses an interpreter, to interpret the code.

• On further executions, the V8 engine finds patterns such as frequently executed functions, and frequently used variables, and compiles them to improve performance.

JavaScript Example :

• Javascript example is easy to code.

• JavaScript provides 3 places to put the JavaScript code :

  1. Within body tag

  2.Within head tag .

  3.External JavaScript.

Let’s create the first JavaScript example.

<script type="text/javascript">  
document.write("JavaScript is a simple language for javatpoint learners");  
</script>

The script tag specifies that we are using JavaScript.The text/javascript is the content type that provides information to the browser about the data.The document.write() function is used to display dynamic content through JavaScript. We will learn about document object in detail later.

3 Places to put JavaScript code :

1. Between the body tag of html

2. Between the head tag of html

3. In .js file (external javaScript)

1) JavaScript Example : code between the body tag :

In the above example, we have displayed the dynamic content using JavaScript. Let’s see the simple example of JavaScript that displays alert dialog box.

<script type="text/javascript">  
 alert("Hello Javatpoint");  
</script>

2) JavaScript Example : code between the head tag :

Let’s see the same example of displaying alert dialog box of JavaScript that is contained inside the head tag.In this example, we are creating a function msg(). To create function in JavaScript, you need to write function with function_name as given below.To call function, you need to work on event. Here we are using onclick event to call msg() function.

<html>  
<head>  
<script type="text/javascript">  
function msg(){  
 alert("Hello Javatpoint");  
}  
</script>  
</head>  
<body>  
<p>Welcome to JavaScript</p>  
<form>  
<input type="button" value="click" onclick="msg()"/>  
</form>  
</body>  
</html>

3)External JavaScript file :

We can create external JavaScript file and embed it in many html page.It provides code re usability because single JavaScript file can be used in several html pages.An external JavaScript file must be saved by .js extension. It is recommended to embed all JavaScript files into a single file. It increases the speed of the webpage.Let's create an external JavaScript file that prints Hello Javatpoint in a alert dialog box.

message.js:

function msg(){  
 alert("Hello Javatpoint");  
}

Let's include the JavaScript file into html page. It calls the JavaScript function on button click.

index.html :

<html>  
<head>  
<script type="text/javascript" src="message.js"></script>  
</head>  
<body>  
<p>Welcome to JavaScript</p>  
<form>  
<input type="button" value="click" onclick="msg()"/>  
</form>  
</body>  
</html>

Advantages of External JavaScript :

There will be following benefits if a user creates an external javascript:

1. It helps in the reusability of code in more than one HTML file.

2. It allows easy code readability.

3. It is time-efficient as web browsers cache the external js files, which further reduces the page loading time.

4. It enables both web designers and coders to work with html and js files parallelly and separately, i.e., without facing any code conflictions.

5. The length of the code reduces as only we need to specify the location of the js file.

Disadvantages of External JavaScript :

There are the following disadvantages of external files:

1. The stealer may download the coder's code using the url of the js file.

2. If two js files are dependent on one another, then a failure in one file may affect the execution of the other dependent file.

3. The web browser needs to make an additional http request to get the js code.

4. A tiny to a large change in the js code may cause unexpected results in all its dependent files.

5. We need to check each file that depends on the commonly created external javascript file.

6. If it is a few lines of code, then better to implement the internal javascript code.

What Next ?

Basic Of JavaScript.