TECHNO INDIA UNIVERSITY
WEST BENGAL
JavaScript
1
TECHNO INDIA UNIVERSITY
WEST BENGAL
• JavaScript is used to create client-side dynamic pages.
• JavaScript is an object-based scripting language which is lightweight and
cross-platform.
• JavaScript is not a compiled language, but it is a translated language. The
JavaScript Translator (embedded in the browser) is responsible for
translating the JavaScript code for the web browser.
NOTES:
• JavaScript was initially created to “make web pages alive”.
• The programs in this language are called scripts. They can be written right
in a web page’s HTML and run automatically as the page loads.
• Scripts are provided and executed as plain text. They don’t need special
preparation or compilation to run.
• In this aspect, JavaScript is very different from another language called2Java.
TECHNO INDIA UNIVERSITY
WEST BENGAL
JavaScript
JavaScript (js) is a light-weight object-oriented programming language
which is used by several websites for scripting the webpages. It is an
interpreted, full-fledged programming language that enables dynamic
interactivity on websites when applied to an HTML document. With
JavaScript, users can build modern web applications to interact directly
without reloading the page every time.
3
TECHNO INDIA UNIVERSITY
WEST BENGAL
Features of JavaScript:
• All popular web browsers support JavaScript as they provide built-in
execution environments.
• JavaScript follows the syntax and structure of the C programming
language. Thus, it is a structured programming language.
• JavaScript is an object-oriented programming language that uses
prototypes rather than using classes for inheritance.
• It is a light-weighted and interpreted language.
• It is a case-sensitive language.
• JavaScript is supportable in several operating systems including,
Windows, macOS, etc.
• It provides good control to the users over the web browsers.
4
TECHNO INDIA UNIVERSITY
WEST BENGAL
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.
5
TECHNO INDIA UNIVERSITY
WEST BENGAL
Example:
<html>
<body>
<h2>Hello BCS3B Welcome to JavaScript</h2>
<script>
document.write("Hello JavaScript by JavaScript");
</script>
</body>
</html>
6
TECHNO INDIA UNIVERSITY
WEST BENGAL
JavaScript Example
Javascript example is easy to code. JavaScript provides 3 places to put the
JavaScript code: within body tag, within head tag and external JavaScript file.
<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. 7
TECHNO INDIA UNIVERSITY
WEST BENGAL
3 Places to put JavaScript code
• Between the body tag of html
• Between the head tag of html
• 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>
8
TECHNO INDIA UNIVERSITY
WEST BENGAL
2) JavaScript Example : code between the head tag
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> <body>
<head> <p>Welcome to
<script Javascript</p>
type="text/javascript"> <form>
function msg(){ <input type="button"
alert("Hello TIU"); value="click"
} onclick="msg()"/>
</script> </form>
</head> </body>
</html>
9
TECHNO INDIA UNIVERSITY
WEST BENGAL
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.
10
TECHNO INDIA UNIVERSITY
WEST BENGAL
message.js index.html
function msg(){ <html>
alert("Hello Javatpoint"); <head>
} <script type="text/javascript"
src="message.js"></script>
</head>
<body>
include the
JavaScript <p>Welcome to JavaScript</p>
file into html <form>
page. It calls
<input type="button" value="click"
the
JavaScript onclick="msg()"/>
function on </form>
button click. </body>
</html> 11
TECHNO INDIA UNIVERSITY
WEST BENGAL
Advantages of External JavaScript
• It helps in the reusability of code in more than one HTML file.
• It allows easy code readability.
• It is time-efficient as web browsers cache the external js files, which
further reduces the page loading time.
• It enables both web designers and coders to work with html and js files
parallelly and separately, i.e., without facing any code conflictions.
• The length of the code reduces as only we need to specify the location
of the js file.
12
TECHNO INDIA UNIVERSITY
WEST BENGAL
Disadvantages of External JavaScript
• There are the following disadvantages of external files:
• The stealer may download the coder's code using the url of the js file.
• If two js files are dependent on one another, then a failure in one file
may affect the execution of the other dependent file.
• The web browser needs to make an additional http request to get the js
code.
• A tiny to a large change in the js code may cause unexpected results in
all its dependent files.
• We need to check each file that depends on the commonly created
external javascript file.
• If it is a few lines of code, then better to implement the internal
javascript code.
13
TECHNO INDIA UNIVERSITY
WEST BENGAL
JavaScript Variable
• A JavaScript variable is simply a name of storage location. There are two
types of variables in JavaScript : local variable and global variable.
• There are some rules while declaring a JavaScript variable (also known as
identifiers).
• Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $
) sign.
• After first letter we can use digits (0 to 9), for example value1.
• JavaScript variables are case sensitive, for example x and X are different
variables.
14
TECHNO INDIA UNIVERSITY
WEST BENGAL
JavaScript Local variable:
<html>
<body> 1
<script>
var x = 10;
var y = 20;
var z=x+y;
document.write("The result is ", z);
</script>
</body>
</html>
2 3
15
TECHNO INDIA UNIVERSITY
WEST BENGAL
JavaScript global variable
A JavaScript global variable is accessible from any function. A variable i.e.
declared outside the function or declared with window object is known as global
variable. For example:
<html>
<body>
<script>
var data=200;//gloabal variable
function a(){
document.writeln(data);
}
function b(){
document.writeln(data);
} A JavaScript global variable is declared outside
a();//calling JavaScript function the function or declared with window object. It
b(); can be accessed from any function.
</script>
</body>
16
</html>
TECHNO INDIA UNIVERSITY
WEST BENGAL
Declaring JavaScript global variable within function
To declare JavaScript global variables inside function, you need to use
window object. For example:
<html>
<body>
<script>
function m(){
window.value=100;//declaring global variable by window object
}
function n(){
alert(window.value);//accessing global variable from other function
}
m();
n();
</script>
</body>
</html> 17
TECHNO INDIA UNIVERSITY
WEST BENGAL
Internals of global variable in JavaScript
When you declare a variable outside the function, it is added in the
window object internally. You can access it through window object also.
For example:
var value=50;
function a()
{
alert(window.value);//accessing global variable
}
18
TECHNO INDIA UNIVERSITY
WEST BENGAL
Javascript Data Types
JavaScript provides different data types to hold different types of values. There
are two types of data types in JavaScript.
• Primitive data type
• Non-primitive (reference) data type
JavaScript is a dynamic type language, means you don't need to specify
type of the variable because it is dynamically used by JavaScript engine.
You need to use var here to specify the data type. It can hold any type of values
such as numbers, strings etc. For example:
var a=40;//holding number
var b="Rahul";//holding string
19
TECHNO INDIA UNIVERSITY
WEST BENGAL
JavaScript primitive data types: There are five types of primitive data types in JavaScript.
Data Type Description
String represents sequence of characters e.g. "hello"
Number represents numeric values e.g. 100
Boolean represents boolean value either false or true
Undefined represents undefined value
Null represents null i.e. no value at all
JavaScript non-primitive data types:
Data Type Description
Object represents instance through which we can access
members
Array represents group of similar values
RegExp represents regular expression 20
TECHNO INDIA UNIVERSITY
WEST BENGAL
JavaScript If-else
The JavaScript if-else statement is used to execute the code whether
condition is true or false. There are three forms of if statement in
JavaScript.
• If Statement
• If else statement
• if else if statement
21
TECHNO INDIA UNIVERSITY
WEST BENGAL
22
TECHNO INDIA UNIVERSITY
WEST BENGAL
JavaScript Switch result="B Grade";
break;
<!DOCTYPE html> case 'C':
<html> result="C Grade";
<body> break;
<script> default:
var grade='B'; result="No Grade";
var result; }
switch(grade){ document.write(result);
case 'A': </script>
result="A Grade"; </body>
break; </html>
case 'B':
23
TECHNO INDIA UNIVERSITY
WEST BENGAL
JavaScript Loops: There are four types of loops in JavaScript.
– for loop
– while loop
– do-while loop
– for-in loop
• JavaScript for loop
<script>
for (i=1; i<=5; i++)
{
document.write(i + "<br/>")
}
</script>
24
TECHNO INDIA UNIVERSITY
WEST BENGAL
JavaScript while loop JavaScript do while loop
<script> <script>
var i=11; var i=21;
while (i<=15) do{
{ document.write(i + "<br/>");
document.write(i + "<br/>"); i++;
i++; }while (i<=25);
} </script>
</script>
25
TECHNO INDIA UNIVERSITY
WEST BENGAL
JavaScript For In loop
Syntax
for (key in object) {
// code block to be executed
}
26
TECHNO INDIA UNIVERSITY
WEST BENGAL
JavaScript For In loop
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For In</h2>
<p>The for in statement can loops over array values:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let txt = "";
for (let x in numbers) {
txt += numbers[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html> 27
TECHNO INDIA UNIVERSITY
WEST BENGAL
JavaScript Objects
A javaScript object is an entity having state and behavior (properties and
method).
• JavaScript is an object-based language. Everything is an object in
JavaScript.
• JavaScript is template based not class based. Here, we don't create
class to get the object. But, we direct create objects.
Creating Objects in JavaScript: There are 3 ways to create objects.
• By object literal
• By creating instance of Object directly (using new keyword)
• By using an object constructor (using new keyword)
28
TECHNO INDIA UNIVERSITY
WEST BENGAL
JavaScript Object by object literal
The syntax of creating object using object literal is given below:
object={property1:value1,property2:value2.....propertyN:valueN}
Example:
<html>
<body>
<script>
emp={id:102,name:"Shyam Kumar",salary:40000}
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>
</body>
</html>
** property and value is separated by : (colon). 29
TECHNO INDIA UNIVERSITY
WEST BENGAL
By creating instance of Object
The syntax of creating object directly is given below:
var objectname=new Object();
Example:
<html>
<body>
<script>
var emp=new Object();
emp.id=101;
emp.name="Ravi Malik";
emp.salary=50000;
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>
</body>
</html>
** Here, new keyword is used to create object. 30
TECHNO INDIA UNIVERSITY
WEST BENGAL
By using an Object constructor
Here, we need to create function with arguments. Each argument value can
be assigned in the current object by using this keyword.
<html>
<body>
<script>
function emp(id,name,salary){
this.id=id;
this.name=name;
this.salary=salary;
}
e=new emp(103,"Vimal Jaiswal",30000);
document.write(e.id+" "+e.name+" "+e.salary);
</script>
</body>
</html>
** The this keyword refers to the current object. 31
TECHNO INDIA UNIVERSITY
WEST BENGAL
Thank You
32
