Download - Just Enough JavaScript
![Page 1: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/1.jpg)
Just Enough JavaScript
![Page 2: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/2.jpg)
Javascript code is triggered by “events”
Document Events onload, onunload
Mouse Events onclick, ondblclickonmousedown, onmouseuponmousemove, onmouseover, onmouseout
Key Events onkeypress, onkeydown, onkeyup
Form Events onfocus, onblur, onselect, onchangeonsubmit, onreset
New events proposed Jan 2010 in HTML5
![Page 3: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/3.jpg)
In many ways JavaScript is just like
but it’s not really like
![Page 4: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/4.jpg)
Common Programming Language Features
• Comments• Data Types• Variable Declarations• Expressions• Flow of Control Statements• Functions and Subroutines• Macros and Preprocessor Commands• I/O Statements• Libraries• External Tools (Compiler, debugger etc)
![Page 5: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/5.jpg)
Comments
//Single line comments/* Multiple line
comments */
![Page 6: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/6.jpg)
The Simplest Program
<!- - HTML Comment: - -> <script> //This shows a simple message box
alert(‘Msg’); </script
![Page 7: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/7.jpg)
JavaScript inserted into HTML <body> <script type="text/javascript"> alert('Opening Page'); function myMsg(s){ alert('msg: '+s); } alert('After this the page is displayed'); </script>
<input type=button value=‘Click Test’ onclick=“alert(‘alert1’); myAlert(‘alert2’);” />
</body>
•Javascript outside of a function and inside <script> tags runs when the web page is loaded•JavaScript code and calls to JavaScript functions can be triggered using events such as onclick•When quoting strings use either single quote or double quote – be consistant
![Page 8: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/8.jpg)
Refering to an external file of functions
<script type="text/javascript" language="javascript" src="hello.js">
![Page 9: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/9.jpg)
Built In Dialogs
• alert(msg); //simple message box• confirm(msg); //shows yes/no. returns
true/false• prompt(msg,default value); //input box
IE supports additional dialog boxes – avoid!document.execCommand(‘SaveAs’);
![Page 10: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/10.jpg)
getElementByID(‘idvalue’)
<button onclick='javascript:result=prompt("Enter your name","Default"); display=document.getElementById("disp");
display.innerHTML=result;'>
<tag id=disp>Result will show here</tag>
![Page 11: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/11.jpg)
Note the purpose of these 3 attributes!
<tag id=‘uniqueName’ name=‘groupName’
class=‘styleName’ />
id: a unique identifier in your pagename: used for radio buttons and name/value
pairs passed in query stringsclass: used to link a particular style with a tag
![Page 12: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/12.jpg)
Data Types
• Number• String• Boolean• Date
There are 2 other “special” types• Undefined • Null
![Page 13: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/13.jpg)
Variable Declarations• var counter,
pi=3.15159265, name=‘Fred’, name2=“Janna”, completed=true, approved=false;
Javascript is a weakly typed language• We don’t have to declare a data type• The type of a variable depends on what we assign to it• The data type can change at any time.• Variables names are case sensitive. (So are JavaScript keywords like
var)
![Page 14: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/14.jpg)
Declaring Arrays• var names=[‘Mary’,”Murray”,”Jim”];
var nestedArray=[ [1,2,3], [4,5,6], [7,8,9]];
var list=new Array(‘Martha’,’Muffin’,’Donut’,18);
var myArray=new Array();
for(i=1;i<10;i++) myArray[i]=i*i;
myArray[100] = 42;
We don’t have to say how big an array is in advance of its use!We can mix different data types in an array!
![Page 15: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/15.jpg)
Declaring Variables
To indicate a constant: ALL_CAPS
ie: var GRAVITATIONAL_CONST=6.67300 e-11;
variables use camelCaps
var firstName=‘George’;
datatypes use camel caps that start with a capital:
class NetworkCard ....
![Page 16: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/16.jpg)
Scope var msg="I am a global variable"; var counter=1; //also gobal
function display(msg) //This msg is local { var local; alert(msg+local+counter); counter++; }
display("Local value of msg"); display(msg); //Use global value and insert into function
![Page 17: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/17.jpg)
Hungarian Notation
The practice of putting a prefixto indicate the datatype of a variable, named after Charles Simonyi
sFirstName - its a stringbFound - its a booleanasNames - array of stringsdBirth - date
It’s encouraged in Microsoft communities
![Page 18: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/18.jpg)
OperatorsStandard C arithmetic operators will work
++ --
* / %+ -
+= -= *= /= %=
? : (triadic operator)
The + operator also concatenates Strings: 5+5 becomes 10, ‘5’+’5’ becomes ‘55’ - this could create problems
result=‘Hello ’+’world!’;
![Page 19: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/19.jpg)
JavaScript Reserved Keywords
abstract continue extends implements native static try
as const false import new super typeof
boolean debugger final in null switch use
break default finally instanceof package synchronized var
byte do float int private this void
case double for interface protected throw volatile
catch else function is public throws while
char enum goto long return transient with
class export if namespace short true
You should know this from C or VB New to JavaScript - we’ll cover these
We won’t cover these Proposed but not standard
![Page 20: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/20.jpg)
The typeof Operator
Make believe that it’s a functionx=17
alert(typeof(x)); //Numberx=‘17’; alert(typeof(x)); //Stringx=new Date();alert(typeof(x)); //Objectx=true;alert(typeof x); //Boolean
typeof always returns a string
![Page 21: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/21.jpg)
Javascript Relational Operators
Standard C relational operators will work too
> < =
>= <= !=
=== !== matches data type and value
5==“5” is true. 5===“5” is false
![Page 22: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/22.jpg)
JavaScript Logical Operators
These are just like C as well!
• &&• ||• !
![Page 23: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/23.jpg)
Flow of Control: if stmt
price=18;
if (age<18 || age>65){ total=price*taxRate*.80; }else total=price*taxRate;
![Page 24: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/24.jpg)
Flow of Control: Comparing Strings
//This works likes C ought to have worked!
if (sex==‘Female’){ alert(‘Hello Madam’); }
if(password!=‘Swordfish’) alert(‘try again!’);
![Page 25: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/25.jpg)
switch statement n=prompt(‘Enter any value'); switch(n) //The switch statement will take any scalar data type! { case 1: document.write('We accept numbers'); break; case true: document.write('We accept boolean values'); break; case 4.7: document.write('we accept floating point numbers'); break; case 'Humber‘: case x: document.write('switch will take a String or match the value of a variable'); break; default: document.write('Default case'); }
![Page 26: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/26.jpg)
Looping – Just like C
for(i=0; i<10;i++){ idName=‘checkbox’+i; document.write(‘<input id=“’ + idName + ‘”> ‘
+ i + ‘</input>’); }
![Page 27: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/27.jpg)
A “for each” loop
var students=['Bob','Mike','Rinky'];
for(i in students) { alert(i+ ' ' +students[i]); }
![Page 28: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/28.jpg)
Associative Arrays
var students=['Bob','Mike','Rinky'];
for(i in students) { alert(i+ ' ' +students[i]); }
![Page 29: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/29.jpg)
Early Exit from a Loop
sum=0;for(i=0; ;i++){ sum+=i; if(sum>20) break; }
alert(‘The total is: ‘ + sum);
![Page 30: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/30.jpg)
Skipping to the End of a loop
sum=0; for(i=0; i<7;i++) { if(i==5 || i==3) continue; sum+=i; } alert(sum);
![Page 31: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/31.jpg)
while loops
var counter = 0; var newLine = ‘<br />’; document.write(newLine);
while(counter < 10){ document.write(“counter = " + counter);document.write(newLine); counter++; }
document.write(“Done!!");
![Page 32: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/32.jpg)
Functions and Subroutines
function function1(arg1,arg2,arg2){ result=arg1+arg2+arg3; return result; }
function subroutine1(arg1,arg2){
//Do something return; }
![Page 33: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/33.jpg)
Some Math FunctionsMath.abs(value) Absolute integer or float
Math.sin(value), Math.cos(value)Math.tan(value)
All the trig functions you’d expect.value is measured in radians.
Math.ceil(value)Math.floor(value)Math.round(value)
Rounding functions – note that round only rounds to the nearest integer.
Math.random() Random number between 0 and 1
Math.sqrt(n)Math.pow(n,m) nm
Math.min(a,b)Math.max(a,b)
lesser of two valuesgreater of two values
Math.log(num)
Math.PI The value of P
Also asin, acos, atan, atan2, log, exp and a few other items
![Page 34: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/34.jpg)
String Functions“one,two,three”.split(‘,’) Creates the array:
[“one”,”two”,”three”]
myString.length length of string
x=myString.toUpperCase()x=myString.toLowerCase()
x will be all upper casex will be all lower case
“George”.substring(2,4) Value is “org” - we start counting at 0
“Bananana”.indexOf(“nan”)“Bananana”.lastIndexOf(“nan”)
returns location ?returns location ?
“George”.charAt(0) result is “G”
x=escape(“<br/> This & That?”))
y=unescape(string)
Generates: %3CBR/%3E%20%26%20This%20%26%20That%3F%20the inverse function
These make a string portable to send over a network.
y=
![Page 35: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/35.jpg)
Date Functions
Warnings: getMonth() returns a month as a number: 0-11 getDate() returns the day of the month: 1-31 getDay() returns the day of the week: 0-6
x=new Date(2010,12,1); //This is Jan 1, 2011! x=new Date(2012,2,0); //last day of Febuary, 2012 x=new Date(2012); //This is 2012 millisecs past the EPOCH
![Page 36: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/36.jpg)
Array Functions[“one”,”two”,”three”].join(“;”) Creates a string: one;two;three
(it’s the opposite of split)myArray.length highest subscript in myArray+1
myArray.reverse() Reverses the order of elements in the array.
myArray.slice(2,5) Creates a new array using elements 2 thru 5 of the old array
![Page 37: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/37.jpg)
The Array slice Function
var fruits = ["Banana", "Orange", "Apple", "Mango"];document.write(fruits.slice(0,1) + "<br />");document.write(fruits.slice(1) + "<br />");document.write(fruits.slice(-2) + "<br />");document.write(fruits);
//OutputBananaOrange,Apple,MangoApple,MangoBanana,Orange,Apple,Mango
Example taken from W3Schools.com
![Page 38: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/38.jpg)
The Array splice Function
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write("Removed: " + fruits.splice(2,1,"Lemon") + "<br />");
document.write(fruits);
The function returns items removed and modifies the original array.
Example taken from W3Schools.com
![Page 39: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/39.jpg)
Sorting an Array of Strings
myArray.sort();
![Page 40: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/40.jpg)
Regular Expressions
var str=‘Hello World. Have a nice day!’;str.replace(/World/,’Canada’);//result is: ‘Hello Canada. Have a nice day!’;
result=str.replace(/[aeiou]/g,’*’); //result is ‘H*ll* C*n*d*. H*v* * n*c* d*y!’;
//The original is unchanged
result= str.replace(/H/,’h’); //Only the first h affected
Most of what you would have learned in “Unix and the Internet” about regularexpressions in vim can be applied here for doing complex search and replace.
![Page 41: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/41.jpg)
The match Function var str=‘Hello World. Have a nice day!’;
str.match(/[aeiou].?/g);
Returns the following array of matches
[“el”, “o “, “o “, “av”,”a “, “ic”, “e “, “ay”]
str="Monday Tuesday Wednesday Thursday Friday“; result=str.match(/(Mon|Fri)day/g);
Returns:
[“Monday”, “Friday”]
![Page 42: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/42.jpg)
Debugging
![Page 43: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/43.jpg)
Output to the Error Console
You can send a message to the Error Console – however this stops the script:
{ .... //Code goes here if(value>10) throw new Error(“Your message goes here: “ + value);
}
![Page 44: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/44.jpg)
You can also write to Firebug’s Console
{ console.log(“Your message: “ + yourVariable); console.log(“C style format allowed: %s, %d, $%8.2f”, myString, age, cost);
console.debug(“ console.info(“ console.warn(“ console.error(
![Page 45: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/45.jpg)
DOM: The Document Object Model
![Page 46: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/46.jpg)
document as an Object(document Properties
document.cookie A list of all cookies sent to the document as name/value pairs
document.links An array of all links in the document
document.anchors An array of all images in the document
document.forms An array of all forms in the document
document.images An array of all images in the document
![Page 47: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/47.jpg)
Window as an Object
• To open a new window
![Page 48: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/48.jpg)
Navigator as an Object
![Page 49: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/49.jpg)
Cookies can be set with the Meta tag
<META HTTP-EQUIV="Set-Cookie" CONTENT="cookievalue=myFirstCookie;expires=30">
<META HTTP-EQUIV="Set-Cookie" CONTENT="cookievalue3=my3rdCookie;expires=30">
setMessage('myList',document.cookie);
//Result:cookievalue=myFirstCookie; cookievalue2=my2ndCookie; cookievalue3=my3rdCookie
![Page 50: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/50.jpg)
Retrieving a Cookie
![Page 51: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/51.jpg)
document.getElementById(id)• DOM: The Document Object Model• We’ll use this function a lot to get a handle on a specific tag. But to make it more readable
we’ll put it into functions that reflect it’s use:
function setMessage(id,msg) { element=document.getElementById(id); element.innerHTML=msg; }
function getMessage(id,msg) { element=document.getElementById(id); return element.innerHTML; }
<p id='when' onclick='setMessage("when",Date())' onmouseout='alert(getMessage("when"));' > Click for time</p>
![Page 52: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/52.jpg)
For this course use
<script type="text/javascript" src="utilities.js">
(this is available from the directory: http://munro.humber.ca/~king/NEST401/utilities.js)
![Page 53: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/53.jpg)
Modifiable Tag PropertiesinnerHTML <tag id=‘t1’>This can be modified</tag> change text contents
value <input id=‘t1’ type=‘text’ value=‘Fred’ /> change a form value
src <img id=‘t1’ src=‘myImage.jpg’ /> replace or set an image
href <a href=‘ibm.com’> </a> alter a hypertext link
checked <input type=checkbox checked=checked> alter/check checkbox or radio button
style <h1 style=“color:red” > .... alter/retrieve style info
className <h1 class=‘Humber’ id=‘tagID’ name=‘fieldName’ >
alter/retrieve class, id or name info
name retrieve/alter element name
element=document.getElementById(name);element.innerHTML=‘<b>any text can be inserted’;element.src=‘otherImage.jpg’element.href=newLocationelement.checked=true; element.style=‘color:green’;element.className=‘Seneca’; //Note: not class, className!
![Page 54: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/54.jpg)
Retrieve All Tags of a Given Type
function displayPictureNames() { images=document.getElementsByTagName("img"); for(id in images) { if(images[id].alt==undefined) continue; alert(id + ' ' + images[id].src); images
} }
![Page 55: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/55.jpg)
The Error Console helps debug code
![Page 56: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/56.jpg)
The FireBug Plug in Is Better
• Watches• Single stepping through code• Call stack• Break points
![Page 57: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/57.jpg)
Advanced Features
![Page 58: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/58.jpg)
The with statement
with (Math) { a = PI * r*r; y = r*sin(theta); x = r*cos(theta) b = a + y/x; }
with (myCar) { setModel(‘Escape’);
display(); }
The idea is similar to with in VBA
![Page 59: Just Enough JavaScript](https://reader035.vdocument.in/reader035/viewer/2022070400/568134e7550346895d9c1e13/html5/thumbnails/59.jpg)
Non Primitive Objects• Idea is similar to types in VBA or structs in C• Allows us to create a non-primitive data type
function Car(nMake, nModel,nYear){ this.make=nMake; this.model=nModel; this.year=nYear; this.display=display_car; this.setModel=setModel; //Not in text }
function display_car() { document.write(‘(‘ + this.make +’,’+this.model+’,’+this.year+’)’ );}
function setModel(replacement) { this.model=replacement; }
myCar=new car('Ford','Fairlane',2010); myCar.setModel(‘Escape’); myCar.display_car();