CL1000
ICT
Maham Saleem
DEPARTMENT OF COMPUTER
SCIENCE
maham.saleem@nu.edu.pk
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.
JS Outputs
•Writing into an HTML element,
using innerHTML.
•Writing into the HTML output
using document.write().
•Writing into an alert box,
using window.alert().
•Writing into the browser
console, using console.log().
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 prints
</html> 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() Using document.write()
after an HTML document is
<html> fully loaded, will delete all
existing HTML:
<body>
It should only be used
<p> hello </p>
for Testing
</body>
<script>
document.write("This is my
first Javascript program");
</script>
</html>
Output using
document.getelementbyid().innerhtml
1) In between script tag write
document.write(“This is my
first javascript program”)
1) In between script tag write
document.write(“This is my first javascript
program”)
<html>
<body>
<h2>My First Javascript Output Program</h2>
<p id="demo"></p>
Document.getelementbyid(id).Inner HTML is
<script> function which paste the html inside the the
document.getElementById("demo").innerHTML = "This
Text is printed Through Javascript";
tag you specified e.g in this example we
</script> specified the element with id “demo” which
is paragraph so this function will paste the
</body> text inside paragraph. You can even put tags
</html>
inside
e.g <b> </b> tag. In short whatever you
write after = will be pasted inside the
“demo” tag (in our case)
Variables
Variables are Containers for Storing Data
JavaScript Variables can be declared
in 4 ways:
•Automatically
•Using var
•Using let
•Using const
Basic
<!DOCTYPE html>
•
Syntax <html>
Every statement other than <body>
if,else,while,switch will end <h1>JavaScript Variables</h1>
with semicolon “;”
<p>In this example, x, y, and z are
• You don’t mention data types variables.</p>
with variables i.e if you want
to declare a variable x the <p id="demo"></p>
simple way will be var x=0; <script>
let x = 5;
let y = 6;
let z = x + y;
document.getElementById("demo").inner
HTML =z
</script>
</body>
</html>
Operators
Operators
Operators
Data
JavaScript has 8Types
Datatypes
String
Number
Bigint
Boolean
Undefined
Null
Symbol
Object
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
// Nowthexvalue
is later
undefined
• var x;
x = 5; // Now x is a Number
x = "John"; // Now x is a String
Data
Types
• var x = 100 + “Ali"; Does this makes any sense to
add 100 to Ali (An integer adding to a string)?
• Instead javaScript will treat same thing as var x
= “100" + "Ali"; so output will be 100Ali (The
100 will also treated as string by javascript and
will be concatenated with Ali)
• var x = 100 + 4 + “Ali"; // What will happen
with this statement?
Data
Types
• Output will be 104Ali . 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 Riphah it will
automatically convert 104 into string and
concatenate it with Riphah
• var x=“Ali”+100+4; // What will happen now?
Data
Types
• Ali1004
• 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 Ali
• var x=“Ali”+100+4;
Arrays
<p id="demo"></p>
<script>
const cars = ["Saab","Volvo","BMW"];
document.getElementById("demo").innerHTML =
cars[0];
</script>
If condition
Syntax
• if (condition) {
// block of code to be executed if the condition is true
}
<script>
var x=10;
if (x < 18) {
document.write("number is less than 18");
}
</script>
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) {
document.write("number is less than 18");
}
else
{
document.write("number is greater than or equal 18");
}
</script>
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>
Loops
•for - loops through a block of code a number of
times
•while - loops through a block of code while a
specified condition is true
•do/while - also loops through a block of code while a
specified condition is true
•for/in - loops through the properties of an object
•for/of - loops through the values of an iterable
object
For loop
for(let i=0 ; i<5;i++)
{
console.log("Hello word")
}
While Loop Do while Loop
let i=0; let i=0;
while(i<5) Do
{ {
console.log(i) console.log(i)
i++; i++;
} } while(i<5) ;
