We are now ready to write a first bit of JavaScript. So I have a simple web page simply has some text and then an image. And then behind it, I have sublime open. This is where I'm going to be doing the writing of JavaScript. So this web page, as you can see, right here is the HTML for it, very simple. Not much to it, have a little bit of CSS associated with it, and then an image.
And that's all there is to it. To begin writing some JavaScript for this web page, we need to add a script tag. So I'm going to go down here to the bottom of the body tag. And in sublime, I can simply type script, press tab, it will automatically insert a script tag for me so I don't have to write the whole thing out now. With html5, the type attribute is no longer required. So if you don't want to put that in, you don't have to.
Now technically, I could go ahead and write all the JavaScript code in between the opening and closing tag of the script tag, I just write the JavaScript code there. However, better practice is to include JavaScript in a separate file, just like I did with the CSS. So having the HTML in one file, the CSS in another file, and then the JavaScript in a third file. So in order for that to work, we need to simply use the script tag to link to that file. So I'm going to enter the src attribute for source. And I'm going to link to App j s, which I have not created yet.
I have not created that, that file yet. So let's do that. Next. sublime allows me to right click and create a new file. And then I'm going to save that file and call it app dot j s. So here's my app.js file. As you can see, we already link to it in the HTML file.
This is going to allow me to now enter JavaScript code into app dot j s. Then when this HTML page opens, and it loads this JavaScript file here, it will execute the JavaScript that is contained within this file. That's how the browser will handle the JavaScript. So let's just do something simple. Now, you may not understand everything I'm entering. Yep, that's okay. You can follow along and enter the same thing.
First, I'm going to declare a variable and I do that with the var keyword. I'm going to name the variable name variable is simply a container that holds information. The information I'm going to put in that container is my name. And I do that with the equal sign. That's the assignment operator. And so it's assigning this text to this variable.
So we have one statement in our JavaScript file. Now let's do one more statement, and we'll see how it affects HTML file. I'm gonna do document dot write command. We'll talk a little bit more about how you work with documents in the section on the DOM. But right now, I'm just going to have this print out. Welcome, space, and then we concatenate the variable.
And then I'm gonna concatenate again. an exclamation point. And that's really all I'm going to enter there. So the, the plus symbol is an operator for concatenation when it's used with with text. So it's going to put this text together and display it on this on the screen. document dot write document refers to the HTML file.
And right is a method that indicates right this data to the HTML file. This is not a command that we use very often in JavaScript. But as we're getting started, I just wanted to use it to to show how we can get some output with JavaScript. Now I'll go ahead and save this app.js file. I already have my HTML file open in the browser. So I'm going to go back to the browser and I'll simply refresh it.
And as you can see down here towards the bottom, it does the document dot write and it prints out welcome Steven. So we just entered a Little bit of basic JavaScript. In the next section, we're going to talk about console dot log. Console dot log is a way to get output or even to test JavaScript without having to write out to an HTML page.