JAVASCRIPT
Evolution of JavaScript:
- Internet started with "Mosaic" browser.
- ECMA Script is used as client-side script for Mosaic.
- Netscape Communications developed a browser called "Netscape Navigator". It is parent browser
for all browsers.
- Netscape appointment "Brendan Eich" to develop a client side script.
- Brendan Eich developed a script by name "Mocha", which was later renamed as "Live Script".
- Netscape given the responsibility of Live Script to "Sun Microsystems".
- Sun Microsystem and Netscape renamed Live Script as "JavaScript".
- In early 2000 Netscape stopped its services and given the responsibility of JavaScript to ECMA.
(European Computer Manufacturers Association)
- JavaScript is not known with the name ECMAScript.
- ECMAScript latest version is ES16. [ June 2025 ]
ECMAScript 2015 ES5
2016 ES6
...
2025 ES16
Issues with JavaScript:
- It is not a strongly typed language.
var x = 10; // x is number
x = "A"; // valid
- It is not implicitly strictly typed.
- You have to make it explicitly strict by using "use strict".
- It is not an OOP language.
- Extensibility issues.
- Code level security issues.
Note: "TypeScript" is an alternative for JavaScript, It is not replacement.
Developer => writes using TypeScript => Trans Compiles into JavaScript
JavaScript in Web Page:
- A web page can handle JavaScript client side using 3 techniques
1. Inline
2. Embedded
3. External File
1. External: Linking to an external JavaScript file using the <script src="[Link]"></script> tag. This
technique allows for better organization, reusability, and maintainability of code.
2. Embedded: Writing JavaScript code directly within an HTML document using the
<script>...</script> tag. This technique is useful for small scripts or specific page-level functionality.
3. Inline: Using JavaScript code directly within HTML elements, often through event handlers like
onclick attributes. This technique is generally discouraged for large projects due to maintainability
issues.
Embedded Technique: The embedded technique involves writing JavaScript code within the <script>
tags in an HTML document.
JavaScript Inline:
- You can write the JavaScript functions directly inside element start token.
- They are native and fast interactions.
- However not good for reusability.
Syntax:
<button onclick="[Link]()"> Print </button>
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Ticket</h1>
<button onclick="[Link]()">Print</button>
</body>
</html>
JavaScript Embedded:
- You can embed JavaScript functions into page by using <script> container.
- You can embed in <head> or <body> section.
- You can reuse the functions within page.
Syntax:
<script>
... your functions ...
</script>
- The default MIME type for JavaScript to run with interpreter is "text/javascript".
Syntax:
<script>
</script>
- To enable strict mode of JavaScript define "use strict" into <script> container.
<script type="text/javascript">
"use strict";
function name()
{
}
</script>
<button onclick="name()"> </button>
- JavaScript functions are configure is HTML comments to target legacy browsers.
- However this technique is deprecated. [obsolete]
Syntax:
<script type="text/javascript">
"use strict";
<!--
function name() { }
-->
</script>
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
"use strict";
<!--
function PrintPage() {
[Link]();
}
-->
</script>
</head>
<body>
<h1>Ticket</h1>
<button onclick="PrintPage()">Print</button>
</body>
</html>
External File:
- JavaScript functions can be configured in an external file with extension ".js"
- You can link external file using <script> element.
- You can minify the code and copy into "[Link]" for production.
Ex:
1. Go to src/scripts
2. Add a new file "[Link]"
"use strict"
function PrintPage()
{
[Link]();
}
3. Link to your HTML page
<head>
<script src="../src/scripts/[Link]" type="text/javascript"> </script>
</head>
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../src/scripts/[Link]">
</script>
</head>
<body>
<h1>Ticket</h1>
<button onclick="PrintPage()">Print</button>
</body>
</html>
Comments in JavaScript
Comment is nothing but it is a statement which is not display on
browser window. It is useful to understand which code is written for
what purpose.
Comments are useful in every programming language to deliver
message. It is used to add information about the code, warnings or
suggestions so that the end user or other developer can easily
interpret the code.
Types of Comments:
There are two types of comments are in JavaScript
1. Single-line Comment ex: // comment
2. Multi-line Comment ex: /* comments */
Working with Variables
Variable is a reference name of a memory block.
Variables are created or stored in RAM(stack area).
Variables are used to store/to hold a value for reuse purpose and
automatically substitute values in steps.
How to declare a variable?
we can define vars in JS Three ways, those are:
> by using "var"
Syn: var varname; declaration
OR
var varname=value; initialization
> by using "let" (since js6)
Syn: let varname;
OR
let varname=value; init
> by using "const" (since js6)
Syn: const varname=value; initialization
Where do we declare variables?
We can declare variables in open script tag, with in function or
Within block.
Rules for variable naming
Name should start with an alphabet (a to z or A to Z),
underscore( _ ), or dollar( $ ) sign.
After first character we can use digits (0 to 9).
variables are case sensitive. For example, a and A are
different variables.
Space is not allowed, means name should be single
word.
special chars (symbols) are not allowed in name, except
_ and $.
for example:
var eid; var 1a;
var total; var a1;
var _b; var book id;
var a@; var studentid;
var #b; var case;
var book_id; var a$1;
Java script did not provide any data types for declaring variables and
a variable in javascript can store any type of value. Hence java script
is loosely typed programme. We can use a variable directly without
declaring it in javascript, it’s called dynamic programming.
Var Let Const
We use in function or We can in use in We can use in
global scope function scope function scope
Block scope not Block scope supports Block scope supports
supported
Re assigning value Re assigning value Not supports re
assigning value
Re declaration of Not supports Not supports
variable supported
Since JS1 Since JS6 Since JS6
It supports Hoisting Not supports Not Supports
Global Variable
var is declared with in script tag but outside function & block those
are global variables.
these global variables are accessible from anywhere in program.
JavaScript datatypes:
In JavaScript data types are classified into the following two types.
1. Primitive datatypes
2. Non-primitive datatypes
Javascript has a five primitive data types.
1. string Ex: "siva" 'apples123' `Dno: 1-2-3/1a`
2. number Ex: 10 -25 100.56 -3.7988098009800
3. boolean Ex: true false
4. undefined Ex: value not assigned
5. null (object)
Non-primitive datatypes:
class, array, functions
Non-primitive datatypes: Non-primitive datatypes allow to store
reference(address) of data.
These datatypes allow us to store more than 1 value @time.
These are popularly known as reference or composite data types.
Ex: class, array
var st1 = new String();
Primitive data types:
strings: In Javascript a String should be within a single or double
quote.
var name="nit";
var name='nit';
number: Javascript has only one type of numbers, they can be return
with or without decimals
var x1=34.00; with decimals
var x2=34 without decimals
boolean: It is used to represent a Boolean value, These are as
follows.
var x = true //equivalent to true, yes or on
var y = false //equivalent to false, no or off
undefined: It is a value of variable with no value.
var x; //now x is undefined
null: variables can be emptied by setting the value to null.
ex: var x=null; //now x is null
typeof
typeof is one of reversed word, it's used to identify datatype of a
variable or value.
Syn: typeof(var-name)
Non-primitive data types: When a variable is declared with the
keyword new, the variable is an object.
new is used for dynamic memory allocations (for creating objectsand
arrays).
these datatypes are also called as reference datatype.
Ex:
var st=newString();
var x=newNumber();
let y=newBoolean();
let a = [ ];
here LHS are reference variables, and RHS are objects.
reference variables are storing address of dynamic memory (object).