Scribd
Upload
0 views22 pages

Javasxript Lecuture Note I-1

This document serves as a comprehensive introduction to JavaScript, covering fundamental concepts such as variables, data types, operators, control statements, and functions. It emphasizes JavaScript's role in web development, its ability to manipulate HTML and CSS, and provides practical examples for each topic. The content is structured to facilitate learning through explanations and hands-on coding exercises.

Uploaded by

rasheedjazuliuthman
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0 views22 pages

Javasxript Lecuture Note I-1

This document serves as a comprehensive introduction to JavaScript, covering fundamental concepts such as variables, data types, operators, control statements, and functions. It emphasizes JavaScript's role in web development, its ability to manipulate HTML and CSS, and provides practical examples for each topic. The content is structured to facilitate learning through explanations and hands-on coding exercises.

Uploaded by

rasheedjazuliuthman
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

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

You might also like