JavaScript tutorial
Make your pages interactive
About this tutorial
JavaScript runs in the browser and makes pages respond to people: buttons, forms, calculations, live updates. In this beginner class you learn values, decisions, loops, functions, arrays and objects, then use them to change web pages and build a working to-do list.
Every lesson has examples you can run in the CodeLab Playground, an exercise and a short quiz. Finish with the final quiz.
Lessons
The basics
- Introduction to JavaScriptWhat JavaScript does, where it runs, how to add it to a page and how to see its output in the console.
- Variables and valuesStore numbers and text in variables with let and const, and name them well.
- Data types and operatorsNumbers, strings, booleans, null and undefined, and the arithmetic and comparison operators.
- Strings and template literalsWork with text: join it, measure it, change its case and build sentences with template literals.
Making decisions
Functions and data
- FunctionsGroup steps into reusable functions with parameters and return values, including arrow functions.
- ArraysKeep lists of values in arrays: read, add, remove and search items.
- ObjectsGroup related values with named properties, add methods, and combine objects with arrays.
- Array methods: forEach, map, filter and findProcess lists in one line with forEach, map, filter, find and reduce.
The browser
- The DOM: changing the pageSelect elements and change their text, styles, classes and attributes, and create new elements.
- EventsReact to clicks, typing, hovering and key presses with addEventListener.
- Forms and validationRead form values, stop the page reloading, check input and show helpful messages.
- Project: a to-do list appCombine everything: DOM, events, arrays, functions and localStorage to build a working to-do list.
- JavaScript final quizFifteen questions covering the whole JavaScript beginner class. Score yourself to finish the course.