You are on page 1of 24

JAVASCRIPT

Javascript code is written inside script tag like<script> </script>


which can be included inside body or head tag
-----------------------------------------------------------------------------------------------------------------Comment
// is used for single line comment and /* -------------- */ is used for multiline
comment
-----------------------------------------------------------------------------------------------------------------Printing
Document.write() is used to print on screen
eg of first prog<!DOCTYPE html>

<html>
<head>
</head>
<body>
<script type="text/javascript">
document.write("hey now brown cow");
</script>
</body>
</html>
------------------------------------------------------------------------------------------------------------------

Prompt to Scan user input

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var name = prompt("Enter your name","Name");
//takes two
parameter..second parameter is default text in promptbox
document.write("Hello " + name);
</script>
</body>
</html>
______________________________________________________________________________
____
Variable
to define variable simply write var variablename = value
eg-

var z = -200;
document.write(z);

var text = "Akash is the best";


document.write(text);
to print var simply write variable name inside document. write fuction
note that we do not declare variable like java int char long etc....it assumes
value
variable can also be added to print like

egvar name ="Akash";


var age = 23;
document.write(name +" is my name and my age is " + age );
document.write(name+age);
-----------------------------------------------------------------------------------------------------------------Function
to write function use keyword function then function name()
alert is used to popup message
egfunction meatball(x)
{
alert("i love " + x);
}
meatball("akash");
meatball("dolly");
meatball("sweety");
-----------------------------------------------------------------------------------------------------------------Function with multiple parameters
egfunction apples(one, two)
{
document.write(one + " is better than " +two +"<br />"); // It will
treat <br> as a xhtml tag
}

apples("akash","manu");
apples("fish","chicken");
apples("chicken","meat");
______________________________________________________________________________
____
Function call from another function
function doFirst()
{
document.write("I am first bro!");
}
function doSecond()
{
document.write("22222222!!");
}
function start()
{
doFirst();
doSecond();
}

start();
______________________________________________________________________________
____
Return statement
eg1-

<html>

<head>
</head>
<body>
<script type="text/javascript">

function addNumbers(a,b)
{
var c =a+b;
return c;
}
addNumbers(3,6); // It will simply add numbers but will not print it as there is
no command to print

document.write(addNumbers(3,6)); //this will print added value that is 9

</script>
<form>

</body>
</html>
______________________________________________________________________________
____
Event
There are many types of event.Event is a piece of code that gets executed
when some condition is fulfilled.Event can be written inside script tag or even
without script tag in body.
Eg-Without Script tag
<html>

<head>
</head>
<body>
<script type="text/javascript">

</script>

<form>
<input type="button" value="press me" onClick="alert('onClick
event');alert('second');"/>

</form>

</body>
</html>
here inside onClick and inside alert we used single quotes instead of double
quotes

Eg2-Event inside script tag

<html>
<head>
</head>
<body>
<script type="text/javascript">

function hello()

{
alert("function hello");
}

</script>

<form>
<input type="button" value="press me" onClick="hello()"/>

</form>

</body>
</html>

Eg3-Mouse over event

<html>
<head>
</head>
<body>
<script type="text/javascript">

function hello()
{
alert("function hello");
}

</script>

<form>
<a href="akash.com" onMouseOver="alert('gametime');">keep mouse over
me</a>

</form>

</body>
</html>

Eg4-Mouse out event

<html>
<head>
</head>
<body>
<script type="text/javascript">

function hello()
{
alert("function hello");
}

</script>

<form>
<a href="akash.com" onMouseOut="alert('gametime');">keep mouse over
me</a>

</form>

</body>
</html>

Eg5-Onload event

<html>
<head>
</head>
<body onLoad="alert('loaded');">
<script type="text/javascript">

</script>
</body>
</html>
______________________________________________________________________________
____
Object
eg1-

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<script type="text/javascript">

var tuna = "hey i am a fish";


document.write(tuna.length + "<br>"); // object property
document.write("hi akash"); //here document is object and method is write

</script>

</body>
</html>

eg2- Object using constructor

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function person(name,age)
{
this.name = name;

this.age = age;
}

var akash = new person("akash",23);


var manu = new person("manu",28);

</script>

</head>
<body>
<script type="text/javascript">

document.write(akash.name);
document.write(akash.age);

</script>

</body>
</html>

eg3-Object initializer

<!DOCTYPE HTML>
<html>
<head>

<script type="text/javascript">

//OBJECT INITIALIZER -use this only when u want one or two objects otherwise
use constructor function

akash = {name:"akash salunkhe",age:23};

//use curly braces

manu = {name:"aditya",age:28};

</script>

</head>
<body>
<script type="text/javascript">

document.write(akash.name + " is "+ akash.age );

</script>

</body>
</html>

eg4-Adding methods to object

<!DOCTYPE HTML>
<html>

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

function people(name,age)
{
this.name = name;
this.age = age;
this.retire = calculate;
}

function calculate()
{
var num = 65 - this.age;
return num;
}

var akash = new people("akash",23);


document.write(akash.retire());
</script>

</body>
</html>
______________________________________________________________________________
____
Arrays

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">

var names = new Array("Akash","Manu","Sweety","Dolly"); //built in array


function

document.write(names +"<br>");
document.write(names[2]+"<br>");

var akash=["a","b","c","d"];

//another way to create array

document.write(akash + "<br>");

var fruits = new Array(2);


be stored

//Fixed size array...ie 0,1,2 three elements can

fruits[0] = "apple";
fruits[1] = "banana";
fruits[3] = "orange";
document.write(fruits+"<br>");

var animals = new Array();


animals[0] = "Monkey";
animals[1] = "dog";
document.write(animals[1]);

//dynamic array

</script>

</body>
</html>
______________________________________________________________________________
____
Array properties and methods

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">

var items = new Array("books","table","chair","moblie");


document.write(items.length +"<br>");
elements in array

var boys = new Array("Akash","Aditya","Omi");


var girls = new Array("Dolly","Sweety","Mugdha");
var students = boys.concat(girls);
document.write(students + "<br>");
document.write(boys.concat(girls)+ "<br>");// direct print

// number of

var movies = new Array("Inception","Fight club","Rocky handsome","Django


unchained");
var string1 = movies.join(" - "); //Used to convert array to string, By default
no parameters but can be provided
document.write(string1 + "<br>");

var anime = new Array("HxH","One piece","Death note","Darker than black");


anime.pop();

// Pops last element

document.write(anime + "<br>");

var bodyparts = new Array("hands","legs","toes");


bodyparts.push("eyes","ears");
array

//Adds element at the end of

document.write(bodyparts +"<br>");

bodyparts.reverse();

//reverse an array

document.write(bodyparts +"<br>");

bodyparts.sort();

//sorts array alphabetically

document.write(bodyparts);
</script>

</body>
</html>
______________________________________________________________________________
____

Array to scan user input

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">

var names = new Array(3);

for(i=0;i<3;i++)
{
names[i] = prompt();
}

document.write(names[0] + " " + names[1] + " " +names[2]);

</script>
</body>
</html>
______________________________________________________________________________
____
Printing dynamic array
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">

var names = new Array("Akash","Dolly","sweety","manu");

for(i=0;i<names.length;i++)
later

//If you want to change size of array

{
document.write(names[i] + "<br>");
}
</script>
</body>
</html>
______________________________________________________________________________
____
Associative Arrays
Arrays with named index arer called associative arrays
It means using array without index numbers but using names or strings
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">

var akash = new Array();


akash["name"] = "Akash Salunkhe";
akash["rollno"] = 39;
akash["percentage"] = 77;

document.write(akash["name"]);

//cannot print full array

</script>
</body>
</html>
______________________________________________________________________________
____
Math object
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">

document.write(Math.PI + "<br>"); //note that M and PI is capital

document.write(Math.E);

var num = prompt("Enter a number");


var answer = Math.sqrt(num);
alert(answer);

</script>
</body>
</html>
______________________________________________________________________________
____
Set interval function
<!DOCTYPE HTML>
<html>

<head>
<script type="text/javascript">
function akash()
{
document.write("Akash is the best ");
}
setInterval("akash()",1000); //second parameter is in millisecond
</script>
</body>
</html>
______________________________________________________________________________
____
Date object
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">

var now = new Date();

//Prints everything like date time day timezone

document.write(now);

function clock()
{
var time = new Date();
var hours = time.getHours();
var mins = time.getMinutes();
var seconds = time.getSeconds();

//get only hours

document.write(hours + ":" + mins + ":" + seconds + "<br>");


}
setInterval("clock()",1000);
</script>
</body>
</html>
______________________________________________________________________________
____
Forms
Javascript by default creates form object automatically....web page can have
multiple forms and javascript stores it in a array....so first form will have index
0 and so on...
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<form>
Username: <input type="text"/>
Password: <input type="text"/>
<input type="submit" value = "Submit!"/>

<script type="text/javascript">

var x = document.forms[0].length;
form

/*it is used to find length of a


ie the

number of elements in form*/


document.write(x);

</script>
</body>
</html>
______________________________________________________________________________
____
Forms1
Accessing element of form can be done in two ways using arrays and using
name directly

<!DOCTYPE HTML>
<html>
<head></head>
<body>
<form name="firstform">
Username: <input type="text" name="username"/>
Password: <input type="text" name="password"/>
<input type="submit" value = "Submit!"/>

<script type="text/javascript">

var x = document.forms[0].elements[0].name;
document.write(x);
var x = document.firstform.username.name;
document.write(x);

</script>

</body>
</html>
______________________________________________________________________________
____
Validation[checkbox]
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">

function validation()
{
if(document.firstform.thebox.checked)

alert("It is checked");

else

alert("Not checked");
}

</script>
</head>
<body>
<form name="firstform">
<input type ="checkbox" name = "thebox"/>
<input type="button" value="press me!" onClick="validation()" />

</body>
</html>

You might also like