Original subtitles

So over the next few lectures,

we are going to add

a couple of dynamic effects to our page.

So things like making or 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 OmniFood Optimizations

because in this section

we will basically do some optimizations

before we then launch our page to the internet.

So section number nine

and therefore folder number nine 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.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 to starter script

because some of the code is already written, now right?

And this one is typically called script.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 (indistinct),

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.

Okay.

So we have our HTML of course

and or 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 the script here.

So this JavaScript file with our index.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 then the defer keyword

and it's not really important what this one does.

And then the source is or JavaScript folder

and then script.js in there.

All right. So save that.

And then here give it some space

and write console.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.log 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 is not the place for that.

So here instead,

I will just write some code

and will 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 define 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 h1 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.querySelector,

in case we only have one element,

and then here we can define a string,

which is basically some texts,

so anything that is between these quotes here

or double quotes.

And then we can just for the h1 element here

select it using the class selector of heading

primary.

All right.

So just like we did in our CSS.

Right.

So, exactly this selector here.

Okay.

So that's what we can do right here in JavaScript.

And so that's also log that to the console

so just so we see what happens.

So you see that now it shows us here

it is h1 element with the class of heading primary

and then when we hover over it here,

you see that it even selects 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 h1,

which remember is this heading element,

so with the class of heading primary.

And then we can say .textContent

and we can then set that, for example, to myName,

which will then be replaced here

with Jonas Schemdtmann, 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 h1.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 the second word uppercase,

then equal and then here we can define the value,

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 edit 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, h1.style.

let's say padding

and let's say 5rem 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 styles only get applied

once we actually click here on this heading.

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 h1.

And so we can listen for the click event on that h1.

So we do that by saying h1.addEventListener,

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 code

that we can define somewhere else

and then use them

and so this addEventListener

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 h1.

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 (indistinct) 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 web pages,

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, EL,

so adding that value there.

So that's again, document.querySelector,

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 EL.textContent,

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 here

we'll 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 this.

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 nice trick,

even if you don't learn anything else about JavaScript,

just make sure to include

well these three 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.