Using JavaScript DOM BOM jQuery Using JavaScript for Client-Side AJAX Long Polling Behavior WebSocket Knockout Internet Applications, ID1354 1 / 93 Using JavaScript Contents DOM The Document Object Model, DOM BOM jQuery AJAX The Browser Object Model, BOM Long Polling WebSocket The jQuery JavaScript Library Knockout AJAX Long Polling WebSocket The Knockout JavaScript Framework 2 / 93 Using JavaScript Section DOM BOM The Document Object Model, DOM jQuery AJAX The Browser Object Model, BOM Long Polling The jQuery JavaScript Library WebSocket Knockout AJAX Long Polling WebSocket The Knockout JavaScript Framework 3 / 93 I Try the features you want to use in all relevant browsers, check caniuse.com, etc I The best that can be said about browser support is that it varies. Using JavaScript The Document Object Model, DOM DOM BOM I The W3C Document Object Model, DOM, is jQuery an API that allows programs to access and AJAX update document content. Long Polling WebSocket I Defines objects representing HTML Knockout elements, methods to access HTML elements, and events generated by HTML elements. 4 / 93 I Try the features you want to use in all relevant browsers, check caniuse.com, etc Using JavaScript The Document Object Model, DOM DOM BOM I The W3C Document Object Model, DOM, is jQuery an API that allows programs to access and AJAX update document content. Long Polling WebSocket I Defines objects representing HTML Knockout elements, methods to access HTML elements, and events generated by HTML elements. I The best that can be said about browser support is that it varies. 4 / 93 Using JavaScript The Document Object Model, DOM DOM BOM I The W3C Document Object Model, DOM, is jQuery an API that allows programs to access and AJAX update document content. Long Polling WebSocket I Defines objects representing HTML Knockout elements, methods to access HTML elements, and events generated by HTML elements. I The best that can be said about browser support is that it varies. I Try the features you want to use in all relevant browsers, check caniuse.com, etc 4 / 93 Using JavaScript The Document Object Model, DOM DOM BOM I The W3C Document Object Model, DOM, is jQuery an API that allows programs to access and AJAX update document content. Long Polling WebSocket I Defines objects representing HTML Knockout elements, methods to access HTML elements, and events generated by HTML elements. I The best that can be said about browser support is that it varies. I Try the features you want to use in all relevant browsers, check caniuse.com, etc 4 / 93 Using JavaScript The DOM Tree DOM BOM jQuery AJAX Long Polling WebSocket I The DOM objects are organized Knockout in a tree. I The picture to the left is a part of the DOM tree for the course’s chat program. 5 / 93 Using JavaScript The DOM Tree DOM BOM jQuery AJAX Long Polling WebSocket I The DOM objects are organized Knockout in a tree. I The picture to the left is a part of the DOM tree for the course’s chat program. 5 / 93 I The HTML objects have methods, for example for adding and deleting elements. I An example is the JavaScript statement document.getElementById("demo").innerHTML = "Hello World!"; that uses the method getElementById to find the HTML object for the element with id demo, and sets the HTML of that object to "Hello World!", using the innerHTML property. Using JavaScript The DOM JavaScript API DOM I All HTML elements are represented by BOM objects. jQuery I The HTML objects have properties you can AJAX get or set, to read or update the objects. Long Polling WebSocket Knockout 6 / 93 I An example is the JavaScript statement document.getElementById("demo").innerHTML = "Hello World!"; that uses the method getElementById to find the HTML object for the element with id demo, and sets the HTML of that object to "Hello World!", using the innerHTML property. Using JavaScript The DOM JavaScript API DOM I All HTML elements are represented by BOM objects. jQuery I The HTML objects have properties you can AJAX get or set, to read or update the objects. Long Polling WebSocket I The HTML objects have methods, for Knockout example for adding and deleting elements. 6 / 93 Using JavaScript The DOM JavaScript API DOM I All HTML elements are represented by BOM objects. jQuery I The HTML objects have properties you can AJAX get or set, to read or update the objects. Long Polling WebSocket I The HTML objects have methods, for Knockout example for adding and deleting elements. I An example is the JavaScript statement document.getElementById("demo").innerHTML = "Hello World!"; that uses the method getElementById to find the HTML object for the element with id demo, and sets the HTML of that object to "Hello World!", using the innerHTML property. 6 / 93 Using JavaScript The DOM JavaScript API DOM I All HTML elements are represented by BOM objects. jQuery I The HTML objects have properties you can AJAX get or set, to read or update the objects. Long Polling WebSocket I The HTML objects have methods, for Knockout example for adding and deleting elements. I An example is the JavaScript statement document.getElementById("demo").innerHTML = "Hello World!"; that uses the method getElementById to find the HTML object for the element with id demo, and sets the HTML of that object to "Hello World!", using the innerHTML property. 6 / 93 Properties of HTML elements innerHTML, attributes Add or delete elements createElement, removeChild, appendChild Collections of HTML elements cookie, URL, elements, forms Using JavaScript The document Object DOM BOM I The object document can be accessed by jQuery any JavaScript code. It represents the AJAX Long Polling entire web page and is the entry point to WebSocket the DOM API. Knockout I Sample methods in document are Find HTML elements getElementById, getElementsByTagName, getElementsByClassName 7 / 93 Add or delete elements createElement, removeChild, appendChild Collections of HTML elements cookie, URL, elements, forms Using JavaScript The document Object DOM BOM I The object document can be accessed by jQuery any JavaScript code. It represents the AJAX Long Polling entire web page and is the entry point to WebSocket the DOM API. Knockout I Sample methods in document are Find HTML elements getElementById, getElementsByTagName, getElementsByClassName Properties of HTML elements innerHTML, attributes 7 / 93 Collections of HTML elements cookie, URL, elements, forms Using JavaScript The document Object DOM BOM I The object document can be accessed by jQuery any JavaScript code. It represents the AJAX Long Polling entire web page and is the entry point to WebSocket the DOM API. Knockout I Sample methods in document are Find HTML elements getElementById, getElementsByTagName, getElementsByClassName Properties of HTML elements innerHTML, attributes Add or delete elements createElement, removeChild, appendChild 7 / 93 Using JavaScript The document Object DOM BOM I The object document can be accessed by jQuery any JavaScript code. It represents the AJAX Long Polling entire web page and is the entry point to WebSocket the DOM API. Knockout I Sample methods in document are Find HTML elements getElementById, getElementsByTagName, getElementsByClassName Properties of HTML elements innerHTML, attributes Add or delete elements createElement, removeChild, appendChild Collections of HTML elements cookie, URL, elements, forms 7 / 93 Using JavaScript The document Object DOM BOM I The object document can be accessed by jQuery any JavaScript code. It represents the AJAX Long Polling entire web page and is the entry point to WebSocket the DOM API. Knockout I Sample methods in document are Find HTML elements getElementById, getElementsByTagName, getElementsByClassName Properties of HTML elements innerHTML, attributes Add or delete elements createElement, removeChild, appendChild Collections of HTML elements cookie, URL, elements, forms 7 / 93 Using JavaScript Change CSS Rules DOM BOM jQuery I To change CSS rules use the following type AJAX of statement: Long Polling document.getElementById(id).style.<property> WebSocket = <some style> Knockout I For example, the statement document.getElementById("p2").style.color = "blue"; changes the font color of element with id p2 to blue. 8 / 93 Using JavaScript Change CSS Rules DOM BOM jQuery I To change CSS rules use the following type AJAX of statement: Long Polling document.getElementById(id).style.<property> WebSocket = <some style> Knockout I For example, the statement document.getElementById("p2").style.color = "blue"; changes the font color of element with id p2 to blue. 8 / 93 I For example, to change text in the paragraph when the user clicks it: <p onclick="clicked(this)">Click Me!</p> function clicked(source) { source.innerHTML = "You clicked"; } Using JavaScript Events DOM I The DOM defines many events, for BOM example onClick, which is fired by an jQuery element when the user clicks on it. AJAX Long Polling I To react to an event, add JavaScript code to WebSocket the event handler attribute of the element Knockout that generates the event. 9 / 93 Using JavaScript Events DOM I The DOM defines many events, for BOM example onClick, which is fired by an jQuery element when the user clicks on it. AJAX Long Polling I To react to an event, add JavaScript code to WebSocket the event handler attribute of the element Knockout that generates the event. I For example, to change text in the paragraph when the user clicks it: <p onclick="clicked(this)">Click Me!</p> function clicked(source) { source.innerHTML = "You clicked"; } 9 / 93 Using JavaScript Events DOM I The DOM