180 likes | 343 Views
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>
E N D
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> <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>
Running It on a Browser www.artsci.wustl.edu/~hmliaw/Test-01.htm
Elements of JavaScript • Variables • Arrays • Functions
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
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
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>
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>
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">
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 }
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'; }
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); }
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=………………
Why Use JavaScript? • Necessity http://www.cah.utexas.edu/ • Amusement http://www.disney.com
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
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