web development design foundations with xhtml n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
PowerPoint Presentation
Download Presentation

Loading in 2 Seconds...

play fullscreen
1 / 33

- PowerPoint PPT Presentation


  • 406 Views
  • Uploaded on

Web Development & Design Foundations with XHTML. Chapter 14 Key Concepts. Learning Outcomes. In this chapter, you will learn how to: Describe common uses of JavaScript in Web pages. Describe the purpose of the Document Object Model and list some common events.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about '' - bernad


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
learning outcomes
Learning Outcomes
  • In this chapter, you will learn how to:
    • Describe common uses of JavaScript in Web pages.
    • Describe the purpose of the Document Object Model and list some common events.
    • Create a simple JavaScript using the <script> element and the alert() method.
    • Describe the considerations for XHTML conformance and JavaScript.
    • Use variables, operators and the if control structure.
    • Create a basic form validation script.
what is javascript
What isJavaScript?
  • Object-based scripting language
  • Works with the objects associated with a Web page document
    • the window
    • the document
    • the elements
      • such as forms, images, hyperlinks, etc
what is javascript1
What isJavaScript?
  • Originally developed by Netscape
    • Named LiveScript
  • Netscape & Sun Microsystems Collaboration
    • LiveScript renamed JavaScript
  • JavaScript is NOT Java
common uses of javascript
Common Usesof JavaScript
  • Display a message box
  • Select list navigation
  • Edit and validate form information
  • Create a new window with a specified size and screen position
  • Image Rollovers
  • Status Messages
  • Display Current Date
  • Calculations
coding javascript
CodingJavaScript
  • JavaScript statements can be coded on a Web page using two different techniques:
    • Place JavaScript code between <script> tags
    • Place JavaScript code as part of an event attached to an XHTML element
javascript using script elements
JavaScriptUsing <script> Elements
  • The script element
    • A container tag
    • May be placed in either the head or the body section of a Web page
    • Character Data declaration for XHTML-strict conformance
    • Use XHTML comment to hide JavaScript from old browsers.

<script language="JavaScript" type="text/javascript">

<!- - <![CDATA[

// JavaScript code goes here

// ]]> - ->

</script>

checkpoint 14 1
Checkpoint 14.1
  • Describe two uses of JavaScript.
  • Describe XHTML tag used to add JavaScript to a Web page.
  • True or False. JavaScript is the same as Java.
document object model dom
Document Object Model(DOM)
  • A portion of the DOM is shown at the left.
  • Defines every object and element on a web page
  • Hierarchical structure
  • Accesses page elements and apply styles to page elements
object
Object
  • An object is a thing or entity.
    • Browser window is an object
    • Web page document is an object
  • Some actions can be performed on some objects
    • Object window displays alert message box

These actions are called methods.

property
Property
  • A property is a characteristic or attribute of an object.
    • The background color of a web page documentdocument.bgcolor
    • The date the web page file was last modifieddocument.lastmodified
    • The src file of an image object

image1.src

method
Method
  • A method is an action (a verb)
    • Writing text to a web page document

document.write()

    • Submitting a form

form1.submit()

javascript and events
JavaScriptand Events
  • Events: actions by the Web page visitor
    • clicking (onclick),
    • placing the mouse on an element (onmouseover),
    • removing the mouse from an element (onmouseout),
    • loading the page (onload),
    • unloading the page (onunload), etc.
javascript and events1
JavaScriptand Events
  • JavaScript can be configured to perform actions when these and other events occur.
  • JavaScript code is added directly to the XHTML tag with the type of event as an attribute.
  • The value of the event attribute will contain one or more JavaScript statements.
  • Example: Display an alert box when the mouse is placed over a link.

<a href="home.htm" onmouseover="alert('Click to go home')">Home</a>

javascript debugging 1
JavaScript Debugging(1)
  • Check the syntax of the statements
    • Pay very close attention to upper and lower case letters, spaces, and quotations
  • Verify that you have saved the page with your most recent changes
  • Verify that you are testing the most recent version of the page (refresh or reload the page)
  • If you get an error message, use the error messages that are displayed by the browser
javascript debugging 2
JavaScriptDebugging(2)
  • Use the Firefox or Mozilla browser:
    • In Firefox go to Tools > Error Console
    • The JavaScript Console will indicate an issue and the line number
    • This may not be exactly where the problem is
    • Sometimes the error is a one or two lines above the indicated line number.
checkpoint 14 2
Checkpoint 14.2
  • With respect to objects, describe the difference between a property and a method. Feel free to use words like “thing,” “action,” “description,” “attribute,” and so forth.
  • What is the difference between an event and an event handler?
  • Where are event handlers placed in the XHTML document?
variable
Variable
  • A variable is a placeholder for information.
  • The variable is stored in the computer’s memory (RAM).

var userName;

userName = "Karen";

document.write(userName);

prompts
Prompts
  • prompt() method
    • Displays a message and accepts a value from the user

myName = prompt(“prompt message”);

    • The value typed by the user is stored in the variable myName
decision making
Decision Making

if (condition)

{

… commands to execute if condition is true

}

else {

… commands to execute if condition is false

}

only one javascript statement to execute
Only One JavaScript Statement to Execute

Three Types of Buttons we Learned on Chapter 9:

<input type=:”submit” />

<input type=:”reset” />

<input type=:”button” />

In this Section we will use the third type, Button and OnClick Event Handler to run a Script

<input type=:”button” value=“Click to see a message” onclick=“alert(‘Welcome!’) />

We use this when we have only one JavaScript statement to execute, if we have more than one we provide a name for the statement block by creating a Function

function definition
Function Definition
  • A function is a block of one or more JavaScript statements with a specific purpose, which can be run when needed.

function function_name()

{

... JavaScript statements …

}

Typically, function definitions are placed in the <head> area of XHTML document. This loads the function code but it does not execute until it is called

using functions
Using Functions

Defining the Function

function showAlert()

{

alert("Please click OK to continue.");

}

Calling the Function

showAlert();

checkpoint 14 3
Checkpoint 14.3
  • What is a function definition?
  • Why do you call a function?
  • Can you call a function more than once?
form validation
Form Validation
  • It is common to use JavaScript to validate form information before submitting it to the Web server.
    • Is the name entered?
    • Is the e-mail address of correct format?
    • Is the phone number in the correct format?
    • Is the address of correct format?
  • When the user clicks on Form’s submit button, the submit even occurs, so we use onsubmit event handler to call a function that test form data for validation. This technique is referred to as Form Handling
validating form fields
Validating Form Fields
  • Use the "" or null to check to determine if a form field has information

if (document.forms[0].userName.value == "" )

{

alert("Name field cannot be empty.");

return false;

} // end if

javascript accessibility
JavaScript & Accessibility
  • Don’t expect JavaScript to always function for every visitor
    • Some may have JavaScript disabled
    • Some may be physically unable to click a mouse
  • Provide a way for your site to be used if JavaScript is not functioning
    • Plain text links
    • E-mail contact info
javascript resources
JavaScript Resources
  • Beginning JavaScript Tutorialshttp://www.pageresource.com/jscript/index.html
  • JavaScript Tutorial for the Total Non-Programmer http://www.webteacher.com/javascript/
  • More Beginning JavaScript Tutorials http://echoecho.com/javascript.htm
  • Core JavaScript 1.5 Reference Manual http://www.webreference.com/javascript/reference/core_ref
  • The JavaScript Source http://javascript.internet.com
checkpoint 14 4
Checkpoint 14.4
  • What is meant by the term “form data validation”?
  • Give three examples of form data that may require validation.
  • Should you always expect your JavaScript to “work” – why or why not?
summary
Summary
  • This chapter introduced the use of JavaScript on Web pages. Topics included:
    • Common uses of JavaScript in Web pages.
    • The purpose of the Document Object Model
    • The<script> element and alert() method.
    • Use variables, operators and the if control structure.
    • Configuring functions
    • Validating a form