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

Web Sites Design and Programming Lecturer: Lijie Guo Room: XNA508 Phone: Email: guo_lijie163@163.com JavaScript and HTML Documents 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 Text Box and Password Elements The DOM 2 Event Model JavaScript Execution Environment The JavaScript Window object represents the window in which the browser displays documents The Window object provides the largest enclosing referencing environment 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 of the document Each Form object has an elements array, which has references to the form’s elements Document also has anchors, links and images The Document Object Model DOM 0 is supported by all JavaScript-enabled browsers (no written specification) 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 programs—an API The Document Object 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., input type = text name = address would be represented as an object with two properties, type and name, with the values text and address DOM Structure Documents in the DOM have a tree like structure …or like this… …or this! Element Access in JavaScript There are several ways to do it 1. DOM address Example (a document with just one form and one widget): f