Client-based Web Programming
The Browser and JavaScript
Licence for this work
This work is produced by Johan Leitet for the course Client-based Web Programming (1DV022) at Linnaeus University.
All content in this work excluding photographs, icons, picture of course litterature and Linnaeus University logotype and symbol, is licensied under a
Creative Commons Attribution 4.0 International License.
You are free to
- copy and redistribute the material in any medium or format
- spread the whole or parts of the content
- show the whole or parts of the content publicly and digital
- convert the content to another format
- change the content
If you change the content do not use the photographs, icons, picture of the course literature or Linnaeus University logotype and symbol in your new work!
At all times you must give credit to: ”Linnaeus university – Client-based Web Programming (1DV022)” with the link https://coursepress.lnu.se/kurs/klientbaserad-webbprogrammering/ and to the Creative Common-license above.
Content
- The Browser
- Statistics
- Compatibility
- Internals
- Devtools
- JavaScript in the browser
- Where to load scripts
- Sandboxing
- Polution
- "Webpack"
"The browser is a really hostile programming environment."
-- Douglas Crockford,
The JavaScript Programming Language
Server - Client
Icon made by Freepik from www.flaticon.com is licensed under CC BY 3.0
Browsers
| Usage world wide | Usage Sweden | ||
|---|---|---|---|
 |
Chrome | 69 % (64 %) | 70 % (42 %) |
 |
Safari | 10 % (20 %) | 9 % (47 %) |
 |
FireFox | 10 % | 7 % ( < 1 %) |
 |
Edge | 5 % (-) | 7 % (-) |
 |
Samsung internet | - (6 %) | - (10 %) |
 |
UC Browser | 3 % (5 %) | - (-) |
 |
Opera | 2 % (2 %) | - (< 1 %) |
 |
Internet Explorer | 7 % (-) | 4 % (-) |
Compatibility
Sorry, but you are on your own...
Browser components
- User Interface
- Buttons, search/adress field
- Browser/rendering engine
- Parse and layout html and css
- JavaScript engine
- Interprets and executes JS
- Network layer
- Handles request/responses
- Data persistence
- Cookies
- Web storage
- Cache
Browser components
Grosskurth, A., & Godfrey, M. (2005). A reference architecture for Web browsers.
Scripted browser
Source: Douglas Crockford: An Inconvenient API - The Theory of the DOM
| Browser/ rendering Engine |
JavaScript Engine |
|
|---|---|---|
| |
Blink | V8 |
|
Gecko | SpiderMonkey |
|
WebKit | JavaScript Core (WebKit) |
|
Trident | Chakra |
Why javascript in the browser?
- Why is javascript in the browser?
- Because of reason
- Use javascript to what?
- Applications / Games
- Advanced rendering
- Load content in the
background (XHR / WS) - The web becomes the platform
Seperation of concerns (SoC)
 |
.html | Structure |
 |
.css | Presentation |
 |
.js | Behavior |
Sandboxing
Javascript can not:
- Read from the local file system
- Access some APIs without the users permission
- Webcam/Audio/Location/Contacts...
- Communicate with third party servers
- CORS (Cross Origin Resouce Sharing) solves this
- Find out the (correct) color of a link...
JS in the Browser
Old recommended: Add scripts at the far bottom of the pageindex.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<section>
... A lot of content here ...
</section>
<script src="js/app.js"></script>
</body>
src/
|-js/
|-app.js
|-index.html
JS in the Browser
You can add scripts on the page. Avoid this.index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
console.log('Testing out js in the browser')
</script>
<section>
... A lot of content here ...
</section>
</body><script>
<script async>
<script defer>
http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
Folder structure
An example of a folder structure
src/
|-js/
|-app.js
|-css/
|-index.html
Everything is global!
In the browser there are no modules by default.
Everything is global on the object "window"
app.js
let temp = 22
function myFunction(){
increaseTempBy = 12
temp += increaseTempBy
}
console.log(window.temp) // 22
console.log(window.increaseTempBy) // 12
Using ECMAScript Modules (ESM)
Supported in all major browsersindex.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script type="module" src="js/app.js"></script>
</head>
<body>
<section>
... A lot of content here ...
</section>
</body>
src/
|-js/
|-app.js
|-index.html
ESM will fix:
- 'use strict' is standard
- top level variables are local to the module (not global)
- Evaluated only once
- Executed asynchronosly
import export
bar.js
import { a as b } from './foo.js'
import { a } from './foo.js'
import * as nspace from './foo.js'
console.log(nspace.a)
foo.js
export { a as b }
export { a }
export let c
import export
app.js
import { MyClass } from './MyClass.js'
new MyClass()
MyClass.js
export class MyClass {
constructor(){
}
}
default export
app.js
import MyClass from './MyClass.js'
new MyClass()
MyClass.js
export default class MyClass {
constructor(){
}
}
In this course
index.html
<head>
<script type="module" src="js/app.js"></script>
</head>
<body>
...
<script nomodule src="build.js"></script>
</body>app.js
import MyClass from './MyClass.js'
new MyClass()
MyClass.js
export default class MyClass {
constructor(){
}
}
Developer tools in the browser
- Inspect the document
- Edit html/css
- Watch network traffic
- Load times/sizes
- Throttling
- Debug JavaScript
- Timelines/profiling
- Track down memoryleaks
- Find bottlenecks
- Console