Web Programming
Lecture 5
JavaScript
What is javascript?
● A lightweight, interpreted programming language.
● Used for creating dynamic and interactive web
content.
● Runs in the browser (client-side) and on servers
([Link]).
● Example Uses:
○ Form validations.
○ Animations.
○ Updating DOM dynamically.
Why javascript?
● One of the most popular languages in the
world.
● Essential for web development (HTML +
CSS + JS).
● Versatile: Can be used for frontend,
backend, game development, and more.
● Tons of libraries and frameworks (React,
Angular, etc.).
Inline JavaScript
<a href="#" I am Inline
JavaScript');">click here</a>
Embedded JavaScript
<html>
<head>
<script>
alert(“Embedded JavaScript");
</script>
</head>
► The simple HTML puts a reference to external JavaScript file
inside the script tag
► Adding src attribute to the script tag causes browsers to
look for that file.
Using External Scripts
<html>
<head>
<script src=“[Link]”></script>
</head>
► Thesimple HTML puts a reference to
external JavaScript file inside the script tag
► Addingsrc attribute to the script tag
causes browsers to look for that file.
JavaScript’s Reputation
• Everything is case sensitive, including function, class, and
variable.
• When using var for variable declaration,The scope of
variables in blocks is not supported. This means variables
declared inside a loop may be accessible outside of the loop,
counter to what one would expect.
• JavaScript is dynamically typed, meaning a variable can
hold values of different data types at different times without
explicit type declaration.
• There is a === operator, which tests not only for equality
but type equivalence.
• Null and undefined are two distinctly different states for a
variable.
JavaScript’s Reputation
• Semicolons are not required, but are permitted (and
encouraged).
• There is no integer type or float type, only number type.
Javascript Basic Syntax
Variables:
name = "John";
let name = "John";
const pi = 3.14;
var age = 25;
Data Types: String, Number, Boolean, Object, Array,
Undefined, null
Operators: +, -, *, /, %, ++, - - , ==, ===, !=, !==, >, <, >=, <=,
&&, ||.
Example Code:
let sum = 5 + 3;
[Link]("Sum is", sum); // Output: Sum is 8
Data Types
// Numbers:
let length = 16;
let weight = 7.5;
// Strings:
let color = "Yellow";
let lastName = "Johnson";
// Booleans
let x = true;
let y = false;
// Object:
const person = {firstName:"John", lastName:"Doe"};
// Array object:
const cars = ["Saab", "Volvo", "BMW"];
// Date object: const date = new Date("2022-03-
25");
Difference: var, let and const
● var and let create variables that can be
reassigned another value.
● const creates "constant" variables that
cannot be reassigned another value.
● developers shouldn't use var anymore. They
should use let or const instead.
● if you're not going to change the value of a
variable, it is good practice to use const.
Arithmetic operators
JavaScript performs implicit type coercion
String Coercion (Number → String)
When a number is added to a string, JavaScript converts the number into a string and
performs concatenation. [Link](2 + "2"); // "22"
Number Coercion (String → Number)
When a string contains a number and is used with mathematical operators (-, *, /), JavaScript
converts it into a number. [Link]("10" - 5); // 5
JS Assignment operators
JS Comparison Operators
== VS ===
1==”1” returns true because it converts the string operand to a number and then
compares.
1===”1” returns false because the === operator is the strict equality operator,
meaning it checks both the value and the type.
In JavaScript, only the === and !== operators perform strict comparison without type
coercion. Other operators perform type coercion
JS Objects
1. An object in JS contains key-value pairs.
2. An object can be nested, i.e., an object can
contain another object.
3. Keys are strings, and the values can be
any data type (numbers, booleans, other
objects, functions etc.).
JS Objects
// Create an Object
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
let firstName = [Link]
let age = person[“age”]
Add new property: [Link] =
"English";
Delete a property: delete [Link];
JS Nested Objects
myObj = {
name:"John",
age:30,
myCars: {
car1:"Ford",
car2:"BMW"
}
}
[Link].car2;
[Link]["car2"];
myObj["myCars"]["car2"];
String methods
► length ► concat()
► charAt() ► trim()
► toUpperCase() ► trimStart()
► toLowerCase() ► trimEnd()
► at() ► padStart()
► [] ► padEnd()
► slice() ► repeat()
► substring() ► replace()
► substr() ► replaceAll()
► split()
explore using links
Number methods
Array Methods sort()
reverse()
map()
► length filter()
► toString() forEach()
► at() const numbers1 = [45, 4,
► join() 9, 16, 25];
► pop() const numbers2 =
► push() [Link](myFunction)
► shift() ;
► unshift()
► delete() function
► concat() myFunction(value, index,
explore these using links
array) {
return value * 2;
and more }
JS Dates
► const d = new Date();
► const d = new Date("2022-03-25");
► new
Date(year,month,day,hours,minutes,seconds,ms)
► [Link]();
Destructuring
The destructuring assignment syntax unpack object
properties into variables:
const person = {
firstName: "John",
lastName: "Doe",
age: 50
};
// Destructuring
let {firstName, lastName, country = "US"} = person;
Destructuring
function createPerson({
name = 'Unknown',
age = 0
} = {}) {
return {name, age};
[Link](createPerson({name: 'Alice', age:30}));
// { name: 'Alice', age: 30 }
[Link](createPerson({}));
// { name: 'Unknown', age: 0 }
[Link](createPerson());
// { name: 'Unknown', age: 0 }
Function Declaration
function functionName(parameter1, parameter2) {
// Code to be executed
return result;
Function with default parameters:
function functionName(parameter1, parameter2=”default value”) {
// Code to be executed
return result;
}
Arrow Function
Arrow functions in JavaScript provide a more
concise syntax for writing functions. They are
particularly useful for short function bodies.
const functionName = (param1,
param2) => {
// function body
return param1 + param2;
};
If the function has a single expression, you
can omit the curly braces and the return
statement:
const add = (a, b) => a + b;
Arrow Function
If there is only a single parameter, then you can
remove parentheses around parameter.
const functionName = param1 =>
{
// function body
return param1 + 1;
};
const functionName = param1 => param1+1
Resources to Learn
Slide 15: Resources to Learn More
● Websites:
○ MDN Web Docs.
○ [Link].
● Platforms:
○ FreeCodeCamp, Codecademy, or W3Schools.
