Scribd
Upload
22 views

Basics of JavaScript

The document provides an introduction to JavaScript including its uses, data types, variables, conditional statements, and input methods. JavaScript is an interpreted, client-side scripting language used to make web pages interactive. It is embedded directly into HTML and can access and modify elements on web pages. Common data types in JavaScript include strings, numbers, Booleans, null, and undefined values.

Uploaded by

Keshav Bhumaraju
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
22 views

Basics of JavaScript

The document provides an introduction to JavaScript including its uses, data types, variables, conditional statements, and input methods. JavaScript is an interpreted, client-side scripting language used to make web pages interactive. It is embedded directly into HTML and can access and modify elements on web pages. Common data types in JavaScript include strings, numbers, Booleans, null, and undefined values.

Uploaded by

Keshav Bhumaraju
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 58

Introduction

JavaScript

www.webstackacademy.com ‹#›
Table of Content

 Introduction to JavaScript
 Data Types
 Arrays
 Objects
 Statements
 Function basics
www.webstackacademy.com ‹#›
HTML, CSS & JavaScript

www.webstackacademy.com ‹#›
JS – What?
●
A programming language designed for web pages
●
It is embedded directly into HTML Pages
●
An interpreted, client-side, event based language
●
It is dynamic, lightweight and case-sensitive

www.webstackacademy.com ‹#›
JS - Internal
<!DOCTYPE html>
<html>
<head>
<script> . . . JS code . . . </script>
</head>
<body>
<script> . . . JS code . . . </script>
</body>
</html>

www.webstackacademy.com ‹#›
JavaScript - Output
Method Description
window.alert() Display data in alert dialog box
document.write() Display data in browser display area
innerHTML() Display data in HTML element
console.log() Display data in browser console

www.webstackacademy.com ‹#›
JS – First Program

<body>
<script>
document.write("Hello JavaScript!!");
</script>
</body>

www.webstackacademy.com ‹#›
JS - External
●
External (or linked script) JavaScript can be inserted using
src attribute

Syntax :
<script src="URL"> </script>

Absolute URL : http://www.example.com/example.js


Relative URL : /script/example.js

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.7976x10 308
●
Smallest floating point magnitude can be ± 2.2250x10 -308
●
If number exceeds the floating point range, its value will be
infinite

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 All infinity values compare equal to
too small to represent each other
NaN (not-a- Undefined operation NaN never compare equal to
number) anything (even itself)

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)
●
In JavaScript the data type of null is an object
●
The null means empty value or nothing

Example :
var num = null; // value is null but still type is an object.

www.webstackacademy.com ‹#›
Primitive data type
(Undefined)
●
A variable without a value is undefined
●
The type is object

Example :
var num; // undefined

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 ‹#›
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 – Conditional Construct
if and its family
Selection
switch case
Conditional
Constructs for

Iteration while

do while

www.webstackacademy.com ‹#›
JS – Statements
(conditional - if)

Example :
Syntax :
if (condition) { <script>
statement(s);
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 - 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 ‹#›
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)
expr
Syntax :
true
switch (expression) { case1? code break
case exp1:
statement(s); false
break; true
case exp2: case2? code break
statement(s);
break; false
default:
default code break
statement(s);
}

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 ‹#›
JS – Statements
(while)

Syntax: false
cond?
while (condition)
{ true
statement(s);
●
Controls the loop.
code
} ●
Evaluated before each
execution of loop body

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)

code
Syntax:

do { true
statement(s);
} while (condition); cond?

●
Controls the loop. false
●
Evaluated after each
execution of loop body

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)

code
Syntax:

for (init-exp; loop-condition; post-eval-exp) { true

statement(s); cond?

}; ●
Controls the loop. false
●
Evaluated before each
execution of loop body

www.webstackacademy.com ‹#›
JS – Statements
(for loop)
Execution path:
1 2 4
for (init-exp; loop-condition; post-eval-exp) {

statement(s); 3

};

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
(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) code block

Syntax:
true
cond? break?
while (condition) {
conditional statement true false
break;
} loop
cond?

false

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
(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) code block

true
Syntax: cond? continue?
while (condition) {
false
conditional statement
code block
continue;
}
loop
true cond?

false

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 ‹#›
Function basics
(JavaScript)

www.webstackacademy.com ‹#›
What is function?
●
A function is a block of JavaScript code that is defined once but
may be executed, or invoked, any number of times
●
A function can be used to return a value, construct an object, or
as a mechanism to simply run code
●
JavaScript functions are defined with the function keyword
●
Either function declaration or a function expression can be used

www.webstackacademy.com ‹#›
Function Declaration

Syntax:
function functionName (param-1, param-2, . . . , param-n) {
statement(s);
}

www.webstackacademy.com ‹#›
Parts of functions
●
Name – A unique name given by developer
●
Parameters / arguments – to pass on input values to function
●
Body – A block of statement(s) to be executed
– Local variable declaration
– Flow of computing statement(s)
– Return statement

www.webstackacademy.com ‹#›
Function Example
Example : Function name
<script>
function sum (num1, num2) Formal arguments
Function definition

{
Function body

var result; // local variable declaration


result = num1 + num2; // computing sum
return result; // return statement
} return value
</script>
www.webstackacademy.com ‹#›
Function Execution
●
Merely defining a function does not result in execution of the
function; it must be called for execution

<script>
. . . function definition . . .
var x = 3, y = 5, z; // global variable declaration
x and y are actual arguments

z = sum (x, y); // calling function for execution


document.write(“The sum of numbers is : “ + z);
</script>
www.webstackacademy.com ‹#›
Actual Vs formal arguments
●
Formal arguments are the names listed within parenthesis
in function definition (also known as function parameters)
●
Formal arguments are initialized through actual arguments
at run time
●
Actual arguments are variables or literals passed to the
function at the time of invocation (call to execute)
●
The formal arguments are visible to function only

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: [email protected] www.webstackacademy.com ‹#›

You might also like