计算机科学与技术有web设计,Web

计算机科学与技术有web设计,Web

《Web-Sites-Design-and-Programming-6计算机科学与技术---网站设计与编程--双语教学课件》由会员分享，可在线阅读，更多相关《Web-Sites-Design-and-Programming-6计算机科学与技术---网站设计与编程--双语教学课件(29页珍藏版)》请在人人文库网上搜索。

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 , 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: Form.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: ElementById(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 = ElementById(toppingGroup); for (index = 0; ppings.le。

13、ngth; index+) if (ppingsindex.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 , 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。

19、 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= ElementById(myForm) lick = planeChoice; This registration must follow both the handler function and the XHTML form. If this is done, for example, for a radio button group, each element of the array must be assigned In this case, the checked property of a radio * 次数：1357533 已用完，请联系开发者。