1 / 57

Lecture 9

Lecture 9. Javascript Toolkits HTML5 Canvas Forms. JavaScript Toolkits. Many client-side scripting tasks can be done using JavaScript libraries / toolkits Save coding many common graphic elements Best-known ones are JQuery and Dojo, both free

fritz
Download Presentation

Lecture 9

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. Lecture 9 Javascript Toolkits HTML5 Canvas Forms

  2. JavaScript Toolkits • Many client-side scripting tasks can be done using JavaScript libraries / toolkits • Save coding many common graphic elements • Best-known ones are JQuery and Dojo, both free • Google Web Toolkit contains both a JavaScript library and a Java-to-JavaScript cross-compiler • Code UI in Java using Swing-like code, automatically compile it into JavaScript that can be placed in any web page.

  3. JQuery • Very widely –used open-source JavaScript library • Download the main library from jquery.com, put a copy on your server, and link to it from your documents • There are also several other JQuery libraries • Write functions that use its functions using syntax like this: • $("#item").jqfunction(arguments);

  4. JQuery <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src = "jquery-2.0.3.js"> </script> </head> <body onload = "hideImage()"> <p>One Paragraph</p> <p id = "test">Other paragraph</p> <script> function hideImage(){ $("#test").fadeOut(8000); } </script> </body> </html> Example from Jamsa, Intro To Web Development Using HTML5

  5. JQuery This one uses JQueryUI, another JQuery library. On a server, use a copy of the library and your own stylesheet, but this demo uses ones on JQuery's server. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Sortable - Default functionality</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://www.jqueryui.com/resources/demos/style.css"> <style>

  6. JQuery #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } #sortable li span { position: absolute; margin-left: -1.3em; } </style>

  7. JQuery <script> $(function() { $("#sortable").sortable(); $("#sortable").disableSelection(); }); </script> </head> <body> <ul id="sortable"> <li class="ui-state-default"> <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Spock </li> <li class="ui-state-default"> <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Uhura </li> <li class="ui-state-default"> <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Kirk </li> </html>

  8. JQuery <li class="ui-state-default"> <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Sulu </li> <li class="ui-state-default"> <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Chekhov </li> <li class="ui-state-default"> <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Chapel </li> </ul> </body> </html>

  9. HTML5 Canvas • Canvas is a new element used for drawing graphics • Canvas has several straightforward methods for creating more interesting effects • Works well with Javascript for animations

  10. HTML5 Canvas • Context • Uses an object that represents a 2d surface • Top left is 0,0 • Example: varcontext = example.getContext('2d'); • FillRect() • Fills a specified rectangle with a fill style context.fillStyle= "rgb(0,255,255)"; context.fillRect(horiz, vert, side1, side2 ); horiz and vert are the coordinates of the upper left corner side1 and side2 are the lengths of the sides • ClearRect() • SetInterval(function, interval) repeats a function at set time intervals. Interval is set in milliseconds

  11. HTML5 Canvas <!DOCTYPE html> <head> <style type="text/css"> #example { border-style: solid; border-color: #000000; width: 900px; } </style> </head> <body> <canvas id="example" > This text is displayed if your browser does not support HTML5 Canvas. </canvas>

  12. HTML5 Canvas <script type = "text/javascript"> var example = document.getElementById('example'); var context = example.getContext('2d'); varvmax = example.height; varhmax = example.width; varhoriz = 0; varvert = 0; var side = 30; var color = 0; context.fillStyle = "rgb(0,255,255)"; function draw() { context.clearRect(0,0, hmax, vmax); // color += 1; // context.fillStyle = "rgb("+color+","+color+","+ color+")"; if (horiz < (vmax - side)) vert+= 1; else if (vert > 0) vert -= 1; if (horiz < hmax) horiz += 1; context.fillRect(horiz, vert, side, side); } setInterval(draw, 20); </script> </body> </html>

  13. Overview of Forms • Forms are used all over the Web to • Accept information • Provide interactivity • Types of forms: • Search form, Order form, Newsletter sign-up form, Survey form, Add to Cart form, and so on…

  14. Overview of Forms (2) • Form • An HTML element that contains and organizes form controls such astext boxes, check boxes, and buttons that can accept information from Web site visitors.

  15. Two Components of Using Forms 1. The HTML form -- the Web page user interface and 2. The server-side processing Server-side processing works with the form data and sends e-mail, writes to a text file, updates a database, or performs some other type of processing on the server.

  16. HTML Using Forms • <form> tag • Contains the form elements on a web page • Container tag • The input controls for the form should all be inside the form element. • <input /> tag • Configures a variety of form elements including text boxes, radio buttons, check boxes, and buttons • Stand alone tag • <textarea> tag • Configures a text box • Container tag • <select> tag • Configures a select box (drop down list) • Container tag • <option> tag • Configures an option in the select box • Container tag

  17. HTML <form> element • Example: <form name = "myForm" id = "myForm" method="post" action = "http://webdevfoundations.net/scripts/formdemo.asp"> • Form tag attributes: • action • Specifies the server-side program or script that will process your form data • method • get – default value, form data passed in URL • post – more secure, form data passed in HTTP Entity Body • name • Identifies the form • id • Identifies the form

  18. HTML <form> element • Use one form element per form, with all the input controls inside it. Otherwise, the input will not all be submitted correctly.

  19. HTML<input /> Text box • Accepts text information • Attributes: • type=“text” • name • id • size • maxlength • value

  20. HTML<input /> Email box New in HTML5; best support in Chrome <form> Email: <input type="email" name="CustEmail" id="CustEmail" placeholder="me@example.com" /><br /> <input type="submit" /> </form>

  21. HTML<input /> numeric range New in HTML5; best support in Chrome <form> Age: <input type="number" name="custAge" id="custAge" min = "0" max = "110" /> <br /> <input type="submit" /> </form>

  22. HTML<input /> Password box • Accepts text information that needs to be hidden as it is entered • Attributes: • type=“password” • name • id • size • maxlength • value

  23. HTML<input /> Check box • Allows the user to select one or more of a group of predetermined items • Attributes: • type=“checkbox” • name • id • checked • value

  24. HTML<input /> Radio Button • Allows the user to select exactly one from a group of predetermined items • Each radio button in a group is given the same name and a unique value • Attributes: • type=“radio” • name • id • checked • value

  25. HTML<input /> Radio Button <input type="radio" name="choice" id="yes" value = "yes" />Yes<br /> <input type="radio" name="choice" id="no" value = "no" />No<br />

  26. HTML<select> Select List • Configures a select list (along with <option> tags) • Also known as: Select Box, Drop-Down List, Drop-Down Box, and Option Box. • Allows the user to select one or more items from a list of predetermined choices. • Attributes: • name • id • size • multiple

  27. HTML<option> Options in a Select List • Configures the options in a Select List • Attributes: • value • selected

  28. HTML<select> Select List Should beer be included in tuition? <select name ="freebeer"> <option value = "yes">Yes!</option> <option value = "no">No!</option> </select>

  29. HTML<input> Submit Button • Submits the form information • When clicked: • Triggers the action method on the <form> tag • Sends the form data (the name=value pair for each form element) to the web server. • Attributes: • type=“submit” • name • id • value

  30. HTML<input /> Reset Button • Resets the form fields to their initial values • Attributes: • type="reset" • name • id • value

  31. HTML<input /> Button • Offers a flexible user interface • There is no default action when the button is clicked • Usually a JavaScript function is invoked when a button is clicked • Attributes: • type=“button” • name • id • value

  32. HTML<input /> Hidden form data • This form control is not displayed on the Web page. • Hidden form fields • Can be accessed by both client-side and server-side scripting • Sometimes used to contain information needed as the visitor moves from page to page. • Attributes: • type=“hidden” • name • id • value

  33. HTML<input /> Hidden form data <h3>Your Reply</h3> <form method = "post" action = "http://webdevfoundations.net/scripts/formdemo.asp"> <input type="hidden" name="postingid" value="98765"> name: <input name="realname" size=30> <br> email: <input name="email"> <br> subject: <input name="subject" value="re: hamlet and hesitation" size=30> <p> comments: <br> <textarea name="comments" cols="50" rows="10"> joe smiley wrote: I think hamlet doesn't act because if he does, the play's over. </textarea> <p> <input type="submit" value="send it!"> </form>

  34. HTML Form Enhancements<label> Tag • Associates a text label with a form control • Two Different Formats:<label>Email: <input type="text" name="CustEmail" id ="CustEmail" /></label> Or<form> <label for="email">Email: </label> <input type="email" name="CustEmail" id="email" placeholder="me@example.com" /> </form>

  35. HTML Form Enhancements<fieldset> & <legend> Tags • The Fieldset Element • Container tag • Creates a visual group of form elements on a web page • The Legend Element • Container tag • Creates a text label within the fieldset <fieldset><legend>Customer Information</legend> <label>Name: <input type="text" name="CustName" id="CustName" size="30" /></label><br /> <label>Email: <input type="text" name="CustEmail" id="CustEmail" /></label> </fieldset>

  36. HTML Form Enhancementstabindex attribute • Attribute that can be used on form controls and anchor tags • Modifies the default tab order • Assign a numeric value <input type="text" name="CustEmail" id="CustEmail" tabindex="1" />

  37. HTML Form Enhancementsaccesskey attribute • Attribute that can be used on form controls and anchor tags • Create a “hot-key” combination to place the focus on the component • Assign a value of a keyboard letter • On Windows use the ALT and the “hot-key” to move the cursor (worked for me in IE and Chrome, not in Firefox or Opera) <input type="text" name="CustEmail" id="CustEmail" accesskey=“c" />

  38. HTML Form Enhancements<input /> Image Button • Submits the form • When clicked: • Triggers the action method on the <form> tag • Sends the form data (the name=value pair for each form element) to the Web server. • Attributes: • type=“image” • name • id • src

  39. HTML Using a Table to Format a Form <form> <table border="0" width="75%"> <tr> <td align="right" width="10%">Name: </td> <td> <input type="text" name= "CustName" id= "CustName " size="30" /></td> </tr> <tr> <td align="right" width="10%">Email: </td> <td> <input type="text" name="CustEmail" id="CustEmail" /></td> </tr> <tr> <td align="right" width="10%"> <input type="submit" value="Submit" /></td> <td><input type="reset" /></td> </tr> </table> </form>

  40. Using CSS to Style a Form • Moderate Approach • Use a table to format the form but configure styles instead of XHTML table attributes. table { border: 3px solid #000000; width: 100%;} td { padding: 5px; margin: 0px;} .mylabel { text-align: right;}

  41. Using CSS to Style a Form “Pure" CSS Approach • Do not use a table to format the form. • Use CSS divs and spans with positioning properties to configure the page. #myForm {border:3px solid #000000; padding:10px;margin:10px;} .myRow {padding-bottom: 20px; .labelCol {float:left;width:100px; text-align:right;}

  42. Form Example • formsample.html

  43. Server-SideProcessing • Your web browser requests web pages and their related files from a web server. • The web server locates the files, may do other processing of data, and sends documents to your web browser. • The web browser then renders the returned files and displays the requested web pages for you to use.

  44. Common Uses of Server-Side Scripting • Search a database • Place an order at an online store • Send a web page to a friend • Subscribe to a newsletter

  45. CGICommon Gateway Interface • A protocol for a web server to pass a web page user's request to an application program and accept information to send to the user.

  46. Server-Side Scripting • One of many technologies in which a server-side script is embedded within a Web page document saved with a file extension such as: • .php (PHP) • ..jsp (Sun JavaServer Pages) • .aspx (ASP.Net). • Uses direct execution — the script is run either by the Web server itself or by an extension module to the Web server.

  47. Steps in Utilizing Server-Side Processing • Web page invokes server-side processing by a form or hyperlink. • Web server executes a server-side script. • Server-side script accesses requested database, file, or process. • Web server returns Web page with requested information or confirmation of action.

  48. Server-Side Scripting Technologies • JavaServer Pages http://java.sun.com/products/jsp • ColdFusion http://www.adobe.com/products/coldfusion • PHPhttp://www.php.net • Ruby on Rails http://www.rubyonrails.org or http://tryruby.hobix.com • Microsoft’s ASP.NET Framework http://www.microsoft.com/net

  49. ASP.NET Benefits • Good set of tools • Tools are well-integrated • Speedy performance (at least in development) • Easy dependency management • Easy design of basic GUIs and typical functionality • Easy (MS) Database Access

More Related