1 / 36

Computer and Communication Fundamental

Computer and Communication Fundamental. Basic web programming. Lecture 8 Rina Zviel-Girshin. Overview. Event-driven programming Basic Events. Event-driven programming. GUI contains elements which can be presented in a window which can react on events (mouse, keys)

anika-berger
Download Presentation

Computer and Communication Fundamental

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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: <tag Event="EventHandler action value"> • where event value is actually JavaScript and not basic HTML. • Example: <body onClick="window.location='ex27.html'">

  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 <html><head></head> <body onClick="window.location='ex27.html'"><center> <h3>Click event</h3> <p>Please click the mouse anywhere in the window to go to ex27.html </p></center> </body></html> where onClick event handler or action is to open ex27.html file instead of current file.

  9. ondblClick example <html><head></head> <body><center> <h3>Double Click event</h3> <p ondblClick="window.location='ex28.html'">Please double click the mouse in current paragraph to go to prev example - ex28.html.</p> <img src="marble.gif"> </center> </body></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 <html><head></head><body><center> <h3>Mouse over and out events</h3><img src="marble.gif"> <p onMouseOver="document.bgColor='lightgreen'" onMouseOut="document.bgColor='white'"> On mouse over current paragraph - background color of the document will be changed to light blue <br> On mouse out - background color of the document will be changed to white </p> </center></body></html> where onMouseOut and onMouseOver are mouse events. document.bgColor is a background color of current html page, html document.

  11. onMouseMove example <html><head></head> <body><center> <h3>Mouse Move event</h3> Please move the mouse over this picture to go to idc.ac.il<br><br> <img src="logo.gif" onMouseMove="window.location='http://www.idc.ac.il'"> </center></body></html> 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 <form> tag. • <form> tag should be properly closed.

  13. Input • The most used form tag is the <input> tag. • The type of input is specified with the type attribute. <type input=“type”> • 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:<input type="text" value="blue" name=“i” onChange="document.fgColor=i.value"> • where onChange is event to be run when the element changes.

  15. Input text example <html><head></head><body><center> <h3>Form Input examples</h3> <form>My favorite text color: <input type="text" value="blue" name="i"><br> Your favorite background color: <input type="text" name="bgc" onChange="document.bgColor=bgc.value;document.fgColor=i.value"> </form></body></html> 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 type="text" value="blue" name="i"> Input text example

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

  18. Input file and password example <html><head></head> <body><center> <h3>Form Input Password and File</h3> <form>Write your password: <input type="password" size=9 maxlength=8 value="Rina"><br> Enter file name: <input type="file" size=30 > </form></center></body></html>

  19. <input type="password" size=9 maxlength=8 value="Rina"> <input type="file" size=30 > Input file and password example

  20. Input type file and onChange event <html><head></head> <body><center> <h3>Form Input Password and File</h3> <form>Enter file name: <input type="file" name="f" size=30 onChange="window.location=f.value" > </form></center> </body></html> 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: <input type="radio" value="red" checked name="r">RED <input type="radio" value="blue" name="r">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 <html><head></head> <body><center> <h3>Form Input Radio Example</h3> <form>This is a radio control: <input type="radio" value="red" checked name="r">RED <input type="radio" value="blue" name="r">BLUE </form></center></body></html> 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: <input type=checkbox name=toolbar checked>Toolbars <input type=checkbox name=menubar>Menubars <input type=checkbox name=scrollbar checked>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 <html><head></head> <body><center> <h3>Form Input CheckBox Example</h3> <form> <input type=checkbox name=toolbar checked>Toolbars <input type=checkbox name=menubar>Menubars <input type=checkbox name=scrollbar checked>Scrollbars </form></center></body></html> where names of checkbox can be different. Checkbox may have several checked values.

  26. <input type=checkbox name=toolbar checked>Toolbars <input type=checkbox name=menubar>Menubars <input type=checkbox name=scrollbar checked>Scrollbars Input type checkbox example

  27. Input type button • Form input type="button" produces a button. • Button value is a text written on button. • Syntax: <input type=button value=“button name”> <html><head></head><body><center> <h3>Form Input Button Example</h3> <form> <input type=button value="RED" onclick="document.bgColor='red'"> <input type=button value="BLUE" onclick="document.bgColor='blue'"> <input type=button value="GREEN" onclick="document.bgColor='green'"> </form></center></body></html>

  28. Input type checkbox example <html><head></head> <body><center> <h3>Form Input CheckBox Example</h3> <form> <input type=checkbox name=toolbar checked>Toolbars <input type=checkbox name=menubar>Menubars <input type=checkbox name=scrollbar checked>Scrollbars </form></center></body></html> 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 <select> tag with inner <option> tags. • <select> tag should be properly closed. • One of the options has to be selected. • Text written after <option> tag is actually the text user sees as a select option. • Syntax: <select><option value='RED'>red<option value='WHITE' selected>white</select>

  31. Select list example <html><head></head><body><center> <h3>Form Select List Example</h3> <form> <select name="s" onChange="document.bgColor=s.options[s.selectedIndex].value"> <option value='RED'>red <option value='WHITE' selected>white <option value='BLACK'>black <option value='GREEN'>green <option value='BLUE'>blue </select></form> </center></body></html> 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

  35. Frames Example <FRAMESET COLS="15%,85%"> <FRAME SRC="ex41c.html" NAME="3" frameborder=1 scrolling=yes> <FRAMESET ROWS="90%,10%"> <FRAME SRC="ex41a.html" NAME="1" frameborder=0> <FRAME SRC="ex41b.html" NAME="2" frameborder=0 > </FRAMESET> </FRAMESET>

  36. Any questions?

More Related