Instructor: So over the next few lectures,
we are going to add a couple of dynamic effects to our page.
So things like making our mobile navigation work
and also some scrolling animations, for example.
And we will do all of that using JavaScript.
And so I think that right now it is a good idea
to give you a very, very short
and basic introduction to JavaScript,
which is, as I mentioned at the beginning of the course,
basically the programming language of the web.
All right.
And as always, we are starting a new section.
And so I will copy and then paste that here.
So duplicating this folder and this one
I'm gonna call it omni food optimizations because
in this section we will basically do some optimizations
before we then launch our page to the internet.
So section number 9
and therefore folder number 9 here as well.
And as always, you
of course don't have to create this new folder
so you can simply work
on the folder that you have been using.
But what you need to do is to get to your starter files
and then here in the starter folder, select this one here
and then copy the script.
So this file here called script dot js, copy that
and then paste that into your current project folder.
So right here, and actually let's create a folder here
which I'm gonna call JS, which stands for JavaScript.
And so all our scripts will go into this folder.
So here we already have this starter script
because some of the code is already written, all right.
And this one is typically called script dot js
where JS stands again for the extension of JavaScript.
Okay. And so I will take that folder and push it here
onto this icon.
And let's click on go live.
And so what then here, this should be back to working.
Now we can go out of this mode here by clicking again
toggle device bar.
And so we are back to normal here now, okay.
So we have our HTML of course,
and our JavaScript, and for now
we will not need the CSS files.
So let's just close this, and now we will work a little bit
here in this file.
Now actually, before doing that, we need
to connect this script here.
So this JavaScript file with our index dot html.
So JavaScript can be written in many different places,
so we could also write the JavaScript right here
in the HTML file.
But just like we did with CSS
we prefer to do that in another external file,
and then simply link these together.
Now, the way we link them is
by using the script tag here after these other two scripts.
So script tend to defer keyword
and it's not really important what this one does.
And then the source is, or JavaScript folder
and then script dot js in there.
All right?
So save that, and then here
give it some space and write console dot log
hello world.
Now the rest of the script here might look different
in your case, so there might be a little bit more code
but in case that it is, don't worry.
That just means that you have the updated version.
All right?
But anyway, make sure to write this code here
and then go back to the browser.
And now for the first time
we will use this console tab right here.
So click that, and indeed now we get hello world
which is exactly what we wrote in our JavaScript.
Great. So that means that our HTML file
and the JavaScript file are now connected.
Now this console dot lock here is simply a way that we have
of writing content
into that browser console that we just saw.
So basically this area here.
And so that is a very useful way
for us to test out some of our code.
But now let's write just a little bit more JavaScript.
Now, my goal here is actually not
for you to understand JavaScript.
So this is an HTML
and CSS course and not a JavaScript course.
So this part here of the section can kind of be seen
as a bonus.
And so here, again, the goal is not really for me to
teach you exactly how JavaScript works.
So I have a whole big course for that if you're interested
in learning JavaScript.
But here it is not the place for that.
So here instead I will just write some code
and we'll walk you through how that code works so
that you can then eventually adapt it to your own sites.
However, just in order for you to understand even the basics
of what I'm gonna write in the next few lectures.
Here, I will just give you a very short introduction
to JavaScript.
And let's start with variables.
So we can define variables using the "const" keyword,
and then we give them a name, for example, my name
and then here we define a value for them.
So let's say "Jonas Schmedtmann" here.
All right?
And so basically the variable is my name
and we can see a variable
like a box that can store some value in it.
And so the value here is this text of "Jonas Schmedtmann",
but it could also be a number or some other kind of data.
And then we could also lock that data to the console again
just like we did here.
So just so we can actually take a look at the variable.
So here we defined the variable
and then here we can reference that.
So we can use it,
and then it will print Jonas Schmedtmann here
to our console, right.
Now, another thing that we can do
and let's again create a variable here.
So H 1,
and so now we can select elements from our HTML page
just like we can select them in CSS.
So basically using the exact same selectors just
as we write them in CSS.
So to do that, we write document dot query selector,
in case we only have one element,
and then here we can define a string;
which is basically some text.
So anything that is
between these quotes here or double quotes.
And then we can just for the H 1 element
here selected using the class selector
of heading primary.
All right.
So just like we did in our CSS.
All right.
So, exactly this selector here.
Okay. So that's what we can do right here in JavaScript.
And so let's also lock that to the console.
So just so we see what happens.
So you see that now it shows us here
this H 1 element with the class of heading primary.
And then when we hover over it here
you see that it even selected basically here
on the page so it gets highlighted, right.
Okay. However, all of that is not really helpful
because we didn't do anything yet that would actually
be visible on the page.
But, let's do that now.
So we can take our H 1,
which remember is this heading element.
So with the class of heading primary
and then we can say dot text content,
and we can then set that, for example, to my name
which will then be replaced here with Jonas Schmedtmann,
right.
Because this, my name here is
of course a variable which has this value.
And so let's see
And indeed now it got replaced with Jonas Schmedtmann.
And as we hover it now, it will of course still select it
but now the text content is different.
All right. What we can also do is to manipulate the CSS.
So for that we can write H 1 dot style.
And then for example
let's say we wanted to change the background color.
Now in CSS, background color is written
with a hyphen like this, right.
However, that is not valid in JavaScript.
And so all the property names that have two words
they use this notation here instead.
So without the dash
and making then the second word upper case, then equal,
and then here we can define devalue.
So again, just like in CSS.
And then indeed the background turned red
and you see down here that the way this happened was
that JavaScript added this style tag here.
So the style attribute, and then edit or style in there.
So remember from way, way back that one
of the ways in which we can write JavaScript is
by adding it directly to the elements using the style tag.
And so this is what JavaScript does here.
Let's try another one, H 1 dot style dot, let's say padding,
and let's say 5 REM, for example.
And indeed that works as well.
Okay, nice.
However, that is still not really that helpful
because we could simply define these styles here also
in our CSS, right.
So let's actually make it
so that these dials only get applied
once we actually click here on the setting. All right.
So that in itself is also not such a useful effect, but
at least it is something that we cannot do with CSS alone.
So that's kind of a dynamic effect already.
Now in JavaScript,
we can respond to an event like a click by
basically listening for that event on a certain element.
So in this case
we want something to happen when we click on the H 1
and so we can listen for the click event on that H 1.
So we do that by saying H 1 dot add event listener,
and now this is something that we call a function
and that's not really important.
So this one here is also a function,
and we can see that because of these parenthesis here.
So functions are basically reusable pieces of codes
that we can define somewhere else and then use them.
So this ad event listener is another case of that.
And if all of that sounds confusing, then again
don't worry about that because this is not really
about you learning how JavaScript actually works.
For that, I have a whole big course
but of course you don't need to take that.
But anyway, here we want to listen for the click event,
and when that happens,
we of course want something to happen.
So we want these three lines
of code here to execute in that situation.
So the way we do that is by here
creating a function ourselves,
so a function
and then giving it a function body.
So that's here, this block between these curly braces
and then I will grab this code and put it here.
Okay, so here we created a function
which again is basically a block of code.
And so this block
of code will be executed whenever we click on the H 1.
Okay. So I hope that makes sense.
So let's try it out.
So I'm gonna click now and beautiful.
So that worked just nice.
Okay, so those were just a couple
of toy examples just to show you some
of the fundamentals of JavaScript.
But now let's actually do something that is helpful.
So I'm gonna go all the way down here
and here we have the current year basically
which right now is of course not 2027.
So I just put that here as a placeholder.
But usually on our own webpages
we always want to have the year there
and then we want to keep it up
to date so that the user basically sees
that our website is not like super old.
So one way of keeping this year updated is
to every year on the January 1st
open up your site code and then change that manually.
But the second option is way better because it's automatic.
And so that is
by simply using JavaScript to do that job for us.
So let's do that.
And so we basically now want to again, change the text
content of some element.
So just like we did here.
So that element is here in the footer.
Let's go there.
So right here.
So this year, this is all we want to change.
So we don't want to change the entire text content
of the copyright paragraph, but only this one here.
Well then let's create an element just
for the year, so span
and then I will give it the class of year.
So 2027,
and of course it could be any other placeholder
because now we will replace this with JavaScript.
So the class is year, and so therefore
in order to now select this
we do just like before, so let's say year
and then I like to call these actual HTML elements, E L.
So adding that value there.
So that's again, document dot query selector,
and then again the quotes,
and then we can just write the very normal selector.
Okay. And now we can of course change the text content
of this element.
So year L dot text content,
let's say 3000 just for now,
just so we see that we successfully selected our element.
And yeah, so now it's 3000,
but that is still not
ideal obviously.
But now the power of JavaScript comes into play
because here we can very simply get the current year.
So let's do that also here, creating a new variable
for a new value.
So let's call that current year,
and so here is the trick of getting the current year.
So we say new date, then we open and close parenthesis
which means that this is a function.
And so all of this year will basically generate
the current date.
All right. So this is the current date;
and then on that we can say get full year
and then again, open and close parenthesis.
So don't forget these.
Okay.
Then we can also lock this to the console,
but while we can also just put it directly here.
All right.
That indeed, it is right now 2021, by the time I'm
recording this video.
And so therefore here we got 2021
and the same thing down here also in the console.
Nice. So just in our very first lecture on JavaScript
we already did something helpful.
So this is very useful.
So a nice trick, even
if you don't learn anything else about JavaScript
just make sure to include while these 3 lines
of code here in some JavaScript.
All right.
Now this one here, we do not need.
So we can comment all that out just like in the other files
by simply hitting comment or control slash
and so then it's all gone.
And while this code here doesn't do any harm
so we can just leave it like this.
All right.
And that's actually it for this very,
very short crash course,
let's say into JavaScript.
But I hope you still had some fun here
and that maybe you find JavaScript
a little bit more interesting now.