Scribd
Upload
283 views

Js Bom Events 120401044137 Phpapp02 PDF

The document discusses the JavaScript Browser Object Model (BOM). It explains that the BOM provides objects to access and manipulate the browser window and provides information about common BOM objects like window, navigator, history, screen, and location. It also discusses how events can be handled in JavaScript using both the traditional and W3C event models, and provides examples of using BOM objects and handling click events.

Uploaded by

Subhan Mûghåł
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
283 views

Js Bom Events 120401044137 Phpapp02 PDF

The document discusses the JavaScript Browser Object Model (BOM). It explains that the BOM provides objects to access and manipulate the browser window and provides information about common BOM objects like window, navigator, history, screen, and location. It also discusses how events can be handled in JavaScript using both the traditional and W3C event models, and provides examples of using BOM objects and handling click events.

Uploaded by

Subhan Mûghåł
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

JavaScript

 Browser  Object  Model  


(BOM)  
Jussi  Pohjolainen  
Tampere  University  of  Applied  Sciences  
Objects?  
•  NaDve  (Core  Javascript)  
–  ECMAScript  standard:  Array,  Date..  
•  Host    
–  The  host  environment,  for  example  browser:  
BOM,  DOM  objects  
•  JavaScript  =  ECMAScript  +  BOM  +  DOM  
 
 
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/  
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)  
 
window
•  DocumentaDon  
–  https://developer.mozilla.org/en-US/docs/Web/
API/Window
Example  Usage  
window.setTimeout('alert("I will appear
after 3 seconds.")', 3000);

window.setInterval('alert("I will
reappear every 3 seconds.")', 3000);
window.screen
•  DocumentaDon  
–  https://developer.mozilla.org/en-US/docs/Web/
API/window.screen  
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);
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  
 
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]
ABOUT  JAVASCRIPT  EVENTS  
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  
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
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();">
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>
<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>
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.  
<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>
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  

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy