JavaScript Objects
Working with Templates of an Object
<!DOCTYPE HTML>
<HEAD>
<TITLE>Template Demo</TITLE>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
function employee(name,jobtitle,salary)
{
this.name=name;
this.jobtitle=jobtitle;
this.salary=salary;
}
var emp1=new employee("Nilima Aahuja","Technical writer",10000);
document.write(emp1.name+ " is a "+emp1.jobtitle+" in KLS company, having the salary Rs."+emp1.salary+" per month");
</SCRIPT>
</BODY>
</HTML>
a function, employee, is created with three parameters, name, job title, and salary.
then, an object, emp1, is created of the employee type by using the new keyword and passing the values of the created parameters.
<!DOCTYPE HTML>
<HEAD>
<TITLE>Template Demo</TITLE>
</HEAD>
<BODY>
<TABLE border=3>
<TR>
<TH>Bike Image</TH>
<TH>Bike Color</TH>
</TR>
<TR>
<TD>
<IMG name="myimage01" src="bike5.jpg"/>
<SCRIPT type="text/javascript">
document.images.myimage01;
</SCRIPT>
</TD>
<TD>
<SCRIPT type="text/javascript">
function bike(color) {
this.color=color;
}
var bike1= new bike("Red");
document.write(bike1.color);
</SCRIPT>
</TD>
</TR>
<TR>
<TD>
<IMG name="myimage02" src="bike2.jpg"/>
<SCRIPT type="text/javascript">
document.images.myimage02;
</SCRIPT>
</TD>
<TD>
<SCRIPT type="text/javascript">
function bike(color) {
this.color=color;
}
var bike2= new bike("Black");
document.write(bike2.color);
</SCRIPT>
</TD>
</TR>
<TR>
<TD>
<IMG name="myimage03" src="bike3.jpg"/>
<SCRIPT type="text/javascript">
document.images.myimage03;
</SCRIPT>
</TD>
<TD>
<SCRIPT type="text/javascript">
function bike(color) {
this.color=color;
}
var bike3= new bike("Blue");
document.write(bike3.color);
</SCRIPT>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Working with the String Object
a string object has various proparties.
such as length and prototype.
the length property specifies the number of characters present in a string.
the prototype proparty adds proparties and methods to an object.
string proparties
<!DOCTYPE HTML>
<HEAD>
<TITLE>String Properties Demo</TITLE>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
function employee(name,jobtitle,salary)
{
this.name=name;
this.jobtitle=jobtitle;
this.salary=salary;
}
var emp1=new employee("Nilima Aahuja","Technical writer",10000);
document.write("Name : "+emp1.name+ "<BR/> Designation : "+emp1.jobtitle+"<BR/> Salary : Rs."+emp1.salary);
document.write("<BR/> --------------------<BR/>");
var emp2=new employee("Shilpa Verma","HR manager",40000);
employee.prototype.doj=2007;
document.write("Name : "+emp2.name+"<BR/> Designation : "+emp2.jobtitle+"<BR/> Date of Joining : "+emp2.doj+"<BR/>Salary : Rs."+emp2.salary);
</SCRIPT>
</BODY>
</HTML>
string functions
<!DOCTYPE HTML>
<HEAD>
<TITLE>Different String Functions</TITLE>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
var mystring="Twinke Twinkle Little Star";
document.write("String: "+mystring+"<BR/>");
document.write("Length: "+mystring.length+"<BR/>");
document.write("Bold text: "+mystring.bold()+"<BR/>");
document.write("Uppercase text: "+mystring.toUpperCase()+"<BR/>");
document.write("Big text: "+mystring.big()+"<BR/>");
document.write("Lowercase text: "+mystring.toLowerCase()+"<BR/>");
document.write("Strike text: "+mystring.strike()+"<BR/>");
document.write("Small text: "+mystring.small()+"<BR/>");
document.write("Substring after 8 characters: "+mystring.substring(8) + "<BR/>")
document.write("Splitted text: "+mystring.split('Twinkle') + "<BR/>")
document.write("Index of text: "+mystring.indexOf('Twinkle') + "<BR/>")
document.write("Character at 8th position: "+mystring.charAt(8) + "<BR/>")
document.write("Blinking text: "+mystring.blink() + "<BR/>")
</SCRIPT>
</BODY>
</HTML>
the blink() method of the string object works on the opera and mozilla firefox browsers.
<!DOCTYPE HTML>
<HEAD>
<TITLE>Form with Sting Object</TITLE>
</HEAD>
<BODY style="background-color:orange">
<H3>Enter your text in the given text area</H3>
<FORM name="wordcount">
<TEXTAREA rows="12" name="wordcount2" cols="38" wrap="virtual" style="color:pink;background-color:blue;font-size:20px"></textarea><br>
<INPUT type="button" value="Calculate Words" onClick="countit()">
<INPUT type="text" name="wordcount3" size="20">
</FORM>
<SCRIPT type="text/javascript">
function countit(){
var formcontent=document.wordcount.wordcount2.value
formcontent=formcontent.split(" ")
document.wordcount.wordcount3.value=formcontent.length
}
</SCRIPT>
</BODY>
</HTML>
Working with the Boolean Object
<!DOCTYPE HTML>
<HEAD>
<TITLE>Boolean test</TITLE>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
var bool1=new Boolean(0);
var bool2=new Boolean(8);
var bool3=new Boolean(1);
var bool4=new Boolean("");
var bool5=new Boolean("Hello");
var bool6=new Boolean('False');
var bool7=new Boolean(null);
var bool8=new Boolean(NaN);
document.write("0 value is boolean "+bool1+"<br>");
document.write("8 value is boolean "+bool2+"<br>");
document.write("1 value is boolean "+bool3+"<br>");
document.write("An empty string is boolean "+bool4+"<br>");
document.write("String \"Hello\" is boolean "+bool5+"<br>");
document.write("String 'False' is boolean "+bool6+"<br>");
document.write("null is boolean "+bool7+"<br>");
document.write("NaN is boolean "+bool8);
</SCRIPT>
</BODY>
</HTML>
Working with the Number Object
<!DOCTYPE HTML>
<HEAD>
<TITLE>Number Test</TITLE>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
num= new Number('15.603')
document.write(num.toExponential()+ "<br>")
document.write(num.toFixed()+ "<br>")
document.write(num.toPrecision(3)+"<br>")
document.write(num.toString()+"<br>")
document.write(num.valueOf()+"<br>")
</SCRIPT>
</BODY>
</HTML>
Working with the Array Object
<!DOCTYPE HTML>
<HEAD>
<TITLE>Array Functions</TITLE>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
myarray1=new Array("Sunday", "Monday", "Tuesday","Wednesday","Thursday");
myarray2=new Array(1,2,3,4,5);
document.write("Array 1 : "+myarray1+"<BR/>")
document.write("Array 2 : "+myarray2+"<BR/>")
document.write("Concatenated two arrays : "+myarray1.concat(myarray2+"<BR/>"))
document.write("Joined two arrays : "+myarray1.join(myarray2)+"<BR/>")
document.write("Array 1 pop out : "+myarray1.pop()+"<BR/>")
document.write("Reversed array 1: "+myarray1.reverse()+"<BR/>")
document.write("Shifted array 1 : "+myarray1.shift()+"<BR/>")
document.write("Sorted array 1 : "+myarray1.sort()+"<BR/>")
document.write("Array 2 in string format "+myarray2.toString()+"<BR/>")
</SCRIPT>
</BODY>
</HTML>
Working with the Date Object
<!DOCTYPE HTML>
<HEAD>
<TITLE>Date Functions</TITLE>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
var mydate= new Date();
document.write("Today the date is:"+mydate.getDate()+"/"+ (mydate.getMonth()+1)+"/"+mydate.getFullYear()+ "<BR/>");
document.write("The time is:"+mydate.getHours()+":" +mydate.getMinutes()+":"+mydate.getSeconds()+"<BR/>");
</SCRIPT>
</BODY>
</HTML>
Working with math object
<!DOCTYPE HTML>
<HEAD>
<TITLE>Math Functions</TITLE>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
document.write("Floor : "+Math.floor(12.6)+"<BR/>");
document.write("Log : "+Math.log(12.6)+"<BR/>");
document.write("Max : "+Math.max(12,34,15,65)+"<BR/>");
document.write("Min : "+Math.min(12,34,15,65)+"<BR/>");
document.write("Pow : "+Math.pow(10,2)+"<BR/>");
document.write("Random : "+Math.random()+"<BR/>");
document.write("Round : "+Math.round(12.6)+"<BR/>");
document.write("Sin : "+Math.sin(45)+"<BR/>");
document.write("Sqrt : "+Math.sqrt(16)+"<BR/>");
document.write("Tan : "+Math.tan(45)+"<BR/>");
document.write("Exp : "+math.exp(10)+"<BR/>");
</SCRIPT>
</BODY>
</HTML>
Working with Templates of an Object
<!DOCTYPE HTML>
<HEAD>
<TITLE>Template Demo</TITLE>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
function employee(name,jobtitle,salary)
{
this.name=name;
this.jobtitle=jobtitle;
this.salary=salary;
}
var emp1=new employee("Nilima Aahuja","Technical writer",10000);
document.write(emp1.name+ " is a "+emp1.jobtitle+" in KLS company, having the salary Rs."+emp1.salary+" per month");
</SCRIPT>
</BODY>
</HTML>
a function, employee, is created with three parameters, name, job title, and salary.
then, an object, emp1, is created of the employee type by using the new keyword and passing the values of the created parameters.
<!DOCTYPE HTML>
<HEAD>
<TITLE>Template Demo</TITLE>
</HEAD>
<BODY>
<TABLE border=3>
<TR>
<TH>Bike Image</TH>
<TH>Bike Color</TH>
</TR>
<TR>
<TD>
<IMG name="myimage01" src="bike5.jpg"/>
<SCRIPT type="text/javascript">
document.images.myimage01;
</SCRIPT>
</TD>
<TD>
<SCRIPT type="text/javascript">
function bike(color) {
this.color=color;
}
var bike1= new bike("Red");
document.write(bike1.color);
</SCRIPT>
</TD>
</TR>
<TR>
<TD>
<IMG name="myimage02" src="bike2.jpg"/>
<SCRIPT type="text/javascript">
document.images.myimage02;
</SCRIPT>
</TD>
<TD>
<SCRIPT type="text/javascript">
function bike(color) {
this.color=color;
}
var bike2= new bike("Black");
document.write(bike2.color);
</SCRIPT>
</TD>
</TR>
<TR>
<TD>
<IMG name="myimage03" src="bike3.jpg"/>
<SCRIPT type="text/javascript">
document.images.myimage03;
</SCRIPT>
</TD>
<TD>
<SCRIPT type="text/javascript">
function bike(color) {
this.color=color;
}
var bike3= new bike("Blue");
document.write(bike3.color);
</SCRIPT>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Working with the String Object
a string object has various proparties.
such as length and prototype.
the length property specifies the number of characters present in a string.
the prototype proparty adds proparties and methods to an object.
string proparties
<!DOCTYPE HTML>
<HEAD>
<TITLE>String Properties Demo</TITLE>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
function employee(name,jobtitle,salary)
{
this.name=name;
this.jobtitle=jobtitle;
this.salary=salary;
}
var emp1=new employee("Nilima Aahuja","Technical writer",10000);
document.write("Name : "+emp1.name+ "<BR/> Designation : "+emp1.jobtitle+"<BR/> Salary : Rs."+emp1.salary);
document.write("<BR/> --------------------<BR/>");
var emp2=new employee("Shilpa Verma","HR manager",40000);
employee.prototype.doj=2007;
document.write("Name : "+emp2.name+"<BR/> Designation : "+emp2.jobtitle+"<BR/> Date of Joining : "+emp2.doj+"<BR/>Salary : Rs."+emp2.salary);
</SCRIPT>
</BODY>
</HTML>
string functions
<!DOCTYPE HTML>
<HEAD>
<TITLE>Different String Functions</TITLE>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
var mystring="Twinke Twinkle Little Star";
document.write("String: "+mystring+"<BR/>");
document.write("Length: "+mystring.length+"<BR/>");
document.write("Bold text: "+mystring.bold()+"<BR/>");
document.write("Uppercase text: "+mystring.toUpperCase()+"<BR/>");
document.write("Big text: "+mystring.big()+"<BR/>");
document.write("Lowercase text: "+mystring.toLowerCase()+"<BR/>");
document.write("Strike text: "+mystring.strike()+"<BR/>");
document.write("Small text: "+mystring.small()+"<BR/>");
document.write("Substring after 8 characters: "+mystring.substring(8) + "<BR/>")
document.write("Splitted text: "+mystring.split('Twinkle') + "<BR/>")
document.write("Index of text: "+mystring.indexOf('Twinkle') + "<BR/>")
document.write("Character at 8th position: "+mystring.charAt(8) + "<BR/>")
document.write("Blinking text: "+mystring.blink() + "<BR/>")
</SCRIPT>
</BODY>
</HTML>
the blink() method of the string object works on the opera and mozilla firefox browsers.
<!DOCTYPE HTML>
<HEAD>
<TITLE>Form with Sting Object</TITLE>
</HEAD>
<BODY style="background-color:orange">
<H3>Enter your text in the given text area</H3>
<FORM name="wordcount">
<TEXTAREA rows="12" name="wordcount2" cols="38" wrap="virtual" style="color:pink;background-color:blue;font-size:20px"></textarea><br>
<INPUT type="button" value="Calculate Words" onClick="countit()">
<INPUT type="text" name="wordcount3" size="20">
</FORM>
<SCRIPT type="text/javascript">
function countit(){
var formcontent=document.wordcount.wordcount2.value
formcontent=formcontent.split(" ")
document.wordcount.wordcount3.value=formcontent.length
}
</SCRIPT>
</BODY>
</HTML>
Working with the Boolean Object
<!DOCTYPE HTML>
<HEAD>
<TITLE>Boolean test</TITLE>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
var bool1=new Boolean(0);
var bool2=new Boolean(8);
var bool3=new Boolean(1);
var bool4=new Boolean("");
var bool5=new Boolean("Hello");
var bool6=new Boolean('False');
var bool7=new Boolean(null);
var bool8=new Boolean(NaN);
document.write("0 value is boolean "+bool1+"<br>");
document.write("8 value is boolean "+bool2+"<br>");
document.write("1 value is boolean "+bool3+"<br>");
document.write("An empty string is boolean "+bool4+"<br>");
document.write("String \"Hello\" is boolean "+bool5+"<br>");
document.write("String 'False' is boolean "+bool6+"<br>");
document.write("null is boolean "+bool7+"<br>");
document.write("NaN is boolean "+bool8);
</SCRIPT>
</BODY>
</HTML>
Working with the Number Object
<!DOCTYPE HTML>
<HEAD>
<TITLE>Number Test</TITLE>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
num= new Number('15.603')
document.write(num.toExponential()+ "<br>")
document.write(num.toFixed()+ "<br>")
document.write(num.toPrecision(3)+"<br>")
document.write(num.toString()+"<br>")
document.write(num.valueOf()+"<br>")
</SCRIPT>
</BODY>
</HTML>
Working with the Array Object
<!DOCTYPE HTML>
<HEAD>
<TITLE>Array Functions</TITLE>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
myarray1=new Array("Sunday", "Monday", "Tuesday","Wednesday","Thursday");
myarray2=new Array(1,2,3,4,5);
document.write("Array 1 : "+myarray1+"<BR/>")
document.write("Array 2 : "+myarray2+"<BR/>")
document.write("Concatenated two arrays : "+myarray1.concat(myarray2+"<BR/>"))
document.write("Joined two arrays : "+myarray1.join(myarray2)+"<BR/>")
document.write("Array 1 pop out : "+myarray1.pop()+"<BR/>")
document.write("Reversed array 1: "+myarray1.reverse()+"<BR/>")
document.write("Shifted array 1 : "+myarray1.shift()+"<BR/>")
document.write("Sorted array 1 : "+myarray1.sort()+"<BR/>")
document.write("Array 2 in string format "+myarray2.toString()+"<BR/>")
</SCRIPT>
</BODY>
</HTML>
Working with the Date Object
<!DOCTYPE HTML>
<HEAD>
<TITLE>Date Functions</TITLE>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
var mydate= new Date();
document.write("Today the date is:"+mydate.getDate()+"/"+ (mydate.getMonth()+1)+"/"+mydate.getFullYear()+ "<BR/>");
document.write("The time is:"+mydate.getHours()+":" +mydate.getMinutes()+":"+mydate.getSeconds()+"<BR/>");
</SCRIPT>
</BODY>
</HTML>
Working with math object
<!DOCTYPE HTML>
<HEAD>
<TITLE>Math Functions</TITLE>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
document.write("Floor : "+Math.floor(12.6)+"<BR/>");
document.write("Log : "+Math.log(12.6)+"<BR/>");
document.write("Max : "+Math.max(12,34,15,65)+"<BR/>");
document.write("Min : "+Math.min(12,34,15,65)+"<BR/>");
document.write("Pow : "+Math.pow(10,2)+"<BR/>");
document.write("Random : "+Math.random()+"<BR/>");
document.write("Round : "+Math.round(12.6)+"<BR/>");
document.write("Sin : "+Math.sin(45)+"<BR/>");
document.write("Sqrt : "+Math.sqrt(16)+"<BR/>");
document.write("Tan : "+Math.tan(45)+"<BR/>");
document.write("Exp : "+math.exp(10)+"<BR/>");
</SCRIPT>
</BODY>
</HTML>
No comments:
Post a Comment