Lecture Notes

This page is just an information dump for the lecture portion of Complete JS course so far for my own notetaking purposes

Section 1: Welcome, Welcome, Welcome!

Course Structure and Projects

This section gives a brief overview of the topics that will be taught and the structure of the course.

Watch Before You Start!

This video kind of goes through what the target audience is and a bit of caution about ratings

Setting Up Our Code Editor

This section reviews getting VS code and a couple other alternatives. It primarily focuses on VS code and a few important settings that the instructor wants you to use.

Section 2: JavaScript Fundamentals - Part 1

Hello World!

In this section we use the dev tools inside of a google chrome browser to write some code. We use alerts to display hello world, and define a single variable that we eventually display using an if statement.

A Brief Introduction to JavaScript

JavaScript defined as a high level, object oriented, multi-paradigm programming language. 3 languages for web dev: html for content, css for presentation, and JS is the programming language(web apps). Talks about effects potentially used by twitter through JavaScript. Talks about common front end libraries like React, Angular, and Vue and how it is important to learn JS first. Talks about how JS can be used for back end apps, mobile apps, and even native desktop applications. Finally, finished with talking about updates from ES(ECMAScript) 5 to ES6(2015), ES7-ES11(2020).

Linking a JavaScript File

Talks about how to download starter and end files for the course. Then used the script inline method, followed by writing a script for the starter course for fundamentals of javascript. Talks about using console.log();

Values and Variables

Value is the smallest amount of information in JavaScript. Variable is a container for values. Then declared a variable with let. After declaring, we can use the variable by its name. Variables are easy to change a value and it happens throughout the code. Variables are usually named in camelCase. Errors will show up in the console without console.log. Hard rules: 1. cannot start with a number; 2. can only contain numbers,letters, underscores, $ ;3. Cannot use reserved words (new/function). Real constants in uppercase.

Data Types

Every value is either an object or primitive value. Primitive types - Number - decimals/integers, String - sequence of "char",Boolean - true/false, Undefined - default variable value, Null - empty value, Symbol(ES2015) - value that is unique, BigInt(ES2020) - larger integers. Javascript has dynamic typing, data types are determined automatically. In VS code you can use ctrl + slash to create a comment. Learned typeof operator to check data types. Undefined can be both a value and a type. Null is a data type and a value, but null still displays as a type object even though this is an unfixed bug.

let, const, and var

When you change a variable value it is called assigning or reassigning, you can also refer to it as mutating the variable. When you use const to define a variable, it is immutable or it cannot be changed without creating an error. You can change the value of a var variable like let. Let is block scoped, and var is function scoped. You should basically never use var. You can also use variables without any declaration.

Basic Operators

Operators allow us to transform values. Mathematical, comparison, logical, assignment.. are just some types of operators. This lesson starts with mathematical or arithmetic operators.

Operator Precedence

Operator precedence determines how operators are parsed in relation to each other. Talked about MDN operator precedence resource which has a full list of priority. Talks about the precedence numbers in the table. Most operators especially math are left to right.

Challenge 1: Video Solution

This is the demonstration solution for the first challenge. One of the major differences between his code and mine is that he used const for all his variables. However, he did not display both tests in the same code base which required let variables. He also used a single console log for both variables with less text in the log.

Strings and Template Literals

In this section we learned about template literal strings and string concocatenation. We compared the nuances of the two when writing a variable heavy sentence. Template literals are created by `` and the variables are declared in ${}. Also talks about multi line strings with each in comparison. Also \n for regular strings new line, but template literals you can just use enter.

Taking Decisions: if / else Statements

Learned about if statements, if (condition) {} and the else {} statement. This will execute code depending on whether the condition is true or false. Also talked a bit about scope and the when you can access variables from inside a code block.

Challenge #2 Solution

This challenge was short in code lines. So outside of the fact that I just skipped straight to the second way to display, the only difference is that he did both ways to display.

Type Conversion and Coercion

Type conversion is when we manually convert from one type to another. Type coercion is when JS automatically changes the type. NaN is when an operation fails to give us a new number, but it is a number type and its more like an invalid number. Type coercion happens mostly when trying to compare values of different types.

Truthy and Falsy Values

Falsy values are values converted to false when evaluated in a boolean context. Falsy values: 0, '', undefined, null, NaN. Truthy values are basically anything else. Boolean coercion is usuaully implicit and not explicity although you can use Boolean().

Equality Operators: == vs ===

You do not need {} for an if statement if there is only one line of code. = is an assignment operator, == and === are equality operators. === is a strict equality operator, and does not perform type coercion. == does perform type coercion. As a general rule use the strict equality(===) over the loose ==. If you need to do type coercion its usually better to use explicit. You can add extra ifs to a single if statement with else if. There is also not != loose, !== strict.

Boolean Logic

Using the && AND operator you can combine statements. You can also use the || OR operator to combine statements too. You can use a 3x3 truth table, to see values with A and B OR or and topleft, true/false and then the outcomes. Consider Age = 16. A. Age is greater or equal 20 (false) B Age is less than 30 (true). !A = true, A AND B false, A OR B true. !A and B, true. A or !B = false.

Logical Operators

Applying logical operators from last lesson into javascript. Comparing strict and loose equalities.

Challenge 3: Solution

Get average results then display winner for Challenge 3: Gymnastics Results. Mostly the same as my solution with a couple extra emojis and a print of the initial averages before the comparison results. Also he used if, with 2 else ifs. I used 1 if, else if, and else. Missed the bonus challenges, had to pause and go back and input them.

The switch Statement

Talked about the switch statement which starts with switch (variable) { case 'something': code; break;}. If you do not code break statements it continues to execute cases. Compares switch to an if else statement.

Statements and Expression

Expressions is a piece of code that produces a value. Ex. 3+4 is an expression. A truth comparison is an expression. A statement is a bigger peice of code that is execute and which does not always produce a value on its own. A declaration is like a complete sentence, and if then are statements. However, they can have strings and conditionals that produce values so they would be expressions. Statements end in a ;.

The Conditional (Ternary) Operator

In this one we give a condition ? result if true : result if false;. This is an operator since it produces a value, and also makes it an expression. Usually ternary is used to store variables conditionally. Compared the ternary object for declaring a variable to an if then statement to declare a conditional variable. You can use a ternary statement during a template literal.

Challenge #4: Video Solution

In this case the challenge solution was exactly the same as mine, except I chose to create bill2/bill3 so I could display all 3 tests on a single page.

JavaScript Releases: ES5, ES6+ and ESNext

Start with a brief history of JavaScript. 1995 - Brendan Eich creates the first JavaScript in 10 days it was called mocha. 1996 - Mocha changes to LiveScript and then to JavaScript, in order to attact Java developers. 1996 - Microsoft launches IE copying JavaScript from Netscape and called it JScript. 1997 - ECMA releases ECMAScript (ES1) the first official standard for JavaScript. 2009 - ES5 (ECMAScript 5) released with lots of great new features. 2015 - ES6 was released, the biggest update to a language ever. In 2015 ECMA script changes to an annual release cycle. All versions of JavaScript needs to be backwards compatible. Old features are never removed, so really new versions are more like releases than versions. No forwards compatability. During development is to use latest google Chrome. During production, Use Babel to transpile and polyfill your code. ES5 is ready to be used today for all browsers. ES6 is supported in all modern browsers, but not in older browsers. Can use most features with transpiling and polyfilling. ESNext - future versions of the language. This is because the features have to go through 4 stages before they are fully released. It's important to learn old javaScripts because they are stil used.

Activating Strict Mode

Talks about turning on strict mode in javascript. To do this you have to 'use strict'; as the first line of code. This will help with errors and bugs in our programs. It forbids us to do some things, and creates visible errors in the code to debug.

Functions

Functions are blocks of code that we can reuse repeatedly, its like a variable for blocks of code instead of just values. To use a function, we use a process called invoking, running, calling the function. A function can take in data, and it can return data as well. You take in parameters, and return something back to the call. Functions let you have reusable blocks of code most importantly.

Function Declarations vs Expressions

There are many different but similar functions. In this part we learn about declarations where you declare the variable name after function and the parameters, and we also learned about function expressions where you make a function without a name that is assigned to a variable. We can actually call function declarations before they are defined in the code but function expressions do not work that way. This occurs because of a process called hoisting.

Arrow Function

Special form of function, that is shorter and faster to write. Arrow functions are short, because they do not require curly braces. Secondly the return is implicit, so it will reduce the amount of text. This makes it a lot easier to have simple one line functions. You can use functions with multiple parameters () and {} and return statements.

Functions Calling Other Functions

In this example we extend the foodprocessor function from earlier by calling a fruit cutting function that will do an extra step that is called within the fruit processor function.

Reviewing Functions

Reviewed embedded functions, and how the return statement works. This was a quick review over the fact that we can't execute lines after a return statement. Function declaration - can be used before they are declared. Function expressions - function values stored in a variable. Arrow functions - special function expressions (mostly one line functions) also does not have this.

Challenge #1: Video Solution

My calcAverage function used more descriptive variable names than his, which just used a,b,c which makes sense with the reduced size of arrow functions. He used const values for his score variables, but I did reassign my variables for second test print. He also made an additional score print to check the progress better. Also noticed a small bug in my code using > vs >= as required by tests. At one point he uses cmd + d to pick all of a variable. Which seems to be functionally equivalent to windows ctrl+shift+L. Eventually he made his variables let, and reassigned the variables as I did.

Introduction to Arrays

Introduces arrays which are a way of combining many variables into a single variable with []. Values are separated by a comma within the array brackets. Arrays are zero indexed, which means the first value is 0 and all others are 1 less than expected. The length property is not zero indexed, and it will display the expected value. To get the last value, use the length - 1. Primitive values are immutable, but arrays are not primitive. Therefore they can be changed with reassignments. You can't do operations wiht an array, but with individual elements.

Basic Array Operations(Methods)

Starts off with the introduction of the push function, arrayName.push('value'); which can add values to the end of the array. This can also return back the length of the array after the push. The unshift function adds a value to the beginning of the array and returns the length. The pop function will remove the last value of the array. The pop function removes the last value of an array and will return the value removed. The shift() function works mostly the same as pop but with the first value. You can use the indexOf wiht a value to return the index of a value. You can also use the includes function which will return a boolean if the array includes the value with strict equality.

Challenge #2: Video Solution

He used a ternary operator with the return value of the calcTip function was pretty interesting. He ended up with a return statement like return bill >= 50 && bill <= 300 ? bill * .15 : bill * .2;. He also used an arrow function as an alternate which looked like calcTip = bill => bill >= 50 && bill <= 300 ? bill * 0.15 : bill * 0.2; which is also pretty interesting and including the ternary operator. From here most of the rest was the same as the way I did mine.

Introduction to Objects

Reviewed Arrays as a data structure. With an object you can define and name each data pair. Objects are one of the most fundamental concepts. There are multiple ways to create an object, and the curly braces is called the literal syntax. It is the most common.

Dot vs. Bracket Notation

You can call properties from objects with the dot notation. It will look like console.log(jonas.lastName);. You can also use bracket notation to get a property like this console.log(jonas["lastName"]);. When we need to first compute property name, you have to use bracket notation. A good use of bracket notation is for things like prompt user input variable. You can't use a dot notation for this, only bracket will work.

Object Methods

Any function that is attached to an object is called a method. A function is just a type of value, so you can have properties that are functions. Also introduced the this keyword which allows the user to point to the object. This is also very good for improving readability by reducing the amount of repetition.

Challenge 3: Video Solution

In this video I mostly used the exact same code but it wasn't working for a very long time. This was because the BMI value in the test is case sensitive and I was creating BMI and not bmi. This solution uses repeated code which isn't recommended. He also used an else if which is kind of odd to me with only 2 variables in a comparison.

Iteration: The For Loop

In this lesson we learn about a better way than copy pasting a repeated line and we talk about the for loop. The for loop has 3 parts, the first is the initialization or the start, the second part is the condition, and last is increment/decrement each divided by ;.

Looping Arrays, Breaking, and Continuing

This video starts out with a more in depth look into the for loop, and its components. It also briefly covers how to use a loop to create an array of values. You can add elements to an array by assigning, or by the push method. Continue skips the current iteration of the loop and moves on to the next one. If you use the break command it will completely stop the loop once the condition is met printing no more values.

Loop Backwards and Loops in Loops

In this section we put a loop inside of a loop, and used the nested loop to display information about the increment counters from the parent loop and the child loop.

The while Loop

In this section we first compare a for loop to a while loop. In a while loop you need to start with an increment variable outside of the loop, then you only put a condition within the parenthesis. After the codeblock within the loop, you need to do increment/decrement. The while loop is good to use when you are not using a counter.

Challenge 4: Video Solution

He used const for all 3 array variables. He also pushed in the values instead of assigning them. He also used only one loop, with multiple pushes to create the two new arrays. He also logged all 3 at once. Also he shorted the return statement for calc average with += instead of = +.

Setting up Prettier and VS Code

This walks through setting up prettier and automatically formatting on save. It also goes through how to change some of the prettier settings if desired. It also went through creating snippets, where you can do something like type cl, and get console.log(); out of it, and pick where you want your cursor to be. The only bad thing is that autocomplete doesn't seem to work. It also went through TODO highlights and how to set up different texts.

Installing Node.js and Setting Up a Dev Environment

In this video he goes through a couple ways to run Live Server to see live updates of changes to code. He uses the Go Live button and later he uses terminal commands which he says that he prefers to open the live server.

Learning How to Code

How to fail at learning to code: not having a clear goal at beginning, he just copied code without caring about how it works, he didn't reinforce learning with notes and doing small challenges, he didnt practice coding or come up with his own project ideas, he became frustrated when code wasn't clean, lost motivation because he never knew everything, learning in isolation, he thought he was a web dev and applied to jobs. 1. Make sure to make a specific, measurable, time based goal. Imagine a big project you want to build at the end. 2. Make sure to understand the code you are studying and typing. Don't copy and paste. 3. After learning new features use them immediately. Make small exercises and challenges and take notes. 4. Coding your own projects is essential to learning. 5. Don't get stuck trying to write perfect code. Just write code and get things done. 5. Explain new concepts to other people, share with web dev #100DaysOfCode etc. 6. A web course is just the beginning of the journey.

How to Think Like a Developer

4 steps to solve a problem. 1. Make sure you 100% understand the problem. Ask the right questions to get a clear picture. 2. Divide and Conquer. Break a problem into smaller sub problems. 3. Don't be afraid to do as much research as you have to. 4. Write pseudo-code before writing the actual code.

Using Google, StackOverflow and MDN

This talks about how to use stack overflow first to find examples and learnfrom them to get syntax. Also explores MDN libraries for learning. MDN will have information about the desired element and related methods. The video uses mdn to get an example of how to use array concat method.

Debugging (Fixing Errors)

Software bug - defect or problem in a computer program. Debugging - finding fixing, preventing bugs. Steps: 1. Identify - during dev, testing, user reports, context. 2. Find - isolate where the bug is happening, dev console or debugger. 3. Fix - correct the bug. 4. Prevent - search for same bug in similar code.

Debugging with the Console and Breakpoints

In this video we create a function to convert a user input of celsius to kelvin. We start with a type of bug because prompts return strings. Also talks about other console commands including console.warn and error which change the text, and console.table which is good for objects. We then solve the typeof problem with the number method. This also goes over how to use chromes debugger and breakpoint in the sources tab adding breakpoints to view the code in that specific moment during runtime. This shows the value of variables at that time and additional information when hovering over code. Also demonstrated how useful debuggers are inside of loops to see exactly whats going in and out. You can call a debugger by writing debugger; in your code.

Challenge #1

In this one he presents the challenge, then walks through the solution. A big difference between the example code he provided and mine was that he put the testdata into arrays, where I just put the arrays into the function calls. He also ended up making his loop basically the same with a literal string and adding on each. Technically my solution was missing the 3 dots at the end.

The Rise of AI Tools(ChatGPT, Copilot, Cursor AI, etc.)

Talks about ais like chatgpt, copilot, cursor. They are all powered by an LLM (large language model). These have lots of strengths and weaknesses. Make sure to start with understanding the problem. Also how important it is to divide the problem out. Choose ai and give it a very specific prompt and context. Review and test the output solution. After doing this you can go back and refine the prompt and get a better solution. Before you use AI, you need to know how to code on your own. You need to have good critical thinking skills. Incorporate AI code : when you could have done it yourself, when you truly understand the code, ensure code is 100% correct, also good when its not mission critical to the app. Also talks about how ai won't take your jobs, but jobs will change. Developer will need to be in control over the integration. AI code is buggy and it is not good at debugging. AI will help us, not replace us.

Solving Challenge 2 with AI

In this video we went through how to use chatGPT to get through a challenge. We also had chat GPT explain the meanings of filter and callback methods in JavaScript.

Basic HTML Structure and Elements

This goes through basic elements including html, head body, h1, h2, paragraph. It also uses ! tab to get a complete html structure.

Attributes, Classes and IDs

This one goes through added classes and ids to html elements. The anchor element and the img element and href and src attributes. Div element and input element and a basic introduction to input element and button.

Basic Styling with CSS

Goes over properties and values, like background-color. Went through selectors for elements, classes, and id. Also went through font properties font family, font size color and then finally border.

Introduction to CSS Box Model

Went through the box model including content width and height. padding, border, margin. Fill area which is what gets background color/image but this does not include the margin.

Project #1: Guess My Number

In this section the Guess My Number project is introduced and the DOM is also introduced. We explored the querySelector method to retrieve elements and their contents using textContent.

What's the DOM and DOM Manipulation?

DOM is the Document Object Models. It is a structured representation of HTML documents. It allows JavaScript to access HTML and CSS elements to manipulate them. Talks about the DOM tree structures. DOM always starts with the document object at the top. Then the first child is HTML, then its split into head and body. The rule is whatever is in the html document is also represented in the DOM. DOM is not part of JS, the DOM and DOM methods are aparrt of the web APIs(application programming interface). They are libraries written in JS.

Selecting and Manipulating Objects

In this video we explored ways to select and change the wording of elemennts through JS. we used querySelector to select elements and textContent to change the text. We also used style.property to change the css of elements.

Handling Click Events

In this video we explored ways to take in input and use it with query selection and using addEventListener to create a click event. We also explored getting the value of an input element with .value.

Implementing the Game Logic

We built the core if function for the number guessing game. We used math.random and round to get the number, displayed it and used conditions to change the various elements to fit.

Manipulating CSS Styles

In this video we explored changing css styles through JS. We used style.property to change the css of elements. We also explored changing multiple styles at once. He also emphasized using camelCase for multi word properties, and enclosing values as strings with ''.

Challenge #1: Again Button

In this module we went through all the steps to create a function for the again button which resets all styles and effects back to zero when the game needs to be reset. This leaves us with only the high score for the next video.

Implementing High Scores

Broke down the logic and steps required to create a high score button to work properly. Then we create an if statement within the first previous if statement where the game is won after declaring a let variable for high score.