https://github.com/thutterer/js-training

A JavaScript 101 slide-deck
https://github.com/thutterer/js-training

Last synced: 6 days ago
JSON representation

A JavaScript 101 slide-deck

• Host: GitHub
• URL: https://github.com/thutterer/js-training
• Owner: thutterer
• Created: 2018-01-22T16:53:34.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-01-22T17:08:29.000Z (almost 7 years ago)
• Last Synced: 2024-11-30T15:15:14.573Z (23 days ago)
• Language: HTML
• Homepage: https://thutterer.github.io/js-training/
• Size: 1.95 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# JavaScript 101

This is a [remark](https://remarkjs.com/) slide-deck I created for a training I gave.

The idea was to start with the history from the early days till today.

And then to jump into the cold water and explain the syntax (quirks) while hacking.

So after the end of of the slide-deck, the exercise was to create a simple digital clock.

The steps through which I guided the trainees were as follows:

- start with a blank document and add and explain the basic HTML structure

- `document.write` and `console.log` something

- slice `(new Date).toTimeString` and write it in a page element

- move the code into a function and `window.setInterval` on it

- put the code into its own file with ``

- add some basic CSS styling, explain and move it into `clock.css`

- add buttons to turn the display of seconds on and off (to show event handlers)

- explain differences between `var`, `let` and `const` (scopes) and many other gotchas along the way

A clean version of the desired end result can be found in this [repo](https://github.com/thutterer/now).