Web programming-1

Software engineering, Digital marketing,

network and security & Web and graphics
designs.

By VERNYUY BASILE
TIMELINE/Week 7
JAVASCRIPT

1.Introduction to 2.Working with 3. Implementing

JavaScript and its functions and
variables, data
role in web page control structures
types, and operators
interactivity

VERNYUY BASILE
1. Introduction to JavaScript and
its role in web page interactivity

VERNYUY BASILE
 JAVASCRIPT
JavaScript is a high-level, interpreted programming language that is one of the three
core technologies of the World Wide Web, alongside HTML and CSS. It is used to
make web pages interactive and dynamic by adding behavior such as animations,
games, pop-up menus, clickable buttons etc. As of 2023, 98.7% of websites use
JavaScript on the client side for webpage behavior, often incorporating third-party
libraries.

JavaScript is a scripting language, which means that it is embedded in HTML

documents and executed by the web browser. This makes it possible to add
interactivity to web pages without having to reload the entire page.

JavaScript is also used on the server-side with Node.js, a runtime environment that
allows JavaScript to be executed outside of the browser. This makes JavaScript a
versatile language that can be used to build a wide variety of web applications, from
simple websites to complex single-page applications (SPAs).
VERNYUY BASILE
Comments in Javascript
Comments in JavaScript are used to explain code and make it more
readable. They are ignored by the JavaScript engine when the code is
executed.

There are two types of comments in JavaScript: single-line comments and

multi-line comments.
1. Single-line comments: They start with two forward slashes (//) and end
at the end of the line. Any text after the two forward slashes is ignored by
the JavaScript engine.
For example:
JavaScript
// This is a single-line comment.

VERNYUY BASILE
2. Multi-line comments: They start with a forward slash followed by an
asterisk /) and end with an asterisk followed by a forward slash (/). Multi-line
comments can span multiple lines.
For example:
JavaScript
/*
This is a multi-line comment.
It can span multiple lines.
*/

Comments are useful for a variety of purposes, including:

• Explaining what a piece of code does
• Documenting the code
• Disabling code temporarily (e.g., for debugging purposes)

VERNYUY BASILE
The role of javaScript in web development
JavaScript plays a vital role in web development. It is used to add interactivity and
dynamism to web pages and web applications. Without JavaScript, most websites
would be static and unresponsive.

Here are some of the specific roles of JavaScript in web development:

1. Adding interactivity to web pages: JavaScript can be used to add a variety of

interactive elements to web pages, such as menus, forms, buttons, and
animations. This makes web pages more engaging and user-friendly.

2. Creating dynamic content: JavaScript can be used to create dynamic

content, such as updating stock prices or displaying real-time weather data. This
makes web pages more informative and useful.

VERNYUY BASILE
3. Building games and other interactive multimedia experiences: JavaScript
can be used to build games and other interactive multimedia experiences, such as
video players and image galleries. This makes web pages more entertaining
and engaging.

4. Developing server-side applications with Node.js: Node.js is a runtime

environment that allows JavaScript to be executed outside of the browser. This
makes it possible to build server-side applications with JavaScript, such as web
servers and APIs.

VERNYUY BASILE
2. Working with variables,
data types, and operators

VERNYUY BASILE
Variables in javascript
A variable in JavaScript is a named storage location for data. Variables are used to
store all sorts of data, such as numbers, strings, objects, and arrays.
To declare a variable in JavaScript, you use the var, let, or const keyword. The
var keyword is the oldest and most widely used, but it has some limitations. The
let and const keywords are newer and more modern, and they offer some
advantages over var.
Once you have declared a variable, you can assign a value to it using the equal
sign (=) operator.
2. Variables using let keyword
Examples let favoriteColor = "blue";
1. Variables using var keyword let isLoggedIn = false;
var name = "Bard";
var age = 2; 3. Variables using const keyword
const PI = 3.14159;

VERNYUY BASILE
Data types in javascript
A data type is a classification of data that tells a computer how to interpret the data.
Data types define the type of values stored in variables. Data types are used in
programming languages to define the types of values that can be stored in
variables and used in operations.

JavaScript supports eight basic data types.

3.
1. String - Represents sequences of characters.
Example: let message= “This is a string”
2. Number - It stores a decimal or non-decimal number that is float and integers.
Example: var amount=3, 3.14
3. BigInt - It stores numbers greater than 253-1 which are not permissible in
number data type in javascript. You add n to the end of the number literal to create
a BigInt.

VERNYUY BASILE
4. Boolean - It stores either true or false.
Example: var isLoggedIn=true
5. Null - It stores a null value.
Example: const data = null;
6. Undefined - It represents a variable that is not assigned.
Example: const data;
7. Symbol - A symbol is an unchangeable, singular primal value (non-primitive data
type).
Example: const data = Symbol();
8. Object - It is a collection of data consisting of key-value pairs (non-primitive data
type).
Example: const student = {name: ‘John’, age: 15}

VERNYUY BASILE
Practical examples of datatypes

VERNYUY BASILE
Arrays
An array is a sequential collection of element with the same data type. Arrays are a
fundamental data structure in JavaScript. They are used to store collections of
values, and they can be of any length. Arrays are created using the [] notation, and
you can initialize them with values or leave them empty.
You can also access individual elements of an array using their index. The index of
an array element is its position in the array. The first element in an array has an index
of 0, the second element has an index of 1, and so on.
For example
const fruits = ["apple", "banana", "orange"];
//an empty array
Let animals=[ ]
//adding an element in an empty array
Animals[0] = "Tiger"
Animals[1] = "Cow"
Two elements has been added to the empty array animals.
VERNYUY BASILE
Operators in javascript
JavaScript operators are symbols that are used to perform operations on values.
There are many different types of operators in JavaScript, including arithmetic
operators, comparison operators, logical operators, and assignment operators.

1. Arithmetic operators: They are used to perform mathematical operations on

numbers. Some common arithmetic operators include:

• +: Addition
• -: Subtraction
• *: Multiplication
• /: Division
• %: Modulus (remainder)

VERNYUY BASILE
2. Comparison operators: They are used to compare two values. Some common
comparison operators include:
• ==: Equal to
• !=: Not equal to
• <: Less than
• <=: Less than or equal to
• >: Greater than
• >=: Greater than or equal to

3. Logical operators: They are used to combine two or more Boolean

expressions. Some common logical operators include:
• &&: And
• ||: Or
• !: Not

VERNYUY BASILE
4. Assignment operators: They are used to assign values to variables. Some
common assignment operators include:
• =: Assignment
• +=: Addition assignment
• -=: Subtraction assignment
• *=: Multiplication assignment
• /=: Division assignment
• %=: Modulus assignment

VERNYUY BASILE
3. Implementing functions and
control structures

VERNYUY BASILE
Functions in javascript
A JavaScript function is a block of code designed to perform a particular task. Or a
set of instructions that can be performed with a single call. A JavaScript function is
executed when called.
To define a function in JavaScript, you use the function keyword followed by the
name of the function and a list of parameters (optional). The parameters are the
values that are passed to the function when it is called.
The body of the function is the code that is executed when the function is called.
The code in the function body can use the parameters that were passed to the
function.
When a function is called, the JavaScript engine creates a new execution context
for the function. The execution context contains the values of the parameters that
were passed to the function. The function code is then executed in the
new execution context. After the function code has finished executing, the
JavaScript engine destroys the execution context.

VERNYUY BASILE
Structure of a functions in JavaScript
VERNYUY BASILE
Control structures
Control structures in JavaScript are statements that allow you to control the flow of
execution of your code. They are the building blocks of any computer program, and
they are used to implement all sorts of algorithms and data structures. They can be
used to make decisions, repeat code, and jump to different parts of your code.
Following are the several control structure supported by javascript.

❖ if … else
❖ switch case
❖ do while loop
❖ while loop
❖ for loop

VERNYUY BASILE
VERNYUY BASILE
VERNYUY BASILE
VERNYUY BASILE
VERNYUY BASILE
VERNYUY BASILE
VERNYUY BASILE
VERNYUY BASILE
Assignments
Task: Explore an open API (e.g., weather, news, or social
media) and integrate it into a webpage. Display real-time
data from the API.

VERNYUY BASILE
End