Your SlideShare is downloading. ×
0
Introduc)on	
  to	
  JavaScript	
  

            Jussi	
  Pohjolainen	
  
Tampere	
  University	
  of	
  Applied	
  Scienc...
JavaScript	
  
•  Object-­‐orientated	
  scrip)ng	
  language	
  
•  Dialect	
  of	
  EcmaScript-­‐standard	
  
•  History...
Possibili)es?	
  
•  JS	
  was	
  designed	
  to	
  add	
  interac)vity	
  to	
  HTML	
  
   pages	
  
•  Dynamic	
  HTML	...
Compa)bility	
  
•    Old	
  or	
  rare	
  browsers	
  
•    PDA	
  or	
  Mobile	
  phones	
  
•    JavaScript	
  execu)on...
JavaScript	
  Today:	
  AJAX	
  
•  JavaScript	
  is	
  heavily	
  used	
  in	
  AJAX-­‐based	
  sites	
  
•  AJAX:	
  asy...
Google	
  Web	
  Toolkit	
  
•  Great	
  tool	
  for	
  crea)ng	
  AJAX/JS-­‐based	
  sites	
  
•  Coding	
  is	
  done	
 ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html...
// event.js
function message()
{
    alert("This alert box was called
  with the onload event");
}
Result	
  
QUICK	
  INTRO	
  TO	
  PROGRAMMING	
  
WITH	
  JS	
  
Variables	
  
•  Values	
  are	
  stored	
  in	
  variables	
  
•  Variables	
  are	
  declared:	
  
    –  var carname;
•...
...
<body>

<p>
<script type="text/javascript">
//<![CDATA[

// Declaration
var car;
// Assigning
car = "Volvo";
document....
Comparison	
  (w3schools)	
  
<script type="text/javascript">
//<![CDATA[

var d    = new Date();
var time = d.getHours();...
Comparison	
  (w3schools)	
  
<script type="text/javascript">
//<![CDATA[

var d    = new Date();
var time = d.getHours();...
Repeat	
  (w3schools)	
  
<script type="text/javascript">
//<![CDATA[

var i=0;
while (i<=5)
{
  document.write("The numbe...
Popup	
  Boxes	
  
•  Alert	
  Box	
  
    –  alert("some	
  text");	
  
•  Confirm	
  Box	
  
    –  confirm("some	
  text"...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
  strict.dtd">
<h...
Result	
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html...
JS	
  EVENTS	
  AND	
  DOM	
  
JS	
  Events	
  
•  Mouse	
  click	
  (onclick)	
  
•  Web	
  page	
  loading	
  (onload)	
  
•  Mousing	
  over	
  and	
 ...
About	
  Events	
  
•  You	
  may	
  cancel	
  some	
  events:	
  
    –  <a href=http://www.tamk.fi/
       onclick="aler...
Example	
  	
  
<form name="myform" method="post" onsubmit="return
  count()">
    Height (m):<br/>
       <input type="te...
<script type="text/javascript">
   //<![CDATA[
   function count()
   {
       var height = document.myform.height.value;
...
Result	
  
DOM	
  
DOM?	
  
•  Specifica)on	
  how	
  to	
  
   access	
  (X)Html	
  –	
  elements	
  
•  Different	
  levels	
  of	
  DOM:	
  ...
window	
  -­‐	
  object	
  
•  Every	
  reference	
  to	
  other	
  objects	
  is	
  done	
  via	
  
   the	
  window	
  –...
Opening	
  new	
  Browser	
  Window	
  
// See:
  http://www.javascript-coder.com/window-
  popup/javascript-window-open.p...
navigator	
  -­‐	
  object	
  
•  navigator	
  tells	
  informa)on	
  about	
  your	
  browser	
  
•  Client-­‐sniffing	
  
...
document	
  -­‐	
  object	
  
•  Collec)on	
  of	
  elements	
  in	
  the	
  html-­‐page	
  
•  Crea)ng	
  Nodes	
  
    –...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html ...
Upcoming SlideShare
Loading in...5
×

Intro to JavaScript

2,452

Published on

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

No Downloads
Views
Total Views
2,452
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
89
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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.

×