Scribd
Upload
6 views

JavaScript I

Uploaded by

bhukyapraneetha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

JavaScript I

Uploaded by

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

Content

• Introduction to JavaScript
• Need of JavaScript
• Example
• JavaScript and Java
• Comments
• Variables
• Identifiers
• Operators
Introduction to JavaScript
What is JavaScript?

Object-based Structured
scripting language JavaScript
programming
Translator
Use of prototypes language

Supplement for Platform


HTML independent
Introduction to JavaScript (contd.)

First introduced in JavaScript allows to


Netscape 2.0 as LiveScript access and manipulate
to add interactive features and content of
features on web the document
Introduction to JavaScript (contd.)

HTML CSS JavaScript


• Content of web • Layout of web • Program
page page behaviour of
web page
Introduction to JavaScript (contd.)

• JavaScript can run on both


Client side
Server side
Need of JavaScript (contd.)

• Decision Making
• Submitting Forms
• Performing complex mathematical functions
• Automatic online data validation
Need of JavaScript(contd.)

Read elements
from
Perform actions documents
based on
Manipulate text
conditions

Create pop-up
Need of Perform
windows JavaScript mathematical
calculations

Retrieve the
Client side
current date
validation
and time
Example

<script>
document.write(“Example of JavaScript");
</script>
Details Script tag: Specifies JavaScript

Text/javaScript: Information to
browser about data

Document.write: Displays dynamic


content through JavaScript
How to add script to HTML Page
• <script>…</script>: used to insert JavaScript
• Any number can be placed in HTML document

How to place JavaScript

JavaScript can
be placed in Between the Between the
external files body tag of html head tag of html
(.js)
JavaScript and Java
JavaScript Java
Interpreted in source code on Complied in bytecode
browser
Integrate into HTML program for Must be compiled before
execution execution

Enhance features of HTML by Powerful language and


providing interactive web pages substitute for C and C++

Doesn’t create applets Create applets


JavaScript Comments

• Uses
To explain JavaScript code
To prevent execution for testing alternative
code
• Types
Single line Comments
Multi-line Comments
Single Line Comments

• Starts with //
• Most commonly used
• Example:
• // Single line comment
• Used at the end of line to explain the code
Multiple Line/ Block Comments

• Starts with /* and end with */


• Example:
• /*
First line of comment
Second line of comment
Third line of comment
*/
JavaScript Variables

• Name of storage location


Basics • Store data
• Equal sign (=): Assign values

Types • Local and Global variable


JavaScript Variables (Contd.)

Identifier Name must start with a letter (a to z or


A to Z), underscore( _ ), or dollar( $ )
sign

After first letter, digits (0 to 9) can be


used

Case sensitive
JavaScript Variables (Contd.)
Variable Declaration
1. var: Used in all older version of JavaScript.
var x;
x = 5;
2. let: Used in newer version of JavaScript, if value of variable
can change
let y;
y = 3;
3. const: Value must be assigned in declaration
const x = 4;
4. Undefined: No value is given
let x;
JavaScript Variables (Contd.)

• Example of variable declaration


const a = 5;
const b = 6;
let total = a + b;
JavaScript Variables(contd.)
Example var a = 11;
var _value=“abc";
<html>
<body>
<script>
var a = 11;
var b = 21;
var z=x+y;
document.write(z);
</script>
</body>
</html>
JavaScript Variables(contd.)

Local Declared inside block or function


variable

<script>
function xyz() {
var x=11; //local variable
}
</script>
JavaScript Variables(contd.)

Global Declared outside the function or declared with


variable window object

<script>
var value=50; //global variable
function a(){
alert(value);
}
function b(){
alert(value);
}
</script>
JavaScript Variables(contd.)

<p id=“example"></p>
<script>
let stdName = “abc";
document.getElementById("example").innerHT
ML = stdName;
</script>
Output: abc
JavaScript Datatypes

Datatypes

Primitive
String, Number, Boolean,
Undefined, Null

Non-primitive (Reference data type)


Object, Array and RegExp
Primitive Datatypes
Datatype Description

String Sequence of characters

Number Numeric values

Boolean Boolean value either true or


false
Undefined Undefined value

Null No value at all


Non-primitive Datatypes

Datatype Description

Object Instance to access members

Array Group of similar values

RegExp Boolean value either true or


false
JavaScript Objects

Basics Entity having properties and methods

Object-based language

Template based, directly create


objects
JavaScript Objects (Contd.)

Object literal

Ways to Instance of object directly


create objects (using new keyword)

Use of object constructor


(using new keyword)
Object literal

Syntax object={property1:value1,property2:value2.....propertyN:valueN}

<script>
std={id:11,name:"Kumar"}
Example document.write(std.id+" "+std.name);
</script>
Output: 11 Kumar
Instance of object directly

Syntax
• var objectname=new Object();

Example
<script>
var std=new Object();
std.id=21;
std.name=“abc";
document.write(std.id+" "+std.name);
</script>
Output: 21 abc
Use of object constructor
Create function with Each argument value can be assigned in
arguments current object using this keyword

This: refers to current object

<script>
function std(id,name){
this.id=id;
this.name=name; Output: 11 abc
}
s=new std(11 ,“abc");
document.write(s.id+" "+s.name);
</script>
Primitive Datatypes
String

• Object represents sequence of


characters to store and
manipulate text
Basics • Either single or double quotes
are required

• let name = “abc”;


Example
• let name = ‘abc’;
Primitive Datatypes (Contd.)
String

Ways to create
string

String literal String object


Created using double Using new keyword
quotes var strname=new String(“NITP");
let name = “abc”; New keyword: Create instance of
string
String Methods

Extracting string parts


slice(start, end) Replacing string
String length
substring(start, end) replace()
substr(start, length)

Converting to upper Extracting String


and lowercase Characters
toUpperCase(): charAt(position)
toLowerCase():
Extracting string parts

• slice(start, end)
• Example:
let str = “NIT Patna Bihar”
let result_1 = str.slice(4,9);
Output: Patna
let result_2 = str.slice(-1,-6);
Output: Bihar
• substr(start, length)
let result_3 = str.substr(4,5);
Output: Patna
Replacing string
replace()
• Replaces a specified value with another value
• Example:
let str = “abc";
let result = str.replace(“abc", “def");
Output: def
Let char = str.charAt(0);
Output: a
Converting to upper and lowercase
toUpperCase():
toLowerCase():
• toUpperCase():
• Example
let str = “Keep It Up”;
let str1 = str. toUpperCase();
Result: KEEP IT UP
• toLowerCase():
• Example
let str2 = str. toLowerCase();
Result: keep it up
String Search Methods

String indexOf() String lastIndexOf()


returns the index of the first returns the index of
occurrence the last occurrence

String startsWith() String endsWith()


returns if a string begins returns if a string ends
String Search Methods (contd.)

• String indexOf()
• Example:
let txt = ”abc def ghi def";
txt.indexOf("def");
Output: 4
• String lastIndexOf()
• Example:
• txt. lastIndexOf(def);
• Output: 12
String startsWith()

• returns true if a string begins with a specified


value
• Example:
 let text = " abc def ghi def”
text.startsWith(“abc");
 Output: true
let txt = "def ghi def”
txt.startsWith(“abc");
output: false
String endsWith()

• Returns true if a string ends with a specified


value
• Example:
let text = " abc def ghi def”
text.endsWith(“def");
Output: true
Non-primitive Datatypes
Array
• Special variable holds more than one value
• Need of Array
Hold more values under a single name and
Access values individually
Array (contd.)
• Array Declaration (Creating an array)
• Use const for array declaration
• Syntax
 Keyword array_name= [element1, element2...];
 Example: const arr = [“a”,”b”,…]
• Multiple line declaration can be possible
• Example: const arr = [
“a”,
“b”,
];
• Array declaration and then input elements
• const arr = [];
• arr[0]= “a”;
• arr[1]= “b”;
Accessing Array Elements
• By referring to index number
• Use numbers to access its element
• Index starts with 0
• Example:
const arr = *“a”, “b”, ”c”+;
let arr = arr[0];
Output: a
• Changing an array element
arr[0] = “d”;
Output: d b c
• Full array can be accessed
Accessing Array Elements (contd.)
• Full array can be accessed
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p id="demo"></p>

<script>
const arr = ["ab", "cd", "ef"];
document.getElementById("demo").innerHTML = arr;
</script>

</body>
</html>
Array object

• To access its elements, arrays use numbers


• Objects use names to access its members
• Arrays: use numbered indexes
• Objects: use named indexes
• Array.isArray(): method to recognize an array
Array object

Object literal

Instance of array object


Ways to create
directly (using new
objects
keyword)

Use of array constructor


(using new keyword)
Object literal

Syntax Example
• var arrayname=[value1,val <script>
ue2.....valueN]; var std=*“ab",“cd",“ef"+;
for (i=0;i<std.length;i++){
document.write(std[i] + "<br/>");
}
</script>
Use of Array Object directly (new keyword)

Example
<script>
Syntax var i;
var emp = new Array();
• var arrayname=new Array(); emp[0] = "A";
emp[1] = “B";
emp[2] = “C";
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}
</script>
Use of array constructor

Example
<script>
Basics var emp=new Array(“A",“B",“C");
for (i=0;i<emp.length;i++){
Passing arguments in document.write(emp[i] + "<br>");
constructor }
</script>
Array Methods

• Converting arrays to strings


join(): Converts an array to a string with
specific separator
Example: const arr = *“a”, “b”, ”c”+;
arr.join(“ - “);
Output: a - b - c
Array properties and methods (contd.)

Length push() and pop()


Push(): Adds a new element to an array
returns length of an array at the end
Pop(): Removes the last element from
an array
Example: const arr =
*“abc", “def", “ghi", “jkl"+; Example of push():const alpha = *“a", “b", “c"+;
let length = arr.length; alpha.push(“d");
Output: 4 Output: a,b,c,d
Example of pop(): const alpha = *“a", “b", “c"+;
alpha.pop();
Output: a,b
Array properties and methods (contd.)

Shift() and Unshift() concat()

shift(): Removes first array


Joins two or more arrays to
element
create new one
unshift(): Adds a new element
at the beginning
const alpha_a = *“a", “b", “c"+;
Example: const alpha = *“a", “b", “c"+;
alpha.shift(); const alpha_b = *“d", “e"+;
Output: b,c
const alpha_c =
const alpha = *“b", “c"+;
alpha.unshift(“a”); alpha_a.concat(alpha_b);
Output: a,b,c Output: a,b,c,d,e
Array properties and methods (contd.)

Splice() slice()
splice(): Adds or removes Slice out a piece of an array
new element at specified into a new array
position

Example: const alpha =


const alpha = *“a", “b", “c“, “d”+;
*“a", “b", “c"+;
alpha.splice(1, 0, “d”); const alpha_s = alpha.slice(1)
Output: a,d,b,c Output: b,c,d
alpha.splice(1, 1);
Output: a,c
Array properties and methods (contd.)

reverse() sort()

Reverses the elements in an


Sorts an array alphabetically
array

Example: const arr =


const alpha = *“a", “b", “c"+; *“b", “e", “a, “c“, “d”+;
alpha.reverse(); arr.sort();
Output: c,b,a Output: a,b,c,d,e
JavaScript Operators

• Symbol is used to perform a calculation in an expression with


two or more values
Arithmetic
operators
Special Logical
operator operators

Types
Bitwise Assignment
operator operators

Comparison String
operators operators
Operators (contd.)

• Performs arithmetic on
Arithmetic number (literals or
operators variables)
• +, -, *,/, %, ++, --,**

Assignment • Assigns value to a variable


operators • =, +=, -=, *=, /=, %=
Operators (contd.)
let x= 5
Arithmetic operators
Symbol Description Example Result
+ Addition x+5 10
- Subtraction x-3 2
* Multiplication x*5 25
/ Division x/5 1
% Modulus x%2 1
++ Increment x++ 6
-- Decrement x-- 4
** Exponentiation x**2 25
Operators (contd.)
Assignment operators
let x = 10;
let y = 5;

Symbol Example using Equivalent Result


shorthand

= a=1 a=1 -
+= x+=y x=x+y 15
-= x-=y x=x-y 5
*= x*=y x=x*y 50
/= x/=y x=x/y 2
%= x%=y x=x%y 0
Operators (contd.)

• + operator/Concatenation operator: To
String concatenate strings
operators • +=: can also be used
• Adding number and string: return string

• ==, !=, > (greater), <(less),>=,<=,


Comparison ?(ternary/conditional)
operators • Variablename = (condition)?value1:
value2
Operators (contd.)
String Operators
• Example 1
let str1 = “NIT”;
let str2 = “Patna”;
let str3 = str1+str2; or let str3 = str1+” ” +str2;
Output: NITPatna Output: NIT Patna
• Example 2
let str1 = “NIT ”;
str1 += “Patna”;
Output: NIT Patna
Operators (contd.)
Comparison Operators

Operator Description Example


== Is equal to 2==1 returns false
1==1returns true
!= Is not equal to 1!=2returns true
1==1returns false
> Is greater than 2>1 returns true
1>2 returns false

>= Is greater than or equal 1>=2returns false


to 2>=1 returns true

<= Is less than or equal to 1<=2returns true


2<=1 returns false
Operators (contd.)
Logical Operators

• Logic between
Logical operators variables and values
• &&(and), II (or), !(not)
Operators (contd.)
Logical Operators
let x = 1;
let y = 2;

Operator Name Example

&& AND x<2 && y>1,


returns true
II OR x<2 II y<2,
returns true

! NOT !(x>y),
returns true
Operators (contd.)
Bitwise Operators
Operator Name
& AND
| OR
^ Bitwise XOR
~ Bitwise NOT
<< Bitwise Left Shift
>> Bitwise Left Shift

>>> Bitwise Right Shift with Zero


Operators (contd.)
Special Operators
Operator Name
(?:) Conditional operator
, Comma operator to evaluate
multiple expressions
delete Deletes property from object
in Checks if object has given property
typeof Checks the type of object
new Creates an object

You might also like