1.2 JS in a Web Browser - Video Tutorials & Practice Problems

<v Instructor>I've mentioned previously</v> that JavaScript is increasingly used as a general purpose programming language but its primary use is still in webpages so we're gonna get started by writing hello world in a web browser using JavaScript. So it will start off by making a directory for this tutorial. I suggest using a repos directory. I have a directory for anything that has a get repository associated with it is in my repost directory. And then lets call it JS_tutorial and this -P in case it's not familiar it just creates intermediate directories. It's necessary so if you don't have a repos directory, it'll create it but I do have one. CD into it and let's start off with index.HTML. This is our index file. And now that we have a directory that isn't empty because we have this index file, we can initialize a git repository. You can't actually initialize an empty directory as a git repo, but you can, now that we have this even this empty index file is enough. So git in it. Git add -A you can also do git add dot for the current directory. Git commit with the message initialize repository. If these steps don't look familiar then I suggest taking a look at, Learn Enough Git to Be Dangerous, at least through a few chapters just to make sure that you've got the basics of git going because we will be relying on git knowledge not only for tracking changes in the project but also for deploying as we'll see in just a moment. But let's get started now with our HTML. I'm gonna use atom in this tutorial as the text editor. So here it is and let's start off with a skeleton. So atom lets you use a tab, trigger their HTML tab and I don't need this part here but I do want the other things. The title of our page will be Learn Enough JavaScript. By the way, the misspelling JavaScript with the lowercase S is really common to the point where it's almost acceptable but it is technically wrong so I'm gonna stick with the capital S. And in the body, let's say, this is a hello world page. So hello world. And then, so this page includes an alert written in JavaScript. It doesn't actually yet, but let's take a look at it just to make sure things are working. I like to make sure things are working pretty much at every step of the way. So let's open this thing. This is the sort of thing that is system dependent. You might have to double click on the index file but in macOS I can just type open index HTML. And there we are. Hello world. And you can see this is a little lie. We're saying this page includes an alert but it in fact does not so let's add one. This will be our first JavaScript. We'll learn later on in this tutorial, how to put JavaScript into its own file and then include it into a webpage but in fact, we can include raw JavaScript in the head area here using the script tag. By the way, you might also have noticed that this little meta tag here is in the opposite order in this generated HTML tab trigger than it is in the book. This is the sort of thing that really doesn't matter. So it's important to get to the point where you can see these little discrepancies as part of technical sophistication and just recognize that it doesn't really matter. Sometimes things are order dependent, but this one is not but I'll change it up there just to sync them up before adding in the script. So here we've got script type equals text JavaScript. This is kind of an older style that's actually not required anymore so I'm just gonna get rid of that and say inside these script tags, I'm gonna put an alert. So this is a call to a JavaScript function. We'll learn a lot more about functions throughout the rest of this tutorial, but for now we can just look at a defect. So we use the name of the command alert and then in parenthesis, we're going to put the thing that we want to have appear in the alert, and we'll put it in double quotes. This is a string. We'll be learning more about strings in the next chapter. Hello world. And then we'll end with a semicolon. You can actually get away with leaving off these semicolons for the most part, but they're a good practice. There are some situations where it matters and I'm actually not even really sure exactly when, but for the sake of consistency in this tutorial we'll always end every JavaScript statement with the semicolon like that. So let's save that and refresh the page. And see what happens. Look at that hello world. So this is being generated dynamically by JavaScript so we just refresh this page and boom we've got an alert that appeared as the result of this script we just added. Believe it or now we're now ready to deploy this. If you followed, learn enough git to be dangerous, learn enough HTML to be dangerous or learn enough CSS and layout to be dangerous. You'll be familiar with GitHub pages. So by putting this project under version control with git we've actually laid the foundation for deploying it to the live web. We can look at the status. We can see we've made some changes to index.html let's commit them with a message. Add a JavaScript, hello world. And now we need to set up a remote repo. So here we are at GitHub, I'm gonna call this JS tutorial video because I already have a repo called JS tutorial. I suggest using this, but you can see that mine is already taken because I created one as the result of writing the tutorial so now that we're doing the videos, I'll do this but I suggest that you just do JS tutorial. So I can just put whatever you want in there. Okay, so here we go. Let's create the repository and I'm just gonna copy this 'cause I've already got a repo. And then we can set up GitHub pages by going to the settings. Let's see, where is it? Settings and then GItHub pages. Here it is, we can say serve it off the master branch, save. And there we go. So let's take a look. The page is at username.github.io/the name of the repo. So let's do that. And there we go. Hello world. Now you can see actually the HTML hasn't loaded yet so the alert came in first and then if I close this, the webpage should appear. There it is and if I refresh it we'll get the same behavior we got locally. There it is look at that. So this is a live webpage. This is a real live JavaScript web application, a very simple one, but this is a huge step forward. This is the sort of thing that used to be extremely hard to do but now deploying a live website is the kind of thing you can do in just a couple minutes.