5.2 Functions in a File - Video Tutorials & Practice Problems

<v Speaker>We saw in the last section</v> that we can define functions in the repel, but we also saw that it was a little bit cumbersome. So in this section, we'll use a file which is the normal way to define functions. And in fact, we'll return to our index file and to find a function on a live webpage. Let's fire up our text editor. (keyboard typing) Let's look at index and let's open it up too. Here we go we've got the alert. Hello World, happy Tuesday. It is Tuesday. Let's take a look at the source. So if we look at this code, we see that we've got a constant daysOfTheWeek then a now variable that's specific to this application. And then we've got dayName which is defined in terms of this constant. So what we can do is factor out the pieces that we might reasonably want to reuse into a function. In this case, we'll call it dayName. Instead of having it be a variable, we'll say dayName of an argument. In this case, we'll give it this variable now. And then we need to factor this dayName into a function. So instead of let dayName equal variable we'll say function dayName of well we called it with now but this is just any date. We're going to take in a date and return the name of the day corresponding to that date. So let's do this. (keyboard typing) So let's put the constant inside the curly braces like that. And now, instead of saying let dayName equal days of the week of now.getDay, we're gonna say return daysOftheWeek of date.getDay. So let's take a look at that. It still works. This is an improvement, but we can do even better by putting this dayName function in its own file. So let's do that. (keyboard typing) Let's call it day.js. We might wanna put something other than just the dayName in it. Could be a library of functions. For now it's just one. Open it up and do this here, cut this out, save it and paste it in, go back to index and I'm gonna run this here. So it's not working. And that really shouldn't be surprising because we just removed this dayName function. We can debug this by opening up the inspector and looking at the console. You can see, can't find variable dayName and that's because we removed it. So what we have to do is somehow include this day.js file into our index.html file. And the way to do that is with an extra script tag like this. (keyboard typing) Except instead of script just by itself, we're going to give it a source using SRC. Compare this to the way that you include an image, It's the same basic syntax, the name of the tag and then SRC equals and then the full path to the file. In this case, just day.js. (keyboard typing) And it doesn't have to have any content at all. Could do a closing tag there. All right let's take a look. Aha. It worked. We close down this here. Check one more time. Look at that. Hello world! Happy Tuesday It's important to note that this was just a silent error when we didn't include it. In fact we can demonstrate that the order matters. You do have to put it in first. If I put it in second, refresh, just a silent error. So this is the most common kind of error when writing JavaScript programs in a browser it'll just not work for no apparent reason so your first recourse should always be to fire up the inspector. Often times that'll tell you right away. Ah, oh, can't find variable dayName. I must not have included it in the right order. Aha there we go. Now it works. You can look in the text for some other suggestions on how to debug JavaScript applications. One common thing is to put in console.log statements or alert statements in order to trace the execution of the program. That'll help you identify where the problem is. And usually once you can find the problem, it's relatively easy to fix it as it was in this case.