Intro to JavaScript Jaime Ruiz
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Intro to JavaScript
Jaime Ruiz
Short History of JavaScript Released in 1996 with Netscape 2 Originally called LiveScript MS releases Jscript with IE 3.0
Unreliable and buggy 1997 dHTML is born with Version 4.0
browsers. Web Programmers strike it rich.
Short History of JavaScript 1999 begin to see versions of W3C Dom
guidelines implemented in versions of JavaScript and Jscript
Netscape and Open Source Community drop old Netscape core to develop first browser to meet W3C DOM guidelines
Most new browsers now support W3C Dom
Common Uses of JavaScript Client Side
Image Rollovers (most common) Form Validation
http://www.papiowines.com/contactus.asp Dynamic Form Generation
http://www.robertmondavi.com/Wheretobuy/ DHTML
http://www.bart.gov
Browser Detection Server-Side
Microsoft ASP pages
Bad Uses of JavaScript
Just because you can doesn’t mean you should
Strengths and Weaknesses Strengths
Easy to learn Powerful? Close to being cross-platform
Weaknesses Promotes bad programming Makes websites less usable
Overview
What is DOM? Document Object Model (DOM)
“The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.” – from w3c.org
Why is it important?
Adding JavaScript to HTML Inline
<script language=“JavaScript”><!—Hides script from old browsers
Code goes here//<script>
External File<script language=“JavaScript” src=“file.js” ></script>
Variables and Data Types JavaScript is a loosely typed language
Data types are converted during execution as needed
Data typing only matters during operations
“6” + “67” = “667” String 6 + 67 = 73
Variables and Data Types Numbers
Integer and floating-point numbers. Booleans
True or false. Can not use as 1 or 0 but 0 = false; Strings
Anything surrounded by “” or ‘’ex. “My String” = ‘My String’
Object myObj = new Object();
Null Not the same as zero - no value at all.
Undefined The Variable has been created but no value has been
assigned to it
Scope Is the following code valid?
for(var i = 0; i < 10;i++){document.write(i);
}alert(i);
Scope Is the following code valid?
for(var i = 0; i < 10;i++){document.write(i);
}alert(i);
YES! Scopes only happens within functions
Scope var myInt = 0 //Global Var
function foo(){var i = 10; //local variablemyInt += i;
}document.write(i); //will cause error
Operators Arithmetic (the usual suspects)
+,-,*,/,%,--,++ Comparison
==, !=, >, >=, <, <= Boolean
&&, ||, !
Statements Conditionals
if(x < 0){alert(“x is negative”);
}else{alert(“x is positive”);
} switch(favoriteProf){
case “Yoon”: statements;
break; case “Lank”: statements; break; default: statement;}
Statements Loops
for(var i =0; i < myArray.length;i++){document.write(i);
} do
{ statements;} while (condition)
while(condition){statements;
}
Statements Object Manipulation
for …in (can be object or array)for(var prop in document){
document.write(prop + " = " + document[prop] +"<br />");}
Ouputnamespaces = [object]lastModified = 03/14/2005 18:45:05parentNode = nullnodeType = 9fileCreatedDate = 03/14/2005onbeforeeditfocus = nullbgColor = #ffffff …
Functions The function definition is a statement
which describes the function: its name, any values (known as "arguments") which it accepts incoming, and the statements of which the function is comprised.
function funcName(argument1,argument2,etc) { statements;
}
Functions Example:
function foo(myString){document.write(myString);
}
foo(“Computers are fun”);foo(); //will this work?
Functions When calling functions, JavaScript will
try to match the function with same number of arguments
Previous example would work but the argument myString would be undefined.
JavaScript Objects To declare an object
var myObj = new Object(); To set properties
myObj.name = “blah” Setting methods
myObj.foo = foo;
JavaScript Objects Prototype an object
function petDog(name,breed,year){this.name = name;this.breed = breed;this.year = year;
}var myDog = new petDog(“rusty”,”mutt”,1990);
Real Life Examples Swap Images
Steps Preload images On mouse over event swap the image On mouse out event restore the image
Real Life Examples Preload images
if(document.images){ menu1img = new Image();menu1img.src = '/images/nav1_stations.gif';
menu1imgOn = new Image();menu1imgOn.src = '/images/nav1_stations_on.gif';
} Swap Image function
function swapImage(imageName, newImage){if(document.images[imageName]){
document.images[imageName].src = newImage.src;
}}
The Html <a href=“#” onmouseover=“swapImage(menu1,menu1imgOn)”
onmouseout=“swapImage(menu1,menu1img)”><img src=“/images/nav1_sations.gif” id=“menu1” name=“menu1” alt=“” width=“130” height=“15” /></a>
Real Life Examples Things to watch out for
Make sure ID and Name are set correctly Each image must have a unique name/id Always make sure the image exists before
trying to swap
Real Life Examples Form Validation
Create function to run on form’s onSubmit event
<form name="myForm" id="myForm" action="#" method="get" onsubmit="return checkForm(this)">
<input type="text" name="firstName" id="firstName" value="" />
<input type="submit" />
</form>
Real Life Examples Form Validation
function checkForm(theForm){if(theForm["firstName"].value == ""){
alert("You must enter your first name");
theForm["firstName"].focus();return false;
}return true;
}
Real Life Examples Other ways to access a form
document.forms[0].elements[0]gets the first form and first element of the form
document.forms[“formName”].elements[“elementName”]
Real Life Examples Dynamically build a select box
The Form<form name="Choices" id="Choices" method="get" action="retailerresults.asp"
onsubmit="checkValid();"> <select name="BrandCode"
onchange="ChangeVarietal(window.document.Choices.BrandCode.options[selectedIndex].value);"><option value="">Select One</option><option value ="RC">Robert Mondavi Private Selection</option><option value ="OV">Robert Mondavi Winery</option><option value ="WB">Woodbridge</option>
</select><select name="VarietalCode" id="VarietalCode" size="1">
<option value="">First, Select a Winery------------------------</option><option value="">__________________________________________</option>
</select>
Real Life Examples Dynamically build a select box
The JavaScript (edited)function ChangeVarietal(labelcode){
var j = 0;if (!labelcode){
//code resets the select filed} else {
window.document.Choices.VarietalCode.options[0].text = "Select One";window.document.Choices.VarietalCode.options[0].value = "";j++;window.document.Choices.VarietalCode.length = 100;for (var i in bvArray[labelcode]){ window.document.Choices.VarietalCode.options[j].text = bvArray[labelcode]
[i].productdescription; window.document.Choices.VarietalCode.options[j].value = escape(bvArray[labelcode][i].productdescription);
j++; }}window.document.Choices.VarietalCode.length = j;
}
Real Life Examples Dynamic HTML - an integration of JavaScript,
Cascading Style Sheets, and the Document Object Model.
Most common type is drop down menus Created by accessing an html elements style sheet
and changing its visibility
Real Life Examples The HTML
<div id="navMapsSubDiv" ><img src="assets/images/glb_bullet.gif" width="8"
height="4" alt="" border="0" class="imageCenterAlign" id="l2maps1"/><a onmouseover="TurnOnLevel2(l2maps1)" onmouseout="TurnOffLevel2(l2maps1)" href="#">Trip planner</a><br />
<img src="assets/images/glb_bullet.gif" width="8" height="4" alt="" border="0" class="imageCenterAlign" id="l2maps2"/><a onmouseover="TurnOnLevel2(l2maps2)" onmouseout="TurnOffLevel2(l2maps2)" href="#">Find a stop/station</a><br />
<img src="assets/images/glb_bullet.gif" width="8" height="4" alt="" border="0" class="imageCenterAlign" id="l2maps3"/><a onmouseover="TurnOnLevel2(l2maps3)" onmouseout="TurnOffLevel2(l2maps3)"href="#">Bus & rail maps</a><br /></div>
Real Life Examples The Style Sheet
/* Maps SubDiv */#navMapsSubDiv{
position:absolute;top: 86px;visibility : hidden;font-family : Arial, Helvetica, sans-serif;font-size : 11px;margin: 10px 10px 10px 10px;background: #D4C9BC;border : 1px solid #A3825D;padding : 5px 5px 5px;left:0px;z-index: 100;
}
Real Life Examples The JavaScript/** Dummy function that prevents errors while page is
loading*/function nada(){};
this.SwapImageOn = nada;this.SwapImageOff = nada;this.TurnSubOn = nadathis.TurnSubOff = nada;this.TurnOffLevel2 = nada;this.TurnOnLevel2 = nada;
Real Life Examples The JavaScript/** Determine what code to use*/
if( document.all ){this.init = IE_init;
}else if ( document.layers ) {this.init = NN_init;
}else if (document.getElementById) { this.init = std_init; }
Real Life Examples The JavaScript/** Init functions*/function IE_init(){
this.SwapImageOn = std_SwapImageOn;this.SwapImageOff = std_SwapImageOff;this.TurnSubOn = IE_TurnSubOn;this.TurnSubOff = IE_TurnSubOff;this.TurnOffLevel2 = std_TurnOffLevel2;this.TurnOnLevel2 = std_TurnOnLevel2;__windowLoaded();
}
Real Life Examples The JavaScriptfunction IE_TurnSubOn(sectionname) { if(eval(sectionname+"SubDiv")){ if(active_sub_div) TurnSubOff(active_sub_div); active_sub_div = sectionname; eval(sectionname+"SubDiv").style.visibility = "visible"; }}
function NN_TurnSubOn(sectionname) {if(eval(sectionname+"SubDiv")){ if(active_sub_div) TurnSubOff(active_sub_div); active_sub_div = sectionname; document.layers[sectionname+"SubDiv"].visibility = "visible"; }}
function std_TurnSubOn(sectionname) { if(document.getElementById( sectionname+"SubDiv" ) != null){ if(active_sub_div) TurnSubOff(active_sub_div); active_sub_div = sectionname; document.getElementById( sectionname+"SubDiv" ).style.visibility = "visible"; }}
Real Life Examples Browser Detectionfunction getBrowserSpecs() {
var is = new Object();
var agt = navigator.userAgent.toLowerCase().toLowerCase();
// *** BROWSER VERSION ***
// Note: On IE5, these return 4, so use is.ie5up to detect IE5.
var reNumber = new RegExp( "[0-9\.]+" ); // assume the version is the first number in the USER AGENT
is.major = parseInt( reNumber.exec( agt )[0] );
is.minor = parseFloat( reNumber.exec( agt )[0] );
Real Life Examplesis.nav = ( (agt.indexOf('mozilla')!=-1)
&& (agt.indexOf('spoofer')==-1)
&& (agt.indexOf('compatible') == -1)
&& (agt.indexOf('opera')==-1)
&& (agt.indexOf('webtv')==-1) );
is.nav4 = ( is.nav && ( is.major == 4 ) );
is.nav4up = ( is.nav && ( is.major >= 4 ) );
is.navonly = (is.nav && ( ( agt.indexOf(";nav") != -1 ) || ( agt.indexOf("; nav") != -1 ) ) );
Real Life Examples
is.nav6up = ( is.nav && (is.major >= 6 ) );
is.ie = ( agt.indexOf("msie") != -1 );
is.ie3 = ( is.ie && ( is.major < 4 ) );
is.ie4 = ( is.ie && ( is.major == 4 ) && ( agt.indexOf("msie 5") == -1 ) ); // what about 6.0?
is.ie4up = ( is.ie && ( is.major >= 4 ) );
is.ie5 = ( is.ie && ( is.major == 4 ) && ( agt.indexOf("msie 5" ) != -1) );
is.ie5up = ( is.ie && !is.ie3 && !is.ie4 ); // this will assume 5up if it isn't 3 or 4
is.opera = ( agt.indexOf("opera") != -1 );
is.safari = ( agt.indexOf("safari") != -1 );
is.webtv = ( agt.indexOf("webtv") != -1 );
Real Life Examples// *** PLATFORM ***
is.win = ( ( agt.indexOf("win")!=-1 ) || ( agt.indexOf("16bit" ) !=-1 ) );
// NOTE: On Opera 3.0, the userAgent string includes "Windows 95/NT4" on all
// Win32, so you can't distinguish between Win95 and WinNT.
is.win95 = ( (agt.indexOf("win95")!=-1 ) || ( agt.indexOf("windows 95") != -1 ) );
// is this a 16 bit compiled version?
/*
is.win16 = (( agt.indexOf("win16") != -1 ) ||
( agt.indexOf("16bit") != -1) ||
( agt.indexOf("windows 3.1") != -1 ) ||
( agt.indexOf("windows 16-bit")!=-1 ) );
is.win31 = (( agt.indexOf("windows 3.1")!=-1 ) ||
(agt.indexOf("win16")!=-1) ||
(agt.indexOf("windows 16-bit")!=-1) );
*/
Real Life Examples// NOTE: Reliable detection of Win98 may not be possible. It appears that:
// - On Nav 4.x and before you'll get plain "Windows" in userAgent.
// - On Mercury client, the 32-bit version will return "Win98", but
// the 16-bit version running on Win98 will still return "Win95".
is.win98 = ( (agt.indexOf("win98")!=-1 ) || ( agt.indexOf("windows 98")!=-1) );
is.winnt = ( (agt.indexOf("winnt")!=-1) || (agt.indexOf("windows nt")!=-1) );
is.win32 = ( is.win95 || is.winnt || is.win98 ||
( agt.indexOf("win32")!=-1 ) || ( agt.indexOf("32bit")!=-1 ) );
is.os2 = ( (agt.indexOf("os/2")!=-1 ) || ( agt.indexOf("ibm-webexplorer")!=-1) );
Real Life Examplesis.mac = ( agt.indexOf("mac")!=-1 );
is.mac68k = ( is.mac && ( (agt.indexOf("68k")!=-1 ) || ( agt.indexOf("68000")!=-1) ) );
is.macppc = ( is.mac && ( (agt.indexOf("ppc")!=-1 ) || (agt.indexOf("powerpc")!=-1) ) );
is.linux = (agt.indexOf("inux")!=-1);
is.unix = (agt.indexOf("x11")!=-1);
return is;
}
Real Life ExamplesSo finally to use
var browser = getBrowserSpecs();
Debugging your script Most common way
alert(); Better way
Use Firefox, Netscapetype javascript: in the location bar and you will go to JavaScript console
Real Debugging Go to Microsoft and download script
debugger. User Beware….
Patient.txt
Apponit.txt
Patient.txt
Apponit.txt
Apponit.txtApponit.txt
Related Documents
