project 2: introduction to object-oriented programming essentials for design javascript level one...

Project 2: Introduction to Object-Oriented Programming

Essentials for DesignJavaScript

Level OneMichael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 2

Objectives

Create objects and classes Use basic methods Manipulate properties Use common properties Incorporate events Apply correct syntax


Why Would I Do This ?

JavaScript is an object-oriented programming language Object-oriented programming (OOP)

Is a style of programming Relies on reusing objects in multiple computer programs

A class represents the definition of an object A class doesn’t actually exist in physical form; rather, it

simply describes an object


Why Would I Do This ? (continued)

Objects are like nouns that you can use in the JavaScript language

You can use other aspects of JavaScript to describe: the characteristics of the object

(the equivalent of adjectives) what the object does (comparable

to verbs)


Why Would I Do This ? (continued) Earlier programming languages used a strict

sequence of commands, which were usually numbered in the order they were executed This worked well for simple tasks, but quickly

became cumbersome as applications grew in complexity

An OOP language is loosely organized You define an object once, and then use it

anywhere you choose — without having to rewrite the code you used to define the object



Methods represent actions that an object can perform Methods can accomplish a

variety of tasks, depending on the object



Properties represent characteristics of an object: They are often useful to:

change the property of an object to suit a specific purpose

discover the value of a specific property


Visual Summary All OOP languages and environments include

common characteristics in: Grammar Syntax Construction

All OOP languages contain: Classes Objects Methods Properties Events


Visual Summary (continued)

JavaScript uses dot syntax Dot syntax:

Is a special kind of syntax (the set of rules that dictate how the language is written), to show the relationship of the items in the code

Periods are used within the code to note how items relate to one another

Example of JavaScript dot syntax


Visual Summary (continued)

Dot syntax uses a “top-down” method of writing code

Periods (dots) are placed between the words to denote the hierarchy of the objects from the generic to the specific

Dot syntax is one part of the overall JavaScript syntax


Visual Summary (continued) Examples of JavaScript syntax rules include

but are not limited to: Case sensitivity, which means that a program will

distinguish between uppercase and lowercase letters

You must use semi-colons to denote the end of the line of code

When text strings are used in methods, you must enclose them within matching quotes

More JavaScript syntax rules


Objects and Classes

In an object-oriented programming environment, code is organized into objects By using objects, you can group commands

according to how humans categorize information Objects can include sub-objects or

subcategories A sub-object is part of another object

Example of classes and their objects


Objects and Classes (continued) Objects can assume many

forms in JavaScript: The window object

represents the browser window

The document object represents the HTML document loaded into the browser window

A form object represents a form in the HTML document


Objects and Classes (continued)

Use the Window Object When an event occurs, programmers say that it

fires Change the <body> tag to the following:

<body onBlur="window.focus()">

The onBlur event fires when the user chooses a different window by clicking on a different program or different browser window

This causes the browser to blur the current window and focus on the new window



The idea behind focus and blur is very prevalent in modern operating systems: If an element has focus, any key that you press is

directed to that element You can use other objects to draw focus to other

elements, such as a field in a form When you draw focus to an element, another

element is automatically blurred; only one element can be in focus at any given time



Use the Document Object The document object represents the HTML code

shown in the browser window Sub-objects of the document object represent

various HTML elements in the page Since the document object represents the HTML

code in the document, it is extremely useful The document object is a sub-object of the

window object Example of using the Document Object



Use the Math Object The Math object allows you to complete various

calculations The random() method is used to generate random

numbers The Math object is always capitalized, unlike most

other objects, which are lowercase

Example of using the Math Object


Using Basic Methods

Aside from describing objects, you can use dot syntax to write other aspects of JavaScript, including methods

Methods represent actions that objects can perform; they are the “verbs” of the object-oriented programming language

A code statement that uses a method is often referred to as a method call


Using Basic Methods (continued)

Methods are always written in the form “methodName()” The parentheses indicate that this is a method If information appears within the parentheses,

such as a number or text, it indicates that the information is being passed to the method

For some methods, no information is required; for other methods, however, specific information is required to achieve the desired action



Use the prompt() Method You use the prompt() method to ask a question The prompt() method is similar to the alert()

method, but the prompt() method allows the user to type in a response to the question being asked

The prompt() method can pass two values one value is the message that appears in the prompt

window the second value is the default message that appears in

the answer field

Example of using the prompt() Method



Return Information from a Method You can use the prompt() method to return

information to the script Changing the prompt statement to match the

following:answer = prompt("What’s your favorite color?","");

creates a temporary storage space for the information that will be returned from the method; the storage space is named answer

Example of returning information from a method



<html><head><title>math.html – demonstrates the

Math object and sqrt()method</title></head><body><script language="JavaScript">window.alert("The square root of 1600 is

" + Math.sqrt(1600));</script></body></html>

Notice how the script uses the Math.sqrt() method within the window.alert() method

Using Methods within Methods

The square root is calculated and returned


Manipulating Properties

Properties are characteristics of an object If you want to access a property of an object, you

can do so using dot syntax Each property is used to store one piece of

information about an object For example, if you want to change the color of

the car to green, you would type the following statement:

myCar.color="green";


Manipulating Properties (continued)

Change Properties of Objects You can change properties of the JavaScript

document object Example of changing the properties of the do

cument object : the default link colors of the HTML page



Display Properties of Objects JavaScript can output the value of a property

Example of displaying the vlinkColor and alinkColor properties



Delete the Browser’s History List When you view a Web page, your browser uses

an internal history list to determine whether the page was recently viewed, and if it should display links as visited

You can delete the browser’s history list Example of how to delete the browser’s history list in IE Example of how to delete the browser’s history list in Net

scape


Incorporating Events

Events are occurrences that the programming environment detects

Event handlers are JavaScript keywords that detect events

When an event occurs, it “fires” You can use event handlers if the class of the

object allows the event handler


Incorporating Events (continued) Use an Inline JavaScript Event

Event handlers are usually used as inline JavaScript; they often appear as attributes of an HTML tag

Events are usually attached to HTML tags as properties of the tag

Inline event handlers are case insensitive because they are an extension to HTML, and HTML is case insensitive

Example of how event handlers are used to detect events


Understanding Syntax Requirements

Each language has its own set of syntax requirements These requirements are in place for two

reasons: the interpreter for the language is typically quite

limited; interpreters become “confused” by code that doesn’t follow established syntax rules

following syntax rules ensures that others do not confuse the intent of your statements


Understanding Syntax Requirements (continued)

Use Semi-Colons to End Statements Although not always technically required, inserting

semi-colons at the ends of statements is good programming practice; it prevents errors in some situations.

Example of how missing semicolons can cause errors



Correct Text String Quote Errors JavaScript uses pairs of quotes to note the

beginning and end of a text string You can use either single or double quotes, but

you must use them in matching pairs Improper mix of single and double quotes can

introduce another kind of syntax error Example of improper mix of single and doubl

e quotes



Use White Space for Code Formatting A token, such as document.writeln, is a keyword

or other text element that has meaning to the interpreter

You must not divide tokens with spaces or tabs Example of error caused by dividing tokens w

ith spaces or tabs

project 2: introduction to object-oriented programming essentials for design javascript level one...

Documents

copyright c

document object

window object

primary object

dot syntax dot syntax

correct syntax slide

continued methods

javascript language