WEB DESIGNING VNSGU UNIT 4 JAVASCRIPT OBJECTS
divyapatel123440
28 views
53 slides
Jun 01, 2024
Slide 1 of 53
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
About This Presentation
WEB DESIGNING VNSGU UNIT 4 JAVASCRIPT OBJECTS
Slide Content
UNIT4:JAVASCRIPT OBJECTS
1.Creatingobject:(Byobjectliteral,Bycreatinginstanceof
Object,Byusinganobjectconstructor)
2.Dateobject:
1.Dateconstructor:Date(),Date(milliseconds),
Date(dateString),Date(year,month,day,hours,minutes,
seconds,milliseconds)
2.DateMethods:getDate(),getDay(),getMonth(),
getHours(),
setDate,setMonth(),setDay(),toString()
1.Creatingobject:(Byobjectliteral,Bycreatinginstanceof
Object,Byusinganobjectconstructor)
2.Dateobject:
1.Dateconstructor:Date(),Date(milliseconds),
Date(dateString),Date(year,month,day,hours,minutes,
seconds,milliseconds)
2.DateMethods:getDate(),getDay(),getMonth(),
getHours(),
setDate,setMonth(),setDay(),toString()
3.DocumentObjectModel(DOM):
1. DOMconcepts
2. DOMproperties
3. DOMmethods:
•write(),
•writeln(),
•getElementById(),
•getElementsByName()
1. DOMconcepts
2. DOMproperties
3. DOMmethods:
•write(),
•writeln(),
•getElementById(),
•getElementsByName()
4.1 Document Object Model (DOM):
1. DOMconcepts
2. DOMproperties
3. DOMmethods:
•write(),
•writeln(),
•getElementById(),
•getElementsByName()
1. DOMconcepts
2. DOMproperties
3. DOMmethods:
•write(),
•writeln(),
•getElementById(),
•getElementsByName()
4.1.1DOMconcepts
•TheDocumentObjectModel(DOM)isan
applicationprogramminginterface(API)for
manipulatingHTMLdocuments(add,remove,
andmodifypartsofanHTMLdocument).
•Itdefinesthelogicalstructureofthedocuments
intheformofatreeofobjectswhereeach
HTMLelementisrepresentedasanode.
•Whenawebpageisloaded,thebrowsercreates
aDocumentObjectModelofthepage.
•TheDocumentObjectModel(DOM)isan
applicationprogramminginterface(API)for
manipulatingHTMLdocuments(add,remove,
andmodifypartsofanHTMLdocument).
•Itdefinesthelogicalstructureofthedocuments
intheformofatreeofobjectswhereeach
HTMLelementisrepresentedasanode.
•Whenawebpageisloaded,thebrowsercreates
aDocumentObjectModelofthepage.
<!doctype html>
<html>
<head>
<title>My title</title>
</head>
<body>
<h1> My header</h1>
<a href=“link.html”>My link</a>
</body>
</html>
<html>
<head>
<title>My title</title>
</head>
<body>
<h1> My header</h1>
<a href=“link.html”>My link</a>
</body>
</html>
TheHTMLDOMTreeofObjects
Withtheobjectmodel,JavaScriptgetsallthepowerit
needstocreatedynamicHTML:
•JavaScriptcanchangealltheHTMLelementsinthe
page
•JavaScriptcanchangealltheHTMLattributesinthe
page
•JavaScriptcanchangealltheCSSstylesinthepage
•JavaScriptcanremoveexistingHTMLelementsand
attributes
•JavaScriptcanaddnewHTMLelementsand
attributes
•JavaScriptcanreacttoallexistingHTMLeventsin
thepage
•JavaScriptcancreatenewHTMLeventsinthepage
needstocreatedynamicHTML:
•JavaScriptcanchangealltheHTMLelementsinthe
page
•JavaScriptcanchangealltheHTMLattributesinthe
page
•JavaScriptcanchangealltheCSSstylesinthepage
•JavaScriptcanremoveexistingHTMLelementsand
attributes
•JavaScriptcanaddnewHTMLelementsand
attributes
•JavaScriptcanreacttoallexistingHTMLeventsin
thepage
•JavaScriptcancreatenewHTMLeventsinthepage
•NOTE:IntheDOM,allHTMLelementsare
definedasObjects.Soitwillhaveboth
propertyandmethod.
•Thedocumentobjectrepresentsyourweb
page.
•IfyouwanttoaccessanyelementinanHTML
page,youalwaysstartwithaccessingthe
documentobject.
definedasObjects.Soitwillhaveboth
propertyandmethod.
•Thedocumentobjectrepresentsyourweb
page.
•IfyouwanttoaccessanyelementinanHTML
page,youalwaysstartwithaccessingthe
documentobject.
4.1.2DOMproperties
□DOMpropertiesarevalues(ofHTMLElements)
thatyoucansetorchange.
□DOMpropertiesareaccessedusingthe
“document” object.
□Syntax:
■document.property_name
□DOMpropertiesarevalues(ofHTMLElements)
thatyoucansetorchange.
□DOMpropertiesareaccessedusingthe
“document” object.
□Syntax:
■document.property_name
Properties Description
links
refers to all <a> and <area> elements that have a “href” attributes
anchors refers to all <a> elements that have “name” attributes
scripts refers to all <script> elements
images refers to all <img> elements
doctype Specify the document’s type
head
Refers to all < head> elements
Forms
refers to all <form> elements
cookie returns all name/value pairs of cookies in the document
Domain refersdomainnameoftheserver
lastModifiedget the date and time of the last updated document
Title
refers to <title> of the document
URL specify the URL of the Document
links
refers to all <a> and <area> elements that have a “href” attributes
anchors refers to all <a> elements that have “name” attributes
scripts refers to all <script> elements
images refers to all <img> elements
doctype Specify the document’s type
head
Refers to all < head> elements
Forms
refers to all <form> elements
cookie returns all name/value pairs of cookies in the document
Domain refersdomainnameoftheserver
lastModifiedget the date and time of the last updated document
Title
refers to <title> of the document
URL specify the URL of the Document
<html>
<body>
<p id="demo">Hello Javascript</p>
<script>
document.getElementById("demo").innerHTM
L = "Hello World!";
</script>
</body>
</html>
<body>
<p id="demo">Hello Javascript</p>
<script>
document.getElementById("demo").innerHTM
L = "Hello World!";
</script>
</body>
</html>
TheinnerHTMLpropertyisusefulforgetting
orreplacingthecontentofHTMLelements.
orreplacingthecontentofHTMLelements.
4.1.3DOMmethods:
DOMmethodsareactionsyoucan
perform(onHTMLElements).
□write()
□writeln()
□getElementById()
□getElementsByName()
DOMmethodsareactionsyoucan
perform(onHTMLElements).
□write()
□writeln()
□getElementById()
□getElementsByName()
write()
□WritesometextdirectlytotheHTML
document.
□Syntax:
■document.write(exp1, exp2, exp3, ...)
□WritesometextdirectlytotheHTML
document.
□Syntax:
■document.write(exp1, exp2, exp3, ...)
Example:
<script>
document.write(“VNSGU”);
</script>
<script>
document.write(“VNSGU”);
</script>
writeln()
□Thewriteln()methodisidenticaltothe
document.write()method,withthe
additionofwritinganewlinecharacter
aftereachstatement.
□Thewriteln()methodisidenticaltothe
document.write()method,withthe
additionofwritinganewlinecharacter
aftereachstatement.
Example:
<script>
document.writeln(“VNSGU”);
document.writeln(“SURAT”);
</script>
<script>
document.writeln(“VNSGU”);
document.writeln(“SURAT”);
</script>
getElementById()
□ThegetElementById()methodreturnsthe
elementthathastheIDattributewiththe
specifiedvalue.
□Syntax:
■document.getElementById(elementID)
□ThegetElementById()methodreturnsthe
elementthathastheIDattributewiththe
specifiedvalue.
□Syntax:
■document.getElementById(elementID)
Example:
<html>
<head>
<script>
function test()
{
var s=document.getElementById("txt").value;
document.write(s);
}
</script>
</head>
<body>
Enter Your Name :<input type="text" id="txt"> <br>
<input type="button" value="Click Here" onclick="test();">
</body>
</html>
<html>
<head>
<script>
function test()
{
var s=document.getElementById("txt").value;
document.write(s);
}
</script>
</head>
<body>
Enter Your Name :<input type="text" id="txt"> <br>
<input type="button" value="Click Here" onclick="test();">
</body>
</html>
getElementsByName()
□ThegetElementsByName()methodreturns
acollectionofallelementsinthe
documentwiththespecifiedname.
□TheHTMLCollectionobjectrepresentsa
collectionofnodes.Thenodescanbe
accessedbyindexnumbers.Theindexstarts
at0.
□Syntax:
■document.getElementsByName(name)
□ThegetElementsByName()methodreturns
acollectionofallelementsinthe
documentwiththespecifiedname.
□TheHTMLCollectionobjectrepresentsa
collectionofnodes.Thenodescanbe
accessedbyindexnumbers.Theindexstarts
at0.
□Syntax:
■document.getElementsByName(name)
Example:
<html>
<head>
<script>
function test()
{
var s1=document.getElementsByName("txt")[0].value;
var s2=document.getElementsByName("txt")[1].value;
document.write(s1+" "+s2);
alert(s1+" "+s2);
}
</script>
</head>
<body>
Enter Your First Name :<input type="text" name="txt"> <br>
Enter Your Last Name :<input type="text" name="txt"> <br>
<input type="button" value="Click Here" onclick="test();">
</body>
</html>
<html>
<head>
<script>
function test()
{
var s1=document.getElementsByName("txt")[0].value;
var s2=document.getElementsByName("txt")[1].value;
document.write(s1+" "+s2);
alert(s1+" "+s2);
}
</script>
</head>
<body>
Enter Your First Name :<input type="text" name="txt"> <br>
Enter Your Last Name :<input type="text" name="txt"> <br>
<input type="button" value="Click Here" onclick="test();">
</body>
</html>
4.2Creatingobject
InJavaScript,almost"everything"isanobject.
•Booleanscanbeobjects(ifdefinedwith
thenewkeyword)
•Numberscanbeobjects(ifdefinedwith
thenewkeyword)
•Stringscanbeobjects(ifdefinedwith
thenewkeyword)
•Datesarealwaysobjects
•Mathsarealwaysobjects
•Regularexpressionsarealwaysobjects
•Arraysarealwaysobjects
•Functionsarealwaysobjects
•Objectsarealwaysobjects
InJavaScript,almost"everything"isanobject.
•Booleanscanbeobjects(ifdefinedwith
thenewkeyword)
•Numberscanbeobjects(ifdefinedwith
thenewkeyword)
•Stringscanbeobjects(ifdefinedwith
thenewkeyword)
•Datesarealwaysobjects
•Mathsarealwaysobjects
•Regularexpressionsarealwaysobjects
•Arraysarealwaysobjects
•Functionsarealwaysobjects
•Objectsarealwaysobjects
4.2Creatingobject
WithJavaScript,youcandefineandcreate
yourownobjects.
Therearedifferentwaystocreatenew
objects:
1.Createasingleobject,usinganobject
literal.
2.Createasingleobject,withthekeyword
new.
3.Defineanobjectconstructor,andthen
createobjectsoftheconstructedtype.
WithJavaScript,youcandefineandcreate
yourownobjects.
Therearedifferentwaystocreatenew
objects:
1.Createasingleobject,usinganobject
literal.
2.Createasingleobject,withthekeyword
new.
3.Defineanobjectconstructor,andthen
createobjectsoftheconstructedtype.
Byobjectliteral
□Theobjectliteralisaneasywayof
creating an object.
□Usinganobjectliteral,youbothdefineand
createanobjectinonestatement.
□Anobjectliteralisalistofname:valuepairs
(likeage:50)insidecurlybraces{}.
□Syntax:
var object_name={ property1:value1,
property2:value2,….
propertyN:valueN
};
□Theobjectliteralisaneasywayof
creating an object.
□Usinganobjectliteral,youbothdefineand
createanobjectinonestatement.
□Anobjectliteralisalistofname:valuepairs
(likeage:50)insidecurlybraces{}.
□Syntax:
var object_name={ property1:value1,
property2:value2,….
propertyN:valueN
};
Example
<html>
<head>
<script>
var student={name:"ram",location:"Ayodhya",
Age:10000};
document.write(student.name);
</script>
</head>
</html>
<html>
<head>
<script>
var student={name:"ram",location:"Ayodhya",
Age:10000};
document.write(student.name);
</script>
</head>
</html>
BycreatinginstanceofObject
□Thesecondwaytocreateanobjectis
usingnewkeywordwithobject().
□Thenewoperatorisusedtocreatean
instanceofanobject.
□Dot.andsquarebrackets[]canbeusedto
specifypropertiesandmethods.
□Thesecondwaytocreateanobjectis
usingnewkeywordwithobject().
□Thenewoperatorisusedtocreatean
instanceofanobject.
□Dot.andsquarebrackets[]canbeusedto
specifypropertiesandmethods.
□Syntax:
■var object_name= new Object();
■Object_name.property_name=property_value;
//specify property using dot
■Object_name[“property_name”]=property_value;
// specify property using []
■var object_name= new Object();
■Object_name.property_name=property_value;
//specify property using dot
■Object_name[“property_name”]=property_value;
// specify property using []
Example
<html>
<head>
<script>
var student = new Object();
student.name="Ram";
student["location"]="Ayodhya";
document.write(student.name+"<br>");
document.write(student["location"]);
</script>
</head>
</html>
<html>
<head>
<script>
var student = new Object();
student.name="Ram";
student["location"]="Ayodhya";
document.write(student.name+"<br>");
document.write(student["location"]);
</script>
</head>
</html>
Byusinganobjectconstructor
□Firstcreateafunctionwithparameters
thenassignvaluetoeachparameters
usingthiskeyword.
□thiskeywordreferstothecurrentobject.
□Firstcreateafunctionwithparameters
thenassignvaluetoeachparameters
usingthiskeyword.
□thiskeywordreferstothecurrentobject.
□Syntax:
function function_name(parameter1,
parameter2,...., parametern)
{
this.parameter1=value1;
this.parameter2=value2;
...
this.parametern=valuen;
}
object_name= new function_name(value1,
value2,....valuen);
function function_name(parameter1,
parameter2,...., parametern)
{
this.parameter1=value1;
this.parameter2=value2;
...
this.parametern=valuen;
}
object_name= new function_name(value1,
value2,....valuen);
Example:
<html>
<head>
<script>
functionstud(name,location,age)
{
this.name=name;this.location=location;this.age=age;
}
student = new stud("Ram","Ayodhya",1000);
document.write(student.name+"<br>");
document.writeln(student.location+"<br>");
document.writeln(student.age);
</script>
</head>
</html>
<html>
<head>
<script>
functionstud(name,location,age)
{
this.name=name;this.location=location;this.age=age;
}
student = new stud("Ram","Ayodhya",1000);
document.write(student.name+"<br>");
document.writeln(student.location+"<br>");
document.writeln(student.age);
</script>
</head>
</html>
4.3Dateobject:
4.3.1 Date constructor:
•Date(),
•Date(milliseconds),
•Date(dateString),
•Date(year, month, day, hours,
minutes, seconds, milliseconds)
4.3.1 Date constructor:
•Date(),
•Date(milliseconds),
•Date(dateString),
•Date(year, month, day, hours,
minutes, seconds, milliseconds)
4.3.2 Date Methods:
•getDate(),
•getDay(),
•getMonth(),
•getHours(),
•setDate(),
•setMonth(),
•setDay(),
•toString()
•getDate(),
•getDay(),
•getMonth(),
•getHours(),
•setDate(),
•setMonth(),
•setDay(),
•toString()
Dateconstructor:
□Thepurposeofdateobjectistoworkwith
date(days,months,years)andtime
(milliseconds,seconds,minutes,hours).
□Dateobjectiscreatedusing newDate().
□Syntax:
vardateObj=newDate();
□Thepurposeofdateobjectistoworkwith
date(days,months,years)andtime
(milliseconds,seconds,minutes,hours).
□Dateobjectiscreatedusing newDate().
□Syntax:
vardateObj=newDate();
Date()
□Thisisthedefaultconstructorwithno
argument.
□ItinitializestheDateobjectwiththe
currentdateandtime.
□Thisisthedefaultconstructorwithno
argument.
□ItinitializestheDateobjectwiththe
currentdateandtime.
Example:
<html>
<head>
<script>
var dateObj= new Date();
document.write(dateObj);
</script>
</head>
</html>
<html>
<head>
<script>
var dateObj= new Date();
document.write(dateObj);
</script>
</head>
</html>
Date(milliseconds)
□Thismethodiswithintegerparameter.
□Itrepresentsthedateinmilliseconds.
□Syntax:
Date.getMilliseconds()
□Thismethodiswithintegerparameter.
□Itrepresentsthedateinmilliseconds.
□Syntax:
Date.getMilliseconds()
Example:
<html>
<head>
<script>
var dateObj= new Date();
document.write(dateObj.getMilliseconds());
</script>
</head>
</html>
<html>
<head>
<script>
var dateObj= new Date();
document.write(dateObj.getMilliseconds());
</script>
</head>
</html>
Date(dateString)
□AdateStringparameterisstringvalue
representingadate,intheformataccepted
bytheDate.parse()method.
□AdateStringparameterisstringvalue
representingadate,intheformataccepted
bytheDate.parse()method.
Example:
<html>
<head>
<script>
var str="8/25/2021";
dateObj= new Date(str);
document.write(dateObj);
</script>
</head>
</html>
<html>
<head>
<script>
var str="8/25/2021";
dateObj= new Date(str);
document.write(dateObj);
</script>
</head>
</html>
Date(year, month, day, [ hours,
minutes, seconds, milliseconds])
minutes, seconds, milliseconds])
Example:
<html>
<head>
<script>
bdate= new Date(1988,9,25,8,57,58,0);
document.write(bdate);
</script>
</head>
</html>
<html>
<head>
<script>
bdate= new Date(1988,9,25,8,57,58,0);
document.write(bdate);
</script>
</head>
</html>
4.2.2DateMethods:
□getDate()
□getDay()
□getMonth()
□getHours()
□setDate
□setMonth()
□setDay()
□toString()
□getDate()
□getDay()
□getMonth()
□getHours()
□setDate
□setMonth()
□setDay()
□toString()
getDate()
□Itreturnstheday(from1to31)ofthe
month.
□Itreturnstheday(from1to31)ofthe
month.
getDay()
□Itreturnsthedayoftheweek.
□Valueform0to6(SundaytoSaturday).
□Itreturnsthedayoftheweek.
□Valueform0to6(SundaytoSaturday).
getMonth()
□It returns the month.
□The value is from 0to 11(January to December).
□It returns the month.
□The value is from 0to 11(January to December).
getHours()
□Itreturnsthehours.
□Valueisfrom0to23.
□Itreturnsthehours.
□Valueisfrom0to23.
Example
<html>
<head>
<script>
var bdate= new Date();
document.write("Day of Month :"+bdate.getDate()+"<br>");
document.write("Day :"+bdate.getDay()+"<br>");
document.write("Month :"+bdate.getMonth()+"<br>");
document.write("Hour :"+bdate.getHours()+"<br>");
</script>
</head>
</html>
<html>
<head>
<script>
var bdate= new Date();
document.write("Day of Month :"+bdate.getDate()+"<br>");
document.write("Day :"+bdate.getDay()+"<br>");
document.write("Month :"+bdate.getMonth()+"<br>");
document.write("Hour :"+bdate.getHours()+"<br>");
</script>
</head>
</html>
setDate()
□Itsetsthedayofgivendateobject.
□Itsetsthedayofgivendateobject.
setMonth()
□Itsetsthedayofthemonthofgivendate
object.
□Itsetsthedayofthemonthofgivendate
object.
setDay()
□Itsetsthedayofthemonthofgivendate
object.
□Itsetsthedayofthemonthofgivendate
object.
toString()
□Itconvertsdateobjecttostringvalue.
□Itconvertsdateobjecttostringvalue.
Example
<html>
<head>
<script>
var bdate= new Date();
bdate.setDate(10);
bdate.setMonth(10);
bdate.toString();
document.write("Day of Month :"+bdate.getDate()+"<br>");
document.write("Day :"+bdate.getDay()+"<br>");
document.write("Month :"+bdate.getMonth()+"<br>");
document.write("To String :"+bdate.toString()+"<br>");
</script>
</head>
</html>
<html>
<head>
<script>
var bdate= new Date();
bdate.setDate(10);
bdate.setMonth(10);
bdate.toString();
document.write("Day of Month :"+bdate.getDate()+"<br>");
document.write("Day :"+bdate.getDay()+"<br>");
document.write("Month :"+bdate.getMonth()+"<br>");
document.write("To String :"+bdate.toString()+"<br>");
</script>
</head>
</html>
Tags
Categories
DesignDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 28
- Slides 53
- Age 570 days
Related Slideshows
1
MGV Residential Design projects for different clients, including a New Mexico Adobe project-1-.pdf
mannyvesa
39 views
16
EUNITED_Advocacy and Public Engagement through Visual Media
GeorgeDiamandis11
43 views
31
DESIGN THINKINGGG PPT 2 TOPIC IDEATION.pptx
HibaZaidi2
37 views
36
DESIGN THINKING CHAPTER 1 PPTT PPT 1.pptx
HibaZaidi2
43 views
112
Hinduism and Its History - PowerPoint Slides.pptx
ConorMcCormack10
40 views
20
Service Attributes of Manufactured Parts.pptx
MustafaEnesKrmac
37 views