Javascript

1
<html> <html>
<body> <body>
<p>Before the script...</p> <h2>Welcome to JavaScript</h2>
<script>
<script>
alert( 'Hello, world!' );
</script>
document.write("Hello JavaScript by JavaScript");
<p>...After the script.</p> </body> </script>
</html> </body>
</html>
External JavaScript
2
3
4
5
6
7
8
Javascript Data Types
JavaScript provides different data types to hold different types of values. There are two types of
data types in JavaScript.
1.Primitive data type
2.Non-primitive (reference) data type
JavaScript is a dynamic type language, means you don't need to specify type of the variable
because it is dynamically used by JavaScript engine. You need to use var here to specify the data
type. It can hold any type of values such as numbers, strings etc. For example:
9
10
JavaScript Operators
JavaScript operators are symbols that are used to perform operations on operands. For example:
var sum=10+20;
Here, + is the arithmetic operator and = is the assignment operator.
11
These are following types of operators in JavaScript.
1.Arithmetic Operators
2.Comparison (Relational) Operators
3.Bitwise Operators
4.Logical Operators
5.Assignment Operators
6.Special Operators
12
13
14
15
16
17
18
JavaScript If-else
The JavaScript if-else statement is used to execute the code whether condition is true or false.
There are three forms of if statement in JavaScript.
1.If Statement
2.If else statement
3.if else if statement
<html>
<body>
<html> <script>
<body> var a=20;
<script> if(a%2==0){
var a=20; document.write("a is even number");
if(a>10){ }
document.write("value of a is greater than 10"); else{
} document.write("a is odd number");
</script> }
</body> </script>
</html> </body>
</html> 19
<!DOCTYPE html>
<html>
<html>
<body>
<body>
<script>
<script>
var a=20;
var grade='B';
if(a==10){
var result;
document.write("a is equal to 10");
switch(grade){
}
case 'A':
else if(a==15){
result="A Grade";
break;
}
case 'B':
else if(a==20){
result="B Grade";
break;
}
case 'C':
else{
result="C Grade";
document.write("a is not equal to 10, 15 or 20");
break;
}
default:
</script>
result="No Grade";
</body>
}
</html>
document.write(result);
</script>
</body>
</html> 20
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <body>
<script> <script>
for (i=1; i<=5; i++) var i=21;
{ do{
document.write(i + "<br/>") document.write(i + "<br/>");
} i++;
</script> }while (i<=25);
</body> </script>
</html> </body>
</html>
JavaScript Functions
JavaScript functions are used to perform operations. We can call JavaScript function
many times to reuse the code.
Advantage of JavaScript function
There are mainly two advantages of JavaScript functions.
1.Code reusability: We can call a function several times so it save coding.
2.Less coding: It makes our program compact. We don’t need to write many lines of
code each time to perform a common task.
21
<html>
<body>
<script>
function msg(){
alert("hello! this is message");
}
</script>
<input type="button" onclick="msg()" value="call function"/>
</body>
</html> 22
JavaScript Function Arguments
We can call function by passing arguments. Let’s see the example of function that has one argument.
<html>
<body>
<script>
function getcube(number){
alert(number*number*number);
}
</script>
<form>
<input type="button" value="click" onclick="getcube(4)"/>
</form>
</body>
</html>
Function with Return Value

We can call function that returns a value and use it in our program. Let’s see the example of function that returns value.
23
<html>
<body>
<script>
function getInfo(){
return "hello java! How r u?";
}
</script>
<script>
document.write(getInfo());
</script>
</body>
</html>
JavaScript Function Object

In JavaScript, the purpose of Function constructor is to create a new Function object. It executes
the code globally. However, if we call the constructor directly, a function is created dynamically but in
an unsecured way.
24
JavaScript Function Object Examples
25
<!DOCTYPE html>
<html>
<body>
<script>
var add=new Function("num1","num2","return num1+num2");
document.writeln(add(2,5));
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<script>
var pow=new Function("num1","num2","return Math.pow(num1,num2)");
document.writeln(pow(2,3));
</script>
</body>
</html>
26
JavaScript Objects
A javaScript object is an entity having state and behavior (properties and method). For example:
car, pen, bike, chair, glass, keyboard, monitor etc.
JavaScript is an object-based language. Everything is an object in JavaScript.
JavaScript is template based not class based. Here, we don't create class to get the object. But,
we directly create objects.
Creating Objects in JavaScript

There are 3 ways to create objects.
1.By object literal
2.By creating instance of Object directly (using new keyword)
3.By using an object constructor (using new keyword)
27
1) JavaScript Object by object literal
<html>
<body>
<script>
emp={id:102,name:"Shyam Kumar",salary:40000}
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>
</body>
</html>
28
2) By creating instance of Object
<html>
<body>
<script>
var emp=new Object();
emp.id=101;
emp.name="Ravi Malik";
emp.salary=50000;
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>
</body>
</html>
29
3) By using an Object constructor
<html>
<body>
<script>
function emp(id,name,salary){
this.id=id;
this.name=name;
this.salary=salary;
}
e=new emp(103,"Vimal Jaiswal",30000);
document.write(e.id+" "+e.name+" "+e.salary);
</script>
</body>
</html>
30
Defining method in JavaScript Object
We can define method in JavaScript object. But before defining method, we need to add property
in the function with same name as method.
31
JavaScript Array
JavaScript array is an object that represents a collection of similar type of elements.
There are 3 ways to construct array in JavaScript
1.By array literal
2.By creating instance of Array directly (using new keyword)
3.By using an Array constructor (using new keyword)
32
33
34
JavaScript Array Methods
35
JavaScript String
The JavaScript string is an object that represents a sequence of characters.
There are 2 ways to create string in JavaScript
1.By string literal
2.By string object (using new keyword)
2) By string object (using new keyword)

The syntax of creating string object using new keyword is given below:
36
37
JavaScript String Methods
38
39
<!DOCTYPE html> <!DOCTYPE html> <!DOCTYPE html>
<html> <html> <html>
<body> <body> <body>
<script> <script> <script>
var str="javascript"; var s1="javascript "; var s1="javascript from javatpoint indexof";
document.write(str.charAt(2)); var s2="concat example"; var n=s1.indexOf("from");
</script> var s3=s1+s2; document.write(n);
</body> document.write(s3); </script>
</html> </script> </body>
</body> </html>
</html>
<!DOCTYPE html>
<html>
<!DOCTYPE html>
<body>
<html>
<script>
<body>
var s1="JavaScript toUpperCase Example";
<script>
var s2=s1.toUpperCase();
var s1="abcdefgh";
document.writeln(s2);
var s2=s1.slice(2,5);
var s2=s1.toLowerCase();
document.write(s2);
document.writeln(s2);
</script>
</script>
</body>
</body>
</html>
</html>
40
What is a Callback Function?
In JavaScript, functions are objects. Can we pass objects to functions as parameters? Yes.
So, we can also pass functions as parameters to other functions and call them inside the outer functions.
function print(callback) {
callback();
}
41
<script>

// add() function is called with arguments a, b
// and callback, callback will be executed just
// after ending of add() function
function add(a, b , callback){
document.write(`The sum of ${a} and ${b} is ${a+b}.` +"<br>");
callback();
}

// disp() function is called just
// after the ending of add() function
function disp(){
document.write('This must be printed after addition');
}

// Calling add() function
add(5,6,disp);

</script>
42
Explanation:
Here are the two functions – add(a, b, callback) and disp(). Here add() is called with the disp() function i.e. passed in
as the third argument to the add function along with two numbers.
As a result, the add() is invoked with 1, 2 and the disp() which is the callback. The add() prints the addition of the two
numbers and as soon as that is done, the callback function is fired! Consequently, we see whatever is inside the disp()
as the output below the addition output.
43
44
45
46
47
48
49

Javascript

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Javascript

Uploaded by

Copyright:

Available Formats

1

data types in JavaScript.

1.Primitive data type

2.Non-primitive (reference) data type

Here, + is the arithmetic operator and = is the assignment operator.

Function with Return Value

JavaScript Function Object

Creating Objects in JavaScript

2) By string object (using new keyword)

You might also like