Andrii: Welcome to JS, 3 weeks

[andriivam]

Learning Objectives

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.

---

1. What is Programming

What is a program? What is a programming language? How do programs and people fit together?

• [x] 🥚 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:
  • [x] Developers: You can explain how code formatting, comments, logs and variable names make it easier (or harder!) for a developer to understand a program.
  • [x] Computers: You can explain how a computer follows your instructions to store, read and modify data in program memory.
  • [x] Users: You can explain how the computer creates a dynamic user experience by following different executions paths depending on user input.
• [x] 🥚 Tracing Variables: You can complete a trace table for a program that uses only variables, and can check your work using the "trace" button.
• 🥚 JavaScript Syntax: Given a program, you can identify these parts of JavaScript syntax:
  • [x] Primitives
  • [x] Operators
  • [x] Identifiers
  • [x] Keywords
  • [x] Checks
  • [x] Blocks
  • [x] Function Calls
• [x] 🥚 Pseudo Code: You can explain what pseudo code is, how it's used and why it's helpful.
• [x] 🥚 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.
• 🐣 Program Analysis: You can study a simple working program and identify:
  • [x] The program's behavior (data in, data out)
  • [x] The program's goals
  • [x] The program's syntax and language features
  • [x] Which parts of the source code are for which audience (users, devs, computers)
• [x] 🐥 Same Behavior, Different Code: You can study simple programs with the same behavior (data in, data out) but different source code and explain how the differences matter for each audience.

2. Just Enough JavaScript

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.

• 🥚 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!
  • [x] Listening You can exactly re-write a program that a classmate has read
  • [x] 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:
  • [x] 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.
  • [x] 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.
• [x] 🥚 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.
• [x] 🥚 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?
• [x] 🥚 Completing Programs: You can successfully fill in blanks for a program when the missing words are provided, including distractors.
• [x] 🐣 Translating Pseudo Code: Given a program written in Pseudo Code, you can translate it to working JavaScript.
• [x] 🐣 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.
• [x] 🐥 Constructing Programs: You can reconstruct a program's lines and indentation, successfully ignoring distractor lines.
• [x] 🐥 Linting: You can find and fix simple linting errors in JavaScript programs.
• [x] 🐔 Writing Programs: You can write small programs that log specific values, or pass specific test cases.

3. Understanding Programs

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.

• [x] 🥚 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.
• [x] 🥚 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.
• [x] 🥚 Logging: You can tracing specific aspects of a program's execution and log them to the console.
• [x] 🐣 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).
• [x] 🐣 Describing Programs: You can read a program and describe it with comments using to the methodology from /describing-programs:
  1. Zoom Out
  2. Zoom In
  3. Find Connections
  4. Describe Goals
• [x] 🐥 Code Review: Given a working program you can review the code for clarity, correctness and style.

[andriivam]

Week 1

I Need Help With:

I don't know yet as JS looks very complex and difficult part of study so im sure later i will have a lot of question.

What went well?

I think i understand well the basic theory of JS but its hard to remember all even if you practice on it.

What went less well?

Im not sure that i'm using correctly study-lenses as according to Evan's guide i cant use some part of tools like to see the answers for question or maybe i just don't have access.

Lessons Learned

Need to study and practice a lot as something really different that we had before and much more difficult.

Sunday Prep Work

Im still doing what-is-programming as i spent to much time on flip-cards. I was watching video after each card to better understand the theory.

[colevandersWands]

i cant use some part of tools like to see the answers for question or maybe i just don't have access.

you shouldn't need access for anything, it could be something isn't working in study lenses. Could you share a screenshot/recording of something that you can't do?

i spent to much time on flip-cards. I was watching video after each card to better understand the theory.

no problem if you haven't learned them all yet, they're an overview of everything you will learn in the module. it might be helpful to think of them as little self-quizzes you study a few minutes every day instead of something to finish before moving on

[andriivam]

Thank you for your comments))I was thinking same that shouldn't be in the rush with JS. And if i will have some more issue with study-lenses i will do screen or record short video)

[andriivam]

@colevandersWands Im not sure if i did this exercise wrong or its problem with study-lenses

[colevandersWands]

Good catch! I forgot a // distractor comment on line 24 (just pushed a fix):

'use strict';

/* parsons-collapse: hint

  0. strict mode!
  1. declare the first name
  2. declare the last name
  3. declare the full name
  4. log the full name
*/

let first = 'Padma';

let last = 'Patil';

let full = first + ' ' + last;

console.log(full);

// --- distractors ---

Let first = 'Padma'; // distractor
last = 'Patil'; // distractor
let = last 'Patil'; // distractor
let full first + ' ' + last; // distractor

[danielhalasz]

@colevandersWands where did you push it? https://github.com/hackyourfuturebelgium/welcome-to-js

[colevandersWands]

just pushed again. It didn't go through last night

[andriivam]

Week 2

I Need Help With:

For the moment all is fine i just need some small explanation about block scope and variables there

What went well?

Generally JavaScript going well but its a lot of information so even something what was clear hard to remember but with the time i believe it will be better)

What went less well?

As i mention before a lot of information and i have feeling like its not enough time for study i need more and more. Also numbers doesn't look so simple as i was thinking.

Lessons Learned

JavaScript is really complex language where do you need to trace every your step even in small programs that will help you better understand and learn all process inside.

Sunday Prep Work

I'm still doing just-enough-javascript

[colevandersWands]

Also numbers doesn't look so simple as i was thinking.

Numbers are not simple in JavaScript, you'll study them more deeply next module.

As i mention before a lot of information and i have feeling like its not enough time for study i need more and more.

You'll actually get a chance review everything covered in Welcome to JS next module, and you'll continue practicing everything when you start building web pages.

[andriivam]

That would be really great if we will review it it again all material in next module)))

[danielhalasz]

@andriivam week3?

[andriivam]

Week 3

I Need Help With:

Be honest i didn't get the last exercises. As i don't have any background i think i need some more explanation (comments) to better understand how to do it)

What went well?

The last classes was really amazing and i understand how is important in JS to understand the program and to pay attention to the details.

What went less well?

This is really hard part of coding but probably the most interesting. So just need time to go into it.

Lessons Learned

Need to learn and learn. Also really helpful exercises like we did in class to understand how it works and to write you own code.

Sunday Prep Work

Im study JS from YouTube and study-lenses)

[danielhalasz]

Be honest i didn't get the last exercises. As i don't have any background i think i need some more explanation (comments) to better understand how to do it)

sure, which exercises do you mean?

[andriivam]

The exercises number 4 and 5 in this repo https://github.com/lab-brussels-1/javascript-exercises

[danielhalasz]

ah ok, both of those are just templates to help experiment with other exercises..they are not exercises, per se.

[andriivam]

@danielhalasz So i can play there with the code as i want?)))

[danielhalasz]

yes, that is why they were created