[Go to site: main page, start]
Scribd
Upload
23 views44 pages

JavaScript Basics: Interactive Web Programming

Comprehensive Havascript noutes

Uploaded by

Steve Kinyanjui
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
23 views44 pages

JavaScript Basics: Interactive Web Programming

Comprehensive Havascript noutes

Uploaded by

Steve Kinyanjui
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

Introduction to JavaScript

Definition: JavaScript is a high-level, dynamic programming language used to make web


pages interactive. It is a core technology of the World Wide Web, alongside HTML and CSS.

JavaScript is a versatile, dynamically typed programming language used for interactive web
applications, supporting both client-side and server-side development, and integrating
seamlessly with HTML, CSS, and a rich standard library.

• JavaScript is a single-threaded language that executes one task at a time.

• It is an Interpreted language which means it executes the code line by line.

• The data type of the variable is decided at run-time in JavaScript that’s why it is
called dynamically typed.

“Hello, World!” Program in Browser Console

A “Hello, World!” program is the simplest way to get started with any programming
language. Here’s how you can write one using JavaScript.

<html>
<head></head>
<body>
<h1>Check the console for the message!</h1>
<script>
// This is our first JavaScript program
[Link]("Hello, World from console..!");
alert("Hello, World from alert..!");
</script>
</body>
</html>

In this example

The <script> tag is used to include JavaScript code inside an HTML document.

[Link]() prints messages to the browser’s developer console. Open the browser
console to see the “Hello, World!” message.

“Hello World” Program in Server Console


We can also print the “Hello World” program directly into the console terminal without
embedded it into HTML. Create an [Link] file and add the code to it.

/* This is a multi-line comment.

It can span several lines. */

[Link]("Hello, World from the console..!"); // Prints Hello, World! to the console

In this example

[Link](): The [Link]() method is used to print messages to the browser’s


developer console. Open the console (usually with F12 or Ctrl + Shift + J) to see the
message “Hello, World!” displayed.

Comments in the Code:

• Multi-line Comment: The /*…… */ syntax is used to write a comment spanning


multiple lines.
• Single-line Comment: The // syntax is used for short, inline comments, like the one
explaining the [Link] function.

Key Features of JavaScript

• Client-Side Scripting: JavaScript runs on the user’s browser, so has a faster


response time without needing to communicate with the server.

• Versatile: JavaScript can be used for a wide range of tasks, from simple
calculations to complex server-side applications.

• Event-Driven: JavaScript can respond to user actions (clicks, keystrokes) in real-


time.

• Asynchronous: JavaScript can handle tasks like fetching data from servers without
freezing the user interface.

• Rich Ecosystem: There are numerous libraries and frameworks built on JavaScript,
such as React, Angular, and [Link], which make development faster and more
efficient.
Client Side and Server Side nature of JavaScript

• Client-side: Involves controlling the browser and its Document Object Model
(DOM), handling user events like clicks and form inputs. Libraries such as
AngularJS, ReactJS, and VueJS are commonly used.

• Server-side: Involves interacting with databases, manipulating files, and generating


responses. With [Link] and frameworks like [Link], JavaScript is also widely
used on the server side.

• Imperative Programming: Focuses on how to perform tasks, controlling the flow of


computation. It includes approaches like procedural and object-oriented
programming, often using constructs like async/await to handle actions.

• Declarative Programming: Focuses on what should be done rather than how it’s
done. It emphasizes describing the desired result, like with arrow functions, without
detailing the steps to achieve it.

Applications of JavaScript

• Web Development: JavaScript adds interactivity and dynamic behavior to static


websites, with popular frameworks like AngularJS enhancing development.

• Web Applications: JavaScript powers robust web applications,


leveraging APIs, React, and Electron to create dynamic user experiences like
Google Maps.

• Server Applications: [Link] brings JavaScript to the server side, enabling


powerful server applications and full-stack development.

• Game Development: JavaScript, combined with HTML5 and libraries like Ease JS,
enables the creation of interactive games for the web.

• Smartwatches: Pebble JS allows JavaScript to run on smartwatches, supporting


apps that require internet connectivity.

Limitations of JavaScript

• Security Risks : JavaScript can be used for attacks like Cross-Site Scripting (XSS),
where malicious scripts are injected into a website to steal data by exploiting
elements like <img>, <object>, or <script> tags.
• Performance : JavaScript is slower than traditional languages for complex tasks,
but for simple tasks in a browser, performance is usually not a major issue.

• Complexity : To write advanced JavaScript, programmers need to understand core


programming concepts, objects, and both client- and server-side scripting, which
can be challenging.

• Weak Error Handling and Type Checking : JavaScript is weakly typed, meaning
variables don’t require explicit types. This can lead to issues as type checking is not
strictly enforced.

Why JavaScript is known as a lightweight programming language ?

• JavaScript is considered a lightweight language due to its low CPU usage,


minimalist syntax, and ease of implementation.
• With no explicit data types and a syntax similar to C++ and Java, it’s easy to learn
and runs efficiently in browsers.
• Unlike heavier languages like Dart or Java, JavaScript, especially with [Link],
performs faster and uses fewer resources.
• While it has fewer built-in libraries, this makes it more flexible, though external
libraries are often needed for advanced functionality.
• JavaScript’s efficiency and simplicity make it a top choice for web development.

Is JavaScript Compiled or Interpreted or both ?

JavaScript is both compiled and interpreted. The V8 engine improves performance by first
interpreting code and then compiling frequently used functions for speed. This makes
JavaScript efficient for modern web apps. It’s mainly used for web development but also
works in other environments.

Just-In-Time (JIT) compilation is a technique used by JavaScript engines (like V8) to


improve performance. How it works:

• Interpretation: Initially, the code is interpreted line-by-line by the engine.

• Hot Code Detection: The engine identifies frequently executed code, such as often-
called functions.

• Compilation: The “hot” code is compiled into optimized machine code for faster
execution.

• Execution: The compiled machine code is then executed directly, improving


performance compared to repeated interpretation.
• JIT compilation balances between interpretation (for quick startup) and compilation
(for faster execution).

Discuss JavaScript Versions, features and their year of release?

JavaScript Syntax

JavaScript syntax refers to the rules and conventions dictating how code is structured and
arranged within the JavaScript programming language. This includes statements,
expressions, variables, functions, operators and control flow constructs.

Syntax meaning in coding

In coding, “syntax” refers to the set of rules that defines the structure and format of the
code in a programming language. It dictates how code should be written so that it can be
correctly interpreted and executed by the compiler or interpreter.

Adding JavaScript in HTML Document

To add JavaScript in HTML document, several methods can be used. These methods
include embedding JavaScript directly within the HTML file or linking an external
JavaScript file.

JavaScript code is embedded in HTML using the <script> tag. The script can be added using
several methods i.e.

1. Inline JavaScript

Writing JavaScript code directly inside the HTML element using the onclick, onmouseover,
or other event handler attributes. E.g.

<html>
<head></head>
<body>
<h2> Adding JavaScript in HTML Document </h2>
<button Button Clicked..!')"> Click Here </button>
</body>
</html>
2. Internal JavaScript (Within <script> Tag)

You can write JavaScript code inside the <script> tag within the HTML file. This is known as
internal JavaScript and is commonly placed inside the <head> or <body> section of the
HTML document.

i. JavaScript Code Inside <head> Tag

Placing JavaScript within the <head> section of an HTML document ensures that the script
is loaded and executed as the page loads. This is useful for scripts that need to be
initialized before the page content is rendered.

<html>
<head>
<script>
function myFun() {
[Link]("demo")
.innerHTML = "This content is from JavaScript Code Inside head Tag..!";
}
</script>
</head>
<body>
<h2>Add JavaScript Code inside Head Section </h2>
<h3 id="demo" style="color:green;"> To demostrate JavaScript Code Inside head
Tag </h3>
<button type="button" Click Here </button>
</body>
</html>

ii. JavaScript Code Inside <body> Tag

JavaScript can also be placed inside the <body> section of an HTML page. Typically, scripts
placed at the end of the <body> load after the content, which can be useful if your script
depends on the DOM being fully loaded.

<html>
<head></head>
<body>
<h2> Add JavaScript Code inside Body Section </h2>
<h3 id="demo" style="color:green;"> To demostrate JavaScript Code Inside body Tag
</h3>
<button type="button" Click Here </button>
<script>
function myFun() {
[Link]("demo")
.innerHTML = " This content is from JavaScript Code Inside body Tag..!";
}
</script>
</body>
</html>

iii. External JavaScript (Using External File)

For larger projects or when reusing scripts across multiple HTML files, you can place your
JavaScript code in an external .js file. This file is then linked to your HTML document using
the src attribute within a <script> tag.

HTML:

<html>
<head>
<script src="[Link]"></script>
</head>
<body>
<h2> External JavaScript </h2>
<h3 id="demo" style="color:green;"> To demonstrate External JavaScript </h3>
<button type="button" Click Here </button>
</body>
</html>

JavaScript:

/* Filename: [Link]*/

function myFun () {

[Link]('demo')

.innerHTML = 'This content is from external JavaScript'

}
Advantages of External JavaScript

• Faster Page Load Times: Cached external JavaScript files don’t need to be reloaded
every time the page is visited, which can speed up loading times.

• Improved Readability and Maintenance: Keeping HTML and JavaScript separate


makes both easier to read and maintain.

• Separation of Concerns: By separating HTML (structure) and JavaScript (behavior),


your code becomes cleaner and more modular.

• Code Reusability: One external JavaScript file can be linked to multiple HTML files,
reducing redundancy and making updates easier.

Asynchronous and Deferred JavaScript

JavaScript can be loaded asynchronously or deferred to optimize page performance,


especially for larger scripts.
By default, JavaScript blocks the rendering of the HTML page until it is fully loaded, but
using async or defer can help improve load times.

1. async Attribute
This attribute loads the script asynchronously, i.e. the script will be downloaded and
executed as soon as it is available, without blocking the page.
<script src="[Link]" async></script>

2. defer Attribute
This attribute delays the execution of the script until the entire HTML document has been
parsed. This is particularly useful for scripts that manipulate the DOM.
<script src="[Link]" defer></script>

Referencing External JavaScript Files


There are three ways to reference an external script in JavaScript:
• By using a full URL: src = "[Link]
• By using a file path: src = "/js/[Link]"
• Without using any path: src = "[Link]"
JavaScript Output:

JavaScript can "display" data in different ways:

• Writing into an HTML element, using innerHTML.

• Writing into the HTML output using [Link]().

• Writing into an alert box, using [Link]().

• Writing into the browser console, using [Link]().

1. Using innerHTML

To access an HTML element, JavaScript can use the [Link](id)


method.

• The id attribute defines the HTML element.


• The innerHTML property defines the HTML content:

<!DOCTYPE html>
<html>
<body>
<h2>Inner HTML output</h2>
<p id="demo"></p>
<script>
[Link]("demo").innerHTML = 5 + 6;
</script>
</body>
</html>

2. Using [Link]()

For testing purposes, it is convenient to use [Link]():

<!DOCTYPE html>
<html>
<body>
<h2>Using [Link]</h2>
<script> [Link](5 + 6); </script>
</body>
</html>
Note: Using [Link]() after an HTML document is loaded, will delete all existing
HTML. Thus [Link]() method should only be used for testing. E.g.

<!DOCTYPE html>
<html>
<body>
<h2>Using [Link] - deletes html </h2>
<p>Other html data that will be deleted also </p>
<button type="button" + 6)">Click Here </button>
</body>
</html>

3. Using [Link]()

You can use an alert box to display data:

<!DOCTYPE html>
<html>
<body>
<h2>Using windows alert </h2>
<script>
[Link](5 + 6);
//alert(5 + 6);
</script>
</body>
</html>
You can skip the window keyword as shown under the commented line.

The window object is the global scope object. This means that variables, properties, and
methods by default belong to the window object. This also means that specifying
the window keyword is optional.

4. Using [Link]()

For debugging purposes, you can call the [Link]() method in the browser to display
data.

<!DOCTYPE html>
<html>

<body>

<h2>Using console </h2>

<script> [Link](5 + 6); </script>

</body>

</html>

JavaScript Print

JavaScript does not have any print object or print methods; thus you cannot access output
devices from JavaScript.

The only exception is that you can call the [Link]() method in the browser to print the
content of the current window.

<!DOCTYPE html>
<html>
<body>
<h2>Using windows print function: </h2>
<p>This will print the <b> current page </b> to either device, pdf format etc.</p>
<button this page</button>
</body>
</html>

JavaScript Statements/code

JavaScript statements are programming instructions that a computer executes. They are
composed of:
• Values
• Operators
• Expressions
• Keywords
• Comments
This statement tells the browser to write a given data/ statement inside an HTML element
id. E.g. [Link]("demo").innerHTML = "Internet application
Programming.";
The statements are executed, one by one, in the same order as they are written.

JavaScript statements are separated by Semicolons. E.g.

• let x, y, z; // Declare 3 variables


• x = 5; // Assign the value 5 to x

Ending statements with semicolon is not required, but highly recommended.

JavaScript Keywords/Reserved words:

JavaScript statements often start with a keyword to identify the JavaScript action to be
performed. E.g.

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
Note: Reserved words cannot be used as names for variables.

Giving examples, discuss various types of JavaScript statements?


JavaScript Events:

JavaScript Events are actions or occurrences that happen in the browser. They can be
triggered by various user interactions or by the browser itself. E.g.

<html>
<script>
function myFun() {
[Link](
"iap").innerHTML = "Click event triggered, for Internet Application
Programming";
}
</script>
<body>
<button me </button>
<p id="iap"></p>
</body>
</html>
• The onclick attribute in the <button> calls the myFun() function when clicked.

• The myFun() function updates the <p> element with id=”iap” by setting its
innerHTML to “Click event triggered, for Internet Application Programming”.

• Initially, the <p> is empty, and its content changes dynamically on the button click.

Event Types:

JavaScript supports a variety of event types. Common categories include:

• Mouse Events: click, dblclick, mousemove, mouseover, mouseout

• Keyboard Events: keydown, keypress, keyup

• Form Events: submit, change, focus, blur

• Window Events: load, resize, scroll


Common JavaScript Events

Event Attribute Description


onclick Triggered when an element is clicked.
onmouseover Fired when the mouse pointer moves over an element.
onmouseout Occurs when the mouse pointer leaves an element.
onkeydown Fired when a key is pressed down.
onkeyup Fired when a key is released.
onchange Triggered when the value of an input element changes.
onload Occurs when a page has finished loading.
onsubmit Fired when a form is submitted.
onfocus Occurs when an element gets focus.
onblur Fired when an element loses focus.

Event Handling Methods

1. Inline HTML Handlers

<button clicked!')">Click Me</button>

Full code below:

<html>
<body>
<h2> Inline HTML Handlers </h2>
<button clicked!')">Click Me</button>
</body>
</html>
2. DOM Property Handlers

let btn = [Link]("myButton");


[Link] = () => {
alert("Button clicked!");
};

3. addEventListener() (Preferred)

[Link]("click", () => {
alert("Button clicked using addEventListener!");
});
addEventListener() is the most versatile and recommended method as it supports
multiple event listeners and removal of listeners.

Practical Applications

1. Form Validation

<html>
<body>
<h2>Form Validation</h2>
<form id="formval">
<input type="text" placeholder="Enter some values" id="formInput" />
<button type="submit">Submit</button>
</form>
<script>
[Link]("#formval").addEventListener("submit", (e) => {
let input = [Link]("#formInput");
if (![Link]) {
[Link]();
alert("Input cannot be empty");
}
else{
alert("Something inserted into database.");
}
});
</script>
</body>
</html>
JavaScript Variables
JavaScript Variables can be declared in 4 ways:

• Automatically
• Using var
• Using let
• Using const
var a = 10 // Old style
let b = 20; // Prferred for non-const
const c = 30; // Preferred for const (cannot be changed)

The var keyword was used in all JavaScript code from 1995 to 2015.

The let and const keywords were added to JavaScript in 2015.

The var keyword should only be used in code written for older browsers.

JavaScript Identifiers

All JavaScript variables must be identified with unique names.

These unique names are called identifiers.

Identifiers can be short names like x and y or more descriptive names (age, sum,
totalVolume).

The general rules for constructing names for variables (unique identifiers) are:

• Names can contain letters, digits, underscores, and dollar signs.

• Names must begin with a letter.

• Variable names must begin with a letter, underscore (_), or dollar sign ($).
• Names are case sensitive (y and Y are different variables).

• Reserved words/keywords (like function, class, return, etc.) cannot be used as


variable names.

Declaring a JavaScript Variable

Creating a variable in JavaScript is called "declaring" a variable. E.g.

var carName;
let carName;

Variable initialization

Assigning value to a variable. E.g.

carName = "Nissan";

Program Example

<p id="demo"></p>
<script>
let carName = "Nissan";
[Link]("demo").innerHTML = carName;
</script>

You can declare many variables in one statement by starting the statement with let and
separate the variables by comma:

let person = "John Mark", carName = "Nissan", price = 200;

Below is an example program to illustrate the same:

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>You can declare many variables in one statement.</p>
<p id="demo"></p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
let course = "BIT", unit_code = " BIT 04204 ", unitName ="Internet Application
Programming";
[Link]("demo").innerHTML = course;
[Link]("demo1").innerHTML = unit_code;
[Link]("demo2").innerHTML = unitName;
</script>
</body>
</html>
Global and Local variables in JavaScript

Importance

Enables for writing clean, maintainable, and error-free code.

Variables can be declared with different scopes, affecting where and how they can be
accessed.

Global Variables
They are declared outside of any function or block scope.

They are accessible from anywhere within the script, including inside functions and blocks.
Variables declared without the var, let, or const keywords inside a function automatically
become global variables.

However, variables declared with var, let, or const inside a function are local to that
function unless explicitly marked as global using window (in browser environments)
or global (in [Link]).

Key Characteristics of Global Variables:

• Scope: Accessible throughout the entire script, including inside functions and
blocks.

• Automatic Global Variables: If a variable is declared inside a function without var,


let, or const, it automatically becomes a global variable (a common source of bugs).

Example:

<!DOCTYPE html>
<html>
<head><title>Global Variables</title></head>
<body>
<script>
let petName = 'Jimmy' // Global variable
myFunction()

function myFunction() {
fruit = 'apple'; // Considered global
[Link]('My pet name is ' + petName + ' - from global')
}
[Link]('My pet name is ' + petName +'.' + ' Fruit name is ' + fruit + ' -
Considered global')
</script>

</body>
</html>

Explanation: We can see that the variable petName is declared in the global scope and is
easily accessed inside functions. Also, the fruit was declared inside the function without
any keyword so it was considered global and was accessible inside another function.

Local Variables
Local variables are defined within functions in JavaScript.
They are confined to the scope of the function that defines them and cannot be accessed
from outside.
Attempting to access local variables outside their defining function results in an error.

Key Characteristics of Local Variables:


• Scope: Limited to the function or block in which they are declared.
• Function-Specific: Each function can have its own local variables, even if they
share the same name.

Example:
<!DOCTYPE html>
<html>
<head><title>Local Variables</title></head>
<body>
<script>
myfunction();
anotherFunc();
let petName;
function myfunction() {
let petName = "Simba"; // local variable
[Link](petName);
}
function anotherFunc() {
let petName = "Jimmy"; // local variable
[Link](petName);
}
[Link](petName);
</script>

</body>
</html>

Discuss when to use either const, var, or let in JavaScript variable declaration?.

More Examples:

A program to calculate the area and circumference of a circle.

<!DOCTYPE html>
<html>
<body>
<h1>Calculate Area and Circumference</h1>

<p>JavaScript program to calculate Area and Circumference of a circle. Capture


radius from user keyboard.</p>

<p id="area1"></p>
<p id="cir"></p>

<script>
// Capture the radius from the user using prompt()
let radius = parseFloat(prompt("Enter the radius of the circle:"));

// Calculate the area (πr²)


const PI = 3.142;
const area = PI*radius*radius;
// Calculate the circumference (2πr)
const circumference = 2*PI *radius;

// Output the results


[Link]("area1").innerHTML = "Area: "+ area;
[Link]("cir").innerHTML = "Circumference: "+ circumference;
</script>
</body>
</html>
A JavaScript program to add two numbers entered by the user.

<!DOCTYPE html>
<html>
<body>
<h1>Add Two Numbers Entered by the User</h1>
<p>JavaScript program to add two numbers captured from user keyboard.</p>
<p id="add"></p>

<script>
// store input numbers
const num1 = parseInt(prompt('Enter the first number '));
const num2 = parseInt(prompt('Enter the second number '));

//add two numbers


const sum = num1 + num2;

// display the sum


[Link]("add").innerHTML = "The sum is: "+ sum;
//[Link](`The sum of ${num1} and ${num2} is ${sum}`);
</script>

</body>
</html>

JavaScript Program to Calculate the Area of a Triangle

<!DOCTYPE html>
<html>
<head><title>Area of triangle</title></head>
<body>
<p id="area1"></p>
<script>
const baseValue = prompt('Enter the base of a triangle: ');
const heightValue = prompt('Enter the height of a triangle: ');

// calculate the area


const areaValue = (baseValue * heightValue) / 2;

[Link]("area1").innerHTML = "The area of the


triangle is: "+ areaValue;

/*[Link](`The area of the triangle is ${areaValue}`); */


</script>
</body>
</html>

JavaScript Operators

JavaScript operators are symbols or keywords used to perform operations on values and
variables. They are the building blocks of JavaScript expressions and can manipulate data
in various ways.

The main types of JavaScript operators include:


• Arithmetic Operators
• Assignment Operators
• Comparison Operators
• Logical Operators
• Bitwise Operators
• String Operators
• Conditional (Ternary) Operator
• Type Operators
• Comma Operator
• Unary Operators

1. Arithmetic Operators

Arithmetic Operators perform mathematical calculations like addition, subtraction,


multiplication, etc.

OPERATOR NAME SYMBOL USAGE OPERATION


Addition Operator + a+b Add two numbers or concatenate the string
Subtraction Operator - a–b Difference between the two operators
Multiplication Operator * a*b Multiply two number
Division Operator / a/b Find the quotient of two operands
Modulus Operator % a%b Find the remainder of two operands
Exponentiation ** a ** b Raise the Left operator to the power of the
Operator right operator
Increment Operator ++ a++ Return the operand and then increase by
++a one.
Increase operand by one and then return.
Decrement Operator -- a- – Return operand and then decrease by one
– -a Decrease operand by one and then return
Unary Plus(+) +a It operates on a single operand. Converts
NaN to number. Preferred because it does
not perform any other operations on the
number.
Unary Negation (-) -a It operates on a single operand. Converts
operand to negative.

2. JavaScript Assignment Operators

Used to assign values to variables. They can also perform operations like addition or
multiplication before assigning the value.

OPERATOR NAME USAGE MEANING OPERATION


Addition Assignment a+=b a=a+b Adds the value to the right operand to a
variable and assigns the result to the variable.
Addition or concatenation is possible.
Subtraction a-=b a=a-b Subtracts the value of the right operand from
Assignment a variable and assigns the result to the
variable.
Multiplication a*=b a=a*b Multiplies a variable by the value of the right
Assignment operand and assigns the result to the variable.
Division Assignment a/=b a=a/b Divides a variable by the value of the right
operand and assigns the result to the variable.
Remainder a%=b a=a%b Divides a variable by the value of the right
Assignment operand and assigns the remainder to the
variable.
Exponentiation a**=b a=a**b Raises the value of a variable to the power of
Assignment the right operand.
Left Shift a<<=b a=a<<b Moves the specified amount of bits to the left
Assignment and assigns the result to the variable.
Right Shift a>>=b a=a>>b Moves the specified amount of bits to the
Assignment right and assigns the result to the variable.
Bitwise AND a&=b a=a&b Uses the binary representation of both
Assignment operands, does a bitwise AND operation on
them, and assigns the result to the variable.
Bitwise OR a|=b a=a | b Uses the binary representation of both
Assignment operands, does a bitwise OR operation on
them, and assigns the result to the variable.
Bitwise XOR a^=b a=a^b Uses the binary representation of both
Assignment operands, does a bitwise XOR operation on
them, and assigns the result to the variable.
Logical AND a&&=b x && (x = Assigns the value of y into x only if x is
Assignment y) a truthy value.
Logical OR ||= x || (x = y) Used to assign the value of y to x if the value
Assignment of x is falsy.
Nullish coalescing ??= x ?? (x = y) Assigns the value of y to x if the value of x is
Assignment null.

3. JavaScript Comparison Operators

Comparison operators compare two values and return a boolean (true or false). They are
essential tools for checking conditions and making decisions in your code.

OPERATOR NAME USAGE OPERATION


Equality Operator a == b Compares the equality of two operators
Inequality Operator a != b Compares inequality of two operators. It
negates.
Strict Equality Operator a === b Compares both the value and type of the
operand
Strict Inequality Operator a !== b Compares inequality with type
Greater than Operator a>b Checks if the left operator is greater than the
right operator
Greater than or equal a >= b Checks if the left operator is greater than or
Operator equal to the right operator
Less than Operator a<b Checks if the left operator is smaller than the
right operator
Less than or equal a <= b Checks if the left operator is smaller than or
Operator equal to the right operator

== compares values with type coercion, meaning it converts both values to a common type
before comparing.

=== compares values without type coercion, ensuring both the value and type must match
exactly.

4. JavaScript Logical Operators

Comparison operators are mainly used to perform the logical operations that determine
the equality or difference between the values.

OPERATOR NAME USAGE OPERATION


Equality Operator a == b Compares the equality of two operators
Inequality Operator a != b Compares inequality of two operators
Strict Equality Operator a === b Compares both the value and type of the operand
Strict Inequality a !== b Compares inequality with type
Operator
Greater than Operator a>b Checks if the left operator is greater than the right
operator
Greater than or equal a >= b Checks if the left operator is greater than or equal
Operator to the right operator
Less than Operator a<b Checks if the left operator is smaller than the right
operator
Less than or equal a <= b Checks if the left operator is smaller than or equal
Operator to the right operator

5. JavaScript Bitwise Operators

Bitwise operators perform operations on binary representations of numbers.

OPERATOR NAME USAGE DESCRIPTION


Bitwise AND(&) a&b Returns true if both operands are true
Bitwise OR(|) a|b Returns true even if one operand is true
Biwise XOR(^) a^b Returns true if both operands are different
Bitwise NOT(~) ~a Flips the value of the operand
Bitwise Left Shift(<<) a << b Shifts the bit toward the left
Bitwise Right Shift(>>) a >> b Shifts the bit towards the right
Zero Fill Right Shift(>>>) a >>> b Shifts the bit towards the right but adds 0 from left

6. JavaScript Ternary Operator

The ternary operator is a shorthand for conditional statements. It takes three operands.

The Ternary Operator in JavaScript is a shortcut for writing simple if-else statements. It’s
also known as the Conditional Operator because it works based on a condition. The ternary
operator allows you to quickly decide between two values depending on whether a
condition is true or false.

How Ternary Operator Work


The ternary operator works with three parts:
• Condition: A statement that returns true or false.
• Value if True: What happens if the condition is true?
• Value if False: What happens if the condition is false?
Syntax:
condition ? trueExpression : falseExpression
Example:

// JavaScript to illustrate Conditional operator

let age = 60;

let res = (age > 59) ? "Adult" : "Not Adult";

[Link](res);

7. JavaScript Comma Operator

Comma Operator (,) mainly evaluates its operands from left to right sequentially and
returns the value of the rightmost operand.

The comma operator is often used in for loops to include multiple expressions within the
loop initialization or increment sections. It can also be used in variable assignments and
other contexts where multiple operations need to be performed in sequence. Also used to
include multiple expressions in a single variable declaration statement, but only the last
expression’s value will be assigned to the variable.

Example:

let x = (1, 2, 3);


[Link](x);

Output: 3

8. JavaScript Relational Operators

They are used to compare its operands and determine the relationship between them.
They return a Boolean value (true or false) based on the comparison result.

They are:

1. The in-operator - checks if a specified property exists in an object or if an element exists


in an array. It returns a Boolean value. E.g.

let languages = ["HTML", "CSS", "JavaScript"];


// true (index 1 exists in the array)
[Link](1 in languages);
// false (index 3 doesn't exist in the array)
[Link](3 in languages);
Output:
true
false

2. The instanceof operator in JavaScript tests if an object is an instance of a particular


class or constructor, returning a Boolean value.

let languages = ["HTML", "CSS", "JavaScript"];


[Link](languages instanceof Array);
[Link](languages instanceof Object);
[Link](languages instanceof String);
[Link](languages instanceof Number);

Output:
true
true
false
false

In JavaScript,

Operator How it works


< (Less than) Returns true if the left operand is less than the right
operand; otherwise, it returns false.
> (Greater than) Returns true if the left operand is greater than the right
operand; otherwise, it returns false.
<= (Less than or equal to) Returns true if the left operand is less than or equal to the
right operand; otherwise, it returns false.
>= (Greater than or equal to) Returns true if the left operand is greater than or equal to
the right operand; otherwise, it returns false.
== (Equality) Compares two values for equality after converting both
values to a common type (type coercion). It returns true if
the values are equal; otherwise, it returns false.
!= (Inequality) Compares two values for inequality after converting both
values to a common type (type coercion). It returns true if
the values are not equal; otherwise, it returns false.
=== (Strict equality) Compares two values for equality without converting their
types. It returns true if the values are equal and of the
same type; otherwise, it returns false.
!== (Strict inequality) Compares two values for inequality without converting
their types. It returns true if the values are not equal or not
of the same type; otherwise, it returns false.
9. JavaScript String Operators

JavaScript String Operators include concatenation (+) and concatenation assignment (+=),
used to join strings or combine strings with other data types. E.g.

const s = "Hello" + " " + "World";


[Link](s);
Output
Hello World

1. Concatenate Operator
This combines strings using the ‘+’ operator and creates a new string.
let str1 = "BIT 04204";
let str2 = " Internet Application Programming";
let result = (str1 + str2);
[Link](result);

Output:
BIT 04204 Internet Application Programming

2. Concatenate Assignment Operator

We can modify one string by adding content of another one to it.

let str1 = " BIT 04204 ";


let str2 = " Internet Application Programming ";
str1 += str2;
[Link](str1);

Output:
BIT 04204 Internet Application Programming
Control Structures
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

The 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 id="age"> if condtion..!</p>
<script>
let age1 = parseInt(18);
if (age1<= 18) {
[Link]("age").innerHTML = "You are a Young person. !";
}
</script>
</body>
</html>

The if 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 id="age"> if else structure..! </p>
<script>
let age1 = parseInt(prompt("Enter your age: "));
if (age1<= 18) {
[Link]("age").innerHTML = "You are a Young person. !";
}
else {
[Link]("age").innerHTML = "You are an Adult. !";
}
</script>
</body>
</html>

The if - 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
} else if (condition2) {
// block of code

} else if (n) {
// block of code
} else {
// block of code – like default
}
Example:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript if</h2>
<p id="marks">if else if - grading system..!</p>

<script>
let avg_marks = parseInt(prompt("Enter your avarage marks: "));

if (avg_marks >=70 && avg_marks<=100) {


[Link]("marks").innerHTML = " You are scored A. ";
}
else if(avg_marks>=60 && avg_marks<70){
[Link]("marks").innerHTML = " You are scored B. ";
}
else if(avg_marks>=50 && avg_marks<60){
[Link]("marks").innerHTML = " You are scored C. ";
}
else if(avg_marks>=40 && avg_marks<50){
[Link]("marks").innerHTML = " You are scored D. ";
}
else if(avg_marks>=0 && avg_marks<40){
[Link]("marks").innerHTML = " You are scored E. ";
}
else {
[Link]("marks").innerHTML = " Invalid marks. ";
}
</script>
</body>
</html>

The JavaScript Switch Statement

Use the switch statement to select one of many code blocks to be executed.

Works similar to an if else if conditional statements.

Syntax:

switch(expression) {
case 1:
// statement(s)
break;
case 2:
// statement(s)
break;

…..
default:
// statement(s)
}

This is how it works:

• 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 statement(s) is executed.
• If there is no match, the default statement(s) is executed.

The break Keyword


• When JavaScript reaches a break keyword, it breaks out of the switch block.
• This will stop the execution inside the switch block.
• It is not necessary to break the last case in a switch block. The block breaks (ends)
there anyway.

The default Keyword


The default keyword specifies the code to run if there is no case match.

Example:
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch statements</h2>

<p id="day"></p>

<script>
//let day1 = parseInt(prompt("Enter 0 - 6, to see the day: "));
let day;
switch (new Date().getDay()){
//switch (day1) {
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";
break;
default:
day = "Invalid day of the week. Please put 0 - 6";
}
[Link]("day").innerHTML = "Today is " + day;
</script>

</body>
</html>

JavaScript Loops
Loops are used to reduce repetitive tasks by repeatedly executing a block of code as long
as a specified condition is true. This makes code more concise and efficient.

Types of Loops
JavaScript supports different kinds of loops:
• for - loops through a block of code a number of times
• for/in - loops through the properties of an object
• for/of - loops through the values of an iterable object
• 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
The For Loop
The for statement creates a loop with 3 optional expressions:
Syntax:
for (initialization; condition; increment/decrement) {
// Code to execute
}

Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript for loop</h2>

<script>
//let i = 5;
for (let i = 1; i <= 5; i++) {
[Link]("Count:", i);
}
</script>
</body>
</html>
Output:
Count: 1
Count: 2
Count: 3
Count: 4
Count: 5
In this example
• Initializes the counter variable (let i = 1).
• Tests the condition (i <= 3); runs while true.
• Executes the loop body and increments the counter (i++).

2. The For In Loop


The JavaScript for in statement loops through the properties of an Object:
Syntax:
for (key in object) {
// code block to be executed
}

Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For In Loop</h2>
<p id="id1"></p>
<script>
const person = {fname:"John", lname:"kamau", age:24};
let txt = "";
for (let x in person) {
txt += person[x] + " ";
}
[Link]("id1").innerHTML = txt;
</script>
</body>
</html>

Example Explained
• The for in loop iterates over a person object
• Each iteration returns a key (x)
• The key is used to access the value of the key
• The value of the key is person[x]

3. The For Of Loop


The JavaScript for of statement loops through the values of an iterable object.
It lets you loop over iterable data structures such as Arrays, Strings, Maps, NodeLists, and
more:

Syntax:
for (variable of iterable) {
// code block to be executed
}
variable - For every iteration the value of the next property is assigned to the variable.
Variable can be declared with const, let, or var.
iterable - An object that has iterable properties.

Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Of Loop</h2>
<p id="car"></p>
<script>
const cars = ["BMW", "Volvo", "Nissan","VW"];
let text = "";
for (let x of cars) {
text += x + "<br>";
}
[Link]("car").innerHTML = text;
</script>
</body>
</html>

4. JavaScript while Loop

The while loop executes as long as the condition is true. It can be thought of as a repeating
if statement.

Syntax:

while (condition) {
// Code to execute
}

Example:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript while loop</h2>

<script>
let count = 1;
while (count <= 5) {
[Link](count);
count++;
}

</script>
</body>
</html>
Output:
1
2
3
4
5
5. JavaScript do-while Loop

The do-while loop is similar to while loop except it executes the code block at least once
before checking the condition.

There are mainly two types of loops.

• Entry Controlled loops: The test condition is tested before entering the loop
body. For Loop and While Loops are entry-controlled loops.

• Exit Controlled Loops: The test condition is tested or evaluated at the end of the
loop body. Therefore, the loop body will execute at least once, irrespective of
whether the test condition is true or false. The do-while loop is exit controlled loop.

Syntax:
do {
// Code to execute
} while (condition);

Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript do while loop</h2>
<script>
let test = 1;
do {
[Link](test);
test++;
} while(test<=5)
</script>
</body>
</html>
Output:
1
2
3
4
5
Nested loops.
A nested loop is a loop within another loop.
Example 1: Right-Angled Triangle Pattern
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <body>
<h2>Pattern using for loop </h2> <h2>Right-Angled Triangle using while loop </h2>
<script> <script>
let rows = parseInt(prompt("Enter the let rows = parseInt(prompt("Enter the number of
number of rows:")); rows:"));
let pattern = ""; let i = 1;
let pattern = "";
for (let i = 1; i <= rows; i++) {
for (let j = 1; j <= i; j++) { while (i <= rows) {
pattern += "* "; let j = 1;
} while (j <= i) {
pattern += "\n"; pattern += "* ";
} j++;
[Link](pattern); }
alert(pattern); pattern += "\n";
i++;
</script> }
</body> [Link](pattern);
</html> alert(pattern);
</script>
</body>
</html>

Example 2: Number Pyramid


<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <body>

<h2>Number Pyramid using for loop </h2> <h2>Pyramid Pattern using while Loop </h2>
<script> <script>
let rows = parseInt(prompt("Enter the number let rows = parseInt(prompt("Enter the number of
of rows:")); rows:"));
let pattern = ""; let i = 1;
let pattern = "";
for (let i = 1; i <= rows; i++) {
for (let j = 1; j <= rows - i; j++) { while (i <= rows) {
pattern += " "; let spaces = 1;
} while (spaces <= rows - i) {
for (let k = 1; k <= i; k++) { pattern += " ";
pattern += k + " "; spaces++;
} }
pattern += "\n"; let stars = 1;
} while (stars <= 2 * i - 1) {
pattern += "*";
[Link](pattern); stars++;
alert(pattern); }
pattern += "\n";
</script> i++;
</body> }
</html> [Link](pattern);
alert(pattern);
</script>
</body>
</html>

Example 3: Diamond Pattern


<!DOCTYPE html>
<html>
<body>

<h2>Diamond Pattern using for loop </h2>


<script>
let rows = parseInt(prompt("Enter the number of rows:"));
let pattern = "";

// Upper part of the diamond


for (let i = 1; i <= rows; i++) {
for (let j = 1; j <= rows - i; j++) {
pattern += " ";
}
for (let k = 1; k <= 2 * i - 1; k++) {
pattern += "*";
}
pattern += "\n";
}

// Lower part of the diamond


for (let i = rows - 1; i >= 1; i--) {
for (let j = 1; j <= rows - i; j++) {
pattern += " ";
}
for (let k = 1; k <= 2 * i - 1; k++) {
pattern += "*";
}
pattern += "\n";
}

[Link](pattern);
alert(pattern);

</script>

</body>
</html>

JavaScript Function
These are reusable blocks of code designed to perform specific tasks. They allow you to
organize, reuse, and modularize code. It can take inputs, perform actions, and return
outputs.

Function Declarations
A Function Declaration (also known as a Function Statement) is a way to define a
function in programming. It is a statement that creates a function with a specified name
and body, allowing it to be called anywhere in the code.

Syntax:
function functionName(parameters) {
// function body
return someValue; // (optional)
}

Example:

function sum(x, y) {
return x + y;
}
[Link](sum(2, 5));

Function Syntax and Working

A function definition is sometimes also termed a function declaration or function


statement. Below are the rules for creating a function in JavaScript:

• Begin with the keyword function followed by,

• A user-defined function name (In the above example, the name is sum)
• A list of parameters enclosed within parentheses and separated by commas (In the
above example, parameters are x and y)

• A list of statements composing the body of the function enclosed within curly
braces {} (Such as, “return x + y”).

Return Statement
When we want to return some values from a function after performing some operations, we
make use of the return. This is an optional statement. In the above function, “sum()”
returns the sum of two as a result.

Function Parameters

Parameters are input passed to a function. In the above example, sum() takes two
parameters, x and y.

Calling Functions

After defining a function, the next step is to call them to make use of the function. We can
call a function by using the function name separated by the value of parameters enclosed
between the parenthesis.

Example 1: Functions to add two numbers


<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions to add two numbers </h2>


<script>
// Function to add two numbers
function addNumbers(a, b) {
return a + b;
}

// Taking user input


let num1 = parseFloat(prompt("Enter first number:"));
let num2 = parseFloat(prompt("Enter second number:"));

// Function call and displaying the result


let sum = addNumbers(num1, num2);
[Link]("The sum is: " + sum);
alert("The sum is: " + sum);

</script>
</body>
</html>

Explanation:
1. The function addNumbers(a, b) takes two parameters and returns their sum.
2. The prompt() function is used to take user input, which is converted to a number
using parseFloat().
3. The function is called with the user inputs as arguments.
4. The result is displayed using [Link]() and alert().

Example 2: Find the Maximum of Two Numbers.

<!DOCTYPE html>
<html>
<body>

<h2>Find the Maximum of Two Numbers </h2>


<script>
// Function to find the maximum of two numbers
function findMax(a, b) {
return a > b ? a : b;
}

// Taking user input


let num1 = parseFloat(prompt("Enter first number:"));
let num2 = parseFloat(prompt("Enter second number:"));

// Function call and displaying the result


let maxNumber = findMax(num1, num2);
[Link]("The larger number is: " + maxNumber);
alert("The larger number is: " + maxNumber);

</script>

</body>
</html>

Example 3:
<!DOCTYPE html>
<html>
<body>
<h2>Calculate area and circumference of circle </h2>
<script>
// Function to calculate the area of a circle
function calculateArea(radius) {
return [Link] * radius * radius;
}

// Function to calculate the perimeter (circumference) of a circle


function calculatePerimeter(radius) {
return 2 * [Link] * radius;
}

// Taking user input


let radius = parseFloat(prompt("Enter the radius of the circle:"));

// Function calls
let area = calculateArea(radius);
let perimeter = calculatePerimeter(radius);

// Displaying the results


[Link]("The area of the circle is: " + [Link](2));
[Link]("The perimeter (circumference) of the circle is: " + [Link](2));

alert("The area of the circle is: " + [Link](2) + "\nThe perimeter is: " +
[Link](2));

</script>

</body>
</html>

Explanation:
1. calculateArea(radius) – Computes the area using the formula: Area=π×r2
2. calculatePerimeter(radius) – Computes the perimeter using the formula:
Perimeter=2×π×r
3. prompt() gets the radius from the user.
4. The functions are called with the user input.
5. The results are displayed using [Link]() and alert().
6. toFixed(2) rounds the output to 2 decimal places.

Why Functions?
• Functions can be used multiple times, reducing redundancy.

• Break down complex problems into manageable pieces.

• Manage complexity by hiding implementation details.

• Can call themselves to solve problems recursively.

Read more on:

Function invocation and function call. Differentiate the two as used in JavaScript.

You might also like