Modern Javascript for Ambitious Highschoolers

A deck I used during the workshop exclusively held for the technology bureau of the Executive Student Council of SMAK 1 PENABUR Jakarta, 2021.

Transcript

1. Modern Javascript for Ambis Highschoolers Prepared H-1 Jonathan Filbert Most Outstanding Student @ UI
2. View the slides here: http://ristek.link/codeone-day-2
3. About Me
4. SMAK 1 Alumni!
5. What is Javascript (JS)? Javascript is an interpreted - dynamically typed programming language Facts: • Javascript is the world’s most popular programming language • The browser Chrome is made partially with Javascript! • If you have used Google.com, means you have used Javascript. • There are ~13 million JS developers in the world 🤔
6. Variables vs Constants! // Declaring Variables let a = "Not permanent" const b = "Permanent" // Reassigning variables a = "123" b = "456" // error! Const can't be muted! // Printing Variables console.log(a) // 123 console.log(b) // Permanent
7. Data Types in JS! let a = "Helloo" // this is a string a = 123 // this is a number a = 3.14 // this is also a number a = true // this is a boolean a = undefined // this is an undefined, a default 'empty' type a = null // this is a null, a programmed 'empty' type
8. Template Literals with String! const school = "Smak Satu" const numbers = 123 const lagu = `${school} lah cinta kami ${school}, ${numbers}` // SMak satu lah cinta kami 123
9. Data Structures in JS! - Arrays! // Empty Array declaration let animals = [] // prefilled arrays can also be declared as animals = ["Cat", "Dog"] let newAnimal = "Dragon" animals.push(newAnimal) // Push appends the array: ["Dragon"] animals.length // Length returns the amount of element inside the array: 1 animals.pop() // Pop removes the last element: [] animals = ["Cats", "Dogs", "Dragons"] let newAnimals = ["Sheep", "cow"] const zoo = [...animals, ...newAnimal] // spread operator spreads the content of the array: ["Cats", "Dogs",.. "Cow"] zoo.map(animal => console.log(animal)) // iterates the array and returns the iterated element zoo.forEach(animal => console.log(animal)) // iterates the array but only passes the iterated element as an arg. zoo.filter(animal => animal === "Dogs") // iterates the array and returns the element that returns true
10. Data Struct. in JS - Javascript Objects let a = {} // empty object initialization a["b"] = "c" // {b: "c"} console.log(a["b"]) // prints c console.log(a["z"]) // undefined let nested = {"More?": "More!"} a["child"] = nested; // {b: "c", "child": {"More?": "More!"}}
11. Functions! function hello () { alert("Hello!"); } function sayMyName (name) { console.log("Hello", name); } const hello = () => { alert("Hello!"); } const hello = (name) => { console.log("Hello", name); }
12. Let’s make some apps! 1. Todo App 2. Counter