Applications of Information and Communication

Technologies
JavaScript

1
 JavaScript
▸ JavaScript (JS) is a cross-platform, object-oriented programming
language used by developers to make web pages interactive.

▸ It allows developers to create dynamically updating content, use

animations, pop-up menus, clickable buttons, control multimedia, etc.
// How to create variables:
var x;
let y;

// How to use variables:

x = 5;
y = 6;
2
let z = x + y;
 Why popular?
▸ It can be used both in the front-end and back-end of web development

▸ Can run on all devices

▸ It does not need an environment setup

▸ Standardized and gets frequently updated with new versions

▸ Open Standards and Community

▸ Works with Document Object Model (DOM) for response to user interactions

▸ Transformed web browsers into application platforms

▸ Wide range of frameworks and libraries to help build complex applications

3
 var
▸ The var keyword declares a function-scoped or global variable, optionally initializing it to a
value.
▸ Function-scoped means that the variable is only available within the function it was declared
in. Global variables are available throughout your entire code.
▸ Variables declared inside a { } block can be accessed from outside the block.
<script>
var x = 10;
var ICT = “AICT";
// Here x is 10
function newFunction()
{ {
var hello = "hello"; var x = 2;
} // Here x is 2
}

// Here x is 2
[Link]("demo").innerHTML = x;
4 </script>
 const
▸ The const keyword declares a block-scoped, immutable constant variable, i.e. a
variable that can’t be reassigned.
▸ Constants are also called “immutable variables”, but that’s a bit of a misnomer since
they are actually variables – just ones that can’t be reassigned.
const PI = 3.141592653589793;
PI = 3.14; // This will give an error
PI = PI + 10; // This will also give an error
Always declare a variable with const when you know that the value should not be
changed.
Use const when you declare:
•A new Array
•A new Object
•A new Function
•A new RegExp
5
 let
▸ The let keyword declares a block-scoped local variable, optionally
initializing it to a value.

▸ Block-scoped means that the variable is only available within the block it
was declared in, which is usually denoted by curly braces {}.

▸ Variables declared inside a { } block cannot be accessed from outside the

block:
let x = “Pakistan";
let x = 0;
// SyntaxError: 'x' has already been declared

6
 DOM Model

7
 JavaScript HTML DOM
▸ With the HTML DOM, JavaScript can access and change all the elements of an HTML document.

8
Introduction - DOM contd..
• The Document Object Model (DOM) is an interface for HTML and XML
documents.
• It represents the page so that programs can change the document structure, style,
and content.
• The DOM represents the document as nodes and objects.
• That way, programming languages can connect to the page.

• The DOM represents a document with a logical tree. The Document Object
Model is a programming API for documents.

• Each branch of the tree ends in a node, and each node contains objects.
DOM - Block digram

4
HTML vs DOM
HTML
• The standard markup language used to create the structure and content
of a webpage. It represents the initial structure of the webpage as written
by the developer.
DOM
• An in-memory representation of the HTML document. It is a programming
interface provided by the browser that allows scripts to dynamically
access, modify, and interact with the HTML and CSS of the webpage.
• The DOM is created by the browser when the HTML document is loaded.
It can change over time through JavaScript.
• The DOM represents the document as a tree structure where each
element is a node (e.g., element nodes, text nodes, attribute nodes).
• Allows dynamic manipulation of the webpage (adding/removing elements,
11
changing styles, etc.).
 JavaScript Display Possibilities
• Writing into an HTML element, using innerHTML.
• Writing into the HTML output using [Link]().
<script>
[Link](5 + 6);
</script>
• Writing into an alert box, using [Link]().
<script>
[Link](5+6); or alert(5+6);
</script>
• Writing into the browser console, using [Link]().
<script>
[Link](5 + 6);
</script>
12
 The DOM Programming Interface
▸ JavaScript HTML DOM

13
 JavaScript Literals
• Numbers are written with or without decimals
10.50
10001
• Strings are text, written within double or single quotes
"John Doe"
'John Doe’

• JavaScript uses the keywords var, let and const to declare variables.
• All JavaScript identifiers are case sensitive.

• Hyphens are not allowed in JavaScript. They are reserved for subtractions.

• Underscore:
first_name, last_name, master_card, inter_city.
• Upper Camel Case (Pascal Case):
FirstName, LastName, MasterCard, InterCity.
• Lower Camel Case:
JavaScript programmers tend to use camel case that starts with a lowercase
14 letter: firstName, lastName, masterCard, interCity.
 The DOM Programming Interface
▸ The HTML DOM document object is the owner of all other objects in your web page.

Accessing Elements

15
 The DOM Programming Interface

16
 Access Element by Id

17
 Access Element by Tag name

18
 Access Element by Class name

19
 Create new element in HTML
▸ const newDiv = [Link]("div");
[Link] = `
Hello, World!
This is a paragraph.
`;

▸ const newP = [Link]("p");

[Link] = "Hello, World!";

20
JavaScript Events
▸ JavaScript basics
JavaScript Events
▸ JavaScript basics
JavaScript Functions
▸ A function is an independent block of code that performs a specific task, while a
function expression is a way to store functions in variables.

▸ A function in JavaScript is similar to a procedure; a set of statements that

performs a task or calculates a value, but for a procedure to qualify as a function,
it should take some input and return an output where there is some obvious
relationship between the input and the output.

▸ To use a function, you must define it somewhere in the scope from which you
wish to call it.
 JavaScript Function Declaration
▸ A function definition (also called a function declaration, or function statement) consists of the
function keyword, followed by:

• The name of the function.

• A list of parameters to the function, enclosed in parentheses and separated by

commas.

• The JavaScript statements that define the function, enclosed in curly braces, { /* … */ }.

▸ For example, the following code defines a function named square:

function square(number) {

return number * number;

}
Functions - Example
function myFunc(theObject) {
[Link] = "Toyota";
}

const myCar = {
make: "Honda",
model: "Accord",
year: 1998,
};

[Link]([Link]); // "Honda"
myFunc(myCar);
JavaScript Objects
▸ An object is a collection of related data and/or functionality. JavaScript object is a
variable that can store multiple data in key-value pairs.

const person = { };

▸ In real life, objects are things like houses, cars, people, animals, or any other
subjects.
JavaScript Objects
Object Properties
▸ A car has properties like weight and color:

▸ [Link] = Fiat, [Link] = 500, [Link] = 850kg, [Link] = white.

▸ Car objects have the same properties, but the values differ from car to car.

Object Methods
▸ A car has methods like start and stop:

▸ [Link](), [Link](), [Link](), [Link]().

▸ Car objects have the same methods, but the methods are performed at different times.
JavaScript Objects
// student object // Create an empty Object
const person = {};
const student = {
firstName: "Babar", // Add Properties
rollNo: 32 [Link] = “Babar";
[Link] = “Azam";
}; [Link] = 28;
[Link] = “50";
[Link](student);
// Display Data from Object
// Output: { firstName: [Link](“example").
'Babar', rollNo: 32 } innerHTML =
[Link] + " is " +
[Link] + " years old.";
JavaScript Arrays
▸ An array is a special variable, which can hold more than one value

const array_name = [item1, item2, ...];

const age = [17, 18, 15, 19, 14];

▸ Why Use Arrays?

▸ If you have a list of items (a list of car names, for example), storing the cars in
single variables could look like this:
let car1 = “Toyota";
let car2 = “Honda";
let car3 = “Suzuki";

▸ An array can hold many values under a single name, and you can access the
values by referring to an index number.
JavaScript JSON
▸ JSON is a format for storing and transporting data. It is often used when data
is sent from a server to a web page.

▸ JSON is a lightweight data interchange format. It is language independent and

easy to understand.

{
"employees":[
{"firstName":“Abdul", "lastName":“Rehman"},
{"firstName":“Nouman", "lastName":“Noor"},
{"firstName":“Asim", "lastName":“Malik"} ]

}
JavaScript JSON
<script>
let text = '{"employees":[' +
'{"firstName":“Abdul","lastName":" Rehman" },' +
'{"firstName":“Nouman","lastName":“Noor" },' +
'{"firstName":“Asim","lastName":“Malik" }]}';

const obj = [Link](text);

[Link](“example").innerHTML =
[Link][1].firstName + " " +
[Link][1].lastName; <
</script>
Questions?