1. Computer and Communication Fundamental Basic web programming Lecture 8 Rina Zviel-Girshin

2. Overview  Event-driven programming  Basic Events

3. Event-driven programming GUI contains elements which can be presented in a window which can react on events (mouse, keys) All communication from user to computer occurs via events and the code that handles the events. Event-driven programming - definition of actions to be performed upon events. An event is an action that happens in the system A mouse button pressed or released A keyboard key is hit Data is changed or entered A window is moved, resized, closed, etc.

4. Events When a user types characters or uses the mouse OS window manager sends a notification to the program that an event has occurred the user presses a key on the keyboard, a key pressed event occurs the user clicks a mouse, a mouse click event occurs There are many, many kinds of events Mouse events Menu events Keyboard events Data Entry Events Many are of no interest Some are of great interest

5. HTML and Events HTML applications should be largely event-driven. Events are actions that occur usually as a result of something the user does. HTML events examples: clicking a button is an event, changing a text field or moving the mouse over a link. For your script to react to an event, you define event handlers, such as onChange and onClick. Events is an advanced HTML property.

6. Basic event handler syntax Events syntax: where event value is actually JavaScript and not basic HTML. Example:

7. Mouse events Basic mouse events are: onclick- what to do on a mouse click ondblclick - what to do on a mouse double-click onmousedown - what to do when mouse button is pressed onmousemove - what to do when mouse pointer moves onmouseout - what to do when mouse pointer moves out of an element onmouseover - what to do when mouse pointer moves over an element onmouseup - what to do when mouse button is released

8. onClick example Click event Please click the mouse anywhere in the window to go to ex27.html where onClick event handler or action is to open ex27.html file instead of current file.

9. ondblClick example Double Click event Please double click the mouse in current paragraph to go to prev example - ex28.html. where ondblClick event handler or action is to open ex28.html file instead of current file. window.location is a browser object that specifies the location of the current window.

10. onMouseOver and onMouseOut example Mouse over and out events On mouse over current paragraph - background color of the document will be changed to light blue On mouse out - background color of the document will be changed to white where onMouseOut and onMouseOver are mouse events. document.bgColor is a background color of current html page, html document.

11. onMouseMove example Mouse Move event Please move the mouse over this picture to go to idc.ac.il where onMouseMove is a mouse event.

12. Form A form is an area that can contain form elements. Forms are the primary input output device for web pages. Form elements are elements that allow the user to enter information: text fields, textarea fields, drop-down menus, radio buttons, checkboxes. A form is defined with the tag. tag should be properly closed.

13. Input The most used form tag is the tag. The type of input is specified with the type attribute. The most commonly used input types are: text password button checkbox radio file

14. Input type text Form input type="text" has several attributes: value - string written inside text box, initial value of the input field size - the length of the input field, if the user enters more characters, the text will scroll name - user defined name of the current form element. Main name usage - event handling. Example: where onChange is event to be run when the element changes.

15. Input text example Form Input examples My favorite text color: Your favorite background color: If you want to perform several actions on some event you write action after action with ; semicolon separation mark. onChange="document.bgColor=bgc.value ; document.fgColor=i.value" document.bgColor and document.fgColor define current document background and foreground colors.

16. Input text example

17. Input file and password type Input type="password" is the same as TYPE=text. Syntax: The only difference is the text will be hidden by "*" or similar characters. Input type="file" allows the user to upload a file. Syntax: It is typically presented as an input box with a button to start browsing the local hard disk.

18. Input file and password example Form Input Password and File Write your password: Enter file name:

19. Input file and password example

20. Input type file and onChange event Form Input Password and File Enter file name: where f.value is a value written in file input box.

21. Input type radio Form input type="radio" produces a radio button. A radio button always exists in a group. Syntax: RED BLUE All members of this group should have the same name attribute, and different values. You must specify CHECKED on exactly one radio button, which then will come up selected initially.

22. Input type radio example Form Input Radio Example This is a radio control: RED BLUE where name of input radio button is the same and only one button is checked.

23. Input type radio example

24. Input type checkbox Form input type="checkbox" produces a checkbox. Syntax: Toolbars Menubars Scrollbars It has two states: on and off. When it is on when the form is submitted, it will be sent as "name=on", otherwise it is ignored altogether. If you use CHECKED, it will come up checked (selected) initially.

25. Input type checkbox example Form Input CheckBox Example Toolbars Menubars Scrollbars where names of checkbox can be different. Checkbox may have several checked values.

26. Input type checkbox example Toolbars Menubars Scrollbars

27. Input type button Form input type="button" produces a button. Button value is a text written on button. Syntax: Form Input Button Example

28. Input type checkbox example Form Input CheckBox Example Toolbars Menubars Scrollbars where names of checkbox can be different. Checkbox may have several checked values.

29. Input type button example

30. Select list Form select list uses tag with inner tags. tag should be properly closed. One of the options has to be selected. Text written after tag is actually the text user sees as a select option. Syntax: red white

31. Select list example Form Select List Example <select name="s" onChange="document.bgColor=s.options[s.selectedIndex].value"> red white black green blue where Selected list item is - s.options[s.selectedIndex]

32. Select list example

33. Frames Instead of one document in the window, we can divide the window into parts. Each part is a FRAME. In each frame a different document can be loaded. The set of frames is called a FRAMESET. FRAMESETs can be nested, i.e. one FRAMESET can include another. One FRAMESET draws a straight line (either vertical or horizontal) and thus divides the window into two. Combining a set of FRAMESETs and FRAMEs, we can divide and sub- divide as we wish. Vertical division is achieved using the COLS attribute in the FRAMESET tag. Horizontal division is achieved using the ROWS attribute in the FRAMESET tag.

34. Frames Example

36. Any questions?