Embed Size (px)
Citation preview
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
• Syntaxobject.propertyobject.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
Net
scap
e D
ocum
ent O
bjec
t Mod
el
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 methoddocument.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
• document.write() method can output html tags that will be parsed and rendered as html elements by the web browser
<script> document.write(“<h1>Introduction</h1>”); document.write(“<img src=‘home.jpg’ alt=‘home’ />”);
</script>
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
• 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!”
<script>window.alert("Welcome to JavaScript!");
</script>
window Object example #2
• This script displays a message in a popup window
<html><body><script> var name = 'Seth Freeman'; window.alert("Welcome " + name + " to the world of JavaScript!");</script></body></html>
Declare and initialize variable name
17
Concatenate strings
window Object example #3• This script gets a string value from the user and
displays a message with that value
<html><body><script>
var name; name = window.prompt(“Whats your name stranger?”); window.alert("Welcome " + name + " to the world of JavaScript!");
</script></body></html>
Declare the variable name
18
Concatenate strings
Prompt user for name
