Signed in as
Students are going to be really eager to jump in and start coding or, as you're sure to hear them say, hacking. Use this enthusiasm but help keep them on message!
Depending on how much experience your students have with algebraic concepts, some of this may be a bit more difficult to sink in. Give a lot of attention to the concept of variables as this is the largest conceptual leap to date.
The big focus on this lesson is making code more readable to people who, probably, have never had to read much of it. As we have been throughout this course, we're going to give students something which they can equate a program, or at least a single file. That thing is going to be (bonus points if you guessed it) a paper.
Give students the following prompt: "If you're writing a paper, you're typically writing several paragraphs. These paragraphs are made up of sentences. What is a sentence? What is a paragraph? How are they different from each other? Is there anything they share in common?"_
Eventually, we'll help them connect the dots that sentences == statements && paragraphs == blocks.
Lead students through the lesson and give them some time to explore and play around with the console. See how creative they can get with creating variables and logging different values to the console.
Take the formative assessment at the end of class. Work towards mastery.
A term you'll hear often in programming is OOP, or Object-Oriented Programming. Purists don't define JavaScript as an object-oriented language because it lacks some of the characteristics of more classic object-oriented languages like C or Python. However, for all intents and purposes, JavaScript is a language that should be treated as object-oriented.
This module covers a wide range of features in modern JavaScript. By the time you've reached the end, you'll have the necessary tools in your kit to interact with data and manipulate the DOM. However, becoming proficient with these concepts takes time. One moment you'll feel so frustrated you could pull your hair out while rage-quitting your text editor and simultaneously setting your desk on fire; the next you'll feel like a demigod amongst mortals as your flow...just...works. This is the paradigm of being a developer; enjoy the ride.
Chiefly, it can help to think of code in two broad categories: statements and blocks.
Statements are typically single lines of code. In JavaScript, each statement ends with a a semi-colon. In the example below, we're writing a piece of text to the console where we can see our code's output.
1console.log(`Hello, World!`);
This statement is technically an invocation of a function, or a piece of code that does something when called. In this example, we're calling the log function on the console object and passing in an argument of Hello, World! as a string.
That's a lot of vocab being thrown at you, but you'll learn about each piece throughout this module.
Blocks are typically chunks of statements that work together to perform some kind of job. As an example below, let's say this block of code is called whenever someone signs up for a newsletter. Notice the different statements working together to complete a job.
1newUserSignUp(userEmail) { 2 console.log(`Received new sign up from ${userEmail}. Starting process.`); 3 addToDb(userEmail); 4 sendWelcomeEmail(userEmail); 5 console.log(`${userEmail} added to DB. Welcome email sent!`); 6}
Hopefully by sorting things into either 'statements' or 'blocks' will help you the next time you look at some real-world code. This first step makes it easier to parse code as you read through it to understand what it's doing.
A basic building block of programming languages is to utilize a concept known as a variable, or a placeholder for more information. Think about your math classes; if you've been in any pre-algebra or algebra courses, you've used letters to hold the place of number values. In JavaScript, and other languages, we can do the same thing with variables. Instead of hardcoding a value in, we can use the placeholders below to store information; our program will keep up with it for us.
1const name = `Homer`; 2let age = 42; 3let mood = `Hungry Hungry`;
In front of the variables name, age, and mood, you'll notice two different keywords: const and let. These keywords allow us to declare a variable; it tells the compiler, or engine reading our JavaScript, "Hey! This next word is a variable; it's holding some other information."
We use const (short for constant) whenever the value will not change. Homer's name is his name; that's not changing. However, his age and mood will change at some point, so we use let for variables that are allowed to change.
If we want to modify the value that a variable represents, we don't have to redeclare it. We can simply set that variable equal to a new value.
1let age = 42; 2// a year passes 3age = 43;
We'll learn more about this in our lesson on data types, but there's other ways of modifying values represented by variables. Especially for arithmetic operations, we can do cool, dynamic things like this.
1let age = 42; 2age += 1; 3console.log(age); // would return 43
When we modify a variable's value like in the examples above, we're said to be assigning its value. The variable's name is always on the left-hand side while an expression, or a snippet that evaluates to a value, is on the right-hand side.
Likewise, when we call a function and utilize a variable, we're simply asking our program to go and find the value age represents and log that to the console.