Learn JavaScript online and build web pages that respond

• Where JavaScript runs: the browser and Node.js
• Adding a script to a web page
• The browser console and console.log()
• Statements, comments and strict mode

console.log("Hello from JavaScript");

• let and const, and why var is avoided
• Numbers, strings, booleans, null and undefined
• Template literals
• typeof and type conversion

const name = "Sara"; let score = 0;

• if, else if and else
• Comparison and logical operators, including === and !==
• for, while and for…of loops
• switch statements

for (const n of [1, 2, 3]) console.log(n * 2);

• Function declarations and arrow functions
• Parameters, default values and return
• Scope and closures
• Passing a function to another function (callbacks)

const square = (x) => x * x;

• Creating, reading and updating arrays
• Array methods: map, filter, find and reduce
• Objects, properties and methods
• Destructuring and the spread operator
• JSON: turning data into text and back

const passed = marks.filter((m) => m >= 50);

• Selecting elements with querySelector
• Changing text, classes and styles
• Creating and removing elements
• Events: click, input and submit
• Checking a form before it is sent

button.addEventListener("click", showResult);

• Why some code waits: timers and the event loop
• Callbacks and promises
• async and await
• Loading data with fetch() and handling failures with try and catch

const res = await fetch("/data.json");

• Type annotations, inference and the compiler (tsc)
• Interfaces, type aliases and optional properties
• Union types, literal types and narrowing
• Generics in functions, classes and interfaces
• Utility types such as Partial, Pick and Record
• Strict mode, tsconfig and typing data from an API

function first<T>(items: T[]): T | undefined { return items[0]; }

• Components and JSX
• Props, state and the useState hook
• Events, forms and controlled inputs
• Lists, keys and conditional rendering
• useEffect and loading data
• Custom hooks, context, and React with TypeScript

const [count, setCount] = useState(0);

• Components, templates and data binding
• Built-in control flow and directives
• Services and dependency injection
• Routing between pages
• Template-driven and reactive forms
• HttpClient and the basics of RxJS observables

@Component({ selector: "app-tasks", templateUrl: "./tasks.html" })

• Core components: View, Text, Image and FlatList
• Styling with StyleSheet and Flexbox
• Touch, text input and simple gestures
• Moving between screens
• Loading data from an API in a mobile app
• Running the app on your phone or an emulator

<Text style={styles.title}>My tasks</Text>