Javascript

Attendance (Google Forms)

Secret word: ‘’Triangle”

Announcements

• Office hours schedule has been released!
• See the post on Ed to schedule a time to meet with us
• Talk to us about anything!! Career, hobbies, help with concepts, etc.
• Reminder to submit Vitamins 1 and 2 on gradescope
• Project 1 released!! Due next next Wednesday (Oct 7)
• Vitamin 3: JavaScript released, due next Wednesday (Sept 30)

Project 1: making a personal website!

• commonly used to showcase you, including your industry experience, personal projects, and even a blog
• Get an intuition for how to design a website & build it using the skills you’ve learnt (HTML, CSS and JavaScript)
• Sign up for office hours for help with building/ advice for designing your site
• Instructions & example websites linked on the course website
• PROJECT CHECKOFFS: mandatory 15 minute meeting to go over your process & final product, sign up through office hours

}

Why is JavaScript useful?

• Originally just the language of websites, and now the language of most modern software!!
• Able to be compiled and executed within web browsers
• Lets us add scripting to our HTML and even able to modify HTML (more info on Thursday)
• Lets us add interactivity to our websites

Intro to JS

JavaScript

• JavaScript is NOT THE SAME THING as Java - completely different!!
• Like Python, JavaScript is untyped
• JavaScript’s main data structure is an Object - not class-based (although classes exist)
• One of JavaScript’s main features is asynchronicity which it accomplishes through Promises

Variables

• There are a few ways to initialize variables:
• var: initialize a variable with any type (string, number, etc.)
• const: initialize a constant variable with any type
• let: just like var but without hoisting

Types

Numbers

• JavaScript doesn’t differentiate between integers and float
• It just has something called a Number which may or may not have decimals
• You can even write in scientific notation! let x = 123e5;
• All of these are the same to JS

Number Operations

• We can do arithmetic operations on numbers using +, -, *, /, %, **
• We also have shorthands for these operations:
• number = number + 2 becomes number += 2
• number = number + 1 becomes number++

Strings

• We can use double quotes or single quotes
• We print with console.log
• We can connect strings through concatenation
• String literals use backticks and let us insert variables or expressions
• let name = “Chase”
• console.log(`Hi, my name is ${name}`)

Booleans

• Like a light switch — only on or off
• Represents two possible values: true or false
• Common in conditions and logic checks
• Boolean operators for comparisons: !=, ==, >, <, >=, <=
• Identity operator: ===
• And, not, or: &&, !, ||

Control Flow

If Statements

if (statement) {

do something

} else if (statement2) {

do something

} else {

do something

}

While Loops

• A while loop is used when you want to repeat something over and over until a certain condition is no longer true.
• Think of it like:

“Keep doing this while the rule allows it.”

​

For Loops

• A for loop is used when you know exactly how many times you want to repeat something.
• Think of it like:

“I want to do this a certain number of times.”

​

Functions

Functions

• A function is a reusable block of code that performs a specific task
• Think of a function like a coffee machine:

You press a button → it follows a set of steps → you get coffee.

• You don’t have to repeat the entire process manually each time.

Built-Ins

Built-Ins

• Pre-defined commonly used functions
• No need to write yourself; just call them!
• Very, very, very many- won’t go over them all but you can look up an action online and there’s a good chance there’s a function for it

Data Types

Objects

Collection of Data

• Objects are a collection of data
• Similar to dictionaries in Python
• Key, Value pairs to access data
• Declared with {}
• Can also nest objects within objects
• The origin of JSON, which is used as data storage in virtually every language

JSONs

What is a JSON?

• JavaScript Object Notation - we can store JavaScript objects in files and load them later
• Sharing/Sending Data
• Works with more than just JavaScript!

Arrow Functions

Arrow Functions

• Arrow functions are a shorter way to write functions in JavaScript.
• They help make your code cleaner and easier to read, especially when the function is simple.
• Think of arrow functions like shorthand texting:

Instead of saying “I am going to the store,” you say “g2g store.”

• Same meaning, just faster and more efficient.
• Similar to lambda in Python (CS61A if you took it!)

Arrays

Array Features

• Ordered collection of data
• Can store any data type (doesn’t have to be the same)
• Declared with square brackets []
• Reference data by index
• Arrays are zero-indexed!

Spread operator

• Make shallow copies of arrays
• Concise/readable code is good code
• Denoted with “...”
• Can spread arrays and JSON!

​

tinyurl.com/4b4mhvpx

​

updating 1 nested field (we need to spread each level)

Scope

Different Scopes in JS

• Scope is the concept of how where you define a variable in your program affects where else it can be used in your program
• Four types
• Global scope
• Local scope (function)
• Block scope (ex: if)
• Lexical scope (nested function)

Global scope

• Any variable defined outside of any function can be used anywhere else in the program

Local scope

• Any variable defined within a function cannot be used outside of that function

Lexical scope

• Functions can contain other functions within them
• Variables declared in the outer function can be used in the inner functions, vice versa is not true

Block scope

• Variables defined in a block (i.e code within a non function braces) are able to be accessed outside the block
• Can this lead to problems?

Problems with var

var Keyword properties

• var is always either global or local scope (based on where it is defined)
• var can also be redeclared and no error will be thrown

Problems with these properties

• Since we can redeclare var whenever we want, it can lead to easy bugs
• Especially when we want to create temporary variables within blocks

Solution: let and const

• let = substitution for var
• const = defines constant variable whose value cannot be changed
• let and const cannot be redeclared!
• Also block scoped, so cannot use if declared in block

Asynchronous Programming

What is asynchronous programming?

Why is it necessary?

• JS is single threaded, so it can only do one thing at a time
• But what if one line of code takes a while to finish?
• Our program will pretty much freeze during this time, since nothing else is being executed
• We can use asynchronous programming, or programs that execute their lines out of order, to allow us to “wait” for certain functions while still executing other lines of code in the meantime

Async Tools: Promises

• A promise is an object containing a function that executes asynchronously
• It can be used within our overall program to perform some operation, then move on to code after it without waiting for the function to finish
• We can also have code that only executes on finish of the function

Async Tools: Async/Await

• The async keyword before a function definition creates a function that returns a promise - useful if we want to couple multiple async functions into one async function
• Use the keyword await to specifically wait for a promise to resolve before executing code - useful if we have code dependent on that promise

Attendance (Google Forms)

Secret word: ‘’Triangle”