Using JavaScript in Websites

Additional Suggestions and Q&A

Using JavaScript in Websites

Check out a free preview of the full Using JavaScript in Websites course

The "Additional Suggestions and Q&A" Lesson is part of the full, Using JavaScript in Websites course featured in this preview video. Here's what you'd learn in this lesson:

Brian offers additional suggestions for the Dog App, discusses semicolon usage, and answers a question about setting styles using JavaScript.

Preview
Close

Transcript from the "Additional Suggestions and Q&A" Lesson

[00:00:00]
>> Brian Holt: That's the product here. So hopefully, you kinda got to this point and what you should do after this is you should go style this and make it look nice. Again, the one that I had looks like this.
>> Brian Holt: Looks a little bit nicer, it has a nice header.

[00:00:18]
And I put the select up here in the header, so. Kind of sky's the limit there for whatever you want to do with it.
>> Brian Holt: Yeah.
>> Speaker 2: So I'm still unclear about when to put the semicolon in JavaScript because it looks like you, so you put it after every expression, but not after a function.

[00:00:40]
So if you scroll up, what is that semi colon ending?
>> Brian Holt: Which one?
>> Speaker 2: The event listener, the one on line 59.
>> Brian Holt: So it's ending at event listener right there. So you can see it matches to that parentheses. You can see how they're both highlighted.
>> Speaker 2: So do you need that after every event listener?

[00:01:00]
>> Brian Holt: You don't ever really need it. So colons are technically optional in JavaScript. And you'll see, I'm sure there's some time in here that I didn't write it that I probably should have, like this one, right? I should have written on that one, but I didn't.
>> Speaker 2: But it doesn't matter.

[00:01:19]
>> Brian Holt: But it doesn't matter.
>> Speaker 2: Okay.
>> Brian Holt: So different people have different stances on whether or not they want, how they feel about semicolons. And I just don't care. I actually have a tool here that's called prettier, you can see it down here, in the bottom right of my screen, I turned it off for this workshop.

[00:01:40]
But it actually reformats my code every single time I saves, and it inserts all the semi-colons for me.
>> Speaker 2: But it won't break anything if you missed that semicolon or the one after data.message
>> Brian Holt: So there's one kind of quarter case where it can mess you up. It's really weird.

[00:02:01]
So if I had const x = something, and this was some sort of function call and I left off the semicolon here. And then on the next line I wanted to do something like 1,2,3.map.
>> Brian Holt: Then this takes some number and doubles it or something like that.
>> Brian Holt: Technically, in this case, this is ambiguous.

[00:02:36]
This not something you ever really have to care about. Because if this goes back to the next line, this could be accessing an array of whatever something returns.
>> Brian Holt: So it doesn't know whether not this expression continues or whether not it stops. So in this case, you have to put a semicolon to disambiguate if that's not actually what you meant.

[00:02:58]
>> Speaker 2: But if you're ending a function with a bracket or a parentheses you don't necessarily need one.
>> Brian Holt: No, this is the only case that it's gonna mess you up. And what people will do is they'll actually put the semicolon there, people that don't like writing semicolons. Again, you don't normally have to write code.

[00:03:21]
This is just trivia.
>> Speaker 2: So if we did use the image.style.display, how would we turn it back on after you change it to none?
>> Brian Holt: So,
>> Brian Holt: style.display = 'none', right? Then down here where I have show, just turn it to block.
>> Speaker 2: Okay.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now