JavaScript For Beginners #1 - Environment Setup and "Hello World!"

Key Takeaways

hello everyone and welcome to a brand new series on JavaScript for beginners what I'm gonna do right now is give you a brief overview of what you can expect from this tutorial series a little bit about my background with JavaScript so you know if you'd like to watch this series or not and then we're gonna get into some basic environment setup and talk about how we can run our JavaScript code but first of all I feel like I need to mention this if you guys have looked at my channel you realize that almost everything on there is Python with the exception for a few Java videos not JavaScript Java now I actually know JavaScript I used to do it a lot when I was younger so maybe 14 or 15 I'm 19 now for any of you that are wondering and I really wanted to get back into it because it's growing as a language rapidly and there's a lot that you can do if you know both Python and JavaScript you can move into kind of a full stack developer position where you understand the front-end and you understand the backend so that's an advantage for any of you guys if you do know another programming language especially something like Python or kind of a back-end web technology if you learned something like JavaScript that is really a complementing skill and that's the reason that I want to teach it to you guys but what really is JavaScript now I'm sure some of you guys don't really understand exactly how it works or what it is but essentially javascript is a language that is run primarily from your browser so unlike python which is typically a server-side language which is gonna run off a linux server and be responsible for doing the backend of websites and HTTP requests and all of that when you have JavaScript what it's gonna be doing is dealing with some front-end information so it's actually gonna run directly in this chrome web browser and it's gonna be responsible for your interaction with the page so essentially say I click a button so here download for Windows we're going to talk about this in a second that will run a JavaScript function that will actually you know download this and same thing with a lot of other features on this page and just other web pages in general you see any kind of games made in the browser chances are they might actually be made with JavaScript and there's just a lot of things that you do kind of front-end wise using that technology now this is great it makes this language super flexible and really great to learn because this essentially means you can develop for any platform if you know JavaScript whereas something like Python you know you need to make sure you have a compiler on that actual computer and it might not necessarily work depending on what when you're in where as JavaScript all you need is a web browser to actually run that code which means essentially one JavaScript will work on any device any computer so long as it has a web browser that being said javascript is also a massively growing language a lot of high tech companies are looking for people that know JavaScript and it's a really easy way to get into kind of web development actually secure a job especially if you don't have an education or a background in computer size or software engineering or something like that so anyways that's enough for kind of the information about that sorry if I've bored any of you guys but now let's get into the environment set up start writing a basic hello world program and then we'll end off at the end of there and move into some more advanced stuff in the next video so the first thing that we need to do if we're gonna write JavaScript is we need a place to write it now what I'm gonna be using is sublime text which is just a pretty standard text editor which will allow us to have some syntax highlighting and some autocomplete while we write our code so I'm gonna leave a link in the description but if you need to start off by downloading this editor you can also use any other editor you want but this is what I'm gonna be using for these videos once we do that what we need to do is open up sublime text you might get some pop-ups just scroll through them don't worry we need to create a new file which is actually gonna be an HTML file so what I'm gonna do in sub-line here is go to file new file you'll see it pops up as untitled as a new tab you can go file save as or simply hit ctrl s and then type in the name of your file make sure I'm just going to call this one tutorial 1 although I do already have that file make sure it says all files and add your extension of dot HTML the reason we're gonna do this is because it the way we're actually going to look at our dot JavaScript code is by running it through the browser which involves us having an HTML file now you can see here I've already made one so I'm gonna kind of omit this step here but that's what you guys need to do now once we have this you should see tutorial one at the top here which is now actually gonna allow us to start writing some code that we can run in our browser now just notice though and I'm gonna try to find this folder wherever I had it so desktop JavaScript JavaScript tutorial that when you create a file that's dot HTML you should see the icon beside it change to be you know chrome or edge or whatever web browser you're using open Abul now what that essentially means is if I double click on this file you can see that is going to open it in my browser now for some reason that's not working for you what you can always do is type in the direct path to your file in your web browser and that will actually open it up and the reason we're gonna do this is because when we make changes to this HTML file will refresh our web browser and we'll see those changes effect here so this is kind of gonna be our console and our output our web browser where is where we're gonna be writing is inside of this actual text editor I'm gonna get started right away and I'm just gonna start doing some things you guys might be a little bit confused at first you've never seen this before but whenever we write two kind of JavaScript code we need to display it on an HTML page so the basic syntax for creating an HTML page is simply putting HTML tags and then you're gonna put these body tags like this now I'm not gonna focus too much on this syntax cuz it's pretty simple you can probably understand it fairly easily and I'm sure most of you know it but essentially open tags just simply have the word and then close tags have this slash afford the same word so this is our body tags this is our HTML tags our body tags are inside of our HTML tags now inside of body what we're gonna start by doing is just writing some basic HTML just to show you how some things work here so I'm gonna say h1 tags which stands for header 1 is hello now I'll demonstrate that when i refresh the page here hello pops up means everything's working you guys should test that as well to make sure everything is proper now that's great but how do we write JavaScript well when we want to write a script inside of our HTML what we can simply do is type script now nice for me in sublime text view when I hit enter it's automatically gonna fill in some options for me you can see we have the type equals text slash JavaScript so you don't necessarily need to include that but this is just gonna specify exactly what language you're writing it because you can do scripts for other types of things inside of HTML so inside of here is where we're always going to be writing our JavaScript code unless we're putting it in a separate file and importing it which we'll talk about later so here allows us to actually you know start writing a different language so not HTML now we're going to write in JavaScript so what's the first thing that we need to demonstrate in JavaScript that we can do well the first thing that I like to demonstrate is simply the console so just like in any other language the first thing you typically do is you print something out and the you know do the holo world application so let's do that so what console adult log is gonna do is simply put a log or log a message to the HTML console or whatever the console is in our browser it says hello world console means we're not actually interacting with the HTML page we're interacting with the console and you typically do this for debugging purposes and not in a production environment so anyways let's have a look at what this actually does and how we can even see the console up here so if i refresh this page obviously nothing's happening but we've put console.log hello world inside of our script X how do we see this well we need to open up the console now this might be a little bit different depending on what web browser you're using but in chrome it's pretty easy to do this right click anywhere on the page and click inspect this is going to be probably similar steps for edge or any other web browsers like that you need to inspect element you'll see that we get something that pops up on the side or maybe below your webpage and it says elements and then there's some place that says console now my case I'm just gonna zoom in so you guys can actually see this you can notice at the top of my console here it says hello world with an exclamation point and says that that came from tutorial HTML colon 5 which stands for line and that is the most basic step on how we actually log something to the console now that's great but what if I want to actually display something on my web page well what I can do if I want to show something on my web page is use something called document now this is kind of the main thing that we need to understand here in JavaScript we have two main areas that we can kind of write to we have log or sorry console and we have document console is gonna be something that you know the user doesn't see it's in the background it's in that console tab whereas document is actually referencing the HTML document itself which means we can write information directly into the HTML document now when we want to write to some HTML directly into the document what we do is document dot write and then inside of here we're gonna put quotation marks and we're gonna put whatever it is that we want to write so in this case maybe I want to write in h1 tag like this that says hello then we'll do h1 hello like that and what this is actually gonna do is write this directly to the document now there's something that I would notice I didn't mention here so I'm gonna add it quickly whenever we write a line in JavaScript we need to add a semicolon at the end of it this simply ends work terminate the current line which means get ready to read the next instruction that we're gonna have below this now this is kind of the basics this is involved in a lot of different languages but there will be some specific lines we don't need semicolons for but I'll talk about those when we get to them I also want to mention what I'm doing in here notice that I put this in quotation marks and that I haven't just left them like this and then what I putting in quotation marks that actually ends up changing colors now this is important and typically when we're writing things inside of here and we're just typing them in we need to put them inside of quotation marks we're going to talk about this more in detail in later videos as we go into datatypes and all that but just understand that for right now if you're gonna be writing something or logging something you're gonna need to put it inside of quotation marks for that to work and what I've done here is simply put some h1 tags hello and I've written this into the document a lot an exclamation point so we can see the difference here and now what I'm going to do is just refresh the page and show you what happens so now you can see that we actually don't get anything in the console because we haven't logged anything and we get hello directly underneath it with an exclamation point because that's what we wrote so we can actually write you know HTML directly to the document by doing that now I'm just gonna show you two more things that we can do with console with the console and then we're gonna end this video and move into some more advanced stuff in the next one so just like we can log some information to the console so console dot log you know like hello this is a long we can also do some other kinds of things in the consoles we can do what's called an error and what's called a warning so I'm going to show you both of them so just like we have console dot log we also have console dot warn and you'll see the difference in this one immediately I'm just gonna call this warning exclamation point now what's gonna happen when i refresh the page is we get this little icon that pops up and says that we have a warning and it tells us where this warning came from and what line it was at so that can be useful sometimes when you're creating an application and you want to warn the user that they're doing something that maybe they shouldn't do or not the user but you know yourself if you're developing this and you want to look at it that can be useful to do as well and you get that little icon popping up and we can also do a console dot error which is a little bit more strict than a warning and we'll just say this is an error like that and remember our semicolon at the end of that line so let's run this we get this is an error tutorial eight and you we get this little X here and you notice this is obviously a stronger kind of statement than this morning so log warning error and this was document right and those are kind of the fundamental things that you know we always learned when we started learning a language how do we do logs how do we write some stuff and obviously this document right to write some HTML directly to the document so I mean that has kind of been my first geometry tutorial as always let me know what you guys want to see for the rest of this tutorial series in the comments down below I plan on making this one quite long as I'd like to understand kind of some more advanced aspects of JavaScript so as always people like if you like this video subscribe to the channel for more and I will see you guys in the next job script tutorial