Document Object - Capital Community College

Transcript Document Object - Capital Community College

JavaScript Objects - DOM
CST 200 JavaScript
Objectives
•
•
•
•
•
Introduce JavaScript objects
Introduce Document Object Model
Introduce window object
Introduce document object
Use document.write() method to output
information on a web page
JavaScript Objects
• JavaScript is an object-based programming
language
– Programmer focuses on objects needed to solve a
problem
• An object represents a real-world entity
• An object contains properties and methods
– Properties are attributes that distinguish one object
from another
– Methods are functions or actions you want an object
perform
Real World Objects
• Humans interact with objects in the real world
• Example: Imagine we have a Car object
Properties
Methods
make
start()
model
forward()
mpg
reverse()
color
shutOff()
Real World Objects (2)
• Example: Imagine we have a Person object
Properties
Methods
first_name
printName()
last_name
printAge()
date_of_birth
showAvatar()
email
sendMessage()
Real World Objects Exercise
• Example: Imagine we are building a Checkers
game for a website and we have a Checkers
object. List some properties and methods:
Properties
Methods
dot Notation
• JavaScript uses the dot notation, which
specifies the syntax (rule) for accessing the
properties and methods of an object
• Syntax
object.property
object.method()
Document Object Model
• To manipulate HTML pages and elements within,
web programmers need a model that identifies each
HTML element and associated attributes
• Document Object Model (DOM) specification from
World Wide Web Consortium (W3C) does this
– Platform and language-neutral
– Allows dynamic update to content and structure of
web pages
Netscape Document Object Model
Document Object Model (cont)
• Document Object Model defines objects that
correspond to webpage documents and
elements within
• Objects have properties and methods, and
respond to events
• Properties – specify attributes or characteristic of
object
• Methods – specify functions object can perform
• Events – methods corresponding to user actions
document Object
• In the DOM, the document object represents
the current document displayed by the
browser
– One of the most commonly used JavaScript
objects
– Any text, graphics or any information displayed on
a web page is part of the document object
– Common use of the document object is to add
new text to a web page
document.write() method
• To write text to a Web page with JavaScript,
use the method
document.write(“text”);
where text is the HTML code to be written to
the Web page
document Object example #1
• This script outputs “Hello World” to the browser
<html>
<head><title>Hello World</title></head>
<body>
<h1>JavaScript Example #1</h1>
<script>
<!–
// output Hello World
document.write(“Hello World”);
-->
</script>
</body>
</html>
13
document Object example #2
<script>
document.write(“<h1>Introduction</h1>”);
document.write(“<img src=‘home.jpg’ alt=‘home’ />”);
</script>
• document.write() method can output html tags that
will be parsed and rendered as html elements by the
web browser
window Object
• In the DOM, the window object represents the
current browser window
– In tabbed browsers, each tab contains its own
window object
– Provides properties and methods for manipulating
the browser window
– alert() method is used to display a message box
– prompt() method is used to display a dialog box
window Object example #1
<script>
window.alert("Welcome to JavaScript!");
</script>
• In the above statement, we are calling the
alert() method of the window object
• We pass as an argument to the alert( ) method
the the string “Welcome to JavaScript!”
window Object example #2
• This script displays a message in a popup window
<html>
Declare and initialize
variable name
<body>
<script>
var name = 'Seth Freeman';
window.alert("Welcome " + name + " to the world of JavaScript!");
</script>
</body>
Concatenate strings
</html>
17
window Object example #3
• This script gets a string value from the user and
displays a message with that value
<html>
<body>
<script>
Declare the variable name
Prompt user for name
var name;
name = window.prompt(“Whats your name stranger?”);
window.alert("Welcome " + name + " to the world of JavaScript!");
</script>
</body>
</html>
Concatenate strings
18

Document Object - Capital Community College

Transcript Document Object - Capital Community College

Directory