Now if we console.log this outside of our if block, we're going to notice something strange happen or maybe not strange happen when we load this in our browser. We're going to see that x is equal to 4. So just because our x is being created here inside of an if block, it changes the global value of x. So if I change var to let, here on line nine, if I save this and I check this out in my browser, we're going to see that the value of x is 10.
This just means that in the global scope, so outside of our if block, the value of x is 10. If we were to console.log this inside of our if block, the value of x is going to be 4. Let also helps us deal with some real world problems that arise from block scoping. For example, we're going to create some code here that's going to render 45 divs onto the page using a for loop. In our project, maybe these could be spaces on a game board or images on a grid, and we want to be able to take a look at their value.
So first we need to set up our HTML and our CSS. So to do that, I'm going to scrap our script tag here. And we're going to add a header. Inside of our header, we'll use an h1 that will say Click on a box. Now beneath the header, I'm going to create a section that will remain empty and will be populated by our script tag in a minute. The next thing that I want to do here is I want to create a style tag.
I'm going to create some simple styles for these new divs that are being created. So we'll say section > div. So any divs underneath the section should have a height of 100 pixels, should have a width of 100 pixels, should have a background color of red, should have a float to the left, a margin of three pixels to add a little bit of spacing, and then finally, we'll add a cursor of pointer for good measure so that we will know to click on that.
We want to create a div which we'll do with document.create element. And we'll pass in the name of the tag. We then want to add a click handler to this div, div.onClick. And this is going to be set equal to a function that's going to give us an alert each time we go and click on a box. So it will say, "you clicked "on a box #" and we'll concatenate this with whatever i is, so whatever position we're at in that index.
Finally, outside of our div.onClick we want to use document.GetElements ByTagname. So this is going to help us handle where we're going to put these divs. We want to put them within the first section, and we want to appendChild div. So we'll just pass in the name of that variable. So there we go. If we save this and we run this, we're going to see that we have all of these boxes.
- What is ECMAScript?
- Transpiling ECMAScript with Babel and Babel-node
- Using the let and const keywords
- Creating strings with template strings
- Enhancing object literals
- Working with ES6 classes and class inheritance
Skill Level Intermediate
Q: The Babel API is out of date. How do I proceed with the course?
A: We are updating the course. In the meantime, you can install the babel-cli package and then install the presets that you need to follow along with the tutorials.