All right, welcome back.
Let's talk about JavaScript syntax, and that is how we write JavaScript, how it looks when we write
it.
So I have this code open here.
Just go to file new file and then file save as and I save mine as indexed HTML.
Now and here at the bottom, right mind goes to a Django template by default years, probably go straight
to an e-mail file and I'm going to use an image abbreviation here.
I'm going to type HTML Kulin five.
You see this Amiotte abbreviation in code.
Go ahead, slam that tab key and that's going to print out all this junk for you.
Now, we learned about this in HTML and CSC.
If you're unfamiliar with what this is, it's probably time to go back to H.M.S. as one to one a.m.
one one six one two one.
We talk about this quite a bit.
So JavaScript syntax, there's two places actually.
There's three places we can write JavaScript one is in the head and using the script tag.
And then we can write some stuff in here.
Or we can take this whole thing, copy it and throw it inside of the body.
Now there's two places inside the body we can put it, we can put it either at the top, somewhere in
the middle or near the bottom.
And the best place is always just above this closing body tag.
Now, we put that in here at the very bottom and not up here, because our page is going to load from
top to bottom.
So it's going to say line one, OK, it's a female line to H.M. English is the language.
Line three is ahead node.
And inside of this node, we have a meta node, another matter node, a title node and a script node.
Now, if this script is referencing any of the elements that could be in the body and it gets loaded
before the body does, which is rare, but it can happen, then it might not work the way you expect
it to work.
So let's get rid of that.
And let's say there's a bunch of e-mail in here, blah, blah, blah, blah, blah.
This looks terrible, but let's pretend that we wrote some good e-mail in there and then so your browser
goes, OK, load this side, load the state of grid, load the side of this data grid, close.
That's odd, yada, yada, yada.
Then at the very end we've got a script and then maybe that JavaScript is accessing this a site.
Well, this has now loaded because programs load things from top to bottom.
It's already loaded.
So we put it down here to make sure that our document object model has been as loaded as humanly possible.
Let's go ahead.
Get rid of that.
Clean that up.
And let's talk about what we can put in here, so there's two ways to do this we can do and SC and we
could say JavaScript Dot James, and this is just like in CSS, when we link access file to an HTML
file, we are linking a JavaScript file to this HTML file.
And so JavaScript OJARS needs to be an external file in the same folder as as indexed HTML.
So that's one option and we can use an external file for that or we can write internal JavaScript and
we can just write it in here.
Now, in here there are a couple of rules.
No HTML.
I see this all the time.
Do not write HTML between your script tags, no html.
There's no access whatsoever.
Do not write HTML inside of your script tag.
I see this a lot as well.
People think if I write a Schmalensee assassin here that JavaScript is just going to pick up on it and
it's going to work.
No JavaScript has its own programming language.
Everything between this opening tag and this closing tag needs to be pure JavaScript, not each HTML
nexus, not Python, nothing else, just JavaScript.
In here, we can have things like variables, conditions, functions, and a few bits and bobs in between
like intervals, iterative syntax.
So let's take a look quickly at what a lot of these look like.
Now, this is going to go really fast.
Don't feel any pressure to memorize this at the moment.
Each one of these concepts is going to have its own video or series of video.
So what I'm about to write don't feel like you need to memorize this.
Don't feel overwhelmed.
Just know that I'm going really fast and it's OK.
In the next few lessons, we're going to learn about all of this stuff.
So we can declare a variable with VA, VA is equal to name, and that name is equal to Caleb.
This is a variable.
We can also say if as a conditional if that name is equal to.
We can say.
Hello, teacher.
We could also say hello.
Follow me on instr at coding dot for dot, everybody.
And that's just where I post a bunch of tips and tricks for web development, such as JavaScript.
Let's go ahead and throw a semicolon at the end of each of those.
So that's a conditional we can do a function so we can write function.
Greeting.
Name, that's a parameter.
Return.
Name.
Welcome to the world of JavaScript.
And that's a function, and then we can execute that function.
I'll just throw that up so you can see that I'll just execute that function as greeting or let's not
call a greeting.
Let's call it a new function consed.
So this cannot change.
This is a different type of variable.
We'll talk about this as well.
Consed greet is equal to greeting.
Caleb, now, at this point, you should honestly be looking at this and going.
I don't know what this is, you should be scratching your head, not understanding what this is, if
you are doing that, you are in the right place at the right time.
Do not worry about learning variables or conditionals or functions or contests and things like that,
we're going to tackle all sorts of things in this course, including significantly more than just these
concepts.
But what I wanted to do was show you what this looks like right out of the box so you could look at
this and say, yep, that's a variable.
Even if you don't fully understand all the different symbols in it, that's totally OK.
It's good to be exposed to some of the stuff a little bit early.
And you might be thinking, what's the difference between one equal sign and two equal signs or why
put it in a function?
If we're just going to write something like that, why not just put it in an alert or console log like
we have before we're going to tackle all of these things in their own individual lessons.
But this is JavaScript syntax in a nutshell.
We have a variable.
Some sort of name is equal to some sort of value, so we've got property value semicolon.
If then a parentheses and opening parentheses or an opening bracket name, so that same variable is
equal to double equals sign Caleb again we close it.
That's our conditional execute a bunch of this code and we tell it to execute the code with curly braces.
So opening that curly brace says execute all this code if that name is equal to Caleb and execute it
up until here.
Function is very similar, we're saying, hey, declare that this is a function, we can reuse a function
over and over again, we called it greeting so we could access it down here.
Takes a parameter, that parameter is name, and that parameter goes between, parentheses goes between.
These opening and closing parentheses and then we say execute all the code between these curly braces
as well, so anything after this and anything before this execute all that code.
And then lastly, we said, Consed, that is a variable that cannot change.
So it's not actually a variable if it can't change, what's the point of calling it a variable?
But that's neither here nor there.
And we have a non changing variable called Greece.
We executed the function and put a parameter named Caleb in here, and that's going to inject it right
there.
So I was going to say hello, Caleb.
Welcome to JavaScript.
Now, that was a lot again, don't feel like you need to memorize any of that.
Don't feel like you need to understand any of that.
In fact, if I said a bunch of things and you didn't understand what I was saying.
You're in the right place.
Don't worry.
We're going to tackle all of these things one by one in a much slower manner.
But again, I just wanted to show you that this is how JavaScript syntax typically looks for now.
What I would like you to do is actually just try and remember this var some sort of name, some sort
of value of some kind.
It doesn't have to be name.
It could be Caleb, could be pet could be computer could be lamp is equal to just a single equal sign
quotation then some sort of value ending quotation and then a semicolon.
So just try to remember how this line looks.
If you can remember this one line, you're going to do really, really well.
Up next, we're going to talk about console logging, we've seen a little bit about this and we've seen
a little bit of this, rather, and we are going to work a little bit more with console log right in
an indexed HTML file.