Minju: Welcome to JS, 3 Weeks

[minjupgeorge]

Learning 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
  • [ ] Blocks
  • [ ] 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.
• [ ] 🐣 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.

[minjupgeorge]

Week 1

---

I Need Help With:

I have tried to run JS programs in console ,but sometimes it got stuck up and taking too much time for loading.

What went well?

I understood JavaScript basics. first while go through flash cards it was easy but forgets very soon. once started practicing it is all good. I have practiced until "What is programming " section at study lenses.

What went less well?

Lessons Learned

Practice is more important.

Sunday Prep Work

Study Priorities: Just Enough JS and Understanding Programs. I have started going through examples and exercises just before "Just Enough JS. yet to start the coming week study priorities

[danielhalasz]

I have tried to run JS programs in console ,but sometimes it got stuck up and taking too much time for loading.

which console are you talking about? in the dev tools of the browser? which programs got stuck?

I have practiced until "What is programming " section at study lenses.

the goal is to FINISH that section this week 🙂 is that what you mean?

[minjupgeorge]

Hi @danielhalasz The goal is to complete untill 'Just enough JS' 😄 .

The browser is where am running JS is Firefox browser console . Am not stuck up with programming concept. If I change a code then if click on run tab it's taking too much time for loading. I think better I will start practicing at Vscode.

[colevandersWands]

Hmm, are you running code you wrote when you click the [run] button? or does it take too long for all programs? It could be that you have an infinite loop. Maybe try using the loop guard, it's near the bottom of the >>options<< in study lenses

most of these programs won't work in VSCode because prompt, alert and confirm aren't supported in node :(

[minjupgeorge]

@colevandersWands Thanks alot for the information. Yeah now I got it. I will try to run accordingly.

[danielhalasz]

@minjupgeorge can you post an example that got stuck?

[minjupgeorge]

@danielhalasz
Hi Daniel, if am trying to edit the code and just clicking on run button its working perfectly . Same line if am editing in the console and trying to run just pressing the enter button it is showing error / loading for long time. Now its showing error. I will post both scenarios here. fortunately didn't come across loading problem at the moment 😄

Code runs perfectly on clicking run button in the study lenses

Same code showing error while running in the console and press enter

[danielhalasz]

@minjupgeorge this happens because the value of 'input' is still in the memory. if you refresh the browser window and try again just copy pasting the code on the left into the console and hit enter..it should work fine..

[minjupgeorge]

@danielhalasz yeah its working .

[minjupgeorge]

Week 2

---

I Need Help With:

So far so good. updated study-lenses. Thanks daniel @danielhalasz for updating the repo. it saved lot of my time.

What went well?

• I have gone through just enough java-script and reached till conditionals.
• Feeling confident to answer MCQ Questions in each session
• I was so happy to go through the carousel code in Javascript. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_website_script

What went less well?

Still at just enough java-script Session Its taking time to recollect the concepts even-though I have learned Java during college days .

Lessons Learned

Don't feel bad if you are not remembering the lessons learned long back. Just try to refresh by running the code.

Sunday Prep Work

Yet to start 3. understanding programs.

[colevandersWands]

Still at just enough java-script Session Its taking time to recollect the concepts even-though I have learned Java during college days .

Take your time, there is no rush. You'll get a chance to review all of these topics again in the next module.

[minjupgeorge]

Week 3

---

I Need Help With:

Is there any difference between debugging at chrome and Firefox . I feel quite easy with chrome. Recently I have noticeD two such topics at suggested study.

What went well?

Once I have started practicing javascript-exercises exercises at visual-code, I feel so confident and able to recollect what I have learned earlier.

Understood the mistakes done at UI/UX Design

What went less well?

I have to update the design according to the review and yet to start my website design.

Sunday Prep Work

Keep studying the Programs at study-lenses Started practicing at sololearn Thanks a lot for the materials at suggested study

[danielhalasz]

Is there any difference between debugging at chrome and Firefox .

well, the interface is certainly different and the debugging buttons too, Firefox does not have the usual step button of Chrome..but honestly I am not sure about the deeper differences.

I have to update the design according to the review and yet to start my website design.

that's okay, that is not urgent, just something to keep in mind for the next period