JavaScript Objects

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-basedprogramming 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

Real World Objects (2) • Example: Imagine we have a Person object

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:

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>

document Object example #2 <script> document.write(“<h1>Introduction</h1>”); document.write(“<imgsrc=‘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 • In the above statement, we are calling the alert() method of the window object • We pass as an argument to the alert( ) method the thestring “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 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> varname; name = window.prompt(“Whats your name stranger?”); window.alert("Welcome " + name + " to the world of JavaScript!"); </script> </body> </html> Declare the variable name Prompt user for name Concatenate strings

JavaScript Objects - DOM