Jonas: Let's now actually write our very first line
of JavaScript code.
And here I am, in my text editor Brackets
that we just set up in the last lecture.
And I hope that you already downloaded
the starter files from the course.
I already have them here on my desktop.
So it's in this folder here.
And you see that here that I have the index.html file.
Okay?
And so going back to the Brackets text editor,
all we have to do, in order to start a new project
is to hit this button here and then click Open Folder
and so the folder that I want as my project folder
is this one here, okay?
And so now all I have to do is to hit Open
and so this is now the project folder
and it opened here this main, this index.html file.
So you see that this is here just a very bare bones
HTML structure without any JavaScript in it at this point.
Okay?
And so let's now actually add some.
Now, there are two ways
in which we can add JavaScript to a website.
And the first way is with inline scripts,
and the second one is to add an external JavaScript file
in which we can then add all of our JavaScript code.
And let's start with the inline script, okay?
So all we have to do is to write script,
give it some space
and then in here
we can write our very first line of JavaScript.
And what we're gonna do now
is to simply print
to the JavaScript developer console some text, okay?
And so all we have to do is to write console.log()
and then some text.
And we will write hello world.
And this is kind of a standard text
that we print out
whenever we are learning a new language
or like starting a new app or something like that, okay?
So, hello world, you will see this here all the time
when you search for tutorials on the web or something, okay?
And then to finish the line
we always have to add a semicolon like this.
And today this our very first line of JavaScript code here.
So nothing really fancy.
All it does is to log to the developer console
this hello world text, okay?
Then we give it a save and open it up in the browser.
I have installed a Brackets plug-in
to automatically save the file
whenever I leave the app
and that's called Autosave.
And so I don't always have to save the file manually, okay?
So I'm gonna leave now here
and then open up this folder, double-click the file
and then it's going to open it right in the browser.
So on the left side in our code editor
we write our code, of course,
and then in the browser on the right side
we will have our results.
And to actually see these results
we have to open up our JavaScript developer console.
And you can do that by hitting Command + Option + J,
or Control + Option + J on your keyboard.
It's a shortcut like this,
or you can also right-click, hit Inspect,
and then come to the console like this.
And here you see that we already have
our hello world printed to the developer console.
And you see on this side
the edit come from index.html on line 13.
So exactly this line that we have here.
So great, it works.
So again, nothing really fancy here.
All we do is to log some text to the console.
And that's what we're going to do here
throughout the sections.
So we're gonna log some texts all the time to the console
because we're not really doing anything
here in the browser itself so no real website.
Because that's something
that we're gonna take care of later.
For now, we are just really learning the JavaScript language
and so logging some values here to the developer console
is perfect for that kind of application.
Okay, so this is how we do inline scripts here.
Now let's learn how to add an external script to our site.
Okay?
So, first off, of course, we create a new file.
And I'm calling it script.js, okay?
And now let's actually add the same code here.
So console.log() and then hello world again.
And now I'm using three of these exclamation marks here
just so that it's a different kind of text here
than before, okay?
Than back in our index.html file
we can now, of course, delete this code here.
We leave the script because we still need it.
But now what we do is to define the source attribute.
So we write source, and then script.js, okay?
And so now, our script file
and our html file are linked through this.
Now, if the script was like in another folder,
like for example called, JavaScript or js,
then we would have to write like js/script.js,
but that is not the case here
and so let's get rid of that.
And so that's already all we have to do
to add an external script to our website like this.
So let's come back here reload.
And now we have hello world again
but with our three exclamation points
and then you also see that it comes from
script.js on line one now.
And so that's exactly this text that we have here, okay?
And from now on we will use this script.js file here
because it's always best to have the code
in an external file.
So the advantage of the inline script that we had before
is that we don't have to load an additional file,
but it's still better to have everything in an external file
because it allows us to nicely keep
the HTML at the JavaScript separated in different files.
Okay?
And so that's what we're going to do
throughout the rest of the course.
Okay, and that's already it for this lecture.
So you learned the difference between
inline and external scripts.
And you wrote your very first line of JavaScript
where we logged this text here to the console.
And with that being said
let's now move on together to the next lecture
where you will learn what JavaScript actually is.
So, see you there in a second.