JavaScript and BOM events

  • 1,243 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,243
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
20
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. JavaScript  Browser  Object  Model   (BOM)   Jussi  Pohjolainen   Tampere  University  of  Applied  Sciences  
  • 2. Objects?   •  NaDve  (Core  Javascript)   – ECMAScript  standard:  Array,  Date..   •  Host     – The  host  environment,  for  example  browser:   BOM,  DOM  objects   •  JavaScript  =  ECMAScript  +  BOM  +  DOM      
  • 3. BOM  vs  DOM?   •  BOM   –  Browser  Object  Model   –  Access  and  manipulaDon  of  the  browser  window   –  No  standard,  in  theory  every  browser  can  have  it's  own   implementaDon  of  BOM   –  In  pracDce  almost  all  modern  browsers  share  the  same  objects   •  DOM   –  Document  Object  Model   –  Different  levels  (1,2,3)   –  Manipulate  the  html  document   –  W3C  RecommendaDon  (not  JS  specific!)   •  hYp://www.w3.org/DOM/  
  • 4. Some  BOM  Objects   •  window  –  browser  window   – navigator  –  informaDon  about  the  browser   – history  –  going  back  and  forward  in  browser   history   – screen  –  informaDon  about  the  user  screen   – location  –  informaDon  about  the  url   – document  (this  is  DOM!,  we  will  look  at  this  later)    
  • 5. window •  DocumentaDon   –  https://developer.mozilla.org/en-US/docs/Web/ API/Window
  • 6. Example  Usage   window.setTimeout('alert("I will appear after 3 seconds.")', 3000); window.setInterval('alert("I will reappear every 3 seconds.")', 3000);
  • 7. window.screen •  DocumentaDon   –  https://developer.mozilla.org/en-US/docs/Web/ API/window.screen  
  • 8. window.navigator •  navigator  tells  informaDon  about  your  browser   •  DocumentaDon   –  hYps://developer.mozilla.org/en-­‐US/docs/Web/API/ Navigator   •  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);
  • 9. history  and  locaDon   •  history   – hYps://developer.mozilla.org/en-­‐US/docs/Web/ API/window.history   •  locaDon   – hYps://developer.mozilla.org/en-­‐US/docs/Web/ API/window.locaDon    
  • 10. 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]
  • 11. ABOUT  JAVASCRIPT  EVENTS  
  • 12. Intro  to  Events   •  When  adding  interacDvity  to  your  apps,  you  use   events   –  how  to  act  when  user  reacts  to  something   •  Different  models   –  Tradi:onal  model:  aYach  an  event  handler  to  certain   html  elements,  mostly  links  and  form  fields.  IE  and   others  conforms  to  Netscape  2  model   –  Modern  event  model:  totally  different  models  in   netscape  and  microsoc  ie   –  W3C  DOM  Event  specifica:on:  effort  to  bring   constant  event  handling  to  all  browsers  
  • 13. TradiDonal  Model   •  Works  fine!   •  Most  HTML  elements  have  properDes  like   onclick,  onmouseover,  onkeypress, onload, onsubmit –  Which  elements  hold  which  properDes?  Depends  on   the  browser…   •  How?   –  <a href="site.html" onclick="doSomething()"> •  See  events  and  compability  list   –  http://www.quirksmode.org/dom/events/ index.html
  • 14. Canceling     •  You  may  cancel  some  events:   – <a href=http://www.tamk.fi/ onclick="alert('message'); return false;"> •  Example   – <form name="myform" action="" onsubmit="return validate();">
  • 15. Example  of  TradiDonal  Model     <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>
  • 16. <script type="text/javascript"> //<![CDATA[ function count() { // Uses DOM LEVEL 0 var height = document.myform.height.value; var weight = document.myform.weight.value; document.myform.result.value = (weight / (height*height)); return false; } //]]> </script>
  • 17. Advanced  Event  Handling   •  W3C  and  Microsoc  have  their  own  event   registraDon  model   – Since  IE9  MS  decided  to  support  also  W3C  model!   •  W3C  model  is  supported  in  WebKit/Blink   (chrome  +  safari  +  opera),  firefox  (gecko)  and   IE9  -­‐>   •  In  W3C  event  model,  it's  possible  to  register   as  many  event  handlers  as  you  like  for  the   same  event  on  one  element.  
  • 18. <a href="http://www.tamk.fi" id="mylink">Click Me!</a> <script> function showAlert1() { alert("click 1!"); } function showAlert2() { alert("click 2!"); } var link = window.document.getElementById("mylink"); link.addEventListener('click', showAlert1, false); link.addEventListener('click', showAlert2, false); </script>
  • 19. true  or  false?   •  The  boolean  value  (true,  false)  is  related  to  event   handling  order   •  If  an  element  and  one  of  its  ancestors  have  an   event  handler  for  the  same  event,  which  one   should  fire  first?   •  See   –  hYp://www.quirksmode.org/js/events_order.html   •  See  also  good  summary:   –  hYp://www.w3.org/wiki/ Handling_events_with_JavaScript