Signed in as
- Sign out
You're seeing this because you're a teacher 🤓
🎯 Your main goal for this lesson
Especially if it's a student's first time in a CS course, they probably haven't thought much about how computers do things. A good baseline for this lesson is helping students to understand that when we're writing code, we're writing instructions for the computer. If we don't write them in a way they can understand them, they're not going to do what we want.
🧠Things to keep in mind when teaching
This is meant to be a light lesson. Students have had a lot thrown at them over the past several days. it's okay to give them some time to sandbox and play around with the new skills they've learned!
🚀 Lesson Plan
Activity One: 30 minutes
Have students pair up with a partner. Have each student in the pair write a 'guide' for how to get from the classroom to another part of the school. After ten minutes, have the partners switch their guides; each partner should now have the other's guide. Upon receiving the guide, the partner should attempt to follow the instructions literally to get from point a to point b.
After each partner has attempted to follow the guide, debrief as a pair and see what went well and what didn't. Then, as a class, come together and discuss.
Again, the biggest goal here is to help students understand the literal nature of programming languages: if you're off, even by a little, the computer isn't going to be forgiving!
Activity Two: 20 minutes
Work through the lesson's content with students. Give them time to experiment with manipulating the DOM.
Activity Three: 10 minutes
Take the formative assessment and work towards mastery.
Logic with JavaScript
By the end of this lesson, you'll be able to...
- Recognize the use of JavaScript in a webpage.
- Distinguish between static and dynamic content on a webpage.
- Arrange a concept of a webpage that contains dynamic components.
A Disclaimer
As with our other lessons in this unit, it's vital to understand that we're barely scratching the surface. By the end of today, will you know enough JavaScript to build out the next great web app? No.
We're looking to get a basic understand of what JavaScript is, how it works on a webpage, and why developers use it.
Getting JavaScript into our Page
The great thing is...JavaScript is really already a part of our page. In the early days of the web, the DOM and JavaScript were nearly one in the same. JavaScript developed as an early implementation of a way to interact with the DOM. In development lexicon, we refer to this as the API, or application programming interface. Essentially, APIs allow programs to interact with data and other programs. We will use APIs...tons.
That being said, bringing JavaScript into our page works in a similar way to importing CSS.
- As with CSS, we can import an external JavaScript file. This is handy because it keeps our code clean; we don't have to worry about gigantic blocks of a programming language adding lines to our HTML and making it harder to read.
- Alternatively, we can use a
<script>tag to write a block of code inside our HTML file. This is handy for smaller uses, but generally not recommended for larger blocks of code.
1<html> 2 <head> 3 <title>Hello, World!</title> 4 <!-- We can import JS inside the head element --> 5 <script type="text/javascript" src="./js/script.js"></script> 6 </head> 7 <body> 8 <h1 id="greeting">Hello, World!</h1> 9 </body> 10 <script type="text/javascript"> 11 // We can write JavaScript inside a script tag 12 </script> 13</html>
Accessing the DOM
If we want to access information on the page, we use the DOM to 'crawl' the different nodes and objects. The base object for the entire page is called the document. JavaScript, and many other programming languages, work based on taking an object and orienting a system of methods around them. Objects are pieces of data and methods are the different actions that can be performed on them.
You'll see a syntax used called dot-notation that allows us to take an object and call an available method on it. In the example below, we're using the document object and calling the getElementById method on it. We'll then get more specific by asking for the value property of the object.
1<html> 2 <head> 3 <title>Hello, World!</title> 4 </head> 5 <body> 6 <h1 id="greeting">Hello, World!</h1> 7 </body> 8 <script type="text/javascript"> 9 // Calling the `getElementById` method on the document object 10 // and passing in the id of the element we want as an argument 11 document.getElementById("greeting").value; // This will return a value of `Hello, World!` 12 </script> 13</html>
To translate this into everyday language, we're taking the entire DOM (document) and asking it to give us an element by its id attribute. We can pass arguments into methods so that only certain data is returned. The argument we're passing into this method is greeting. So, what we're saying is, "Hey, DOM - give me back the value of an element whose id is greeting."
Manipulating DOM Elements
We can use JavaScript not only to access information from the DOM, but also to manipulate it. By setting an element equal to a new value, we can change the data that's rendered on the page.
1<html> 2 <head> 3 <title>Hello, World!</title> 4 </head> 5 <body> 6 <h1 id="greeting"></h1> 7 </body> 8 <script type="text/javascript"> 9 // While the HTML is empty for `greeting`, we're setting the textContent value here 10 document.getElementById("greeting").textContent = `Hello, Homer!`; 11 </script> 12</html>
Use-cases
JavaScript can be utilized for a number of different tasks and features. However, the fact that we can manipulate elements within the DOM makes it a great use-case for creating dynamic, rich content built specific to each user.
More to Come...
Like we said, this is just a taste! In a few weeks we'll spend a lot more time dedicated to getting more comfortable and more proficient with JavaScript and interacting with the DOM. Eventually, you'll be writing apps that utilize JavaScript to bring in resources from outside APIs.
Assignments:
Your teacher may elect to give you this assignment in conjunction with this lesson or at a different time. Pay attention to your teacher's instructions for how/when to complete this assignment!Basic JS