Web Cartography
JavaScript Intro
Learn the basics of JavaScript.
Goals
Created to “make webpages alive”
Weakly typed
Object-based
Executes both in browser/on server
JavaScript
User interactions
Web page interactions
Over-the-network communication
Maps
Why
How
Hello, world!
Variables
let name = “John”;
let surname = “Galt”;
let age = 28;
let hobbies = [“music”, “theatre”];
let married = false;
const GENDER = “male”;
Data types
Numbers
Strings
Booleans
Objects
Symbols
null
undefined
let msg = 5; msg = ‘hello’;
let note = `${msg} world`;
let bigger = 1 < 10;
let name = null;
typeof msg === “string”;
Operators
*
/
-
+
%
let votes = 15 * 18;
let even = votes % 2 === 0;
let hello = “hello”;
let world = “world”;
let msg = hello + “ beautiful “ + world;
Cond. operators
if
?
let year = 2017;
let birthYear = 1989;
if (year - birthYear >= 18) {
console.log(“You’re over 18”);
} else {
console.log(“Poor kid”);
}
Loops
for
while
const LETTERS = [‘A’, ‘B’, ‘C’, ‘D’];
for (let i = 0; i < LETTERS.length; i += 1) {
console.log(i, ‘:’, LETTERS[i]);
}
let i = 0;
while (i < LETTERS.length) {
console.log(i, ‘:’, LETTERS[i]);
i += 1;
}
Switch
const x = parseInt(Math.random() * 10);
switch(x) {
case x < 5:
console.log(“What a small number!”);
break;
case x >= 5 and x <= 9:
console.log(“Not bad.”);
break;
default:
console.log(“Bingo!”);
}
Functions
DRY function welcome() {
alert(“Hello world!”);
}
welcome();
Functions
DRY function welcome(name) {
alert(`Hello ${name}!`);
}
welcome(“Jane”);
welcome(“John”);
Functions
function isEven(x) {
return x % 2 === 0;
}
isEven(5);
isEven(50);
function add(x, y) {
return x + y;
}
add(5, 10);
Do not use diacritics,spaces or capital.
letters in filenames and file paths.
Use English.
Indent your code.
Use syntax highlighting.
Tips
Create a HTML