Introduction to JavaScript · Introduction to JavaScript Niels Olof Bouvin 1. Overview ... Java is...
Transcript of Introduction to JavaScript · Introduction to JavaScript Niels Olof Bouvin 1. Overview ... Java is...
Introduction to JavaScriptNiels Olof Bouvin
1
Overview
A brief history of JavaScript and ECMAScript JavaScript for Java developers The JavaScript ecosystem Getting access to JavaScript Some language basics A look at the Node.js standard library
2
The origins of JavaScript
JavaScript began its life in 1995, when Brendan Eich, working at Netscape, on a deadline created the first version of the language in 10 days
it was originally known as ‘Mocha’ or ‘LiveScript’, but was eventually named ‘JavaScript’ as the Java programming language was very popular at the time
In August 1996, Microsoft debuted JScript, and trying to not lose the initiative, Netscape turned JavaScript over the ECMA standard organisation
thus, the official name of the language became ECMAScript ECMAScript 1 was standardised in June 1997 the current standard is ES2016, or ES6 for short
3
JavaScript: backwards compatibility is king
Based on the immense weight of JavaScript code already deployed across the Web, the powers behind JavaScript has sought to maintain compatibility
This means that all design decisions of the past, good, bad and worse, are still with us
However, if we do not have to maintain a legacy system, we can choose to look and move forward
Therefore, we will, in this course, only and exclusively use ES6 and onwards standards, because we are not bound by the bad old days
4
Overview
A brief history of JavaScript and ECMAScript JavaScript for Java developers The JavaScript ecosystem Getting access to JavaScript Some language basics A look at the Node.js standard library
5
JavaScript for Java developers
There are many superficial similarities between Java and JavaScript, as they, syntax-wise, share a common ancestor in C
They are however at heart quite different, and while you certainly will benefit from your Java knowledge, you should also be aware that this is a new language with a different environments and different rules and conventions
6
Java vs JavaScript
Object-oriented, class based
Statically and strongly typed
Compiled
Lambdas were only just introduced in Java 8
Requires a JVM to run, rarely seen in browsers these days
Object-oriented, prototype based
Relaxed and dynamically typed
Interpreted
Functions were always first-class objects
Usually either browser or Node.js based
7
Object-oriented, but different
Java is class-based: Objects are instances of Classes
There are no classes in JavaScript, only primitive types and objects. An object may point to another object as its prototype
Syntax has been introduced in ES6 to make JavaScript appear more traditionally class-based
as you'll see shortly
8
Typing
In Java, you define what type a variable has, and the compiler will hold you to it
In JavaScript, the type is inferred, and you can change your mind without JavaScript complaining, and if you have done something wrong, it will fail when it runs
This is a potential minefield, so it is important to be disciplined and to use tools to check your code
TypeScript, a superset of JavaScript created by Microsoft, improves on JavaScript by, among other things, adding additional type information
node > let a = 2 undefined > a 2 > a = '2' '2' > a '2'
9
Compiled or interpreted
Java is compiled into Bytecode, packing into JAR files, and then distributed
JavaScript is distributed as text, and interpreted upon delivery
There used to be a big performance gap, but that has closed with modern JavaScript engines
It means however that the checks made by the Java compiler will first be made when the JavaScript code is interpreted or when it is run
thus, testing quickly becomes really important with JavaScript projects10
Objects, functions or both
In Java, everything has to be defined within a class, whether it makes sense or not
In JavaScript, you can just do things, usually through functions, and you can hand functions around like the completely ordinary values they are
If you want to use objects and inherit stuff from other stuff, you can do that, too
11
Overview
A brief history of JavaScript and ECMAScript JavaScript for Java developers The JavaScript ecosystem Getting access to JavaScript Some language basics A look at the Node.js standard library
12
The JavaScript ecosystem
JavaScript is one of, if not the, most popular programming languages in the world
But, compared to, e.g., Java, JavaScript does not have a strong standard library of functionality ready to use
Thus, an absolute mountain of supporting libraries has been created by thousands and thousands of developers
this is good, because there’s probably a library to solve your problem this is bad, because you may have to wade through dozens if not hundreds of poorly maintained libraries to find The One (or have to choose between multiple valid, fully functioning solutions). It also leads to the “framework of the week” phenomenon
We’ll try to keep things as simple as possible in this course, only including libraries if absolutely necessary
13
JavaScript ES6
The current standard for ECMAScript
It is by now widespread and much nicer than previous versions
BUT! Some of the material you’ll encounter (even in this course) will still be using some of the olden ways
I'll try to highlight when I differ from what you have read and I'll usually point to the Eloquent JavaScript book or the MDN site
14
Overview
A brief history of JavaScript and ECMAScript JavaScript for Java developers The JavaScript ecosystem Getting access to JavaScript Some language basics A look at the Node.js standard library
15
Getting access to JavaScript
JavaScript is available directly in your Web browser, typically accessed through a ‘Developer’ menu
you may need to explicitly enable this menu
Alternatively, it can installed and used locally through Node.js, which is where we will start
see the Tools page on the course site for installation it can be launched from the command line with ‘node’
16
Starting out: The JavaScript REPL
(Read, Eval, Print, Loop) If we start node without any arguments, or begin typing in the JavaScript console in a Web browser, we begin in the REPL:
Statements are evaluated line by line as they are entered, no compilation necessary
this is a great way to test out code, check proper syntax, or mess with a live Webpage
REPLs are found in most interpreted language, and they are excellent tools, as they allow you to interact directly with your or others’ code
17
Overview
A brief history of JavaScript and ECMAScript JavaScript for Java developers The JavaScript ecosystem Getting access to JavaScript Some language basics A look at the Node.js standard library
18
Basic syntax
You can enter the above directly into the Node.js REPL or the JavaScript Console in your browser
try it—it's a good way to get a handle for the syntax and try things out
One statement/expression per line: no need for ;
'use strict'
const greeting = 'Hello World' console.log(greeting) const x = 2 if (x < 4) { console.log('x is a small number') } else { console.log('x must be pretty big') }
Beginning a JavaScript program with this line signals to the system that the following is written in the modern, ES6 style. You should always do this—it can catch quite a few errors
19
Types in JavaScript
Primitive types boolean
number
string
Symbol null undefined
Objects everything else, including the object counterparts:
Boolean, Number & String
Wait, what? this is one of those things considered awful about old design decisions in JavaScript
it is a primitive type
> typeof true 'boolean' > typeof 42 'number' > typeof 'hi!' 'string' > typeof null 'object' > typeof undefined 'undefined' > typeof Symbol() 'symbol'
20
Types are inferred, not declared
You can bind one type of value to a variable, and later bind another type
you shouldn't, but you can. (Don't)
This is one of those things, where tools become useful
> let a = 2 undefined > typeof a 'number' > a = '2' '2' > typeof a 'string' >
21
What is a number?
Sane programming languages differentiate between integers and floating point numbers
in many cases, integers are sufficient and far faster than floats
JavaScript engines make a guess of it and usually gets it right
for efficiency's sake, there is now direct support for arrays of specific types of numbers, this is very important in, e.g., audio or graphics applications, where performance is crucial
22
Collections
Arrays, Maps, Sets: should be familiar to Java experts!
> let myList = [1, 2, 3] undefined > myList.length 3 > myList[0] 1 > myList.push(4) 4 > myList [ 1, 2, 3, 4 ] > myList.pop() 4 > myList [ 1, 2, 3 ] > typeof myList 'object'
> let myMap = new Map() undefined > myMap.set('a', 'foo') Map { 'a' => 'foo' } > myMap.set('b', 2) Map { 'a' => 'foo', 'b' => 2 } > myMap.set(3, 'a') Map { 'a' => 'foo', 'b' => 2, 3 => 'a' } > myMap.get('a') 'foo' > myMap.has(3) true > let mySet = new Set() undefined > mySet.add('a') Set { 'a' } > mySet.add('b').add('c') Set { 'a', 'b', 'c' } > mySet.add('a') Set { 'a', 'b', 'c' } > mySet.has('b') true
Chainable!
23
Control statements
Nothing new here, I expect
'use strict'
const x = 2 if (x < 4) { console.log('x is a small number') } else { console.log('x must be pretty big') }
'use strict'
const myTerm = 'quux' switch (myTerm) { case 'foo': console.log(1) break case 'bar': console.log(2) break case 'baz': console.log(3) break case 'quux': console.log(4) break default: console.log('?') }
24
Looping and iterating
The basic for loop should be familiar to you
for of can iterate through iterables, including Arrays, Maps, and Sets
'use strict'
const myPosse = ['Alice', 'Bob', 'Carol'] for (let person of myPosse) { console.log(person) }
'use strict'
for (let i = 0; i < 5; i++) { console.log(i) }
25
Strings and variables, old and new
The new method is much cleaner, easier to read, less error-prone, and in all ways superior to the old approach
if you can find '`' on your keyboard
'use strict'
const first = 'Jane' const last = 'Doe' console.log('Hello ' + first + ' ' + last + '!!')
'use strict'
const first = 'Jane' const last = 'Doe' console.log(`Hello ${first} ${last}!`)
26
var: declaring variable the old wayBack in the bad old days, scope (i.e., from where in a program a variable can be seen) was a bit odd in JS
most programming languages have block scope, but JavaScript had function scope a variable declared with var is scoped within the inner-most function it finds itself in, and 'hoisted', i.e., auto-declared from the top of that function
This is an example where having a tool to assist your coding is invaluable
'use strict'
var x = 3 function func (randomize) { if (randomize) { var x = Math.random() return x } return x } console.log(func(false))
27
let & const: the new & improved wayIf you use let instead, you get block scoping instead—much easier to handle and understand
const is used whenever a variable is not expected to change
it is a good habit to use const whenever possible, because that can catch inadvertent errors the scoping rules are as with let
You should endeavour to always use let and const if at all possible
'use strict'
let x = 3 function func (randomize) { if (randomize) { let x = Math.random() return x } return x } console.log(func(false))
28
let & var, another demonstration
Mixing let and var can lead to confusion, as var declared variables are hoisted to the top of their (functional) context
stick to let and const
'use strict'
let x = 10 if (true) { let y = 20 var z = 30 console.log(x + y + z) } console.log(x + z)
29
Functions
Functions are first-class citizens in JavaScript
They can be created, assigned to variables, and passed around as arguments to other functions
'use strict'
function myF1 () { return 1 } const myF2 = function () { return 2 } function myFxy (fX, fY) { return fX() + fY() } console.log(myF1(), myF2()) console.log(myFxy(myF1, myF2))
30
Arguments and default argumentsYou can, of course, pass arguments to functions
These can have default values, if you wish
The … construct allows you to have as many arguments, as you desire
…args must be last
'use strict'
function greet (greeting = 'Hi', person = 'friend') { return `${greeting}, ${person}` } function sum (...numbers) { let total = 0 for (let n of numbers) { total += n } return total } console.log(greet()) console.log(greet('Hello')) console.log(greet('Howdy', 'Pardner')) console.log(sum(1, 2, 3, 4, 5, 6, 7, 8, 9))
31
The arrow function
Functions are used a lot as arguments in JavaScript
The => construct makes it easy to create anonymous functions
return is implied, but you can add it if you want, including braces
'use strict'
const doubler = x => (2 * x) const adder = (x, y) => x + y
console.log(doubler(3)) console.log(adder(3, 4)) console.log((x => 3 * x)(3))
32
Using functions to operate on arrays
Arrays support a number of methods to operate on the entire array, including map, filter, and reduce
this can be a very convenient way to, e.g., filter an array of strings
This is a place where => functions come into their own
'use strict'
const arr = [1, 2, 3, 4] console.log(arr.map(x => 2 * x)) console.log(arr.filter(x => x > 2)) console.log(arr.reduce((acc, c) => acc + c))
33
Testing for equality
Assignment or binding in JavaScript is '='
'==' used to be the equality operation, but it is badly broken, and you should never use it (it converts type!)
'===' and '!==' are the proper operations to use34
Old school objects
Objects can be just fine as just objects
'use strict'
let joe = { name: 'Joe', age: 54, occupation: 'plumber', describe () { return `${this.name} is a ${this.age} years old ${this.occupation}` } }
let tom = { ['na' + 'me']: 'Tom', 'Age': 21, occupation: 'busy' }
console.log(joe.name, joe['age']) console.log(joe.describe()) console.log(joe['describe']()) console.log(joe) console.log(tom)
35
Old school constructors & inheritance
While there are no classes, objects can have prototypes, and by setting a new object’s prototype, it can be hooked up to an existing object’s prototype, effecting inheritance hierarchies
'use strict'
function Person (name, age, job) { this.name = name this.age = age this.job = job this.describe = function () { return `${this.name} is a ${this.age} years old ${this.job}` } } let fred = new Person('Fred', 50, 'crane operator’) console.log(fred.describe())
Person.prototype.titled = function () { return `${this.job} ${this.name}` } console.log(fred.titled()) console.log(fred instanceof Person)
function Brony (name, age, job, bestPony) { Person.call(this, name, age, job) this.bestPony = bestPony
this.favorite = function () { return `${this.name}'s favorite is ${this.bestPony}` } } Brony.prototype = Object.create(Person.prototype)
console.log(Brony.prototype.constructor) Brony.prototype.constructor = Brony
let niels = new Brony('Niels', 47, 'associate professor', 'Rarity') console.log(niels.describe()) console.log(niels.favorite()) console.log(Brony.prototype.constructor) console.log(niels instanceof Person) console.log(niels instanceof Brony) console.log(fred instanceof Brony)
36
Understanding prototype
All objects have a .prototype, and most derive from Object.prototype
Where useful functions, such as toString(), is defined
If you access a property or call a function on an object, it will first check whether it has it itself, and if not, try its prototype
The prototype is just an object, and can be modified so you can actually add new properties and function to ‘super class’ objects
If you want to inherit from an object, you need to hook up to the object’s prototype
37
Classes and objects in JavaScript ES6
Strictly speaking, classes are also objects in JavaScript ES6, but a bit of syntactic sugar has been introduced to have familiar constructs for most programmers
'use strict'
class Point { constructor (x, y) { this.x = x this.y = y } toString () { return `(${this.x}, ${this.y})` } }
class ColorPoint extends Point { constructor (x, y, color) { super(x, y) this.color = color } toString () { return `${super.toString()} in ${this.color}` } } const cp = new ColorPoint(30, 40, 'green') console.log(cp.toString()) console.log(cp instanceof Point)
38
Getters and setters
If you are so inclined, it is also possible to create getters and setters in JavaScript
'use strict'
class Point { constructor (x, y) { this._x = x this._y = y } toString () { return `(${this.x}, ${this.y})` } get x () { return this._x }
get y () { return this._y } set x (x) { this._x = x } set y (y) { this._y = y } } const p = new Point(30, 40) console.log(p.toString()) console.log(`p.x = ${p.x}`)
39
Overview
A brief history of JavaScript and ECMAScript JavaScript for Java developers The JavaScript ecosystem Getting access to JavaScript Some language basics A look at the Node.js standard library
40
JavaScript does not work in isolation
As we have seen, JavaScript is quite closely integrated into the Web browser, which is exposed through the Document object
When it comes to programs outside the browser, JavaScript, in the form of Node.js, relies on its standard library to access the world
such as the file system, networking, databases, etc.
41
JSON: Exchanging data in JavaScript
The predominant format used to transmit data in JavaScript programs is JavaScript Object Notation
it has spread far beyond JavaScript these days used for files, and for encoding data to be sent over the Internet
It is quite close to JavaScript in syntax, and be written and read directly
It can used to translate arrays and Objects into strings and back again
but curiously enough neither Maps nor Sets, but you’ll fix that!
42
The JSON object: stringify() & parse()
The JSON object has two methods: stringify & parse stringify can take a data structure and return it as a JSON formatted string parse can take a JSON formatted string and return it as a JavaScript object
node > const myList = [1, 2, 'tre', 4, 'fem'] undefined > myList [ 1, 2, 'tre', 4, 'fem' ] > const myListJSONified = JSON.stringify(myList) undefined > myListJSONified ‘[1,2,”tre",4,"fem"]' > typeof myListJSONified ‘string’ > const myListReturned = JSON.parse(myListJSONified) undefined > myListReturned [ 1, 2, 'tre', 4, 'fem' ] > myListReturned instanceof Array true
43
Writing to a file
Files are important, because they offer persistence
JavaScript does not inherently have the ability to deal with files
(in truth, it does not have the ability to deal with the outside world at all) this is where the Node.js standard library becomes handy
We will need to use the file system module, ‘fs’ for short
44
Modules
Modules in Node.js are the equivalent of packages in Java
a rich set of objects (classes in Java) that you can use in your programs
In Java, you import a package; in Node.js, we require it
Node.js ships with its standard library, and in addition there is an enormous number of third-party modules
45
Dealing with files
Writing to or reading from a file is a three stage process:
you open the file you write to it, or read from it you close the file
Things can go wrong! perhaps the file is not where we expected (or there at all) perhaps we do not have permission to change or read the file this calls for exceptions
46
Writing ‘Hello world’ to a file
Isn’t that a lot of code to do just that? well… yes, but there is a reason, and it has to do with the fundamentals of JavaScript and Node.js interacting with the world
'use strict'
const fs = require('fs')
const fileName = 'message.txt' fs.open(fileName, 'a', (err, fd) => { if (err) throw err fs.appendFile(fd, 'Hello world!\n', (err) => { fs.close(fd, (err) => { if (err) throw err }) if (err) throw err }) })
47
What’s with all the arrow functions?
Node.js is a single threaded, non blocking I/O, event-driven system
When programs are single threaded, they usually only do one thing at a time, so if they open a file, they have to wait for the file to be opened (a long time for a computer), while they do nothing (i.e., they freeze)
In Node.js, we don’t wait—we start things, and hand them instruction on what to do when they are ready
function are of course a splendid way to give instructions
48
Doing work in Node.js
One way to think of this is a cashier in a fast-food restaurant receiving orders from customers
some jobs the cashier can do immediately and does so most orders are added to the list (or queue) of things to do for the cooks working behind the counter a cook will take an order off the queue, cook it up, and once finished, return the ordered item to the front, where the cashier hands the customer the food while the cooks are working, the cashier can receive new orders from the customers
We are the customers, dealing with the cashier
The cashier leaves, when the queue is empty, the last order fulfilled, and all the immediate jobs are done
49
Opening the file
“Open the file named fileName in append mode, and call this function when the file is ready or something has gone wrong”
the last argument, the function, is the callback function, and it’s called from fs.open
A callback function often takes two arguments: an error, and the result of the operation, if there is one
If there is an error, we throw an exception
You’ll see this pattern many times in JavaScript
fs.open(fileName, 'a', (err, fd) => { if (err) throw err // . . . })
50
Opening the file
“Append the text ‘Hello world!’ to the file identified by fd, and call this function when done (or something has gone wrong)”
there is no result returned here, but things can still go wrong, so the callback function still has an err argument, which is set to null if there was no error (and null is false)
Whether the string has been written or not, we need to close the file (we know it has been opened)
If there was an error with appending the file, we throw an error
fs.appendFile(fd, 'Hello world!\n', (err) => { fs.close(fd, (err) => { if (err) throw err }) if (err) throw err })
51
Reading the file back in again
Simpler, but still the same principle: start something, and give it the instructions on what to do, when ready
'use strict'
const fs = require('fs')
fs.readFile('message.txt', 'utf8', (err, data) => { if (err) throw (err) console.log(data) })
52
Will this work?
What is going on here?
'use strict'
const fs = require('fs')
let theMessage fs.readFile('message.txt', 'utf8', (err, data) => { if (err) throw (err) theMessage = data }) console.log(theMessage)
53
Let’s add some time to track the code
All the immediate jobs have been done by the cashier
then the cook brings the ordered item to the front
'use strict'
const fs = require(‘fs')
const start = Date.now() let theMessage fs.readFile('message.txt', 'utf8', (err, data) => { if (err) throw (err) theMessage = data console.log(`File is read: ${Date.now() - start} ms`) console.log(data) }) console.log(theMessage) console.log(`Last line of code: ${Date.now() - start} ms`)
54
Handling callbacks
So, you should deal with the results of a computation in the callback function
but what if that function also has a callback • and that function also has a callback
• and that function also has a callback • and that function also has a callback
• …
Then you are in what in JavaScript is known as ‘callback hell’ and that can be a bit of a mess, because it is hard to keep track of
opening and writing to a file required three levels of callback—it can be much worse but don’t worry: there is a better way, and we’ll get back to this problem later
55
Wrapping up
JavaScript has undergone a tremendous development since its inception, perhaps more than any other Web technology
(it was also in need of some advancement)
Used in its most modern incarnation, ES6, it is a perfectly pleasant language, especially if paired with a bit of tooling to check for potential bugs
It is available everywhere you can find a Web browser, and it's easy to get started
56
Available this Monday
Mobile Pay: 93508374
There are two HDMI displays with keyboard/mouse/network in the Study Café, and hopefully one soon in Chomsky
Hej labtools
Der er nu ankommet 25 kits til Bouvin’s kursus. Det nemmeste ville være at aftale en dag fx. Til en undervisningsgang hvor kits kan sælges.
Et kit består af Pi 3+, Case, SD Card(m. Noobs) + strømforsyning.
Kan sælges til 350.- samlet for et “kit”
57