JavaScript in Browsers

JavaScript in Browser Environment Jussi Pohjolainen

Single-page Applications (SPA) • Web app that fits on a
single web page • Fluid UX, like desktop app • Examples like Gmail, Google maps • Html page contains mini-views (HTML Fragments) that can be loaded in the background • No reloading of the page, better UX • Requires handling of browser history, navigation and bookmarks

JavaScript • SPAs are implemented using JavaScript and HTML •
Usually we use some framework for this • ECMAScript is a scripting language, standardized by Ecma International • In Browsers, ECMAScript is commonly called JavaScript • JavaScript = Native (EcmaScript) + Host objects (browser)

JavaScript • EcmaScript • String, Number, Operators, Statements, Math, Date,
Array, Boolean, RegExp.. • Browser BOM • window, navigator, screen, history, location • HTML DOM • DOM document, element, attribute, events • JavaScript = EcmaScript + BOM + DOM

Learning Path for Front-end Core EcmaScript Browser Host Objects JavaScript
in Front-end HTML5 CSS Static Web-pages JavaScript Frameworks: React, AngularJS, ... Also basic understanding of HTTP and REST API...

HTTP network protocol • HTTP is a network protocol of
the Web • Hypertext Transfer Protocol • Delivers resources on the WWW • Usually delivered by TCP/IP • HTTP client sends a request to HTTP server • Default port is 80 • Resource can be a file or dynamically generated query result

Structure of HTTP • Consists of request and response •
Format • an initial line, • zero or more header lines, • a blank line, • optional message body (this is the resource) • Example <initial line, different for request and response> Header1: value1 Header2: value2 <optional message body>

HTTP REQUEST: Initial Line • Initial line is different for
the request than response. • Request line has three parts • method name, local path to resource, version of http • Example • GET /path/to/file/index.html HTTP/1.0 • Method name can be GET, POST, PUT, DELETE...

HTTP RESPONSE: Initial Line • The initial response line, called
the status line • Typical status lines • HTTP/1.0 200 OK • HTTP/1.0 404 Not Found • Status code (200, 404) is computer-readable, reason phrase is human-readable • Status codes • 1xx, information message • 2xx, success • 3xx, redirect • 4xx, client error • 5xx, server error • See all status codes • http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

Header Lines • Header lines provide information about the request
and response • Header-name: value • HTTP 1.0 provides 16 headers, HTTP 1.1 provides 46 headers • For example client should tell who is making the request • User-Agent: ... • Server should identify • Server: ...

Message Body • Message body contains the resource • Usually
the message body includes header lines • Content-type: • MIME type of the resource, for example text/html, image/gif • Content-length • bytes

Example HTTP REQUEST and HTTP RESPONSE GET /tekstiedosto.txt HTTP/1.1 Host:
localhost:8080 User-Agent: curl/7.49.1 Accept: text/json HTTP/1.1 200 OK Server: GlassFish Server Open Source Edition 4.1.1 X-Powered-By: Servlet/3.1 JSP/2.3 (GlassFish Server Open Source Edition 4.1.1 Java/Oracle Corporation/1.8) Content-Type: text/xml;charset=ISO-8859-1 Date: Tue, 10 Jan 2017 10:27:34 GMT Content-Length: 12 Hello World

Example HTTP REQUEST and HTTP RESPONSE POST /MunSoftaniTestaus/MunHienoServlet HTTP/1.1 Host:
localhost:8080 User-Agent: curl/7.49.1 Accept: */* Content-type: text/plain Content-Length: 9 Some data HTTP/1.1 200 OK Server: GlassFish Server Open Source Edition 4.1.1 X-Powered-By: Servlet/3.1 JSP/2.3 (GlassFish Server Open Source Edition 4.1.1 Java/Oracle Corporation/1.8) Content-Type: text/plain;charset=ISO-8859-1 Date: Tue, 10 Jan 2017 10:39:58 GMT Content-Length: 9 Some data

HTML5 and JS

HTML5: It's really easy! <!DOCTYPE html> <html> <head> <title> Title
</title> <meta charset="UTF-8" /> <style media="screen"></style> </head> <body> The content </body> </html>

HTML5 vs XHTML5: MIME • HTML5 • text/html • XHTML5
• application/xhtml+xml • See: • https://wiki.whatwg.org/wiki/HTML_vs._XHTML

Simple Embedded JS <!DOCTYPE html> <html> <head> <title>Title</title> <meta charset="UTF-8"
/> </head> <body> <script>console.log('hello world')</script> </body> </html> JS part of the Web page

Simple External JS <!DOCTYPE html> <html> <head> <title>Title</title> <meta charset="UTF-8"
/> </head> <body> <script src="myscript.js" /> </body> </html> Let's fetch the JS from external file

Browser Object Model

Browser Object Model • Browser specific convention to all the
objects exposed by web browser • There is no standard implementation and no strict definition • Browser vendors are free to implement BOM • In Browsers, you use EcmaScript + Host Objects • Host Objects are • BOM (Browser object model) • DOM (Document object model) • DOM has strict definition from W3C / WHATWG

chrome location document history navigator applicationCache screen ... window Some
BOM objects in Chrome getElementsByTagName createTextNode appendChild removeChild ...

Handling Events

Intro to Events • Some interaction on html – page:
• Mouse click (onclick) • Web page loading (onload) • Mousing over and out (onmouseover, onmouseout) • Submitting HTML form (onsubmit) • Key handling, web page completing, user scrolling or resizing …

Evolution of Events • DOM Level 0 (Introduced in Netscape)
• <a href="http://www.opera.com/" onclick="alert('Hello')">Say hello</a> • DOM Level 2 (W3C) • document.getElementById("my-link").addEventListener("click", myFunction, false); • Microsoft (IE) did not follow the W3C model until IE8. IE11 deletes its support for MS model

Example Handler Properties • button.onfocus • button.onblur • button.ondblclick •
button.onmouseover • button.onmouseout • window.onkeypress • window.onkeydown • window.onscroll

Inline Event Handler <!DOCTYPE html> <html> <head> <title>Title</title> <script> function
doIt() { console.log("Hello"); } </script> </head> <body> <button ondblclick="doIt()">Click</button> </body> </html>

Inline Event Handler • Try to avoid inline event handlers
they are considered bad practice • Avoid mixing html and js! • If you have "100 buttons", the maintanence of these can be hard

Better Way <!DOCTYPE html> <html> <head> <title>Title</title> <script> function clicked()
{ console.log("click"); } function ready() { var b = document.querySelector("#mybutton"); b.ondblclick = clicked; } window.onload = ready; </script> </head> <body> <button id="mybutton">Click</button> </body> </html>

Canceling Default Behaviour: return false <!DOCTYPE html> <html> <head> <title>Title</title>
<script> function clicked(event) { console.log("click"); return false; } function ready() { var b = document.querySelector("#link"); b.onclick = clicked; } window.onload = ready; </script> </head> <body> <a id="link" href="http://mozilla.org">Click</a> </body> </html> Won't open mozilla.org

<!DOCTYPE html> <html> <head> <title>Title</title> <script> function count() { var
height = document.forms.myform.height.value; var weight = document.forms.myform.weight.value; document.forms.myform.result.value = (weight / (height*height)); } window.onload = () => { let button = document.querySelector('#button') button.onclick = count; } </script> </head> <body> <form name="myform"> Height (m):<br/> <input type="text" name="height"/><br/> Weight (kg):<br/> <input type="text" name="weight"/><br/> <input type="button" id="button" value="BMI"/><br/> BMI<br/> <input type="text" name="result"/> </form> </body> </html> Accessing Form by using DOM Level 0

W3C DOM • DOM – Document Object Model – cross-platform
and language- independent convention for interacting with objects in HTML and in XML. • With DOM you can manipulate html/xml document! Dynamic html! • Public interface available: http://www.w3.org/DOM/DOMTR

W3C DOM Levels (Legacy) • ( DOM Level 0 and
Intermediate DOM ) • Not W3C Standards, used in Netscape 2 (Level 0) and Netscape 4 (Intermediate DOM) • DOM Level 1 • 1998: Ability to change entire HTML or XML document • Core and HTML specifications • Level of support: excellent • DOM Level 2 • 2001: Introduces “getElementById” function, event model and support for XML namespaces • Core, Views, Events, Style, Traversal and Range, HTML • Level of Support: good • DOM Level 3 • 2004: XPath, focus on keyboard event handling • Core, Load, Save, Validation, Events, XPath

WHATWG: DOM Living Standard • WHATWG DOM "standardizes" DOM •
DOM LEVEL 3 core and DOM LEVEL 3 Events • Selectors API Level 2 • And others • https://dom.spec.whatwg.org/

DOM (Level 2) Event Handling • Methods for adding and
removing events • addEventListener • removeEventListener • Multiple event handlers can be registered for the same event!

<!DOCTYPE html> <html> <head> <title>Title</title> <script> window.addEventListener('load', ready); function ready()
{ let p = document.querySelector("#clickme"); p.addEventListener('click', doIt); } function doIt() { alert("Hello"); } </script> </head> <body> <p id="clickme">click</p> </body> </html>

Benefits • You can remove event listener • You can
register multiple listeners

Remove function ready() { let p = document.querySelector("#clickme"); p.addEventListener('click', doIt);
} function doIt() { alert("Hello"); let p = document.querySelector("#clickme"); p.removeEventListener('click', doIt); }

Multiple Listeners function ready() { let p = document.querySelector("#clickme"); p.addEventListener('click',
() => alert("Hello")); p.addEventListener('click', () => alert("World")); }

Event Object <script> window.addEventListener('load', ready); function ready() { let p
= document.querySelector("#clickme"); p.addEventListener('click', doIt); } function doIt(event) { alert("hello"); let p = event.target; p.removeEventListener('click', doIt); } </script> It's an event -object

Event Object function ready() { let p = document.querySelector("#clickme"); p.addEventListener('click',
doIt); } function doIt(event) { console.log(event.type); console.log(event.timeStamp); } See doc for all possibilities

Event Bubbling div p If div and p both have
click – event handler?

stopPropagation: only p will trigger function ready() { let p
= document.querySelector("#pClickme"); let div = document.querySelector("#divClickMe"); p.addEventListener('click', (e) => { e.stopPropagation(); alert("p");} ); div.addEventListener('click', (e) => alert("div")); }

Pattern: Listen to children <body> <ul id="list"> <li id="item-1">Hello</li> <li
id="item-2">World</li> </ul> </body>

Script function ready() { let ul = document.querySelector("#list"); ul.addEventListener('click', (e)
=> { console.log(e.target); // <li>Hello</li> console.log(e.target.nodeName); // LI if(e.target.nodeName == "LI") { alert(e.target.id); // item-1 or item-2 } } ); }

Document Object Model

DOM • Programming Interface for HTML and XML documents •
You can change dynamically the document using DOM • The document is presented in nodes • Most browsers support both • W3C DOM • WHATWG DOM • And in addition have extensions to these • DOM is not a programming language, it's an specification

WHATWG: DOM Living Standard • DOM For all structured Documents
• WHATWG DOM "standardizes" DOM • DOM LEVEL 3 core and DOM LEVEL 3 Events • Selectors API Level 2 • And others • https://dom.spec.whatwg.org/ • For HTML also additions • https://html.spec.whatwg.org/multipage/dom.html • Other languages support also DOM, not just JavaScript

document • document object represents the web page loaded •
Is the entry point into web page's content (DOM Tree) • Some methods for getting elements • getElementsById(id) • getElementsByTagName(name) • querySelector(cssselector) • The DOM tree can be traversed in a lot of different ways • DOM Tree consists of nodes. Node can be for example • element, attribute, text ...

<!DOCTYPE html> <html hello="world"> <head> <title>Title</title> </head> <body> <script> var
htmlElementNode = document.documentElement; console.log(htmlElementNode instanceof Node); // true // Element extends Node console.log(htmlElementNode instanceof Element); // true console.log(htmlElementNode.getAttribute("hello")) // world </script> </body> </html>

Node? • Node is a base "class" for • Element,
Document, Text ... • For each Node you can use • childNodes() • firstChild() • lastChild() • nextSibling() • nodeType() • nodeValue • textContent()

Node • In DOM, each object is Node • In
this • <p>Hello</p> • You have two nodes 1) element node p 2) text node Hello • Text node is child node of p element. P element is parent node of the text node

<!DOCTYPE html> <html><head><title>My Title</title></head> <body> <script> var htmlElementNode = document.documentElement;
var headElementNode = htmlElementNode.firstChild; var titleElementNode = headElementNode.firstChild; var titleTextNode = titleElementNode.firstChild; var titleString = titleTextNode.nodeValue; console.log(titleString); </script> </body> </html>

<!DOCTYPE html> <html hello="world"><head><title>My Title</title></head> <body> <script> var htmlElementNode =
document.documentElement; var helloAttributeNode = htmlElementNode.getAttributeNode("hello"); var attributeText = helloAttributeNode.nodeValue console.log(attributeText); </script> </body> </html>

Getting Elements More Easier • Getting list of elements •
document.getElementsByTagName() • Getting with id • document.getElementById() • Getting use CSS selectors • document.querySelector()

<!DOCTYPE html> <html> <head> <title>My Title</title> </head> <body> <h1>Title 1</h1>
<h1>Title 2</h1> <script> var allH1Elements = document.getElementsByTagName("h1"); var firstH1 = allH1Elements[0]; firstH1.firstChild.nodeValue = "Hello!"; </script> </body> </html> Getting all elements with tag H1

<!DOCTYPE html> <html> <head> <title>My Title</title> </head> <body> <h1 id="mytitle">Title
1</h1> <h1>Title 2</h1> <script> var firstH1 = document.getElementById("mytitle"); firstH1.firstChild.nodeValue = "Hello!"; </script> </body> </html> Getting H1 with the id of mytitle

<!DOCTYPE html> <html> <head> <title>My Title</title> </head> <body> <h1 id="mytitle">Title
1</h1> <h1>Title 2</h1> <script> var firstH1 = document.querySelector("#mytitle"); firstH1.firstChild.nodeValue = "Hello!"; </script> </body> </html> Using CSS Query Selector for getting the H1

Whitespaces.... We have a problem! <!DOCTYPE html> <html> <head> <title>My
Title</title> </head> <body> <div id="myDiv"> <h1>Title</h1> </div> <script> var div = document.querySelector("#myDiv"); var h1 = div.firstChild; var text = h1.firstChild; text.nodeValue = "Hello"; </script> </body> </html> We are NOT getting the H1 Here!

https://javascript.info/dom-nodes head child is a text node!

<div id="myDiv"> <h1>Title</h1> </div> <script> var div = document.querySelector("#myDiv"); var
whiteSpace = div.firstChild; var h1 = whiteSpace.nextSibling; var text = h1.firstChild; text.nodeValue = "Hello"; </script>

firstChild vs firstElementChild <div id="myDiv"> <h1>Title</h1> </div> <script> var div
= document.querySelector("#myDiv"); var h1 = div.firstElementChild; var text = h1.firstChild; text.nodeValue = "Hello"; </script> Bypassing the text node..

textContent <div id="myDiv"> <h1>Title</h1> </div> <script> var div = document.querySelector("#myDiv");
var h1 = div.firstElementChild; //var text = h1.firstChild; //text.nodeValue = "Hello"; h1.textContent = "Hello"; </script>

textContent vs innerHTML <div id="myPre"> </div> <script> var div =
document.querySelector("#myPre"); div.textContent = "<h1>Moi</h1>"; </script> In browser we are seeing also the < and > characters

textContent vs innerHTML <div id="myPre"> </div> <script> var div =
document.querySelector("#myPre"); div.innerHTML = "<h1>Moi</h1>"; </script> In innerHTML the <h1> and </h1> are presented as tags..

Creating and appending <script> function main(event) { let h1 =
document.createElement("h1") let text = document.createTextNode("Hello World") h1.appendChild(text) document.getElementsByTagName("body")[0].appendChild(h1) } window.addEventListener('load', main) </script> Creating new elements and text nodes!

Creating attribute function main(event) { let a = document.createElement("a") a.setAttribute("href",
"http://www.tamk.fi") let text = document.createTextNode("tamk") a.appendChild(text) document.getElementsByTagName("body")[0].appendChild(a) } window.addEventListener('load', main)

insertBefore <!DOCTYPE html> <html> <head> <title>My Title</title> <script> function main(event)
{ let a = document.createElement("a") a.setAttribute("href", "http://www.tamk.fi") let text = document.createTextNode("tamk") a.appendChild(text) let p = document.getElementById("someid") let parent = p.parentElement parent.insertBefore(a, p) } window.addEventListener('load', main) </script> </head> <body> <p id="someid">Hello</p> </body> </html> Insert the link (a) before the p under body

removeChild <!DOCTYPE html> <html> <head> <title>My Title</title> <script> function main(event)
{ let body = document.getElementsByTagName('body')[0] let p = document.getElementById('someid') body.removeChild(p) } window.addEventListener('load', main) </script> </head> <body> <p id="someid">Hello</p> </body> </html>

replaceChild <!DOCTYPE html> <html> <head> <title>My Title</title> <script> function main(event)
{ let body = document.getElementsByTagName('body')[0] let p = document.getElementById('someid') let h1 = document.createElement('h1') h1.appendChild(document.createTextNode('Hello World')) body.replaceChild(h1, p) } window.addEventListener('load', main) </script> </head> <body> <p id="someid">Hello</p> </body> </html>

AJAX XmlHttpRequest, Promises and Fetch

AJAX • AJAX: Asynchronous JavaScript and XML • AJAX is
about updating parts of web page without reloading the whole page • Essential part when creating Single Page Apps!

How AJAX works? (javatpoint.com)

Synchronous vs Asynchronous • Synchronous requests blocks the client (browser
unresponsive) until request is done • Asynchronous requests does not block the client -> User can interact with the web page while at the same time the request is being fulfilled • Asynchronous requests usually work with callbacks or Promises • AJAX requests are asynchronous, also web workers and setTimeout

XMLHttpRequest • Modern browsers support built-in XMLHttpRequest object • All
about sending and receiving data from server. • Instantiate in normal fashion: • var xmlobj = new XMLHttpRequest();

<!DOCTYPE html> <html> <head><title>My Title</title> <script> function buttonClicked(event) { var
xmlobj = new XMLHttpRequest(); xmlobj.open("GET", // HTTP POST or GET? "./somefile.txt", // URL true); // async or not? xmlobj.send(); // Send it } window.addEventListener('load', (event) => { document.getElementById('myButton').addEventListener('click', buttonClicked) }) </script> </head> <body> <button id="myButton">Fetch</button> </body> </html>

AJAX is not supported with file://

To quickly create Web Server (http) • Install Node.js •
Install http-server module globally: • npm install http-server –g • Then start the http-server in your project folder: • http-server • Open browser • http://127.0.0.1:8080

No errors when using HTTP

Asynchronous • When setting the async parameter to true, the
server side script is run in background. • Javascript does not have to wait for the server response.. You can • Execute other scripts while waiting server response • Deal with the response when ready • Specify a function that is called when response is ready!

onreadystatechange function buttonClicked(event) { var xmlobj = new XMLHttpRequest(); xmlobj.onreadystatechange
= function() { console.log(xmlobj.readyState) } xmlobj.open("GET", "./somefile.txt", true); xmlobj.send(); }

readystate?

State of the Request • 0: Not initialized • 1:
open() has been called • 2: send() has been called • 3: loading • 4: request finished and response Ready

responseText function buttonClicked(event) { var xmlobj = new XMLHttpRequest(); xmlobj.open("GET",
"./somefile.txt", true); xmlobj.onreadystatechange = function() { if(xmlobj.readyState == 4) { console.log(xmlobj.responseText) } } xmlobj.send(); }

Status of the Request • Also HTTP Status is received
• 200: “Ok” • 404: “Page not found” • … • if(xmlobj.status == 200 && xmlobj.readyState == 4) { .. }

With status function buttonClicked(event) { var xmlobj = new XMLHttpRequest();
xmlobj.open("GET", "./somefile.txt", true); xmlobj.onreadystatechange = function() { if(xmlobj.readyState == 4 && xmlobj.status == 200) { console.log(xmlobj.responseText) } } xmlobj.send(); }

AJAX and DOM function buttonClicked(event) { var xmlobj = new
XMLHttpRequest(); xmlobj.open("GET", "./somefile.txt", true); xmlobj.onreadystatechange = function() { if(xmlobj.readyState == 4 && xmlobj.status == 200) { document.getElementById('content').innerHTML = xmlobj.responseText } } xmlobj.send(); }

Server Response • XMLHttpRequest has two attributes for the response
• DOMString responseText • Document responseXML

students.xml <?xml version="1.0"?> <students> <student>Tina Smith</student> <student>Paul Power</student> </students>

students.json [{"name": "Tina Smith"}, {"name": "Paul Power"}]

Parsing JSON function buttonClicked(event) { var xmlobj = new XMLHttpRequest();
xmlobj.open("GET", "./students.json", true); xmlobj.onreadystatechange = function() { if(xmlobj.readyState == 4 && xmlobj.status == 200) { let text = xmlobj.responseText let jsonArray = JSON.parse(text) document.getElementById('content').innerHTML = jsonArray[0].name } } xmlobj.send(); }

HTTP Access Control

Same-origin policy • For security reasons, by default, XMLHttpRequest following
same- origin policy • Only http requests to its own domain! • So access from 127.0.0.1/index.html -> 127.0.0.1/students.xml is allowed • From 127.0.01/index.html -> someothersite.com/students.xml is NOT allowed!

Students.xml on koti.tamk.fi

AJAX 127.0.0.1 -> koti.tamk.fi

CORS • Cross – Origin Resource Sharing (CORS) mechanism gives
cross- domain access controls • enables secure cross-domain data transfers • Works by adding new HTTP Headers

Access-Control-Allow-Origin

There is no Access- Control-Allow-Origin! Cross-domain requests from AJAX are
not allowed

Adding a new header: students.php <?php header('Content-Type: text/xml'); header('Access-Control-Allow-Origin: *');
?> <students> <student>Tina Smith</student> <student>Paul Power</student> </students>

Server allows cross origin ajax calls

Try it again... it should work! function buttonClicked(event) { var
xmlobj = new XMLHttpRequest(); xmlobj.open("GET", "http://koti.tamk.fi/~pohjus/cors/students.php", true); xmlobj.onreadystatechange = function() { if(xmlobj.readyState == 4 && xmlobj.status == 200) { let doc = xmlobj.responseXML let firstname = doc.getElementsByTagName("student")[0].textContent document.getElementById('content').innerHTML = firstname } } xmlobj.send(); }

Third party API

Using curl

Using POST var xmlobj = new XMLHttpRequest(); xmlobj.open("POST", // POST
or GET? "somescript.php", // URL true); // async or not? // Specify the data you want to send via POST xmlobj.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // Send data xmlobj.send("name=Kalle");

Promises

About Promises • Fetch API is a new way of
doing AJAX • Fetch API uses Promises • Promises an alternative to callbacks delivering result of an async computation • Promises are part of EcmaScript 2015 • Previously you could use them as additional library • https://promisesaplus.com/ 122

Typical async function with callback asyncFunction(arg1, arg2, result => {
console.log(result); }); 123

Problems with callbacks • When async done, do another async
method (chaining) -> using callbacks can be messy • What is async fails? If you have chained async methods and one of them fails? • It is not standard, everyone can have they own version of doing callbacks 124

Using Promises function promiseFunction(resolve, reject) { // time consuming async
stuff if(true) { resolve("OK!"); } else { reject("Failed!"); } } function onSuccess(msg) { console.log(msg); } function onError(msg) { console.log(msg); } let promise = new Promise(promiseFunction); promise.then(onSuccess, onError); promise.then(onSuccess).catch(onError); You can do both here 125

Node.JS callbacks const fs = require('fs'); fs.readFile('mytest.json', function (error, text)
{ if (error) { console.error('Error while reading config file'); } else { try { const obj = JSON.parse(text); console.log(JSON.stringify(obj)); } catch (e) { console.error('Invalid JSON in file'); } } } ); File I/O module 126

Node.JS promise const util = require('util'); const fs = require('fs');
const promiseReadFile = util.promisify(fs.readFile); promiseReadFile('mytest.json') .then(function (text) { // const obj = JSON.parse(text); console.log(JSON.stringify(obj)); }) .catch(function (error) { // // File read error or JSON SyntaxError console.error('An error occurred', error); }); util.promisify is Node 8 feature 127

Simple Example function doSomeTimeConsumingStuff() { function asyncOperation(resolve, reject) { setTimeout(()
=> resolve("Done"), 1000); } return new Promise(asyncOperation); } doSomeTimeConsumingStuff().then(result => console.log('Result: ' + result)); 128

Fetch API

Fetch API • Alternative (new) way of doing AJAX •
Whatwg living standard • https://fetch.spec.whatwg.org/ • Uses promises

To Extract Body • json() • text() • blob() •
formData() • ...

Error Handling fetch('http://..../customers').then(function(response) { var contentType = response.headers.get('content-type'); // status
200 - 299 if(!response.ok) { throw new Error('Network response was not ok!'); } if(!contentType.includes('application/json')) { throw new Error('It was not json') } return response.json(); }).then(function(jsonObject) { // do something with the jsonObject }).catch(function(error) { console.log('There has been a problem with your fetch operation: ' + error.message); });

POST var myHeaders = new Headers() myHeaders.append('Content-type', 'text/json') var init
= { method: 'post', headers: myHeaders, body: {'name': 'jack'} } fetch('http://www.company.com/api/students', init).then(responseIsReady).then(jsonIsParsed)

FormData • FormData is a easy way of creating key/value
pairs from a form • When having a form in HTML page you can just create the FormData by • let formData = new FormData(someFormDomElement) • Then by using Fetch API or XmlHttpRequest, it's really easy to send user given values to backend

Example function doIt (event) { let formData = new FormData(document.getElementById('myForm'))
var init = { method: 'post', body: formData } fetch('http://.../postdata.php', init).then(responseIsReady).then(jsonIsParsed) }

Webpack

Webpack • Bundles several JS – files into one •
Supports ES 2015 modules • Install locally • npm install --save-dev webpack

<!DOCTYPE html> <html> <head> <title>Title</title> <meta charset="UTF-8" /> <style media="screen"></style>
<script src="dist/main.js"></script> </head> <body> The content </body> </html> Webpack will generate this for us!

src/index.js import PlayerObject from './PlayerObject.js' var player = new PlayerObject(5,
5) window.addEventListener('load', () => { document.querySelector('body').innerHTML = `<p>Player position x = ${player.x}, y = ${player.y}` }) ES2015 modules

src/PlayerObject.js class PlayerObject { constructor (x, y) { this.x =
x this.y = y } } export default PlayerObject

Packaging all into one • By using one command you
can package these file into one • node ./node_modules/webpack/bin/webpack.js src/index.js

Web Apis Canvas API, Web Workers, Web Storage, Geolocation ..

Canvas API • In HTML5 <canvas> element can be used
to draw graphics via scripting in JavaScript • Draw graphics, bitmaps, create animations... • Really easy • <canvas></canvas> • And then in JS start to draw to the element

Example var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle
= 'rgb(200, 0, 0)'; ctx.fillRect(10, 10, 50, 50);

Implementing a Game // What keys are down let keysDown
= new Set() // For drawing let ctx let canvas // Game object let x = 50 let y = 50

function init () { canvas = document.querySelector('canvas') ctx = canvas.getContext('2d')
canvas.width = window.innerWidth canvas.height = window.innerHeight window.addEventListener('keydown', (event) => { keysDown.add(event.keyCode) }) window.addEventListener('keyup', (event) => { keysDown.clear(event.keyCode) }) window.requestAnimationFrame(gameloop); } window.addEventListener('load', (event) => { init() })

function gameloop() { ctx.fillStyle = 'rgb(255, 255, 255, 1)' ctx.fillRect(0,
0, canvas.width, canvas.height) ctx.fillStyle = 'rgb(0,0,0)' ctx.fillRect(x, y, 50, 50) moveObjects() window.requestAnimationFrame(gameloop); }

function moveObjects() { const Direction = {UP: 87, DOWN: 83,
LEFT: 65, RIGHT: 68} if (keysDown.has(Direction.UP)) { y-- } if (keysDown.has(Direction.DOWN)) { y++ } if (keysDown.has(Direction.LEFT)) { x-- } if (keysDown.has(Direction.RIGHT)) { x++ } }

Geolocation Example navigator.geolocation.getCurrentPosition((position) => { console.log(position.coords.latitude) console.log(position.coords.longitude) });

FileReader <p>File: <input id="files" type="file" accept=".java,.html"></p> <script> function read(e) {
let text = e.target.result console.log(text) } function readFile(file) { var reader = new FileReader(); reader.onload = read reader.readAsText(file) } function handleFileSelect(evt) { let f = evt.target.files[0] readFile(f) } document.getElementById('files').addEventListener('change', handleFileSelect); </script>

Others • Web Workers • For threading • Web Storage
• Store data inside of browser • FileReader • To read files • Drag and Drop • Dragging and dropping elements

JavaScript in Browsers

JavaScript in Browsers

More Decks by Jussi Pohjolainen

Other Decks in Technology

Featured

Transcript