Scribd
Upload
3 views13 pages

Javascript 2

The document provides a comprehensive overview of JavaScript basics, including popup boxes (alert, confirm, prompt), control structures (switch, for-in loop), logical operators, arrays, functions, and object creation. It explains how to define methods in objects and introduces JSON for data storage and transport, along with its syntax and methods. Additionally, it includes a sample code demonstrating dynamic text display with changing font sizes.

Uploaded by

kesavat0001
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views13 pages

Javascript 2

The document provides a comprehensive overview of JavaScript basics, including popup boxes (alert, confirm, prompt), control structures (switch, for-in loop), logical operators, arrays, functions, and object creation. It explains how to define methods in objects and introduces JSON for data storage and transport, along with its syntax and methods. Additionally, it includes a sample code demonstrating dynamic text display with changing font sizes.

Uploaded by

kesavat0001
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 13

JavaScript Basics

POPUP BOXES IN JAVASCRIPT


1.Alert()
1.
<html>
<head>
<script language="javascript">
function show_alert()
{
alert("Hi! This is alert box!!");
}
</script>
</head>
<body>
<input type="button" onclick="show_alert()" value="Display alert box" ></input>
</body>
</html>

2.Confirm()

<html>
<script language="javascript">
function show_confirm()
{
var x;
if (confirm("Do you want to save changes?")==true)
{
x="Data saved successfully!";
} else {
x="Save Cancelled!";
}document.getElementById("eid").innerHTML=x;
}
</script>
<body>
<input type="button" onclick="show_confirm()" value="Display confirm box">
<p id="eid"></p>
</input>
</body>
</html>
3.Prompt()

<html>
<head>
<script language="javascript">
function show_prompt()
{
var x=prompt("enter your mail id");
document.write("your mail id is "+x);
}
</script>
</head>
<body>
<input type="button" onclick="show_prompt()" value="prompt_box" ></input>
</body>
</html>
4.Switch()

<html>
<head>

</head>

<body>

<script language="javascript" type="text/javascript">

var num=1;

switch(num){

case 1:

document.write("Red");

break;

case 2:

document.write("Green");

break;

case 3:

document.write("Blue");

break;

default:

document.write("Black");

</script>

</body>

</html>
5.for-in loop

<html>

<body>

<script type="text/javascript">

const person ={fname:"John", lname:"Doe", age:25};

let text = "";

for (let x in person)

text+=person[x];

document.write(text);

document.write("<br>");

</script>

</body>

</html>

6.Logical operators

<html>
<head>
<title>Operator Example</title>
</head>
<body>
<script language="JavaScript">
<!--
var userID ;
var password;
userID = prompt("Enter User ID"," ");
password = prompt("Enter Password"," ");

if(userID == "user" && password == "secure")


alert("Valid login");
else
alert("Invalid login");
-->
</script>
</body>
</html>
6.Arrays
<html>
<body>
<script language="javascript" type="text/javascript">
var data=['Monday','Tuesday',34,67.8,'Wednesday'];
var len=data.length;
for(var count=0;count<len;count++)
{
document.write(data[count]+"<br>");
}
</script>
</body>
</html>
7.Functions

<html>
<body>
<script language="javascript">
function about_you(name,age,qualification){
document.write("All about you<br>");
document.write("your name is"+name+"<br>");
document.write("your age is"+age+"<br>");
document.write("your qualification is"+qualification+"<br>");
}
about_you('ramu',36,'MCA'); //function call
about_you('geetha',38,'BSC');//function call
</script>
</body>
</html>
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)

1.JavaScript Object by object literal

The syntax of creating object using object literal is given below:

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

As you can see, property and value is separated by : (colon).

8.<html>

<script>

emp={id:102,name:"Shyam Kumar",salary:40000}

document.write(emp.id+" "+emp.name+" "+emp.salary);

</script>

</html>

Output :
102 Shyam Kumar 40000

2. By creating instance of Object

The syntax of creating object directly is given below:

Let’s see the simple example of creating object in JavaScript.

var objectname=new Object();

Here, new keyword is used to create object.

Let’s see the example of creating object directly.

9.<html>

<script>

var emp=new Object();

emp.id=101;

emp.name="Ravi Malik";

emp.salary=50000;

document.write(emp.id+" "+emp.name+" "+emp.salary);

</script>

</html>

Output :

101 Ravi 50000

3. By using an Object constructor

Here, you need to create function with arguments. Each argument value can be
assigned in the current object by using this keyword.

The this keyword refers to the current object.


The example of creating object by object constructor is given below.

10.<html>

<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>

</html>

Output :

103 Vimal Jaiswal 30000

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.

The example of defining method in object is given below.

11.<html>

<script>

function emp(id,name,salary){

this.id=id;
this.name=name;

this.salary=salary;

this.changeSalary=changeSalary;

function changeSalary(otherSalary){

this.salary=otherSalary;

e=new emp(103,"Sonoo Jaiswal",30000);

document.write(e.id+" "+e.name+" "+e.salary);

e.changeSalary(45000);

document.write("<br>"+e.id+" "+e.name+" "+e.salary);

</script>

</html>

Output :

103 Sonoo Jaiswal 30000

103 Sonoo Jaiswal 45000

JavaScript JSON

The JavaScript JSON is an acronym of JavaScript Object Notation. It provides a


format for storing and transporting data. It is a lightweight human readable
collection of data that can be accessed in a logical manner.

Points to remember

o It generates and stores the data from user input.


o It can transport the data from the server to client, client to server, and server
to server.
o It can also build and verifying the data.

JSON Syntax

1. While working with .json file, the syntax will be like:

{
"First_Name" : "value";
"Last_Name": "value ";
}
2. While working with JSON object in .js or .html file, the syntax will be like:

var varName ={
"First_Name" : "value";
"Last_Name": "value ";
}

JavaScript JSON Methods

Let's see the list of JavaScript JSON method with their description.

Method Description

This method takes a JSON


JSON.parse() string and transforms it into a
JavaScript object.

This method converts a


JSON.stringify() JavaScript value (JSON object)
to a JSON string representation.

JavaScript JSON Example

Let's see an example to convert string in JSON format using parse() and stringify()
method.

12.<html>
<body>

<script>

//JavaScript to illustrate JSON.parse() method.

var j = '{"Name":"Krishna","Email": "XYZ", "CN": "12345"}';

var data = JSON.parse(j);

document.write("Convert string in JSON format using parse() method<br>");

document.write(data.CN); //expected output: XYZ

//JavaScript to illustrate JSON.stringify() method.

var j = {Name:"Krishna", Email: "XYZ", CN : 12345};

var data = JSON.stringify(j);

document.write("<br>Convert string in JSON format using stringify()


method<br>");

document.write(data); //expected output:


{"Name":"Krishna","Email":"XYZ","CN":12345}

</script>

</body.

</html>

OutPut:

Convert string in JSON format using parse() method


12345
Convert string in JSON format using stringify() method
{"Name":"Krishna","Email":"XYZ","CN":12345}

13. Write a JavaScript code that displays text “TEXT-GROWING” with


increasing font size in the interval of 100ms in RED COLOR, when the
font size reaches 50pt it displays “TEXT-SHRINKING” in BLUE color.
Then the font size decreases to 5pt.
Description:
In the following code we have used two function one is a() another is c(). At
first we are calling c() from c() we are calling a() after 300 milliseconds. From
a() we are again calling c().

Program:

<!DOCTYPE html>

<html>

<head>

<title>TEXT-SHRINKING TEXT-GROWING</title>

</head>

<body>

<div id="h"></div>

<script>

var v = 0, f = 1,t="TEXT-GROWING",color;

function a()

if(f==1)

v+=5,color="red";

else

v-=5,color="blue";

document.getElementById("h").innerHTML = "<h1 style=\"font-size: "+v+"px ;


margin: 0px; color : "+color+"\"><b> "+t+"</b></h1>";

if(v==50)
f = 0, t="TEXT-SHRINKING";

if(v==5)

f = 1, t="TEXT-GROWING";

c();

function c()

setTimeout(a,300);

c();

</script>

</body>

</html>

You might also like