The best authors and the best JavaScript developers are those who obsess about
language, who explore and experiment with language every day and in doing so
develop their own style, their own idioms, and their own expression.
Suggested Study: Helpful links for this module, useful
but not required.
Flashcards: Study these a little bit every day and add new
flashcards for things you don’t want to forget.
Printables: Cheat sheets and diagrams you can print out
and have next to you while studying.
Study Tips: Some tips for getting the most out of your time
learning to program.
Lesson Plans: A few ideas for running lessons around this
material.
Learning Objectives
all of these skills are limited to short, single-page programs written with
Just Enough JavaScript
Priorities: 🥚, 🐣, 🐥, 🐔 (click to learn more)
There is a lot to learn in this repository. If you can't master all the material
at once, that's expected! Anything you don't master now will always be waiting
for you to review when you need it. These 4 emoji's will help you prioritize
your study time and to measure your progress:
- 🥚: Understanding this material is required, it covers the base skills you'll
need for this module and the next. You do not need to finish all of them but
should feel comfortable that you could do them with enough time.
- 🐣: You have started all of these exercises and feel you could complete them
all if you just had more time. It may not be easy for you but with effort you
can make it through.
- 🐥: You have studied the examples and started some exercises if you had time.
You should have a big-picture understanding of these concepts/skills, but may
not be confident completing the exercises.
- 🐔: These concepts or skills are not necessary but are related to this module.
If you are finished with 🥚, 🐣 and 🐥 you can use the 🐔 exercises to push
yourself without getting distracted from the module's main objectives.
---
Master JS syntax and language structures with flashcards and spaced repetition.
You can easily create and edit flashcards in markdown to keep up with your
studies.
Some tips and resources for making the most of LLMs in your study. Using LLMs
is not necessary for Welcome to JS, you can (and should!) practice all of the
exercises without the help of AI.
What is a program? What is a programming language? How do programs and people
fit together?
🥚 Data in, Data Out: You understand that computer programs are used
to transform data, and can explain a JS program from this module in terms
of the data that goes in and the data that comes out.
🥚 Three Audiences: You can explain how a single file of code is used to
communicate with 3 different audiences:
Developers: You can explain how code formatting, comments, logs and
variable names make it easier (or harder!) for a developer to understand
a program.
Computers: You can explain how a computer follows your instructions
to store, read and modify data in program memory.
Users: You can explain how the computer creates a dynamic user
experience by following different executions paths depending on user
input.
🥚 Tracing Variables: You can complete a trace table for a program
that uses only variables, and can check your work using the “trace”
button.
Go in depth on JavaScript you need to know for writing interactive text-based
programs in the browser. Along the way you will learn how each language feature
works in small programs.
🥚 JavaScript Syntax: Given a program, you can identify these parts of
JavaScript syntax:
Primitives
Operators
Identifiers
Keywords
Checks
Blocks
Function Calls
🥚 Listening and Reading: You can read code out loud, and understand your
classmates when they read code to you. You don’t need to understand how a
program works to master these learning objectives!
Listening You can exactly re-write a program that a classmate has
read
Reading You can read a program out loud and guide your classmates to
re-write exactly the same code without them seeing the program. Every
indentation, semi-colon, comment and spelling in their program must be
identical to yours.
🥚 Static vs. Dynamic Analysis: You can explain and use these two ways of
studying a program, each can help you understand different aspects of your
code. To help understand this concept, the options panel in Study Lenses is
organized into static and dynamic study options:
Static: Studying the text in a code file without running it. Some
static study methods are creating a flowchart, analyzing variables,
filling out a trace table, and drawing on code.
Dynamic: Running code and studying the computer’s behavior. Some
dynamic study methods are running code and reading console logs, using
the trace button, and stepping through in the debugger or JS Tutor.
🥚 Tracing Execution: You can complete a “steps” trace table for all
JS language features in Just Enough JavaScript, and can correct your table
using console output from the “trace” button.
🥚 Analyzing Variables: You can list all the variables in a program,
and answer these 5 questions for each variable:
Where is the variable declared?
What is the variable’s scope?
Is the variable initialized with a value?
How many times is its value used (read) in the program?
How many times is the variable assigned a new value?
What types are assigned to this variable during the program’s execution?
🥚 Completing Programs: You can successfully fill in blanks for a
program when the missing words are provided, including distractors.
🐣 Translating Pseudo Code: Given a program written in Pseudo Code,
you can translate it to working JavaScript.
🐣 Comparing Programs: You can compare two programs with similar code
and explain if they have the same behavior or not. If they do not, you can
explain how they behave differently and why.
🐥 Constructing Programs: You can reconstruct a program’s lines and
indentation, successfully ignoring distractor lines.
Learn how to understand a larger programs by finding connections between the
details and the big picture. By the end of this chapter you will know how to
read a new program and do a simple code review.
🥚 Stepping Through: You can pause a script in a your browser’s
debugger, arrange the debugger, collapse extra panels, and step through a
script written with Just Enough JS. At each point in execution you can
make a prediction of the next line before executing, and can check your
prediction using the scopes panel.
🥚 Imperative Programming: You can explain what the Imperative
Programming paradigm is, and can explain how you know the programs in
Welcome to JS are Imperative.
🥚 Program Goals: You understand that a full JavaScript program can be
explained as a series of smaller goals, and can write names for the goals
in a simple working program.
🥚 Logging: You can tracing specific aspects of a program’s execution
and log them to the console.
🐣 Tracing Backwards You can trace backwards from a program’s output
to it’s input.
🐣 Naming Variables: You can analyze how a variable is used in a
program and give it two names:
Generic: You can give a generic name to a variable based on how it is
used in the program.
Specific: You can give a specific name to a variable based on how it’s
used and the program’s domain (the program’s specific data and use-case).
🐣 Describing Programs: You can read a program and describe it with
comments using to the methodology from /describing-programs:
Zoom Out
Zoom In
Find Connections
Describe Goals
🐣 Code Review: Given a working program you can review the code for
clarity, correctness and style.
Learn to modify and write larger programs in JavaScript. You’ll cover many of
the hidden skills necessary to develop quality software and to work
collaboratively on a code base.
🥚 Linting: You can find and fix simple linting errors in JavaScript
programs.
🥚 Program Life Cycle: You can explain the two phases of a program’s
life cycle.
Creation Phase
Execution Phase
🥚 Fixing Errors: You can use the structured comment to describe an
error in your program, and can make several educated guesses at how to fix
the error.
🐣 Fixing Bugs: You can use the structured comment to describe and fix
a bug in small programs.
🐣 Modifying Programs: You can make small changes in a program to
change its behavior without breaking it.
🐥 Refactoring: Given a working program, you can make changes to the
code without changing the program’s user-facing behavior.
🐥 Legacy Code: You can understand and rewrite a poorly written
program to improve the experience of all 3 audiences: developer, user,
computer.
🐥 Writing Programs: Given a description of a program’s behavior
(user story + test cases), you can plan goals for the program and write
code to pass the tests.
🐔 Reverse Engineering: Given a working program with unreadable code, you
can:
Give the program a name.
Describe the program’s behavior with a user story, acceptance criteria
and test cases.
Plan goals for the program.
Develop your own working program with the exact same behvior.
🐔 Imagining Programs: Given an empty page, you can imagine and develop
your own programs using Just Enough JavaScript. This includes:
A title.
A description with a user story, acceptance criteria and test cases.
Commented goals.
Fully working Code.
Setting Up
expand/collapse
> You will need
> [NPM](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) and
> [nvm](https://github.com/nvm-sh/nvm#installing-and-updating) on your computer
> to study this material
>
> Using a browser with good DevTools will make your life easier:
> [Chromium](http://www.chromium.org/getting-involved/download-chromium),
> [FireFox](https://www.mozilla.org/en-US/firefox/new/),
> [Edge](https://www.microsoft.com/edge),
> [Chrome](https://www.google.com/chrome/)
1. Install or update the `study-lenses` package globally
- `$ npm install -g study-lenses` (if you do not have it installed)
- `$ npm update -g study-lenses` (if you already have it installed)
- Didn't work? you may need to try:
- (mac) `$ sudo npm install -g study-lenses`
- having trouble updating?
- try this:
`$ npm uninstall -g study-lenses && npm install -g study-lenses`
2. Fork and clone this repository:
1. fork the HackYourFuture repository to your personal account
- `git@github.com:HackYourFutureBelgium/welcome-to-js.git`
2. clone your fork to your computer
- `git clone --depth 1 git@github.com:HackYourFutureBelgium/.git`
3. when there are updates to the module:
1. update your fork with a PR
2. pull the changes from your fork to your computer
3. Navigate to the module repository in terminal
- `$ cd welcome-to-js`
4. Run the `study` command from your CLI
- `$ study`
5. The material will open in your default browser, you're good to go!
- you can read the `study-lenses` user guide from your browser by navigating
to `localhost:xxxx?--help`
> If you have a Windows computer and get this error:
>
> - `... /study.ps1 cannot be loaded because running scripts ...`
>
> follow the instructions in
> [this StackOverflow answer](https://stackoverflow.com/a/63424744), that should
> take care of it ; )
---
## Code Quality Scripts
This repository comes with some scripts to check the quality of this code. You
can run these scripts to check the code provided by HYF, and to check the code
you write when experiment with the examples and complete the exercises.
### `npm run format`
This script will format all of the code in this repository making sure that all
the indentations are correct, the code is easy to read, and letting you know if
there are any syntax errors.
### `npm run spell-check`
This script will check all of the files in your repository for spelling
mistakes. Spelling is not just a detail, is important! Good spelling helps
others read and understand your programs with less effort.
`spell-check` is not so clever though, it doesn't have _all_ possible words in
it's dictionary and it won't know if you _wanted_ to spell a word incorrectly.
If you think one of it's "Unknown word"s is not a problem, you can either ignore
the suggestion or add the word to the `"words": [ ... ],` list in
[.cspell.json](./.cspell.json).
### `npm run lint:md`
This script will [lint](https://en.wikipedia.org/wiki/Lint_%28software%29) all
the Markdown files in this repository, checking for syntax mistakes and other
bad practices. Fixing linting errors will help you learn to write better code by
pointing out your mistakes _before_ they cause problems in your program.
Some linting errors will take some practice to understand and fix, but it will
be a good use of time.
### `npm run lint:js -- ./path/to/code`
Just like `lint:md`, but for `.js` files. This script will lint all of the JS
files in this repository, letting you know if there are any syntax errors or bad
practices.
</details>