<< UX/UI Design | Home | Debugging >>
JavaScript: Don't judge me by my bad parts, learn the good stuff and stick with that!
Take your first steps into programming by learning to read, trace, and analyze small programs.
- Getting Started
- Study Tips
- About Programming
- Suggested Study
- Break-Down
- Class Recordings
- HYF Home (external)
You will need NPM and nvm on your computer to study this material
Using a browser with good DevTools will make your life easier: Chromium, FireFox, Edge, Chrome
- Install OR update the
study-lenses
package globally$ npm install -g study-lenses
(if you do not have it already)$ npm update -g study-lenses
(if you already have it installed)
- Clone this repository:
$ git clone git@github.com:HackYourFutureBelgium/welcome-to-js.git
- Navigate to the module repository in terminal
$ cd welcome-to-js-prep
- Run the
study
command from your CLI$ study
- 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 tolocalhost:xxxx?--help
- you can read the
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, that should take care of it ; )
- Don't rush, understand! Programming is hard.
- The examples and exercises will still be there to study later.
- It's better to fail tests slowly and learn from your mistakes than to pass tests quickly and not understand why.
- Don't skip the examples! Understanding and experimenting with working code is a very effective way to learn programming.
- Practice Pair Programming: two people, one computer.
- Read the code out loud
- Take a look through the HYF Study Tips for more inspiration
If you can't finish all the material in this repository, that's expected! Anything you don't finish now will always be waiting for you to review when you need it. These 3 emoji's will help you prioritize your study time and to measure your progress:
- π₯
:egg:
- Understanding this material is required, it covers the base skills you'll need for this module. You do not need to finish all of them but should feel comfortable that you could with enough time. - π£
:hatching_chick:
- Do your best to start this material. you don't need to master it or finish it but getting the main idea will be helpful for taking the next steps. - π₯
:hatched_chick:
- Have you finished all the π₯'s and started all the π£'s? push yourself with these challenges.
Software Development is a many layered skill. One way to break it down is to think of these layers:
expand/collapse
- Source Code: The basic literacy of programming
- Learning the key words (vocabulary) and syntax (grammar) for your programming language
- Being able to read your code out loud, tracing it's execution as a computer would
- Understanding what the developer wanted to say with their code
-
Welcome to JS will focus on these skills_
- Machine Instructions: The basic mechanics of programming
- Understanding the life-cycle of your program
- Understand how the computer will interpret your source code to create a running program
- Understand what about your code matters to the computer, and what matters to people
- Fixing syntax errors that occur when you try to run your code
- Predicting which lines of code will be executed in which order
- Predicting how each line of code will change what is stored in program memory
- Reading error messages & callstacks to fix fix semantic errors that occur when you run your code
-
Debugging will focus on these skills_
- Problem Solving & Algorithms: Breaking down large problems to be solved in small steps
- Understanding a coding challenge and being able to break it down in different ways
- Determining which solution strategies are correct for which types of problems
- Understanding how test cases are used to describe your solution strategy
- Identifying the best language feature to use with your strategy
- Reading test cases to understand how code is supposed to behave
- Using Test Cases to structure your solution design process (Test Driven Development)
- Identifying and isolating mistakes in your code by reading failing test cases
- Demonstrating your code does what you think it does by passing test cases
-
Behavior, Strategy, Implementation Module will focus on these skills
- Software Design: Organizing smaller pieces of code into full software solutions
- All in good time ;)
-
Every module starting with Separation of Concerns will focus on these skills
Helpful links, examples and exercises.
expand/collapse
These two games are deceptively simple. You will be given pseudo-code and will need to follow the instructions the same way a computer would. Practicing this game will help you learn how to trace code, and prepare you for learning about program memory in the next module - Debugging.
- π₯ compute-it
- π£ little-dot
In this module you will only learn a small part of what JavaScript has to offer. You will learn just enough JavaScript to make small programs that process text and interact with users. Why just enough, and not a little more? Because reading and understanding program logic is more important than JavaScript, so why let the code get in the way?
A selection of tutorial sites with interactive exercises, these tutorial will help you learn the JS Syntax you need to study the exercises in this repository. As you're setting your study plans and priorities, remember: Just Enough JavaScript. These tutorials will each cover different topics in different orders and in different ways. Find the one that works for you:
- sololearn: through Conditionals and Loops
- javascript.express: the chapters that cover Just Enough JavaScript
- launchcode: chapters 1 -> 5
- programiz: through while loops
- freecodecamp: through for loops. (more advanced)
- Headfirst JavaScript: an outstanding (paid) book for understanding JS and the web. comes with code samples you can run locally
Is there another tutorial you like better than these? not a problem! Just us a PR so other students can find it ;)
Resources you can use to look up specific concepts when you are stuck or curious.
- Mozilla Developer Network (MDN): the reference for JavaScript. It will take time to learn how to read and understand MDN, but it's worth the wait.
- javascript.info: for short and clear explanations of everything you will need in JS
- hackyourfuture.github.io/study: a collection of explanations and resources put together by the HYF community. PR's are welcome!
- codeacademy cheat-sheets
- your class repo: issues & discussions
- ask a duck
- what happens when ...
- getting answers
- how to ask programming questions
- asking technical questions
- (how do computers read code?)
- Reading code is harder than writing it
- Learn to read the Source, Luke
- Close-Reading Code
- Read Code Good
- How to read code?
- 5 tips
- How to read other people's code
- ASCII Pronunciation Rules for Programmers
- JavaScript Glossary
- How to teach programming (and other things)?
- Code Reading Clubs - code-reading.org
The exercises in this module focus on how to read and understand programs that interact with a user. As a programmer you will spend more of your time reading, understanding and adjusting code than you will writing it. So why not start there?
- π₯ reading-code: Practice reading files of code. This includes identifying variables, tracing code like the computer, drawing on the code, and asking good questions.
- π£ forest-and-trees: Analyze programs in detail learning to explain what is happening on each line, and explaining how each line contributes to the program's overall behavior.
- π£ parsons-problems: You will be given many lines of code, scrambled out of order. You need to move them back into the correct order and indentation. Careful! there may be some extra lines
- π£ word-banks: Complete programs by filling in the blanks. All the missing words and symbols will be provided, you need to figure out where they go.
- π£ naming-variables: Code should be written for people first, computers second. Learn to give helpful names to your variables that describe what data they store and how they are used in your program.
- π£ logging: Learn how to create your own trace of a program's execution using
console.log
. Practice tracing different aspects of the same program's execution. - π₯ explorations: Experiment with JS language features that interest you, try modifying the programs in this repo, or try writing your own. This folder is yours to explore JS and programming.
expand/collapse
- What is Programming?, What is JavaScript?
- Follow the instructions in Getting Started to install
study-lenses
- Read through ./just-enough-javascript
- Through conditionals
- In your favorite tutorial learn about:
- variables
- primitive types
- conditions
- all together: Variables and Interactions
- in groups: Conditionals and While Loops
- all together: Remebery
- in groups: Madlib and Getting an Orange
No project. Just lots of study time, alone and in groups. Keep asking questions!
- Take a look through the tutorials in Suggested Study and choose your 1 or two favorites.
- Use Just Enough JavaScript to help you stay focused, if you are blocked on something in your tutorial that isn't in Just Enough JavaScript then you can set it aside for now.
- Try out the Parsons Problems for each language feature as you learn them in the tutorial. You can even try making your own Parsons Problems from code in your tutorial!
- With your classmates:
- practice Reading Code
- complete at least 3-4 Forest and Trees exercises
- practice Logging, can you create a helpful trace of the programs using
console.log
?
expand/collapse
- In your favorite tutorial learn about:
- while loops
- for loops
- Naming Variables:
- all together: examples
- in groups: Frogopedia 1 & 2
- all together: examples
- in groups: Animalopedia
No project. Just lots of study time, alone and in groups. Keep asking questions!
- Keep working through your favorite tutorial(s):
- Use Just Enough JavaScript to help you stay focused, if you are blocked on something in your tutorial that isn't in Just Enough JavaScript then you can set it aside for now.
- Try out the Parsons Problems for each language feature as you learn them in the tutorial. You can even try making your own Parsons Problems from code in your tutorial!
- With your classmates:
- practice Reading Code
- complete as many Word Blanks as possible
- complete at least 3-4 Naming Variables exercises
Screen recordings of class. Coaches, when sending your PR's with links please ...
- Add a link to your video in the correct module's section
- Indicate which class you were teaching
- Which week it was
- Give your name
- and a helpful description
Thibault, Evan