Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
24 views

Introduction To JavaScript

JavaScript is a high-level, interpreted programming language primarily used for front-end web development. It is one of the core technologies for building interactive and dynamic websites. JavaScript allows developers to add functionality, interactivity, and behavior to web pages, making them more engaging for users.

Uploaded by

Kapil Mangla
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
24 views

Introduction To JavaScript

JavaScript is a high-level, interpreted programming language primarily used for front-end web development. It is one of the core technologies for building interactive and dynamic websites. JavaScript allows developers to add functionality, interactivity, and behavior to web pages, making them more engaging for users.

Uploaded by

Kapil Mangla
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 44

Introduction to JavaScript

Understanding
Basic Syntax
Objectives

01 Fundamentals Objective: Develop an understanding of fundamentals of JavaScript

02 Statements Objective: Understand Statements as programming instruction unit

03 Values Objective: Understand different type of values in JavaScript


Objectives

04 Operators Objective: Know various Operators in JavaScript and how to use them

05 Expressions Objective: Understand expressions in JavaScript code

06 Comments Objective: Implement different types of Comments in program code


Introduction
What is JavaScript?

JavaScript is:
▪ cross-platform
▪ object-oriented
▪ client-side
▪ scripting language
JavaScript was developed
▪ Used to make webpages interactive:
by Brendan Eich in 1995
• having complex animations
• clickable buttons
• popup menus etc.

There are also more advanced server-side


versions of JavaScript such as nodeJS.
Basics of Front-End Programming
3 languages all web developers must learn

▪ HTML (Hypertext Markup Language) -


to define the content of web pages

▪ JavaScript -
to program the behavior of web pages

▪ CSS (Cascading Style Sheets) -


to specify the layout of web pages
Basics of HTML
HTML: Hypertext Markup Language

▪ Document type
<!DOCTYPE html> this is a HTML5 type
of document
▪ Tags
▪ Elements
• Root element <html>
• Contains meta info <head>
• Contains visible contents <body>
▪ id of an Element (unique attribute for an
HTML element)
Where to Insert JS Code in HTML?
Inserting JS code in HTML

▪ Script element
<script> </script>
▪ Within the <head> element
▪ Within the <body> element
▪ At the bottom of the <body> element
▪ As an attribute
How to Check the Results (Output)?
Various JS output display options

▪ Into an HTML element innerHTML


▪ Directly into the HTML
document.write()
▪ The alert box window.alert()
▪ The browser console console.log()
▪ By accessing HTML elements
document.getElementById(id)
JavaScript Statements
Statements: Programming instruction units

Statements:
// Statements end with a ; delimiter
▪ Statements are separated by ; delimiter
var x, y, z; // Statement to Declare Variables
▪ Single instruction unit of JS programming
▪ One-line multiple statements & multi-line
// Multiple statements can be in one line
statements
▪ Multiple blank spaces are ignored x = 1; y = 2; // Statement to Assign value

A statement may contain: // One statement can take multi-line


▪ Values var a =
▪ Operators 'Java';
▪ Expressions
▪ Keywords // Blank-spaces are ignored
▪ Identifiers z = x + y; // Statement to Assign Expression
▪ Comments
console.log(a, z); // output
Values in JS
Values: Texts & Numbers JavaScript uses

Values:
// variables are used to store values
▪ Literals (fixed values)
var x, y, z; // Declare Variables
• Numbers
(with decimals, without decimals,
// Literal (Number) without decimals
exponent)
x = 1; // Assign Literal (Number) to Variable
• Strings
(single quoted, double quoted) // Literal (Number) with a decimal

▪ Variables (may change values) y = 2.5;


• declare
• assign values (Literals, Variables) // Literal (String) with single quote
Variables are declared with keyword var var a = 'Java'; // Assign Literal (String)
Two more keywords are also used: // Literal (String) with double quote
▪ const that cannot be reassigned var b = "script";
▪ let for declaration with restricted scope
console.log(x + y, a + b); // output
Operators in JS
Operators: Special Symbol used to Perform Operations

Operators:
var x, y, z;
▪ Arithmetic operators
x = 1; // Assign
( + - * / % ** ++ -- ) to compute values
▪ Assignment operators
y = 2; // Assign
var a = 'Java'; // Assign
( = += *= %= **= ) to assign values to
variables
▪ Comparison operators // Operators and Operands

( == != > <= ) to compare two values or z = x + y; // Assign Expression to Variable


variables
▪ Logical operators // + operator on Strings
( && || ! ) to check logic between var b = a + " " + "script"; // quotes
variables(values)
▪ Other operators console.log(b, z);
There are many more advanced operators in
the JavaScript to explore in the later part of
the course
Arithmetic Operators
Arithmetic Operators: To Compute Values

Arithmetic Operators:
var x, y;
▪ Simple arithmetic operators
x = 5; // Assign
( + - * / ) add, subtract, multiply, divide
▪ Modulus operator
y = 2; // Assign
var a = x + y; // adds numbers, 7
( % ) to compute the division remainder
▪ Increment & Decrement operators var b = x - y; // subtracts numbers, 3

( ++ -- ) to increment & decrement var c = x * y; // multiplies numbers, 10

numbers var d = x / y; // divides numbers, 2.5


▪ Prefix Increment / decrement var e = x % y; // returns division remainder,1
▪ Postfix Increment / decrement var f = x ** y; // power, returns 25
▪ Exponentiation operators // increment & decrement operators
( ** ) 1st operand to the power of the a = x++; // value of a returns 6
2nd operand b = y-- // value of b returns 1
alert(c++); // Prefix, returns 10
alert(++d); // Postfix, returns 3.5
Assignment Operators
Assignment Operators: To Assign Values to Variables

Assignment Operators:
var x;
▪ Simple assignment operator
// Assign value to a variable
( = ) Assign value to a variable
▪ Add assignment operator x = 3; // value of x returns 3
// Assign added value
( += ) Assign added value to a variable
▪ Subtract assignment operator x += 2; // value of x returns 5

( -= ) Assign subtracted value to a // Assign subtracted value


variable x -= 2; // value of x returns 3
▪ Multiply assignment operator // Assign multiplied value
( *= ) Assign multiplied value to a x *= 2; // value of x returns 6
variable // Assign divided value
▪ Divide assignment operator x /= 2; // value of x returns 3
( /= ) assigns divided value to a // Assign remainder
variable x %= 2; // value of x returns 1
▪ Modulus assignment operator
( %= ) assigns a remainder to a
variable
Comparison Operators
Comparison Operators: To Compare Two Values or Variables

Comparison Operators:
var x, age = 19;
▪ Equal to operator
if (age > 18) x = "Adult"; // Adult
( == )
▪ Equal value and equal type operator
(age > 18) // true

( === )
▪ Not equal operator age = 12;

( != ) (age > 18) // false

▪ Not equal value or not equal type operator (age == "12") // true
( !== ) (age === "12") // false
▪ Greater than & less than operator (age === 12) // true
(><) (age != "10") // true
▪ Greater than or / less than or equal to (age !== 10) // true
operator
( >= <= ) age = 18;
(age >= 18) // true
Conditional Operators
It assigns a value to a variable based on some condition

Conditional or Ternary Operators:


var x, age = 12;
▪ variablename = (condition) ?
value1:value2
// variablename = (condition) ? value1:value2
x = (age > 18) ? "Adult":"Minor"; // Minor
(age > 18) // false
// if the condition (age > 18) is true
// then x = "Adult"
// else x = "Minor"

age = 18;
x = (age >= 18) ? "Adult":"Minor"; // Adult
(age >= 18) // true
Logical Operators
Logical Operators: To Check Logic between Values or Variables

Logical Operators:
var x, y;
▪ Logical and operator
( && )
▪ Logical or operator
x = 5;
y = 3;
( || )
▪ Logical not operator
(!) // Logical and operator
(x < 8 && y > 1) // true

// Logical or operator
(x == 10 || y < 1) // false

// Logical not operator


(!(x == y)) // true
Expressions in JS
Expressions: Combination of Values, Variables, and Operators

Expressions:
Any unit of code that can be evaluated var x = 1, y = 4;
to a value. // Primary Expressions
'Javascript'; // A string literal
▪ Primary expressions
54.2; // A numeric literal
string / numeric literals, boolean,
true; // Boolean value true
variables
sum; // Value of variable sum
('hello world', 54.2, true, x, this)
this; // A current object
▪ Arithmetic expressions
Arithmetic expressions evaluate to a
// Arithmetic Expressions
numeric value
x + 2;
▪ String expressions
// String Expressions
String expressions evaluate to a string
▪ Logical expressions
"Java" + "script";
// Logical Expressions
logical expressions evaluate to the
boolean value x < 8 && y > 1;

(true, false)
Comments in JS
Written part in the code that are ignored by the JavaScript engine

Comments:
// Declare Variables (line comment)
Are used to add information, warnings or
var x, y, z; // Var declired (line comment)
suggestions about the code, making a code easy
/* this is a block comment */
to interpret
x = 1;

▪ Single line comments /* this is a multiline

• // this is a line comment block comment */

• Also used to hide a line from the code y = 2;


// also used to hide a line of the code
▪ Multi-line comments (block comment) // var a = 'Java';
• /* this is a block comment */ // also used to hide a code block
• Also used to hide a code block /*
z = x + y;
var b = "Java" + " " + "script"; // quotes
*/
Understanding Basic
Flow
Objectives

01 Identifiers Learning Identifiers specifications in JavaScript program

02 Strings Use strings to store and manipulate text in a JavaScript program

03 Numbers Execute numeric operations in JavaScript using numbers


Objectives

04 Conditions Objective: Apply conditional statements in a JavaScript program

05 Loops Objective: Discover and execute loops in JavaScript

06 Jumps Objective: Learn and apply how to Jump out of a loop


Identifiers in JS
Character sequence identifying a variable, function, or property

Identifiers:
// Allowed Identifiers
Name of a variable, function, or property
abc; // starts with a letter
▪ Rules for legal identifiers
_abc; // starts with a underscore
1st character: a letter, underscore (_), dollar sign
$abc; // starts with a dollar sign
($)
Subsequent characters may be letters, digits, _ , $ অলীক; // starts with Unicode character

JavaScript uses the Unicode character set


▪ Case sensitivity first-name; // Hyphens not allowed
lowercase char are different from uppercase char first_name; // Underscores allowed
▪ Hyphens, Underscore
Hyphens not allowed, Underscore allowed FirstName; // Upper Camel Case example
▪ Upper Camel Case
FirstName, LastName // The most popular practice among JS coders :
▪ Lower Camel Case firstName; // lower Camel Case
firstName, lastName (popular practice)
Keywords in JS
Keywords are tokens that have special meaning in JavaScript (JavaScript Reserved Words)

arguments await break case catch class const continue

debugger default delete do else enum eval export

extends false finally for function if implements import

in instanceof interface let new null package private

protected public return static super switch this throw

true try typeof var void while with yield


Strings in JavaScript
Strings are used for storing and manipulating text

Strings: strings are zero or more characters


// Strings
inside quotes
str = "This is a 'Javascript' module!";
console.log(str);
▪ Quotes: single or double or one inside other
str = 'This is a "Javascript" module!';

▪ Length Property: returns the length of a console.log(str);

string str = 'It\'s fun to learn "Javascript"';


console.log(str);

▪ Escape Characters: \' \" \\ str = "It's fun to learn \"Javascript\"";


console.log(str);
▪ Breaking Lines: use of \ within a string and str = "This is a \
continue to the next line (not a good 'Javascript' module!";
practice, though) console.log(str);

console.log(str.length);
Strings in JavaScript
Strings are used for storing and manipulating text

String Methods: String methods help you to work


str = "It's good to know that you are good!";
with strings
console.log(str.indexOf("good"));
▪ indexOf: returns index of the first occurrence of a
console.log(str.indexOf("good",10));
specified text in a string (search starting position)
▪ lastIndexOf: returns index of the last occurrence
console.log(str.lastIndexOf("good"));
console.log(str.search("good"));
of a specified text in a string (search starting
position) console.log(str.slice(23));

▪ search: searches a string for a specified value console.log(str.slice(5, 9));

and returns the position of the match console.log(str.slice(-5));


▪ slice: extracts a part of a string and returns the console.log(str.slice(-5, -1));
extracted part in a new string (-ve index allowed) console.log(str.substring(5, 9));
▪ substring: extracts a part of a string and returns console.log(str.substring(23));
the extracted part in a new string (-ve index not console.log(str.substr(5,4));
allowed) console.log(str.substr(23));
▪ substr: same as slice, but the second parameter console.log(str.substr(-5,4));
here specifies the length of the extracted part
Strings in JavaScript
Strings are used for storing and manipulating text

String methods: String methods help you to


// String Methods
work with strings.
str = "It's good to know that you are good!";
console.log(str.replace("good", "bad"));
▪ replace: replaces a specified value with
console.log(str.slice(5, 9).toUpperCase());
another value in a string (this method is
var str1 = "This is";
case sensitive)
▪ toLowerCase / toUpperCase: converts a var str2 = "script";

string to lowercase/uppercase console.log(str1.concat(" Java", str2));

▪ concat: joins two or more strings (the +


operator does the similar operation) var str = " Javascript ";
▪ trim: removes whitespace from the console.log(str.trim());
beginning and end of a string
▪ padStart, padEnd: to support padding at str = "1";
the beginning and at the end of a string console.log(str.padStart(4,0));
console.log(str.padEnd(4,0));
Strings in JavaScript
Strings are used for storing and manipulating text

String methods: String methods help you to


// charAt
work with strings.
var str = "Javascript";
console.log(str.charAt(0));
▪ charAt / charCodeAt: returns character at
a specified index in a string/returns
// Access char
unicode of the character
▪ access [ ] (read only): same as charAt() console.log(str[0]);

but returns undefined instead of an empty


string // charCodeAt
▪ split: converts a String to an Array on console.log(str.charCodeAt(0));
separators
// split
var str = "J,a,v,a,s,c,r,i,p,t";
console.log(str.split(","));
Numbers in JavaScript
Number is a type in JS and there is only one type of number

Numbers and Strings:


var a = 1, b = 2;
console.log(a + b);
▪ Adding Numbers and Strings: + operator
var a = "1", b = "2";
can both add numbers and concatenate
console.log(a + b);
strings. Hene, the sequence in the
var a = 1, b = "2";
expression determines the result.
▪ Numeric Strings: JavaScript tries to console.log(a + b);

convert strings to numbers in numeric var a = 1, b = 2;

operations. console.log(a + b + ": sum");


▪ The concept of NaN , isNaN: Not a console.log("str:" + a + b);
Number (but NaN is of number type), console.log(1/"Javascript");
isNaN checks if a value is a number console.log(isNaN(1/"Javascript"));
▪ toString: converts number to string console.log(typeof NaN);
console.log(b.toString(10));
console.log(b.toString(2));
Numbers in JavaScript
Number is a type in JS and there is only one type of number

Numbers Methods:
// convert to String,Exponential,Num of digits
var b = 2.5
▪ toExponential: returns string in
console.log(b.toString());
exponential notation
▪ toFixed(n): returns string with n number of
console.log(b.toExponential());
console.log(b.toFixed(2));
decimals
▪ toPrecision(n): returns string, with length n console.log(b.toFixed(0));

▪ toString: converts number to string console.log(b.toPrecision(4));

▪ Number: returns number, from its // convert to Number


argument console.log(Number("2.5 "));
▪ parseFloat: returns a floating point number console.log(Number("Javascript"));
▪ parseInt: returns integer by parsing its // convert to Int, Floating point
argument console.log(parseInt("2.5 "));
console.log(parseInt("2.5 JS"));
console.log(parseFloat("2.5 JS"));
Conditional Statements
Decisions making: if, else

Conditional Statements: Conditional


if(numOfItems >= 12) numOfItems += 2;
statements are used to perform different
actions based on different conditions
if(numOfItems >= 12){

▪ if Statement
speakOut = "It's over a Dozen";
numOfItems += 2;
if (condition) {
// executed if condition is true }

}
▪ else Statement if(numOfItems >= 12){
if (condition) { speakOut = "It's over a Dozen";
// executed if condition is true numOfItems += 2;
} else { } else {
// executed if condition is false speakOut = "It's less than a Dozen";
} }
Conditional Statements
Decisions making: else if

Conditional Statements: Conditional


var dozen = 12;
statements are used to perform different
var offerPerDozen = 2, totalOffer = 0;
actions based on different conditions
var numOfItems = 12;

▪ else if Statement
if(numOfItems == dozen){
speakOut = "It's a Dozen";
if (condition 1) {
// executed if condition is true totalOffer = offerPerDozen;

} else if (condition 2) { } else if (numOfItems < dozen){

// executed if condition is false speakOut = "It's less than a Dozen";


} else { }else{
// executed if condition is false speakOut = "It's more than a Dozen";
} totalOffer = 2 * parseInt(numOfItems/dozen);
}
numOfItems += totalOffer;
console.log(speakOut,numOfItems,totalOffer);
Conditional Statements
Decisions making: switch

Conditional Statements: Conditional


switch (season) {
statements are used to perform different
case "summer":
actions based on different conditions
console.log('It\'s hot!');

▪ switch Statement
break;
case "winter":
switch(expression) {
case x: console.log('It\'s cold!');

// code block break;

break; case "spring":


case y: console.log('It\'s comfortable!');
// code block break;
break; default:
default: console.log('Not sure how I feel!');
// code block break;
} }
Loops in JavaScript
Loops: Loops can execute a block of code a number of times

Loops: Different types of loops in JavaScript


▪ for loops:
When number of
Loops through a block of code a number of
iterations is fixed,
times for loop
it is recommended
▪ for/in loops:
to use for loop.
Loops through the properties of an
Object/Array When number of
▪ forEach loops: iterations is not
call a function once for each array element fixed, it is while loop
▪ for/of loops: recommended to
Loops through the values of an iterable use while loop.
When number of
object iterations is not
▪ while loops: do while fixed & first
Loops through a block of code while loop iteration is must, it
condition is true is recommended to
▪ do/while loops: use do-while loop.
Same as while loop, with unconditional
first iteration
Loops in JavaScript
Loops: Loops can execute a block of code a number of times

for Loops: repeat with initialization, condition


// for loop
and increment
var sum = 0;

▪ for loops:
for (let i = 0; i < 10; i++) {
for (statement 1; statement 2; statement 3)
sum += i;
{
// code block to be executed }

}
▪ statement 1: console.log(sum);
sets a variable before the loop starts
▪ statement 2:
defines condition for the loop to run
▪ statement 3:
increment the initial variable
Loops in JavaScript
Loops: Loops can execute a block of code a number of times

for/in Loops: loops through the properties of


// for-in on an Object
an Object/Array
var person = {fname:"Dip",lname:"Roy",age:25};
var txt = "";
▪ for/in loops over Objects:
for (let x in person) {
for (key in object) {
txt += person[x] + " ";
// code block to be executed
} }
console.log(txt);

▪ for/in loops over Arrays: // for-in on an Array


for (variable in array) { var num = [23,12,0,2,9,10];
// code block to be executed var sum = 0;
} for (let i in num) {
sum += num[i];
}
console.log(sum);
Loops in JavaScript
Loops: Loops can execute a block of code a number of times

forEach Loops: call a function once for each


// forEach loop
array element
var num = [23,12,0,2,9,10];
var sum = 0, numbered = "";
▪ forEach loops over Arrays:
// either - with a function name:
someArray.forEach(someFunction);
num.forEach(numFunc);

▪ forEach callback function: function numFunc(value, index, array) {

function someFunction(value, index, array) { sum += value;

/* numbered += ++index +" ";


code block using value, index of }
the current element of array & the // or - without a function name:
array itself, which is someArray here num.forEach(function(value, index, array) {
*/ sum += value; numbered += ++index +" ";
} });
console.log(sum,numbered);
Loops in JavaScript
Loops: Loops can execute a block of code a number of times

for/of Loops: loops through the values of an


// for-of on an Array
iterable object
var num = [23,12,0,2,9,10];
var sum = 0;
▪ for/of loops over Array:
for (let n of num) {
for (variable of array) {
sum += n;
// code block to be executed
} }
console.log(sum);

▪ for/of loops over String: // for-of on a String


for (variable of string) { var txt = "abcdefgh";
// code block to be executed var letters = "";
} for (let x of txt) {
letters += x + ",";
}
console.log(letters);
Loops in JavaScript
Loops: Loops can execute a block of code a number of times

while Loops: loops through a block of code


// while loop
while condition is true
var txt = "";
var x = 1;
▪ while Loops:
while (x < 10) {
check condition before the loop
txt += x + " ";
while (condition) {
// code block to be executed x++;

} }
console.log(txt);
▪ do/while Loops : // do-while loop
check condition after the loop do {
do { txt += x + " ";
// code block to be executed x++;
} } while (x < 10);
while (condition); console.log(txt);
Jumps in Loops
Jump out of a loop & Jump over one iteration in a loop

Jumps: through a block of code while


// break out of & continue a loop
condition is true
var indices = "";

▪ break : "jumps out" of a loop if condition is


for (let i = 0; i < 10; i++) {
true
if (i == 3) {
loop {
if (condition) { break; } continue;

} }
if (i == 5) {
▪ continue : Jump over one iteration in a loop break;
if condition is true }
loop { indices += i + ",";
if (condition) { continue; } }
}
console.log(indices);
Recap
Understanding Basic Syntax

Fundamental Statements Values Operators Expression


s s
What is JavaScript, Syntax, Literals (Numbers, Arithmetic operators, Combination of
Where to write, How Specifications, Strings), Variables Assignment values, variables,
to see outputs etc. Multi-line, Blank (declare, assign operators, and operators
space etc. Values, values), var const let Comparison
Operators, operators, Logical
Expressions, operators
Keywords, Identifiers,
Comments
Recap
Understanding Basic Flow (Part 1)

Identifiers Strings Numbers

Rules for legal Properties and Adding Numbers


identifiers, case methods, Length, and Strings, numeric
sensitivity, hyphens, indexOf, lastIndexOf, Strings, the concept
underscore, upper search, slice, of NaN, toString,
camel case, lower substring, substr, toExponential,
camel case, unicode replace, toFixed, toPrecision,
character set toLowerCase, toString, parseFloat,
toUpperCase, concat, parseInt
trim, padStart,
padEnd, charAt,
charCodeAt, access,
split
Recap
Understanding Basic Flow (Part 2)

Conditions Loops Jumps

if Statement, else for loops, for/in Break out of a loop,


Statement, else if loops, forEach loops, continue a loop
Statement, switch for/of loops, while
Statement loops, do/while loops

You might also like