Web-Sites-Design-and-Programming-6计算机科学与技术---网站设计与编程--双语教学课件

1、Web Sites Design and Programming,Lecturer: Lijie Guo Room: XNA508 Phone: 23678517 Email: guo_,2020/9/3,School of Computer Science and Technology,6-2,JavaScript and HTML Documents,WDP CN 第九章, 客户端脚本：JavaScript , 250285 第十章, 文档对象模型与动态HTML, 285327 WDP EN Chapter 9 , Client-Side Scripting , 312 335 Chapt

2、er 10 ,Document Object Model, 353404 P3W CN 第五章, 144173,2020/9/3,School of Computer Science and Technology,6-3,Overview,The Document Object Model (DOM) Element Access in JavaScript Events and Event Handling Handling events from Body Elements Handling events from Button Elements Handling events from

3、Text Box and Password Elements The DOM 2 Event Model,2020/9/3,School of Computer Science and Technology,6-4,JavaScript Execution Environment,The JavaScript Window object represents the window in which the browser displays documents The Window object provides the largest enclosing referencing environ

4、ment for scripts. All global variables are properties of Window Implicitly defined Window properties: document-a reference to the Document object that the window displays frames-an array of references to the frames of the document Every Document object has: forms-an array of references to the forms

5、of the document Each Form object has an elements array, which has references to the forms elements Document also has anchors, links and images,2020/9/3,School of Computer Science and Technology,6-5,The Document Object Model,DOM 0 is supported by all JavaScript-enabled browsers (no written specificat

6、ion) DOM 1 was released in 1998 DOM 2 in 2000 DOM 3 is the current recommendation. No browser implements it completely. The DOM is an abstract model that defines the interface between HTML documents and application programsan API,2020/9/3,School of Computer Science and Technology,6-6,The Document Ob

7、ject Model (con.),A language that supports the DOM must have a binding to the DOM constructs In the JavaScript binding, XHTML elements are represented as objects and element attributes are represented as properties e.g., would be represented as an object with two properties, type and name, with the

8、values text and address,2020/9/3,School of Computer Science and Technology,6-7,DOM Structure,Documents in the DOM have a tree like structure, A simple document Breakfast 0 1 Lunch 1 0 ,2020/9/3,School of Computer Science and Technology,6-8,Something like this,2020/9/3,School of Computer Science and

9、Technology,6-9,or like this,2020/9/3,School of Computer Science and Technology,6-10,or this!,2020/9/3,School of Computer Science and Technology,6-11,Element Access in JavaScript,There are several ways to do it 1. DOM address Example (a document with just one form and one widget): document.forms0.ele

10、ment0 Problem: document changes,2020/9/3,School of Computer Science and Technology,6-12,Element Access in JavaScript (con.),2. Element names requires the element and all of its ancestors (except body) to have name attributes Example: document.myForm.pushMe Problem: XHTML 1.1 spec doesnt allow the na

11、me attribute in form elements Only validation problem, no difficulty for browsers,2020/9/3,School of Computer Science and Technology,6-13,Element Access in JavaScript (con.),3. getElementById Method (defined in DOM 1) Example: document.getElementById(pushMe) Form elements often have ids and names bo

12、th set to the same value,2020/9/3,School of Computer Science and Technology,6-14,Element Access in JavaScript (con.),Checkboxes and radio button have an implicit array, which has their name . . var numChecked = 0; var dom = document.getElementById(toppingGroup); for (index = 0; index dom.toppings.le

13、ngth; index+) if (dom.toppingsindex.checked numChecked+;,2020/9/3,School of Computer Science and Technology,6-15,Events and Event Handling,An event is a notification that something specific has occurred, either with the browser or an action of the browser user An event handler is a script that is im

14、plicitly executed in response to the appearance of an event The process of connecting an event handler to an event is called registration Dont use document.write in an event handler, because the output may go on top of the display,2020/9/3,School of Computer Science and Technology,6-16,Events and th

15、eir Tag Attributes,Event Tag Attribute blur onblur change onchange click onclick focus onfocus load onload mousedownonmousedown mousemoveonmousemove mouseout onmouseout mouseover onmouseover mouseuponmouseup select onselect submit onsubmit unload onunload,2020/9/3,School of Computer Science and Tech

16、nology,6-17,Events, Attributes and Tags,The same attribute can appear in several different tags e.g., The onclick attribute can be in and Usually the events are associated with typical uses of the element. If you have used a correct element, you will find the event you need.,2020/9/3,School of Compu

17、ter Science and Technology,6-18,Events, Attributes and Tags (con.),Events can be triggered in many ways. E.G. A text element gets focus in three ways: When the user puts the mouse cursor over it and presses the left button When the user tabs to the element By executing the focus method,2020/9/3,Scho

18、ol of Computer Science and Technology,6-19,2020/9/3,School of Computer Science and Technology,6-20,Registration of Event Handler,Event handlers can be registered in two ways, we teach the former. By assigning the event handler script to an event tag attribute ,2020/9/3,School of Computer Science and Technology,6-21,Registration of Event Handler (self-study),2. The handler is registered by assigning it to a property of the JavaScript objects associated with the HTML elements. As in: Var dom= document.getElement