Web Improvement and Outline Establishments with XHTML.

Uploaded on:
Web Advancement and Configuration Establishments with XHTML. Part 14 Key Ideas. Learning Results. In this part, you will figure out how to: Depict normal employments of JavaScript in Pages. Portray the motivation behind the Archive Object Model and show some normal occasions.
Slide 1

Web Development & Design Foundations with XHTML Chapter 14 Key Concepts

Slide 2

Learning Outcomes In this part, you will figure out how to: Describe regular employments of JavaScript in Web pages. Depict the reason for the Document Object Model and show some regular occasions. Make a straightforward JavaScript utilizing the <script> component and the ready() strategy. Depict the contemplations for XHTML conformance and JavaScript. Use variables, administrators and the if control structure. Make an essential structure acceptance script.

Slide 3

What is JavaScript? Article based scripting dialect Works with the items connected with a Web page record the window the archive the components, for example, structures, pictures, hyperlinks, and so on

Slide 4

What is JavaScript? Initially created by Netscape Named LiveScript Netscape & Sun Microsystems Collaboration LiveScript renamed JavaScript is NOT Java

Slide 5

Common Uses of JavaScript Display a message box Select rundown route Edit and approve structure data Create another window with a predefined size and screen position Image Rollovers Status Messages Display Current Date Calculations

Slide 6

Coding JavaScript proclamations can be coded on a Web page utilizing two unique systems: Place JavaScript code between <script> labels Place JavaScript code as a major aspect of an occasion joined to a XHTML component

Slide 7

JavaScript Using <script> Elements The script component A holder label May be put in either the head or the body segment of a Web page Character Data revelation for XHTML-strict conformance Use XHTML remark to conceal JavaScript from old programs. <script language="JavaScript" type="text/javascript"> <!- - <![CDATA[/JavaScript code goes here/]]> - > </script>

Slide 8

Checkpoint 14.1 Describe two employments of JavaScript. Depict XHTML label used to add JavaScript to a Web page. Genuine or False. JavaScript is the same as Java.

Slide 9

Document Object Model (DOM\'s) A DOM bit is indicated at the left. Characterizes each item and component on a website page Hierarchical structure Accesses page components and apply styles to page components

Slide 10

Object An article is a thing or substance. Program window is an item Web page archive is an article Some activities can be performed on a few items Object window presentations ready message box These activities are called strategies.

Slide 11

Property A property is a trademark or trait of an article. The foundation shade of a page archive document.bgcolor The date the website page record was last changed document.lastmodified The src record of a picture object image1.src

Slide 12

Method A strategy is an activity (a verb) Writing content to a page report document.write() Submitting a structure form1.submit()

Slide 13

JavaScript and Events: activities by the Web page guest clicking (onclick), setting the mouse on a component (onmouseover), expelling the mouse from a component (onmouseout), stacking the page (onload), emptying the page (onunload), and so forth

Slide 14


Slide 15

JavaScript and Events JavaScript can be designed to perform activities when these and different occasions happen. JavaScript code is added straightforwardly to the XHTML tag with the sort of occasion as a quality. The occasion\'s estimation quality will contain one or more JavaScript articulations. Sample: Display a ready box when the mouse is put over a connection. <a href="home.htm" onmouseover="alert(\'Click to go home\')">Home</a>

Slide 16

JavaScript Debugging(1) Check the language structure of the announcements Pay close thoughtfulness regarding upper and lower case letters, spaces, and citations Verify that you have spared the page with your latest changes Verify that you are trying the latest form of the page (revive or reload the page) If you get a blunder message, utilize the mistake messages that are shown by the program

Slide 17

JavaScript Debugging(2) Use the Firefox or Mozilla program: In Firefox go to Tools > Error Console The JavaScript Console will demonstrate an issue and the line number This may not be precisely where the issue is Sometimes the slip is a maybe a couple lines over the showed line number .

Slide 18

Checkpoint 14.2 regarding items, depict the contrast between a property and a technique. Don\'t hesitate to utilize words like “thing,” “action,” “description,” “attribute,” et cetera. What is the distinction between an occasion and an occasion handler? Where are occasion handlers set in the XHTML report?

Slide 19

Variable A variable is a placeholder for data. The variable is put away in the computer’s memory (RAM). var userName; userName = "Karen"; document.write(userName);

Slide 20

Prompts brief() system Displays a message and acknowledges a quality from the client myName = prompt(“prompt message”); The worth wrote by the client is put away in the variable myName

Slide 21

Arithmetic Operators

Slide 22

Comparison Operators

Slide 23

Decision Making if (condition) { … orders to execute if condition is genuine } else { … charges to execute if condition is false }

Slide 24

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 utilize the third sort, Button and OnClick Event Handler to run a Script <input type=:”button” value=“Click to see a message” onclick=“alert(‘Welcome!’)/> We utilize this when we have one and only JavaScript proclamation to execute, on the off chance that we have more than one we give a name to the announcement hinder by making a Function

Slide 25

Function Definition A capacity is a piece of one or more JavaScript articulations with a particular reason, which can be run when required. capacity function_name() { ... JavaScript proclamations … } Typically, work definitions are set in the <head> zone of XHTML archive. This heaps the capacity code yet it doesn\'t execute until it is called

Slide 26

Using Functions Defining the Function capacity showAlert() { alert("Please click OK to continue."); } Calling the Function showAlert();

Slide 27

Checkpoint 14.3 What is a capacity definition? Why do you call a capacity? Could you call a capacity more than once?

Slide 28

Form Validation It is regular to utilize JavaScript to approve structure data before submitting it to the Web server. Is the name entered? Is the email location of right configuration? Is the telephone number in the right configuration? Is the location of right configuration? At the point when the client taps on Form’s submit catch, the submit even happens, so we utilize onsubmit occasion handler to call a capacity that test structure information for approval. This method is alluded to as Form Handling

Slide 29

Validating Form Fields Use the "" or invalid to check to figure out whether a structure field has data if (document.forms[0].userName.value == "" ) { alert("Name field can\'t be empty."); return false; }/end if

Slide 30

JavaScript & Accessibility Don’t anticipate that JavaScript will dependably work for each guest Some may have JavaScript crippled Some may be physically not able to snap a mouse Provide a route for your website to be utilized if JavaScript is not working Plain content connections E-mail contact information

Slide 31

JavaScript Resources Beginning JavaScript Tutorials http://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

Slide 32

Checkpoint 14.4 What is implied by the term “form information validation”? Give three samples of structure information that may oblige acceptance. Should you generally anticipate that your JavaScript will “work” – why or why not?

Slide 33

Summary This part presented the utilization of JavaScript on Web pages. Points included: Common employments of JavaScript in Web pages. The motivation behind the Document Object Model The<script> component and ready() strategy. Use variables, administrators

View more...