JavaScript V0.3

We are on a mission to address the digital
skills gap for 10 Million+ young professionals,

train and empower them to forge a career
path into future tech
JavaScript Basics
SEPTEMBER, 2023
JavaScript Basics
Scripting languages
• Scripting languages are programming languages that a program called an interpreter translates into a
code that a computer program can understand.
• It provides instructions, called scripts, for software in apps and websites.
• Scripts contain a series of commands that a software, application or scripting engine interprets one at a
time within a runtime environment.
• They are interpreted rather than compiling.
Examples: JavaScript, PHP, Python, VBScript, etc.,
3 JavaScript | © SmartCliff | Internal | Version 1.1

JavaScript Basics
JavaScript : Introduction
• JavaScript often abbreviated as JS, is a programming language and core technology of the World Wide
Web, alongside HTML and CSS.
• JavaScript is an object-based, lightweight and interpreted programming language.
• JavaScript allows you to add interactivity to a web page.
• It is open source and cross-platform.
• As of 2024, 98.9% of websites use JavaScript on the client side for webpage behavior, often
incorporating third-party libraries.
• All major web browsers have a dedicated JavaScript engine to execute the code on users' devices.
JavaScript Basics
JavaScript: Introduction
• JavaScript is a multi-paradigm, dynamic language with types and operators, standard built-in objects, and
methods.
• Its syntax is based on the Java and C languages — many structures from those languages apply to
JavaScript as well.
• JavaScript is versatile and beginner-friendly.
• JavaScript itself is relatively compact, yet very flexible.
The Man behind JavaScript:

Brendan Eich

JavaScript Basics
JavaScript: Introduction
• Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects;
For Example,
• Client-side JavaScript extends the core language by supplying objects to control a browser and its
Document Object Model (DOM).
• Server-side JavaScript extends the core language by supplying objects relevant to running JavaScript
on a server.
• JavaScript is standardized at Ecma International.

JavaScript Basics
Javascript : Introduction
• Client-side JavaScript:
• Client-side JavaScript is the most common form of the language.
• To be interpreted by the browser, the script must be included in or linked from an HTML document.
• It means that a web page can now incorporate programs that interact with the user, control the browser,
and dynamically create HTML content, rather than just static HTML.
• For ex. Use JavaScript to verify that a user has provided a valid email address in a form field.
• When the user submits the form, the Script code gets executed, and the form is submitted to the Web
Server if all of the entries are valid as per the script.

JavaScript Basics
Javascript : Advantages
• Less server interaction − Before transmitting the page to the server, we can validate the user's input.
This reduces server traffic, resulting in a lower load on your server.
• Immediate feedback to the visitors − They don't have to wait for the page to reload to see if they lost
something.
• Increased interactivity − We can make interfaces that respond when the user moves their mouse over
them or activates them with the keyboard.
• Richer interfaces − To provide a Rich Interface to your site users, we can utilize JavaScript to
incorporate features like drag-and-drop components and sliders.

JavaScript Basics
• Simplicity - JavaScript is easy to understand and learn.
• Interoperability - We can embed it into any webpage or inside the script of another
programming language.
• Versatility - JavaScript can now be used for both front-end and back-end development.
• Ex: NodeJS, AngularJS, ReactJS, and many more.
• Less Overhead
• By reducing the code length, JavaScript enhances the efficiency of websites and web apps.
• The usage of numerous built-in methods reduces the amount of overhead in the code.

JavaScript Basics
• Speed - Since JavaScript is an ‘interpreted’ language, it reduces the time required
• Popularity - Since all modern browsers support JavaScript, it is seen almost everywhere.
• Extended Functionality - Third-party add-ons allow the developers to add snippets of predefined code
in their code to save time and money.
• Asynchronous Programming – This model facilitates non-blocking operations, making it well-suited for
tasks that involve fetching data from servers, handling user input, and managing concurrent processes.

JavaScript Basics
HTML Vs CSS Vs JavaScript
HTML HTML + CSS HTML + CSS + JavaScript

(Structure) (Presentation) (Functionality)
The actual content of The look of the page Easily control and alter
the page like color, style the HTML

JavaScript Basics
Javascript : A heed
• File reading and writing on the client side are not supported by JavaScript.
• For security reasons, this has been preserved.
• JavaScript doesn't have any multi-threading or multiprocessor capabilities.
• JavaScript only allows for a single inheritance, not multiple inheritance.
• This object-oriented language feature may be required by some programs.
• A single code error can cause the entire JavaScript code on the page to stop rendering.

Java Script Basics
Javascript : Syntax
• A JavaScript consists of JavaScript statements that are placed within the <script>... </script> HTML tags
in a web page.
• The <script> element, which contains JavaScript, can be placed anywhere on the page, however it is
advised to put it within the <head> tags.
• The <script> tag alerts the browser program to begin interpreting all the text between these tags as a
script.
• Syntax of JavaScript will be as follows:
<script>
Javascript Code
</script>

JavaScript Basics
First JavaScript
• The script tag takes two important attributes:
• language:
• The scripting language you're using is specified by this attribute.
• The most common value is javascript.
• The use of this feature has been phased out in current versions of HTML (and its successor,
XHTML).
• type:
• The value of this attribute should be set to "application/javascript" or “text/javascript" in order
to identify the scripting language in use.

JavaScript Basics
First JavaScript
• The JavaScript code in the <script> element is interpreted from top to bottom.
<!DOCTYPE html>
<html>
<head>
<script type="application/javascript">
alert('Hello, World!');
</script>
</head>
<body>
</body>
</html>

JavaScript Basics
JavaScript Placement in HTML File
• There is a flexibility given to include JavaScript code anywhere in an HTML document. But there are
following most preferred ways to include JavaScript in your HTML file.
• Script in <head>...</head> section: If you want to have a script run on some event, such as when a
user clicks somewhere, then you will place that script in the head.
• Script in <body>...</body> section: If you need a script to run as the page loads so that the script
generates content in the page, the script goes in the <body> portion of the document.
• Script in <body>...</body> and <head>...</head> sections.
• Script in and external file and then include in <head>...</head> section.

JavaScript Basics
Javascript : First example program
JavaScript in External File:
• The script tag provides a mechanism to allow you to store JavaScript in an external file and then
include it in your HTML files.
• To use JavaScript from an external file source, you need to write all JavaScript source code in a simple
text file with the extension ".js".
//filename.js
alert('Hello, World!');

JavaScript Basics
Javascript : First example program
JavaScript in External File:
• Then include in the html file using the <script> element.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>
</body>
</html>

JavaScript Basics
Basic Elements
JavaScript is case-sensitive
• Everything in JavaScript is case-sensitive, including variables, function names, class names, and
operators.
• It indicates that the counter and Counter variables are not the same.
Identifiers
• An identifier is the name of a variable, function, parameter, or class.
• An identifier consists of one or more characters in the following format:
• The first character must be a letter (a-z, or A-Z), an underscore(_), or a dollar sign ($).
• The other characters can be letters (a-z, A-Z), numbers (0-9), underscores (_), and dollar signs ($).

JavaScript Basics
Basic Elements
Comments
• JavaScript supports both single-line and block comments.
• A single-line comment starts with two forward-slash characters (//).
//This is a single-line comment
• A block comment starts with forward-slash(/) and asterisk(*) characters and ends with asterisk(*) and
forward-slash(/) characters.
/*
This is a block comment that can span multiple lines
*/

JavaScript Basics
Basic Elements
Statements
• JavaScript does not require to end a statement with a semicolon (;)
• It is recommended to always use the semicolon to end a statement.
var a = 10;
var b = 20;

JavaScript Basics
Basic Elements
• We can use a code block that begins with a left curly brace ({) and ends with the right curly brace (}) to
combine multiple statements as follows:
if( a > b)
{
console.log('a is greater than b');
return 1;
}
Expressions
• An expression is a piece of code that evaluates to a value.
For example:
c=2 + 1
• The above expression assigns 3 to c.

JavaScript Basics
Basic Elements
Keywords & Reserved words
• JavaScript defines a list of keywords and reserved words that have special uses.
• We cannot use the keywords and reserved words as the identifiers.
abstract arguments await boolean break byte case catch
char class const continue debugger default delete do
double else enum eval export extends false final
finally float for function goto if implements import
in instanceof int interface let long native new
null package private protected public return short static
super switch synchronized this throw throws transient true
try typeof var void volatile while with yield

JavaScript Basics
Basic Elements: Variables
• Variables are containers for storing data (values).
• There are 3 ways to declare a JavaScript variable:
• var
• let
• const

JavaScript Basics
Using var
• Creating a variable in JavaScript is called "declaring" a variable.
• After the declaration, the variable has no value (technically it has the value of undefined).
• To assign a value to the variable using the assignment operator.
var message;
message = "Hello";
• You can also assign a value to the variable when you declare it:
var message = "Hello";

JavaScript Basics
• You can declare many variables in one statement. Start the statement with var and separate the
variables by comma:
var FirstName= "Sachin", LastName = "Tendulkar";
Note:
Using var, we can redeclare variables

JavaScript Basics
• 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
• Names can also begin with $ and _
• Names are case sensitive (y and Y are different variables)
• Reserved words (like JavaScript keywords) cannot be used as names

JavaScript Basics
Using let
• The let keyword was introduced in ES6 (2015).
• Variables defined with let cannot be redeclared.
• Variables defined with let must be declared before use.
• Variables defined with let have block scope.
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
let x = "Sachin";
let x = 0;
Output:
document.write(x);
</script> Uncaught SyntaxError SyntaxError: Identifier 'x' has already been
</body> declared
</html>

JavaScript Basics
• With var we can:
<!DOCTYPE html>
<html>
<body>
var x = "Sachin";
var x = 0;
document.write(x);
</script> Output:
</body>
0
</html>

JavaScript Basics
Block Scope
• ES6 introduced two important new JavaScript keywords: let and const.
• These two keywords provide block scope in JavaScript.

• Variables declared inside a { } block cannot be accessed from outside the block:
{
let x = 2;
}
// x cannot be used here
{
var x = 2;
}
// x can be used here

JavaScript Basics
Using const
• The const keyword was introduced in ES6 (2015).
• Variables defined with const cannot be redeclared.
• Variables defined with const cannot be reassigned.

<!DOCTYPE html>
<html>
<body>
const PI = 3.141592653589793;
PI = 3.14;
PI = PI + 10;
document.write(PI);
Output:
</script>
</body> Uncaught TypeError TypeError: Assignment to constant variable.
</html>
JavaScript Basics
Using const
<!DOCTYPE html>
<html>
<body>
const PI = 3.141592653589793;
document.write(PI);
</script>
</body>
Output:
</html> 3.141592653589793

JavaScript Basics
Using const
<!DOCTYPE html>
<html>
<body>
const PI ;
PI = 3.141592653589793;
document.write(PI);
</script>
</body> Output:
</html> Uncaught SyntaxError SyntaxError: Missing initializer in const

declaration

JavaScript Basics
Block Scope
• Declaring a variable with const is similar to let when it comes to Block Scope.
• For Example: The x declared in the block is not the same as the x declared outside the block
const x = 10; // Here x is 10

{
const x = 2; // Here x is 2
}
// Here x is 10

JavaScript Basics
Basic Elements : Const
Redeclaring
• Redeclaring a JavaScript var variable is allowed anywhere in a program:
var x = 2; // Allowed
x = 4; // Allowed
• Redeclaring an existing var or let variable to const, in the same scope, is not allowed:
var x = 2; // Allowed
const x = 2; // Not allowed
{
let x = 2; // Allowed
}
{
const x = 2; // Allowed
}

JavaScript Basics
Basic Elements : Operators
Arithmetic Operators:
• Arithmetic operators are used to performing arithmetic on numbers
Operator Description
+ Addition
- Subtraction
* Multiplication
** Exponentiation (ES2016)
/ Division
% Modulus (Division Remainder)
++ Increment
-- Decrement

JavaScript Basics
Assignment Operators:
• Assignment operators assign a value to a variable.
Operator Example Same As
= x=y x=y
+= x += y x=x+y
-= x -= y x=x-y
*= x *= y x=x*y
/= x /= y x=x/y
%= x %= y x=x%y
**= x **= y x = x ** y

JavaScript Basics

Comparison Operators:
• Comparison operators compare the two operands.
== equal to
=== equal value and equal type
!= not equal
!== not equal value or not equal type
> greater than
< less than
>= greater than or equal to
<= less than or equal to
? ternary operator
JavaScript Basics

Logical Operators:
• The logical operators are used to combine two or more conditions.
&& logical and
|| logical or
! logical not

JavaScript Basics

Bitwise Operators:
• The bitwise operators perform bitwise operations on operands.
Operator Description Example Same as Result Decimal
& AND 5&1 0101 & 0001 0001 1
| OR 5|1 0101 | 0001 0101 5
~ NOT ~5 ~0101 1010 10
^ XOR 5^1 0101 ^ 0001 0100 4
<< Zero fill left shift 5 << 1 0101 << 1 1010 10
>> Signed right shift 5 >> 1 0101 >> 1 0010 2
>>> Zero fill right shift 5 >>> 1 0101 >>> 1 0010 2

JavaScript Basics

Special Operators:
(?:) Conditional Operator returns value based on the condition. It is like if-else.
, Comma Operator allows multiple expressions to be evaluated as single statement.
delete Delete Operator deletes a property from the object.
in In Operator checks if object has the given property
instanceof checks if the object is an instance of given type
new creates an instance (object)
typeof checks the type of object.
void it discards the expression's return value.
yield checks what is returned in a generator by the generator's iterator.

JavaScript Basics
Basic Elements : Data Types
• JavaScript variables can hold different data types: numbers, strings, objects, and more:
let length = 16; // Number
let lastName = "Johnson"; // String
let x = {firstName:"Rahul", lastName:"Dravid"}; // Object
• JavaScript Types are Dynamic

• JavaScript has dynamic types. i.e. the same variable can be used to hold different data types.
let x; // Now x is undefined
x = 5; // Now x is a Number
x = "John"; // Now x is a String

JavaScript Basics
Strings
• A string (or a text string) is a series of characters like "Sachin".
• Strings are written with quotes. single or double quotes can be used.
• We can use quotes inside a string, as long as they don't match the quotes surrounding the string:
<!DOCTYPE html>
<html>
<body>
let Name1 = "Sachin"; // Using double quotes
let Name2 = 'Sachin'; // Using single quotes
let str1 = "It's alright"; // Single quote inside double quotes

let str2 = "He is called 'Johnny'"; // Single quotes inside double quotes
let str3 = 'He is called "Johnny"'; // Double quotes inside single quotes

JavaScript Basics
document.write("Using double quotes: "+Name1+"<br/>");
document.write("Using single quotes: "+Name2+"<br/>");
document.write("Single quote inside double quotes: "+str1+"<br/>");
document.write("Single quotes inside double quotes: "+str2+"<br/>");
document.write("Double quotes inside single quotes: "+str3);
</script>
</body>
</html>

JavaScript Basics
Numbers
• Numbers can be written with, or without decimals.
<!DOCTYPE html>
<html>
<body>
let x1 = 34.50; // Written with decimals
let x2 = 34; // Written without decimals
document.write("Written with decimals: "+x1+"<br/>");

document.write("Written without decimals: "+x2);
</script>
</body>
</html>

JavaScript Basics
Booleans
• Booleans can only have two values: true or false.

<!DOCTYPE html>
<html>
<body>
let x = 5;
let y = 5;
let z = 6;
document.write("(x == y) : "+(x == y) +"<br/>");
document.write("(x == z) : "+(x == z) );
</script>
</body>
</html>

JavaScript Basics
Arrays
• JavaScript arrays are written with square brackets.
• Array items are separated by commas.
• Array indexes are zero-based, which means the first item is [0], the second is [1], and so on.
<!DOCTYPE html>
<html>
<body>
const cars = ["Saab", "Volvo", "BMW"];
document.write("Cars : "+cars +"<br/><br/>");
for (let i = 0; i < cars.length; i++) {
document.write("Car at index " + i + ": " + cars[i] + "<br/>"); }
</script>
</body>
</html>

JavaScript Basics
Objects
• JavaScript objects are written with curly braces {}.
• Object properties are written as name: value pairs, separated by commas.

<!DOCTYPE html>
<html>
<body>
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
document.write(person.firstName +" "+person.lastName +"<br/>"+person.age +"<br/>"+person.eyeColor);
</script>
</body>
</html>

JavaScript Basics
Basic Elements : typeof Operator
• typeof operator can be used to find the type of a JavaScript variable.
• The typeof operator returns the type of a variable or an expression.
<!DOCTYPE html>
<html>
<body>
document.write( typeof "" +"<br/>");
document.write( typeof "Sachin" +"<br/>");
document.write( typeof "Sachin Tendulkar" +"<br/>");
document.write( typeof 0 +"<br/>");
document.write( typeof 314+"<br/>");
document.write( typeof 3.14+"<br/>");
document.write( typeof 3+"<br/>");
document.write( typeof (3+4));
</script>
</body>
</html>
JavaScript Basics
Basic Elements : Output

• JavaScript can "display" data in different ways:
• Writing into the HTML output using document.write()
• Writing into an alert box, using window.alert()
• Writing into the browser console, using console.log()
• Writing into an HTML element, using innerHTML. (Will Discuss Later)

JavaScript : Fundamentals

Using document.write()
• For testing purposes, it is convenient to use document.write():

<!DOCTYPE html>
<html>
<body>
<script>
document.write(5 + 6);
</script>
</body>
</html>

Using window.alert()
• You can use an alert box to display data
• The window object is the global scope object, that means that variables, properties, and methods by
default belong to the window object.
<!DOCTYPE html>
<html>
<body>
<script>
window.alert(5 + 6);
</script>
</body>
</html>

Using console.log()
• For debugging purposes, you can call the console.log() method in the browser to display data.
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>

JavaScript Basics
Basic Elements : Control Flow Statements
if Statement
if (condition) {
// block of code to be executed if the condition is true
}
var age = 20;
if( age > 18 ){
document.write("<b>Qualifies for driving</b>");
</script>

JavaScript Basics
if-else Statement
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
var age = 15;
if( age > 18 ){
document.write("<b>Qualifies for driving</b>");
}else{
document.write("<b>Does not qualify for driving</b>");
}
</script>

JavaScript Basics
if...else if... statement:
if (condition1) {
// block of code to be executed if condition1 is true
} else if (condition2) {
// block of code to be executed if the condition1 is false and condition2 is true
} else {
// block of code to be executed if the condition1 is false and condition2 is false

JavaScript Basics
if...else if... statement:
var book = "maths";
if( book == "history" ){
document.write("<b>History Book</b>");
}else if( book == "maths" ){
document.write("<b>Maths Book</b>");
}else if( book == "economics" ){
document.write("<b>Economics Book</b>");
}else{
document.write("<b>Unknown Book</b>");
}
</script>

JavaScript Basics

switch-case Statement
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block

JavaScript Basics

Switch-case Statement
var grade='A';
switch (grade) {
case 'A': document.write("Good job<br />");
break;
case 'B': document.write("Pretty good<br />");
break;
case 'C': document.write("Passed<br />");
break;

JavaScript Basics

Switch-case Statement
case 'D': document.write("Not so good<br />");
break;
case 'F': document.write("Failed<br />");
break;
default: document.write("Unknown grade<br />")
</script>

JavaScript Basics

while Loop
while (condition) {
// code block to be executed
}
var count = 0;
document.write("Starting Loop...." + "<br /><br />");
while (count < 10){
document.write("Current Count : " + count + "<br />");
count++; }
document.write("<br />Loop stopped!");
</script>

JavaScript Basics
do...while Loop
do{
Statement(s) to be executed;
} while (expression);
var count = 0;
document.write("Starting Loop…." + "<br /><br />");
do{
document.write("Current Count : " + count + "<br />");
count++;
}while (count < 10);
</script>

JavaScript Basics
for Loop
for (initialization; test condition; iteration statement){
Statement(s) to be executed if test condition is true
}
document.write("Starting Loop…." + "<br /><br />");
for(let count = 0; count < 10; count++){

document.write("Current Count : " + count );
document.write("<br />");
}
</script>
JavaScript Basics
break Statement
var x = 1;
document.write("Entering the loop<br /> <br />");
while (x < 20){
if (x == 5){
break; // breaks out of the loop completely
}
x = x + 1;
document.write( x + "<br />");
}
document.write(" <br /> Exiting the loop!<br /> ");
</script>

JavaScript Basics
label break Statement
document.write("Entering the loop!<br /><br />");
outerloop: // This is the label name
for (var i = 0; i < 5; i++){
document.write("<br />Outerloop: " + i + "<br />");

JavaScript Basics
innerloop:
for (var j = 0; j < 5; j++) {
if (j > 3 ) break ; // Quit the innermost loop
if (i == 2) break innerloop; // Do the same thing
if (i == 4) break outerloop; // Quit the outer loop
document.write("Innerloop: " + j + " <br />");
document.write("<br />Exiting the loop!<br /> ");
</script>

JavaScript Basics

JavaScript Basics
continue Statement
var x = 1;
document.write("Entering the loop<br /><br /> ");

while (x < 10) {
x = x + 1;
if (x == 5){
continue; // skip rest of the loop body
}
document.write( x + "<br />");
}
document.write("<br /> Exiting the loop!<br /> ");
</script>

JavaScript Basics

label continue Statement
document.write("Entering the loop!<br /><br /> ");
outerloop: // This is the label name
for (var i = 0; i < 3; i++){
document.write(" <br />Outerloop: " + i + "<br />");

JavaScript Basics

for (var j = 0; j < 5; j++) {
if (j == 3){
continue outerloop;
document.write("Innerloop: " + j + "<br />");
document.write("<br />Exiting the loop!<br /> ");
</script>
JavaScript Basics


JavaScript Basics
Basic Elements : Functions
• A JavaScript function is a block of code designed to perform a particular task.
• A JavaScript function is executed when "something" invokes it (calls it).
Syntax:
function functionName(parameter-list){
statements
}
• A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses
().
• Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).
• The parentheses may include parameter names separated by commas: (parameter1, parameter2, ...)
• The code to be executed, by the function, is placed inside curly brackets: {}

JavaScript Basics
<!DOCTYPE html>
<html>
<head>

function sayHello() {
alert("Hello there");
</script>
</head>

JavaScript Basics
<body>

sayHello();
</script>
</body>
</html>

JavaScript Basics
Basic Elements : DialogBoxes
Confirmation Dialog Box:
• A confirmation dialog box is mostly used to take the user’s consent on any option. It displays a dialog box
with two buttons: OK and Cancel.
• If the user clicks on the OK button the window method confirm() will return true.
<html>
<head>
<script>
function myConfirmbox(){
var retVal = confirm("Do you want to continue ?");
if( retVal == true ){
alert("User wants to continue!");
}
else{
alert("User does not want to continue!");
}
}
</script>
</head>
JavaScript Basics
Confirmation Dialog Box:
<body>
<script>
myConfirmbox();
</script>
</body>
</html>

JavaScript Basics
Prompt Dialog Box:
• The prompt dialog box is very useful when you want to pop-up a text box to get user input.
• This dialog box with two buttons: OK and Cancel.
• The window method prompt() returns the entered value when the user clicks on OK button.
<html>
<head>
<script>
function myPrompt(){
var retVal = prompt("Enter your name : ", "your name here");
alert("You have entered : " + retVal );
}
</script>
</head>

JavaScript Basics
Prompt Dialog Box:
<body>
<script>
myPrompt();
</script>
</body></html>

JavaScript Basics
Prompt Dialog Box:

JavaScript Objects
Please download pictures in
suitable size here and insert them
by clicking the symbol above.

JavaScript Objects
Introduction
• "Everything" in JavaScript is an Object. Even primitive data types (except null and undefined) can be
treated as objects.
– Booleans can be objects (or primitive data treated as objects)
– Numbers can be objects (or primitive data treated as objects)
– Strings are also objects (or primitive data treated as objects)
– Dates are always objects
– Maths and Regular Expressions are always objects
– Arrays are always objects

JavaScript Objects
Introduction
Object Properties
• Properties are the values associated with an object.
Syntax:
• objectName.propertyName
• objectName["propertyName"]

JavaScript Objects
Introduction
Object Definition
• We define (and create) a JavaScript object with an object literal:
const person = {firstName:"Sachin", lastName:"Tendulkar", age:50};
Object Properties:
Property Property Value
firstName Sachin
lastName Tendulkar
age 50
Example:
person.lastName; // Tendulkar
Or
person["lastName"];
JavaScript Objects
Introduction
Object Methods
• Objects can also have methods.
• Methods are actions that can be performed on objects.
• Methods are stored in properties as function definitions.
Accessing Object Methods:
• You access an object method with the following syntax:
objectName.methodName()

JavaScript Objects
Introduction
Examples:
<!DOCTYPE html>
<html>
<body>
person = {firstName: "Sachin", lastName : "Tendulkar", fullName : function() {
return this.firstName + " " + this.lastName;}};
document.write("The person full name is: " + person.fullName());
</script>
</body>
</html>

JavaScript Objects
Introduction
Examples:
<!DOCTYPE html>
<html>
<body>
person = {firstName:"Sachin", lastName:"Tendulkar", age:50};
person.fullName=function(){
return person.firstName+" "+person.lastName; }

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

JavaScript Objects
Introduction
Examples:
<!DOCTYPE html>
<html>
<body>
person = {firstName:"Sachin", lastName:"Tendulkar", age:50};
person.fullName=function(){
return this.firstName+" "+this.lastName; }

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

JavaScript Objects
Arrays
• In JavaScript, arrays aren't primitives but are instead Array objects with the following core
characteristics:
• JavaScript arrays are resizable and can contain a mix of different data types.
• JavaScript arrays are not associative arrays and so, array elements cannot be accessed using arbitrary
strings as indexes, but must be accessed using nonnegative integers.
• JavaScript arrays are zero-indexed.
• JavaScript array-copy operations create shallow copies.

JavaScript Objects
Arrays
Creating an array
• Using literal
• let arrayName = [value1, value2, ...];
• Using Constructor
• let arrayName = new Array();
• let arrayName = new Array(size);
• let arrayName = new Array(value1, value2, …);

JavaScript Objects
Arrays: Iteration
• Using forEach:
const arrayItems = ['item1', 'item2', 'item3'];
const copyItems = [];
arrayItems.forEach(function(item){
copyItems.push(item);
})
console.log(copyItems);
• Using for…of:
const students = ['John', 'Sara', 'Jack'];
// using for...of
for ( let element of students ) {
console.log(element);
}

JavaScript Objects
Array: Properties and Methods
Methods Description
push() Adds new elements to the end of an array, and returns the new length
pop() Removes the last element of an array, and returns that element
shift() Removes the first element of an array, and returns that element
unshift() Adds new elements to the beginning of an array, and returns the new length
find() Returns the value of the first element in an array that pass a test
filter() Creates a new array with every element in an array that pass a test
from() Creates an array from an object
includes() Check if an array contains the specified element
keys() Returns a Array Iteration Object, containing the keys of the original array
map() Creates a new array with the result of calling a function for each array element

JavaScript Objects
Array: Properties and Methods
Methods Description
reduce() Reduce the values of an array to a single value (going left-to-right)
reverse() Reverses the order of the elements in an array
slice() Selects a part of an array, and returns the new array
sort() Sorts the elements of an array
splice() Adds/Removes elements from an array
toString() Converts an array to a string, and returns the result
indexOf() Search the array for an element and returns its position
lastIndexOf() Search the array for an element, starting at the end, and returns its position
of() Creates an array from a number of arguments
join() Joins all elements of an array into a string

JavaScript Objects
Strings
• A JavaScript string is zero or more characters written inside quotes.
• Normally, JavaScript strings are primitive values, created from literals:
Example: let firstName = "Rahul";
• But strings can also be defined as objects with the keyword new:
Example: let firstName = new String("Rahul");

JavaScript Objects
Strings
Comparison of == and === operator
• == operator compares two string values.
• === operator checks equality in both data type and value but not with objects.
<!DOCTYPE html>
<html>
<body>
let x = "Sachin";
let y = "Sachin";
let z = new String("Sachin");
let z1 = new String("Sachin");
//checks if the values are equal

document.write("Comparison using == operator: "+(x==y)+"<br/>");
//checks both the values and data types are equal
document.write("Comparison using === operator: "+(x===y)+"<br/><br/>");
JavaScript Objects
Strings
//converts the String object to its primitive value before comparing and checking that both values are
equal
document.write("Comparison using == operator: "+(x==z)+"<br/>");
//checks both the values and the data types, and they are different (string vs. object)
document.write("Comparison using === operator: "+(x===z)+"<br/>");
//checking the two different string objects but they have the same string value
document.write("Comparison using == operator: "+(z==z1)+"<br/>");
//checks both values and data types but not with objects
document.write("Comparison using === operator: "+(z===z1)+"<br/>");
</script>
</body>
</html>

JavaScript Objects
Strings

JavaScript Objects
Strings
String Length:
• To find the length of a string, use the built-in length property.
<!DOCTYPE html>
<html>
<body>
let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

document.write("Length of the text is: "+text.length);
</script>
</body>
</html>
JavaScript Objects
String Methods
Possible String Methods:
Method Description
charAt() Returns the character at the specified index.
concat() Combines the text of two strings and returns a new string.
indexOf() Returns the index within the calling String object of the first occurrence of the specified value,
or -1 if not found.
lastIndexOf() Returns the index within the calling String object of the last occurrence of the specified value,
or -1 if not found.
match() Used to match a regular expression against a string.
replace() Used to find a match between a regular expression and a string, and to replace the matched
substring with a new substring.
search() Executes the search for a match between a regular expression and a specified string.
slice() Extracts a section of a string and returns a new string.
split() Splits a String object into an array of strings by separating the string into substrings.
JavaScript Objects
String Methods
Possible String Methods:
Method Description
substr() Returns the characters in a string beginning at the specified location through the
specified number of characters.
substring() Returns the characters in a string between two indexes into the string.
toLocaleLowerCase() The characters within a string are converted to lower case while respecting the
current locale.
toLocaleUpperCase() The characters within a string are converted to upper case while respecting the
current locale.
toLowerCase() Returns the calling string value converted to lower case.
toString() Returns a string representing the specified object.
toUpperCase() Returns the calling string value converted to uppercase.
valueOf() Returns the primitive value of the specified object.

JavaScript Objects
String Methods: Example #1
The slice() Method
• slice() extracts a part of a string and returns the extracted part in a new string.
• The method takes 2 parameters: the start position, and the end position (end not included).
• The positive starting index(from left to right) is 0 and the negative starting index(from right to left) is -1.
<!DOCTYPE html>
<html>
<body>
let str = "Welcome to Javascript World";
document.write("Using positive index(forward) is: "+str.slice(11, 21)+"<br/><br/>");

JavaScript Objects
document.write("Using negative index(backward) is: "+str.slice(-16, -6)+"<br/><br/>");

document.write("Using only positive starting index is: "+str.slice(11)+"<br/><br/>");
document.write("Using only negative starting index is: "+str.slice(-16));
</script>
</body>
</html>

JavaScript Objects
The substring() Method
• substring() is similar to slice().
• If start > stop, then the function swaps both arguments.
• If any argument is negative or is NaN, it is treated as 0.

<!DOCTYPE html>
<html>
<body>
document.write("Using starting and ending index is: "+str.substring(11, 21)+"<br/><br/>");
document.write("Using starting index is: "+str.substring(11));
</script>
</body>
</html>
JavaScript Objects
The substr() Method
• substr() is similar to slice().
• The difference is that the second parameter specifies the length of the extracted part.
• If you omit the second parameter, substr() will slice out the rest of the string.

JavaScript Objects
<!DOCTYPE html>
<html>
<body>
document.write("Using starting index and the length of the characters is: "+str.substr(11, 10)+"<br/><br/>");
document.write("Using only positive starting index is: "+str.substr(11)+"<br/><br/>");
document.write("Using only negative starting index is: "+str.substr(-5));
</script>
</body>
</html>

JavaScript Objects
Replacing String
• The replace() method replaces a specified value with another value in a string.
• The replace() method does not change the string it is called on.
• It returns a new string.
• By default, the replace() method replaces only the first match.
• To replace case insensitive, use a regular expression with an /i flag (insensitive).
• To replace all matches, use a regular expression with a /g flag (global match).

JavaScript Objects
<!DOCTYPE html>
• To
<html>
<body>
let text1 = "Welcome to Nepal";

//Replace Nepal to India
let newText1 = text1.replace("Nepal", "India");
document.write("Replaced text is: "+newText1+"<br/><br/>");
let text2 = "Welcome to Nepal and Nepal Country";

//Replace the first occurrence of Nepal to India
let newText2 = text2.replace("Nepal", "India");
document.write("Replaced only the first-occurrence is: "+newText2+"<br/><br/>");

JavaScript Objects
//Replace the text using case-insensitive
• To
let newText3 = text1.replace(/NEPAL/i, "India");
document.write("Replaced text using case-insensitive is: "+newText3+"<br/><br/>");
//Replace the global occurrence of Nepal to India
let newText4 = text2.replace(/Nepal/g, "India");
document.write("Replaced text using global is: "+newText4+"<br/><br/>");
</script>
</body>
</html>

JavaScript Objects
Number Methods
• The Number object represents numerical data, either integers or floating-point numbers.
let x = 3.14; // A number with decimals
let y = 3; // A number without decimals
Method Description
constructor() Returns the function that created this object's instance. By default this is the Number
object.
toExponential() Forces a number to display in exponential notation, even if the number is in the range in
which JavaScript normally uses standard notation.
toFixed() Formats a number with a specific number of digits to the right of the decimal.
toLocaleString() Returns a string value version of the current number in a format that may vary according
to a browser's locale settings.
toPrecision() Defines how many total digits (including digits to the left and right of the decimal) to
display of a number.
toString() Returns the string representation of the number's value.
valueOf() Returns the number's value.

JavaScript Objects
Number Methods: Example
The toString() Method:
• The toString() method returns a number as a string.
• All number methods can be used on any type of number (literals, variables, or expressions).
<!DOCTYPE html>
<html>
<body>
<script>
let x = 123;
document.write("Number as a String: "+x.toString()+"<br/><br/>");
document.write("Number as a String: "+(123).toString()+"<br/><br/>");
document.write("Number as a String: "+(100 + 23).toString());
</script>
</body>
</html>
JavaScript Objects
Global Methods
Converting Variables to Numbers
• There are 3 JavaScript methods that can be used to convert a variable to a number:
Method Description
Number() Returns a number converted from its argument.
parseInt() Parses its argument and returns a whole number
parseFloat() Parses its argument and returns a floating point number

JavaScript Objects
Global Methods: Number(): Example
• This method can be used to convert JavaScript variables to numbers.
<!DOCTYPE html>
<html>
<body>
document.write("Converting boolean variable to number: "+Number(true)+"<br/><br/>");
document.write("Converting boolean variable to number: "+Number(false)+"<br/><br/>");
document.write("Converting string variable to number: "+Number("50")+"<br/><br/>");
document.write("Converting string variable to number: "+Number("50.50")+"<br/><br/>");
document.write("Converting string variable to number: "+Number("Hi"));
</script>
</body>
</html>

THANK YOU

JavaScript V0.3

Uploaded by

JavaScript V0.3

Uploaded by

We are on a mission to address the digital

skills gap for 10 Million+ young professionals,

code that a computer program can understand.

• It provides instructions, called scripts, for software in apps and websites.

time within a runtime environment.

• They are interpreted rather than compiling.

Examples: JavaScript, PHP, Python, VBScript, etc.,

3 JavaScript | © SmartCliff | Internal | Version 1.1

Web, alongside HTML and CSS.

• JavaScript is an object-based, lightweight and interpreted programming language.

• JavaScript allows you to add interactivity to a web page.

• It is open source and cross-platform.

incorporating third-party libraries.

• JavaScript is versatile and beginner-friendly.

• JavaScript itself is relatively compact, yet very flexible.

The Man behind JavaScript:

5 JavaScript | © SmartCliff | Internal | Version 1.1

Document Object Model (DOM).

• JavaScript is standardized at Ecma International.

6 JavaScript | © SmartCliff | Internal | Version 1.1

• Client-side JavaScript is the most common form of the language.

Server if all of the entries are valid as per the script.

7 JavaScript | © SmartCliff | Internal | Version 1.1

This reduces server traffic, resulting in a lower load on your server.

them or activates them with the keyboard.

incorporate features like drag-and-drop components and sliders.

8 JavaScript | © SmartCliff | Internal | Version 1.1

• Simplicity - JavaScript is easy to understand and learn.

• Ex: NodeJS, AngularJS, ReactJS, and many more.

9 JavaScript | © SmartCliff | Internal | Version 1.1

• Speed - Since JavaScript is an ‘interpreted’ language, it reduces the time required

in their code to save time and money.

10 JavaScript | © SmartCliff | Internal | Version 1.1

HTML Vs CSS Vs JavaScript

HTML HTML + CSS HTML + CSS + JavaScript

11 JavaScript | © SmartCliff | Internal | Version 1.1

• For security reasons, this has been preserved.

• JavaScript doesn't have any multi-threading or multiprocessor capabilities.

• JavaScript only allows for a single inheritance, not multiple inheritance.

• This object-oriented language feature may be required by some programs.

12 JavaScript | © SmartCliff | Internal | Version 1.1

13 JavaScript | © SmartCliff | Internal | Version 1.1

• The scripting language you're using is specified by this attribute.

• The most common value is javascript.

14 JavaScript | © SmartCliff | Internal | Version 1.1

15 JavaScript | © SmartCliff | Internal | Version 1.1

following most preferred ways to include JavaScript in your HTML file.

• Script in <body>...</body> and <head>...</head> sections.

• Script in and external file and then include in <head>...</head> section.

16 JavaScript | © SmartCliff | Internal | Version 1.1

17 JavaScript | © SmartCliff | Internal | Version 1.1

JavaScript in External File:

• Then include in the html file using the <script> element.

<script type="text/javascript" src="filename.js" ></script>

18 JavaScript | © SmartCliff | Internal | Version 1.1

• An identifier is the name of a variable, function, parameter, or class.

• An identifier consists of one or more characters in the following format:

19 JavaScript | © SmartCliff | Internal | Version 1.1

• JavaScript supports both single-line and block comments.

• A single-line comment starts with two forward-slash characters (//).

//This is a single-line comment

This is a block comment that can span multiple lines

20 JavaScript | © SmartCliff | Internal | Version 1.1

• JavaScript does not require to end a statement with a semicolon (;)

• It is recommended to always use the semicolon to end a statement.

21 JavaScript | © SmartCliff | Internal | Version 1.1

• The above expression assigns 3 to c.

Keywords & Reserved words

• We cannot use the keywords and reserved words as the identifiers.

abstract arguments await boolean break byte case catch

char class const continue debugger default delete do

double else enum eval export extends false final

finally float for function goto if implements import

in instanceof int interface let long native new

null package private protected public return short static

super switch synchronized this throw throws transient true