tt(fa)
outline
Total (80m)
JavaScript
recap
schedule
tomorrow
yesterday
previous
now
next
contents
html
html
<!doctype html>�<html lang=nl>� <meta charset=utf8>� <title>Title</title>� <link rel=stylesheet href=index.css>� <h1>Hello, world!</h1>� <!--Comment-->� <script src=index.js></script>�
html
<!doctype html>�<html lang=nl>� <meta charset=utf8>� <title>Title</title>� <link rel=stylesheet href=index.css>� <h1>Hello, world!</h1>� <!-- ...and hackers! -->� <script src=index.js></script>�
Doctype
element
text
comment
html
<!doctype html>�<html lang=nl>� <meta charset=utf8>� <title>Title</title>� <link rel=stylesheet href=index.css>� <h1>Hello, world!</h1>� <!--Comment-->� <script src=index.js></script>�
closing tag
opening tag
html
<!doctype html>�<html lang=nl>� <meta charset=utf8>� <title>Title</title>� <link rel=stylesheet href=index.css>� <h1>Hello, world!</h1>� <!--Comment-->� <script src=index.js></script>�
void element
html
<!doctype html>�<html lang=nl>� <meta charset=utf8>� <title>Title</title>� <link rel=stylesheet href=index.css>� <h1>Hello, world!</h1>� <!--Comment-->� <script src=index.js></script>�
attribute
name
value
css
css
* { box-sizing: border-box }��html { font-family: Roboto /* … */ }��body {� background-color: #fdfdfc;� position: relative;� max-width: 36rem;� margin: 0 auto;� padding: 2rem�}
css
* { box-sizing: border-box }��html { font-family: Roboto /* … */ }��body {� background-color: #fdfdfc;� position: relative;� max-width: 36rem;� margin: 0 auto;� padding: 2rem�}
rule
selector
comment
css
* { box-sizing: border-box }��html { font-family: Roboto /* … */ }��body {� background-color: #fdfdfc;� position: relative;� max-width: 36rem;� margin: 0 auto;� padding: 2rem�}
declaration
property
value
markdown
markdown
# Heading��A normal paragraph��* An�* Unordered List��1. An�2. Ordered List
markdown
A paragraph��> a block quote��Another paragraph��```js�and.aBit({of: 'JavaScript'})�```
markdown
A paragraph with *emphasis*, **importance**, and `inline.code()`.��A [link](https://example.com).��And an .
markdown
bash
bash
[~]$ rm -f foo.txt
bash
[~]$ rm -f foo.txt
prompt
bash
[~]$ rm -f foo.txt
command
bash
[~]$ rm -f foo.txt
options
bash
[~]$ rm -f foo.txt
arguments
bash
common programs
bash
bash
[examples] $ man cp
CP(1) BSD General Commands Manual CP(1)
NAME� cp -- copy files
SYNOPSIS� cp [-R [-H | -L | -P]] source target_file
cp [-R [-H | -L | -P]] source … target_directory
DESCRIPTION� In the first synopsis form, the cp utility copies� the contents of the source to the target_file.� In the second synopsis form, the contents of each� named source is copied to the destination� Target_directory. The names of the files� themselves are not changed. If cp detects an� attempt to copy a file to itself, the copy will� fail.
…
git
git
common commands
git
bash
[examples] $ git init
Initialized empty Git repository in /Users/tilde/projects/oss/examples/.git/
[examples] $ echo "Hello World!" > readme.md
[examples] $ git add --all
[examples] $ git commit --message "Add readme"
[master (root-commit) 0ee1887] Add readme� 1 file changed, 1 insertion(+)� create mode 100644 readme.md
this is Git
git
this is GitHub
npm
npm
common commands
npm
package.json
{� "name": "camel-case",� "version": "3.0.0",� "description": "Camel case a string",� "license": "MIT",� "dependencies": {� "no-case": "^2.2.0",� "upper-case": "^1.1.1",� },� /* … */�}
js
Contents
js
core
Contents
js
types - core
'this is text' // string�42 // number�true // boolean�false // boolean�undefined // undefined�null // null�function () {} // function
['text', 1, false] // array�{name: 'Cthulhu', age: 1337} // object�
js
variables - core
var a
a // => undefined�
a = 42
a // => 42
js
equality operators - core
a === b // Strict equality�a !== b // Strict inequality� a == b // Abstract equality� a != b // Abstract inequality�
js
relational operators - core
a in b // has property�a instanceof b // instance of
a >= b // Greater than or equal to�a <= b // Smaller than or equal to�a > b // Greater than�a < b // Smaller than
js
update operators - core
++a // Increment, return new value� a++ // Increment, return old value�++a // Decrement, return new value� a++ // Decrement, return old value�
js
arithmetic operators - core
a + b // Addition�a - b // Subtraction�a * b // Multiplication�a / b // Division�a % b // Remainder after division� -a // Negate�
js
assignment operators - core
a = b // Assignment�a += b // Assignment and addition�a -= b // …�a *= b // …�a /= b // …�a %= b // …
js
logical operators - core
a && b // And�a || b // Or� !a // Not
js
typeof operators - core
typeof 'this is text' // 'string'�typeof 42 // 'number'�typeof true // 'boolean'�typeof false // 'boolean'�typeof undefined // 'undefined'�typeof null // 'object' (WTF?)�typeof function () {} // 'function'
typeof [] // 'object' (WTF?)�typeof {} // 'object'
js
conditional operators - core
a ? b : c // Conditional
js
expressions - core
a = b * 2�
js
expressions - core
a = b * 2�
variables
operators
literal values
js
expressions - core
a = b * 2�a = b * 2�a = b * 2�a = b * 2
literal value expression
variable expression
arithmetic expression
assignment expression
js
statements - core
a = b * 2�a = b * 2�a = b * 2�a = b * 2
statement
js
if statements - core
var popsicles = 0��if (popsicles === 0) {� popsicles++ // eat a popsicle�}
js
if statements - core
var popsicles = 0��if (popsicles === 0) {� popsicles++ // eat a popsicle�}
condition
js
else statements - core
var popsicles = 1��if (popsicles === 0) {� popsicles++ // eat a popsicle�} else {
// no more ice cream please!�}
js
else if statements - core
var popsicles = 1, coffee = 0��if (popsicles === 0) {� popsicles++ // eat a popsicle�} else if (coffee === 1) {� coffee++ // drink a cup ’o joe�} else {� // no more ice cream or coffee please!�}
js
while statements - core
var coffee = 1��while (coffee < 5) {� coffee++ // drink a cup ’o joe�}
coffee //=> 5�
js
while statements - core
var coffee = 1��while (coffee < 5) {� coffee++ // drink a cup ’o joe�}
coffee //=> 5�
condition
js
while statements - core
var coffee = 1��while (coffee > 0) {� coffee++ // drink a cup ’o joe�}
coffee //=> ?�
js
while statements - core
var coffee = 1��while (coffee > 0) {� coffee++ // drink a cup ’o joe�}
coffee //=> ?�
js
while statements - core
var coffee = 1��while (coffee > 0) {� coffee++ // drink a cup ’o joe�}
coffee //=> ?�
js
while statements - core
var coffee = 1��while (coffee > 0) {� coffee++ // drink a cup ’o joe�}
coffee //=> ?�
js
js
while statements - core
var coffee = 1��while (coffee > 0) {� coffee++ // drink a cup ’o joe�}
coffee //=> ?�
js
while statements - core
var coffee = 1��while (coffee > 0) {� coffee++ // drink a cup ’o joe�}
coffee //=> ?�
js
while statements - core
var names = ['Anna', 'Bisma', 'Chun']�var i = 0��while (i < names.length) {� console.log(i, names[i])
i++�}�// 0, 'Anna'�// 1, 'Bisma'�// 2, 'Chun'
js
for statements - core
var names = ['Anna', 'Bisma', 'Chun']�var i = 0��for (; i < names.length; ) {� console.log(i, names[i])
i++�}�// 0, 'Anna'�// 1, 'Bisma'�// 2, 'Chun'
js
for statements - core
var names = ['Anna', 'Bisma', 'Chun']�var i = 0��for (; i < names.length; ) {� console.log(i, names[i])
i++�}�// 0, 'Anna'�// 1, 'Bisma'�// 2, 'Chun'
condition
js
for statements - core
var names = ['Anna', 'Bisma', 'Chun']��for (var i = 0; i < names.length; ) {� console.log(i, names[i])
i++�}�// 0, 'Anna'�// 1, 'Bisma'�// 2, 'Chun'
js
for statements - core
var names = ['Anna', 'Bisma', 'Chun']��for (var i = 0; i < names.length; ) {� console.log(i, names[i])
i++�}�// 0, 'Anna'�// 1, 'Bisma'�// 2, 'Chun'
before loop
js
for statements - core
var names = ['Anna', 'Bisma', 'Chun']��for (var i = 0; i < names.length; i++) {� console.log(i, names[i])�}�// 0, 'Anna'�// 1, 'Bisma'�// 2, 'Chun'
js
for statements - core
var names = ['Anna', 'Bisma', 'Chun']��for (var i = 0; i < names.length; i++) {� console.log(i, names[i])�}�// 0, 'Anna'�// 1, 'Bisma'�// 2, 'Chun'
after each iteration
js
for statements - core
var monster = {name: 'Ctulhu', age: 1337}�var key��for (key in monster) {� console.log(key, monster[key])�}�// 'name', 'Ctulhu'�// 'age', 1337
js
function statements - core
function sum(a, b) {� return a + b�}��sum(2, 3) //=> 5
js
function hoisting - core
sum(2, 3) //=> 5
function sum(a, b) {� return a + b�}�
js
function expressions - core
var subtract = function (a, b) {� return a - b�}��subtract(2, 3) //=> -1
js
function expressions - core
subtract(2, 3)
// [TypeError: subtract is not a function]
var subtract = function (a, b) {� return a - b�}��
js
function scope - core
var a = 1��calculate()�// 3��function calculate() {� var b = 2� console.log(a + b)�}
js
function scope - core
var a = 1��calculate()�console.log(a + b)�// [ReferenceError: Can't find variable: b]��function calculate() {� var b = 2�}
js
callback function- core
a()�setTimeout(b, 4)�c()��function a() { console.log('a') }�function b() { console.log('b') }�function c() { console.log('c') }
js
environments
JavaScript the languages gives you:
js
environments
JavaScript has some useful built-ins (that’s called a standard library):
js
environments
In the Browser you get JS and…
In Node.js you get JS and…
js
browser
Contents
js
dev tools - browser
js
style - dom - browser
document� .body� .style� .backgroundColor = 'red'
js
classlist - dom - browser
document� .body� .classList� .add('dark')
/* index.css */�.dark {� background-color: black;� color: white�}
js
queries - dom - browser
document� .querySelector('h1')� .classList
.add('dark')
/* index.css */�.dark {� background-color: black;� color: white�}
js
queries - dom - browser
var nodes = document� .querySelectorAll(':first-child')��console.log(nodes)
js
textcontent - dom - browser
document� .querySelector('h1')� .textContent = 'Hi!'
js
innerhtml - dom - browser
document� .querySelector('h1')� .innerHTML = '<a href=example.com>!!</a>'
js
innerhtml - dom - browser
var body = document.body�var count = 0��body.addEventListener('click', onclick)��function onclick() {� alert(count)� if (++count > 5) {� body.removeEventListener('click', onclick)� }�}
js
node
Contents
js
buffer - node
bash
[examples] $ node
var buf = Buffer.from([0x74, 0xc3, 0xa9, 0x73, 0x74])��console.log(buf) //=> <Buffer 74 c3 a9 73 74>�console.log(buf.toString('ascii')) //=> 'tC)st'
console.log(buf.toString('utf8')) //=> 'tést'�console.log(buf.toString()) //=> 'tést'�
js
fs - node
bash
[examples] $ node
fs.readFile('missing.html', onfile)��function onfile(err, buf) {� if (err) throw err� console.log(buf)�}
// [Error: ENOENT: no such file or directory, open 'missing.html']
js
fs - node
bash
[examples] $ node
fs.readFile('index.html', onfile)��function onfile(err, buf) {� if (err) throw err� console.log(buf)�}
// <Buffer 3c 21 64 6f 63 74 79 70 65 20 68 74 6d 6c 3e 0a 3c 68 74 6d 6c 20 6c 61 6e 67 3d 6e 6c 3e 0a ... >
js
fs - node
bash
[examples] $ node
fs.readdir('.', ondir)��function ondir(err, files) {� if (err) throw err� console.log(files)�}�// ['index.css', 'index.html', 'index.js']
js
fs - node
bash
[examples] $ node
fs.writeFile('message.txt', 'Hello World!', onfile)��function onfile(err) {� if (err) throw err� console.log('Saved!')�}�// Saved!
js
fs - node
bash
[examples] $ node
var stream = fs.createWriteStream('message.txt')��stream.write('Hello')�setTimeout(tick, 1000)��function tick() {� stream.write(' Streams!')� stream.end()�}
js
commonjs - node
// index.js�console.log(sum(1, 2, 3))��function sum() {� var total = 0� var i = -1� while (++i < arguments.length) {� total += arguments[i]� }� return total�}
js
commonjs - node
// index.js�var sum = require('./sum.js')��console.log(sum(1, 2, 3))
// sum.js�module.exports = sum��function sum() {� var total = 0� var i = -1� while (++i < arguments.length) {� total += arguments[i]� }� return total�}
js
es++
Contents
js
let and const - es++
for (var coffee = 0; coffee < 3; coffee++) {� console.log('Another coffee!', coffee)�}�// 'Another coffee', 0
// 'Another coffee', 1
// 'Another coffee', 2
�console.log('I drank ' + coffee + ' coffees')
// I drank 3 coffees
js
let and const - es++
for (let coffee = 0; coffee < 3; coffee++) {� console.log('Another coffee!', coffee)�}�// 'Another coffee', 0
// 'Another coffee', 1
// 'Another coffee', 2
�console.log('I drank ' + coffee + ' coffees')
// [ReferenceError: coffee is not defined]
js
let and const - es++
const coffee = 1
console.log('A coffee!', coffee)�// 'A coffee', 1
coffee++�// [TypeError: Attempted to assign to readonly property.]
js
spread and rest - es++
var place = [52.31, 4.95]��print(place)�// [52.31, 4.95], undefined��function print(lat, lng) {� console.log(lat, lng)�}
js
spread and rest - es++
var place = [52.31, 4.95]��print(place[0], place[1])�// 52.31, 4.95��function print(lat, lng) {� console.log(lat, lng)�}
js
spread and rest - es++
var place = [52.31, 4.95]��print(...place)�// 52.31, 4.95��function print(lat, lng) {� console.log(lat, lng)�}
js
spread and rest - es++
print(52.31, 4.95)�// '52.31x4.95'��function print(...location) {� console.log(location.join('x'))�}
js
defaults - es++
var lat = 52.31�var lng = 4.95��print() // '0x0'�print(lat) // '52.31x0'�print(lat, lng) // '52.31x4.95'��function print(lat = 0, lng = 0) {� console.log(lat + 'x' + lng)�}
js
destructuring - es++
var monster = {name: 'Ctulhu', age: 1337}��hello(monster) // Hello, Ctulhu!��function hello({name}) {� console.log('Hello, ' + name + '!')�}
js
destructuring - es++
var place = [52.31, 4.95]��print(place)�// '52.31x4.95'��function print([lat, lng]) {� console.log(lat + 'x' + lng)�}
js
concise - es++
var name = 'Ctulhu'�var age = 1337��var monster = {name, age}��console.log(monster) // {name: 'Ctulhu', age: 1337}
js
concise - es++
var age = 1337�var monster = {� name: 'Ctulhu',� age,� greet() {� return 'Hello, ' + this.name + '!'� }�}��console.log(monster.greet()) // 'Hello, Ctulhu!'
js
template literals - es++
var monster = {name: 'Ctulhu', age: 1337}��console.log(
`Hello, ${monster.name},�you ${monster.age > 18 ? 'can' : 'can’t'} enter!`
)�// 'Hello, Ctulhu,\nyou can enter!'
js
arrow functions - es++
var constant = () => 3�var negative = a => -a�var sum = (a, b) => a + b�var subtract = (a, b) => { result = a - b; return result }�
console.log(constant()) // 3�console.log(negative(1)) // -1�console.log(sum(1, 2)) // 3�console.log(subtract(1, 2)) // -1
js
arrow functions - es++
var monster = {� name: 'Ctulhu',� delayed() {� setTimeout(function () { console.log('Hi ' + this.name) }, 100)� }�}��monster.delayed()�// 'Hi undefined'
js
arrow functions - es++
var monster = {� name: 'Ctulhu',� delayed() {� setTimeout(() => console.log('Hi ' + this.name), 100)� }�}��monster.delayed()�// 'Hi Ctulhu'
js
modules - es++
// index.js�console.log(sum(1, 2, 3))��function sum(...values) {� return values.reduce(add, 0)�}
function add(acc, value) {� return acc + value�}�
js
modules - es++
// index.mjs�import sum from './sum.mjs'��console.log(sum(1, 2, 3))
// sum.mjs�export default function sum(...data) {� return data.reduce(plus, 0)�}
function plus(acc, value) {� return acc + value�}�
js
modules - es++
// index.mjs�import {sum} from './math.mjs'��console.log(sum(1, 2, 3))
// math.mjs�export function sum(...data) {� return data.reduce(plus, 0)�}
function plus(acc, value) {� return acc + value�}
js
modules - es++
// index.mjs�import {subtract} from './math.mjs'��console.log(subtract(3, 2, 1))
// math.mjs�export function sum(...data) {
return data.reduce(plus, 0)�}
export function subtract(...data) {� return data.reduce(min, 0)�}
function plus(acc, value) {� return acc + value�}�function min(acc, value) {� return acc - value�}�
js
promises - es++
import {req} from './req.mjs'��req('https://www.google.com', cb)��function cb(err, res) {� if (err) console.error('offline')� else console.log('online')�}
// online
// req.mjs�export function req(url, cb) {� // Make network request and call� // cb on success or error�}
js
promises - es++
fetch('https://www.google.com')� .then(function (res) {� console.log('online')� }, function (err) {� console.log('offline')� })
// online
js
promises - es++
fetch('https://www.google.com')� .then(function (res) {� console.log('online')� })� .catch(function (err) {� console.log('offline')� })
// online
js
promises - es++
fetch('https://www.google.com')� .then(function (res) {� return res.text()� })� .then(function (doc) {� console.log(doc)� })� .catch(function (err) {� console.log('offline')� })�// '<!doctype html><html lang="en-NL"><head><meta content="width=dev…'
js
promises - es++
console.log('a')�sleep(100).then(() => console.log('b'))�console.log('c')��function sleep(ms) {� return new Promise(resolve => setTimeout(resolve, ms))�}
js
principles
Contents
callbacks
js
principles
events
js
principles
streams
js
principles
modules
js
principles
async
js
principles
schedule
yesterday
previous
now
next
tomorrow