One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
Breaking One Day Lectures Learning Time:
Moring Time
Afternoon Time
Evening Time
JavaScript Programming
One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
Morning Time Lectures Outlines:
Introduction
Environment setup
Variables
Let, const, var
Input / output
Comments
JavaScript Programming
Data Types
One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
Afternoon Time Lectures Outlines:
Operators
Math
String
Decision Making
JavaScript Programming
One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
Evening Time Lectures Outlines:
Loops
Array
Functions
JavaScript Programming
Morning Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
Introduction:
JavaScript is a programming language that is primarily used for creating dynamic and interactive web
pages.
Used for a wide range of tasks, from simple form validation to complex web applications.
It is primarily a client-side scripting language, which means that it is executed on the client's web
browser.
Used to manipulate the Document Object Model (DOM), which is the programming interface for
HTML and XML documents.
Create dynamic effects like dropdown menus, pop-up windows, and image sliders.
JavaScript Programming
Morning Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
Used to handle user events like button clicks, mouse movements, and keyboard inputs.
Frameworks and libraries like jQuery, React, and Angular that simplify the process of creating complex
web applications. These frameworks provide pre-built code modules and functions that can be used to
speed up the development process.
JavaScript can be vulnerable to security threats like cross-site scripting (XSS) and cross-site request
forgery (CSRF).
JavaScript Programming
Morning Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
Environment setup:
Install a text editor
Install a web browser
Write and test your code
JavaScript Programming
Morning Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
Variables:
A variable is a named memory location that stores a value that can be changed during program execution.
Syntax:
var variableName = value;
Example:
var message = "Hello, world!";
JavaScript Programming
Morning Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
Let, const, var:
In JavaScript, let, const, and var are keywords used to declare variables. Here's a brief overview of each
keyword:
JavaScript Programming
Morning Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
let: let was introduced in ES6 and is used to declare a block-scoped variable.
This means that the variable is only accessible within the block in which it was defined, and any nested blocks.
Example:
function example() {
let x = 5;
if (true) {
let x = 10;
[Link](x); // output: 10
[Link](x); // output: 5
JavaScript Programming
}
Morning Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
const: const is also introduced in ES6 and is used to declare a constant variable. This means that the variable
cannot be reassigned to a new value once it's defined.
Example:
const PI = 3.14159;
[Link](PI); // output: 3.14159
PI = 3; // will cause an error
ES6 (ECMAScript 6), also known as ECMAScript 2015, is a major update to the JavaScript language
specification. It introduced several new features and enhancements to JavaScript, making it more powerful,
expressive, and developer-friendly. ES6 was standardized by the ECMA International standards organization,
JavaScript Programming
hence the name ECMAScript.
Morning Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
var: var is the original keyword used to declare variables in JavaScript.
Example:
function example() {
var x = 5;
if (true) {
var x = 10;
[Link](x); // output: 10
[Link](x); // output: 10
JavaScript Programming
}
Morning Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
var Keyword: Variables declared with var are function-scoped, meaning they are accessible within the
entire function in which they are declared, regardless of block scope.
let Keyword: On the other hand, variables declared with let are block-scoped, which means they are
limited to the block in which they are declared (e.g., within loops or conditional statements).
JavaScript Programming
Morning Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
Input / Output:
To get data from user, we used [Link]() method in JavaScript
name = [Link](“Enter your name”)
To display result to user as output we used [Link]() method in JavaScript
[Link](name)
JavaScript Programming
Morning Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
Comments:
Single-line comments start with // and continue until the end of the line. Here's an example:
// This is a single-line comment
Multi-line comments start with /* and end with */. They can span multiple lines. Here's an example:
/*
This is a multi-line comment
that spans multiple lines
*/
JavaScript Programming
Morning Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
Data Types:
Primitive data type
Primitive data types are the most basic data types in JavaScript, and they are immutable (unchangeable).
Non-primitive data type
Non-primitive data types are mutable (changeable) data types and are also called reference types. They are
called reference types because they are not directly stored in the variable,
JavaScript Programming
Morning Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
JavaScript primitive data types
String It show the sequence of characters enclose in the single or double quotes e.g. “jafricode"
Number It show numeric values e.g. 10, 21, 1.3, -34 etc
Boolean it show possible two value either false or true
Undefined it show the undefined value (variable without value)
Null nothing or not value (instance of an object)
JavaScript non-primitive data types
Object It show instance which have properties as well as function
Array It is the collection of relevant data having same data type
RegExp It show the regular expression
JavaScript Programming
Function It enclose the related statement
Morning Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
JavaScript Primitive Data Types Undefined
String var variableWithoutValue;
var name = "jafricode";
Null
Number var nothing = null;
var age = 25;
Boolean
var isStudent = true; JavaScript Programming
Morning Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
JavaScript Non-Primitive Data Types RegExp
Object var regex = /[a-z]+/;
var person = {
name: “Faisal", function jafri() {
age: 30, [Link]("This is a simple function named
occupation: "Developer" jafri.");
}; }
jafri(); // Output: "This is a simple function named
Array jafri."
JavaScript Programming
var numbers = [1, 2, 3, 4, 5];
Afternoon Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
Operators:
Arithmetic Operators
Comparison or Relational Operators
Logical Operators
Assignment Operators
Conditional Operators
Increment and Decrement Operators
JavaScript Programming
Afternoon Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
Math:
In JavaScript, the Math object provides a set of built-in mathematical functions and constants that you can
use in your code.
JavaScript Programming
Afternoon Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
Examples:
[Link](): Rounds a number to the nearest integer.
[Link]([Link](3.5)); // Output: 4
[Link](): Rounds a number down to the nearest integer.
[Link]([Link](3.9)); // Output: 3
[Link](): Rounds a number up to the nearest integer.
[Link]([Link](3.1)); // Output: 4
[Link](): Returns the absolute value of a number.
[Link]([Link](-5)); // Output: 5 JavaScript Programming
Afternoon Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
[Link](): Returns the largest of zero or more numbers.
[Link]([Link](2, 4, 6, 8)); // Output: 8
[Link](): Returns the smallest of zero or more numbers.
[Link]([Link](2, 4, 6, 8)); // Output: 2
[Link](): Returns a random number between 0 and 1 (exclusive).
[Link]([Link]()); // Output: 0.12345 (random number between 0 and 1)
[Link]: Returns the value of PI (3.14159...).
[Link]([Link]); // Output: 3.141592653589793
JavaScript Programming
Afternoon Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
String:
In JavaScript, a string is a sequence of characters enclosed in quotes, either single quotes ('...') or double
quotes ("..."). Here are some of the most commonly used string methods:
// Using single quotes
var str1 = 'Hello, world!';
// Using double quotes
var str2 = "Hi, there!";
JavaScript Programming
Afternoon Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
Accessing characters in a string
var str = 'Hello, world!';
var firstChar = str[0]; // 'H'
var lastChar = str[[Link] - 1]; // '!'
Concatenating strings
var firstName = ‘Faisal';
var lastName = ‘Zamir';
var fullName = firstName + lastName; // ‘Faisal Zamir' JavaScript Programming
Afternoon Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
Converting strings to numbers
var strNum = '42';
var num = Number(strNum); // 42
Returns the length of a string.
var str = "Hello, World!";
[Link]([Link]); // Output: 13
JavaScript Programming
Afternoon Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
indexOf(): Returns the index of the first occurrence of a specified value in a string (or -1 if not found).
var str = "Hello, World!";
[Link]([Link]("World")); // Output: 7
charAt(): Returns the character at a specified index in a string.
var str = "Hello, World!";
[Link]([Link](0)); // Output: H
JavaScript Programming
Afternoon Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
substring(): Returns a subset of a string based on the specified start and end indexes (or from a start
index to the end of the string if no end index is specified).
var str = "Hello, World!";
[Link]([Link](7, 12)); // Output: World
JavaScript Programming
Afternoon Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
toLowerCase():
var str = "Hello, World!";
[Link]([Link]()); // Output: hello, world!
toUpperCase()
var str = "Hello, World!";
[Link]([Link]());
replace(): Replaces a specified value or regular expression in a string with another value.
var str = "Hello, World!";
[Link]([Link]("Hello", "Hi")); // Output: Hi, World! JavaScript Programming
Afternoon Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
Decision Making:
In programming, decision making refers to the process of selecting the appropriate action to take based on
a particular condition or set of conditions.
Different types of decision making:
If statement
If else statement
If else if else statement
Switch statement
JavaScript Programming
Afternoon Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
If statement: The if statement is used to test a Example:
condition and execute a block of code if the
var age = 25;
condition is true.
if (age >= 18) {
Syntax:
[Link]("You are old enough to vote.");
if (condition) {
}
// Code to execute if condition is true }
JavaScript Programming
Afternoon Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
If-else statement: The if-else statement is used to Example:
test a condition and execute one block of code if the
var age = 15;
condition is true, and another block of code if the
if (age >= 18) {
condition is false.
[Link]("You are old enough to vote.");
Syntax:
} else {
if (condition) {
[Link]("You are not old enough to vote.");
// Code to execute if condition is true
}
} else {
// Code to execute if condition is false }
JavaScript Programming
Afternoon Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
If-else if-else statement: The if-else if-else statement is used to Example:
test multiple conditions and execute different blocks of code var grade = 80;
based on which condition is true.
if (grade >= 90) {
Syntax:
[Link]("A");
if (condition1) {
} else if (grade >= 80) {
// Code to execute if condition1 is true
[Link]("B");
} else if (condition2) {
} else if (grade >= 70) {
// Code to execute if condition2 is true
[Link]("C");
} else {
} else {
// Code to execute if all conditions are false
[Link]("F");
}
} JavaScript Programming
Afternoon Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
Switch statement: The switch statement is used case value2:
to compare a variable or expression against // Code to execute if expression matches value2
multiple values and execute different blocks of
break;
code based on which value matches.
// ...
Syntax:
default:
switch (expression) {
// Code to execute if expression does not match
case value1:
any values
// Code to execute if expression matches value1
}
break;
JavaScript Programming
Afternoon Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
Example: break;
var day = "Monday"; case "Saturday":
switch (day) { case "Sunday":
case "Monday": [Link]("Weekend");
case "Tuesday": break;
case "Wednesday": default:
case "Thursday": [Link]("Invalid day");
case "Friday": }
JavaScript Programming
[Link]("Weekday");
Evening Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
Loop: A loop is a programming structure that repeats a block of code until a certain condition is met.
Types of Loops:
For loop
While loop
Do while loop
JavaScript Programming
Evening Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
For loop: The for loop is used to execute a block of code a specified number of times. It is often used for
iterating over arrays or other collections of data.
Syntax:
for (initialization; condition; increment) {
// Code to execute
Example:
for (var i = 0; i < 5; i++) {
[Link](i);
JavaScript Programming
}
Evening Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
While loop: The while loop is used to execute a block of code as long as a certain condition is true. It is often used when the
number of iterations is not known ahead of time.
Syntax:
while (condition) {
// Code to execute
Example:
var i = 0;
while (i < 5) {
[Link](i);
i++;
JavaScript Programming
}
Evening Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
Do-while loop: The do-while loop is similar to the while loop, but it guarantees that the block of code is executed at least once
before the condition is checked.
Syntax:
do {
// Code to execute
} while (condition);
Example:
var i = 0;
do {
[Link](i);
i++;
JavaScript Programming
} while (i < 5);
Evening Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
Array:
In JavaScript, an array is a special type of variable that can hold multiple values, including other arrays.
Arrays are useful for storing collections of data, such as lists of numbers, strings, or objects.
var numbers = [1, 2, 3, 4, 5];
JavaScript Programming
Evening Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
Accessing Elements
[Link](numbers[0]); // Output: 1
[Link](numbers[2]); // Output: 3
Adding elements to an array
[Link](6);
[Link](numbers); // Output: [1, 2, 3, 4, 5, 6]
Removing elements from an array
[Link]();
JavaScript Programming
[Link](numbers); // Output: [1, 2, 3, 4, 5]
Evening Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
Example for shift and unshift
// Create an array of names
var names = [‘Faisal', ‘Jafri', 'Charlie'];
// Remove the first element using shift()
var first = [Link]();
[Link](names); // Output: [‘Jafri', 'Charlie']
[Link](first); // Output: ‘Faisal'
JavaScript Programming
Evening Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
Add a new element to the beginning using unshift()
var names = [‘Faisal', ‘Jafri', 'Charlie'];
[Link](‘Zamir’);
[Link](names); // Output: [‘Zamir’,‘Faisal', ‘Jafri ', 'Charlie']
JavaScript Programming
Evening Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
Functions:
Functions in JavaScript are reusable blocks of code that perform specific tasks. They can accept inputs (called
parameters) and return outputs.
JavaScript Programming
Evening Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
Syntax: parameter1, parameter2, and so on are optional input
values that we can pass to our function. They are
function functionName(parameter1, parameter2, ...) {
separated by commas and enclosed in parentheses.
// Function body
The function body is the code that will be executed
return result;
when the function is called. This can include any valid
} JavaScript code.
Explanation: The return keyword specifies the output value of the
function is a keyword that tells JavaScript that we are function.
defining a function.
functionName is the name we give to our function.
JavaScript Programming
Evening Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
Example:
function jafri() {
[Link]("This is a simple function named jafri.");
jafri(); // Output: "This is a simple function named jafri."
JavaScript Programming
Evening Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
Example 01: Example 02:
function addNumbers(num1, num2) { function stringLength(str) {
var sum = num1 + num2; return [Link];
return sum; } }
[Link](stringLength(“Faisal”))
var result = addNumbers(5, 10);
[Link](result); // Output: 15
JavaScript Programming
Evening Time Lectures One Day JavaScript Programming Lectures
Instructor: Faisal Zamir
Example 03: Example 04:
function square(num) { function concatenate(str1, str2) {
sq = num * num; return str1 + str2;
[Link](sq) }
} [Link](concatenate(“Faisal”, “Zamir”))
square(2);
JavaScript Programming