© 2000 – all rights reserved - page 1 introduction to javascript programming part two

© 2000 – All Rights Reserved - Page © 2000 – All Rights Reserved - 1© 2000 – All Rights Reserved - Page © 2000 – All Rights Reserved - Page 11

Introduction toIntroduction toJavaScript ProgrammingJavaScript ProgrammingIntroduction toIntroduction toJavaScript ProgrammingJavaScript Programming

Part Two


Today’s TopicsToday’s TopicsToday’s TopicsToday’s Topics• Objects, Properties, and Methods• Conditionals• Functions• JavaScript Source Files• Events and Event Handlers• Frames and Arrays


Tags, Attributes, ValuesTags, Attributes, ValuesTags, Attributes, ValuesTags, Attributes, Values

• Tag is a markup instruction surrounded by < and > signs

• Attributes are characteristics of a Tag• Values are assigned to Attributes

Figure I-1, Page I.3


Objects, Properties, & ValuesObjects, Properties, & ValuesObjects, Properties, & ValuesObjects, Properties, & Values• An object is a real-world entity

– carl• An object is described by properties• Properties differentiate among objects

– carl.build• Properties are assigned values

– carl.build = “sturdy”

object.property = “value”object.property = “value”


Objects, Methods, & ArgumentsObjects, Methods, & ArgumentsObjects, Methods, & ArgumentsObjects, Methods, & Arguments• A method is a behavior you want an

object to perform– carl.eatless

• An argument is a value given to the method– carl.eatless(“bacon”)– carl.eatmore(“chicken”)

object.method(“argument”)object.method(“argument”)


Object Hierarchy (partial)Object Hierarchy (partial)Object Hierarchy (partial)Object Hierarchy (partial)

• Some objects can be properties of another object, for instance…

• A document is an object on its own, but

• A document might be a property of a window


ConditionalsConditionalsConditionalsConditionals• Useful for validating form data• Compare data to a desired value• Two possible outcomes: True or False• The If statements• The While statement


Conditional ExamplesConditional ExamplesConditional ExamplesConditional Examples


If StatementsIf StatementsIf StatementsIf Statements• Decision making a.k.a. flow control• Execute specific programming if a

conditional expression returns “True”

if (conditional expression) {statement(s);

}


}


If…Else StatementsIf…Else StatementsIf…Else StatementsIf…Else Statements• Execute alternate programming if a

conditional expression returns “False”


}else {

statement(s);}


}else {

statement(s);}


While LoopWhile LoopWhile LoopWhile Loop• Code which is to execute repeatedly

while or as long as a condition exists

While (conditional expression) {statement(s);

}

While (conditional expression) {statement(s);

}


While Loop ExampleWhile Loop ExampleWhile Loop ExampleWhile Loop Example

var count = 1;while (count <= 5) {

document.writeln(count);++count;

}document.writeln(“All finished.”);

var count = 1;while (count <= 5) {

document.writeln(count);++count;

}document.writeln(“All finished.”);

12345All finished.

12345All finished.


FunctionsFunctionsFunctionsFunctions

• Individual programming statements often grouped into “procedures”

• In JavaScript procedures are called functions

• Defining functions• Calling functions


JavaScript Source FilesJavaScript Source FilesJavaScript Source FilesJavaScript Source Files• An external file ending in *.js• Contains no HTML• Contains only JavaScript• Easy repetitive use of longer code• Can be shared among multiple HTML

pages


EventsEventsEventsEvents• An event is an action occurring on a

web page, usually by the user– A mouse passing over a button– A user clicking a hyperlink– An insertion point (blinking cursor) in a form

textbox– Clicking Stop on the browser’s icon bar


EventEventHandlersHandlers

EventEventHandlersHandlers

Triggeringevents are

actions associated with event

handlers


FormsFormsFormsForms• Many forms use CGI (Common

Gateway Interface) programs written in Perl for server-side data processing

• Other forms simply send the results to an email address

• JavaScript and Event Handlers enable useful processes based on the contents of forms or the events occurring on forms


HTML’s <INPUT> TagHTML’s <INPUT> TagHTML’s <INPUT> TagHTML’s <INPUT> Tag

TYPE

buttoncheckboxfilehiddenimagepasswordradioresetsubmittext

onblur=“script”

onchange=“script”

onclick=“script”

ondblclick=“script”

onfocus=“script”

onkeydown=“script”

onkeyup=“script”

onselect=“script”

etc.


Frames and JavaScriptFrames and JavaScriptFrames and JavaScriptFrames and JavaScript

• Frames allow browser windows to be split into smaller units

• In JavaScript, each frame is an object• Therefore, JavaScript can apply

properties and methods to each frame


ArraysArraysArraysArrays

• An array contains a set of data represented by a single variable name

• An array is a JavaScript object• Define one more element than you need• Leave element [0] empty


Test Your KnowledgeTest Your KnowledgeTest Your KnowledgeTest Your Knowledge• Page I.17• True/False Questions 6-10• Multiple Choice Questions 7-10


Introduction toIntroduction toJavaScript ProgrammingJavaScript ProgrammingIntroduction toIntroduction toJavaScript ProgrammingJavaScript Programming

Part Two

© 2000 – all rights reserved - page 1 introduction to javascript programming part two

Documents