Download Exercises & Notesof javascript and more Lecture notes Javascript programming in PDF only on Docsity!
Chapter 11 DOM Extensions
Selectors API Example
First item Second item Third item SelectorsAPIExample01.html
Selectors API Example
HTML Ipsum Presents
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
Header Level 2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tincidunt mauris eu risus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
Header Level 3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tincidunt mauris eu risus.
SelectorsAPIExample02.html
Selectors API Example
SelectorsAPIExample03.html
Element Traversal Example HTML Ipsum Presents
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
Header Level 2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tincidunt mauris eu risus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
Header Level 3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tincidunt mauris eu risus. All Children of <body>:
var myDiv = document.getElementById("myDiv"); alert(myDiv.classList.contains("highlight")); } ClassListExample01.html
InnerHtml Example
This is a paragraph with a list following it.
Item 1 Item 2 Item 3
InnerHtmlExample01.html
InnerHtml Example
This is a paragraph with a list following it.
Item 1 Item 2 Item 3
InnerHtmlExample02.html
function replaceText(){ var div = document.getElementById("content"); div.innerHTML = “Hello & welcome, "reader"!"; alert(div.innerHTML);
InnerHtml Example
This works in IE only.
InnerHtmlExample03.html
Page 4
InnerHtml Example
InnerHtmlExample04.html
OuterHTML Example
This is a paragraph with a list following it.
Item 1 Item 2 Item 3
OuterHTMLExample01.html
InnerHtml Example
This is a paragraph with a list following it.
Item 1 Item 2 Item 3
InsertAdjacentHtmlExample01.html
Create Element Example
Item 1
Page 5
InnerText Example
This is a paragraph with a list following it.
Item 1 Item 2 Item 3
InnerTextExample01.html
InnerText Example 2
This is a paragraph with a list following it.
Item 1 Item 2 Item 3
InnerTextExample02.html
InnerText Example 3
This is a paragraph with a list following it.
Item 1 Item 2 Item 3
InnerTextExample03.html
InnerText Example 4
This is a paragraph with a list following it.
Item 1
Page 7
Item 2 Item 3
InnerTextExample04.html
This is a paragraph with a list following it.
Item 1 Item 2 Item 3
InnerTextExample05.html
OuterText Example
This is a paragraph with a list following it.
Item 1 Item 2 Item 3
Item 1 Item 2 Item 3
TextContentExample03.html
This is a paragraph with a list following it.
Item 1 Item 2 Item 3
TextContentExample04.html
Chapter 13 Events
Event Bubbling Example
Click Me Page432. EventBubblingExample01.html
Event Capturing Example
window.onload = function(){ window.addEventListener("click", function(){ alert("Window"); }, true);
document.addEventListener("click", function(){ alert("Document"); }, true);
document.documentElement.addEventListener("click", function(){ alert("Html"); }, true);
document.body.addEventListener("click", function(){ alert("Body"); }, true);
document.getElementById("myDiv").addEventListener("click", function(){ alert("Div"); }, true); }
Click Me
This won't work in Internet Explorer.
Page433. EventCapturingExample01.html
HTML Event Handler Example
Page435.HTMLEventHandlerExample01.html
EVENT HANDLERS(2. DOM Level 0 Event Handlers) Page 437
DOM Level 0 Event Handler Example
Page440. IEEventHandlerExample02.html
EVENT HANDLERS(5. Cross-Browser Event Handlers) Page 441 var EventUtil = { addHandler: function(element, type, handler){ if (element.addEventListener){ element.addEventListener(type, handler, false); } else if (element.attachEvent){ element.attachEvent("on" + type, handler); } else { element["on" + type] = handler; } },
removeHandler: function(element, type, handler){ if (element.removeEventListener){ element.removeEventListener(type, handler, false); } else if (element.detachEvent){ element.detachEvent("on" + type, handler); } else { element["on" + type] = null; } }, EventUtil.js
Cross-Browser Event Handler Example
Page442. CrossBrowserEventHandlerExample01.html
DOM Event Object Javascript code for the event type. var btn = document.getElementById(“myBtn”); btn.onclick = function(event){ alert(event.type); //”click” }; (OR) var btn = document.getElementById(“myBtn”); btn.addEventListener(“click”, function(event){ alert(event.type); //”click” }, false);
DOM Event Object HTML code for the event type.
THE EVENT OBJECT (1. The DOM Event Object ) var btn = document.getElementById(“myBtn”); btn.onclick = function(event){ alert(event.type); //”click” }; btn.addEventListener(“click”, function(event){ alert(event.type); //”click” }, false);
Page444.DOMEventObjectExample01.html
Page444. DOMEventObjectExample02.html
DOM Event Object Example
Page446. DOMEventObjectExample06.html
EVENT HANDLERS(2. The Internet Explorer Event Object) Page 447 Event Type for IE( Javascript code for the event type.) var btn = document.getElementById(“myBtn”); btn.onclick = function(){ var event = window.event; alert(event.type); //”click” };
var btn = document.getElementById(“myBtn”); btn.attachEvent(“onclick”, function(event){ alert(event.type); //”click” });
This example only works in Internet Explorer.
Page448.IEEventObjectExample01.html
IE Event Object Example
Click Me
This link will not navigate when clicked.
This example only works in Internet Explorer.
Page448. IEEventObjectExample02.html
IE Event Object Example
This example works only in Internet Explorer.
alert("Clicked"); window.event.cancelBubble = true; }; document.body.onclick = function(event){ alert("Body clicked"); }; Page448.IEEventObjectExample03.html
EVENT HANDLERS(3. Cross-Browser Event Handlers) Page 449 var EventUtil = { addHandler: function(element, type, handler){ if (element.addEventListener){ element.addEventListener(type, handler, false); } else if (element.attachEvent){ element.attachEvent("on" + type, handler); } else { element["on" + type] = handler; } },
getEvent: function(event){ return event? event : window.event; },
getTarget: function(event){ return event.target || event.srcElement; },
preventDefault: function(event){ if (event.preventDefault){ event.preventDefault(); } else { event.returnValue = false; } },
//code removed for printing removeHandler: function(element, type, handler){ if (element.removeEventListener){ element.removeEventListener(type, handler, false); } else if (element.detachEvent){ element.detachEvent("on" + type, handler); } else { element["on" + type] = null; } },
stopPropagation: function(event){ if (event.stopPropagation){ event.stopPropagation(); } else {
Page 17
CrossBrowserEventObjectExample03.html
Nicholas' site
UIEventsExample01.html
1. UI Events (1. load Event) By using JavaScript
<p>Load event example.</p> Page453. LoadEventExample01.html
Load event example.
Page453. LoadEventExample02.html
Page453. LoadEventExample03.html
Load Event Example
Page 19
LoadEventExample04.html
1. UI Events (1. load Event)
Load Event Example
LoadEventExample05.html
Load Event Example
Page454. LoadEventExample06.html
1. UI Events (1. load Event)
Load Event Example
