Make web pages come alive: change the page, react to people, check forms and fetch real data.
- 28 lessons
- 7 units
- 4 h 30 m in all
- £0, for good
what’s inside.
For people who finished Level 1, or can already write small programs with variables, decisions, loops and functions.
JavaScript Level 2 takes your Level 1 skills onto the web page itself. In 28 lessons you change what a page shows, answer clicks and typing, check forms, use objects and array power tools, and fetch data from Gwecode's practice server. It ends with a level check: a shopping list app where you add, tick and remove items.
every lesson goes the same way.
- meet it
- guess first
- your turn
- fix it
- nailed it
unit 1
Change the page
Reach into a web page and change what it shows.
unit 2
React to people
Make the page answer clicks and typing.
- Listen for a click9 minRun your own function every time someone clicks a button.
- Arrow functions9 minWrite a small function right where you need it, and count clicks.
- Read what people type9 minRead the words in a text box as someone types them.
- What happened?10 minFind out which key was pressed and which button was clicked.
unit 3
Build the page
Add new parts to the page and take them away.
- Make a new element9 minCreate a brand-new element in code and put it on the page.
- A list from an array9 minTurn every item in an array into an element on the page.
- Take things away10 minRemove one element, or clear a whole list in one go.
- Attributes on and off10 minChange links, hide messages and switch buttons off.
unit 4
Forms that work
Collect what people type, check it and use it.
- Catch a form10 minHandle a form when it is sent, without the page reloading.
- Numbers, ticks and choices10 minRead number boxes, checkboxes and drop-down menus.
- Check before you trust10 minStop bad answers early and tell people what to fix.
- Tidy up afterwards9 minEmpty the form and put the cursor back, ready for the next go.
unit 5
Objects
Keep related values together under one name.
- Objects hold labelled values9 minKeep a pet's name, age and favourite toy together in one value.
- Change, add and look up9 minUpdate an object, add new keys and look one up by a variable.
- Walk through an object10 minLoop over every key in an object and show them on the page.
- Unpack and copy10 minPull values out of objects and arrays, and copy them safely.
unit 6
Array power tools
Change, sift and total whole arrays in one line.
- Change every item with map9 minBuild a new array by changing every item in an old one.
- Keep some with filter9 minKeep only the items that pass a test, or find the first one.
- Add it all up with reduce10 minFold a whole array down into one total.
- Chain them on the page11 minFilter, map and join in one chain to build a live search.
unit 7
Data from the web
Fetch data, keep state and redraw the page.
- Data as text: JSON9 minTurn objects into text to send them, and text back into objects.
- Ask the practice server10 minFetch data from a server and wait for the reply.
- Fetch onto the page11 minLoad data from the practice server and show it, or a friendly error.
- State and redraw11 minKeep all your data in one place and redraw the page from it.