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 PropertiesMethods makestart() modelforward() mpgreverse() colorshutOff()

Real World Objects (2) Example: Imagine we have a Person object PropertiesMethods first_nameprintName() last_nameprintAge() date_of_birthshowAvatar() 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: PropertiesMethods

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 Hello World JavaScript Example #1 <!– // output Hello World document.write(“Hello World”); --> Hello World JavaScript Example #1 <!– // output Hello World document.write(“Hello World”); --> 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 document.write(“ Introduction ”); document.write(“ ”); document.write(“ Introduction ”); document.write(“ ”);

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!” window.alert("Welcome to JavaScript!"); window.alert("Welcome to JavaScript!");

window Object example #2 This script displays a message in a popup window var name = 'Seth Freeman'; window.alert("Welcome " + name + " to the world of JavaScript!"); var name = 'Seth Freeman'; window.alert("Welcome " + name + " to the world of JavaScript!"); 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 var name; name = window.prompt(“Whats your name stranger?”); window.alert("Welcome " + name + " to the world of JavaScript!"); var name; name = window.prompt(“Whats your name stranger?”); window.alert("Welcome " + name + " to the world of JavaScript!"); Declare the variable name 18 Concatenate strings Prompt user for name