Javascript
Introduction
• Most Popular Programming Language
• JS frameworks i.e Node JS, ReactJS is highly in
demand in industry
• Used mainly for front end validation and more
powerful than html and css
• Other usage includes HTML5 Gaming,
Animations , API calling e.t.c
How to use
1) Create any html file
2) Open in text editor
3) Use <script> </script> tag to write JS code
(just like you use <style> tag to write css in
between)
4) Note: Every statement (Apart from few) must
ends with “;” in javascript similar to c++
otherwise your js code will not run properly.
How to use
1) In between script tag write
document.write(“This is my
first javascript program”)
<html>
<body>
<script>
document.write("This is my first Javascript
program");
Document.write is builtin
</script>
</body>
javascript function which acts
similar to cout in c++. It
</html> prints the data in html
Output using alert()
<html>
<body>
<script>
alert("Hello! I am an alert box!");
alert() is builtin javascript
</script>
function which outputs the data
in form of popup message. It is
</body> commonly used for alert
</html> messages or for debug purposes
Output using document.write()
<!DOCTYPE html>
<head>
</head>
<html>
<body>
<h1>Hi how You </h1>
<p> hello </p>
</body>
<script>
document.write("This is my first Javascript
program");
</script>
</html>
Output using
document.getelementbyid().innerhtml
In this example, document.getElementById()
method is used to retrieve the <h1> element
with the id attribute of "myHeading".
The .innerHTML property is then used to set
the content of the element to "Welcome to my
website!".
Basic Syntax
• <!DOCTYPE html>
• Every statement other then • <html>
if,else,while,switch will end • <body>
• <h2>JavaScript Syntax</h2>
with semicolon “;” • <script>
• You don’t mention data types
• var
with variables i.e if you want x,y,z;
to declare a variable x the • x=0;
• y=12;
simple way will be var x=0; • z=15;
• var x, y, z; • var result=x+y*z;
// Declaration • document.write("Result of X+Y*Z:");
x = 5; y = 6; // Assign Values • document.write(result);
z = x + y; // Compute
• </script>
Values
• </body>
• </html>
Operator
• var x = 5;
s
// assign the value 5 to x
var y = 2; // assign the value 2 to y
var z = x + y; // assign the value 7 to z (5 + 2)
• var z = x * y; // Multiply x and y and assign value to z
• The +
operator
can also be
used to add
(concatenat
e) strings.
• var txt1 =
"John";
var txt2 =
Operator
s
Operator
s
Operator
s
Data Types
• By default JavaScript uses implicit data types
• E.g in c++ you explicitly write data type with variables
i.e int c=0; string str=“this is string”; float flt=10.9;
• But in JavaScript you don’t explicitly write data types like in c++ instead
you just write var then variable name i.e var x=0; var str=“this is
string”; var flt=10.9;
• JavaScript automatically or in other others implicitly detects what value
is inside any variable (either its integer,float,string) and deal it
accordingly
Data Types
• JavaScript variables can hold many data types: numbers, strings,
objects and more:
• JavaScript is dynamic, that means same variables can hold different
data types.
• Recall c++ if you have ever defined int x=0; you can never put
string or integer value in x variable. It will always be integer but in
javaScript you can change the value later
• var x; // Now x is undefined
x= // Now x is a Number
5; // Now x is a String
x=
"Joh
Data Types
• var x = 100 + “NUML"; Does this makes any
sense to add 100 to NUML (An integer adding to
a string)?
• Instead javaScript will treat same thing as var x
= “100" + “NUML"; so output will be 100NUML
(The 100 will also treated as string by javascript
and will be concatenated with NUML)
• var x = 100 + 4 + “NUML"; // What will happen
with this statement?
Data Types
• Output will be 104NUML . But how?
• JavaScript reads the statement from left to right
so when it will start reading statement it will first
read 100 which is integer and then when it will
reach 4 it will immediately add 100+4=104 but
when it will reach NUML it will automatically
convert 104 into string and concatenate it with
NUML
• var x=“NUML”+100+4; // What will happen
now?
Data Types
• NUML1004
• Again since we talked about javaScript read
the statement from left to right. It will first
read a string so immediately every thing after
than will be treated as string and will be
concatenated with NUML
• var x=“NUML”+100+4;
Data Types (Strings)
• You can use quotes inside a string, as long as
they don't match the quotes surrounding the
string
• var answer1 = "It's alright";
var answer2 = "He is called 'Johnny'";
var answer3 = 'He is called
"Johnny"';
Array
s
• var cars = ["Saab", "Volvo", "BMW"];
• If you want to get anything at specific index
you can use cars[0];cars[1];cars[2];
• What will you get if you write cars[1];?
If condition
Syntax
• if (condition) {
// block of code to be executed if the condition is
true
}
<script>
var x=10;
if (x <
18) {
docum
ent.writ
e("num
If else condition
Syntax
• if (condition) {
// block of code to be executed if the condition is true
}
else{
// block of code to be executed if the condition is false
}
<script>
var x=10;
if (x < 18) {
documen
t.write("n
umber is
less than
18");
}
else
{
document
.write("nu
mber is
greater
Mutiple If else condition
Syntax
if (condition1) {
// block of code to be executed if
condition1 is true
} else if (condition2) {
// block of code to be executed if the
condition1 is false and condition2 is true
} else {
// block of code to be executed if the
condition1 is false and condition2 is false
}
Example Multiple if else
• <script>
• var greeting;
• var time = new Date().getHours(); //builtin javascript function that gets current
hours of time;
• if (time < 10) {
• greeting = "Good morning";
• } else if (time < 20) {
• greeting = "Good day";
• } else {
• greeting = "Good evening";
• }
• document.write(greeting);
• </script>
