Cristobal: Welcome to JS - 3 weeks

[alexander-lopez-s]

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

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
  • [ ] Function Calls
• [ ] 🥚 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:
  • [ ] The program's behavior (data in, data out)
  • [ ] The program's goals
  • [ ] The program's syntax and language features
  • [ ] Which parts of the source code are for which audience (users, devs, computers)
• [ ] 🐥 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!
  • [ ] 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.
• [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?
• [ ] 🥚 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.
• [ ] 🐥 Linting: You can find and fix simple linting errors in JavaScript programs.
• [ ] 🐔 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.

• [ ] 🥚 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.
• [ ] 🥚 Logging: You can tracing specific aspects of a program's execution and log them to the console.
• [ ] 🐣 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:
  1. Zoom Out
  2. Zoom In
  3. Find Connections
  4. Describe Goals
• [ ] 🐥 Code Review: Given a working program you can review the code for clarity, correctness and style.

4. Developing Programs

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.

• [ ] 🥚 Program Life Cycle: You can explain the two phases of a program's life cycle.
  1. Creation Phase
  2. 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 behavior.
• [ ] 🐥 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.

[alexander-lopez-s]

Week 1

I Need Help With:

• I would like to know the difference between document.getElementById() and document.querySelector
• I want to know a list of styling syntaxes in JS. EX: document.getElementById("nav-bar").style.width = "400px";

What went well?

• I have a clear understanding of the following concepts:

  1. Assigning a variable
  2. Declaring a variable
  3. Declaring and initialising a variable.

• I know "use strict" will help me catch my errors.

• I understand that a variable declared inside curly brackets { } means we are in front of a "block scope".

• I can perfectly log a message in the console.

• I know what strings, numbers, and booleans are.

• I can perfectly link my HTML file to the JS one.

What went less well?

-Sometimes it is really hard understanding concepts, I need to read twice and sometimes trice to get it.

Lessons Learned

• I know the very basics of programming and have completed all the flashcards in Study Lenses.
• This week, I have also coded my UX/UI website and applied a little bit of JS to the booking form.

Sunday Prep Work

-I will move to 2-just-enough-javascript and complete it before Sunday.

[colevandersWands]

I would like to know the difference between document.getElementById() and document.querySelector

.getElementById("hoy") finds the element with id="hoy". .querySelector is more complicated, you can read about it here.

I want to know a list of styling syntaxes in JS. EX: document.getElementById("nav-bar").style.width = "400px";

kind of, sort of, anything you can write in CSS you can use as a style property in JS. but not always. it's quite complicated and filled with exceptions.
it's generally better to write CSS classes and use JS to change an element's class instead of changing it's styles directly

you'll cover the DOM manipulation in depth during Separation of Concerns, so no plenty of time. This will also get easier after you learn about the debugger on Sunday

[alexander-lopez-s]

@colevandersWands thanks for answering my questions. I have to say that sometimes I feel stressed when I see so many syntaxes and so many situations going on, and not being able to fully understand. Any suggestions?

[colevandersWands]

My suggestion for now is to focus only on what's in Welcome to JS. It covers a lot of important skills with the smallest amount of syntax possible. After you've learned these skills on simple code it will be much easier to learn new code.

There's still 10 weeks before you cover the DOM in class, so take your time for now

[alexander-lopez-s]

Week 2

I Need Help With:

• How do we start a scope? What indicates me "this is a scope, Cristobal"? and what tells me "here ends a scope, Cristobal"?
• Why do we have Var, Let, Cons, when we can perfectly use only one of them in our programs? What is the rule? Which one should I use?
• Does a Front-end developer need to know JS? (This question is asked to know if I need to master JS).

What went well?

I have a clear understanding of the following situations:

A. A variable is a “storage” for data. B. If I use Cons I can't rename it later. C. Variable names are case sensitive and special characters are not allowed as names. D. I understand the use of loops and conditionals.

What went less well?

• The debugger lesson was confusing, I understand that, it is a tool to locate errors in our code, but I do not know how the "watch" feature works or the "breakout points", the information came to fast and not so clear for me.

Lessons Learned

• I can say, I have a general idea of what JavaScript is and what it does, but my idea is still very vague. I have so many questions but I guess I need to learn first the very basics.

Sunday Prep Work

• I will move to "understanding-programs" and complete it before Sunday.

[colevandersWands]

How do we start a scope? What indicates me "this is a scope, Cristobal"? and what tells me "here ends a scope, Cristobal"?

Curly braces, that's all. everything between curly braces is a new scope:

// outer scope

{
  // new scope begins 
  // ...
  // new scope ends
}

// outer scope

Why do we have Var, Let, Cons, when we can perfectly use only one of them in our programs? What is the rule? Which one should I use?

Never use var, there's no good reason too anymore and it's more likely to cause tricky bugs (because of hoisting, don't worry about what that means).

Between const and let, it's preference. You can always use let, but it's helpful to use const when you can so people know the variable won't be changing.

Does a Front-end developer need to know JS? (This question is asked to know if I need to master JS).

200%! Frontend development is all about JavaScript, even things like React are just JavaScript behind the scenes. The better you know JS the better you can learn everything else.

[alexander-lopez-s]

Thanks @colevandersWands :)

[alexander-lopez-s]

Week 3

I Need Help With:

• What happens with the information that a user inputs in a form? Where does it go?
• Why do we want to tag a the whole HTML tag <body>? Example: document.getElementsByTagName(tagName);

What went well?

• I was able to declare my first variables and link them with HTML elements.
• I made my own form and added some little JS functionalities:

Cat-advisor Bowling bar reservation form

What went less well?

• I had hard time figuring out how to get the value from a checkbox and convert it to Boolean. Finally I found this syntax which works perfectly: const isAllergic = document.getElementById("is-Allergic").checked;

Lessons Learned

• I know how to collect and save the information filled in a form.
• I can style HTML elements using JS.
• I can link HTML elements to JS.

Sunday Prep Work

• I will continue to study the "Developing programs" lesson.

[danielhalasz]

• What happens with the information that a user inputs in a form?

well, it will be in the memory of the computer until the program is running and you can decide what you want to do with it.. to use it for further calculation, to get data for a database, to change the DOM, to log it in the console, etc..

• Why do we want to tag a the whole HTML tag <body>

well, maybe to do something with the entire body? 😄 like change the font everywhere..or whatever

• I had hard time figuring out how to get the value from a checkbox and convert it to Boolean. Finally I found this syntax which works perfectly: const isAllergic = document.getElementById("is-Allergic").checked;

well, that's what the dom-io.js functions are for :) feel free to use them for now, those help to make your life easier for now.

Cat-advisor Bowling bar reservation form

nice work on these two!! great to see your dedication!

[alexander-lopez-s]

Questions answered, thanks @danielhalasz :D