Modern JavaScript From The Beginning | First 12 Hours

Key Takeaways

hey what's going on guys so I know you haven't seen much of me lately I've been just really busy between my personal life and also working on courses and ideas for travestymedia.com which is my biggest Focus right now and I will be making videos soon but I wanted to give you guys kind of a little treat so this is the first 13 hours of my modern JavaScript from the beginning course which is a 37 hour course so it is only a portion but it's packed with fundamentals and we go pretty deep into those fundamentals so things like data types control structures functions Loops the Dom so I really hope you enjoy it and if you do want to go further and you want to watch the other 20 plus hours I will have a link to the course in the description uh with a promo code so obviously this is geared more towards beginners but even if you're already a JavaScript developer I can guarantee you that there's there's something you'll learn all right so let's get into it [Music] all right guys so I just want to quickly go over what JavaScript is and why you should use it so JavaScript is essentially the Java programming language as the name implies I'm kidding JavaScript has nothing to do with Java other than they share a similar name and they're both programming languages so JavaScript is one of the core Technologies of the web alongside HTML which is a mock-up language and is used to structure web page content as well as CSS which is used to style that content so JavaScript is what brings life to the front end or the user interface of a website or a web app and it allows us to make web pages Dynamic not only that but it can also be used on the server side to do things like interact with databases and work with the file system and this is with the help of the node.js runtime so JavaScript is a high level interpreted programming language used to create interactive and dynamic website experiences and when I say interpreted what I mean is that it's executed line by line rather than being compiled into machine code first so the code is executed on the Fly making it a scripting language hence the name JavaScript so as far as what JavaScript is used for I wouldn't be able to fit everything on this page so I'm going to go over just the general things that JavaScript is used for so first off it's used to manipulate the Dom or the document object model and I'll be going over the Dom in depth but you can basically think of it as a tree-like structure of nodes and everything on the page is a node including every HTML tag every attribute every piece of text and so on so JavaScript provides methods for dynamically changing that structure or changing the content or the styles of the elements in the Dom for example you can use JavaScript to add remove or change text of a heading or the content of a div or the styles of an element such as its color font and size so this is an important aspect of JavaScript as it allows developers to create Dynamic and interactive web pages that can respond to user actions now those user actions are called events and JavaScript gives us a way to handle events so we can respond to things like Mouse clicks or drags or hovers keyboard events form submissions and just about anything you can think of that you can do in the browser window and again this allows us to create very Dynamic interfaces and things like modals or drop downs collapsible content and so on so making asynchronous request is one of the most powerful uses of JavaScript and it's used to interact with back-end servers whether it's your own server that you created or a public API such as the GitHub or YouTube API so we can make HTTP requests right from our code to fetch data or submit data and this happens all behind the scenes without having to refresh the page and this is often used in what are called single page applications or Spas to dynamically load and update content without having to reload the entire page so as far as animations and effects there's many different ways that we can create these using JavaScript we can use CSS Transitions and animations with JavaScript there's the request animation frame method there's different libraries like animate.css and gsap so these methods allow developers to create a wide range a wide range of animations such as fading moving elements along a path scaling rotating and so on now data manipulation which is the process of modifying or transforming data can be done with JavaScript because it's a full-featured language with data structures like arrays and this allows us to sort filter and aggregate data so there's all kinds of powerful array methods that we can use such as map filter reduce and we're going to get into all of these later on so JavaScript can also be used to store data on the client or in the browser using things like local storage session storage and cookies we can also create single page applications or spas and these are applications that load a single HTML page and dynamically update the content without having to reload the entire page and this provides a really seamless and responsive user experience so no page reloading we can create different routes and so on and usually you would use a front-end framework for building Spas so you'd use something like react or view or angular but you can also create them with vanilla JavaScript now everything that I've said up until this point is all client-side or front-end JavaScript and that's where it is used the most I would say but you can also use it on the server side with the node.js runtime as well as Dino so in addition to consuming apis from the front end we can also create apis that interact with databases on the back end and there's a ton of Frameworks that you can use to help you with this including Express which is extremely popular and we'll actually be creating a backend API with Express later on so the last thing I want to go over are some reasons why you should learn JavaScript so one is popularity JavaScript is one of the most widely used programming languages with millions of developers using it to build websites web applications browser-based games server-side apis and more so it makes it a very valuable skill to have and it opens up many job opportunities and allows for collaboration with other Developers so it's also very versatile um it's used like I said on both on the front end and back end of web development making it a full stack language this versatility allows developers to build complete web applications using only JavaScript not only that but there's Technologies like react native which allow you to build complex mobile applications and Technologies like electron which allow you to even create desktop applications some of the most popular desktop apps are actually built on JavaScript and electron including vs code which is the text editor that we'll be using as well as Postman which is the HTTP client that we'll be using so I would say that JavaScript is relatively easy relative being the key term so if you compare it to other languages especially more low-level compile languages like C and C plus plus it's much easier to get into and I think anyone who has a passion for coding can learn JavaScript and you don't have to be some genius you don't have to be great at math or anything like that you just have to have some drive and the willingness to learn and put the effort in so JavaScript also has a very very large and active Community which provides a wealth of resources support tutorials and tools for Learning and improving your skills from websites like stack Overflow to social media JavaScript just has a huge reach and when it comes to tools like actual development tools there's just there's so much open source software so you have npm which is the node package manager with I think it's like 1.3 million packages that you can just download install and use so there's just there's there's no shortage of resources or tools when it comes to JavaScript all right guys so in this video I want to go over the tools we'll be using as well as our environment which is going to be very simple we're writing vanilla front-end JavaScript so essentially all you need is a text editor and a browser but I do want to show you some of the extensions that I'll be using and so on so as far as a text editor you can use whatever you want you probably already have a preference I'm going to be using visual studio code that's what I recommend it's very easy to use it's intuitive it has great extensions and it's very popular I would say the most popular for web development especially front-end web development and then there's some extensions I'll be using as well so I would suggest using it but you don't have to if you use Sublime Text or atom or something else you can still follow along just fine so the next thing I'd say to install is git if you don't have that already and git is Version Control so basically we can create repositories with our code and we can also push to third-party services like GitHub or git lab or bitbucket so this is not a git course but I will show you just the basics and we will need to push to a a service so that we can host some of our applications some of our projects because I do want to do a couple simple deployments all right and you can install get many different ways if you're on Mac you can use Homebrew you can also go to get Dash scm.com and you can download and install it as well and then I'd also say install node.js just to have it on your system node.js is a it's a JavaScript runtime so it essentially allows you to run JavaScript on your machine or on a server rather than just in the browser so you can actually use node.js as your your backend technology now this of course is not a node.js course but there are some things that I'd like to talk about especially with npm which is the node package manager and that comes with node.js so I would suggest installing that and you can install either the long-term support or the cut the most recent the the current version really doesn't matter for this course so what I want to do now is just go into vs code and just show you the extensions that I'm using now I have a ton installed but the there's really only two that I would highly recommend that you use with this course so one is called live server so if we scroll down here see right here live server so we we are we're writing front-end JavaScript so we don't really need any kind of server you could have an HTML file right on your desktop and have a Javascript file linked to it or just create the script tag in the HTML file and just open it run it in a browser and it works however live server gives you like a mini Dev server that you can run your uh your files with and it'll Auto reload in the browser whenever you make any changes and that that includes making changes in the JavaScript the HTML the CSS if you change any of that code it auto reloads so you don't have to keep reloading the browser yourself so I would definitely recommend using this that's what I'll be using throughout the course and then the other thing that I would suggest is prettier which is a code formatter it just keeps your your code nice and clean in fact I'm going to bring over a file real quick and you guys of course don't have to do this but I'm just going to open this up it's a file from from the course and I'm going to show you my settings in a minute but basically you'll see if I tab a line way over here and then I go when I save it'll put it right back okay so it keeps your your code nice and clean and then you can also set like the the spacing you can set if you want to use semicolons or not because in JavaScript semicolons actually are not you know they're not mandatory so you can set those to on or off as you can see I have them set to on so if I miss a semicolon and I save it adds it automatically and you can also set it the other way around where if you have a semicolon and you save it gets rid of it and then the other thing that I want to show you are quotes so you can see this string is wrapped in single quotes I prefer to use single quotes so I have it set so that if I do if I have double quotes in here and then I save it automatically gets set to single quotes all right now where you can configure this stuff once you install prettier is if you go to the settings so right here settings and then just search for prettier and then you'll find all these these options here but the ones I want to show you are right here so semi you can see I have this checked so it's going to add semicolons if I forget if I uncheck it it'll do the opposite and then down here I have single quote checked which by default I believe this is not checked but I prefer a single quotes So I do have it selected and then here my tab width I believe the default is four but I have mine set to two which makes it a little more Compact and neater in my opinion all right so those are the settings now to make sure that your code formats when you save just search for a format in the settings and right here format on Save just make sure that that's checked all right so we can close that up close that but that's it as far as the tools that I'm using and our environment so let's move on to the next video okay so most of the code that we write is going to be within a JavaScript sandbox which is just a bunch of files and folders that are going to pertain to each section of the course but before we do that I just want to show you the very basics of just creating an HTML and a Javascript file and running the JavaScript in the browser Etc and for those of you that you know aren't are pure beginners just kind of bear with me because I do want this course to be for everybody even if they're just just starting out with JavaScript so you can skip some of these videos if you want or just you know watch them as a refresher so I'm just going to create a folder so go ahead and create a folder wherever you want I'm going to create it on my desktop and I'm just going to call it I'll call it my Dash website again I'm going to delete this after so it doesn't matter now you want to open the folder with your text editor and there's multiple ways to do that you can open the text editor and you can open the folder from there or you can usually on Windows you can usually right click and if you're using vs code you'll see an option to open with code so you can go ahead and do that if you're using Sublime text you I think you also have a context item if you're on a Mac what you can do is drag the folder down to the vs code icon or whatever you're using and it will open it up and you can see on the side here is our my website site folder so from here I'm going to create a new file just click this icon and let's say index.html so now we have an HTML file and with vs code we have a tool called emit which is really great for for writing quick HTML and CSS so for instance I could do H1 enter gives me an H1 tag if I want to add a class I could say like my class so dot my class enter or Tab and then if I wanted an ID I could do you know my ID enter our Tab and let's say I wanted like five each ones I could do times five there's all types of stuff you can do so I do have a YouTube video on Emmett if you're interested but another thing emit allows us to do is just create a kind of a boilerplate for our HTML so I'm just going to hit exclamation enter and you can see it gives us our head body tags Etc and again if I know a lot of you guys already know this most of you probably do but just bear with me so if I just hit tab a couple times I can go to the title and just change it to let's say my website and then in the body for now I'm just going to put in H1 and then hello world and save that okay now since this is an HTML file I can just open it like I can just click on it make sure it opens with a browser and we'll be able to see the hello world so you can just develop like this if you want for this course like I'm just going to make this smaller so if we change something like let's say we put an exclamation here and I save obviously since I just opened it on my file system not on any kind of server I go over here and I have to reload now I don't want to have to do that for everything so that's where live server comes in so what we can do as long as you have it installed just search for live server so right here and get that installed and then you'll see this go live button down here you could click that or you could right click and just say open with live server and what it'll do is open up another Tab and you can see in the URL bar it's this is our Local Host this is one two seven zero zero one that's called our loopback address and it runs on Port 5500 by default now if I were to change something like let's say get rid of this exclamation and save you'll see it auto updates or Auto reloads in the browser so I don't have to keep reloading and that and that is with HTML CSS and JavaScript now I expect that you guys know HTML you should know at least the basics of CSS so I'm not going to really get into that to start to write JavaScript there's a couple ways we can do it one it one way is not really recommended but I'm going to show you it anyway and that is to just write it directly in the HTML so to do that what you would do is go down right above the ending body tag and create a script tag which is an HTML tag and then anything we write in here is gonna is gonna run as our JavaScript so for instance we could do alert which is just it's a function that's on the window object and I'm going to talk about that in a little bit and we can pass in here let's put a string so we need our quotes and again I'm going to talk about data types and all that very soon but I'm just going to do a Hello and save and you'll see that that's going to automatically run because we are using live server so since the file changed the website reloaded and now received seeing this alert of hello all right now typically you're not going to do this you're not going to write your JavaScript directly in your HTML it's just bad practice you want to have your JavaScript separate okay this is called inline JavaScript just like with your CSS you normally wouldn't write your CSS in your HTML you'd create a separate file so let's create a new file and you can call it whatever I like to use script JS for just general JavaScript files and this will show us our alert again because the the page reloaded and then in here let's write something else we'll do an alert and let's say hello from the JS file now if I save this we're still just seeing the hello that's in the index.html because we haven't specified that we actually want this file to run so to do that we'll come over here let's get rid of the inline JavaScript but we're going to keep the script tags now to load this script.js file we can just add a source attribute much like you would do with an image tag so let's just say script.js it's in the same folder you might have it in a JavaScript folder or JS folder like that but ours is right there so we'll go ahead and save and now we're going to see this hello from JS file okay so that Javascript file is now being loaded very very very simple stuff I know ninety percent of you probably already know this but of course I need to think of people of all skill levels okay so what I'm going to do now is stop live server and you can do that by hitting this button right here you can also right click and say stop live server and now if I reload this it's not going to work anymore okay so I'm going to close vs code and I'm just going to delete this this uh my website folder and then in the next video we're going to start to learn about the console in the browser which is extremely important and we're going to start working on our Java in our JavaScript sandbox all right guys so before we start learning JavaScript I just want to quickly talk about the JavaScript sandbox when I do a course I don't like to just type out the code and and that's that I want you guys to have uh Resources with all the code in the course so what I do is create something called The Sandbox which has a folder for each section and in each section folder you have a folder for each video with that code okay so as you can see I'm just starting out here so I have my variables and data type section with the first video which is going to be about the console and then in that is just an index.html which right now is empty and a script JS which is empty okay now for the most part most of the learning modules that aren't part of a project in the beginning are only going to need these two files so you don't have to use the sandbox you can create your own files now in the downloads for this video you will have the finished version of the sandbox which of course is all the finished JavaScript and then you'll have a starter version which is going to be pretty much everything but the JavaScript you'll have all the files and folders you'll have the HTML any CSS if we used any CSS but the JavaScript will be empty and if you want to use that starter package you can or like I said you can create your own so right now what I'm going to do in this this console folder is just create a boilerplate so I'll just do exclamation and I'm just going to put console in the title and I'm not going to create this in every video I'm just showing you just just for the beginning and then since we're not dealing with you know the Dom or anything yet I'll just have an H1 in here that says oh we'll put the name of the say console the name of the video and then we just want to add a script tag we can do script colon SRC and we want to link in our script JS okay so essentially at the beginning all of all the videos will start like this in the HTML and then we'll proceed in our JavaScript now one thing I want to mention is if you're creating folders like if you create a folder inside of an empty folder by default it's going to be compact so it's going to be like data type slash and then zero one console now I don't like that because it can be kind of confusing which you know to know which folder you're in so if you want to disable that you can just click on settings so we'll go to settings microphones in my way and then just search for compact and then right here compact folders I have it unchecked but if I check it you'll see it goes in this this horizontal fashion which I don't like so you can just uncheck that if you want all right so now that we have this set up I'm just going to open this index.html with live server and we have our script connected so we don't even need that HTML anymore and we'll just make this a little smaller and now in the next video we'll start to look at the JavaScript console all right guys in this video I want to go over the console in the browser because this is something that we'll be using throughout the entire course and you'll be using throughout your entire career as a front end or full stack web developer now every browser no matter which browser it is I'm using Chrome they all have what are called developer tools or Dev tools and in Chrome you can go to the menu and you can go to more tools and then developer tools or you can on Windows I believe it's F12 you can toggle the dev tools and then on a Mac you can do command option I now you'll see there's a bunch of tabs here you're probably familiar with the elements tab where you can you know highlight elements you can see the CSS you can even edit uh page elements of course this is only on my machine if I reload it goes back but you can do a lot with the elements tab but that's for HTML CSS the console is where we'll see all of our front-end JavaScript warnings and errors and we can log things to the console that's what I want to get into in this video now you can also go directly to the console with command or control I think on Windows it's can it's Control Alt J I know on Mac it's command option J and that will open it'll go right to the console now as I mentioned this is where you're going to see your your warnings and errors for example if I go into my script here and I just put in an A and I save that and it runs we're going to see this reference error it says a is not defined shows me the line number and the file where it's coming from all right so very helpful with con with uh warnings and errors and of course we can log to the console from our script which I'll show you in a second but we can also type JavaScript right in here so if I wanted to do an alert I could execute that and you'll see that well we get this alert with one now we're going to see undefined on the next line because what this is is if there's a result of the expression then it will be put here and there's no result to alert we're just running an alert function if I were to do let's say one plus one then it's going to show me two all right I can also set variables so let's say I wanted to set x to the value of 100 and and we'll go over variables and data types and all that but I can do that here as well I get undefined because nothing there's no result to that if I were to do let's say X plus 10 then we're going to get 110 because X is equal to 100 okay I could use the date function if I wanted to to get the date so there's there's all types of stuff we can do here but you're not going to do that very often maybe to do some testing and you know see if something is available on a Dom element or something like that but it's not too often you'll type JavaScript in here now to clear your console there's a few things you can do you can use the clear function so clear with some parentheses and that'll clear it also you can do command or control L that'll clear it up as well or you can just reload the page all right so I'm gonna come over here into my script and I'm going to show you how we can log to the console uh in a couple different ways now we do this with the console object in fact if we go over here and we type console in the console and hit enter we're going to see the console object now objects are common in in just about every programming language and you can think of them as they're an entity that have properties and methods a property is like an attribute or a value where a method is a function something that does something and you can see that these are actually all methods they have an F next to them they're functions and functions are executed with parentheses and don't worry if you don't understand that we'll get into functions in a little bit now there's quite a bit here but don't let that overwhelm you because you're only going to use maybe five percent of these most of the time you're going to be using console log or console.log so let's come over to to our script I'm actually going to reload the page just to clear that up and let's look at console.log now what this is is console is is an object and remember an object has properties and methods a method is a function so log is the method that I'm using and to execute a function or a method you have to use parentheses so I'm executing the log method that's on the console object and we use this dot syntax in JavaScript to access properties and methods okay now we want to log something so in here in the method or in the function we want to pass in an argument so I'm going to pass in a number let's say 100 and if I save that and it runs you'll see that now in the console we're seeing 100. now any piece of data in JavaScript or really in any programming language has a type and this is the type of number and I'm going to go over the data types in the video after the next one so let's say we want to log a different type like a string so a string is just a string of characters so a string has to be wrapped in either double quotes or single quotes so I'll just say hello world and I'll save that and you'll see that will log the string and notice they're different colors so the number is purple the string is white now if you want to log more than one thing at the same time you can do that as well so let's say we want to log a number we'll say 20 and then a string and then let's say a Boolean which is a true or false so if I go ahead and save that you'll see that it'll log those three things those three values now in in many cases or I'd say most cases you're going to be logging variables or results to functions it's not that often you'll log straight strings like that unless it's like it worked or something if you're running a function or something like that and you want to see if it worked so let's just create a variable and we'll get into variables more soon but if I just set let's say x to the value of 100 then I can come down here and console.log x and of course that's going to give me 100. all right now there is another extension that I I don't think I mentioned and that is let's see where is it right here JavaScript es6 code Snippets and it just gives you some some convenient Snippets and one of which um that I use quite a bit is CLG so if I do CLG enter it gives me a console log so I'll use that quite a bit there's also some other ones I use like try catch you can do if statements you know and I don't usually use it for like if statements and stuff but you will see me do CLG and maybe a few others now in addition to log we also have console.error so I'll say just alert and that'll log to the console but you can see it has this red background red border and it also shows you the scope so I mean it's up to you if you want to use it I I typically don't I usually use console.log for everything but remember the console is for the developer this isn't for the user users don't come to your website and open up the console now in addition to alert we also have con console.warn so I'll just say warning save that you'll see we get the the yellow background pretty much the same thing just a different color and then we can also do tables for objects so I'm going to do console.table and I know we haven't gone over objects yet but there are object literals I should say which are key value Pairs and they're wrapped in curly braces so I'll just do a simple object with a name as the key Brad is the value and then email as the next key and then Brad at Gmail for the value and if I save it you'll see this object is printed out as a table which is kind of nice and it also shows it as the object next one is groups so we can do console.group and give that group a name let's call it simple and then we can add some let's just take we'll just take these three here and put those right underneath and then we want to end the group so we can say console dot group end and if I save that we check it out you'll see that we have this simple with the this this collapsible arrow and the warning the alert and the log are now under that in that group all right now this isn't really this isn't something that I use but I just want you guys to know that this stuff is available you'll probably only end up using console log 95 of the time but again I do want you to know some of the stuff that that's available on this console object now another thing that we can do that's kind of cool you probably won't use it much but I do want to show it to you is adding CSS styles to your console logs so what we can do is is create a variable I'll call it Styles and I'm assuming that you guys know CSS but we can put some Styles in here like let's say padding 10 pixels we'll say let's do background Dash color and we'll do white and then let's do the color the text color which will be green okay so we just have a variable with some CSS now what we can do is a console log and I'll put a string in here of hello world and the way that we apply the Styles is at the beginning of the string we can add a percent C and then as a second parameter we can pass in our Styles now if I save that and run it you'll see down here we get the string of hello world with the CSS Styles applied now there are some other methods on the console object but I don't want to spend too much time on stuff you're probably never going to use so in the next video we're going to look at code commenting we're also going to talk about some of the helpful keyboard shortcuts that you can use while writing code all right guys so in this video I want to talk about commenting and also give you some helpful shortcuts to use while you're coding now as far as the the code here it's the same exact stuff that we did in the last video we're not actually going to write any code in this video aside from comments but I am going to show you how to kind of navigate around and use some keyboard shortcuts Now comments are used for documenting your code and explaining things in a more human readable way oftentimes multiple developers work on the same code base and comments are used to explain what a certain piece of code does it's especially important when you're working on a project with a team of developers and comments are also used to disable code so if you have code that you don't want to delete but you also don't want to run then you would comment that block of code out you can even use commenting as like a to-do list for for yourself or for other developers so very helpful and commenting in JavaScript is very simple so I'm just going to go up to the top here and we can just add double forward slashes and this is a single line of code so say this is a single line of code if I go on to the next line and start typing you'll see it's not commented all right now in vs code and in most text editors if you just hit command or control and then forward slash it'll put the double forward slash for you you can toggle it all right also if you want to comment out a line of code that's already there like let's say this one you can go anywhere on the line and just hit command or control forward slash and you can toggle it you know put it into a comment and toggle it so if you want to toggle multiple lines of code there's a few ways you can do it what I would probably do what I usually do is go to either the beginning or the end hold shift and hit up or down depending on what which code I want to highlight and then I'll go ahead and do command or control forward slash and it will comment all those lines out but when you do that every line has a comment on it there's another way to add multi-line comments and that's with the forward slash and asterisk and then you want to go to wherever you want the comment to end and put an asterisk forward slash so now you can see everything that's in between that is is commented out in fact I'm just going to put right here we'll say multi multi-line comment okay so those those are the two ways of commenting in JavaScript now as far as keyboard shortcuts I already showed you that if you hold shift you can go up or down and you can highlight code you can also hold shift and go right or left and highlight as well if you want to navigate a line of code I'm just going to go to this one actually let's go to this this table right here so if we go to this table and I hold down command or control and I hit right now the right arrow it's going to go all the way over to the end of the line if I hit left it'll go to the beginning of the line okay now if you want to go in between and you don't want to navigate every single character you just hold option or alt on Windows and you can see it'll go from this console to the end the beginning of console to the end if I hit right again it goes to the end of table hit right again it goes to the beginning of the object and so on okay so it's just a faster way to navigate across now you can also hold down shift and if you do option or alt right or left it'll just highlight it'll go across faster and you can highlight while you're doing that and you can also hold shift and hold down command or control and you can highlight from where you are over either right or left okay now if you want to move a line of code up or down you can hold alt on Windows or option on a Mac and you'll see this console.table I'm just moving it up and down the file okay that's holding option or alt if you want to duplicate it then you could hold shift option or shift alt and hit the down arrow and you'll see I'm just copying the the line of code down and of course undo is is a command or control Z all right now let's see if you want to let's say I want every instance of this log right here so I'm going to hold shift and just highlight it and then in vs code it'll automatically highlight each one now if you want to a little it's not actually highlighting it like with your cursor it's just visually if you want to actually highlight with your cursor I can hold I can hit command or control D and you'll see it selects the next DOT log if I hit command or control D again it selects the next one and I can edit those I'm editing you know all of the dot all the logs okay now if you want to select all of them instead of going one by one with command or control D you can do shift what is it command shift L will will highlight them all and you'll see now I got all the dot logs and I can edit them all right you can also place your cursor so if I want to put my cursor at the beginning of the the log here I can hold either alt on Windows or option on a Mac and I can just click there click here and click here and then I can type in all where all the cursors are okay so you're not going to remember these right now so don't worry you know when you move to the next video and you forget all of these don't worry about it use use one or two you know while you're coding even in this course use one or two and learn them so that it kind of becomes second nature and then choose another one or two and start to use that you know and before you know it you'll you'll just do it without even thinking all right and then a couple others I wanted to show you if you do command shift o you can search for a file so if we do like index you'll see that both of our index htmls if I do script you can see our script js's and you can switch to those as well all right if you want to search you can do let's see you can do command option f and if I want to look for you know console it'll show me all those you can also do command shift F and you can search over here for um we'll say console and it will show us all where console is in every file not just the file that we're in all right and you can also just click on search here as well and if in vs code if you want to toggle the sidebar you can do command B so our control B that'll just toggle the sidebar uh what else if you want to toggle the terminal you can do command or actually it's control till day so I can toggle the terminal down here which we're not going to get into maybe maybe we will later on in the course but yeah so those are the kind of the the most common shortcuts that at least at least that I use so hopefully that helps and in the next video we're going to start to look more at variables so in this video we're going to start to look at variables and variable declarations now variables are basically containers for pieces of data and that data can be one of many different types and it's important to understand the different data types in JavaScript so we're going to go over that in the next video now when we declare a variable we need to use one of three keywords so let's just say ways to declare a variable so basically we have VAR let's make sure we comment this out so we have VAR we have let and we have const okay so these are the three ways that you'll see variables declared in JavaScript now you probably won't see VAR very much anymore VAR was the original declaration but in es2015 which is the 2015 update of JavaScript or ecmascript also known as es6 it was a huge update to the language and they introduced let and const and the main reason for that is due to something called scope and I'm not going to get too much into scope right now because it'll go over a lot of people's heads that are just getting started we're going to have a whole section on function scope execution context and stuff like that but for now just know that when you write code in just right in the file not inside of a function not inside of an if statement that's the global scope all right now in the global scope VAR and let work in a very similar way now const is a little different because it's for constants it's for values that you that are not going to be reassigned at a later time okay and I'll get I'll I'll show you const in a few minutes but let's start by just creating some variables here I'm going to say first name and let's set that to a string so we do need quotes so we'll say John now notice I made this n capital so the basically the beginning of the second word I capitalize I'll talk about that and some other ways you can format your variables in a few minutes but let's say first name we'll say last name and set that to do okay so we're just creating some strings putting them into some variables and we'll do a console log of first name and we can log more than one thing so we'll do that here as well and you'll see we get John Doe okay and if I wanted to create a variable with another data type like a number we could say let age equals 30. we can console log age okay now if I try to log age up here you'll see that I'm going to get an error it says cannot access age before initialization when we do this right here let cons VAR this is initializing a variable okay and you want to initialize it before you use it now it does act a little different if we use VAR so if I say VAR here and I run this we don't get an error but you'll see that it is undefined and this is due to something called hoisting which is a little more advanced and we'll we'll talk about that in at a later time but yeah you want to initialize your variables first I'm just going to get rid of that now when it comes to naming your variables there's a couple conventions that we need to follow so variable names can only be letters numbers underscores and dollar signs okay so you can't have anything else you can't have like a plus symbol or an asterisk or anything like that and even though that you can have numbers they can't start with a number so if I were to say like let one name equals Brad that's not going to work I'm going to get an error but if I move that one to the end here then that's fine but if I try to add like a plus sign or something like that that's not gonna that's not gonna work okay now as far as the formatting of your variables for like multiple words just paste this in here what I did here with first name and last name this is called camel case where you start with a lowercase number for the first word and then every other word after that is uppercase okay so that's camel case and that's usually what you're going to see now you have other ways to do it like you could use underscores to separate The Words which I don't particularly like but I mean it is it's all right I guess you see a lot of that in PHP and then we also have Pascal case where the the first word is also uppercase and there are conventions or there are certain times where this is the convention such as in react components or most front-end Frameworks when you create a component the file name is Pascal case so is the class or the function name of the component and then you might see all lower case which I really don't like I don't think that it's very readable especially if you're getting into like three and four words okay so let's look at reassigning variables so we'll say reassigning variables now we have a variable up here of age you we use let we set age to 30. so if I come down here I can then take age and then I can reassign it to let's say 31 let's say John had a birthday and then we'll just console log age again and now it's 31. all right now another thing I can do with let is just simply declare it and not actually assign a value so let's say we want a variable called score but that's it I'm just going to declare it okay I'm allowed to do that I don't get any error and then I could take score and maybe add 1 to it let's do a console log of score and we get 1 and then we might have like some kind of if statement I'll just put true in here so that this runs and and don't worry if you don't understand this but let's say we had we have something happen where the score and gets added one again we'll say it equals score plus one and then down here we'll console log again score and now we get two okay so that's something that is very common using let now let's try the kind of the same thing with const so we'll go ahead and say const and I'll just I'll just call this X and I'm going to set that to 100 and then let's say I want to take that X variable and then reassign it to 200. if I save that I'm going to get an error it says assignment to constant variable a type error okay so a constant cannot be directly reassigned like this another thing you can't do with const is just declare it and not initialize so for instance if I were to say I already have score so I'll say score one if I were to just do this you'll see it's already giving me an error here const declarations must be initialized if I save I'm going to see the same same error here okay If This Were A let though that I can do that okay so just know that const can't be directly reassigned now where a lot of people get confused is when you're using arrays or objects things that are not primitive values and I know I haven't gotten into that stuff yet but I just want to show you a quick example that's pretty easy to understand so if I use const and I have an array right and and an array is just multiple values so let's say one two three four all right what I can't do is directly reassign by taking array and saying well let's do one two three four five if I do that I'm going to get an error because I'm using the equal sign directly reassigning but what I could do is with a raise you have a bunch of methods such as push and pushes is a method that will add on to the end so what I could do is say array dot push five and then if I console log my array that works so I manipulated this array I changed it to from one two three four to one two three four five by simply using a method to push five onto the end okay and then the same goes with objects if I say cons person and I set that to an object and I say name Brad and then we'll come down here now if I were to just take person and directly reassignment you guys know that's not going to work but I could do person.name and set that equal to John and that works because I'm not I'm not directly changing the variable I'm changing a property or a key inside the variable or not a key but a value of a key okay I could also do like person dot email and I could add on let's say Brad at gmail okay and then if I do a console log of the entire person object you'll see I have name John and email Brad Okay so when people ask me you know what should I use cons let or both or whatever I say it's it's it's really preference now for me I always use const unless I know I'm going to directly reassign something like like this right here okay um now you're gonna find that you don't do this very often okay I shouldn't say that I don't do this very often we use a lot of the times we use objects and arrays and using Cons with that is just fine because there's not too many you know you don't directly reassign this very often you're going to do stuff like this you're going to use methods you know you're going to assign properties and stuff like that so that's my rules I always use cost unless I know it's something that I'm going to change such as a score and a game you know you might add to that but you probably or what I would do is have it in an object and then just change that value so I could use const in that case so I mean you're going to find a lot of this stuff is preference all right now another thing that I just wanted to mention is we can declare multiple let's say multiple values at once or multiple variables so I'll just go ahead and say actually let's use let here let's say let and I'll say ABC so I could do that right I don't even have to assign it because I'm using let and then I could also do like const I can't just I have to assign it but I still can do multiple at once so I could say like a I can't do a because I just used it up there but let's say d equals 10 I could put a comma and say E equals 20 and let's say f equals 30. okay and all of that is just fine so if I console log d down here you're going to see we get 10. now I usually don't do this I'll just use a semicolon and then just do const d const d const f I just think it looks cleaner but that's just again that's just preference but you can assign you know multiple at the same time and if you don't actually assign a value and you log it what we're going to get is undefined okay which is one of the data types which is what we're going to talk about in the next video all right guys so I want to spend a little bit of time on data types so when you're dealing with code any any type of code any language and you're dealing with data that data is associated with some kind of data type okay and it doesn't matter which language you're using they all have some kind of data types and they can be different language by language now in JavaScript you essentially have two types of types you have primitive data types and you have reference types or objects and I'll talk about those in a second but I want to start off with primitive data types now I feel like a lot of JavaScript courses kind of skip over some important fundamentals and what I want to do is I'll talk more about this in the next video but I want you to understand how these data types are stored and how primitive data types are different or are accessed different