/welcome-to-js

Primary LanguageJavaScriptMIT LicenseMIT

Welcome to JS

<< 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.

Contents


Getting Started

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

  1. 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)
  2. Clone this repository:
    • $ git clone git@github.com:HackYourFutureBelgium/welcome-to-js.git
  3. Navigate to the module repository in terminal
    • $ cd welcome-to-js-prep
  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, that should take care of it ; )

TOP


Study Tips

  • 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.

TOP


About Programming

Software Development is a many layered skill. One way to break it down is to think of these layers:

expand/collapse
  1. 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_

  2. 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_

  3. 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

  4. 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


TOP


Suggested Study

Helpful links, examples and exercises.

expand/collapse

Be the Computer

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.

What is Programming?

What is JavaScript?

Just Enough JavaScript

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?

Tutorials

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:

Is there another tutorial you like better than these? not a problem! Just us a PR so other students can find it ;)

References

Resources you can use to look up specific concepts when you are stuck or curious.

Asking and Searching

Reading Code

Exercises in this Repo

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.

TOP


Week 1

expand/collapse

Before Class

During Class

Before Break

just-enough-javascript

  • all together: Variables and Interactions
  • in groups: Conditionals and While Loops

After Break

Reading Code

  • all together: Remebery
  • in groups: Madlib and Getting an Orange

After Class

No project. Just lots of study time, alone and in groups. Keep asking questions!

  1. 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!
  2. 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?

TOP


Week 2

expand/collapse

Before Class

  • In your favorite tutorial learn about:
    • while loops
    • for loops
  • Naming Variables:

During Class

Before Break

Forest and Trees

  • all together: examples
  • in groups: Frogopedia 1 & 2

After Break

Naming Variables

  • all together: examples
  • in groups: Animalopedia

After Class

No project. Just lots of study time, alone and in groups. Keep asking questions!

  1. 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!
  2. With your classmates:
    • practice Reading Code
    • complete as many Word Blanks as possible
    • complete at least 3-4 Naming Variables exercises

TOP


Class Recordings

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

  1. Week 1: