Web development design foundations with xhtml
Advertisement
This presentation is the property of its rightful owner.
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

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

Web Development & Design Foundations with XHTML

Chapter 14Key Concepts


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.


Events

Events


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


Arithmetic operators

Arithmetic Operators


Comparison operators

Comparison Operators


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


  • Login