Skip to content

Latest commit

 

History

History
211 lines (188 loc) · 11.4 KB

summary.md

File metadata and controls

211 lines (188 loc) · 11.4 KB
Raw

Summary

Here you find some keywords of things we have discussed or worked on. These summaries are not meant to be comprehensive, and it will probably only make sense to you if you have attended the session.

Day 1 – 2024-03-06

  • Get to know each other
  • Intro to JavaScript by using the browser console (developer tools)
    • our first expressions
    • data types
    • operators
    • error messages
  • Difference between JS and HTML/CSS
    • "what is a programming language?"
    • JS is computed line by line
    • different kinds of keywords
  • Difference between Frontend and Backend JavaScript
  • Overview of the module
    • Elements JavaScript (or any imperative/procedural programming language)
      • data types
      • operators
        • mathematical
        • assignment
        • logical
      • variables
      • conditions (if ... else)
      • loops (while, for)
      • arrays
      • functions
    • Problem Solving Skills and Coding Principles
      • divide and conquer
      • debugging & reading/understanding code
        • print debugging
        • test-driven approach
    • Coding Enviroment
      • nodejs
      • VS Code

Resources

  • To repeat and go deeper, have a look at EloquentJS Chapter 1
  • A very different approach to learning JS, but in my opinion still interesting would be The Coding Train
    • if you have the capacity
    • if you maybe like to have things moving visually
    • this is totally optional, but I thought I'd refer you to it.

Day 2 – 2024-03-08

  • Repeating concepts from last time
    • What data types do you remember?
    • How do you open a dialogue/popup?
    • How do you ask a user for input?
    • How do you round a number down / up?
    • Was everybody able to access the github repository?
  • A bit of new stuff, but still with the sense of repeating the concept of chaining operations and function calls.
    • Exercise: Calculate the length of a string
    • Demo time. MDN as a resource for JavaScript knowledge/documentation (similarly: HTML & CSS)
    • Exercise: Build a dialogue that asks for the name and returns the length of the name (i.e. how many letters)
      • solution: alert("Your name has " + prompt("What's your name?").length + " letters").
      • This exercise is meant to show you, that we already can combine multiple things to an expression that already makes something more or less useful. (even though we're just getting started :D)
  • Setting up your nodejs Environment
  • introduction to using the commandline terminal in VS Code
    • When you start your Terminal in VSCode, you'll get something called a Shell.
      • For Windows that's the PowerShell, for MacOS the default is zsh (pronounced "Seashell". Seriously! :D)
    • Make sure you are aware of the difference whether you're inside the nodejs terminal or whether you're "outside" in the Shell.
  • prompt/console vs file-based JavaScript
    • We have started with the built-in browser console (Developer Tools)
    • We can also use the nodejs console / prompt
    • Lastly, what we'll from now on mainly use, is writing JS to a file and running it with node <filename>.
  • Difference between the Browser JavaScript and NodeJS
    • NodeJS doesn't have things like alert and prompt, because it doesn't have the concept of a Window.
    • If you want to communicate with the user, we'll have to load and use a package
      • There are different options, but we'll mainly use readline-sync in this course.
  • Introduction to variables
    • Three ways to initiate a variable: let, const, var. We mostly want to use let
    • JS is a bit weird, because it gives you some freedom which can later hurt you.
      • Example: you don't have to use let/const/var to create a variable, but the behavior changes in subtle ways. It's recommended to use these keywords!
    • There are different metaphors for a variable: "a box" or "a tentacle"
      • Check EloquentJS Chapter 2: "You should imagine bindings as tentacles rather than boxes. [...]"
  • Boolean Operators
  • Homework

Day 3 – 2024-03-11

  • Repetition from last time: NodeJS in VSCode

    • the terminal program that is configured for your system let's you start node
    • you can exit node by typing .exit, but this doesn't work for the terminal program itself ("Command not found" or something similar)
    • you can not run node inside node (Uncaught ReferenceError: node is not defined)
    • run node followed by a filename to run a script, e.g. node hello.js
    • how folders and directories are the same thing with a different name
    • in the terminal, pwd shows you where you are and ls shows you what files are there.
      • pwd stands for "print working directory"
      • ls stands for "list files"
    • why terminal is named terminal
    • in node we don't have prompt available (why? most don't need it in the backend!)
    • using npm to install a package called readline-sync

  • exercise: Write a currency converter. It should ask the user for a number (euros) and compute the resulting amount for a currency of your choice

    • converting the user input into a number
      • option 1: using the Number constructor
      • option 2: ask the user for a float in the first place, with readlinesync.questionFloat.
    • store that into a variable and calculate the output
    • example of how to make code nicer
      • by going "step by step" and use "speaking variable names" in each of the steps

  • more about Variables

    • changing a variable throughout the code
    • assignment operators (+=, *=, ...)

  • exercise: fill out this code such that it works correctly!

    • solution can be found here.

  • get to know the boolean data type better and apply that using conditional logic statements (if/else)

    • operators that deal with booleans
      • comparison operators
      • logical operators
        • binary vs unary
    • how the if statement looks like

  • exercise: Ask the user for a year and tell them whether it is a leap year or not

Day 4 – 2024-03-13

  • review of the homework
  • more about the if statement
    • these if statements can be nested!
    • Transforming your code into a logical flow-diagram
      • How to draw multiple if statements in such a diagram?
      • see my notes for a few badly drawn illustrations :D
  • how to approach a coding problem (of course only Moritz' perspective and ideas)
    • think about it
      • Does the requirements/question make sense to you? If not, can you formulate a question?
      • How would you solve the problem without a computer?
      • How would you expect the program to look like? (Have you seen similar programs before?)
      • Which programming elements might you need in your approach?
    • try it
      • trying is about taking and testing tiny steps towards the solution
      • do the elements that you were considering in the previous step actually work?
        • use the console / interpreter / whatever before building the whole thing!
    • solve it
      • this step is to write down a working solution. It doesn't need to be "nice".
    • review it
      • now it's for making it nicer. Can you make your code more understandable/readable?
      • do you understand why it works? Sometimes you get a lucky shot. What do you still find confusing?
  • short circuiting boolean operator
  • preview of the while loop, more on that on day 5.

Day 5 – 2024-03-15

  • review of the homework and any questions that came up since last time
    • talked in depth about homework exercise 4 and compared different solutions
  • further introduction to while loops
    • how if and while are quite similar syntax:
      • they both have a condition (...)
      • they both have a block of { ... } that runs based on this condition
    • exercises (also see loop-demo.js)
      1. try to run an infinite loop. How do you stop the program? (A: you could kill it with Ctrl+C for example)
      2. change the loop condition, such that the loop runs for only 50 times. Print the loop variable, so we count upwards.
      3. change the code, such that we display a countdown instead (e.g. 50, 49, 48, ..., 0)
        • this can be done by changing the output to something like 50 - i
        • alternatively, you change the loop variable to start at 50 and decrement it instead
      4. write a loop that counts upwards to 20, but in steps of 2. Like: 0, 2, 4, 6, ..., 20
  • demonstrating the exercism platform, so you can practice yourself if you want to
    • log in with your github account
    • we tried the Hello World exercise of the JavaScript track
    • it's totally optional and extracurricular material, but I thought it would be cool to have it :)
  • development practices
    • naming variables properly
    • putting your code into different files (which allows for easier sharing, for example)

Day 6 – 2024-03-18

  • homework / questions?
    • homework 9: sum loop
      • how to make output appear in the form of an equation?
  • combining conditionals and loops
    • using an if inside a while for example.
  • the for-loop
    • the form that I showed you is basically a "shortcut" version of the while loop.
    • it's mostly used for things where you have a running loop variable (like an i) that counts up or something
  • introduction to arrays
    • see my notes, pages 15 and 16

Day 7 – 2024-03-20

  • programming a number guessing game
    • goal: user should guess a random number between 1 and 100
    • they have 7 attempts and get information whether their number is too high or too low
    • if they manage, they win, if not, they loose
  • introduction to functions.
  • rewriting the number guessing game with functions
  • some small things with arrays

Day 8 – 2024-03-22

  • text-based game (exercise 8 homework)
    • if-tree
    • using a loop
    • using array or any other variables to keep track of things
  • talk about steps to build hangman
    • and do the together! Result, see here