JAVASXRIPT LECUTURE NOTE I
COURSE CONTENTS:
1. Introduction to JavaScript
2. Variables and Data Types
3. Operators
4. Control Statements (if, switch)
5. Loops (for, while, do...while)
6. Functions
7. Arrays and Objects
8. Comments
1. Introduction to JavaScript
JavaScript is a high-level, interpreted programming language primarily used for enhancing
interactivity and functionality in web pages. It runs in the browser and enables dynamic content
like forms, animations, and user interaction without reloading the page.
Furthermore, JavaScript is the programming language of the web, it can update and change both
HTML and CSS. It can calculate, manipulate and validate data
Features of JavaScript:
• Interpreted and lightweight
• Client-side (also usable on the server-side with Node.js)
• Event-driven and asynchronous
• Supports object-oriented and functional programming
Why Study JavaScript?
JavaScript is one of the 3 languages all web developers must learn:
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages
JavaScript Can Change HTML Content
One of many JavaScript HTML methods is getElementById().
The example below
"finds" an HTML element (with id="demo"), and changes the element content (innerHTML) to
"Hello JavaScript":
Example:
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello
JavaScript!"'>Click Me!</button>
</body>
</html>
OUTPUT
What Can JavaScript Do?
JavaScript can change HTML content.
Click
Click Me!
Me
If Click: This is the output
What Can JavaScript Do?
Hello JavaScript!
Practice the following
Practical 1
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<button type="button"
onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>
</body>
</html>
Practical 2
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can change HTML attribute values.</p>
<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the
light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the
light</button>
</body>
</html>
2. Statements
A JavaScript statement is an instruction for the browser to perform an action. Statements can be
variable declarations, function calls, loops, conditionals, etc. A computer program is a list of
"instructions" to be "executed" by a computer. In a programming language, these programming
instructions are called statements. A JavaScript program is a list of programming statements.
JavaScript statements are composed of:
Values, Operators, Expressions, Keywords, and Comments.
This statement tells the browser to write "Hello Dolly." inside an HTML element with id="demo":
Example:
<html>
<body>
<h2>JavaScript Statements</h2>
<p>In HTML, JavaScript statements are executed by the browser.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello Dolly.";
</script>
</body>
</html>
OUTPUT
JavaScript Statements
In HTML, JavaScript statements are executed by the browser.
Hello Dolly.
Practical I
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p>JavaScript statements are separated by semicolons.</p>
<p id="demo1"></p>
<script>
let a, b, c;
a = 5;
b = 6;
c = a + b;
document.getElementById("demo1").innerHTML = c;
</script>
</body>
</html>
KEYWORDS
JavaScript statements often start with a keyword to identify the JavaScript action to be performed.
Our Reserved Words Reference lists all JavaScript keywords.
Here is a list of some of the keywords you will learn about in this tutorial:
Keyword Description
var Declares a variable
let Declares a block variable
const Declares a block constant
if Marks a block of statements to be executed on a condition
switch Marks a block of statements to be executed in different cases
for Marks a block of statements to be executed in a loop
function Declares a function
return Exits a function
try Implements error handling to a block of statements
3. Variables and Data Types
Variables store data that can be used later in a program. JavaScript uses var, let, and const for
variable declaration.
var vs let vs const:
• var: Function-scoped, hoisted.
• let: Block-scoped, modern use.
• const: Block-scoped, read-only.
Data Types:
1. Primitive Types: String, Number, Boolean, Null, Undefined, Symbol, BigInt
2. Reference Types: Object, Array, Function
Example:
1. Primitive Types: String, Number, Boolean, Null, Undefined, Symbol, BigInt
2. Reference Types: Object, Array, Function
Example:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are undeclared.</p>
<p>They are automatically declared when first used.</p>
<p id="demo"></p>
<script>
x = 5;
y = 6;
z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
OUTOUT
JavaScript Variables
In this example, x, y, and z are undeclared.
They are automatically declared when first used.
The value of z is: 11
Practical I
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, price1, price2, and total are variables.</p>
<p id="demo"></p>
<script>
const price1 = 5;
const price2 = 6;
let total = price1 + price2;
document.getElementById("demo").innerHTML =
"The total is: " + total;
</script>
</body>
</html>
Practical II
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>Strings are written with quotes.</p>
<p>Numbers are written without quotes.</p>
<p id="demo"></p>
<script>
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';
document.getElementById("demo").innerHTML =
pi + "<br>" + person + "<br>" + answer;
</script>
</body>
</html>
3. Operators
JavaScript operators are used to perform different types of mathematical and logical computations.
Examples:
The Assignment Operator = assigns values
The Addition Operator + adds values
The Multiplication Operator * multiplies values
The Comparison Operator > compares values
Operators perform operations on variables and values.
Types of Operators:
• Arithmetic: +, -, *, /, %, **
• Assignment: =, +=, -=, etc.
• Comparison: ==, ===, !=, !==, >, <, >=, <=
• Logical: &&, ||, !
• Unary: typeof, ++, --
• Ternary: condition ? expr1 : expr2
Example:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The Assignment (=) Operator</h2>
<p id="demo"></p>
<script>
// Assign the value 5 to x
let x = 5;
// Assign the value 2 to y
let y = 2;
// Assign the value x + y to z
let z = x + y;
// Display z
document.getElementById("demo").innerHTML = "The sum of x + y is: " + z;
</script>
</body>
</html>
OUTPUT
JavaScript Operators
The Assignment (=) Operator
The sum of x + y is: 7
Practical I
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arithmetic</h1>
<h2>The + Operator</h2>
<p id="demo"></p>
<script>
let x = 5;
let y = 2;
let z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Practical II
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arithmetic</h1>
<h2>The * Operator</h2>
<p id="demo"></p>
<script>
let x = 5;
let y = 2;
let z = x * y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
5. Control Statements
Very often when you write code, you want to perform different actions for different decisions.
You can use conditional statements in your code to do this.
In JavaScript we have the following conditional statements:
• Use if to specify a block of code to be executed, if a specified condition is true
• Use else to specify a block of code to be executed, if the same condition is false
• Use else if to specify a new condition to test, if the first condition is false
• Use switch to specify many alternative blocks of code to be executed
If Statement:
Use the if statement to specify a block of JavaScript code to be executed if a condition is true.
Syntax
{
if (condition)
// block of code to be executed if the condition is true
}
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript if</h2>
<p>Display "Good day!" if the hour is less than 18:00:</p>
<p id="demo">Good Evening!</p>
<script>
if (new Date().getHours() < 18) {
document.getElementById("demo").innerHTML = "Good day!";
}
</script>
</body>
</html>
OUTPUT
JavaScript if
Display "Good day!" if the hour is less than 18:00:
Good day!
The else Statement
Use the else statement to specify a block of code to be executed if the condition is false.
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
}
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript if .. else</h2>
<p>A time-based greeting:</p>
<p id="demo"></p>
<script>
const hour = new Date().getHours();
let greeting;
if (hour < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
document.getElementById("demo").innerHTML = greeting;
</script>
</body>
</html>
OUTPUT
JavaScript if .. else
A time-based greeting:
Good day
The else if Statement
Use the else if statement to specify a new condition if the first condition is false.
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
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript if .. else</h2>
<p>A time-based greeting:</p>
<p id="demo"></p>
<script>
const time = new Date().getHours();
let greeting;
if (time < 10) {
greeting = "Good morning";
} else if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
document.getElementById("demo").innerHTML = greeting;
</script>
</body>
</html>
OUTPUT
JavaScript if .. else
A time-based greeting:
Good day
Practical I
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.random()</h2>
<p id="demo"></p>
<script>
let text;
if (Math.random() < 0.5) {
text = "<a href='https://w3schools.com'>Visit W3Schools</a>";
} else {
text = "<a href='https://wwf.org'>Visit WWF</a>";
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Switch Statement:
The JavaScript Switch Statement
Use the switch statement to select one of many code blocks to be executed.
Syntax
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
• The switch expression is evaluated once.
• The value of the expression is compared with the values of each case.
• If there is a match, the associated block of code is executed.
• If there is no match, the default code block is executed.
Example
The getDay() method returns the weekday as a number between 0 and 6.
(Sunday=0, Monday=1, Tuesday=2 ..)
This example uses the weekday number to calculate the weekday name:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript switch</h2>
<p id="demo"></p>
<script>
let day;
switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
}
document.getElementById("demo").innerHTML = "Today is " + day;
</script>
</body>
</html>
OUTPUT
JavaScript switch
Today is Thursday
The default Keyword
The default keyword specifies the code to run if there is no case match:
Example
The getDay() method returns the weekday as a number between 0 and 6.
If today is neither Saturday (6) nor Sunday (0), write a default message:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript switch</h2>
<p id="demo"></p>
<script>
let text;
switch (new Date().getDay()) {
case 6:
text = "Today is Saturday";
break;
case 0:
text = "Today is Sunday";
break;
default:
text = "Looking forward to the Weekend";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
OUTPUT
JavaScript switch
Looking forward to the Weekend
Switching Details
If multiple cases matches a case value, the first case is selected.
If no matching cases are found, the program continues to the default label.
If no default label is found, the program continues to the statement(s) after the switch.
Strict Comparison
Switch cases use strict comparison (===).
The values must be of the same type to match.
A strict comparison can only be true if the operands are of the same type.
In this example there will be no match for x:
Example
let x = "0";
switch (x) {
case 0:
text = "Off";
break;
case 1:
text = "On";
break;
default:
text = "No value found";
}
OUTPUT
JavaScript switch
No value found
6. Functions
a. A JavaScript function is a block of code designed to perform a particular task.
b. A JavaScript function is executed when "something" invokes it (calls it).
c. Functions are reusable blocks of code that perform a task.
Example
// Function to compute the product of p1 and p2
function myFunction(p1, p2) {
return p1 * p2;
}
OUTPUT
JavaScript Functions
Call a function which performs a calculation and returns the result:
12
