CTIS 255 Web Technologies 1. Week # 10 DHTML 3 (Events-Timer) Serkan GENÇ

Size: px

Start display at page:

Download "CTIS 255 Web Technologies 1. Week # 10 DHTML 3 (Events-Timer) Serkan GENÇ"

Daniel Williamson
7 years ago
Views:

1 CTIS 255 Web Technologies 1 Week # 10 DHTML 3 (Events-Timer) Serkan GENÇ

2 onchangeevent: Form Events Triggered when the content of a form element is changed. Textbox, select, and textarea html objects support onchange event. Use onclick event for checkbox and radio button to detect any change. onfocus event: Triggered when an object gets the focus (active) to detect the object ready for keyboard input. An object gets a focus by clicking on the object or pressing Tab key. All html form objects have onfocus event. All DOM objects have focus() function to give focus to that object. onblur event: Triggered when the object loses its focus. All DOM objects have blur() function to remove focus on that object. onsubmit event: Triggered when a form is submitted by clicking submit button/image. Usually to test the validity of data in form elements before sending data to server-side script (php, jsp, etc).

3 onloadevent: Window Events Triggered after the page content (all images, sound, flash animation) is loaded, all nodes of DOM tree are formed. Usually, to initialize the html objects in the page. onunload event: Triggered when a user exits a page or closes a tab or browser. Usually, to inform the server-side that user exits the page, and a script in the server-side script frees the resources allocated for the client such as database connections.

Form & Window Event Example When the page is open, listboxis in focus for keyboard input. If the user does not select an item, it does not allow to enter text inside the textboxes.

4 Form & Window Event Example When the page is open, listboxis in focus for keyboard input. If the user does not select an item, it does not allow to enter text inside the textboxes. If an item is selected in listbox, user can enter text into textboxes, when the focus is on a textbox, its background color is gray and text color is yellow. Also, detect if the user is smoker or not. When you leave the page by refreshing page or closing tab, or clicking on a link object, it displays good bye message.

6 Window Object Properties location : to redirect the current page to another URL window.location = ; resizeto(w,h) : to change the size of the browser status: to set a text for status bar. (IE only) open(url, title, options): to create a popup window. Option: toolbar=yes/no, location=yes/no, status=yes/no, menubar=yes/no, resizable=yes/no scrollbars=yes/no, width=400px, height=800px Returns a window id, this id is used to access the content of the window. mywin= window.open( mypage.html,, toolbar=no, location=no, status=yes, menubar=no, resizable=no, scrollbars=yes, width=300, height=400 ); close(): to close a window that is opened by window.open. To close a window, you need its window id. For example: mywin.close();

7 titlebar locationbar toolbar menubar scrollbar height status bar width resize location

8 onchangeevent 1 Create a listbox filled by flower names. User selects a flower name, and corresponding image appears. Use preloading: usually in <head> part. Javascript has Image() object to store image pixels. var myimg = new Image(); myimg.src = test.jpg ; // it loads test.jpg from server into Image object in browser.

9 Preloading images

10 onchangeevent 2 Two listboxes: Select destination (new window or current window) URL address to redirect

12 Timer and Animation Browser automaticallycalls a given function periodically. Period or the time between consecutive function calls is given in milliseconds. Web programmer can start and stop timers. To stop a timer, timer id is required.

13 Timer Functions window.setinterval( function name, period) Returns a timer id, if you need to stop timer, save timer id in a variable. var mytimer = window.setinterval( f(), 1000); Browser calls function f() each 1000 ms (1second) window.clearinterval(timerid) To stop a timer with given timerid window.clearinterval( mytimer); window.settimeout(function name, period) Calls the function once after the given period. window.cleartimeout(timerid) To stop the timer created by settimeout() function.

14 Timer Example 1 Create a counter that counts the number of seconds elapsed after loading the page. Optionally, you can implement that after 10 seconds, it redirects the current window to an URL address.

15 Timer Example 2 Create a running clock. Optionally, you can move the clock in horizontal direction. Safer way is to create timer after loading the page. (in onload event handler)

16 Timer Example 3 Create a text CTIS, each letter of CTIS text will be randomly changed. Change font-size and font-family properties. Change the position of CTIS text twice in a second randomly within the page.

18 Check out CTIS255 Course page for further DHTML example sets

Insert/Edit Link: Popup Tab

Insert/Edit Link: Popup Tab Overview Note: The information on this page pertains to the old WYSIWYG Editor. For information about the new JustEdit Editor and the JustEdit toolbar, visit the JustEdit page. The Popup tab of the Insert/Edit