Hello World
Every Course has a real starting point and this is it for us. We can't skip the tradition of a "hello world" sample. By the end of this lecture you will see JS in action, learn how to work with the SCRIPT tag and even get your first introduction to strings and functions.
Video Transcript
00:00So, as we go along, we're going to throw out a lot of unfamiliar words.
00:06Don't worry about them too much.
00:07Deliberately, I want to use the terminology that's fitting.
00:11And as we progress, we're going to unravel what those words are.
00:15But just make sure that you understand how to do what we're doing, even if you don't
00:19understand every small detail, because we want to get you right ahead into actually
00:23doing something.
00:24So, let's get started.
00:26And the most critical first step is we have to be inside of our HTML page.
00:31So jump along and go into your HTML page.
00:35And I'm just going to expand it a bit.
00:37So it's going to be a full screen.
00:39There we go.
00:41All right.
00:42So we have our full HTML page.
00:44Now, the first thing that I want to do is I want to add JavaScript.
00:48I want to add some code to my page.
00:50Right now it has no code.
00:52Now the way I add code, and I could put an HTML tag that's called script in any place
00:59in the document, I could put it in the head area, or I could put it right inside the body
01:04area.
01:05It doesn't really matter.
01:06And we're going to see the difference between when would you put it up there in the head?
01:10When would you put it inside of your body?
01:13But in general, all you have to do is just open up a tag and just type script.
01:19And you'll close your tag.
01:21Now if you're working with an editor that's a little bit more smart, such as the editor
01:26that I'm working with right now, which is called Sublime Text, it will help you automatically
01:31fill out characters of HTML.
01:35One of the things that it helps you fill out is this definition for our script tag
01:39that it will contain JavaScript.
01:41But really, because we're working in HTML5, we don't need that anymore.
01:45Just by saying script, it's obvious that it's JavaScript.
01:49That's the standard here on.
01:51So if we're working in HTML5, we don't have to actually define what language our script
01:55is, because by default, automatically, it's going to be JavaScript.
02:00So let's go ahead and create something.
02:02Let's do our first first code ever.
02:03And to do that, I'm going to use this the classic function, which is called alert.
02:09Now the alert function, and we're going to look at what functions are a little bit later
02:13on is basically an action.
02:16And anytime we want to create an action, we name the name of the action.
02:20And then we open and close a round bracket.
02:23Now if we did open and close a round bracket and just wrote the word alert, we're not actually
02:29triggering that action, we're just naming it.
02:33So in essence, if I go back into my browser and I click on refresh, nothing really, oh,
02:39I'm in the end item, let me go to our start one, and click on refresh, we'll see that
02:44nothing really is happening.
02:46Now the reason nothing is happening is because all we're doing is stating the function alert,
02:52but we're not actually saying, hey, alert, get alerted, start your alert.
02:58Now to get it to actually start the alert, we set the open and close bracket, which
03:02basically the round ones, which basically sells tell the browser, I want to call this function
03:08and actually trigger it.
03:10Now in the case of the alert, we have a mandatory parameter that we need to send into it.
03:16And that's going to be a string.
03:17Now any string value just like an HTML is surrounded with or a double quotation or a single quotation.
03:24And I could send your Hello, chapter one, and this is going to be our very, very first
03:30JavaScript.
03:31Now, if I save this, and I go back into my browser, and I click on refresh, we're going
03:37to see that we're going to get this Hello, chapter one, loading up immediately as soon
03:42as we load it.
03:43This is our alert box, which I'm sure you've seen online before.
03:47And I'll click on OK.
03:49And notice another something that this Hello happens before the page actually loaded.
03:54And notice how the page is now pending and waiting to continue loading until I actually
03:59complete this or complete continue showing our page until I actually trigger that OK button,
04:05which only then my page continues and fills out as it should.
04:10So what we've just seen here, and this is a hint towards our next lecture, which is going
04:15to be right ahead in the next lecture, which we're going to talk about where did you put
04:20your script and why is it important to know where you're putting your script and more
04:26accurately, by the end of the next lecture, you're going to know how to trigger an event
04:30or trigger a call to a function only when your page is done loading.
04:36Don't forget, when you're online, content is running as it's being loaded.
04:42And if you need to access something, for example, if we wanted to get this rabbit to animate,
04:47we really want to only ask it to animate once it's actually on the page.
04:51If we try to animate it before we actually loaded it, the browser will get stuck.
04:56You wouldn't know what to do.
04:57OK, so we'll see you in the next lecture where we're going to talk about how do we
05:01solve this problem of knowing when to load things.
05:04And just as a quick recap, let's look at our function just one more time.
05:09We'll see that we set our script tag and close it just like an HTML in general.
05:14We gave a name of a command, in our case was an alert command, and we opened and
05:19close a round bracket.
05:21And inside we send a parameter, which this is what it's called a parameter, which gave
05:27it the alert, the information it needed.
05:30And thus when we went and we sent hello chapter one as a string into this function,
05:36and we went into our browser and clicked on refresh, you'll see that the string itself
05:41has been echoed inside of our alert box.
05:44Now if this is a little bit new to you and a little bit unfamiliar, then do stop, don't
05:50watch the next video, but go and practice this.
05:53Jump into the source file, do it yourself, play with it a little bit, and see you in
05:58the next lecture.