1 / 18

JavaScript

JavaScript. H. Leonard Liaw LIS 385T. What is JavaScript?. JavaScript ≠ Java Developed by Netscape Purpose: to Create Dynamic websites Widely Used. How JS Works in HTML. <SCRIPT> … </SCRIPT> <!-- … // --> ;. <html> <head> <title>JavaScript Page</title>

weldon
Télécharger la présentation

JavaScript

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. JavaScript H. Leonard Liaw LIS 385T

  2. What is JavaScript? • JavaScript ≠ Java • Developed by Netscape • Purpose: to Create Dynamic websites • Widely Used

  3. How JS Works in HTML • <SCRIPT> … </SCRIPT> • <!-- … • // --> • ;

  4. <html> <head> <title>JavaScript Page</title> <script LANGUAGE=“JavaScript”> <!-- actual JavaScript follows below alert (“Welcome to the Test Site!”); // ending the script --> </script> </head> <body> Content of the Page </body> </html>

  5. Running It on a Browser www.artsci.wustl.edu/~hmliaw/Test-01.htm

  6. Elements of JavaScript • Variables • Arrays • Functions

  7. Variables <script language=“JavaScript”> <!-- definition of variables var num_car= 25; var passenger_per_car= 3; //calculation of total number of people var total_passenger= num_car * passenger_per_car Alert(total_passenger); // end of script --> </script> www.artsci.wustl.edu/~hmliaw/Test-Variable.htm

  8. Arrays var score = new Array(3); score[0] = 35 score[1] = 56 score[2] = 10 Alternative : var score = new Array(35,56,10); sum=score[0]+score[1]+score[2]; alert(sum) ; www.artsci.wustl.edu/~hmliaw/Test-02.htm

  9. Function <script langauge="JavaScript"> <!-- hide me function announceTime( ) { //get the date, the hour, minutes, and seconds var the_date = new Date(); var the_hour = the_date.getHours(); var the_minute = the_date.getMinutes(); var the_second = the_date.getSeconds(); //put together the string and alert with it var the_time = the_hour + ":" + the_minute + ":" + the_second; alert("The time is now: " + the_time); } // show me --> </script> </head> <body> ... </body> </html>

  10. JavaScript in Action ROLLOVER BUTTONS www.nbc.com <script language="javascript" src="/js_scripts/rollover.js"></script> ----------------------------------------------------------- <script language = "JavaScript"><!-- Hide from non-JavaScript Browsersif (document.images){button1 = new Image()button1.src = "../assets/images/picture1.gif"button2 = new Image()button2.src = "../assets/images/picture2.gif"}// --></script>

  11. JavaScript in Action INPUT-TEXT FIELD www.rottentomatoes.com function textRestore (input) { if ( input.value == "" ) { input.value = input.defaultValue; } ------------------------------------------------ <input type=text size="7" value="" onBlur="JavaScript:textRestore(this);" name=search style="background-color:#FFFFFF;font-family:Verdana, Arial; font-size:12; color:#113402; width:100px">

  12. JavaScript in Action FORMS http://edit.yahoo.com/config/eval_register?.intl=&new=1&.done=&.src=ym&.partner=&.p=&promo=&.last= ------------------------------------------------ function IsFormComplete(FormName) { var x = 0 var FormOk = true while ((x < document.forms[FormName].elements.length) && (FormOk)) { if (document.forms[FormName].elements[x].value == '') { alert('Please enter the '+document.forms[FormName].elements[x].name +' and try again.') document.forms[FormName].elements[x].focus() FormOk = false } x ++ } return FormOk }

  13. JavaScript in Action PLUG-IN DETECTION http://edit.yahoo.com/config/eval_register?.intl=&new=1&.done=&.src=ym&.partner=&.p=&promo=&.last= ------------------------------------------------ WM_easyDetect('flash'); WM_easyDetect('quicktime'); WM_easyDetect('shockwave'); WM_easyDetect('realaudio'); var hasFlash = WM_easyDetect('flash'); if(hasFlash) { window.location = 'flashversion.html'; } else { window.location = 'noflashversion.html'; }

  14. JavaScript in Action FLIP-BOOK ANIMATION http://hotwired.lycos.com/webmonkey/html/97/42/bendy/img_flip.html ---------------------------------------- // make the array of imagesbendyList = new Array('bendy000.gif', 'bendy001.gif', 'bendy002.gif', 'bendy003.gif', 'bendy004.gif', 'bendy005.gif', 'bendy006.gif', 'bendy007.gif', 'bendy008.gif', 'bendy009.gif', 'bendy010.gif', 'bendy011.gif', 'bendy012.gif', 'bendy013.gif', 'bendy014.gif'); // daPosition will point to successive images in the bendyList array daPosition = 0; function imageFlip() { // increment the pointer if(daPosition == bendyList.length-1) { daPosition = 0; } else { daPosition++; } // change the image document.images['daImg'].src = bendyList[daPosition]; // do it again setTimeout('imageFlip()', 200); }

  15. JavaScript in Action SCROLL www.chinatimes.com.tw --------------------------------- <!-- start scroller script --> <a id="scroller_anchor"></a> <script language="JavaScript1.2"> var scrollerwidth=405; var scrollerheight=76 var scrollerbgcolor='#eeeeee' ……….. slideimages='<a href=………………

  16. Why Use JavaScript? • Necessity http://www.cah.utexas.edu/ • Amusement http://www.disney.com

  17. Who’s got the time to Write JS?! • CHEAT!! • STEAL!! • HOW? Here’s the answer! http://hotwired.lycos.com/webmonkey/99/30/index1a.html?tw=programming

  18. Resources http://www.webreference.com/js/tools/ http://workbench.netobjects.com/javascript_home.html http://hotwired.lycos.com/webmonkey/programming/javascript/index.html http://developer.netscape.com/docs/manuals/javascript.html http://www.htmlgoodies.com/primers/jsp/hgjsp_1.html

More Related