Intro to JavaScript

4,367 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,367
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
36
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Intro to JavaScript

  1. 1. Introduc)on  to  JavaScript   Jussi  Pohjolainen  Tampere  University  of  Applied  Sciences  
  2. 2. JavaScript  •  Object-­‐orientated  scrip)ng  language  •  Dialect  of  EcmaScript-­‐standard  •  History   –  Netscape:  LiveScript  to  JavaScript   –  MicrosoH:  JScript   –  Standard:  EcmaScript  •  Latest  version:  JavaScript  1.8.1,  a  superset  of   EcmaScript  
  3. 3. Possibili)es?  •  JS  was  designed  to  add  interac)vity  to  HTML   pages  •  Dynamic  HTML  •  Can  react  to  events:  page  has  finished  loading,   user  clicks..  •  Data  valida)on  •  Browser  detec)on  •  Cookies  
  4. 4. Compa)bility  •  Old  or  rare  browsers  •  PDA  or  Mobile  phones  •  JavaScript  execu)on  disabled  •  The  use  of  speech  browser  •  Browser  incompa)bilites  
  5. 5. JavaScript  Today:  AJAX  •  JavaScript  is  heavily  used  in  AJAX-­‐based  sites  •  AJAX:  asynchronous  JavaScript  and  XML   –  group  of  interrelated  techniques  used  on  the   client-­‐side  to  create  rich  web  apps  where  data  is   retrieved  from  the  server  in  the  background.  •  Example  usage:  Gmail,  Google  Maps  
  6. 6. Google  Web  Toolkit  •  Great  tool  for  crea)ng  AJAX/JS-­‐based  sites  •  Coding  is  done  with  Java  which  is  compiled  to   JavaScript  •  Resolves  browser  incompa)bilies  •  See  Example:   –  hZp://gwt.google.com/samples/Showcase/ Showcase.html  
  7. 7. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Embed Example</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" / ></head><body><p><!-- See: http://covertprestige.info/html/script-syntax/ --><script type="text/javascript">//<![CDATA[document.write("Hello from JS!");//]]></script></p></body></html>
  8. 8. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>External JS Example</title> <meta http-equiv="content-type" content="application/xhtml +xml; charset=utf-8" /> <script type="text/javascript" src="event.js"></script></head><body onload="message()"></body></html>
  9. 9. // event.jsfunction message(){ alert("This alert box was called with the onload event");}
  10. 10. Result  
  11. 11. QUICK  INTRO  TO  PROGRAMMING  WITH  JS  
  12. 12. Variables  •  Values  are  stored  in  variables  •  Variables  are  declared:   –  var carname;•  Assigning  value   –  carname = "volvo";•  Together   –  var carname = "volvo";
  13. 13. ...<body><p><script type="text/javascript">//<![CDATA[// Declarationvar car;// Assigningcar = "Volvo";document.write(car);//]]></script></p></body></html>
  14. 14. Comparison  (w3schools)  <script type="text/javascript">//<![CDATA[var d = new Date();var time = d.getHours();if ( time < 10 ){  document.write("<b>Good morning</b>");}//]]></script>
  15. 15. Comparison  (w3schools)  <script type="text/javascript">//<![CDATA[var d = new Date();var time = d.getHours();if ( time < 10 ){  document.write("<b>Good morning</b>");}else{  document.write("<b>Good Day</b>");}//]]></script>
  16. 16. Repeat  (w3schools)  <script type="text/javascript">//<![CDATA[var i=0;while (i<=5){  document.write("The number is " + i);  document.write("<br />");  i = i + 1;}//]]></script>
  17. 17. Popup  Boxes  •  Alert  Box   –  alert("some  text");  •  Confirm  Box   –  confirm("some  text");  •  Prompt  Box   –  prompt("sometext",  "default  value")  
  18. 18. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Embed Example</title> <meta http-equiv="content-type" content="application/ xhtml+xml; charset=utf-8" /></head><body><input type="button" onclick="alert(moi);" value="Show alert box" /></body></html>
  19. 19. Result  
  20. 20. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Embed Example</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" / > <script type="text/javascript"> //<![CDATA[ function showAlert() { alert("Hello World!"); } //]]> </script></head><body><input type="button" onclick="showAlert();" value="Show alert box" /></body></html>
  21. 21. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Embed Example</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <script type="text/javascript"> //<![CDATA[ function askQuestion() { var name = prompt("Please enter your name","Harry Potter"); if ( name!=null && name!="" ) { alert("Hello " + name + "! How are you today?"); } } //]]> </script></head><body><input type="button" onclick="askQuestion();" value="Question for me" /></body></html>
  22. 22. JS  EVENTS  AND  DOM  
  23. 23. JS  Events  •  Mouse  click  (onclick)  •  Web  page  loading  (onload)  •  Mousing  over  and  out  (onmouseover   onmouseout)  •  Submiang  HTML  form  (onsubmit)    
  24. 24. About  Events  •  You  may  cancel  some  events:   –  <a href=http://www.tamk.fi/ onclick="alert(message); return false;">•  Example   –  <form name="myform" action="" onsubmit="return validate();">
  25. 25. Example    <form name="myform" method="post" onsubmit="return count()"> Height (m):<br/> <input type="text" name="height"/><br/> Weight (kg):<br/> <input type="text" name="weight"/><br/> <input type="submit" value="BMI"/><br/> BMI<br/> <input type="text" name="result"/></form>
  26. 26. <script type="text/javascript"> //<![CDATA[ function count() { var height = document.myform.height.value; var weight = document.myform.weight.value; document.myform.result.value = (weight / (height*height)); return false; } //]]></script>
  27. 27. Result  
  28. 28. DOM  
  29. 29. W3C  DOM  •  DOM  –  Document  Object  Model  –  cross-­‐ pladorm  and  language-­‐independent   conven)on  for  interac)ng  with  objects  in   HTML  and  in  XML.  •  With  DOM  you  can  manipulate  html/xml   document!  Dynamic  html!  •  Public  interface  available:  hZp://www.w3.org/ DOM/DOMTR    
  30. 30. W3C  DOM  Levels  •  (  DOM  Level  0  and  Intermediate  DOM  )   –  Not  W3C  Standards,  used  in  Netscape  2  (Level  0)  and   Netscape  4  (Intermediate  DOM)    •  DOM  Level  1   –  1998:  Ability  to  change  en)re  HTML  or  XML  document  •  DOM  Level  2   –  2001:  Introduces  “getElementById”  func)on,  event   model  and  support  for  XML  namespaces  •  DOM  Level  3   –  2004:  XPath,  keyboard  event  handling  
  31. 31. Reality  
  32. 32. Node  •  In  DOM,  each  object  is  Node  •  In  this   –  <p>Hello</p>  •  You  have  two  nodes  1)  element  node  p  2)  text   node  Hello  •  Text  node  is  child  node  of  p  element.  P   element  is  parent  node  of  the  text  node  
  33. 33. Node  Example  <p>This is a <strong>paragraph</strong></p> <p> | -------------- | | This is a <strong> | | paragraph
  34. 34. AZribute  Node  <a href=“http://www.tamk.fi”>TAMK</a> <a> ----------------- | | TAMK href | http://www.tamk.fi
  35. 35. Nodes  •  Element  node:  p,  img,  a  •  Text  node:  sometext  •  AZribute  node:  src  
  36. 36. DOM  Level  1:  To  Access  DOM  tree  •  X  can  be  some  node   –  var  parent  =  x.parentNode;   –  var  firstchild  =  x.childNodes[0];  •  How  to  get  reference  to  x?  
  37. 37. window  -­‐  object  •  Every  reference  to  other  objects  is  done  via   the  window  –  object  •  You  dont  have  to  use  the  reference  in  your   code:   –  window.document.form.height.value  =   –  document.form.height.value  •  Window  methods   –  alert,  close,  confirm,  open,  prompt,  setTimeOut  
  38. 38. Document  object  
  39. 39. Access  var title =document.firstChild.firstChild.lastChild;// document.html.head.titlevar title =document.firstChild.childNodes[0].childNodes[0];
  40. 40. Geang  Element  Easier  Way  var x =document.getElementsByTagName(‘strong)[0]var x = document.getElementById(hereweare);  
  41. 41. Changing  the  Node  // <a href=“” id=“someId”>Link</p>var x =document.getElementById(’someId);x.firstChild.nodeValue = “Hello!”;x.setAttribute(“href”, “http:/…”);  
  42. 42. Inner  HTML  // <a href=“” id=“someId”>Link</p>var x =document.getElementById(’someId);x.innerHTML = “Hello!”;  //  innerHTML  is  NOT  W3C  Standard  and  it’s  //  slower…  
  43. 43. Crea)ng  and  Removing  Nodes  var x = document.createElement(’hr);document.getElementById(inserthrhere).appendChild(x);var node = document.getElementById(inserthrhere)node.removeChild(node.childNodes[0]);var x = document.createTextNode(’SomeText);document.getElementById(hereweare).appendChild(x);
  44. 44. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <script type="text/javascript"> //<![CDATA[ function change() { // Get list of ALL <h1> - elements var listOfHeading1 = window.document.getElementsByTagName("h1"); // Find the first <h1> - element in the list var heading1 = listOfHeading1[0]; // Get the child - element of the first <h1> - element (Text) var text = heading1.firstChild; // Replace the text text.data = "Hello from JS!"; } //]]></script></head><body><h1>Title</h1><input type="submit" onClick="change();" value="click!"/></body></html>
  45. 45. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <script type="text/javascript"> //<![CDATA[ function change() { // Reference to the table - element var table = document.getElementById("mytable"); var tr = document.createElement("tr"); // <tr> var td1 = document.createElement("td"); // <td> var td1Text = document.createTextNode("New Cell"); // "New Cell" td1.appendChild(td1Text); // <td>New Cell</td> var td2 = document.createElement("td"); // <td> var td2Text = document.createTextNode("New Cell"); // "New Cell" td2.appendChild(td2Text); // <td>New Cell</td> tr.appendChild(td1); tr.appendChild(td2); table.appendChild(tr); } //]]></script></head><body><table id="mytable" border="1"><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr></table><input type="submit" onClick="change();" value="Add Row"/></body></html>
  46. 46. DOM  Level  0  •  DOM  Level  1  supports  also  Level  0  •  Level  0:  Only  access  to  elements  •  Browsers  will  con)nue  to  support  it  •  Access  elements  by  name:   –  <img  name=“myimage”  src=“..”/>   –  document.images[’myimage].src  =   another_image.gif;    
  47. 47. DOM  Objects  
  48. 48. Accessing  Forms  in  DOM  0  document.forms[’myform].elements[address]document.forms[myform].elements[0]document.forms[0].elements[address’]document.forms[0].elements[0]
  49. 49. Opening  new  Browser  Window  // See: http://www.javascript-coder.com/window- popup/javascript-window-open.phtmlwindow.open("http://www.tamk.fi", "title", "width=600, height=100");  
  50. 50. navigator  -­‐  object  •  navigator  tells  informa)on  about  your   browser  •  Client-­‐sniffing   var browser = navigator.appName; var b_version = navigator.appVersion; var version = parseFloat(b_version); document.write("Browser name: "+ browser); document.write("<br />"); document.write("Browser version: "+ version);

×