Intro to JavaScript

2,504
-1

Published on

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

No Downloads
Views
Total Views
2,504
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
92
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.js function 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[ // Declaration var car; // Assigning car = "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. DOM?   •  Specifica)on  how  to   access  (X)Html  –  elements   •  Different  levels  of  DOM:  0,   1,  and  2  
  30. 30. window  -­‐  object   •  Every  reference  to  other  objects  is  done  via   the  window  –  object   •  You  don't  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  
  31. 31. Opening  new  Browser  Window   // See: http://www.javascript-coder.com/window- popup/javascript-window-open.phtml window.open("http://www.tamk.fi", "title", "width=600, height=100");
  32. 32. 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);
  33. 33. document  -­‐  object   •  Collec)on  of  elements  in  the  html-­‐page   •  Crea)ng  Nodes   –  createElement("element  name")   –  createTextNode("text")   •  Walk  the  Tree   –  getElementsByTagName   –  getElementById   •  See:  hZp://www.howtocreate.co.uk/tutorials/ javascript/domstructure  
  34. 34. <!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>
  35. 35. <!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>
  1. A particular slide catching your eye?

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

×