Js Intro

CSI Web
Technologies
Workshop
Information Technology
JAVA SCRIPT
TOPICS:
What is JavaScript
Why JavaScript
JavaScript uses
Java Vs JavaScript
How and Where to JS code
Data Types
Pop-up Boxes
Conditional Statements
Loop Statements
WHAT IS JAVASCRIPT
❖ JavaScript is a Client side scripting language

❖ Where html and CSS are languages that give structure and style to web
pages, JavaScript gives web pages interactive elements that engage a
user
❖ Gives dynamic nature to the web
Eg: Pop ups, Window Sliding
❖ It is used to calculate, manipulate and validate the data in web
WHY JAVASCRIPT
❖ Easy to learn, faster to master

❖ Implementation is easier
❖ Faster in execution (as it is client side programming language)
❖ Simpler set of programming constructs
❖ It can be easily read and understood by developers than any other
programming languages
JAVASCRIPT USES
❖ For loading new content or data onto the page without

reloading
the page
❖ Mainly used for web browsers and web applications
Eg: search engines, gaming apps, mobile applications
❖ Rollover effects and dropdown menus
❖ Animating page elements such as resizing or relocating
❖ Playing audio and video
❖ Validating input from Web forms
DIFFERENCES BETWEEN JAVA AND JAVASCRIPT
JAVA JAVASCRIPT
▪ It is a Programming language. ▪ It is a scripting language.
▪ Java is a pure Object Oriented ▪ JavaScript is Object-Based

Programming Language. Language.
▪ The web-browser is not required to ▪ The web-browser is essential to

run java programs. run the JavaScript programs.
▪ It requires a large amount of ▪ It does not require that amount

memory. of memory.
How and where to write JS code:
<script> tag:
❖ The <script> tag is used to embed scripting statements into html file
❖ <script> tag can be placed in the <head> section or in the <body> section or
below the <body> section of html page
There are two ways to include JavaScript in your HTML document :

1. By writing Javascript code within <script> tag
2. By including Javascript code via an external file
Code within <script> tag:
Syntax:
<body>
<script>type your scripting statement here
</script>
</body>
Example:
<!DOCTYPE html>
<html>
<body>
<script>
document.write("Welcome to JavaScript Class")
</script>
</body>
</html>
Code via an external file:
Syntax:
<body>
<script src=“filename.js”>
</script>
</body>
The actual scripting statements will be in that external

file(filename.js)
.
Example:
<!DOCTYPE html>
<html>
<body>
<script src=“example.js”></script>
</body>
</html>
Example.js file:
document.write(“Welcome to JavaScript Class”)

Data Types in JS:
JavaScript has dynamic types. This means that the same variable can be used
to hold different data types
var X; //Here x is undefined
X=7; //Here x is Number
X=“CSI” //Here x is String
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.
JavaScript provides different data types to hold different types of values. There are
two types of data types in JavaScript
1. Primitive data type
2. Non Primitive data type
Primitive data types:

There are five types of primitive data types in JavaScript
String:
represents sequence of characters
EX:
let text = "ABCDEFGHI__LMNOPQRSTUVWXYZ";
let length = text.length;
Length is used to calculate the length of string
Number:
represents numeric values. Numbers can be written with or
without decimals
EX:
var x = 3.14; // A number with decimals
var y = 3; // A number without decimals
Boolean:
represents boolean value either false or true.Boolean() function is
used to find out if given statement is true
EX:
(Boolean(9>7)
Undefined:
represents undefined value i.e variable with no value
EX-1:
let x;
if (x === "undefined") {
text = "x is undefined";
} else {
text = "x is defined";
}
EX-2:
let x;
if (typeof x === "undefined") {
text = "x is undefined";
} else {
text = "x is defined";}
Null:
The value Null represents the intentional absence of any object value.It is treated as falsy
for Boolean operations
EX:
var x=null
non-primitive data types:

There are 3 non primitive data types
Object:
represents instance through which we can access members.Objects are
variables too but contain many values
EX:
const shoes = {type:“female", model:“fila", color:“white"};
Array:
represents group of similar values
EX:
const subj=[“Html”, “CSS”, “JS”]
Regular Expressions:
represents regular expression
EX:
const regexp=/xyz/;
JavaScript Pop-up Boxes
❑ Alert Box
❑ Confirm Box
❑ Prompt Box
Alert Box:
An alert dialog box is mostly used to inform or alert the user by displaying some
messages in a small dialogue box.
EX:
<body>
<script>alert(“Alert box displayed”)
</script>
</body>
Confirm Box:
A confirmation box is used to let the user make a choice.
EX:
<body>
<script>confirm(“click ok or cancel to confirm”)
</script>
</body>
prompt Box:
JavaScript Prompt Box can be used when we want to get some user
input.
EX:
<body>
<script>prompt(“Are You interested in Web Technology Course”)
</script>
Operators
❑ Arithmetic Operators
❑ Assignment Operators
❑ Relational Operators
❑ Logical Operators
Arithmetic Operators:
Example:
<html>
<head>
<title>Operator Example</title>
</head>
<body>
<script >
var a = 5
++a
alert("The value of a = " + a )
-->
</script>
</body>
</html>
Assignment Operators:
Example:
<html>
<head>
</head>
<body>
<script>
var a = 10
var b = 2
a += b
alert("a += b is " + a )
</script>
</body>
</html>
Relational Operators:
Logical Operators:
Example:
<html>
<head>
</head>
<body>
<script>
userID = prompt("Enter User ID"," ")
password = prompt("Enter Password"," ")
if(userID == "user" && password == "secure")
{
alert("Valid login")
}
else
{
alert("Invalid login")
}
</script>
</body>
</html>
Conditional Statements:
A conditional statement is a set of commands that executes if a specified

condition is true.
JavaScript supports two conditional statements:
▪ if...else
▪ switch.
if...else Statement
▪ Simple if
▪ if-else Statement
▪ Nested if
▪ Else-if ladder
If-else
Simple if
if (expression)
if (expression) statement or block
statement; else
statement or block
Nested if
else-if ladder
if (expression)
{ if (expression1)
if (expression) statement or block
statement or block else if (expression2)
else statement or block
statement or block else if (expression3)
} statement or block
else else
statement or block statement or block
Example:
<html>
<body>
<script>
var d = new Date()
var time = d.getHours()
if (time < 10)
{
document.write("<b>Good morning</b>")
}
else
{
document.write("<b>Good day</b>")
}
</script>
</body>
</html>
</html>
Switch
Statement
• A switch statement allows a program to evaluate an expression and
attempt to match the expression's value to a case label. If a match is
found, the program executes the associated statement.
• Syntax
switch (expression)
{
case label_1:
statements_1
break;
case label_2:
statements_2
break;
….
default:
statements_def
}
EXAMPLE:
<!DOCTYPE html>
<html>
<body>
<script>
let day;
switch (new Date().getDay())
{
case 0:
document.write("Weekend");
break;
case 6:
document.write("Weekend");
break;
default:
document.write("Not Weekend");
break;
}
</script>
</body>
</html>
Loop Statements
A loop is a set of commands that executes repeatedly

until a specified condition is met. JavaScript supports
• For loop
• do while
• while loop
for Loop
Syntax of for loop
for (var=startvalue;var<=endvalue;var=var+increment)
{
code to be executed
}
When a for loop executes, the following occurs:

1. The initializing expression initial-expression, if any, is executed.
This expression usually initializes one or more loop counters.
2. The condition expression is evaluated. If the value of condition
is true, the loop statements execute. If the value of condition is
false, the for loop terminates.
3. The statements execute.
4. The update expression incrementExpression executes, and
control returns to Step 2.
Example:
<html>
<body>
<script>
for (i = 1; i <= 6; i++)
{
document.write(i*2)
document.write("<br/>")
}
</script>
</body>
</html>
do...while Statement
The do...while statement repeats until a specified condition evaluates to false. A
do...while statement looks as follows:
do
{
statement
} while (condition);
Example:
<html>
<body>
<script language=“javascript”> i=0
do { i++;
document.write(i);
} while (i<5);
While Loop
A while statement executes its statements as long as a specified
condition evaluates to true
while (condition)
{
statement
}
Example:
<html>
<body>
<script >
var i=0
while (i<=10)
{
document.write("The number is " + i)
document.write("<br />")
i=i+1
}
ASSIGNMENT
• Create Your Class Timetble Using Html Tables

• Eg:

Js Intro

Uploaded by

Js Intro

Uploaded by

CSI Web

❖ JavaScript is a Client side scripting language

❖ Easy to learn, faster to master

❖ For loading new content or data onto the page without

▪ It is a Programming language. ▪ It is a scripting language.

▪ Java is a pure Object Oriented ▪ JavaScript is Object-Based

▪ The web-browser is not required to ▪ The web-browser is essential to

▪ It requires a large amount of ▪ It does not require that amount

There are two ways to include JavaScript in your HTML document :

The actual scripting statements will be in that external

document.write(“Welcome to JavaScript Class”)

Primitive data types:

non-primitive data types:

A conditional statement is a set of commands that executes if a specified

A loop is a set of commands that executes repeatedly

When a for loop executes, the following occurs:

• Create Your Class Timetble Using Html Tables

You might also like