Web development design foundations with xhtml
1 / 33

Web Development & Design Foundations with XHTML - PowerPoint PPT Presentation

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.

Related searches for Web Development & Design Foundations with XHTML

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

Download Presentation

Web Development & Design Foundations with XHTML

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

Web Development & Design Foundations with XHTML

Chapter 14Key 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.

    • 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 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 isJavaScript?

  • Originally developed by Netscape

    • Named LiveScript

  • Netscape & Sun Microsystems Collaboration

    • LiveScript renamed JavaScript

  • JavaScript is NOT Java

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


  • 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

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

      // ]]> - ->


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)

  • 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


  • 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.


  • 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



  • A method is an action (a verb)

    • Writing text to a web page document


    • Submitting a form


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.


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)

  • 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


  • 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

  • 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?


  • A variable is a placeholder for information.

  • The variable is stored in the computer’s memory (RAM).

    var userName;

    userName = "Karen";



  • 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

Arithmetic Operators

Comparison Operators

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

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

  • 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

Defining the Function

function showAlert()


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


Calling the Function


Checkpoint 14.3

  • What is a function definition?

  • Why do you call a function?

  • Can you call a function more than once?

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

  • 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

  • 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

  • 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

  • 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?


  • 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

  • Login