SlideShare una empresa de Scribd logo
1 de 67
Descargar para leer sin conexión
www.webstackacademy.com ‹#›
Types and
Statements
JavaScript
www.webstackacademy.com ‹#›

Reserve Keywords

Data Types

Statements
Table of Content
www.webstackacademy.com ‹#›www.webstackacademy.com ‹#›
Reserve Keywords
(JavaScript)
www.webstackacademy.com ‹#›
JS - Reserved Words
●
Any language has a set of words called vocabulary
●
JavaScript also has a set of keywords with special purpose
●
These special purpose keywords words are used to construct
statements as per language syntax and cannot be used as
JavaScript variables, functions, methods or object names
●
Therefore, also called reserve keywords
●
The limited set of keywords help us to write unlimited statements
www.webstackacademy.com ‹#›
Reserved Words
abstract debugger final instanceof protected throws
boolean default finally int public transient
break delete float interface return true
byte do for let short try
case double function long static typeof
catch else goto native super var
char enum if new switch void
class export implements null synchronized volatile
const extend import package this while
continue false in private throw with
*keywords in red color are removed from ECMA script 5/6
www.webstackacademy.com ‹#›www.webstackacademy.com ‹#›
Data Types
(JavaScript)
www.webstackacademy.com ‹#›
JS - Variables
●
Variables are container to store values
●
Name must start with
– A letter (a to z or A to Z)
– Underscore( _ )
– Or dollar( $ ) sign
●
After first letter we can use digits (0 to 9)
– Example: x1, y2, ball25, a2b
www.webstackacademy.com ‹#›
JS - Variables
●
JavaScript variables are case sensitive, for example
‘sum’ and ‘Sum’ and ‘SUM’ are different variables
Example :
var x = 6;
var y = 7;
var z = x+y;
www.webstackacademy.com ‹#›
JS - Data Types
●
There are two types of Data Types in JavaScript
– Primitive data type
– Non-primitive (reference) data type
Note : JavaScript is weakly typed. Every JavaScript variable has a data type , that type can change dynamically
www.webstackacademy.com ‹#›
Primitive data type
●
String
●
Number
●
Boolean
●
Null
●
Undefined
www.webstackacademy.com ‹#›
Primitive data type
(String)
●
String - A series of characters enclosed in quotation
marks either single quotation marks ( ' ) or double
quotation marks ( " )
Example :
var name = “Webstack Academy”;
var name = 'Webstack Academy';
www.webstackacademy.com ‹#›
Primitive data type
(Number)
●
All numbers are represented in IEEE 754-1985 double
precision floating point format (64 bit)
●
All integers can be represented in -253 to +253 range
●
Largest floating point magnitude can be ± 1.7976x10308
●
Smallest floating point magnitude can be ± 2.2250x10-308
●
If number exceeds the floating point range, its value will be
infinite
www.webstackacademy.com ‹#›
●
Floating point number is a formulaic representation which
approximates a real number
●
The most popular code for representing real numbers is called
the IEEE Floating-Point Standard
Sign Exponent Mantissa
Float (32 bits) Single Precision 1 bit 8 bits 23 bits
Double (64 bits) Double Precision 1 bit 11 bits 52 bits
Primitive data type
(Number)
Float : V = (-1)s * 2(E-127) * 1.F
Double : V = (-1)s * 2(E-1023) * 1.F
www.webstackacademy.com ‹#›
Primitive data type
(Number formats)
●
The integers can be represented in decimal,
hexadecimal, octal or binary
Example :
var a = 0x10; // Hexadecimal
var b = 010; // Octal number
var c = 0b10; // Binary
var num1 = 5; // Decimal
var num2 = -4.56; // Floating point
www.webstackacademy.com ‹#›
Primitive data type
(Number conversion)
●
Converting from string
Example :
var num1 = 0, num2 = 0;
// converting string to number
num1 = Number("35");
num2 = Number.parseInt(“237”);
www.webstackacademy.com ‹#›
Primitive data type
(Number conversion)
●
Converting to string
Example :
var str = “”; // Empty string
var num1 = 125;
// converting number to string
str = num1.toString();
www.webstackacademy.com ‹#›
Primitive data type
(Number – special values)
Special Value Cause Comparison
Infinity, -Infinity Number too large or
too small to represent
All infinity values compare equal to
each other
NaN (not-a-
number)
Undefined operation NaN never compare equal to
anything (even itself)
www.webstackacademy.com ‹#›
Primitive data type
(Number – special value checking)
Method Description
isNaN(number) To test if number is NaN
isFinite(number) To test if number is finite
www.webstackacademy.com ‹#›
Primitive data type
(Boolean)
●
Boolean data type is a logical true or false
Example :
var ans = true;
www.webstackacademy.com ‹#›
Primitive data type
(Null)
Example :
var num = null; // value is null but still type is an object.
●
In JavaScript the data type of null is an object
●
The null means empty value or nothing
www.webstackacademy.com ‹#›
Primitive data type
(Undefined)
Example :
var num; // undefined
●
A variable without a value is undefined
●
The type is object
www.webstackacademy.com ‹#›
Non-primitive data types
●
Array
●
Object
www.webstackacademy.com ‹#›
Arrays
●
Array represents group of similar values
●
Array items are separated by commas
●
Array can be declared as :
– var fruits = [“Apple” , “Mango”, “Orange”];
www.webstackacademy.com ‹#›
Objects
●
An Object is logically a collection of properties
●
Objects represents instance through which we can access
members
●
Object properties are written as name:value pairs separated by
comma
Example :
var student={ Name:“Mac”, City:“Banglore”, State:“Karnataka”};
www.webstackacademy.com ‹#›www.webstackacademy.com ‹#›
Statements
(JavaScript)
www.webstackacademy.com ‹#›
JS – Simple Statements
●
In JavaScript statements are instructions to be executed
by web browser (JavaScript core)
Example :
<script>
var y = 4, z = 7; // statement
var x = y + z; // statement
document.write("x = " + x);
</script>
www.webstackacademy.com ‹#›
JS – Compound Statements
Example :
<script>
...
if (num1 > num2) {
if (num1 > num3) {
document.write("Hello");
}
else {
document.write("World");
}
}
...
</script>
www.webstackacademy.com ‹#›
JS – Conditional Construct
Conditional
Constructs
Iteration
Selection
for
do while
while
if and its family
switch case
www.webstackacademy.com ‹#›
JS – Statements
(conditional - if)
Syntax :
if (condition) {
statement(s);
}
Example :
<script>
var num = 2;
if (num < 5) {
document.write("num < 5");
}
</script>
www.webstackacademy.com ‹#›
JS – Statements
(conditional : if-else)
Syntax :
if (condition) {
statement(s);
}
else {
statement(s);
}
www.webstackacademy.com ‹#›
JS – Statements
(conditional : if-else)
Example :
<script>
var num = 2;
if (num < 5) {
document.write("num is smaller than 5");
}
else {
document.write("num is greater than 5");
}
</script>
www.webstackacademy.com ‹#›
JS – Statements
(conditional : if-else if)
Syntax :
if (condition1) {
statement(s);
}
else if (condition2) {
statement(s);
}
else {
statement(s);
}
www.webstackacademy.com ‹#›
JS – Statements
(conditional : if-else if)
Example :
<script>
var num = 2;
if (num < 5) {
document.write("num is smaller than 5");
}
else if (num > 5) {
document.write("num is greater than 5");
}
else {
document.write("num is equal to 5");
}
</script>
www.webstackacademy.com ‹#›
JavaScript - Input
Method Description
prompt() It will asks the visitor to input Some information and
stores the information in a variable
confirm() Displays dialog box with two buttons ok and cancel
www.webstackacademy.com ‹#›
Example - confirm()
Example :
<script>
var x = confirm('Do you want to continue?');
if (x == true) {
alert("You have clicked on Ok Button.");
}
else {
alert("You have clicked on Cancel Button.");
}
</script>
www.webstackacademy.com ‹#›
Example - prompt()
Example :
<script>
var person = prompt("Please enter your name", "");
if (person != null) {
document.write("Hello " + person +
"! How are you today?");
}
</script>
www.webstackacademy.com ‹#›
Exercise
●
Write a JavaScript program to input Name, Address,
Phone Number and city using prompt() and display them
●
Write a JavaScript program to find area and perimeter of
rectangle
●
Write a JavaScript program to find simple interest
– Total Amount = principle * (1 + r * t)
www.webstackacademy.com ‹#›
Class Work
●
WAP to find the max of two numbers
●
WAP to print the grade for a given percentage
●
WAP to find the greatest of given 3 numbers
●
WAP to find the middle number (by value) of given 3
numbers
www.webstackacademy.com ‹#›
JS – Statements
(switch)
Syntax :
switch (expression) {
case exp1:
statement(s);
break;
case exp2:
statement(s);
break;
default:
statement(s);
}
expr
code
true
false
case1? break
case2?
default
code break
code break
true
false
www.webstackacademy.com ‹#›
JS – Statements
(switch)
<script>
var num = Number(prompt("Enter the number!", ""));
switch(num) {
case 10 : document.write("You have entered 10");
break;
case 20 : document.write("You have entered 20");
break;
default : document.write("Try again");
}
</script>
www.webstackacademy.com ‹#›
Class work
●
Write a simple calculator program
– Ask user to enter two numbers
– Ask user to enter operation (+, -, * or /)
– Perform operation and print result
www.webstackacademy.com ‹#›
JS – Statements
(while)
Syntax:
while (condition)
{
statement(s);
}
●
Controls the loop.
●
Evaluated before each
execution of loop body
false
true
cond?
code
www.webstackacademy.com ‹#›
JS – Statements
(while)
Example:
<script>
var iter = 0;
while(iter < 5)
{
document.write("Looped " + iter + " times <br>");
iter = iter + 1;
}
</script>
www.webstackacademy.com ‹#›
JS – Statements
(do - while)
Syntax:
do {
statement(s);
} while (condition);
●
Controls the loop.
●
Evaluated after each
execution of loop body
false
true
cond?
code
www.webstackacademy.com ‹#›
JS – Statements
(do-while)
Example:
<script>
var iter = 0;
do {
document.write("Looped " + iter + " times <br>");
iter = iter + 1;
} while ( iter < 5 );
</script>
www.webstackacademy.com ‹#›
JS – Statements
(for loop)
Syntax:
for (init-exp; loop-condition; post-eval-exp) {
statement(s);
}; ●
Controls the loop.
●
Evaluated before each
execution of loop body
false
true
cond?
code
www.webstackacademy.com ‹#›
JS – Statements
(for loop)
Execution path:
for (init-exp; loop-condition; post-eval-exp) {
statement(s);
};
1 2
3
4
www.webstackacademy.com ‹#›
JS – Statements
(for loop)
Example:
<script>
for (var iter = 0; iter < 5; iter = iter + 1) {
document.write("Looped " + iter + " times <br>");
}
</script>
www.webstackacademy.com ‹#›
JS – Statements
(for-in loop)
●
“for-in” loop is used to iterate over enumerable
properties of an object
Syntax:
for (variable in object) {
statement(s);
}
www.webstackacademy.com ‹#›
JS – Statements
(for-in loop)
Example:
<script>
var person = { firstName:”Rajani”, lastName:”Kanth”,
profession:”Actor” };
for (var x in person) {
document.write(person[x] + “ “);
}
</script>
www.webstackacademy.com ‹#›
JS – Statements
(for-in loop)
●
loop only iterates over enumerable properties
●
“for-in” loop iterates over the properties of an object in an
arbitrary order
●
“for-in” should not be used to iterate over an Array where
the index order is important
www.webstackacademy.com ‹#›
JS – Statements
(for-of loop)
●
“for-of” loop is used to iterate over iterate-able object
●
“for-of” loop is not part of ECMA script
Syntax:
for (variable of object) {
statement(s);
}
www.webstackacademy.com ‹#›
JS – Statements
(for-of loop)
Example:
<script>
var array = [1, 2, 3, 4, 5];
for (var x of array) {
document.write(x + “ “);
}
</script>
www.webstackacademy.com ‹#›
Class Work
●
W.A.P to print the power of two series using for loop
– 21, 22, 23, 24, 25 ...
●
W.A.P to print the power of N series using Loops
– N1, N2, N3, N4, N5 ...
●
W.A.P to multiply 2 numbers without multiplication operator
●
W.A.P to check whether a number is palindrome or not
www.webstackacademy.com ‹#›
Class Work - Pattern
●
Read total (n) number of pattern chars in a line (number
should be “odd”)
●
Read number (m) of pattern char to be printed in the
middle of line (“odd” number)
●
Print the line with two different pattern chars
●
Example – Let's say two types of pattern chars '$' and
'*' to be printed in a line. Total number of chars to be
printed in a line are 9. Three '*' to be printed in middle of
line.
●
Output ==> $$$* * *$$$
www.webstackacademy.com ‹#›
Class Work - Pattern
●
Based on previous example print following pyramid
*
* * *
* * * * *
* * * * * * *
www.webstackacademy.com ‹#›
Class Work - Pattern
●
Based on previous example print following rhombus
*
* * *
* * * * *
* * * * * * *
* * * * *
* * *
*
www.webstackacademy.com ‹#›
JS – Statements
(break)
●
A break statement shall appear only in “switch body” or “loop
body”
●
“break” is used to exit the loop, the statements appearing after
break in the loop will be skipped
●
“break” without label exits/‘jumps out of’ containing loop
●
“break” with label reference jumps out of any block
www.webstackacademy.com ‹#›
JS – Statements
(break)
Syntax:
while (condition) {
conditional statement
break;
}
false
true
loop
cond?
code block
cond?
false
break?
true
www.webstackacademy.com ‹#›
JS – Statements
(break)
<script>
for (var iter = 0; iter < 10; iter = iter + 1) {
if (iter == 5) {
break;
}
document.write("<br>iter = " + iter);
}
</script>
www.webstackacademy.com ‹#›
JS – Statements
(break with label)
Syntax:
outer_loop:
for (condition) {
inner_loop:
for(condition) {
conditional statement
break outer_loop; // jump out of outer_loop
}
}
www.webstackacademy.com ‹#›
JS – Statements
(continue)
●
A continue statement causes a jump to the loop-continuation
portion, that is, to the end of the loop body
●
The execution of code appearing after the continue will be
skipped
●
Can be used in any type of multi iteration loop
www.webstackacademy.com ‹#›
JS – Statements
(continue)
Syntax:
while (condition) {
conditional statement
continue;
}
false
true
loop
cond?
code block
cond?
false
continue?
true
code block
www.webstackacademy.com ‹#›
JS – Statements
(continue)
<script>
for (var iter = 0; iter < 10; iter = iter + 1) {
if (iter == 5) {
continue;
}
document.write("<br>iter = " + iter);
}
</script>
www.webstackacademy.com ‹#›
JS – Statements
(continue with label)
Syntax:
outer_loop:
for (condition) {
inner_loop:
for(condition) {
conditional statement
continue outer_loop; // continue from outer_loop
}
}
www.webstackacademy.com ‹#›
JS – Statements
(goto)
●
This keyword has been removed from ECMA script 5/6
●
“goto” keyword is is not recommended to use
●
Use break with label if necessary
www.webstackacademy.com ‹#›
Web Stack Academy (P) Ltd
#83, Farah Towers,
1st floor,MG Road,
Bangalore – 560001
M: +91-80-4128 9576
T: +91-98862 69112
E: info@www.webstackacademy.com

Más contenido relacionado

La actualidad más candente

JavaScript - Chapter 10 - Strings and Arrays
 JavaScript - Chapter 10 - Strings and Arrays JavaScript - Chapter 10 - Strings and Arrays
JavaScript - Chapter 10 - Strings and ArraysWebStackAcademy
 
JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...
JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...
JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...Edureka!
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to JavascriptAmit Tyagi
 
JavaScript - Chapter 11 - Events
 JavaScript - Chapter 11 - Events  JavaScript - Chapter 11 - Events
JavaScript - Chapter 11 - Events WebStackAcademy
 
JavaScript - Chapter 8 - Objects
 JavaScript - Chapter 8 - Objects JavaScript - Chapter 8 - Objects
JavaScript - Chapter 8 - ObjectsWebStackAcademy
 
JavaScript - Chapter 6 - Basic Functions
 JavaScript - Chapter 6 - Basic Functions JavaScript - Chapter 6 - Basic Functions
JavaScript - Chapter 6 - Basic FunctionsWebStackAcademy
 
jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...
jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...
jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...Edureka!
 
Datatype in JavaScript
Datatype in JavaScriptDatatype in JavaScript
Datatype in JavaScriptRajat Saxena
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced JavascriptAdieu
 

La actualidad más candente (20)

JavaScript - Chapter 10 - Strings and Arrays
 JavaScript - Chapter 10 - Strings and Arrays JavaScript - Chapter 10 - Strings and Arrays
JavaScript - Chapter 10 - Strings and Arrays
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
 
Javascript 101
Javascript 101Javascript 101
Javascript 101
 
JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...
JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...
JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...
 
Java script arrays
Java script arraysJava script arrays
Java script arrays
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to Javascript
 
JavaScript Data Types
JavaScript Data TypesJavaScript Data Types
JavaScript Data Types
 
JavaScript - Chapter 11 - Events
 JavaScript - Chapter 11 - Events  JavaScript - Chapter 11 - Events
JavaScript - Chapter 11 - Events
 
Javascript basics
Javascript basicsJavascript basics
Javascript basics
 
JavaScript - Chapter 8 - Objects
 JavaScript - Chapter 8 - Objects JavaScript - Chapter 8 - Objects
JavaScript - Chapter 8 - Objects
 
Javascript essentials
Javascript essentialsJavascript essentials
Javascript essentials
 
JavaScript - Chapter 6 - Basic Functions
 JavaScript - Chapter 6 - Basic Functions JavaScript - Chapter 6 - Basic Functions
JavaScript - Chapter 6 - Basic Functions
 
Javascript
JavascriptJavascript
Javascript
 
Basics of JavaScript
Basics of JavaScriptBasics of JavaScript
Basics of JavaScript
 
jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...
jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...
jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...
 
jQuery Ajax
jQuery AjaxjQuery Ajax
jQuery Ajax
 
Java script
Java scriptJava script
Java script
 
Datatype in JavaScript
Datatype in JavaScriptDatatype in JavaScript
Datatype in JavaScript
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced Javascript
 
Functions in javascript
Functions in javascriptFunctions in javascript
Functions in javascript
 

Similar a JavaScript - Chapter 4 - Types and Statements

Maintainable JavaScript
Maintainable JavaScriptMaintainable JavaScript
Maintainable JavaScriptNicholas Zakas
 
Basics of Javascript
Basics of JavascriptBasics of Javascript
Basics of JavascriptUniverse41
 
IT2255 Web Essentials - Unit III Client-Side Processing and Scripting
IT2255 Web Essentials - Unit III Client-Side Processing and ScriptingIT2255 Web Essentials - Unit III Client-Side Processing and Scripting
IT2255 Web Essentials - Unit III Client-Side Processing and Scriptingpkaviya
 
Javascript - Break statement, type conversion, regular expression
Javascript - Break statement, type conversion, regular expressionJavascript - Break statement, type conversion, regular expression
Javascript - Break statement, type conversion, regular expressionShivam gupta
 
Java script final presentation
Java script final presentationJava script final presentation
Java script final presentationAdhoura Academy
 
Computational Problem Solving 004 (1).pptx (1).pdf
Computational Problem Solving 004 (1).pptx (1).pdfComputational Problem Solving 004 (1).pptx (1).pdf
Computational Problem Solving 004 (1).pptx (1).pdfSadhikaPolamarasetti1
 
Unit II- Java Script, DOM JQuery (2).pptx
Unit II- Java Script, DOM JQuery (2).pptxUnit II- Java Script, DOM JQuery (2).pptx
Unit II- Java Script, DOM JQuery (2).pptxSiddheshMhatre21
 
Programming in scala - 1
Programming in scala - 1Programming in scala - 1
Programming in scala - 1Mukesh Kumar
 
Ch08 - Manipulating Data in Strings and Arrays
Ch08 - Manipulating Data in Strings and ArraysCh08 - Manipulating Data in Strings and Arrays
Ch08 - Manipulating Data in Strings and Arraysdcomfort6819
 
Javascript part1
Javascript part1Javascript part1
Javascript part1Raghu nath
 
BITM3730 10-17.pptx
BITM3730 10-17.pptxBITM3730 10-17.pptx
BITM3730 10-17.pptxMattMarino13
 
JCConf 2021 - Java17: The Next LTS
JCConf 2021 - Java17: The Next LTSJCConf 2021 - Java17: The Next LTS
JCConf 2021 - Java17: The Next LTSJoseph Kuo
 

Similar a JavaScript - Chapter 4 - Types and Statements (20)

Maintainable JavaScript
Maintainable JavaScriptMaintainable JavaScript
Maintainable JavaScript
 
Basics of Javascript
Basics of JavascriptBasics of Javascript
Basics of Javascript
 
JavaScript.pptx
JavaScript.pptxJavaScript.pptx
JavaScript.pptx
 
IT2255 Web Essentials - Unit III Client-Side Processing and Scripting
IT2255 Web Essentials - Unit III Client-Side Processing and ScriptingIT2255 Web Essentials - Unit III Client-Side Processing and Scripting
IT2255 Web Essentials - Unit III Client-Side Processing and Scripting
 
Javascript - Break statement, type conversion, regular expression
Javascript - Break statement, type conversion, regular expressionJavascript - Break statement, type conversion, regular expression
Javascript - Break statement, type conversion, regular expression
 
Variables
VariablesVariables
Variables
 
Java script final presentation
Java script final presentationJava script final presentation
Java script final presentation
 
Javascript
JavascriptJavascript
Javascript
 
Computational Problem Solving 004 (1).pptx (1).pdf
Computational Problem Solving 004 (1).pptx (1).pdfComputational Problem Solving 004 (1).pptx (1).pdf
Computational Problem Solving 004 (1).pptx (1).pdf
 
Unit II- Java Script, DOM JQuery (2).pptx
Unit II- Java Script, DOM JQuery (2).pptxUnit II- Java Script, DOM JQuery (2).pptx
Unit II- Java Script, DOM JQuery (2).pptx
 
Einführung in TypeScript
Einführung in TypeScriptEinführung in TypeScript
Einführung in TypeScript
 
Java script basics
Java script basicsJava script basics
Java script basics
 
Beyond java8
Beyond java8Beyond java8
Beyond java8
 
Programming in scala - 1
Programming in scala - 1Programming in scala - 1
Programming in scala - 1
 
Dart workshop
Dart workshopDart workshop
Dart workshop
 
Ch08 - Manipulating Data in Strings and Arrays
Ch08 - Manipulating Data in Strings and ArraysCh08 - Manipulating Data in Strings and Arrays
Ch08 - Manipulating Data in Strings and Arrays
 
Javascript part1
Javascript part1Javascript part1
Javascript part1
 
BITM3730 10-17.pptx
BITM3730 10-17.pptxBITM3730 10-17.pptx
BITM3730 10-17.pptx
 
JavaScript.pptx
JavaScript.pptxJavaScript.pptx
JavaScript.pptx
 
JCConf 2021 - Java17: The Next LTS
JCConf 2021 - Java17: The Next LTSJCConf 2021 - Java17: The Next LTS
JCConf 2021 - Java17: The Next LTS
 

Más de WebStackAcademy

Career Building in AI - Technologies, Trends and Opportunities
Career Building in AI - Technologies, Trends and OpportunitiesCareer Building in AI - Technologies, Trends and Opportunities
Career Building in AI - Technologies, Trends and OpportunitiesWebStackAcademy
 
Webstack Academy - Internship Kick Off
Webstack Academy - Internship Kick OffWebstack Academy - Internship Kick Off
Webstack Academy - Internship Kick OffWebStackAcademy
 
Front-End Developer's Career Roadmap
Front-End Developer's Career RoadmapFront-End Developer's Career Roadmap
Front-End Developer's Career RoadmapWebStackAcademy
 
Angular - Chapter 9 - Authentication and Authorization
Angular - Chapter 9 - Authentication and AuthorizationAngular - Chapter 9 - Authentication and Authorization
Angular - Chapter 9 - Authentication and AuthorizationWebStackAcademy
 
Angular - Chapter 7 - HTTP Services
Angular - Chapter 7 - HTTP ServicesAngular - Chapter 7 - HTTP Services
Angular - Chapter 7 - HTTP ServicesWebStackAcademy
 
Angular - Chapter 6 - Firebase Integration
Angular - Chapter 6 - Firebase IntegrationAngular - Chapter 6 - Firebase Integration
Angular - Chapter 6 - Firebase IntegrationWebStackAcademy
 
Angular - Chapter 5 - Directives
 Angular - Chapter 5 - Directives Angular - Chapter 5 - Directives
Angular - Chapter 5 - DirectivesWebStackAcademy
 
Angular - Chapter 4 - Data and Event Handling
 Angular - Chapter 4 - Data and Event Handling Angular - Chapter 4 - Data and Event Handling
Angular - Chapter 4 - Data and Event HandlingWebStackAcademy
 
Angular - Chapter 3 - Components
Angular - Chapter 3 - ComponentsAngular - Chapter 3 - Components
Angular - Chapter 3 - ComponentsWebStackAcademy
 
Angular - Chapter 2 - TypeScript Programming
Angular - Chapter 2 - TypeScript Programming  Angular - Chapter 2 - TypeScript Programming
Angular - Chapter 2 - TypeScript Programming WebStackAcademy
 
Angular - Chapter 1 - Introduction
 Angular - Chapter 1 - Introduction Angular - Chapter 1 - Introduction
Angular - Chapter 1 - IntroductionWebStackAcademy
 
JavaScript - Chapter 15 - Debugging Techniques
 JavaScript - Chapter 15 - Debugging Techniques JavaScript - Chapter 15 - Debugging Techniques
JavaScript - Chapter 15 - Debugging TechniquesWebStackAcademy
 
JavaScript - Chapter 14 - Form Handling
 JavaScript - Chapter 14 - Form Handling   JavaScript - Chapter 14 - Form Handling
JavaScript - Chapter 14 - Form Handling WebStackAcademy
 
JavaScript - Chapter 13 - Browser Object Model(BOM)
JavaScript - Chapter 13 - Browser Object Model(BOM)JavaScript - Chapter 13 - Browser Object Model(BOM)
JavaScript - Chapter 13 - Browser Object Model(BOM)WebStackAcademy
 
JavaScript - Chapter 12 - Document Object Model
  JavaScript - Chapter 12 - Document Object Model  JavaScript - Chapter 12 - Document Object Model
JavaScript - Chapter 12 - Document Object ModelWebStackAcademy
 
JavaScript - Chapter 3 - Introduction
 JavaScript - Chapter 3 - Introduction JavaScript - Chapter 3 - Introduction
JavaScript - Chapter 3 - IntroductionWebStackAcademy
 
JavaScript - Chapter 1 - Problem Solving
 JavaScript - Chapter 1 - Problem Solving JavaScript - Chapter 1 - Problem Solving
JavaScript - Chapter 1 - Problem SolvingWebStackAcademy
 
jQuery - Chapter 4 - DOM Handling
jQuery - Chapter 4 - DOM Handling jQuery - Chapter 4 - DOM Handling
jQuery - Chapter 4 - DOM Handling WebStackAcademy
 
jQuery - Chapter 5 - Ajax
jQuery - Chapter 5 -  AjaxjQuery - Chapter 5 -  Ajax
jQuery - Chapter 5 - AjaxWebStackAcademy
 
jQuery - Chapter 3 - Effects
jQuery - Chapter 3 - Effects  jQuery - Chapter 3 - Effects
jQuery - Chapter 3 - Effects WebStackAcademy
 

Más de WebStackAcademy (20)

Career Building in AI - Technologies, Trends and Opportunities
Career Building in AI - Technologies, Trends and OpportunitiesCareer Building in AI - Technologies, Trends and Opportunities
Career Building in AI - Technologies, Trends and Opportunities
 
Webstack Academy - Internship Kick Off
Webstack Academy - Internship Kick OffWebstack Academy - Internship Kick Off
Webstack Academy - Internship Kick Off
 
Front-End Developer's Career Roadmap
Front-End Developer's Career RoadmapFront-End Developer's Career Roadmap
Front-End Developer's Career Roadmap
 
Angular - Chapter 9 - Authentication and Authorization
Angular - Chapter 9 - Authentication and AuthorizationAngular - Chapter 9 - Authentication and Authorization
Angular - Chapter 9 - Authentication and Authorization
 
Angular - Chapter 7 - HTTP Services
Angular - Chapter 7 - HTTP ServicesAngular - Chapter 7 - HTTP Services
Angular - Chapter 7 - HTTP Services
 
Angular - Chapter 6 - Firebase Integration
Angular - Chapter 6 - Firebase IntegrationAngular - Chapter 6 - Firebase Integration
Angular - Chapter 6 - Firebase Integration
 
Angular - Chapter 5 - Directives
 Angular - Chapter 5 - Directives Angular - Chapter 5 - Directives
Angular - Chapter 5 - Directives
 
Angular - Chapter 4 - Data and Event Handling
 Angular - Chapter 4 - Data and Event Handling Angular - Chapter 4 - Data and Event Handling
Angular - Chapter 4 - Data and Event Handling
 
Angular - Chapter 3 - Components
Angular - Chapter 3 - ComponentsAngular - Chapter 3 - Components
Angular - Chapter 3 - Components
 
Angular - Chapter 2 - TypeScript Programming
Angular - Chapter 2 - TypeScript Programming  Angular - Chapter 2 - TypeScript Programming
Angular - Chapter 2 - TypeScript Programming
 
Angular - Chapter 1 - Introduction
 Angular - Chapter 1 - Introduction Angular - Chapter 1 - Introduction
Angular - Chapter 1 - Introduction
 
JavaScript - Chapter 15 - Debugging Techniques
 JavaScript - Chapter 15 - Debugging Techniques JavaScript - Chapter 15 - Debugging Techniques
JavaScript - Chapter 15 - Debugging Techniques
 
JavaScript - Chapter 14 - Form Handling
 JavaScript - Chapter 14 - Form Handling   JavaScript - Chapter 14 - Form Handling
JavaScript - Chapter 14 - Form Handling
 
JavaScript - Chapter 13 - Browser Object Model(BOM)
JavaScript - Chapter 13 - Browser Object Model(BOM)JavaScript - Chapter 13 - Browser Object Model(BOM)
JavaScript - Chapter 13 - Browser Object Model(BOM)
 
JavaScript - Chapter 12 - Document Object Model
  JavaScript - Chapter 12 - Document Object Model  JavaScript - Chapter 12 - Document Object Model
JavaScript - Chapter 12 - Document Object Model
 
JavaScript - Chapter 3 - Introduction
 JavaScript - Chapter 3 - Introduction JavaScript - Chapter 3 - Introduction
JavaScript - Chapter 3 - Introduction
 
JavaScript - Chapter 1 - Problem Solving
 JavaScript - Chapter 1 - Problem Solving JavaScript - Chapter 1 - Problem Solving
JavaScript - Chapter 1 - Problem Solving
 
jQuery - Chapter 4 - DOM Handling
jQuery - Chapter 4 - DOM Handling jQuery - Chapter 4 - DOM Handling
jQuery - Chapter 4 - DOM Handling
 
jQuery - Chapter 5 - Ajax
jQuery - Chapter 5 -  AjaxjQuery - Chapter 5 -  Ajax
jQuery - Chapter 5 - Ajax
 
jQuery - Chapter 3 - Effects
jQuery - Chapter 3 - Effects  jQuery - Chapter 3 - Effects
jQuery - Chapter 3 - Effects
 

Último

KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 

Último (20)

KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 

JavaScript - Chapter 4 - Types and Statements

  • 4. www.webstackacademy.com ‹#› JS - Reserved Words ● Any language has a set of words called vocabulary ● JavaScript also has a set of keywords with special purpose ● These special purpose keywords words are used to construct statements as per language syntax and cannot be used as JavaScript variables, functions, methods or object names ● Therefore, also called reserve keywords ● The limited set of keywords help us to write unlimited statements
  • 5. www.webstackacademy.com ‹#› Reserved Words abstract debugger final instanceof protected throws boolean default finally int public transient break delete float interface return true byte do for let short try case double function long static typeof catch else goto native super var char enum if new switch void class export implements null synchronized volatile const extend import package this while continue false in private throw with *keywords in red color are removed from ECMA script 5/6
  • 7. www.webstackacademy.com ‹#› JS - Variables ● Variables are container to store values ● Name must start with – A letter (a to z or A to Z) – Underscore( _ ) – Or dollar( $ ) sign ● After first letter we can use digits (0 to 9) – Example: x1, y2, ball25, a2b
  • 8. www.webstackacademy.com ‹#› JS - Variables ● JavaScript variables are case sensitive, for example ‘sum’ and ‘Sum’ and ‘SUM’ are different variables Example : var x = 6; var y = 7; var z = x+y;
  • 9. www.webstackacademy.com ‹#› JS - Data Types ● There are two types of Data Types in JavaScript – Primitive data type – Non-primitive (reference) data type Note : JavaScript is weakly typed. Every JavaScript variable has a data type , that type can change dynamically
  • 10. www.webstackacademy.com ‹#› Primitive data type ● String ● Number ● Boolean ● Null ● Undefined
  • 11. www.webstackacademy.com ‹#› Primitive data type (String) ● String - A series of characters enclosed in quotation marks either single quotation marks ( ' ) or double quotation marks ( " ) Example : var name = “Webstack Academy”; var name = 'Webstack Academy';
  • 12. www.webstackacademy.com ‹#› Primitive data type (Number) ● All numbers are represented in IEEE 754-1985 double precision floating point format (64 bit) ● All integers can be represented in -253 to +253 range ● Largest floating point magnitude can be ± 1.7976x10308 ● Smallest floating point magnitude can be ± 2.2250x10-308 ● If number exceeds the floating point range, its value will be infinite
  • 13. www.webstackacademy.com ‹#› ● Floating point number is a formulaic representation which approximates a real number ● The most popular code for representing real numbers is called the IEEE Floating-Point Standard Sign Exponent Mantissa Float (32 bits) Single Precision 1 bit 8 bits 23 bits Double (64 bits) Double Precision 1 bit 11 bits 52 bits Primitive data type (Number) Float : V = (-1)s * 2(E-127) * 1.F Double : V = (-1)s * 2(E-1023) * 1.F
  • 14. www.webstackacademy.com ‹#› Primitive data type (Number formats) ● The integers can be represented in decimal, hexadecimal, octal or binary Example : var a = 0x10; // Hexadecimal var b = 010; // Octal number var c = 0b10; // Binary var num1 = 5; // Decimal var num2 = -4.56; // Floating point
  • 15. www.webstackacademy.com ‹#› Primitive data type (Number conversion) ● Converting from string Example : var num1 = 0, num2 = 0; // converting string to number num1 = Number("35"); num2 = Number.parseInt(“237”);
  • 16. www.webstackacademy.com ‹#› Primitive data type (Number conversion) ● Converting to string Example : var str = “”; // Empty string var num1 = 125; // converting number to string str = num1.toString();
  • 17. www.webstackacademy.com ‹#› Primitive data type (Number – special values) Special Value Cause Comparison Infinity, -Infinity Number too large or too small to represent All infinity values compare equal to each other NaN (not-a- number) Undefined operation NaN never compare equal to anything (even itself)
  • 18. www.webstackacademy.com ‹#› Primitive data type (Number – special value checking) Method Description isNaN(number) To test if number is NaN isFinite(number) To test if number is finite
  • 19. www.webstackacademy.com ‹#› Primitive data type (Boolean) ● Boolean data type is a logical true or false Example : var ans = true;
  • 20. www.webstackacademy.com ‹#› Primitive data type (Null) Example : var num = null; // value is null but still type is an object. ● In JavaScript the data type of null is an object ● The null means empty value or nothing
  • 21. www.webstackacademy.com ‹#› Primitive data type (Undefined) Example : var num; // undefined ● A variable without a value is undefined ● The type is object
  • 23. www.webstackacademy.com ‹#› Arrays ● Array represents group of similar values ● Array items are separated by commas ● Array can be declared as : – var fruits = [“Apple” , “Mango”, “Orange”];
  • 24. www.webstackacademy.com ‹#› Objects ● An Object is logically a collection of properties ● Objects represents instance through which we can access members ● Object properties are written as name:value pairs separated by comma Example : var student={ Name:“Mac”, City:“Banglore”, State:“Karnataka”};
  • 26. www.webstackacademy.com ‹#› JS – Simple Statements ● In JavaScript statements are instructions to be executed by web browser (JavaScript core) Example : <script> var y = 4, z = 7; // statement var x = y + z; // statement document.write("x = " + x); </script>
  • 27. www.webstackacademy.com ‹#› JS – Compound Statements Example : <script> ... if (num1 > num2) { if (num1 > num3) { document.write("Hello"); } else { document.write("World"); } } ... </script>
  • 28. www.webstackacademy.com ‹#› JS – Conditional Construct Conditional Constructs Iteration Selection for do while while if and its family switch case
  • 29. www.webstackacademy.com ‹#› JS – Statements (conditional - if) Syntax : if (condition) { statement(s); } Example : <script> var num = 2; if (num < 5) { document.write("num < 5"); } </script>
  • 30. www.webstackacademy.com ‹#› JS – Statements (conditional : if-else) Syntax : if (condition) { statement(s); } else { statement(s); }
  • 31. www.webstackacademy.com ‹#› JS – Statements (conditional : if-else) Example : <script> var num = 2; if (num < 5) { document.write("num is smaller than 5"); } else { document.write("num is greater than 5"); } </script>
  • 32. www.webstackacademy.com ‹#› JS – Statements (conditional : if-else if) Syntax : if (condition1) { statement(s); } else if (condition2) { statement(s); } else { statement(s); }
  • 33. www.webstackacademy.com ‹#› JS – Statements (conditional : if-else if) Example : <script> var num = 2; if (num < 5) { document.write("num is smaller than 5"); } else if (num > 5) { document.write("num is greater than 5"); } else { document.write("num is equal to 5"); } </script>
  • 34. www.webstackacademy.com ‹#› JavaScript - Input Method Description prompt() It will asks the visitor to input Some information and stores the information in a variable confirm() Displays dialog box with two buttons ok and cancel
  • 35. www.webstackacademy.com ‹#› Example - confirm() Example : <script> var x = confirm('Do you want to continue?'); if (x == true) { alert("You have clicked on Ok Button."); } else { alert("You have clicked on Cancel Button."); } </script>
  • 36. www.webstackacademy.com ‹#› Example - prompt() Example : <script> var person = prompt("Please enter your name", ""); if (person != null) { document.write("Hello " + person + "! How are you today?"); } </script>
  • 37. www.webstackacademy.com ‹#› Exercise ● Write a JavaScript program to input Name, Address, Phone Number and city using prompt() and display them ● Write a JavaScript program to find area and perimeter of rectangle ● Write a JavaScript program to find simple interest – Total Amount = principle * (1 + r * t)
  • 38. www.webstackacademy.com ‹#› Class Work ● WAP to find the max of two numbers ● WAP to print the grade for a given percentage ● WAP to find the greatest of given 3 numbers ● WAP to find the middle number (by value) of given 3 numbers
  • 39. www.webstackacademy.com ‹#› JS – Statements (switch) Syntax : switch (expression) { case exp1: statement(s); break; case exp2: statement(s); break; default: statement(s); } expr code true false case1? break case2? default code break code break true false
  • 40. www.webstackacademy.com ‹#› JS – Statements (switch) <script> var num = Number(prompt("Enter the number!", "")); switch(num) { case 10 : document.write("You have entered 10"); break; case 20 : document.write("You have entered 20"); break; default : document.write("Try again"); } </script>
  • 41. www.webstackacademy.com ‹#› Class work ● Write a simple calculator program – Ask user to enter two numbers – Ask user to enter operation (+, -, * or /) – Perform operation and print result
  • 42. www.webstackacademy.com ‹#› JS – Statements (while) Syntax: while (condition) { statement(s); } ● Controls the loop. ● Evaluated before each execution of loop body false true cond? code
  • 43. www.webstackacademy.com ‹#› JS – Statements (while) Example: <script> var iter = 0; while(iter < 5) { document.write("Looped " + iter + " times <br>"); iter = iter + 1; } </script>
  • 44. www.webstackacademy.com ‹#› JS – Statements (do - while) Syntax: do { statement(s); } while (condition); ● Controls the loop. ● Evaluated after each execution of loop body false true cond? code
  • 45. www.webstackacademy.com ‹#› JS – Statements (do-while) Example: <script> var iter = 0; do { document.write("Looped " + iter + " times <br>"); iter = iter + 1; } while ( iter < 5 ); </script>
  • 46. www.webstackacademy.com ‹#› JS – Statements (for loop) Syntax: for (init-exp; loop-condition; post-eval-exp) { statement(s); }; ● Controls the loop. ● Evaluated before each execution of loop body false true cond? code
  • 47. www.webstackacademy.com ‹#› JS – Statements (for loop) Execution path: for (init-exp; loop-condition; post-eval-exp) { statement(s); }; 1 2 3 4
  • 48. www.webstackacademy.com ‹#› JS – Statements (for loop) Example: <script> for (var iter = 0; iter < 5; iter = iter + 1) { document.write("Looped " + iter + " times <br>"); } </script>
  • 49. www.webstackacademy.com ‹#› JS – Statements (for-in loop) ● “for-in” loop is used to iterate over enumerable properties of an object Syntax: for (variable in object) { statement(s); }
  • 50. www.webstackacademy.com ‹#› JS – Statements (for-in loop) Example: <script> var person = { firstName:”Rajani”, lastName:”Kanth”, profession:”Actor” }; for (var x in person) { document.write(person[x] + “ “); } </script>
  • 51. www.webstackacademy.com ‹#› JS – Statements (for-in loop) ● loop only iterates over enumerable properties ● “for-in” loop iterates over the properties of an object in an arbitrary order ● “for-in” should not be used to iterate over an Array where the index order is important
  • 52. www.webstackacademy.com ‹#› JS – Statements (for-of loop) ● “for-of” loop is used to iterate over iterate-able object ● “for-of” loop is not part of ECMA script Syntax: for (variable of object) { statement(s); }
  • 53. www.webstackacademy.com ‹#› JS – Statements (for-of loop) Example: <script> var array = [1, 2, 3, 4, 5]; for (var x of array) { document.write(x + “ “); } </script>
  • 54. www.webstackacademy.com ‹#› Class Work ● W.A.P to print the power of two series using for loop – 21, 22, 23, 24, 25 ... ● W.A.P to print the power of N series using Loops – N1, N2, N3, N4, N5 ... ● W.A.P to multiply 2 numbers without multiplication operator ● W.A.P to check whether a number is palindrome or not
  • 55. www.webstackacademy.com ‹#› Class Work - Pattern ● Read total (n) number of pattern chars in a line (number should be “odd”) ● Read number (m) of pattern char to be printed in the middle of line (“odd” number) ● Print the line with two different pattern chars ● Example – Let's say two types of pattern chars '$' and '*' to be printed in a line. Total number of chars to be printed in a line are 9. Three '*' to be printed in middle of line. ● Output ==> $$$* * *$$$
  • 56. www.webstackacademy.com ‹#› Class Work - Pattern ● Based on previous example print following pyramid * * * * * * * * * * * * * * * *
  • 57. www.webstackacademy.com ‹#› Class Work - Pattern ● Based on previous example print following rhombus * * * * * * * * * * * * * * * * * * * * * * * * *
  • 58. www.webstackacademy.com ‹#› JS – Statements (break) ● A break statement shall appear only in “switch body” or “loop body” ● “break” is used to exit the loop, the statements appearing after break in the loop will be skipped ● “break” without label exits/‘jumps out of’ containing loop ● “break” with label reference jumps out of any block
  • 59. www.webstackacademy.com ‹#› JS – Statements (break) Syntax: while (condition) { conditional statement break; } false true loop cond? code block cond? false break? true
  • 60. www.webstackacademy.com ‹#› JS – Statements (break) <script> for (var iter = 0; iter < 10; iter = iter + 1) { if (iter == 5) { break; } document.write("<br>iter = " + iter); } </script>
  • 61. www.webstackacademy.com ‹#› JS – Statements (break with label) Syntax: outer_loop: for (condition) { inner_loop: for(condition) { conditional statement break outer_loop; // jump out of outer_loop } }
  • 62. www.webstackacademy.com ‹#› JS – Statements (continue) ● A continue statement causes a jump to the loop-continuation portion, that is, to the end of the loop body ● The execution of code appearing after the continue will be skipped ● Can be used in any type of multi iteration loop
  • 63. www.webstackacademy.com ‹#› JS – Statements (continue) Syntax: while (condition) { conditional statement continue; } false true loop cond? code block cond? false continue? true code block
  • 64. www.webstackacademy.com ‹#› JS – Statements (continue) <script> for (var iter = 0; iter < 10; iter = iter + 1) { if (iter == 5) { continue; } document.write("<br>iter = " + iter); } </script>
  • 65. www.webstackacademy.com ‹#› JS – Statements (continue with label) Syntax: outer_loop: for (condition) { inner_loop: for(condition) { conditional statement continue outer_loop; // continue from outer_loop } }
  • 66. www.webstackacademy.com ‹#› JS – Statements (goto) ● This keyword has been removed from ECMA script 5/6 ● “goto” keyword is is not recommended to use ● Use break with label if necessary
  • 67. www.webstackacademy.com ‹#› Web Stack Academy (P) Ltd #83, Farah Towers, 1st floor,MG Road, Bangalore – 560001 M: +91-80-4128 9576 T: +91-98862 69112 E: info@www.webstackacademy.com