JavaScript Tutorial for Beginners [JS Crash Course 2024]

congrats on deciding to learn JavaScript this crash course is actually a very small part of the software development mini boot Cam that I teach where you learn every part of the software development life cycle to become a software engineer or understand the entire concept and then go and pursue a career in Cloud engineering or devops engineering Etc but in this video we'll dive into JavaScript and really understand not only the syntax and the basics but also the important and very interesting Concepts behind JavaScript we will start by looking at the big picture first so we can understand where JavaScript fits in exactly when thinking about website programming and then we'll jump into the demo and program with JavaScript so let's get started right away imagine the following scenario you wake up in the morning get your coffee open your laptop and open Facebook in your browser so let's pause there what happened when you typed in Facebook in your browser and you saw a fresh new feed with all the new stuff that has happened while you were asleep what happened there in the background technologically so Facebook is an application that some developers sitting mostly in California are developing and these guys and girls are writing a bunch of code and all that code that makes up Facebook lives in California so what happens when you open Facebook on your laptop is that part of that code that lives in California travels all the way to your laptop to your location and ends up temporarily living on your laptop that's why sometimes when you refresh and see a blank page or loading and you become annoyed because you can't see your feed within 3 seconds that's when all the data is coming or traveling from somewhere to your laptop so it may need some time so how does that travel there are internet cables everywhere in the world actual physical cables that let electricity travel through from one place in the world to another that's how everything is connected everywhere and that's why in some remote places in Africa or Asia or just remote Villages anywhere in the world where there is no internet and you're wondering like wow how is this possible no internet that's super crazy but that's pretty simple actually because nobody built those internet cables near those areas and regions because of economic reasons and so on now if you think about it it would be super inefficient if every time someone in Europe open Facebook and all the data needed to travel to these places all the way from California so Facebook has built locations evenly distributed all around the world that store part of the code and data that doesn't change much so it can get to you much faster so back to that part of code that just traveled to you that's HTML CSS and JavaScript so what are these when you see a website that just looks ugly so we just text no fun colors no styling that's a naked HTML it's necessary but no one wants to see some plain ugly text without any styling so what makes the text pretty and it colors and some fun to it is CSS it's like flash on a skeleton now you have a flash that looks good but it doesn't do anything it doesn't move it doesn't talk doesn't respond you can interact with it and it's the same way with HTML plus CSS page typical use cases are visit card websites where you can read texts displayed in nice style but you can't leave a comment you can send a message you can do anything with the website so all that action comes purely from JavaScript so you want to upload a photo on Facebook that's JavaScript you want to send a message through a messenger that's JavaScript you want to like your friend's picture or leave a comment all JavaScript so everything that you interact with in the UI which stands for user interface is through JavaScript and the combination of these three HTML CSS and JavaScript is called front end it's the Facebook code that everyone sees so it's in the front and as I said all these three files leave on your laptop when you open Facebook so you can see and even edit them so I could go and change Facebook style like this and this won't affect anyone else in the world since everyone has their own copy of these files on their laptops but there is another part of the code that doesn't travel to you the beckon code that is in the back and no one can see so you may be now wondering if I can do anything in front end like upload images message someone leave a comment like what's the backend for what does it do well when you upload a picture on Facebook you surely want your friends to see that too or when you message someone you want to keep a history of these messages that means you want all this data to persist or in other words the data to be saved over time now if JavaScript only leaves on your laptop it wouldn't make sense to just have that photo only locally on your computer that's where the beon comes in so what happens is that JavaScript takes that image that you uploaded puts it in an envelope and hands it over to internet saying hey can you deliver this to backand at this specific location so now we can follow this delivery all the way to the backend and see what happens there or what what does backend do when it gets that image now Beck in code can be written in Java python PHP or even JavaScript so there are different technologies that you can use to write all that backend part of the code so let's say in our example it's Java so what does Java do it checks and examines the photo it sees is it a valid delivery there's no threat no danger I know the sender I trust it so I'll open the envelope see everything is fine and hands it over to database to save it for lat so database is like a warehouse it's a big space where you can keep all the images messages likes comments that different users are producing it's all in there so to have a more specific understanding let's actually see how the location where beckon code and database leave quote unquote actually look like so as I mentioned before Facebook has all these buildings distributed all around the world actual physical build buildings with servers inside and I don't know what you imagine when you think about servers but whatever it is it's probably not very close to reality so let me show an example of a server building of a typical big company like Facebook so it's a location where machines uh that're interconnected with each other are running 24/7 in order to make sure that Facebook or this application is available for everybody in the world all the time and that's where Beck and code and database actually leave so that's where all the magic happens so when the envelope gets delivered to your backend that's where it ends up so the address that it's sent to is one of those machines in among these hundreds or thousands of machines that will take your image validate and then save it into a database so it happens all inside there so now consider your friend logs into Facebook on her computer same way front and code travels to her laptop along with new data like images messages from friends Etc all coming from these servers so how does Facebook know what data you should see on your news feed now in the database Warehouse Facebook creates isolated spaces for each user with their personal data images Etc and obviously on Facebook you want to have some privacy meaning you want only your friends to see your posts so Facebook creates Connections in the database between users that are friends and that's how Facebook decides what information to send to a user when they log into the application along with new data like images and messages from friends including the image that you just uploaded all coming from these servers so to summarize a web application is always made up of three components you have a front-end code backend and database front end is what you see and interact with in your browser in the user interface of the application backend is the code that waits for new messages from Front End about the changes you make like new uploads new messages likes and handles them and database is where all these changes are stored for future usage like when you come back the next day to use the application or when your friend ens the application most of the applications are written by teams of developers and not just a single developer and there are a lot of developers that are full stick meaning they know all three they can work with front end backend and database however each of these three areas alone is its own it field so some developers actually choose to specialize in just one area and become for example a frontend developer so in big companies like Facebook you would have teams with specialized frontend developers backend developers and database developers and these things like front-end backend database and virtual servers you actually learn all these in our software engineering mini boot camp so if you're a complete beginner in this field and have no it knowledge and feel overwhelmed by all these Concepts and components and don't know where to start then this mini boot camp is going to be exactly for you so make sure to check out the link to the course in the video description so now that you know the basics of how the websites are built and generally how the web Works let's start by learning programming Basics with JavaScript so let's see what JavaScript is and how it's used all modern web applications which are applications that are used through internet browser are all written using JavaScript because it has become the standard in developing web applications the way these web applications are built is that you have a layer of HTML which gets styled and made more beautiful by CSS in order to make this beautiful surface also called user interface smarter and more intelligent we use JavaScript to write logic to create features examples of such features are user registration booking a ticket online shopping sharing photos writing messages Etc so when thinking about how websites are built one can separate the design layer and logic layer and in big complex applications used by millions of users each part becomes big enough on its own so as a result you also have website designers also called UI designers and JavaScript developers as separate jobs maybe you've heard of programming languages like Java python C Etc in one sentence all these are backend programming languages and JavaScript is a frontend programming language in fact JavaScript is currently the only programming language you can use to write front and code now to make all these more tangible let's see how HTML CSS and JavaScript code actually looks like HTML CSS and JavaScript are simple files that you write in a text editor and these files have texts and keywords in them which have specific meanings to the browser in other words browser will know exactly what to do with these keywords so the question is when you create file with JavaScript keywords inside how does browser know that it's JavaScript and not some other text it knows because you tell it explicitly using the file extension the typical simple file will have a text extension txt for example but when you create file called for example app.js browser knows it must interpret all the contents of the file as JavaScript code and it works exactly the same with HTML and CSS to note here browsers are also written by developers using some code so this functionality to interpret HTML CSS and JavaScript was explicitly programmed and made part of all modern browsers it's important to mention here that learning HTML and CSS is pretty easy since there are just a handful of Concepts you need to understand and learn they don't change much over time and they're also less logical so it's more learning syntax by heart to use them JavaScript on the other hand is very Dynamic and much more powerful since you write almost all the logic with it so JavaScript changes a lot and improves continuously to make writing all these logic easier and more structured so obviously when you look at at a simple web application Logic for simple payment or uploading a picture or writing a message can be straightforward and easy but think of the complex websites use daily that have hundreds of functionalities so that's a lot of JavaScript code that developers have to manage and work with and that can be very challenging because of that over time many developers or teams of developers that use JavaScript came up with different ways to improve it and make it easier and better and they did it in parallel independent of each other or also based on each other's ideas and as a result different JavaScript quote unquote flavors or as we call them Frameworks emerged so framework is basically an improved version of pure vanilla JavaScript which offers its own additional Concepts and syntax on top of JavaScript Concepts and syntax that makes writing complex JavaScript code easier and most of these Frameworks help you pretty much do the same but the difference between them is in how they help you write the code structure it and manage it and naturally when other developers tried all these different Frameworks a handful of the best of these Frameworks became widely accepted and some of the most popular are reactjs angularjs and vuejs so both pure JavaScript and JavaScript Frameworks are continuously developing and improving in parallel now to mention here nodejs which is also a JavaScript framework is different from all the others because it's meant not for frontend code but for backand code so it's an alternative to Java python C Etc this means that if you learn JavaScript you will be able to basically program the whole web application from front end to backend using just JavaScript which could be a one incentive to learn JavaScript this means that in order to learn any of these Frameworks that I just mentioned you first need to understand basic JavaScript Concepts and syntax because all of these Frameworks are based on JavaScript and once you've learned basic concepts of JavaScript then you can go ahead and choose one of these Frameworks to learn and it will be much easier for you to learn Concepts and syntax of that framework on top of JavaScript and in our software engineering course we learn JavaScript in depth and then we learn vue.js framework specifically and how to build applications with it plus in the course I point out exactly and compare the advantages of using a framework compared to vanilla JavaScript to build front-end applications so in the next sections we're going to cover the basic concepts and syntax of JavaScript so that you have a foundation to learn any JavaScript framework so let's start by learning the basic building blocks of JavaScript which are the data types and variables and we will look at javascript's five main data types and then I'll show you what variables are and why we need them know that these two building blocks are the same for whatever programming language you learn so if I was doing a Java tutorial the concepts would be the same the difference is in the syntax and this is a good thing because unlike learning natural languages when you learn one programming language it will be much easier to learn another one so with that said let's Dive Right In now the simplest way to start writing JavaScript is directly into the browser since all modern browsers are able to interpret JavaScript and come packaged with so-called developer tools so open either Firefox or Chrome browser on your laptop if you don't have these browsers installed I suggest you install them because using browsers like Internet Explorer to run and execute JavaScript is not a good idea so I would download either Firefox or Chrome and in your browser right click somewhere on the surface and select inspect if your browser is in your native language then it would be called something else but it should translate to inspect and when you click that you see something like this and this space right here is called developer tools and here you should see a console Tab and when you click on it you get this space where you can write JavaScript directly in the next section I will show you all the different places where you can write and execute JavaScript and which one you will usually use as a developer but in this part we're going to use the browser console so that I can demonstrate some simple examples so the first data type that we're going to talk about is numbers obviously when you're writing an application you need numbers some of the examples are uh YouTube displays number of subscribers for each Channel or number of likes for each video or how many videos one has when you search something on web application like Google for example you usually see total heits uh Etc so these are all use cases where you need numbers and these examples use whole numbers but for example when you have an online shop where you need to display prices prices obviously won't be whole numbers always but rather decimal numbers with send de ision also Amazon ratings right they can be 4.5 for example and in JavaScript there are own data types for whole numbers and for decimal numbers the whole number data type is called integer and these are numbers like 0 300 minus 45 so positive negative numbers they're all integers and decimal numbers have a data type of decimal and again they're positive or negative or zero so 0.0 um 90 777 minus 50.5 they're all decimals the second data type is string the way I like to explain what string is is basically everything you see on your keyboard so obviously all the letters no matter what language they're in but also all the special characters like M percent plus minus and also the space character on your keyboard you also have numbers and numbers are characters or strings also so how does JavaScript know whether you mean a number like integer or decimal like five for example or a character five it knows it using quotes So you tell JavaScript that you're using string by using quotes it could be single quotes or double quotes So this single characters or any combination of them is a string so let's say a couple of examples so three in quotes is a string a o with umls letters from non-english alphabets combination of letters and numbers special characters like in email or in password and also an empty space character is also a string so just to mention here so difference between character and string so character is basically just one letter or one number one special character and string is a character or a combination of multiple characters so these are all strings and this single keys are characters another data type in programming languages is Boolean now to understand this let's say you enter wrong password when logging into your application usually you get a message saying you provided a wrong password or you accidentally enter wrong credit card number uh when buying tickets um or invalid email address when registering so in the background developers write JavaScript code that validates whether the information that you provided is wrong or right or correct and to express that wrong or correct state booleans are used so word true expresses correct State and false expresses wrong state so again just like with numbers you can write a simple string false with quotes and JavaScript know that you mean a string without quotes it will be a Boolean expression false that's how JavaScript can differentiate between those two in addition to that true false can also be used for simple yes no situations like is the apartment on Airbnb available to book on this date yes no that will be true or false in Boolean terms or is user logged in depending depending on whether logged in or not you will see different web page that's a Boolean expression is it a premium user true false also bulling expression Etc another data type is array that expresses lists think of applications that display lists of the same kind of data like list of friends on Facebook or list of apartments on Airbnb or list of comments for your Instagram picture lists have their own data types in all programming languages in JavaScript its data type is an array for example list of friends names will look like this it will be an array that's an array that includes multiple names and now the syntax of the array that encloses square brackets so that's how JavaScript knows or can interpret that it's dealing with an array or you could also have a list of ratings for Amazon products for example so this will be an array with numbers as you see array contains other data types so here we have uh list of strings and here we have numbers and in JavaScript you can mix different data types inside an array here we have integers and decimals in one array you can also write an array like this where you have string in integer and Boolean expression and the last data type in JavaScript is an object now in the Amazon review for example you don't just see a list of ratings you also see the author's name next to the rating and text they wrote In addition so you need all this information grouped in one item in the array you express that using object data type so a single rating object will look like this and not the syntax of curly braces so as we saw array was expressed using square brackets and object is written using curly braces so that syntax is important so that JavaScript understands what data type you're writing another example is an apartment object on Airbnb which will include all the attributes it has like location price ratings description availability images Etc so an object for that information will look something like this just with more information inside and here you see that the syntax highlighting of the browser is also helping to see that strings booleans and numbers are colored uh in different way meaning that JavaScript understands the difference between them so as you see object has key value pairs so that you know which value stands for what so all these author name user are 12 rating five these are key value pairs where the key basically describes what the value stands for and the name of that key is totally up to you you decide what that's going to be also you can use any data type as a value inside of an object so here we have a string integer Boolean and array as a value and you can also use another object as a value inside of an object and finally uh if go back to the ratings you will have multiple rating objects so a list of rating objects so the final list of these rating objects will look like this so you will be an array with square brackets and it will have bunch of objects that are comma separated now this is probably the most complex structure you will deal with most of the time so it shouldn't get much more complex than this now we saw all these data type example values but how do you use them to write a so-called logic in JavaScript the simplest use case is some basic addition subtraction etc for numbers you can use Simple arithmetic from elementary school to calculate basic things and here I will use the chance to break this common misconception that you have to be super good at math to learn programming which is completely 100% wrong I was a software engineer for many years and worked in a lot of different projects and I have barely used anything more advanced than simple arithmetics like plus minus multiply and divide when writing web applications so in JavaScript you can do all of this you can do subtraction multiply divide and you can also combine them just like you would with a calculator and of course you can do the same with desk decimals some real life use cases for these basic arithmetics are for example when you add multiple items to your shopping card on Amazon you see the sum and you also see the price breakdown which is item prices plus shipment costs or when you have product ratings based on all the individual ratings you display the average rating or on Uber for example you see the distance from pickup locations to the destination in kilometers or miles and in minutes all of these are simple calculations which are possible in JavaScript now obviously all these operators are meant for numbers but there is a case where we can use the plus operator for string data types so what will happen if I write string 12 + string 12 so we get 1,212 so what happened here is that JavaScript knows that these two are are strings and not numbers and instead of adding them it handles them as strings by gluing them to each other and in programming that's called string concatenation and no you don't have to remember that word just so you know that there are weird names for simple things in programming the same way you can glue a string to any other data type so you can do blah to 12 and the number will also turn into a string so to say or you can do the same with Boolean values because JavaScript interprets that as you want to create another string out of these two values and this examples probably don't make much sense but in the next section of this video I will show you some more real life examples why this concept is actually very important now let's understand one of the most important building blocks of any programming language variables and let's see what variables are to understand the concept of variables think about the following scenario you change your username on Facebook so obviously your changed username is displayed on your profile but also all the comments that you wrote before the name change should now appear with your new username and also in all your friends lists your new username will appear all right so this means if you had Facebook code where your username is written in all those different places so you have your username in the profile section you have your username in comment one comment 2 Etc and in all your friends lists right written directly as is or let's consider another example think about online shop each product has a price and it's displayed in a list in the products own detail page and maybe also in combination to other products so if the store now offers a discount and the price changes obviously the price should be updated in each location where it's displayed so again in code it will look something like this obviously this is not a valid JavaScript code but just to give you an idea so somewhere in one Javascript file you have the list of products where the product price is directly written as is and you'll have the same in detail page section of the product and combination now when the username on product changes in those two scenarios all these variables need to be overwritten which means that you will have to go and change the price here and here and here and same with the username change it in all places where it's used now that would be absolutely inconvenient considering applications are so Dynamic and things change a lot so that's where variables come in so instead of writing the actual value in 10 different places you write the value once and then reference it 10 times from 10 different places and that reference to the actual value is called a variable and you give variables a name that makes sense for that value so for example product a price equals 50 so now you create a reference for the value 50 which is called Product a price or username equals app user a so you take the actual value which is string and create a reference to it but in addition to that you should also let JavaScript know explicitly that this random name that you just came up with is a variable and you do that using VAR keyword like this and remember keywords are words that have special meaning to JavaScript and because of that if you noticed the coloring or the highlighting of the word changed once I added VAR in front of it so now JavaScript knows that this is a variable keyword and this is the name of that reference or variable or the same with product a price variable and in code it will now look like this so first you'll create that reference somewhere like this and then in all the locations or all the places in JavaScript code where you need that value that actual number value you use the reference instead of the actual value so you have your text and the reference to the number in all those different locations and here note the plus operator that I showed you earlier this is an example of string cenation meaning string is glued to another value and this this is where this concept is very useful so when you run or execute this line what happens is that JavaScript in the background replaces this reference with the actual value so when I execute this I see product a price 50 and this is a real example where plus operator with strings is actually very important and you will use this a lot because you will use variables a lot in order to make this variable concept stick more let's consider two additional use cases first consider multilanguage applications on most applications you can select a preferred language and see all your navigation buttons Etc in your language now if application supports 10 languages obviously developers don't create 10 different websites instead the same text is translated in 10 different languages and reference using variables and depending on which language which the user selects the correct reference is used and the Second Use case which is very important is user input so when you sign up for a web application you need to enter your name last name email password these are all user inputs so what you input in the application as a developer when you when you prepare that code for future usage you don't know what these values are going to be because users can enter anything but what you know is the name of the variables that will reference these values and this way you can use the actual values without even knowing what they are now the question is when we create JavaScript files and write lots of JavaScript logic inside how do we run this logic in browser how do we give that JavaScript code to the browser to execute it there are three ways to execute your JavaScript code the simplest way to start writing JavaScript is directly into the browser this is a place where you can write JavaScript directly and the browser will interpret and execute your JavaScript code right here so you don't have to set up anything and this is the easiest way to start especially if you want to try out some simple commands so let's actually write some JavaScript code there so you can create variables here or you can do some calculations and you can at number one and number two Etc so you can do many things here however if I refresh the page of course all the code will be gone and also you can execute only one command at a time and usually when you're developing you want to save that code and execute the whole thing at once and not have it disappear every time you refresh the browser so for that you need to write JavaScript in a file and then give that file to browser in order to execute the code inside and the file that browser accepts to execute JavaScript code is HTML I'm going to create a basic HTML outline so that our browser can execute the JavaScript code so how can I write the HTML file with JavaScript code in an editor so if you are on Windows you may have a notepad a simple text editor or ionm have a text edit and I can create a new document if I open that I can write just normal text here so I'm going to write some simple html text and HTML as we saw at the beginning is a separate scripting language to basically write the structure of a website and I teach complete HTML and CSS in the software development miniot camp but here our focus is on JavaScript so we're going to use the most basic HTML possible to be able to execute JavaScript on the website so so maybe you're wondering if I'm writing HTML in the same editor where I would write normal text how does browser know that it's an HTML file well when you save the file instead of text document I'm going to choose HTML so HTML extension and I'm going to call this file index which is a standard or common name for the main HTML file so when I save this you also see the icon that has Chrome logo in it or maybe some other browser logo that means it's a browser executable and since this is just HTML in order to add JavaScript code I'm going to add tag called Script that's where JavaScript goes and and this is a part where we'd write all the JavaScript code so for example here I can create a variable called some name and so on now I said you can write the whole HTML and JavaScript in here but the problem with using the simple editor is that they don't help you in writing code so here you see they don't highlight the keywords they don't tell you you made a syntax error or any other tips so for example in browser when we wrote VAR name some name you get the highlighting of the keyword of the variable name of the data type for example if you have a number it has a different highlighting Etc so you don't have any of that in simple editor and it also looks pretty ugly so instead there are special editors for different programming languages that help you with highlighting and other features to write the code and there are special ones for writing HTML and JavaScript code specifically the one that we'll be using in this course is webstorm from jetbrains which is actually an integrated development environment M or IDE and not a simple code editor what does that mean exactly well when you install webstorm you basically have everything that you need for website development in there so various features Beyond just writing code are included out of the box or in other words you get an IDE with full batteries included and we'll see some of its cool features throughout the course so if I type in webstorm download we can check out their download page for your specific operating system and if I click on developer tools you actually see they have a list of multiple idees and they have dedicated idees for different programming languages and webstorm is specifically for JavaScript so it gives us these awesome features specifically for JavaScript development and the great thing is they have special offers for students universities startups for all their idees including webstorm so let's go ahead and download the webstorm IDE for free to develop our JavaScript application I'm using Mac OS so I'm going to download this one and once downloaded you just double click on this installer file let's drag webstorm to the applications and there you go we have webstorm available locally let's double click again and it's going to open the webstorm IDE this is the welcome page and let's go ahead and create a new product project let's call this JavaScript app and create and in the webstor settings I'm actually going to zoom in so that you can see the code better so I'm going to set it to 150 and there you go this is what we are starting with so now let's create a new file in our JavaScript application project if you go here and right click with your mouse you see these options and we we can create a new generic file or if we know that we're going to be writing a JavaScript or HTML file we can actually choose specifically that type of file and this way webstorm actually knows that you want to write HTML or JavaScript code and it actually helps you create the boilerplate code or the initial code for that file specifically so let's see what happens if I choose HTML file from the options and let's call this file index.html like we did before and know that we have HTML extension in the file name and if I hit enter there you go webstorm actually knows that this is a basic HTML structure all these tags are needed for a proper HTML page so it autogenerated all these so you don't have to type it out from scratch this is super convenient and let's give our index.html web page a tiple let's call it JS app just like we did here and that's it now you can ignore actually all this code here that was autogenerated this is kind of a structure a main structure for a properly formatted HTML so everything that is needed is right here what we want to focus on is writing our JavaScript code so if we check our index HTML file that we wrote before we have this script text with some JavaScript code inside so I'm going to copy that block we already have the body tags and the script tags usually go inside the head Texs so between those opening and closing head Texs or between the body Texs so in our case we're going to add them in the head and as soon as I paste in the script block webstorm IDE already highlights some of the issues with our syntax so because we use this simple text edit editor we have some wrong characters that can't be interpreted by the browser so we need to fix them and know that we have these red underlines here that are for error and then we have these orange underlines which are for warning so this need to be fixed because otherwise our JavaScript is not going to work so we're simply going to replace those with a standard quotes basically and that's it and as you see with the syntax highlighting the value assignment to the variable is working now and the error is gone now you notice we have another underline here which is a warning this means the code is going to work fine without any issues but we could make some improvement to this code it says VAR is used instead of let or const so what is it about back in the day when JavaScript was in the early phases VAR keyword was used to declare the variables later as the JavaScript programming language evolved and improved and Engineers who were developing JavaScript programming language made those improvements these two Alternatives were added to defining variables the let and const keywords and the reason for that Improvement or the main benefit of that is to prevent basically accidentally overwriting the variable values because JavaScript is very flexible which is great but it also means means that you can make lots of accidental mistakes and one of them being defining the same variable multiple times and accidentally overwriting the previous variable because you didn't know that you already had that variable in your code and because of that we have these two Alternatives so the con is basically for use cases where Define a variable so basically a value that you want to reference in multiple places but that value should never change for example if we're developing an e-commerce application for Nike the name of the shop or the brand name Nike should never change right imagine someone overwriting the name of the brand or name of the shop from Nike to something else so this value should not change dynamically within the program or within the application so we had thousands of lines of code here there should not be a line that overrides the value of brand if that happens accidentally Again by the mistake of developer then and the fact that we're using const in front of it will tell JavaScript that program cannot overwrite the value of this variable and for all the other use cases where we want to allow program to change the variable value we can use let instead of the VAR example again would be if we had some prices for different items and then on some days we have a campaign so that price can dynamically change when discounts get applied for example or if we have a customer name and they change their username or whatever that value could change as well so using let for all the other variables instead of VAR is a good practice and as you see webstorm itself is helping us especially as beginner developers to learn those syntax issues as well as good programming practices so now we have a fully functioning HTML file with JavaScript code inside that is working and properly written now the question is is how do we execute the index HTML file in the browser so how do we take this file and contents and make it work in the browser now there are a couple of simple ways to do that and I'm going to show you all the options so you can compare them the first very easy option is to drag and drop this file into the browser so just open a new tab on the browser and we need to locate this file in the file explorer and we can do that by navigating directly to this file using this location that you see here so this is my home directory called Nana and inside that I have these webstorm projects which automatically gets created by the way by webstorm and inside that I have Js app and index.html or you can also save yourself all that just right click on the file itself open in finder and there you go so now back to the browser one way to execute this index.html in the browser is just take this file and drop it inside the browser and there you go now we don't see anything here it's just White Blank Page because we are not displaying anything we're just creating a variable not even using it but if we open the inspect or the developer tools of the browser we can see that this is exactly our our index.html with our script inside so that's one way a second also very simple way is to Simply double click on index.html and this will open a fresh new browser tab like this again the same page with the same contents and note that we have this title here this JS app displayed which we defined right here so that's the title of the web page now there are two more ways of executing our index.html file specifically using web stor and these are actually way more convenient because you can open this file directly from here using one of the browser icons so webstorm actually detects the browsers that you have available and it will show you the icons so you can open this HTML file in one of your browsers so if I click inside side again this opens a new browser tab automatically this is our title it even has this webstorm logo here as you see the value inside the browser URL is different because it's coming directly from web store and inspect again there you go this is our code and final probably the most convenient way of opening your index.html file a browser is using this web storms built-in browser preview so let's click on this and see what happens and as you see it shows us the browser integrated directly in the web storms IDE and that leads me back to the name IDE which stands for integrated development environment so basically this is an environment where all the tools and the things you need for application development are directly integrated in into this environment and the convenient part about this is obviously that you don't need to switch between the IDE and the browser you have everything in one place you have your folder and file structure here you have the code editor here and you have the browser and a cool thing about it is that right now we don't have any text displayed on the website but let's actually display something so we can see how it works this is our awesome JavaScript application and as soon as I save and by the way shortcut for saving is command s on Mech or control s on Windows as soon as I save notice here the text is displayed right away right and again add something here and all those changes are directly displayed here this saves a lot of time when you're actually actively developing and making thousands of changes so you don't have to refresh and reload all the time so this is available out of the box in our case we're actually going to stick to the browser because we want to use the browser developer tools because we're going to be outputting some stuff here for our tutorial specifically however if I was developing myself and writing the HTML code then I would actually go for this preview feature so let's close this and we already have the application open in browser and you noticed that on the browser as well without refreshing or reloading the page the changes are automatically applied so let's go back and remove this and again let's save go back and the changes are applied so we have the same auto sync or automatically reload on Save when we open this index.html using one of these browser icons here which again as you know notice is different from when we directly drag and drop the file in the browser here we would have to explicitly refresh to apply the changes now this may look like a small thing when you're just getting started however when you're a little bit more experienced and you're developing actively this may save you a lot of time and a lot of nerves awesome now if you want to also display stuff in the browser console we can add a line here console do log which basically outputs whatever we pass in to the browser so we can pass in the variable reference or a stream directly like this again as soon as I save this will automatically be reloaded in the browser and there you go we have the variable value and we have whatever I wrote directly in the console.log so console.log basically prints out stuff directly in this console tab right here now imagine we actually wrote Our HTML web page structure right here within the body Tex which can be actually a very large HTML file and in addition to that we wrote a lot of JavaScript functionality within those script texts that will be pretty inconvenient because now we have lots of lines of code within one file so we have HTML here we have JavaScript here and maybe thousands of lines of code which makes it difficult for us to have an overview of all the things this file contains and we're kind of mixing two different things within one file so in programming as your code grows it's always a good practice to keep your code clean have multiple files where each file contains a limited number of code lines so that you can easily navigate through your application code or if you have new team members new developers joining your project team they can easily navigate through the application code so it's always a good practice to have your code clean and especially to separate the functionalities from HTML CSS and JavaScript that means instead of having our JavaScript code directly inside we want to actually have it in a separate Javascript file and Link it here and it's super simple actually so first thing we want to do is to create own dedicated JavaScript file instead of having JavaScript directly in the HTML file so going back here right click with your mouse again and this time we're going to create a new Javascript file and we're going to call this .js and again notice the JS extension in the file name this way browser will know this is a Javascript file hit enter and you also see these different icons that webstorm displays for different file types so even if we did not have the extensions for the files just by looking at the icons you will know this is Javascript file this is HTML and obviously other types of files will have their own icons as well this is so now we're going to Simply take all this JavaScript code that is defined within the script text we're going to cut that out or you can just use the shortcut and we're going to paste it directly in here and you notice in JavaScript file we don't need any text we can just write JavaScript line by line like this and you notice again webstorm detecting that it is a Javascript file actually provides some additional functionality even to our code and one of them is showing the data type of the variable So based on the value it's automatically detected that this is a string variable and it's basically showing that as an additional hint to help us in programming however we're not done yet because now we have those empty scripts but there's no linking or connection between our HTML and JavaScript file we need to actually tell this HTML file to get the script from somewhere so we need the source of the new JavaScript code and the way we Define it is we leave this section empty so nothing actually goes between the script tags and instead within the opening script tag we Define a source SRC so this basically is a pointer to JavaScript file that contains the script that we want to load as part of HTML page and as you see again super conveniently webstorm is automatically suggesting us all the files that we have in our current project and it tells us you want to to reference epto JS and if we do if I just click on it it basically automatically sets that as the source name right here and that gives us the link that we want and again super convenient especially as a beginner that the IDE itself provides all these additional explainers telling you what different tags are and so on and as I said nothing actually goes between those script tags so we can just leave it empty and this will load the same script that we had defined directly here now from a separate Javascript file so in order to test this I'm going to make a change in the JavaScript code and we're going to see whether that is actually reloaded in the browser once we save it so I'm going to say output in console from app.js file and I'm going to save this make sure to save both changes in both files because if if you don't save the changes in webstorm it's not going to be reloaded in the browser so now let's check back with our browser and without any refresh you see output in console from .js file and if I go back to the elements which is the HTML tags body and so on we see that script is linking to app.js and this is another element that is also loaded in the browser along with HTML file and that is also very interesting and important so these are the HTML elements on the page however if I go to the sources tab right here you see our index.html file this is the file that we wrote and this is some additional stuff that webstorm actually adds to our index HTML automatically to give us this automatic loading and then we have our .j s file also loaded alongside and if I check the sources of our previous index.html that had the script directly you see that we don't have any Javascript file it's just HTML now let's learn about the next important concepts of conditionals and comparison operators which are also common Concepts across all programming languages and if those terms sound scary to you I'm going to explain those with very simple examples and visualizations to make sure you understand them very easily so first let's see what comparison operators are let's consider as an example Facebook featured to display birthdays of its users so basically if today is your birthday Facebook will show a birthday icon and will send notifications to all your friends and for Facebook to check whether it's your birthday today basically it has to compare today with your birth date right so that comparison or equals in JavaScript is expressed with three comparison signs like this so one comparison sign is reserved for assigning variables so double or triple equal signs are used to check the equality of two values so let's see the difference between the two so let's say I have a variable H 30 so if I compare value of variable H to 30 then I get true right if I triple compare that I also get true so same results now if I compare the value with a string representation of 30 I also get true however if if I triple check I get false and this is the difference between these two the double comparison checks equality of the values on two sides so checks the value here checks the value here and Compares them by the value the triple equality Compares value and also the type the data type of those values so if I have a number here and a number here which are the same values then it's going to be true if I have a number value here which is defined here and a string value here of the same value I get false because the data types are not the same so that's the difference and obviously if I put here another value it's going to be false in any case right like this or like this doesn't really matter and that little difference can actually have a big impact that's why this concept is important in JavaScript general rule is that you should in most cases use the triple equation to compare two values now let's consider another example where you order something on Amazon and says that shipping is free above purchase of €20 so when you add things to your card program checks whether your order total is above 20 or below 20 and then calculates the shipment cost based on that and let's say it charges you5 if your if your total order is under €20 so now we don't have the equal check anymore but rather is it higher or is it lower so the way to check that is let's clear this so let's define the variables so you have the total price let's say you gathered items that are €19 and now the program checks if total price is greater than € 20 you get a bullan expression of false because this condition is wrong in the same way the program can also check the opposite direction so we can check whether your total price is below 20 but notice that we don't check for Value 20 so what happens if the total price is exactly 20 so basically here we need to check that if total price is below 20 or €20 in both cases you get charged for the shipping so in order to do that you can combine those two expressions and say like this so either it should be less than 20 or it should be exactly 20 and as you see each of these comparisons return to you a Boolean expression of either false or true only one of these outcomes is possible so what this means is that in the program you check if this condition comes out as true then you want to offer free shipping otherwise you want to charge €5 for shipping and the way it's going to be written inside of the program using JavaScript syntax is if tour price is greater than 20 here will be code that let's say calculates um or sets the price of shipping so here we set it to zero there's no shipping cost otherwise is expressed with else shipping cost equals to 5 so this is how the conditions are used in JavaScript to check the condition and based on that do either this or if we switched that condition we can also check if total price is less than or equal to 20 then shipping cost will be set to five otherwise the shipping cost will be zero so to go back to some technical terms in JavaScript this here is called if else statements whatever is inside if is called a condition so this thing here that evaluates to either true or false is a condition and this here that compares those two values is called a comparison operator so greater smaller equals Etc all these are comparison operators but let's say you have a case where you have three different shipping costs right so for example if the price is below €1 you get charged 5 shipping cost if it's below 20 you get charged only €3 and if it's above 20 you get charged nothing now you don't have if else only but you have three conditions it's also super simple to do that with if else so basically you check again if total price is less than or equal to 10 you get charged 5 and here you are going to say else if which is another statement where you can write the conditional where we're going to check whether total price is less than or equal to 20 in that case you get charged €3 and there comes our final else which is zero so now I have three conditions here so the first condition here says it's less than or equal to 10 the first one checks another condition and the third one um important thing to note here that the last else or the the else here doesn't have a condition explicitly but it implies that both of these above conditions were false so both of them were wrong be and because it's implicit we don't have to check it explicitly here so you could also go here and do that else if price is greater than 20 and this will work just fine however because it's implicit we don't need that so we saw comparisons between two values using equals higher or lower the final operator is not equals for example consider a feature where a web application checks whether user is a premium member or not obviously if you are not a premium user you won't see the cool features they have or you won't be able to access some premium content so when you log in program will check is user membership premium so with equals or it can check user membership not premium and in order to express that negative comparison you use this syntax so not equals in JavaScript is expressed with exclamation mark and double equals and to show that in IFL statement let's say if user membership is not premium show user non premium contents or maybe even recommend a premium upgrade as a marketing measure and else show premium contents and finally you can combine all these conditions so for example if today is your birthday and you have displayed that on your profile only then the program will show the notification so both conditions must be true so if today's date is the same as your birth date and birthday displayed is true so here you can use a comparison with uh Boolean true or false so both these conditions must be true for notification to be sent and in JavaScript the Syntax for end is this so This basically is also a valid condition that you can also put inside of the if condition so if this whole thing is true then show notification else do not or another example back to the shipment cost let's say you don't pay for the shipment if the total price is over €20 or you have Amazon Prime account so the way to express that would be total price over €20 or Amazon Prime equals true so here only one of them has to be true for you to get free shipment or in JavaScript is expressed with double pipes and again you can put that in if statement and say if either this or this is true then give a free shipment otherwise don't and you can also use negation in conditions for example you want to check whether this whole thing is false and the way to do that is using the exclamation mark and the brackets so basically this will check whether this whole condition is false now let's learn about one of the most important Concepts in any programming language which is functions and let's understand with simple examples what they are and why we need them so let's go back to our JS app project and we're going to work in this EP tojs file so I'm going to delete this and instead we're going to work with this simple shipping cost calculation logic so this if else statement is our JavaScript logic that basically calculates based on whatever total price is how much shipping cost a customer will have to pay and let's actually output whatever the shipping cost is in the console so we have this application up and running open in our browser so whatever we output with console.log is going to appear right here and in webstorm actually there is a very convenient way of writing console.log if you're lazy like me and don't want to type out the whole thing you can simply do log enter and that basically autocompletes console.log now we want to log whatever shipping cost value was calculated by our logic so I have just set 19 as a total price you can set whatever value you want and then we're going to output the result I'm going to save it and if we go back to the browser you see the output here however I don't want to see just number I want to see what is it exactly what does a number refers to so I want to have a full sentence like shipping cost for you is whatever the value of shipping cost variable is so basically we have a string here string value and with that string value we also want to Output the value of a variable and there is one way to do that in JavaScript which is just combining these two with the plus sign so it's not an arithmetic operation like with numbers but in this case it basically takes whatever string value of this is and then whatever value this variable has and outputs it as one sentence or one string so if I save this go back there you go you see the full sentence however there is more elegant way to do that which is is way nicer which is we remove these double quotes here and instead we use what's called back ticks like this for the entire thing including the variable and then to tell JavaScript these are all text and this is actually name of the variable it's not the string itself we use this syntax which is dollar sign and curly braces that's it and you see in webstorm itself that the highlighting the syntax highlighting changed so this is treated as a variable so it's value will be extracted and this is treated as the normal string again let's save go back and we have the same result okay now this whole thing here is a fully functioning logic that we wrote in JavaScript that takes whatever total prices and calculates the shipping cost based on that and then outputs it in the console now imagine if we really had an e-commerce application we would have thousands or tens of thousands of users maybe and everyone will be shopping in their own shopping cart and adding items so we would actually need to calculate this for every single purchase they make on our e-commerce application so this logic this whole thing May repeat in our application code multiple times and imagine we had 10 different places where this calculation needs to be done and we would have to basically replicate this code in 10 different places throughout our application code that seems like a very inefficient way of coding right because we're repeating the same thing 10 times like I explained with variables where we use the same value multiple times except in this case it's even worse because we're repeating the the entire code block multiple times and that's where functions come in so you can think of a function as kind of a variable reference so just like we saved a certain value once in a variable and then we reference that variable every time we needed to grab that value the same way we can save an entire code Block in a function and then whenever we need that code block or that logic we can reference it by using the function name so I'm going to put this entire code block including the assignment to total price variable inside a function and the Syntax for that is actually super easy what we do is just like with variables we have VAR or let or const keyword with functions we have one keyword called function then then we have the name of the function which is usually descriptive that describes whatever that code logic that the function references actually does in our case let's call this calculate shipping cost because that's what the code block does right calculate shipping cost and note at the end of the function name we have this brackets opening and closing brackets and after that we have curly braces and these curly braces will basically contain the block the code block that function references so if I take this whole thing and paste it in here and there you go we have just created or declared a function and know this indentation right here so with this curly braces we're telling JavaScript that this is the start of the function code block and this is the end so whatever is between those curly braces is the code block or logic that will get executed whenever we reference this function name and just like here we have this indentation here we have the entire function body indented and webstorm actually handles the indentation so we don't have to fix anything now you probably also notice this underlines here this orange underline again webstorm is helping us understand some improvements that we could make to our code so this is not an error this would actually work however there is a room for improvement and let's say as a beginner you see these underlines and you hover over it and you see this description like implicitly declared and you're thinking I don't know what that means so I don't know how to fix that warning another really cool thing that webstorm has that I have used extensively in my programming projects is kind of an Autos suggest for the fix so what you can do is whenever you see this kind of underline you can use this shortcut that you see right here which on MacBook is option enter with the mouse inside that code block that needs to be fixed I'm going to do option enter you see that webstorm actually gives you suggestions to how to fix that so I'm going to choose the first one and let's see what happens there you go so you see the warning was about the variable shipping cost not being declared and webstorm automatically edit the Declaration in the code so let's put it here and there you go we have no warnings no errors and we just added an improvement to our code now since we didn't change any values the output of this function should be the same now let's save this code and let's see what happens when we switch to the browser let's see what we see there so I'm going to switch to the browser and you see we have an empty output so what happened here you see we have an empty output so this line of code obviously didn't get executed because we don't see the sentence in the console output so what happened here we have exactly the same code as before this time just in a function and that is a very important concept about functions that you need to understand as a beginner in programming that just like with variables we declare the variable which means we save the value into the variable reference and then later at some point we use that variable the same way we first declare the function or we create the function and we assign whatever code block logic to it and then later we can use that function or code block inside that function to execute the logic that means function declaration itself does not execute the code it just saves whatever code you put inside the function block and you also see webstorm actually highlighting this function name as gray and if I hover over it it says unused function so we have declared the function but we're not using it and using a function is also called in programming calling a function and the way to call a function is function name and the brackets and you see the color of the function name changed and it doesn't say unused function anymore so now let's save this and see the output in the browser if I switch back you see that function code was executed and we see the result right here and the great thing is now whenever we need this entire code block to execute we simply need to call the function with the name and that's it so let's say there was some logic here and somewhere down here we need that logic executed again we simply call the function and now it's going to execute same code block for that function call and by the way this is a Syntax for comments so whenever you start a line in JavaScript with Slash two times you also see the color is gray whatever you type in here this tells JavaScript that this is not a code that needs to be executed this is simply a comment a self note for yourself or for your programming colleagues which usually is used to document the logic that you write in the function if it's not understandable just from the code so let's clean this up and let's see another very interesting concept of functions now we know that the total price is a dynamic value so every time customers are shopping that value will be different so we can't hardcode it here instead it will always be different for each purchase of each customer so we need to use a different value each time we calculate the shipping cost that means we have to remove it from here and when we do that you see automatically this warning from webstorm that tells us this variable is not declared anywhere there is nowhere in the code where we're setting a value for this variable which means we're referencing a variable that doesn't exist that we haven't created so we need to do both first we need to create a variable and then we have to assign some value to that so so let's say at the beginning we have this variable total price which is a simple Declaration of the variable we're not assigning a value to it because the value will be dynamically set when a user gets on our platform and starts shopping right so let's say we have some logic here that basically tracks the user behavior on a platform let's say a shopping cart and user is putting the stuff in the shopping cart and the total price of whatever user is purchasing is now let's say €1 and the user continues shopping adding more items and total price gets to €1 19 for example and then at some point the customer is ready to order they have everything they need and now they want to basically pay and place the order for all the items so when that happens we want to calculate the shipping cost and again imagine this is all code in our application we have tons of logic and at some point we are calling the calculate shipment cost function to calculate the cost based on the total price for the customer so we want to do is we want to give that total price as input to our calculate shipping cost function which in programming is also called passing a value to a function as a parameter as an input parameter and that is also super easy we basically take the value or in this case variable that references the value and pass it between those brackets as an input parameter to the function and now you understand what the brackets are there for for a function when we have no input parameters that we're passing to a function then the brackets are empty or we can pass in one two or 10 parameters within those brackets and then on the function definition we need to explicitly say this function is expecting a parameter an input so whenever someone either us the same engineer who declar the function or your teammates other Engineers who also want to use the same function they know oh this function is expecting a parameter which is total price so I need to pass that input because otherwise obviously it can't do its job because the total price value will not be set and to do that we Define that in the function definition like this just the name of the variable and this is another very important thing these two names do not have to be the same so we're going to call this let's call this total price param or parameter so this is a variable reference to this value that we're passing here and obviously that's what we need to use in our logic within our function and something that is very helpful to understand this concept is that when we call this function with value 19 passed in as total price variable what happens in the background in the function execution is the following this variable is created within the function with a value 19 that's exactly what happens in the background when we pass a parameter to a function So within the function that is created as a variable with that value assigned and now we can use that variable within the function block wherever we need that value and we don't need to do that because it happens in the background and this is our complete logic so now the total price is dynamic it's calculated somewhere else in our application code whenever user is adding stuff to the shopping cart and when they click on check out or ready to order or whatever then we are calling this function and passing the total price as a parameter so this will be calculated and we can even add another console log here with our shortcut and say for total price of whatever the total price is I'm going to save this go back to the browser and there you go our logic is fully functional now let's do one final Improvement to our shipping cost calculation logic and let's say once a year in our company in our e-commerce company we change the shipping costs so last year it was five as a standard shipping cost and for little bit discounted version we had three but this year we want to increase those prices because of inflation or whatever so in this case the engineers or us in this case need to change the code to update the shipping cost values and we may be using these two values in other parts of the application as well for different logic like here we're doing the shipping cost calculation maybe we have a logic for discounts and these values are used there as well or in the checkout logic or in the payment function and so on so if these values change because of our company policy we need to go to our application find every single JavaScript file and code block where this is hardcoded and we need to update them and again this is a perfect case for using variables for values that are referenced in multiple different places and that may change at some point now in this case this is not a variable that changes in the program like the total price for example it's not a dynamic value it's a Val that changes less frequently and whenever that happens we manually have to update it in the code and those are variables that we usually Define with const keyword so that means right here we're going to create two variables for the standard shipping cost and the discounted one and we're going to call that exactly that standard shipping cost let's say we raised it to six 6 and we have discounted shimy cost which is 4 and as I explained the difference between these two is that the variables that are defined as const or constant those values cannot be changed programmatically you can only go here and update the value but the program itself cannot change it so JavaScript will not allow it so for for example somewhere in the code right here if I was like let's set it to seven whatever you see this error that says attempting to assign to constant or read only variable so this is not going to work which again prevents accidental rewrite of the variables and now we can reference the constants in our application logic and this is another very important Concept in programming especially when we're writing functions that as you see we started with a lot of hardcoded values and then step by step we remove them and now almost everything in our logic is referenced as variables and we don't have many hardcoded values here and this is a best practice in programming in general so now let's test our application again and let's say here the user started shopping they decided maybe we're ready to check out so we calculated shipping cost they remembered they forgot one item so they continued shopping eded that in the shopping cart now they ready to check out and we calculate the shipping cost again so in the first case we're at €10 which means they're paying the standard shipping cost as we have defined in our logic here with 19 they see discounted shipping cost so they will get charged the disc discounted shipping cost and when they see that they think you know what I would like to save myself that shipping cost entirely so I'm going to add one more item to my shopping cart to qualify for a free shipping with zero cost so here they add one more item that brings the total price to let's say 24 they will see the new shipping cost calculated which should be zero and here they place the order so let's save our logic and see the output and to differentiate between the outputs let's actually add like a decoration line kind of thing which basically outputs something like this or a divider just just a visual divider for us in the console log so let's save it go back and there you go shipping cost is six for the total price of 10 then we have four discounted one and here with 24 we are at free shipping and one final note that I want to make is you probably ask yourself about the variable and function names what you see here is called chemel case so you basically start with a lowercase character and then every other word that you add in the name is capitalized like this and this is a standard naming convention for functions and variables in JavaScript specifically know that different programming languages have their own different conventions that means you can name these actually whatever you want you can do this or you can do underline like this all of this will work because there are variable names you can name them as you wish however in JavaScript this camel case naming is a standard and with that congratulations you have completed the entire JavaScript crash course you have learned tons of very important Concepts that are the main building blocks of any programming language out there and you have a good basic understanding of JavaScript however this is just the beginning there are way more exciting and interesting things awaiting in the JavaScript world and generally in the software development world if you want to continue and really dive into this world of programming and the best most fun way to do this will be with our software engineering mini Boot Camp or what we also call an IT beginners course and I will be more than happy to continue teaching you there in it beginners course we're going to dive in deeper into the web development you're going to learn JavaScript Frameworks for front-end development and for backend development you're going to learn how to build proper websites with database connection and tools for managing dependencies of an application learn about HTTP requests and protocols as well as how to take the web application you just created and deploy it on a simple virtual server on a cloud platform learn about firewall configurations operating system commands and if any of these Concepts sound completely foreign to you and sound very difficult trust me you will learn all of this with the simplest explanations and examples that I use throughout the entire course to make this Learning Journey for you as simple and fun as possible so at the end of our software engineering miniot camp once you have learned all of this you will have a solid knowledge equivalent to a junior software engineer so absolutely make sure to check out our software engineering mini boot camp in the video description or directly linked here in the video and hope to see you there with that thank you for watching and see you in the next video

Channel: TechWorld with Nana

Views: 129,966

Keywords: javascript, javascript tutorial, javascript tutorial for beginners, html css javascript, html vs css vs javascript, tutorial javascript, javascript course, javascript full course, learn javascript, javascript basics, javascript syntax, what is javascript, javascript datatypes, javascript var vs const vs let, learn programming, techworld with nana, web programming, frontend vs backend, programming basics with javascript, programming basics, javascript variables

Id: FtaQSdrl7YA

Length: 97min 13sec (5833 seconds)

Published: Wed Feb 28 2024