slide môn học HDJ bài 9 the browser objects in javascript

25 144 0
slide môn học HDJ bài 9 the browser objects in javascript

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

Thông tin tài liệu

The Browser Objects in JavaScript Session Objectives  Common events in JavaScript  Browser Objects – Attributes and Methods Web Page Programming with HTML,DHTML & JavaScript/Session 9/ of 21 Event Object - Concept  Events are a result of an action done by the user  An event may be user-generated or generated by the system  Each event has an associated event object The event object provides information on:   the type of event  the location of the cursor at the time of the event Web Page Programming with The event object is used as a part of an event & handler HTML,DHTML JavaScript/Session 9/ of 21 Event – Life Cycle  The life cycle of an event generally consist of following steps:  The user action or condition associated with the event occurs  The event object is instantly updated to reflect the conditions of the event  The event fires  The associated event handler is called  The event handler carries out its actions and Web Page Programming with returns HTML,DHTML & JavaScript/Session 9/ of 21 JavaScript Event  Common events supported by JavaScript includes: • • • • • onClick onChange onFocus onBlur onMouseOver • • • • • onMouseOut onLoad onSubmit onMouseDown onMouseUp Web Page Programming with HTML,DHTML & JavaScript/Session 9/ of 21 Handling the Events  This segment of JavaScript code that will be executed in response to the event is called an event handler  Event Handler are categorized as:  Event handlers for HTML tags  Event Handlers as Properties Web Page object.eventhandler = function; Programming with HTML,DHTML & JavaScript/Session 9/ of 21 onClick - Example  The onClick event is generated whenever the user clicks the mouse button on certain form elements or on a hypertext link function compute(form) { if(confirm("Are you sure?")) form.result.value = eval(form.expr.value) else alert("Please come back again.") } Enter an expression: Result: Web Page Programming with HTML,DHTML & JavaScript/Session 9/ of 21 onClick - Output Web Page Programming with HTML,DHTML & JavaScript/Session 9/ of 21 onChange - Example  The onChange event occurs whenever a form element changes This can happen whenever the contents of a text control changes, or when a selection in a selection list changes > Please enter a number: Web Page Programming with HTML,DHTML & JavaScript/Session 9/ of 21 onChange - Output Web Page Programming with HTML,DHTML & JavaScript/Session 9/ 10 of 21 onFocus/onBlur/onMouseOver/ onMouseOut  onFocus   onBlur   Blur is the opposite of focus When the user leaves a form element, the onBlur event is activated onMouseOver   The onFocus event is sent whenever a form element becomes the current form element Only when an element has the focus can it accept input from the user The onMouseOver event is generated whenever the mouse cursor is moved over an element onMouseOut  Web Page Programming with The onMouseOut event is generated whenever the mouse cursor HTML,DHTML & moves off of an element JavaScript/Session 9/ 11 of 21 onMouseOut -Example  Example: var num =0 function showLink(num) { if (num==1) { document.forms[0].elements[0].value= "You have selected Aptech"; } if (num==2) { document.forms[0].elements[0].value = "You have selected Asset"; } if (num==3) { document.forms[0].elements[0].value = "You have selected Arena"; } } [...]... belong to JavaScript s bulk of browser objects It is an independent object, just like the Math object This object combines various methods and properties providing information related to the user’s software For example, you can use this object to detect the user’s browser, platform, plug-ins, and many other Web Page Programming with essential pieces of information HTML,DHTML & JavaScript/ Session 9/ 24... window.onresize= notify; function notify() { alert("Window resized!"); } Please resize the window Web Page Programming with HTML,DHTML & JavaScript/ Session 9/ 15 of 21 Browser Objects   A browser is an application that is used to display the contents of an HTML document Browsers also expose some objects that can be accessed and used in script IE Browser Objects. .. Pixels Window’s width in pixels height Pixels Web Page Programming with HTML,DHTML & Window’s height in pixels JavaScript/ Session 9/ 19 of 21 A custom "alert" function pop(height, width, content) { win = window.open("", "", "height=" + height + ",width=" + width); if(win != null) { win.document.open(); win.document.write("JavaScript. .. Page Programming with HTML,DHTML & JavaScript/ Session 9/ 13 of 21 onLoad - onSubmit onMouseDown - onMouseUp  OnLoad   onSubmit   The onSubmit event is generated whenever the user submits a form (using the "Submit" button) The event occurs before the form is actually submitted onMouseDown   The onLoad event is sent to the document body object when the document has finished loading The event is... Programming with HTML,DHTML & JavaScript/ Session 9/ 22 of 21 Location Object  This object maintains information about the current URL It provides a method that causes the window's current URL to be reloaded Properties: Methods: • hash • assign(URL) • host • reload(boolean) • hostname • replace(URL) • href Web Page Programming with HTML,DHTML & JavaScript/ Session 9/ 23 of 21 Navigator Object   The navigator... Document.bgcolor JavaScript/ Session 9/ 17 of 21 Window Object  It represents the browser s window and can be used to retrieve information about the state of the window Properties: Methods: • document • alert(str) • event • blur() • history • close() • location • focus() • name • navigate() • navigator • screen • status Web Page Programming • open(“URL”,“Name”,“Feature”) with HTML,DHTML & JavaScript/ Session 9/ 18... win.document.write(content); win.document.write(""); } } Document Object  It represents the HTML document in a given browser window and is used to retrieve information about the document Properties: Methods: • alinkColor... write(str) • linkColor • writeln(str) • location • Title • URL • vlinkColor Web Page Programming with HTML,DHTML & JavaScript/ Session 9/ 21 of 21 History Object  This object provides a list of the URL's most recently visited by the client  Example, history's "back()" method cause the window to again display the immediately previous document: history.back(); Methods: • back() • forward() • go(int) Web... HTML,DHTML & JavaScript/ Session 9/ 18 of 21 Window Object Attribute Value Description (IE) toolbar Boolean Back, Forward, other buttons in that row, and Address field, displaying the current URL location Boolean N/A (always defaults to the value of toolbar) status Boolean Status bar at the bottom of the window menubar Boolean Menu bar at the top of the window (File, Edit, View, Go, etc.) scrollbars...  Blur is the opposite of focus When the user leaves a form element, the onBlur event is activated onMouseOver   The onFocus event is sent whenever a form element becomes the current form element Only when an element has the focus can it accept input from the user The onMouseOver event is generated whenever the mouse cursor is moved over an element onMouseOut  Web Page Programming with The onMouseOut

Ngày đăng: 30/11/2016, 22:10

Mục lục

  • The Browser Objects in JavaScript

  • Objectives

  • Event Object - Concept

  • Event – Life Cycle

  • JavaScript Event

  • Handling the Events

  • onClick - Example

  • onClick - Output

  • onChange - Example

  • onChange - Output

  • onFocus/onBlur/onMouseOver/onMouseOut

  • onMouseOut -Example

  • onMouseOut -Output

  • onLoad - onSubmit onMouseDown - onMouseUp

  • onResize - Example

  • Browser Objects

  • DOM

  • Window Object

  • Slide 19

  • PowerPoint Presentation

  • Document Object

  • History Object

  • Location Object

  • Navigator Object

  • Slide 25

Tài liệu cùng người dùng

  • Đang cập nhật ...

Tài liệu liên quan