View
218
Download
0
Embed Size (px)
Citation preview
11
JavaScriptJavaScript
• Describe common uses of JavaScript in Web Describe common uses of JavaScript in Web pages.pages.
• Describe the purpose of the Document Describe the purpose of the Document Object Model and list some common events.Object Model and list some common events.
• Create a simple JavaScript using the Create a simple JavaScript using the <script> tag and the alert() method.<script> tag and the alert() method.
• Describe the considerations for XHTML Describe the considerations for XHTML conformance and JavaScript.conformance and JavaScript.
• Use variables, operators and the if control Use variables, operators and the if control structure.structure.
• Create a basic form validation script.Create a basic form validation script.
22
What isWhat isJavaScript?JavaScript?
Object-oriented scripting language. Object-oriented scripting language. Used to work with the objects associated with a Used to work with the objects associated with a
web page document --the window, the web page document --the window, the document, the elements such as forms, document, the elements such as forms, images, links, etcimages, links, etc
Originally developed by Netscape and called Originally developed by Netscape and called LiveScriptLiveScript
Netscape collaborated with Sun Microsystems Netscape collaborated with Sun Microsystems on modifications to the language and it was on modifications to the language and it was renamed JavaScript renamed JavaScript
JavaScript is NOT JavaJavaScript is NOT Java
33
Common UsesCommon Usesof JavaScriptof JavaScript
Display a message boxDisplay a message box Select list navigationSelect list navigation Edit and validate form informationEdit and validate form information Create a new window with a specified size Create a new window with a specified size
and screen positionand screen position Image RolloversImage Rollovers Status MessagesStatus Messages Display Current DateDisplay Current Date CalculationsCalculations
44
CodingCodingJavaScriptJavaScript
JavaScript code can be added to a JavaScript code can be added to a web page using two different web page using two different techniques:techniques:• Place Javascript code between <script> Place Javascript code between <script>
tags tags • Place Javascript code as part of an event Place Javascript code as part of an event
attached to an XHTML elementattached to an XHTML element
55
JavaScriptJavaScriptUsing <script> tagsUsing <script> tags
The script tagThe script tag A container tagA container tag May be placed in either the header or the body May be placed in either the header or the body
section of a web pagesection of a web page
<script language="JavaScript" type=”text/javascript”><script language="JavaScript" type=”text/javascript”>
<!- -<!- -
alert("Welcome to Our Site");alert("Welcome to Our Site");
// - ->// - ->
</script></script>
66
QuestionsQuestions1.1. Describe two uses of JavaScript.Describe two uses of JavaScript.
2.2. Describe two XHTML tag used to add Describe two XHTML tag used to add JavaScript to a Web page.JavaScript to a Web page.
3.3. True or False. JavaScript is the same as True or False. JavaScript is the same as Java.Java.
77
Document Object ModelDocument Object Model(DOM)(DOM)
The DOM defines The DOM defines every object and every object and element on a web element on a web page.page.
Its hierarchical Its hierarchical structure can be structure can be used to access used to access page elements page elements and apply styles and apply styles to page elements. to page elements.
A portion of the A portion of the DOM is shown at DOM is shown at the right.the right.
88
ObjectObject
An object is a thing or entity.An object is a thing or entity.• Browser windowBrowser window• Submit buttonSubmit button• Web page documentWeb page document
99
PropertyProperty A property is a characteristic or attribute A property is a characteristic or attribute
of an object.of an object.• The background color of a web page documentThe background color of a web page document
document.bgcolordocument.bgcolor
• The date the web page file was last modifiedThe date the web page file was last modifieddocument.lastmodifieddocument.lastmodified
• The src file of an image objectThe src file of an image objectimage1.srcimage1.src
1010
MethodMethod
A method is an action (a verb)A method is an action (a verb)• Writing text to a web page document Writing text to a web page document
document.write()document.write()
• Submitting a formSubmitting a formform1.submit()form1.submit()
1111
JavaScriptJavaScriptand Eventsand Events
Events are actions that the visitor to the web page can Events are actions that the visitor to the web page can take such as take such as • clicking (onclick), clicking (onclick), • placing the mouse on an element (onmouseover), placing the mouse on an element (onmouseover), • removing the mouse from an element (onmouseout),removing the mouse from an element (onmouseout),• loading the page (onload), loading the page (onload), • unloading the page (onunload), etc. unloading the page (onunload), etc.
JavaScript can be configured to perform actions when JavaScript can be configured to perform actions when these and other events occur. these and other events occur.
The JavaScript code is added directly to the XHTML tag The JavaScript code is added directly to the XHTML tag with the type of event as an attribute. with the type of event as an attribute.
The value of the event attribute will contain one or more The value of the event attribute will contain one or more JavaScript statements. JavaScript statements.
1212
Events Events
EventEvent Event HandlerEvent Handler
clickclick onclickonclick
loadload onloadonload
mouseovermouseover onmouseoveronmouseover
mouseoutmouseout onmouseoutonmouseout
submitsubmit onsubmitonsubmit
unloadunload onunloadonunload
1313
JavaScriptJavaScriptCoding for EventsCoding for Events
The sample code below will display an alert The sample code below will display an alert box when the mouse is placed over a link.box when the mouse is placed over a link.
<a href=”home.htm” onmouseover=”alert(‘Click to go home’)”>Home</a><a href=”home.htm” onmouseover=”alert(‘Click to go home’)”>Home</a>
1414
JavaScriptJavaScriptDebugging(1)Debugging(1)
Check the syntax of the statements that you typed - Check the syntax of the statements that you typed - pay very close attention to upper and lower case pay very close attention to upper and lower case letters, spaces, and quotations. letters, spaces, and quotations.
Verify that you have saved the page with your most Verify that you have saved the page with your most recent changes.recent changes.
Verify that you are testing the most recent version of Verify that you are testing the most recent version of the page (refresh or reload the page)the page (refresh or reload the page)
If you get an error message, Use the error messages If you get an error message, Use the error messages that are displayed by the browser. that are displayed by the browser.
1515
JavaScriptJavaScriptDebugging(2)Debugging(2)
Use the Firefox or Mozilla browser:Use the Firefox or Mozilla browser:• Type “javascript: in the address bar to view the Type “javascript: in the address bar to view the
JavaScript console.JavaScript console.• The JavaScript Console will indicate an issue and The JavaScript Console will indicate an issue and
the line numberthe line number• This may not be exactly where the problem isThis may not be exactly where the problem is• Sometimes the error is a one or two lines above Sometimes the error is a one or two lines above
the indicated line number. the indicated line number.
1616
QuestionsQuestions1.1. With respect to objects, describe the difference With respect to objects, describe the difference
between a property and a method. Feel free to between a property and a method. Feel free to use words like “thing,” “action,” “description,” use words like “thing,” “action,” “description,” “attribute,” and so forth.“attribute,” and so forth.
2.2. What is the difference between an event and an What is the difference between an event and an event handler?event handler?
3.3. Where are event handlers placed in the XHTML Where are event handlers placed in the XHTML document?document?
1717
VariableVariable
A variable is a placeholder for information.A variable is a placeholder for information. The variable is stored in the computer’s The variable is stored in the computer’s
memory (RAM).memory (RAM).
var userName;var userName;
userName = "Karen";userName = "Karen";
document.write(userName);document.write(userName);
1818
PromptsPrompts
prompt() methodprompt() method• Displays a message and accepts a Displays a message and accepts a
value from the uservalue from the user
myName = prompt(“prompt message”);myName = prompt(“prompt message”);
• The value typed by the user is The value typed by the user is stored in the variable myNamestored in the variable myName
1919
Arithmetic OperatorsArithmetic OperatorsOperatorOperator DescriptionDescription ExampleExample Value of Value of
QuantityQuantity
== assignassign quantity = quantity = 1010
1010
++ additionaddition quantity = quantity = 10 + 610 + 6
1616
-- subtractionsubtraction quantity = quantity = 10 - 610 - 6
44
** multiplicatimultiplicationon
quantity = quantity = 10 * 210 * 2
2020
// divisiondivision quantity = quantity = 10 / 210 / 2
55
2020
Comparison OperatorsComparison OperatorsOperatoOperato
rrDescriptionDescription ExampleExample Sample values of Sample values of
quantity that quantity that would result in would result in truetrue
= == = Double equals sign Double equals sign (equivalent)(equivalent)“is exactly equal “is exactly equal to”to”
quantity = = quantity = = 1010
1010
>> Greater thanGreater than quantity > 10quantity > 10 11, 12 (but not 10)11, 12 (but not 10)
> => = Greater than or equal Greater than or equal toto
quantity > = quantity > = 1010
10, 11, 1210, 11, 12
< < Less thanLess than quantity < 10quantity < 10 8, 9 (but not 10)8, 9 (but not 10)
< =< = Less than or equal toLess than or equal to quantity < = quantity < = 1010
8, 9, 108, 9, 10
! =! = Not equal toNot equal to quantity ! = quantity ! = 1010
8, 9, 11 (but not 10)8, 9, 11 (but not 10)
2121
Decision MakingDecision Making
if (condition)if (condition){{ … … commands to execute if condition commands to execute if condition
is trueis true} } else {else { … … commands to execute if condition commands to execute if condition
is falseis false}}
2222
FunctionFunction
A function is a block of one or more A function is a block of one or more JavaScript statements with a specific JavaScript statements with a specific purpose, which can be run when needed. purpose, which can be run when needed.
function function_name() function function_name() {{ ... JavaScript statements …... JavaScript statements …}}
2323
Defining the FunctionDefining the Function
function showAlert()function showAlert()
{{
alert("Please click OK to continue.");alert("Please click OK to continue.");
}}
Calling the FunctionCalling the FunctionshowAlert();showAlert();
2424
QuestionsQuestions
1.1. What is a function definition?What is a function definition?
2.2. Why do you call a function?Why do you call a function?
3.3. Can you call a function more than Can you call a function more than once?once?
2525
Form ValidationForm Validation
It is common to use JavaScript to validate It is common to use JavaScript to validate form information before submitting it to form information before submitting it to the Web server.the Web server.• Is the name entered?Is the name entered?• Is the e-mail address of correct format?Is the e-mail address of correct format?• Is the phone number in the correct format?Is the phone number in the correct format?
See Hands-on Practice 14.8See Hands-on Practice 14.8
2626
Validating Form FieldsValidating Form Fields
Use the “” or null to check to Use the “” or null to check to determine if a form field has determine if a form field has informationinformation
if (document.forms[0].userName.value == "" )if (document.forms[0].userName.value == "" )
{{
alert("Name field cannot be empty.");alert("Name field cannot be empty.");
return false;return false;
} // end if } // end if
2727
JavaScript & AccessibilityJavaScript & Accessibility
Don’t expect JavaScript to always function Don’t expect JavaScript to always function for every visitorfor every visitor• Some may have JavaScript disabledSome may have JavaScript disabled• Some may be physically unable to click a Some may be physically unable to click a
mousemouse Provide a way for your site to be used if Provide a way for your site to be used if
JavaScript is not functioningJavaScript is not functioning• Plain text linksPlain text links• E-mail contact infoE-mail contact info
2828
JavaScript ResourcesJavaScript Resources
Beginning JavaScript TutorialsBeginning JavaScript Tutorialshttp://www.pageresource.com/jscript/index.htmlhttp://www.pageresource.com/jscript/index.html
JavaScript Tutorial for the Total Non-Programmer JavaScript Tutorial for the Total Non-Programmer http://www.webteacher.com/javascript/http://www.webteacher.com/javascript/
More Beginning JavaScript Tutorials More Beginning JavaScript Tutorials http://echoecho.com/javascript.htmhttp://echoecho.com/javascript.htm
Core JavaScript 1.5 Reference Manual Core JavaScript 1.5 Reference Manual http://www.webreference.com/javascript/reference/corhttp://www.webreference.com/javascript/reference/core_refe_ref
The JavaScript Source The JavaScript Source http://javascript.internet.comhttp://javascript.internet.com
2929
QuestionsQuestions1.1. What is meant by the term “form What is meant by the term “form
data validation”?data validation”?2.2. Give three examples of form data Give three examples of form data
that may require validation.that may require validation.3.3. Should you always expect your Should you always expect your
JavaScript to “work” – why or why JavaScript to “work” – why or why not?not?