JavaScript by leHQBY

VIEWS: 0 PAGES: 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=y
    m&.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&.d
   one=&.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.ht
   ml

----------------------------------------
// 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/30/in
  dex1a.html?tw=programming
                  Resources
http://www.webreference.com/js/tools/

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

http://hotwired.lycos.com/webmonkey/programming/javascrip
   t/index.html

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

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

								
To top