Essentials for Design JavaScript Level One Author Name - Kuroski.net

tacitmarigoldInternet et le développement Web

25 janv. 2014 (il y a 3 années et 7 mois)

241 vue(s)







Project 2: Introduction to Object
-
Oriented
Programming

Essentials for Design

JavaScript

Level One

Michael 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

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

3

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

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

4

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)

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

5

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


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

6

Why Would I Do This ?

(continued)


Methods represent
actions that an object
can perform


Methods can accomplish a
variety of tasks, depending
on the object

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

7

Why Would I Do This ?

(continued)


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

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

8

Visual Summary


All OOP languages and environments include
common characteristics in:


Grammar


Syntax


Construction


All OOP languages contain:


Classes


Objects


Methods


Properties


Events

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

9

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

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

11

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

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

12

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


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

14

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

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

16

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

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

17

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

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

18

Objects and Classes

(continued)


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

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

19

Objects and Classes

(continued)


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

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

21

Objects and Classes

(continued)


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

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

23

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


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

24

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


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

25

Using Basic Methods (continued)


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

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

27

Using Basic Methods (continued)


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

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

29

Using Basic Methods (continued)

<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

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

30

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";


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

31

Manipulating Properties (continued)


Change Properties of Objects


You can change properties of the JavaScript
document object


Example of changing the properties of the
document object : the default link colors of
the HTML page


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

33

Manipulating Properties (continued)


Display Properties of Objects


JavaScript can output the value of a property


Example of displaying the vlinkColor and
alinkColor properties

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

35

Manipulating Properties

(continued)


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
Netscape



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

38

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

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

39

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



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

41

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

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

42

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



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

44

Understanding Syntax
Requirements (continued)


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
double quotes



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

46

Understanding Syntax
Requirements (continued)


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
with spaces or tabs