martin kruliš 26. 11. 2015 by martin kruliš (v1.1)1
TRANSCRIPT
![Page 1: Martin Kruliš 26. 11. 2015 by Martin Kruliš (v1.1)1](https://reader035.vdocuments.us/reader035/viewer/2022062809/5697bfba1a28abf838ca09c7/html5/thumbnails/1.jpg)
by Martin Kruliš (v1.1) 1
Client-side Scripting
Martin Kruliš
26. 11. 2015
![Page 2: Martin Kruliš 26. 11. 2015 by Martin Kruliš (v1.1)1](https://reader035.vdocuments.us/reader035/viewer/2022062809/5697bfba1a28abf838ca09c7/html5/thumbnails/2.jpg)
by Martin Kruliš (v1.1) 2
Including Scripts into Web Pages◦ Dynamic modifications of HTML and CSS◦ Handling user actions within the browser◦ Asynchronous communication with server
Major Challenges◦ Security
The script is completely isolated from the computer It may interact only through the browser
◦ Performance Limited due to properties of scripting languages and
security measures imposed by the browser
26. 11. 2015
Client-side Scripting
![Page 3: Martin Kruliš 26. 11. 2015 by Martin Kruliš (v1.1)1](https://reader035.vdocuments.us/reader035/viewer/2022062809/5697bfba1a28abf838ca09c7/html5/thumbnails/3.jpg)
by Martin Kruliš (v1.1) 3
Application Examples◦ Improving esthetic experience of the presentation
(beyond CSS capabilities)◦ User input processing and verification◦ Background data retrieval and synchronization◦ Generating graphics (SVG or with the canvas
element)◦ …
Technologies◦ JavaScript – on the rise, especially with HTML5◦ VBScript – used in MSIE in the past◦ 3rd party technologies (Flash, Silverlight, …)
26. 11. 2015
Client-side Scripting
Examples
![Page 4: Martin Kruliš 26. 11. 2015 by Martin Kruliš (v1.1)1](https://reader035.vdocuments.us/reader035/viewer/2022062809/5697bfba1a28abf838ca09c7/html5/thumbnails/4.jpg)
by Martin Kruliš (v1.1) 4
Embedded Scripts<script type="text/javascript">
the JavaScript code</script>
Linked Scripts<script type="text/javascript" src="url"></script>
Event handlers<img src="url" onmouseover="code-handling-event">
26. 11. 2015
JavaScript in HTML
The script must comply with HTML rules
![Page 5: Martin Kruliš 26. 11. 2015 by Martin Kruliš (v1.1)1](https://reader035.vdocuments.us/reader035/viewer/2022062809/5697bfba1a28abf838ca09c7/html5/thumbnails/5.jpg)
by Martin Kruliš (v1.1) 5
Browser Environment◦ Global object window
API for current browser window/tab Presents the global context Encapsulates all prepared objects and APIs
window.document – DOM API for HTML document window.location – Access/control current URL window.history – Navigate through browser history window.screen – Information about system screen window.navigator – Information about the browser …
Controls the pop-up message boxes
26. 11. 2015
JavaScript in Web Browser
![Page 6: Martin Kruliš 26. 11. 2015 by Martin Kruliš (v1.1)1](https://reader035.vdocuments.us/reader035/viewer/2022062809/5697bfba1a28abf838ca09c7/html5/thumbnails/6.jpg)
by Martin Kruliš (v1.1) 6
Document Object Model<html> <body> <h1>DOM Example</h1> <p> Document Object Model is an API … </p> <img src="url" alt="text"> ... </body></html>
26. 11. 2015
Accessing Document
body
h1 p img
Document
src
DOM Example Document Object Model
…
alt
html
…
![Page 7: Martin Kruliš 26. 11. 2015 by Martin Kruliš (v1.1)1](https://reader035.vdocuments.us/reader035/viewer/2022062809/5697bfba1a28abf838ca09c7/html5/thumbnails/7.jpg)
by Martin Kruliš (v1.1) 7
Document Object Model◦ Object model representing HTML/XML tree◦ Class of each node corresponds with the node
type◦ Different nodes allow different methods
26. 11. 2015
Accessing Document
Node
CommentText
ElementDocument Attr CharacterData …
![Page 8: Martin Kruliš 26. 11. 2015 by Martin Kruliš (v1.1)1](https://reader035.vdocuments.us/reader035/viewer/2022062809/5697bfba1a28abf838ca09c7/html5/thumbnails/8.jpg)
by Martin Kruliš (v1.1) 8
DOM Level◦ Incremental standards for DOM issued by W3C◦ Level 0
Various technologies before standardization Sometimes also denoted DHTML (dynamic HTML)
◦ Level 1 – basic navigation and manipulation◦ Level 2 – added namespaces, events, and CSS◦ Level 3 – keyboard events, XPath, load and store◦ Level 4 – being developed◦ Browsers support entire level 1 and most of 2 and
3
26. 11. 2015
Accessing Document
![Page 9: Martin Kruliš 26. 11. 2015 by Martin Kruliš (v1.1)1](https://reader035.vdocuments.us/reader035/viewer/2022062809/5697bfba1a28abf838ca09c7/html5/thumbnails/9.jpg)
by Martin Kruliš (v1.1) 9
Node Traversing◦ Node.firstChild, Node.lastChild◦ Node.childNodes◦ Node.nextSibling, Node.previousSibling◦ Node.parentNode, Node.parentElement◦ Node.nodeName, Node.nodeValue◦ Node.attributes – relevant for elements only◦ Document.documentElement – root element◦ Document.getElementsByTagName(tagName)◦ Document.getElementById(id)
26. 11. 2015
Document Object Model
![Page 10: Martin Kruliš 26. 11. 2015 by Martin Kruliš (v1.1)1](https://reader035.vdocuments.us/reader035/viewer/2022062809/5697bfba1a28abf838ca09c7/html5/thumbnails/10.jpg)
by Martin Kruliš (v1.1) 10
Content Manipulation◦ Document.createElement(), …◦ Node.appendChild(), Node.insertBefore()◦ Node.replaceChild(), Node.removeChild()◦ Element.getAttribute(), Element.setAttribute()◦ Element.removeAttribute()◦ Node.cloneNode(deep)
Extra Features◦ Node.innerHTML, Node.outerHTML◦ Document.evaluate(xpath)
26. 11. 2015
Document Object Model
Example 1
![Page 11: Martin Kruliš 26. 11. 2015 by Martin Kruliš (v1.1)1](https://reader035.vdocuments.us/reader035/viewer/2022062809/5697bfba1a28abf838ca09c7/html5/thumbnails/11.jpg)
by Martin Kruliš (v1.1) 11
Cascading Style Sheets◦ HTMLElement.style
Represent properties in style attribute Properties are represented in CSS object modelvar hln = document.getElementById("headline");hln.style.backgroundColor = '#ffeecc';
Property names in model corresponds to names in CSS Dashes are removed and following words are capitalized
◦ Element.className, Element.classList◦ Document.styleSheets[].cssRules[]
.selectorText – string with CSS selector .style – same as Element.style
26. 11. 2015
DOM and CSS
Example 2
![Page 12: Martin Kruliš 26. 11. 2015 by Martin Kruliš (v1.1)1](https://reader035.vdocuments.us/reader035/viewer/2022062809/5697bfba1a28abf838ca09c7/html5/thumbnails/12.jpg)
by Martin Kruliš (v1.1) 12
Event Model◦ Top-level scripts are executed immediately◦ Other code can be attached to various events◦ One event loop processed in single thread
26. 11. 2015
Events
Event Queue
Mouse Moved
User Clicked
Loading Finished
Window Resized
Dispatcher
DOM Tree
Target
Processes one event at a time
Target element is found …
If the event is not processed, it bubbles up
![Page 13: Martin Kruliš 26. 11. 2015 by Martin Kruliš (v1.1)1](https://reader035.vdocuments.us/reader035/viewer/2022062809/5697bfba1a28abf838ca09c7/html5/thumbnails/13.jpg)
by Martin Kruliš (v1.1) 13
Event Handling◦ Events may be handled by callback functions
Attached directly in HTML<button onclick="js code handling the event">
Or by Javascript codemyButton.onclick = function(event) { ... }ormyButton.addEventListener('click', fnc, capture);
◦ Todays choice – addEventListener() Allows multiple handlers on one event Works on any DOM element (not just visual
elements) Allows early event capturing
26. 11. 2015
Events
![Page 14: Martin Kruliš 26. 11. 2015 by Martin Kruliš (v1.1)1](https://reader035.vdocuments.us/reader035/viewer/2022062809/5697bfba1a28abf838ca09c7/html5/thumbnails/14.jpg)
by Martin Kruliš (v1.1) 14
Event Object◦ Event is represented by an object implementing Event interface Special events may implement some other interface
derived from Event (e.g., MouseEvent)◦ The object carries event information
Event.target, Event.currentTarget Event.bubbles, Event.cancelable Event specific information (e.g., mouse coordinates)
◦ The event propagation may be disrupted Event.preventDefault() Event.stopPropagation()
26. 11. 2015
Events
Examples 3,4
![Page 15: Martin Kruliš 26. 11. 2015 by Martin Kruliš (v1.1)1](https://reader035.vdocuments.us/reader035/viewer/2022062809/5697bfba1a28abf838ca09c7/html5/thumbnails/15.jpg)
by Martin Kruliš (v1.1) 15
Window Functions◦ User interaction
window.alert(msg), window.confirm(msg) window.prompt(msg, defaultText)
◦ Important events window.onload window.onresize window.onbeforeunload, window.onunload
◦ Timers window.setTimeout(code, ms) window.setInterval(code, ms) window.clearTimeout(), window.clearInterval()
26. 11. 2015
Window
![Page 16: Martin Kruliš 26. 11. 2015 by Martin Kruliš (v1.1)1](https://reader035.vdocuments.us/reader035/viewer/2022062809/5697bfba1a28abf838ca09c7/html5/thumbnails/16.jpg)
by Martin Kruliš (v1.1) 16
Location◦ Read/write value gets/sets URL in address bar◦ location.host, location.pathname, …◦ location.assign(url), location.replace(url)◦ location.reload()
History◦ Manipulate the browser history of navigation◦ history.length – number of items in history◦ history.back(), history.forward()◦ history.go(offset) – move in history by offset
26. 11. 2015
Window
![Page 17: Martin Kruliš 26. 11. 2015 by Martin Kruliš (v1.1)1](https://reader035.vdocuments.us/reader035/viewer/2022062809/5697bfba1a28abf838ca09c7/html5/thumbnails/17.jpg)
by Martin Kruliš (v1.1) 17
Asynchronous JavaScript and XML◦ A technique that combines three technologies
JavaScript Asynchronous HTTP client API integrated in browser XML or other semi-structured data format
◦ Script invokes HTTP transfer and provide callbacks Both GET and POST requests are supported
◦ The callback is invoked asynchronously At the conclusion of the HTTP transfer It may process the returned data (e.g., update the
contents of the web page)
26. 11. 2015
AJAX
![Page 18: Martin Kruliš 26. 11. 2015 by Martin Kruliš (v1.1)1](https://reader035.vdocuments.us/reader035/viewer/2022062809/5697bfba1a28abf838ca09c7/html5/thumbnails/18.jpg)
by Martin Kruliš (v1.1) 18
XMLHttpRequest Objectvar httpReq = new XMLHttpRequest();httpReq.open("GET", "index.php?ajax=1", true);httpReq.onreadystatechange = function() { if (httpReq.readyState != 4) return; if (httpReq.status == 200) processResponse(httpReq.responseText); else handleError(httpReq.status);}httpReq.send();
26. 11. 2015
AJAX
Example 5
![Page 19: Martin Kruliš 26. 11. 2015 by Martin Kruliš (v1.1)1](https://reader035.vdocuments.us/reader035/viewer/2022062809/5697bfba1a28abf838ca09c7/html5/thumbnails/19.jpg)
by Martin Kruliš (v1.1) 1926. 11. 2015
Cross-site Scripting Problem
Registration Admin Interface
Name:
Submit
List of Users
Kapslík
<script>...</>
Fufník
<script>... find session ID ...... send it over HTTP ...</script>
Database
Attacker’s Browser
Malicious script gets executed in Admin’s web browser (i.e., in Admin’s context/session)
Admin’s Browser
![Page 20: Martin Kruliš 26. 11. 2015 by Martin Kruliš (v1.1)1](https://reader035.vdocuments.us/reader035/viewer/2022062809/5697bfba1a28abf838ca09c7/html5/thumbnails/20.jpg)
by Martin Kruliš (v1.1) 20
Cross-site Scripting◦ User injects malicious JavaScript into regular data
fields (registration form, e-mail body, …)◦ The field is displayed to another user -> the script
may steal his/her identity
Prevention◦ Browser blocks HTTP requests to other domains◦ Browser hides secured cookies from the script
Programmer’s Discipline◦ All user inputs must be tested or sanitized
26. 11. 2015
Cross-site Scripting Problem
![Page 21: Martin Kruliš 26. 11. 2015 by Martin Kruliš (v1.1)1](https://reader035.vdocuments.us/reader035/viewer/2022062809/5697bfba1a28abf838ca09c7/html5/thumbnails/21.jpg)
by Martin Kruliš (v1.1) 21
JavaScript Object Notation (JSON)◦ Lightweight interchange format for structured
data◦ Based on subset of JavaScript language◦ Otherwise language independent
Many parsers exist with frontends for many languages
◦ Intended for replacing XML in simple scenarios
Syntax◦ Two basic structures: collections and lists◦ Supports strings, numbers, bools, and null type◦ Unicode safe
26. 11. 2015
JSON
![Page 22: Martin Kruliš 26. 11. 2015 by Martin Kruliš (v1.1)1](https://reader035.vdocuments.us/reader035/viewer/2022062809/5697bfba1a28abf838ca09c7/html5/thumbnails/22.jpg)
by Martin Kruliš (v1.1) 22
JSON Example[ { "StudentId": 42, "Name": "John Smith" }, { "StudentId": 54, "Name": "Jane Johnson", "Graduated": true }]
26. 11. 2015
JSON
Ordered list
Named collection
Number (int)
Unicode string
Boolean literal
![Page 23: Martin Kruliš 26. 11. 2015 by Martin Kruliš (v1.1)1](https://reader035.vdocuments.us/reader035/viewer/2022062809/5697bfba1a28abf838ca09c7/html5/thumbnails/23.jpg)
by Martin Kruliš (v1.1) 23
Applications in JavaScript◦ Mainly for transfer of JavaScript structures
AJAJ – Asynchronous JavaScript and JSON◦ Parsing
var res = eval(jsonString); Fast but not safe (the string may contain malicious code)
var res = JSON.parse(jsonString); JSON object was originally implemented in library and
later added to ECMAScript 5 standard
◦ Serialization var jsonString = JSON.stringify(jsObject);
26. 11. 2015
JSON
![Page 24: Martin Kruliš 26. 11. 2015 by Martin Kruliš (v1.1)1](https://reader035.vdocuments.us/reader035/viewer/2022062809/5697bfba1a28abf838ca09c7/html5/thumbnails/24.jpg)
by Martin Kruliš (v1.1) 24
HTML5◦ Standardizes and extends existing APIs
Window, Location, History, …◦ Add many new elements and features
Non-visible Data Attributes◦ Data for scripts, but associated with DOM
elements◦ Special data-* attributes (e.g., data-foo-bar)◦ Appear in element.dataset collection
Ad example above – element.dataset.fooBar
26. 11. 2015
JavaScript and HTML5
![Page 25: Martin Kruliš 26. 11. 2015 by Martin Kruliš (v1.1)1](https://reader035.vdocuments.us/reader035/viewer/2022062809/5697bfba1a28abf838ca09c7/html5/thumbnails/25.jpg)
by Martin Kruliš (v1.1) 25
History◦ New feature – script state (history.state)
history.pushState(), history.replaceState() Captures hidden script-managed state Allows backward/forward navigation over the states
Multi-media and Graphics Elements◦ Especially the <canvas> element
2D API for drawing Optional API for 3D graphic rendering (WebGL)
◦ Controlling multimedia Elements <audio> and <video>
26. 11. 2015
JavaScript and HTML5
![Page 26: Martin Kruliš 26. 11. 2015 by Martin Kruliš (v1.1)1](https://reader035.vdocuments.us/reader035/viewer/2022062809/5697bfba1a28abf838ca09c7/html5/thumbnails/26.jpg)
by Martin Kruliš (v1.1) 26
Other New APIs◦ Form validation◦ Abstraction for commands (actions)◦ Application cache for offline working modes◦ Custom protocol and media content handlers◦ Editable and draggable (drag & drop) content◦ Micro-data support◦ Cross-document messaging, channel messaging◦ Background (parallel) workers◦ XMLHttpRequest Level 2, WebSockets◦ WebGL, WebCL
26. 11. 2015
JavaScript and HTML5
![Page 27: Martin Kruliš 26. 11. 2015 by Martin Kruliš (v1.1)1](https://reader035.vdocuments.us/reader035/viewer/2022062809/5697bfba1a28abf838ca09c7/html5/thumbnails/27.jpg)
by Martin Kruliš (v1.1) 27
Coding with Multi-browser Support◦ Browsers developers implement the web
standards when they want and how they want Especially problematic with their older versions
◦ Test the functionality, not the browser type/versionif ("XMLHttpRequest" in window) { AJAX code }else { no AJAX }
JavaScript Libraries◦ Solve the compatibility for you …◦ jQuery, Dojo, MooTools, Prototype, …
26. 11. 2015
Compatibility Issues
Examples
![Page 28: Martin Kruliš 26. 11. 2015 by Martin Kruliš (v1.1)1](https://reader035.vdocuments.us/reader035/viewer/2022062809/5697bfba1a28abf838ca09c7/html5/thumbnails/28.jpg)
by Martin Kruliš (v1.1) 28
jQuery JavaScript Library◦ Lightweight, feature rich, cross browser
v1.10 – with backwards compatibility v2.0 – new version that drops support of MSIE 6/7/8
◦ Philosophy – select and do Powerful selectors for DOM nodes Collective methods operating on DOM sets
◦ Features DOM manipulation (HTML and CSS) Event handling, integrated support for animations AJAX and related data handling
26. 11. 2015
jQuery
![Page 29: Martin Kruliš 26. 11. 2015 by Martin Kruliš (v1.1)1](https://reader035.vdocuments.us/reader035/viewer/2022062809/5697bfba1a28abf838ca09c7/html5/thumbnails/29.jpg)
by Martin Kruliš (v1.1) 29
Selectors◦ CSS-like selectors for DOM nodes$("selector") – returns jQuery wrapper for node set E.g., "element", ".class", "#id", "*", …
Basic Methods◦ DOM manipulation
append(), remove(), html(), text(), …◦ CSS manipulation and animated modifications
css(), addClass(), removeClass(), hasClass(), … hide(), show(), animate(), …
26. 11. 2015
jQuery
![Page 30: Martin Kruliš 26. 11. 2015 by Martin Kruliš (v1.1)1](https://reader035.vdocuments.us/reader035/viewer/2022062809/5697bfba1a28abf838ca09c7/html5/thumbnails/30.jpg)
by Martin Kruliš (v1.1) 30
AJAXjQuery.ajax(url, { type:"GET", dataType:"text" }) .done(function(data) { code that process data });◦ jQuery.get(), jQuery.getJSON(), jQuery.post()
Related Libraries◦ jQuery UI – user interface widgets◦ jQuery mobile◦ QUnit – a unit testing framework
26. 11. 2015
jQuery
![Page 31: Martin Kruliš 26. 11. 2015 by Martin Kruliš (v1.1)1](https://reader035.vdocuments.us/reader035/viewer/2022062809/5697bfba1a28abf838ca09c7/html5/thumbnails/31.jpg)
by Martin Kruliš (v1.1) 3126. 11. 2015
Discussion