You are on page 1of 18

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 Browsers
if (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&.pa
=
------------------------------------------------
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

----------------------------------------
// make the array of images
bendyList = 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/3
http://hotwired.lycos.com/webmonkey/99/
Resources
http://www.webreference.com/js/tools/

http://workbench.netobjects.com/javascript_home.html

http://hotwired.lycos.com/webmonkey/programming/javascript/in

http://developer.netscape.com/docs/manuals/javascript.html

http://www.htmlgoodies.com/primers/jsp/hgjsp_1.html