Welcome to your very first section for the course. The first video for each and every section is a little section introduction. This video is only a couple of minutes long and it’s where we come face to face to talk about what we’re going to cover in this section and how that’s going to fit into our bigger picture goal which is to be able to create our own node j s apps.
So here’s an example in this section you’re gonna get your machine set up for the rest of the class. We’ll start by installing Node J Yes and I’ll set you up with a text editor that works really well with node.
All of that is going to allow you to write and run. No J Yes applications.
We’ll also talk about what exactly No j yes is and why it’s something you should spend your time learning so you’re about to invest a significant amount of time learning this tool.
It’s a good idea to learn what exactly you’re getting yourself into.
I’m excited to get to all of that and more.
So let’s go ahead and jump right in to the first video.
Before we talk about what no J.S. is or explore why it’s a useful tool.
We’re gonna go ahead and install it.
And the reason we’re installing it first is because we’re actually going to use a little bit of node
j s in this section to answer those two important questions in this video.
We’re gonna install no J Yes it’s a super easy process and we’re also going to make sure you have a
text editor on your machine so we can use it to write our scripts throughout the class.
Let’s go ahead and get started by installing node we can find it over at the official node Web site
node j s dot org.
Right here on the Node J.S. home page we have the download section for our operating system.
Right here.
I am indeed running on a Mac and down below.
I have two node versions I could choose to install on the left I have version eight point twelve point
zero which is the current L2 yes version that stands for long term support and on the right I have version
eleven point zero point zero which is the current release with the latest features and that’s the version
of node we’re going to work with throughout the class.
Now if you’re seeing a more recent current version please go ahead and install that.
I’m frequently updating this course to always support the latest node features.
So as you move through the class I recommend installing the newest version of node possible once again
for me.
That’s currently eleven point zero point zero.
So I’m going to go ahead and click that big green button that’s going to download the installer and
it’s one of those really easy click Next installers.
So let’s go ahead and run through it right here.
There’s no need to customize anything we see we’ll click continue a couple of times we’ll agree to some
stuff we’re not going to read and we’ll choose where we want to install node from here.
All we have to do is authenticate.
I’m going to provide my password and after just a couple of seconds.
No J.S. will be installed on your machine and there we go.
The node installer is all done.
It says that node was successfully installed and all we’re going to do is test that by running a single
command from the terminal on your machine.
We’re going to make sure that node was indeed wired up correctly to do that.
Let’s go ahead and first close down the installer we’re all done with this.
I am going to go ahead and move it to the trash.
It is no longer necessary.
And what we’re going to do now is open up the terminal on our machines on my Mac.
I’m gonna get that done by cracking open spotlight and searching for the terminal application.
If you’re on Windows you can use the Windows key to bring up the search bar and search for the command
prompt application.
If you’re on Linux the exact name and location is going to depend on your distribution you’re looking
for something like the terminal and the command prompt or the command line.
Now we’re gonna go ahead and crack this open and what we get regardless of our OS is the same thing.
Stylistically it’s going to look a little bit different but it is a place for us to type commands.
We can then hit enter to run those commands and we’ll see the results right here in this screen.
Now when we installed node j s we didn’t get a gooey application with fields and buttons and taxed instead
what we got as a command.
We can now run from the command prompt.
We’re gonna be using this command hundreds of times throughout the course and we’ll learn a lot more
about it and how it works throughout the class.
For now though we’re gonna use it in one way to check for the node version installed.
So right here we’re gonna type out what seven characters to start we will run the node command.
So we’re gonna type out node and oh d e followed by a space and we’re gonna provide a argument to this
command telling it that we just want to know the version of node that’s running.
So right here after that space it is a hyphen followed by the letter V.
Now if we go ahead and run this we are going to get the version of node we just installed right here.
I’m seeing version eleven point zero point zero which is indeed the version I installed a few minutes
ago right here.
You might not see the same version I have but you should see the same version you just installed.
Now what if you’re not getting that.
Well if you’re not getting a version that likely means node wasn’t installed correctly and to simulate
what this looks like I’m just going to miss type node so I’ll type node with two E’s as an example.
Then I’ll try to use this the argument to ask for the version but there is no node command with two
E’s So what do I get.
I get an error saying something like command not found if you’re seeing something like this when you
run it correctly spelled command and that means that node wasn’t installed correctly and that we need
to address that and before you can continue on to do that all you have to do is crack open a question
in the course Q and A and I’ll work with you to get node installed correctly.
So at this point we’ve installed node j s and we’ve confirmed that we can actually use it on our machines
and that’s where we’re going to stop with the terminal for now.
I’m going to leave the terminal open as we’ll be using it in the next several videos.
And if you don’t have any previous terminal experience don’t worry we’ll cover all of the commands we
end up running no terminal experience required.
That’s all we’re gonna do with node 4 now to wrap up the video I want to make sure we all have a text
editor we can use to write out our node scripts.
So to do that let’s go ahead and explore a couple of different options throughout this class.
I’ll be using Visual Studio code you can find and install this over at code Dot.
Visual Studio.
Dot com.
Now there are a few reasons I love Visual Studio code.
It is free.
It is open source and it’s available for all.
Operating systems whether you’re running on Mac Windows or Linux it also has one of the best editors
I’ve used in a while with a fantastic ecosystem of extensions and themes allowing you to really customize
the editor to fit your needs.
And we’re gonna do just that with node j s with Visual Studio code.
We can actually debug.
No J.S. Right inside of the tool which is a great feature.
You don’t always see from text editors.
Now there is no reason you have to use Visual Studio code.
It is just the editor.
I’ll be using throughout the class.
You’re more than welcome to use any editor you’re comfortable with if you already have one that supports
javascript and you’re already good to go.
But if you’re looking for something new and you want to try out what is a very cool tool I definitely
recommend checking out Visual Studio code.
Now there are plenty of other options out there as well.
In the past I’ve used the atom text editor in my classes.
It’s also a great free open source editor available for all operating systems and there are some good
paid editors out there as well.
Examples of that would be sublime text 3 and web storm.
Now web storm is definitely more of an I.D. e than a text editor but it’s also a tool worth checking
out.
So all we need is to install one of these if you want to follow along exactly and use the setup I use.
I recommend installing visual studio code so take a moment to get that done.
You can pause the video then come back when you have it installed and we’re going to wrap up the course
by just cracking it open.
So I’m going to open up from Spotlight visual studio code and right here we’re not going to actually
do anything with the editor.
I just want to make sure we have it installed and we can actually crack it open so we have node installed.
We’ve checked that the command works and we have a text editor where we can now write node scripts.
That is it for this installation video.
We’re now ready to continue with the rest of the course in the next two videos.
As I mentioned we’re going to focus on answering two important questions.
What is node Jay s and why is no JSA tool worth using.
I’m excited to talk about both of those.
So let’s go ahead and jump right in to the next one.
In this video we’re going to answer a single question which is what exactly is node j.s
Node J.S. came about when the original developers took javascript something that at that point we could really only run in the browser and they allowed it to run as a standalone process on your machine.
So before node javascript just could not be used as a more general purpose programming language.
It was limited to what the browser allowed it to do.
So for example I could use javascript to add a click event to this button or to redirect a user to a
different page.
But there was no way to use the javascript programming language outside of the browser to build things
like web servers that could access the file system and connect to databases.
All of these are things that other programming languages can do without any problem.
All of this ended up changing with the introduction of node j s with no J.S. javascript developers could
now use javascript on the server side so they could use the same javascript programming language to
create web servers command line interfaces application back ends and more all of which will end up covering
in the class.
So at a high level you know what node is.
Note as a way to run javascript code on the server as opposed to being forced to run it on the client in the browser.
Now the question has to be asked how exactly is this possible and we’re going to explore the answer by starting with this one sentence summary on the Node J.S. home page.
We’re gonna read this out. Break it down and it’s going to shed some light on what exactly is happening here.
So node J.S. is a javascript runtime built on Chrome’s v 8 JavaScript engine and it all comes back to this javascript engine. Now there are all sorts of JavaScript engines out there.
Pretty much every major browser has their own node js uses the V8 JavaScript engine and that’s the same JavaScript engine that powers the Chrome browser and V8 is a Google open source project.
The job of the JavaScript engine whether it’s V8 or any of the other ones out there is to take in JavaScript code and compile it down to machine code that your machine can actually execute.
Now the V8 engine is written in the C++ programming language. That means anyone out there could write a C++ application they could incorporate the V8 JavaScript engine
into their application and you could extend the functionality that JavaScript provides.
And that is exactly what both chrome and node JS do. Both chrome and no J S are largely written in C++.
Now you’ll notice right here it says that no JSA is a javascript runtime and that’s true.
No JSA is not a programming language.
In the end of the day all of the code we’re gonna write in this class is indeed javascript code.
The runtime is something that provides custom functionality so various tools and libraries specific
to an environment.
So in the case of Chrome it provides V8 with various objects and functions that allow javascript developers
in the Chrome browser to do things like add a button click events or manipulate the DOM.
Now neither of those features makes sense for a node where we don’t have buttons and we don’t have a DOM so node doesn’t provide those things.
Instead the node runtime provides various tools that node developers need libraries for setting up web servers integrating with the file systems so you can read and write from disk and then the end of the day both chrome and node J.S. are just creating their own modified version of JavaScript.
Now in the end of the day it’s still that same core javascript language but with custom functions and objects injected.
Now this is actually a really important concept so I’ve put together a quick visualization to walk us through exactly what’s happening here.
So let’s take a couple of minutes to jump into that.
As I mentioned we have the Chrome browser and the Chrome browser uses the V8 JavaScript engine. Now when chrome needs to run some javascript for a particular Web page it doesn’t run the JavaScript itself. It can’t.
Instead it uses the V8 engine to get that done so it passes the code to V8 and it gets the results back.
Now the same exact thing is true with Node node does not know how to run javascript code.
It also uses that V8 engine so a node needs to run a script it passes that script down to the 8 and
in the end of the day it gets those results back.
Now I mentioned that V8 is written in C++ and I also mentioned that both chrome and Node are largely
written in C++ and once again that’s no incidents.
The reason that both chrome and Node use so much C++ is that they’re both providing bindings when they’re instantiating the V8 engine.
This is what allows them to create their own javascript runtime with interesting and novel features.
It’s what allows Chrome to interact with the DOM when the DOM isn’t part of JavaScript and it allows node to interact with your file system when the file system isn’t part of JavaScript either.
So V8 has no idea how to interact with the file system with JavaScript or what the dumb is.
It is up to node and Chrome to provide implementations for those when running the eight.
What does this process look like.
Well we have a table.
It’s not really a table but it’s convenient to think of it as a table and we have a set of JavaScript
methods and objects and we have a set of C++ functions.
So on the left I’ve picked two very popular javascript methods.
Here I have local storage dot get item which would fetch an item out of local storage and I have document
dot query selector which would allow me to query some elements from the Dom and then do something with
them like deleting them or changing their contents.
Now it might surprise you but neither of these are part of the javascript programming language itself.
You can pull up the specification you can search for them but you’re not going to find them.
That’s because they’re actually implemented by the chrome runtime.
When chrome runs a javascript file that uses either of these in the end of the day some C++ code gets
executed behind the scenes which is responsible for taking care of the functionality.
That’s my chrome has so much C++ code no chrome needs to tell V8 what to do when these methods are called so Chrome’s not just passing javascript code to V8 it is also passing down these C++ bindings creating the context for which the javascript code should be executed.
Now the exact same thing is true with node j s over here I’ve picked out a couple of node j s methods that you’ll be familiar with by the end of the next section.
I have f asked to read file F S stands for file system and read file allows me to read the contents of a file from disk.
I also have OS dot platform. OS of course standing for operating system and the platform method allows me to fetch the name of the platform I’m running on such as Windows Linux or Mac.
Now neither of these methods once again are part of the javascript programming language they’re providedto v 8 as part of the node j s runtime.
So javascript doesn’t know how to read a file from disk but C++ does.
So when someone uses javascript code and no J S to read a file from disk it just defers all of that to the C++ function that can actually read the file from disk and get the results back to where they need to be.
So once again we have a series of methods that can be used in our javascript code which are in reality just running C++ code behind the scenes.
Now let’s wrap up this video by going over a little code example that illustrates some of the differencesand si milarities between JavaScript in the browser and JavaScript inside of node j s so to start we’re
going to open up any Web site.
I’m just going to use the no J.S. home page and we’re gonna crack open the console.
So from here I’m gonna go to settings more tools developer tools and we’re just going to pull up the
console tab.
This is going to allow us to run individual javascript statements.
So right here as an example I could type 2 plus 3 hit enter and I get the result 5 back.
I could also create a string with my first name inside of it.
Any string Andrew and I could use the string javascript method to upper case to convert that string
to upper case and I get upper case Andrew back.
Now we can do the exact same thing in note.
Almost all of the note code we’re gonna write in this class is going to live inside of files in a larger
project and that’ll happen over in visual studio code starting in just a couple of videos.
But for the moment we’re gonna go ahead and just mess around with node right here inside of the terminal.
So let’s go ahead and use clear this is a standard bash command allowing us to clear the output we’re
seeing if you’re on Windows.
You need to use C L s. That is the version of clear for your operating system and what we’re gonna do
from here is just run the node command.
We’re not going to put anything after it just n o d e and we hit enter.
Now what we get here is a little place where we can run individual node statements also known as an
R E P L which stands for read e Val print loop like the terminal it’s waiting for us to run some commands
but these are actually gonna be node javascript statements and not bash commands.
So what are we going to do right here.
We’re gonna write some javascript code and hit enter exactly like we did over here and I’m going to
use the exact same two things two plus three enter.
What do I get five.
Then I’ll create the string Andrew and I’ll use these string to upper case calling it.
And what do I get.
I get back to the uppercase string.
Andrew So right here we can see that all of the core javascript features we’re used to are still available
when using Node J S because those are provided by the V8 engine itself.
Now let’s head over to the browser and start to explore a couple of the differences.
If you’ve worked with JavaScript in the browser before then you’re likely familiar with the window object the window object is a reference to our browser window.
I can type window I can hit Enter that’s going to dump the entire object to the console.
And if we expand it we can view all of the different methods and properties we have access to. And there are quite literally hundreds of them.
Right here we have some methods related to click events I have on click on change and others.
And if I continue to scroll down we have things related to the window size.
I have outer height outer width and others.
Now all of these make sense in the context of JavaScript in the browser because we actually have a window
to work with.
What happens if I try to get the window in note I’m gonna type window.
I’m gonna hit enter and I can see I’m getting an error reference error window is not defined so window
is something specifically provided by the chrome runtime when javascript is running in the chrome application
node doesn’t have a window it doesn’t need window so window is not provided.
Now with node we have something kind of similar.
We have a variable called global global stores a lot of the global things we’re gonna be accessing throughout
the course.
And if we scroll up we can see we have dozens of different properties and methods available to us.
We’re not going to dive into any of these right now but we will be exploring several of them as we start
to learn about node j as now does the browser have global.
The browser does not.
If I scroll all the way to the bottom I can run something new type global hit enter.
What do I get. I get global is not defined.
I actually misspelled it but I’ll get the same result if I do indeed spell it correctly.
Global is not defined.
Now there’s another difference.
I’m going to point out before we wrap things up here in the browser I have access to document document
allows me to work with the down.
So right here I have a whole bunch of different elements that make up my page and I can use document
to manipulate them in whatever way I see fit.
Now this makes sense once again for the browser where we actually have a dom.
It doesn’t make sense for node where we don’t have a dom.
If I tried to print document to the terminal what do I get.
Once again reference error document is not defined.
Now in no JSA we have something kind of similar to document called process.
Process gives us various properties and methods for manipulating the node process that’s running.
If I dump this to the terminal we can see there are all sorts of interesting methods and properties
including one exit exit allows us to exit the current node process.
Let’s go ahead and actually use it to shut down our little note example right here.
That’s gonna be a process which is an object don’t exit which is a method I’m gonna call it providing
no arguments since it doesn’t need any and all we’re gonna do is run this statement by hitting enter.
What do I get.
I can see I’m brought back to the standard terminal where I could run other commands no longer am I
running little node statements now process once again does not exist over in the browser that is specific
to node j s if I type out process and dump it I get process is not defined.
So here we’re seeing some of the differences between JavaScript in the browser here specifically chrome
but other browsers would be the same.
And no J S which is javascript running on the server that’s where we’re going to stop for this one.
Let’s take a quick moment to summarize.
No J.S. is javascript on these server.
This is possible because no J.S. uses the V8 JavaScript engine to run all of the javascript code you
provide.
Now no JSA is able to teach javascript new things by providing C++ bindings to the 8.
This allows JavaScript in essence to do anything that C++ can do and C++ can indeed access the file
system.
So now JavaScript can access the file system through node that’s where we’re going to stop for this
one.
And don’t worry about memorizing all of this as we move through the course and start to see this in
action.
I’ll bring up the individual pieces again in the next video we’re gonna dive into what is also a very important question.
Why should I learn node j s I’m excited to get to that.
So let’s go ahead and jump right in to the next video.
DOM Frontend Javascript ES6+Node.JS+NPM+HTML5+CSS+Webpack+NPM 