All right, and lecture for we're going to set up a visual studio code in other aspects of what we need,
other elements, we're going to build a Hello World Program and use live server to run it.
So let's first talk about JavaScript.
So JavaScript was developed by Netscape in 1995 to allow more dynamic websites, Netscape was the preeminent
browser at the time and they wanted to have some more dynamic content and not everything be so flat
and boring.
So today, all browsers supported JavaScript engine.
So initially we would embed code snippets in the original files to give a more dynamic feel to the pages,
so we're going to do some of that in this course.
And then Jay Querrey came along to had a more structured approach to using JavaScript to manipulate
what's called the document object model, which document object model is just the object model of all
the tags and HTML file.
And then JavaScript frameworks started emerging in the 2010s, which included like Knock-Out Ember of
Angular and React.
So JavaScript, natural environments, the browser, but it's also moving onward with Web surfers like
no jass to handle server side code.
All right, here's a couple of definitions.
So JavaScript is a programming language as a scripting language that gets built into the browser.
Visual Studio Code is the editor that I'm going to use to edit the JavaScript and NEHTA himself to support
it.
You can use any other any editor, but I'd recommend that you just stick with Visual Studio code and
follow along with the.
So there's some small things in here, generally speaking, you might have a file called Index that
each HTML, which it can be called something else, that's fine, but it's made up of things like a
DOCTYPE and duct tape.
Generally, each HTML and then different elements.
We'll talk about these as we go along, like e-mail and body and each one in a indiv and so on.
And then the live server extension is an extension that we build individual studio code to be able to
run the programs.
So we're going to do a couple of downloads to do this, so first we're going to a visual studio code
and that's at this link and I'll put the link in the lecture.
So when you click on that link, it takes you to this page and you download and install it installed
for Windows, who installed for Macintosh can be installed for the Linux system.
The second thing we need is Google Chrome, you can use any browser, but I'll be using Google Chrome
in this course.
So that might make more sense for you to follow along with that as well.
So Chrome is a Google dot com slash chrome, so once Fiasco's installed, just launched it from your
start menu or your program execution, however you do it on your particular computer and that's going
to bring up an empty editor.
Now, since I've done some use of this, there's some recent in here.
So generally speaking, what you do with code is to open a folder.
Now, I've put a zip file into the into this lecture and download that zip file and unzip it.
And that will be our starter project.
So when that Zippos downloaded see the downloads folder, another folder.
And so we have this foul started that said, if you double click on it.
At least some windows, you know, open up the zip and then give you some compressed forward tools.
And if I click on that to extract and click extract all.
And you pick a folder.
And now it's extracted, so if I double click into that, I could see there's a whole world, that jass
in a startup that e you know, so with Visual Studio Code, you open folders.
So what we want to do is open this folder.
So I want to open this folder in the easiest way to do it, at least, and Windows is just right, click
and say open with code.
That's going to open up another code.
That's OK, I'm going to close this one.
And now this folder is opened up in Visual Studio Code second, have two files, stalactite e-mail and
whoever wrote that?
Yes.
So let's take a look at Visual Studio code and what it can do.
So, as I said, this could works on Folder's, but similar to a editor at work, similar to Notepad,
Microsoft Word for other files where you write and edit text.
So you load a folder on your computer and then you load all the files, that folder in all the folders
and files below that folder.
So loads and a whole hierarchy of files and folders.
So there's a file explorer on the left that lets you explore the files and you can open up multiple
files and shows them on the top and a ribbon.
So right now of testing three, that text and testing dash.
Copy that text open.
So when you make changes, it shows you which ones have changed with a little white that says open EDS
in the Explorer that show you which editors are currently open and which files have been changed.
There's a search.
And that lets you search all the files you do have control after search in one file, but this lets
you search all the files and then you can click on it to show that file.
And then finally, there's an extension button that allows you to install or remove extensions, so
we're going to be installing the live server extension.
And then finally, the little guy at the bottom lets you see settings and let you get updates from Visual
Studio Code.
So let's take a look at our example.
We're going to run the hello world example.
So what we're going to do is just to buy Hello World as a text.
And then we do some other variations.
There's a console, there's a prompter to confirm and there's an alert that will try out.
So here's our folder open in LVS code again, I'm going to go to the extension's and install live server
and already have some extensions installed there, probably not important for this class, but you can
store lots of different extensions.
So I'll type in live server and the one we want is this one by Ritwik Day.
So I click install.
And it's possible after it installs is set in stone right now that you have to reload visual studio
code, which means you need to shut it down and restart it, but it looks like mine installed.
OK, so now I can go back and then in another file I can.
Right.
Click and say open with live server.
In this will load the the program up in Chrome
in just a little bit bigger, and when I click, he'll run Hello World.
Nothing happens.
And why is that?
Is because this program runs the output into the console of the browser.
So what we do is it says at the top, even if 12, so we have 12.
It brings up the browser.
And you can see up here it already rented hello.
World Council was cleared.
We can take this console we conducted in different places, like, for example, the doctor on the right
side.
Well, I can pop it out as its own window, but for now, we'll just leave it down at the bottom.
So every time I click run Hello World, it's going to run that in there.
So let's take a look at the program that's doing this.
So there's two parts.
There's the start of today's HTML.
The JavaScript needs to be embedded into an HTML file so that it will run.
So when I look at this, I can see there's some channel tags like HTML and Body and each one you can
see the most examples here of 12.
The important part for us is where it says script and script means to load a JavaScript script.
It could be a different type of script, but it's usually a JavaScript because it says here at the type
of text JavaScript and that's kind of load a source file called Hello World that.
Yes, we can see that right here.
Hello, Robert.
Yes.
And then there's a button in the button has an unclick evet.
And in the event it says hello.
Opened and closed parenthetical.
And then there's Textron, hello, world.
So if we look at the contents of Hello World, that, yes, it has the hello right here and that's what
it's going to run and it does two things consider clear world.
Hello, world.
And we saw that run.
Let's add another message to it.
Council that dialogue now for the messages.
I can use single quotes with double quotes.
I can use double quotes instead.
It just doesn't matter.
So once I save it, it's going to reload it right away.
So let's bring that up so you can see that happen.
I will turn it to the right and open that to the left so I can save this a couple of ways.
I can go to the file menu and click save.
I can do control s and then but then in open eds, there's little save all button here.
And so that's usually kind of handy.
You can also set up a visual studio codes that every time you make a changes, saves automatically.
But I'm not going to do that.
So going to click save all and then it reloads.
And now when I run.
Hello Rob.
It's this whole world.
How are you.
All right, let's do a couple of the changes I mentioned that we can do a confirmed, we can do a prompt
and so on.
So I'm going to.
Shrink this down a little bit, add a couple of things to this.
So for the confirm, we're going to get back an answer.
So do that.
We're going to Tetun Aulet, confirm this is variables.
We're going to get that into that.
Into that.
We'll get into that in the next section.
And I'll say prompt and then perhaps parentheses.
I'm going to specify a prompt
what is your favorite color at the end and put it in a circle.
So let me say, and now when I run, how overall it's going to prompt me.
It's already put out the whole world.
How are you?
It's going to prompt me with what is your favorite color?
So I'll tap and read.
And it does nothing with it, so if you want to do something with it, we need to log it out at this
point.
So I'm going to say.
Council that log your favorite color is and then after the the quote, I can put more things, so I'm
going to put the confirms, I said comma confirmed.
And then again, I have to go at the end and put a semicolon,
so I'll save.
And now I'm using controls to save run red again.
And this is done here at the bottom.
Your favorite color is red there.
Nothing we can do is called a a confirm I but confirm up here and that should be like answer or something.
But let me show you a quick visual studio trick.
Why I made a mistake is there's a way that you can rename it everywhere and you just hit the F2 button
to do that.
So I have to and then I can rename it and hit return or enter and you can see that it also renamed it
out here.
Some would do the same thing and we say, let us just call to go equals confirm, keep going.
Questionmark, you don't really need space and semicolon.
Let's go ahead and log that out.
Keep going.
Go.
All right.
So we collected a confirmation and then we are writing out the response.
So save I'm going to use controllers to save run they read.
And that is going to give us a confirmation.
Keep going.
Questionmark.
If I say, OK, it's going to return.
True, if I say cancels can return false.
So I'll say, OK, true.
And then the last of this is an alert, so you can say just stay alert all that.
So now when I run in red, this time, I'll say cancel this is false and then a turns out a message
up here in a pop up that says, all done and you just click, OK, you can't do anything else until
you click, OK?
And that's true with the prompt and the confirm.
You have to complete them.
Most of these are just used for debugging and things like that, they're not used for real applications.
So these fields are what I call simple input and output with the council that log with councils are
clear, which clears the council.
We say let X equals prompt.
We have prompt an alert and we have confirmation.
So a short e-mail overview we have our teno has matching elements, so we have each channel as a starting
element and then slash HTML is the ending element with div div and I almost have a browser to do something,
for example, each one.
This is a big header slash H1 and we could see that in our application.
So back here, if we look in the start of that east, you know, we have our H1 right here and we could
see that when we ran it that the H1 element.
Which is this is really big.
And then we been able to eliminate down here, which is a little bit smaller.
So whole world examples a little bit smaller.
And Visual Studio, when you've highlighted Element Visual Studio Code, it highlights the closing element,
so highlight each one says there's the ending element and so almost all beginning elements should have
an ending element.
There almost can have attributes, for example, get into this later, there's an anchor tag, which
is a hyperlink that that tells it to go somewhere.
So this example just says go to Google and it provides that Google you URL as an address.
And elements can also have style.
So, for example, this div has a style that has color red, a font size of two ram.
And REM is just a font or a size specification.
So let's copy these out of my PowerPoint and put them into our e-mail and see what they do.
So here I have them in the e-mail and I copied them from Microsoft PowerPoint and it used the smart,
quote, characters, and that's not going to work for you.
Now you see the difference.
These are straight and these are curly.
So I'm going to just erase them.
And this is strictly from copying them from PowerPoint and then back here and we do the same thing.
The next one for me.
So now look for me to see that the color red is kind of put in there for me to see.
So let's save this.
Now on our screen, you can see that next to the Ron Howard world, there's a go to Google and there's
a hello again enlarger read text.
So if I click and go to Google.
It's just going to go to the Google Web page.
So here's a little bit of an update on the format of a JavaScript function, so there is a function
keyword and we could see that in our our whole world that James has its function.
Hello.
And then functions begin with a left calibration and with a right curly brace.
And this is referred to as a code block.
And the statements end with a semicolon.
So we can see here we have our function keyword, we have our left curly brace and aligns with the right
curly brace.
And then all these folks are all these statements and Cenacle on the curly braces, do not.
So I have a couple of resources that I'll put the links in the in the lecture, Mozilla, which is the
creator of Firefox, has a great JavaScript reference.
And then there's three schools, there's a tutorial and then there's a reference there as well.
So that covers are introduction to JavaScript with the Hello World Program.
Next, we're going to get into primitive data types.