Your SlideShare is downloading. ×
0
INFSCI 1052
<ul><li>Client Side versus Server Side </li></ul><ul><li>Server side </li></ul><ul><ul><li>PHP, ASP, Cold Fusion, Ruby on ...
<ul><li>Compiled versus interpreted languages </li></ul><ul><ul><li>C, C#, JAVA,  </li></ul></ul><ul><ul><li>JS, PHP, Pyth...
<ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xht...
<ul><li>External Linking to JS File- Two separate lines </li></ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1....
<ul><li>Linking and paths </li></ul><ul><ul><li>Absolute paths </li></ul></ul><ul><ul><ul><li>http://www.sis.pitt.edu </li...
<ul><li>JavaScript:The Missing Manual </li></ul><ul><li>http://www.sawmac.com/missing/javascript/tutorials/index.php </li>...
<ul><li>Writing text to a web page </li></ul><ul><ul><li>Document.write (‘<p> Hello World </P’); </li></ul></ul><ul><ul><l...
<ul><li>Errors and debugging </li></ul><ul><ul><li>If error in code typically nothing happens </li></ul></ul><ul><li>Web B...
<ul><li>Statement: the basic unit of JS program, ends in semicolon </li></ul><ul><li>Data Types </li></ul><ul><ul><li>Numb...
<ul><li>Var Examples </li></ul><ul><ul><li>var number=0; </li></ul></ul><ul><ul><li>var name=‘Bob’; </li></ul></ul><ul><ul...
<ul><li>Addition and concatenation </li></ul><ul><ul><li>+ sign for both purposes </li></ul></ul><ul><ul><li>When adding t...
<ul><li>Arrays </li></ul><ul><ul><li>var months = [‘Jan’, ‘Feb’, ‘Mar’]; </li></ul></ul><ul><ul><li>var months = new Array...
<ul><li>Arrays </li></ul><ul><ul><li>Push command to add multiple elements to the end of the array </li></ul></ul><ul><ul>...
<ul><li>Logic </li></ul><ul><li>If (condition) { </li></ul><ul><ul><li>Code statements </li></ul></ul><ul><ul><li>} </li><...
<ul><li>Loops </li></ul><ul><ul><li>While </li></ul></ul><ul><ul><ul><li>while (condition) { </li></ul></ul></ul><ul><ul><...
<ul><li>Functions </li></ul><ul><ul><li>Function functionName() { </li></ul></ul><ul><ul><ul><li>JS Statements </li></ul><...
<ul><li>function functionName ( paramater 1, paramater2) { </li></ul><ul><ul><li>JS Statements </li></ul></ul><ul><ul><li>...
<ul><li>DOM </li></ul><ul><ul><li>Document Object Model </li></ul></ul><ul><ul><li>Working with Web pages </li></ul></ul><...
<ul><li>Provides the information that JS needs to interact with elements on the webpage </li></ul><ul><li>A navigation str...
<ul><li>Tags </li></ul><ul><ul><li>Parents </li></ul></ul><ul><ul><li>Chidren </li></ul></ul><ul><ul><li>Siblings </li></u...
<ul><li>GetElementsByTagName </li></ul><ul><ul><li>Document.getElementsByTagName (‘a’); </li></ul></ul><ul><ul><ul><li>Usu...
<ul><li>Accessing near by nodes </li></ul><ul><ul><li>.childNodes </li></ul></ul><ul><ul><ul><li>A property of a node </li...
<ul><li>Example </li></ul><ul><li>var pTags = document.getElementsByTagName(‘p’); </li></ul><ul><li>var theP = pTags[0]; <...
Upcoming SlideShare
Loading in...5
×

JavaScript

654

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
654
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "JavaScript"

  1. 1. INFSCI 1052
  2. 2. <ul><li>Client Side versus Server Side </li></ul><ul><li>Server side </li></ul><ul><ul><li>PHP, ASP, Cold Fusion, Ruby on Rails </li></ul></ul><ul><ul><li>Good for accessing databases </li></ul></ul><ul><li>Client Side </li></ul><ul><ul><li>Good for immediacy of action </li></ul></ul><ul><ul><li>Forms </li></ul></ul><ul><ul><li>WebPages </li></ul></ul><ul><ul><li>Also, Flash, Ajax </li></ul></ul>
  3. 3. <ul><li>Compiled versus interpreted languages </li></ul><ul><ul><li>C, C#, JAVA, </li></ul></ul><ul><ul><li>JS, PHP, Python </li></ul></ul><ul><li>Adding JS to a webpage </li></ul><ul><ul><li>Usually add to the <head> section </li></ul></ul><ul><ul><li>Can be added to the <body> section too </li></ul></ul><ul><ul><li>Can be linked to an external JS file </li></ul></ul>
  4. 4. <ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> </li></ul><ul><li><html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> </li></ul><ul><li><head> </li></ul><ul><li><meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /> </li></ul><ul><li><title>Untitled Document</title> </li></ul><ul><li></head> </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>alert('helloworld'); </li></ul><ul><li></script> </li></ul><ul><li><body> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  5. 5. <ul><li>External Linking to JS File- Two separate lines </li></ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> </li></ul><ul><li><html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> </li></ul><ul><li><head> </li></ul><ul><li><meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /> </li></ul><ul><li><title>Untitled Document</title> </li></ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;myprogram.js&quot;> </script> </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>alert('helloworld'); </li></ul><ul><li></script> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul><ul><li>Good JavaScript Tutorial </li></ul><ul><ul><li>http://www.hunlock.com/blogs/Essential_Javascript_--_A_Javascript_Tutorial </li></ul></ul>
  6. 6. <ul><li>Linking and paths </li></ul><ul><ul><li>Absolute paths </li></ul></ul><ul><ul><ul><li>http://www.sis.pitt.edu </li></ul></ul></ul><ul><ul><li>Root-relative paths </li></ul></ul><ul><ul><ul><li>Using a webserver </li></ul></ul></ul><ul><ul><ul><li>Relative to the site’s top level folder </li></ul></ul></ul><ul><ul><ul><ul><li>Ex. /myfolder/index.html </li></ul></ul></ul></ul><ul><ul><li>Document-relative paths </li></ul></ul><ul><ul><ul><li>Specifies path from Web page to the JS file </li></ul></ul></ul><ul><ul><ul><ul><li>Ex: ../myscripts/myjsfile.js </li></ul></ul></ul></ul>
  7. 7. <ul><li>JavaScript:The Missing Manual </li></ul><ul><li>http://www.sawmac.com/missing/javascript/tutorials/index.php </li></ul><ul><li>http://www.sawmac.com/missing/javascript/tutorials/examples/index.html </li></ul><ul><li>Completed tutorials section and working tutorials </li></ul><ul><li>Focus is on basic JS and using JS libraries such as JQuery. </li></ul>
  8. 8. <ul><li>Writing text to a web page </li></ul><ul><ul><li>Document.write (‘<p> Hello World </P’); </li></ul></ul><ul><ul><li>http://www.sawmac.com/missing/javascript/tutorials/examples/chapter01/complete_1.2.html </li></ul></ul><ul><li>Attaching external file </li></ul><ul><li>http://www.sawmac.com/missing/javascript/tutorials/examples/chapter01/complete_1.3.html </li></ul>
  9. 9. <ul><li>Errors and debugging </li></ul><ul><ul><li>If error in code typically nothing happens </li></ul></ul><ul><li>Web Browsers have consoles that can display JS errors </li></ul><ul><li>Firefox has better console than IE </li></ul><ul><ul><li>Lists type of error, name of file, and line number </li></ul></ul><ul><ul><li>Select Tools->Error Console </li></ul></ul><ul><li>Common Errors </li></ul><ul><ul><li>Missing semicolon, missing quote mark, misspelled word, missing ), unterminated string literal, missing } </li></ul></ul>
  10. 10. <ul><li>Statement: the basic unit of JS program, ends in semicolon </li></ul><ul><li>Data Types </li></ul><ul><ul><li>Number </li></ul></ul><ul><ul><ul><li>Integer or fractional </li></ul></ul></ul><ul><ul><li>String </li></ul></ul><ul><ul><ul><li>Use quote marks </li></ul></ul></ul><ul><ul><li>Boolean </li></ul></ul><ul><ul><ul><li>True or False </li></ul></ul></ul><ul><li>Variables </li></ul><ul><ul><li>var varname; </li></ul></ul><ul><ul><ul><li>Begin with letter, $, or __ </li></ul></ul></ul><ul><ul><ul><li>Can only contain letters, numbers, $ and __ </li></ul></ul></ul><ul><ul><ul><li>CaSE SENSITIVE </li></ul></ul></ul>
  11. 11. <ul><li>Var Examples </li></ul><ul><ul><li>var number=0; </li></ul></ul><ul><ul><li>var name=‘Bob’; </li></ul></ul><ul><ul><li>var age=26; </li></ul></ul><ul><ul><li>var open=true; </li></ul></ul><ul><li>Math operators and order of operations apply </li></ul><ul><ul><li>+, -, *, / </li></ul></ul><ul><ul><li>Use parenthesis to ensure correct order of operations </li></ul></ul>
  12. 12. <ul><li>Addition and concatenation </li></ul><ul><ul><li>+ sign for both purposes </li></ul></ul><ul><ul><li>When adding two numbers the + sign does addition </li></ul></ul><ul><ul><li>When “adding” two string or a number and a string then the concatenation function is performed </li></ul></ul><ul><ul><ul><li>Ex. var fname = ‘Bill’; </li></ul></ul></ul><ul><ul><ul><li>var lname = ‘Smith’; </li></ul></ul></ul><ul><ul><ul><li>var totalname=fname+lname; </li></ul></ul></ul><ul><ul><ul><li>Sample: http://www.sawmac.com/missing/javascript/tutorials/examples/chapter02/complete_2.1.html </li></ul></ul></ul>
  13. 13. <ul><li>Arrays </li></ul><ul><ul><li>var months = [‘Jan’, ‘Feb’, ‘Mar’]; </li></ul></ul><ul><ul><li>var months = new Array(‘Jan’, ‘Feb’, ‘Mar’]; </li></ul></ul><ul><ul><li>Empty array </li></ul></ul><ul><ul><ul><li>var months =[]; </li></ul></ul></ul><ul><ul><li>Accessing arrays </li></ul></ul><ul><ul><ul><li>nameofarray[#]; </li></ul></ul></ul><ul><ul><ul><li>Zero based so nameofarray[2] references the third element </li></ul></ul></ul><ul><ul><li>Adding element to end of array </li></ul></ul><ul><ul><ul><li>nameofarray[nameofarray.length] = ‘text’; </li></ul></ul></ul><ul><ul><ul><li>var colors = [‘red’, ‘blue’, green’] </li></ul></ul></ul><ul><ul><ul><ul><li>colors [colors.length]=‘purple’; </li></ul></ul></ul></ul>
  14. 14. <ul><li>Arrays </li></ul><ul><ul><li>Push command to add multiple elements to the end of the array </li></ul></ul><ul><ul><ul><li>colors.push(‘pink’, orange’, ‘brown’); </li></ul></ul></ul><ul><ul><li>Add to the beginning of an array </li></ul></ul><ul><ul><ul><li>.unshift </li></ul></ul></ul><ul><ul><li>Push and unshift return a value: the number of items in the array </li></ul></ul><ul><ul><li>Removing items in an array </li></ul></ul><ul><ul><ul><li>pop() – removes the last item </li></ul></ul></ul><ul><ul><ul><li>shift() – removes the first item </li></ul></ul></ul><ul><ul><ul><li>Ex. var x = [0,1,2,3]; </li></ul></ul></ul><ul><ul><ul><li>var removeditem = x.pop() </li></ul></ul></ul><ul><ul><li>Adding and deleting in middle of array </li></ul></ul><ul><ul><ul><li>splice function </li></ul></ul></ul><ul><ul><li>Sample: http://www.sawmac.com/missing/javascript/tutorials/examples/chapter02/complete_2.3.html </li></ul></ul>
  15. 15. <ul><li>Logic </li></ul><ul><li>If (condition) { </li></ul><ul><ul><li>Code statements </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>Comparison operators </li></ul><ul><ul><li>>, <, >=, <= </li></ul></ul><ul><li>If else and if else if </li></ul><ul><li>&& = and </li></ul><ul><li>|| = or </li></ul><ul><li>! = not </li></ul><ul><li>Sample: http://www.sawmac.com/missing/javascript/tutorials/examples/chapter03/complete_3.1.html </li></ul>
  16. 16. <ul><li>Loops </li></ul><ul><ul><li>While </li></ul></ul><ul><ul><ul><li>while (condition) { </li></ul></ul></ul><ul><ul><ul><li>JS statements </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><li>For Loops </li></ul></ul><ul><ul><ul><li>for (var=x, x<=100; x++) { </li></ul></ul></ul><ul><ul><ul><li>JS statements </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><li>Do While Loops </li></ul></ul><ul><ul><ul><li>do { </li></ul></ul></ul><ul><ul><ul><ul><li>JS statements </li></ul></ul></ul></ul><ul><ul><ul><ul><li>} while (condition); </li></ul></ul></ul></ul>
  17. 17. <ul><li>Functions </li></ul><ul><ul><li>Function functionName() { </li></ul></ul><ul><ul><ul><li>JS Statements </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><li>Sample: </li></ul><ul><li>http://www.sawmac.com/missing/javascript/tutorials/examples/chapter03/complete_3.2.html </li></ul><ul><ul><li>More with using the Date object </li></ul></ul><ul><ul><ul><li>http://www.elated.com/articles/working-with-dates/ </li></ul></ul></ul><ul><li>Send information to functions via arguments and paramaters </li></ul>
  18. 18. <ul><li>function functionName ( paramater 1, paramater2) { </li></ul><ul><ul><li>JS Statements </li></ul></ul><ul><ul><li>}; </li></ul></ul><ul><ul><li>functionName (argument1, argument2); </li></ul></ul><ul><ul><li>Retrieving Information from functions </li></ul></ul><ul><ul><ul><li>Function functionName (paramater1, paramater2) { </li></ul></ul></ul><ul><ul><ul><li>JS statements </li></ul></ul></ul><ul><ul><ul><li>Return value; </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><li>Sample: http://www.sawmac.com/missing/javascript/tutorials/examples/chapter03/complete_3.3.html </li></ul>
  19. 19. <ul><li>DOM </li></ul><ul><ul><li>Document Object Model </li></ul></ul><ul><ul><li>Working with Web pages </li></ul></ul><ul><ul><ul><li>Identify an element on a page </li></ul></ul></ul><ul><ul><ul><li>Do something with the element </li></ul></ul></ul><ul><ul><ul><ul><li>Add/remove a class attribute </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Change a property of the element </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Add new content </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Remove the element </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Extract information from the element </li></ul></ul></ul></ul>
  20. 20. <ul><li>Provides the information that JS needs to interact with elements on the webpage </li></ul><ul><li>A navigation structure or map of the elements on the webpage </li></ul><ul><li>Standard from the W3C </li></ul><ul><ul><li>Most browsers have adopted but in different ways </li></ul></ul><ul><li>Hierarchical structure of the tags in a web page </li></ul>
  21. 21. <ul><li>Tags </li></ul><ul><ul><li>Parents </li></ul></ul><ul><ul><li>Chidren </li></ul></ul><ul><ul><li>Siblings </li></ul></ul><ul><ul><li>All nodes </li></ul></ul><ul><ul><li>Text is nodes too </li></ul></ul><ul><ul><li>Nesting determines the relationships </li></ul></ul><ul><li>Selecting a page element </li></ul><ul><ul><li>getElementById() </li></ul></ul><ul><ul><ul><li>Locating a single element that has a unique ID </li></ul></ul></ul><ul><ul><ul><li>Document.getElementById(‘header’) </li></ul></ul></ul><ul><ul><ul><ul><li>Searches page for a tag with an ID of ‘header’ </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Typically the results of this action are stored in a variable </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>var headNode=document.getElementById(‘header’); </li></ul></ul></ul></ul></ul>
  22. 22. <ul><li>GetElementsByTagName </li></ul><ul><ul><li>Document.getElementsByTagName (‘a’); </li></ul></ul><ul><ul><ul><li>Usually stored in a var </li></ul></ul></ul><ul><ul><ul><li>var myLinks=document.getElementsByTagName (‘a’); </li></ul></ul></ul><ul><ul><ul><ul><li>Find all <a> tags and store results in a var named myLinks </li></ul></ul></ul></ul><ul><ul><ul><ul><li>This action returns a list of nodes instead of a single node </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Similar to arrays </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Can access a single node using index notation </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Can use the length property </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Can loop using a for loop </li></ul></ul></ul></ul></ul>
  23. 23. <ul><li>Accessing near by nodes </li></ul><ul><ul><li>.childNodes </li></ul></ul><ul><ul><ul><li>A property of a node </li></ul></ul></ul><ul><ul><ul><li>Ex. </li></ul></ul></ul><ul><ul><ul><ul><li>var headline = Document.getElementById(‘header’); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>var headlineChildren = headline.childNodes; </li></ul></ul></ul></ul><ul><ul><li>.parentNode </li></ul></ul><ul><ul><ul><li>A property that represents the direct parent of a node </li></ul></ul></ul><ul><ul><li>.nextSibling and .previousSibling </li></ul></ul><ul><ul><ul><li>Properties that access next and previous siblings </li></ul></ul></ul><ul><ul><li>.innerHTML </li></ul></ul><ul><ul><ul><li>Not a standard part of DOM but most browsers implement it </li></ul></ul></ul><ul><ul><ul><li>Accesses the text part of a node </li></ul></ul></ul>
  24. 24. <ul><li>Example </li></ul><ul><li>var pTags = document.getElementsByTagName(‘p’); </li></ul><ul><li>var theP = pTags[0]; </li></ul><ul><li>alert(theP.innerHTML); </li></ul><ul><li>Opens an alert box and prints out the text of the first paragraph. </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×