What is JavaScript? | JavaScript Tutorial for Beginners | JavaScript Training | Edureka Rewind

Key Takeaways

hi everyone this is ZKA from edura in today's session we're going to discuss about the most popular programming language which is Javascript so without any further Ado let's get started now let me run you through today's agenda we're going to begin with what is Javascript what it can do where is Javascript Frameworks and how it's used with HTML and CSS to build a creative website next we look at the benefits of JavaScript and why you must learn it finally we're going to look at a few fundamental concepts like variables data types arrays IFL statements and so on we'll also be running basic JavaScript codes snippets on Visual Studio code which is an editor used to run a JavaScript all right guys let's get started with our first topic so what is Javascript now the first thing that pops into your head is probably it is Java so guys let me tell you that JavaScript has absolutely nothing to do with Java so why was it named JavaScript well it was sort of a marketing strategy when JavaScript was first released it was called mocha it was later renamed to livescript and then to JavaScript when Netscape and Sun did a license agreement now let's not get into the details of that now what is Javascript in simple terms JavaScript is a language of the web so basically every browser PC and mobile mile phone understands JavaScript it's like a universal language so what is Javascript used for it is used to make web pages more interactive let me tell you that majority of websites use JavaScript and all major web browsers have a JavaScript engine to execute it another feature is that it's an interpreted language which means that it doesn't have to be compiled like languages such as C and Java this makes it a lot easier for us because we can just run our code and we don't have to run it through a compile filer now another important feature of JavaScript is that it is mainly a client side scripting language thanks to JavaScript Frameworks you can now run JavaScript even on the server side so let me tell you a few more things about JavaScript so where does JavaScript run JavaScript runs on a browser so all you need to do is open up your Google Chrome or your Internet Explorer and start running your JavaScript all right so how do these browsers run JavaScript so these browsers have a JavaScript engine embedded into them now this engine will just convert your JavaScript into machine language and then run the code all right moving on we all know that there are hundreds of programming languages and new languages are being created every single day and among these there are very few powerful programming languages that bring about big changes in the market and let me tell you that JavaScript is definitely one of them JavaScript has always been in the list of popular programming languages and developers are falling in love love with this language they practically use it everywhere they use it on the web mobile servers applications and even in iot now this is probably why it's the most popular language in the world according to stack Overflow for the sixth year in a row JavaScript has remained the most popular and commonly used programming language now let's look at a few common applications of JavaScript so what can JavaScript do JavaScript is known mainly for creating beautiful web pages and web application ation s an example of this is Google Maps so if you want to explore a region or a specific area in Google maps all you have to do is click and drag with the mouse and what sort of language could do that you guessed it it's JavaScript next JavaScript is also used in smart watches an example of this is the popular smart watch maker called Pebble Pebble has created pebble. JS which is a small JavaScript framework which allows a developer to create an application for the pebble line of watches in JavaScript so a lot of developers have actually built Smartwatch applications features and such things using the JavaScript up next we have websites now let me tell you that most of the popular websites like Google Facebook Netflix and Amazon make use of JavaScript to build their websites I think that's enough proof for why you should be learning JavaScript now among other things like mobile applications digital art web servers and server applications JavaScript is also used to make games isn't that amazing now we are all aware that the browser has not been a traditional games platform but recently it has become a robust hor for games a lot of developers are building small scale games and applications using JavaScript and I'm sure all of you can do it too it's quite simple now let's talk about some popular JavaScript Frameworks which are the most favored platforms for developers and business in today's time angularjs is Google's web development framework that has exploded with popularity in recent years angularjs provides a set of modern development and design features for Rapid application development let me tell you that a lot of developers swear by this framework because it has a rapid development Pace another top JavaScript framework is a reactjs it stands behind the user interface of Facebook and Instagram showing off its efficiency in maintaining such high traffic applications despite the fact that react has a higher learning curve it makes application development straightforward and easy to understand it also performs very good in search engine optimization so guys by now all of you are aware that JavaScript is used as a universal scripting language in browsers mainly on the client side using it on the back end to save time and build expertise is one of the major ideas behind the meteor so finally frontend developers can also work on the backend come comfortably with meteor without switching context between Java python PHP and whatnot so it basically gives the flexibility to use one language everywhere I'm sure you all have heard of jQuery before whenever someone wants to extend their website or the application and make it more attractive and interactive they make use of jQuery now this Library transforms the whole web into an entertaining experience a fun fact about jQuery is that over 70% of the the world's leading websites have something to do with jQuery companies like WordPress Google and IBM rely on jQuery to provide a oneof a-k kind web browsing experience now anybody who's heard of JavaScript knows that it has something to do with HTML and CSS so what is this relationship between these three now let me put it down to you in simple words now think of HTML which stands for hypertext markup language as a skeleton of the web so basically HTML is used for dis playing the web next CSS is like our clothes we put on fashionable clothes to look better similarly the web is quite stylish it uses CSS which stands for cascading stylesheets to look better or for styling purpose then there is Javascript now JavaScript puts life into a web page just like how kids move around using the skateboard the web also motions with the help of JavaScript so JavaScript is basically for interacting with the web now before getting into the advantages of JavaScript let's look at a few common websites that are built using the JavaScript and JavaScript Frameworks so we have Amazon which is a e-commerce website I'm sure all of you have shopped from here then there's PayPal there is YouTube we all are addicted to YouTube there is eBay Netflix and Reddit so guys this is enough proof that JavaScript is a very important language when such reputed companies and Brands make use of JavaScript it means that it has something really nice about it or something very advantageous about it with this in mind let's look at a few benefits of JavaScript now it's quite easy to learn in fact it's one of the simplest programming languages it does not have a strict syntax and it's totally readable you don't have to be some hardcore programmer to learn JavaScript let me tell you that it is a weak type language unlike the strong type programming languages like Java and C++ which have strict rules for coding now the next feature is speed guys it's all about being faster in today's world and since JavaScript is mainly a client side programming language it is very fast because any code functions can run immediately instead of having to contact the server send a request get an acknowledgement and then wait for an answer all right now JavaScript comes with a rich set of Frameworks like nodejs angularjs react and there are hundreds of such Frameworks earlier in the session I discussed about how efficiently these Frameworks are used to build web applications server applications and perform different tasks JavaScript framework is one of the major reasons behind the popularity of JavaScript now the next Advantage is that it makes web pages more interactive so guys we are all attracted to beautifully designed and interactive websites and JavaScript is the reason behind such attractive websites building such interactive websites not only makes the web prettier it also attracts leads and customers to e-commerce websites so like I mentioned earlier JavaScript is an interpreted language that does not require a compiler because the browser interprets the JavaScript so all you need is a browser to run JavaScript and you can do all sorts of stuff in your browser without the pain of setting up environments code editors downloading compilers and then learning how to use them so instead of all of this you can just open up your browser and start running JavaScript so among many other advantages is the fact that JavaScript is platform independent JavaScript is supported by all browsers like Internet Explorer Mozilla Firefox Google Chrome Safari Etc so any JavaScript enabled browser can understand and interpret JavaScript code so you can run it on any platform all right so now that you have a good idea about what JavaScript is and how it works let's get on with the coding part I'm going to cover a few basic programming concepts of JavaScript and these concepts are quite similar to the C language so let's get started so guys let me tell you that every browser has a JavaScript engine and we can easily write JavaScript code over here without any editors or tools so this practice is not meant for real world applications but I'll just quickly show it to you all right open up your browser Internet Explorer or Google Chrome will also do and right click on the page click on inspect so this will open up the Chrome developer page all right now go to console this is basically the JavaScript console now let's see how to run JavaScript on the browser itself so let me just type a statement and then I'll explain what it does now basically this is a statement in JavaScript so what I'm doing here is I'm going to log this message hello world onto the console all right so I'm going to log hello world onto the console that's what this function does okay now this hello world is enclosed within brackets and within quotation marks and in Javas script we always practice to terminate our statements with a semicolon now let's press enter so here you can see that it's displaying hello world all right so this means that JavaScript works on a console so this is how browsers are embedded with JavaScript engine so that they can run JavaScript code now to write JavaScript code you require a code editor you can choose from a variety of options like Visual Studio code Sublime Text and so on but for today's demo I'll be using the visual Studio code but feel free to use whichever editor you want Visual Studio code is basically a simple lightweighted editor and guys I'll leave a link in the description box if you want to download the visual studio code you can go ahead and check the description box all right so I've already downloaded the visual studio code now let's create a folder okay we'll create a new folder to store the code that we'll be executing so create a new folder you can name it whatever you like now just drag this folder and drop it over here all right so here you can see the folder is created now we've got the folder open let's add a new file index.html to this folder now you don't need to know HTML to follow this tutorial I'm just pasting a basic HTML code here you don't have to care about this code it's just for creating a simple web page all right now over here I'm just using a header in order to display JavaScript tutorial and then within paragraph Tags I'm just displaying with edura all right you don't need to have a knowledge about HTML for this tutorial now what we're going to do is we're going to use this HTML page as a host for our Java Script code all right now make sure to save the changes Now open up extensions tab over here this is the extensions tab Now search for live server so guys I've already installed the live server but make sure you go ahead and install this right away live server is basically a lightweight web server that we're going to use to serve our web application all right install this and restart your Visual Studio code once you open Visual Studio code go to your index.html file okay and right click on this and now you can see this option open with live server you're going to get this option only after you install live server so make sure you do that first so open with live server yeah you can see this page the HTML page is over here now you can even check the console from here this is the JavaScript console all right so this will just open up uh your default browser and direct it to this address all right now this address is where our application is served from okay so here you can see the console as well now let's write our first JavaScript code so go back to visual studio okay now guys let me tell you that there are two ways of adding your JavaScript code in the h HML file first of all you need to know that your JavaScript code is always written in the HTML file or it is at least linked to the HTML file okay so like I said there are two ways of adding your JavaScript code in the HTML file now the first is to use script tags in the body section and type your JavaScript code within this script tag so let me show you how that's done now this is the body section the body section starts here and it ends here okay so you have to make sure that your script tags are within the body section now let's open script tags now in the first method you're going to type your entire JavaScript over here so within the script tags you're going to type your entire JavaScript so let's just type a simple line so we executed this earlier let's just do that let's log a message to our console all right so let it be hello we'll see if this works guys don't forget to terminate a statement with a semicolon all right now save the file and open up your browser here you can see that it's displayed hello all right this means it works now let's go and try the second method now in real world application the JavaScript code will have hundreds and thousands of lines and it is not a good practice to type your entire code over here all right so what we can do is we can open up a new file from the Explorer window all right let's go here open up a new file let's name it hello.js all right it's a Javascript file now what we we'll do is we'll copy this code and let's paste it over here now you have to reference this hello.js file in your HTML file so how do you do that okay so let's add an attribute over here this attribute is SRC all right SRC stands for Source now SRC equal to within the quotation marks we're going to write down the name of the Javascript file so hello.js is the name of my Javascript file let's close the tags okay wait this is opened up again okay yeah let's close the tags and this is the second way so we're basically referencing hello.js from the HTML file okay now let's save the changes here and now let's check our browser yeah you can see that it's printing hello so both the methods work so I hope you understood that there are two ways of adding your JavaScript code to your HTML file the first way is is to write the entire code within script tags and the second way is to reference a Javascript file in your HTML file so guys I hope you have a brief idea about how JavaScript works and how you can use your browser to run JavaScript okay so now let's get on with our JavaScript fundamentals I'm going to discuss variables constants and a few other Concepts over here okay so what are variables variable is a name given to a memory location which acts as a container for storing data now what does this mean let's let's say that I want to Define a variable called name and I want to store a name in it let's say the name is edura okay so I'm going to declare a variable called name and I'm going to store edura in that variable so name is the name of the variable and edureka is the value of this variable okay so what's happening here is a temporary memory location is assigned to the name variable and this name variable is going to contain a value which is edura okay now let's perform this PR practically so that you understand it better which is constants so what are constants constants are fixed values that do not change during execution time now there are times when we don't want the value of a variable to change because it might disrupt the whole workflow in such situations we make use of constants instead of variables okay now here you can see the syntax of constants now in order to declare a constant you use the keyword const all right you use this keyword now let's practically do this and see how it works all right so I'm going to create a new file to do this I'll name it constant okay now let's declare a variable so for declaring a constant variable make sure that you use const keyword okay so I'm declaring a constant variable here now uh let's say it's Pi okay I'm going to assign a value to Pi 3.14 now what happens if you try to change the value of a constant variable let's try to do that okay we change the value now let's okay let's log this to the console save the changes and make sure you change the path in the HTML file so here it's still linked to variable. JS change it to constant dogs if you're creating a new file that is all right now same the changes here as well now open up your browser here you can see type error assignment to constant variable all right this error is because we Tred to change the value of the constant variable it was declared as constant using the value 3.14 and then we try to change it to 3.12 that's why we have the error so guys you use constant variables only when you want to keep the value of a certain variable fixed all right it cannot change so that's when you use constants okay I hope you all are clear let's get on with our next topic okay primitive data type now guys there are different types of values that you can assign to a variable all right now in JavaScript we have two categories of data types one is primitive data type and the other is reference data types now primitive data types include numbers strings Boolean null and undefined reference data type on the other hand includes objects arrays and functions all right so now let's look at these primitive data types from Visual Studio code so I'm going to create a new file again give it any name you like all right so for this you'll have to Define a variable now to Define a variable you use the let keyword this is the name of my uh variable now in this I'm going to store the value Harry Porter all right terminated with a semicolon so guys here it's a string because we are using quotation marks we're enclosing the value within quotation marks so the computer is going to consider this as a string so even if I had let's say if I have something like this what do you think this is do you think this is a string or do you think it is a number okay let's check all right now let's log this on our console and see let's log age as well as let's log name save the changes make sure you change the reference over here all right so it's constant let's change it to primitive save the changes here as well open up your browser so it's displaying the two values okay now let's check the type of these variables type of age it's a string even though it is one over here it's still a string why is that that is because we enclose this one within quotations so whatever is enclosed within quotations is going to be considered as a string all right so we discussed numbers and strings so far let's look at Boolean let's Define a variable called option okay so basically guys a Boolean is used whenever uh there is a logical situation or a logic code that needs to be executed so if a particular condition is met or if a particular condition is true then the following code will be executed in such situations you make use of Boolean and Boolean can have only two values true or false so this is a Boolean now the next type of data type is undefined now what is undefined I'll show you let's Define a variable height now let's log both of these variables and we'll see the type of these variables okay so option then let's also log height save your changes open up your browser here you can see true and you can see undefined instead of printing anything it says undefined why do you think that is it's because we've defined height without initializing it at all so we have not set it to any number or any value that's why it's undefined so this is an and undefined data type so if you don't initialize a data type it's called undefined okay now the last one is null now let me show you an example all right so here I'm just uh defining a variable called I color and I'm setting it to null now we use null whenever we want to explicitly clear the value of a variable okay that's when we use null so I hope you guys are clear with the primitive data types now let's move on to our next topic arrays so what are arrays Aries are basically used to store multiple values in a single variable so if you have a list of items let's say that you went shopping for some art supplies and you got a paintbrush you got a canvas you got some palette you got pencils and you got spray paint now you want to list these down in one variable now to understand this better let's go to visual studio code and let's execute some code so add a new file called array I'm going to Define an array called shopping all right now in order to Define a variable you'll have to use a let keyword and you'll have to use the square brackets over here this is how you define an array okay now square brackets are because you have to store multiple values in an array so an array is basically used to show multiple values of a single variable okay so shopping is a variable it has multiple values now let's define the values in the shopping variable so the first value let's say it's paint brush I'm going to add a comma and add another value a comma is needed to separate two values okay let's add color palette add canvas okay so we have three items in our shopping list now let's just log this on the console save your changes make sure you change the path in the HTML file AR all right save it open up your browser now here you can see that it's displaying the entire array now guys let me tell you that arrays are numbered from zero so zero is the first element one is the second element two is the third element even though there are three elements in the array the number of the last element is two that's because you start numbering an array from zero okay so guys now how do you access an array element let's say you want to access color palette you want to dis color palette how are you going to do that now in order to do that you are going to write the name of the array and within square brackets you're going to put the number of the array element so if you want to display color palet the number of color pallet is one so you're going to type one over here okay close the parenthesis semicolon enter see it displays color pallet so this is how you access array elements okay so if you want to access only one element then just mention the number of that element and that element will get displayed now let's just play a little bit with arrays let's define a few other arrays let's see what else arrays can do so let me show you another example now I'm defining an array called numbers so guys this is how you declare an array you use the let keyword name of the array equal to square brackets and you terminate it with a semicolon okay now let's add array elements so I'm going to randomly add some numbers all right these are my array elements now let's add two numbers and display them on the console okay so how do you do that so let's add one let's add this element and this element all right so how do you access this element you just have to write the name of the array open square brackets and write the number of the array zero Plus numbers at position one so you're basically adding one and three all right save the changes go to your browser here you can see the answer is four all right now let's try some other thing let's try to sort these elements for that you use a function called sort Now sort is a predefined function so this sort function is going to sort this array all right save your changes let's look at the log yeah so it's sorting this array in order 1 2 3 4 5 7 now we know that six is missing here so let's add an element to the array so how do you add an element to the array so first you type the name of the array dot push all right now push is a function which pushes an element to the array all right now which element you want to push is going to be written Within These parenthesis so six let's push okay now let's check the array save your changes go to your browser now there are seven elements all right see you can see six over here now guys let me show you another example now with arrays in JavaScript you can have variables with different data types in one array itself so a single array can have variables with different data type let me explain this with an example so I'm declaring in a array called mix all right now let's list out the elements of mix so first I'm going to list out a string okay then a number then again a string okay now let's log this to our console and see what happens okay so this is the mix array so here you can see that it has four elements let's check the type of the first element how do you do that so you write the name of the array and you open up brackets and you write the number of the array which is zero so this is a string correct now similarly let's check the type of the second element this is a number so now we know that within an array we can have variables of different data types okay all right guys with this we are done with arrays now let's look at our next topic now our next topic is objects now what is an object an object in JavaScript is a lot like an object in real life for example let's consider a girl okay now this girl has a name she has a age she has eye color let's say her name is Emily her age is 15 years old and she has brown eyes so what did I just do I basically declared an object which was a girl and I list down her properties which is her name her age and her eye color so girl is the object name age eye color are her properties so this is how an object works okay now what are objects objects are variables too but they contain many values or many properties okay and each property will have some value now let's look at this with an example so guys I'm going to create a new file called objects now how do you declare an object so I'm going to declare an object called pen equal to you're going to use curly brackets to Define an object okay as soon you use these curly brackets it means that you're creating an object called pen okay and this object can store a lot of properties and each property will have some type it's like key value pairs where key is a property value is the value of that property so let's say that this pen has the first property of the pen is a type okay so I'm going to write ball point now you separate different properties with a comma okay now the second property is probably the color black all right now let's define another property called cost now know that over here I haven't enclosed 10 in quotation marks because this is a number it's not a string okay guys remember that so guys also terminate this with a semicolon now what did I do here I created an object called pen this pen has three properties okay the three properties are type color and cost now the property type has the value ball point so similarly the property color has the value black and the cost is 10 okay so this is how you define an object so the object is a pen it has three properties and values what if I wanted to display the cost of this pen I just want the cost of this Spen not the entire object okay so how do you access an object now this is the Syntax for accessing an object object name do property name okay now there is another another way of accessing this is known as the dot notation and the other way is like this object name you use square brackets within which you write the property name all right this is the other way now I honestly prefer the dot notation because I feel it's simpler okay so now let's try to display the cost of the pen okay so how do you do that first you write the object name which is pen dot the property name which is color sorry then the property name which is cost okay now I want to display this so I'm going to put this in the console.log function I'm going to put this in the console.log statement all right now save the file make sure you change the reference in the index.html so change this to objects save this open up your browser here you can see it's displaying 10 Okay so that's how you access object properties okay now let me show you another example of objects okay so now let's define an object called Emily okay now this object has a few properties so properties and the value of those properties because it's a number I'm not putting it in quotation marks then let's define cool which is another property say she goes to DPS now and there is class let's say 10th standard all right now the next property is subjects now I have more than one subjects that means I have more than one value to this variable now how do I store more than one value in this variable so guys do you remember I spoke about arrays arrays are used to store multiple values of the same variable so let's define this as a array so this is how we defined an array let's add physics now add comma after every value so physics then chemistry let's add biology let's add maths so don't forget to terminate this over here now I've typed out the wrong spelling for physics okay so guys let's say I want to display chemistry how would I do that so how would I do this so like I said first you're going to write the object name dot the name of the property name of the property subjects now this is an array element so in subjects we're going to access the second element all right the number of the second element would be one okay now in order to display this let's put it in this statement now save your file open up Chrome all right there is an error what exactly L is the error okay guys so the error is over here I forgot to put a comma so after every property you're supposed to put a comma so I forgot to put a comma here and that was the error now let's save the file and let's open up our Chrome so here you can see that it's displaying chemistry okay so that's how it works with this we're done with objects let's move on to our next topic now the next topic is functions functions are basic building blocks in JavaScript it is basically a set of statements that perform some task now let's see this with a few examples let's go to our Visual Studio code now let's add a new file I'm going to name it function. JS so how do you define or declare a function so in order to declare a function you have to use the keyboard function space the name of the function so let's say hello all right now after this you need to add parenthesis all right and then curly braces and within the curly braces you're going to define the body of the function now let's just say that this is just logging some message on the console like hello all right now I've created a function for this now let's call this function so how do you do that you write the name of the function with the parenthesis and then you end it with a semicolon okay now save the changes make sure you add function over here in the HTML file save the changes here as well now here on the browser you can see that it's printed hello Okay now what's the point of this function let's do something better okay let's make a better function let's say We'll create a function for U multiplying two variables okay so let's say that we'll create a function for finding the product of two numbers okay so for that you use a keyword function I'm going to name my function product now with Within These parenthesis I'm going to declare two variables okay now these variables are called parameters so I'm going to pass two parameters to my function now let me get on with it you'll understand it better now what this function is going to return is the product of A and B so a star B all right now let's call this function so how do you call a function name of the function and over here you're going to pass the value of to the these variables now these variables have not been given any value here I just Define these variables and they're just known as parameters these variables are known as parameters okay now let's pass some value to these variables let's pass two and six okay end it with the semicolon now these values are known as arguments okay so when you call a function you pass arguments to that function but when you define a function you pass parameters to that function function okay let's save this and let's open our console wait a second yeah I forgot to print it now let's store the product in some variable let's Define a variable let's say x okay so I'm storing my product in a variable called X now let's log this variable on my console save the changes go to your browser here you can see 12 all right so this is how you pass functions with different parameters okay next we have conditional statements now condition statements are used to perform different actions on different conditions so if is used to execute a block of code only if the condition is true okay so basically if a condition is met then the statements within this block will get executed this is the syntax of the if statement so basically if is a keyword and within brackets you're going to define the condition now if this condition is met then the statement is executed or a set of statement is executed okay so this is how it works in the program when you start the program and when the execution comes to a condition if the condition is true the code within the if block gets executed all right and it ends there but if the condition is false you just exit from the if block all right let's look at this practically so let's create a new file called if so first what I'm going to do is I'm going to Define an array now let's add numbers into the array so I'm randomly want to add some numbers now let's add some condition over here now if here I'm going to define the condition which is number0 is equal to equal to number at place two then just display some statement all right so let's see correct okay so what is happening here now I'm basically defining a condition within the if statement over here and this is a statement that's going to get executed if this condition is met so the condition is that the number at location zero which is this number if this number is equal to number at location two which is this number so if these two numbers are equal then it's going to print out correct all right now these equal to equal to sign is used for comparison so it's used to check the value of this variable and value of this variable if these two values are the same then the condition is met all right now let's save the changes we made here also remember to go to your HTML file change the reference to if. JS okay say the changes go to your browser here you can see that it's displaying correct now this was the if conditional statement now where do I use the else statement now else is used to execute a block of code if the same condition is false okay so this is the syntax of if else so if there's some condition there if that condition is met then this statement is executed now if this condition is not met then if you want to do something else you use the lse statement so when this is false this will happen Okay so instead of exiting you're going to perform another operation let's look at the flow chart when you're executing the condition and if the condition is true you're going to execute the block of code within the if block okay now if the condition is false you're not going to exit instead you're going to execute another block of code which is in the else if block okay now let's look at this practically now within the same file itself I'm going to show you how this is done now let's define a condition if numbers this place is equal to equal to then it's going to print correct otherwise now if this condition is false then it's going to print this console.log wrong try again all right that's simple let's see if this works okay save your file open up your browser okay there is some problem over here let's go back to the code okay my mistake save the file open the browser now it should work let's just comment this out otherwise you'll get confused I'll just write here this is the if else block if else example all right let me save it open your browser see it says wrong try again so this is how the lse statement works all right now you can even play around with a few other examples let let me show you a few other examples okay now let's give two conditions within the if block okay now let this be the first condition so how do you add another condition condition we just use the and operator okay let's add another condition over here okay uh I'm making a mistake here the array name is numbers so I've added two conditions over here now only if both of these conditions are met this statement is going to be executed okay else we going to now let's save this okay we'll just comment this out so that you don't get confused all right so save the changes open up your console okay there is some error so it's basically something I did while naming so this is an error because I forgot to add an S everywhere okay now I'm saving the changes this should work okay so it says wrong try again now this is wrong because both of these conditions weren't meant I'm using the and operator here so it's compulsory that this condition is true and this condition is true okay so if you use the or operator here instead this is the or operator okay if you use the or operator here instead this should work see it displays correct okay or means that one even if one of these statements or one of these conditions is true then this is correct okay so guys with that we are done with if L statement now let's move on to Loops so what are loops loops are basically used when you want to run the same code over again each time with a different value so that's when Loops are used now Loops are of three kinds there is for Loop there is while loop and there is do while loop okay now let's look at each Loop one by one so first we have the while loop now what happens here is while basically Loops through a block of code as long as the specified condition is true okay so while this condition is true this Loop code is executed when you execute the condition and if the condition is true the conditional code will get executed otherwise if the condition is false you're just going to end or you're going to exit from the loop okay now let's look at a practical example of this so create a new file called while. JS so guys before moving on to an example let's discuss the do while Loops also a basically do while is just a variant of the Y Loop now this Loop will execute the code block once before checking if the condition is true then it will repeat the loop as long as the condition is true okay so over here you can see the syntax within the do Loop you have some code now this code is executed once and only after that the condition is checked now if the condition is true then you're going to execute it again but if the condition is false you're not going to execute it but this code is definitely executed at least once okay that's the difference between do while and while so the loop code is executed at least once in the do while loop okay now let's do this practically now let's Define a variable I and initialize it to zero okay now within my while loop I'm going to define a condition which is while I is less than five it has to do this now the statement here is it has to display this the number is and it has to display I okay so plus I and let's increment the value of I okay now let's save this now let's look at the while loop now within the while loop I've defined a condition which says while I is less than five it has to perform the following code first I've set I to zero so then I is less than five meaning 0 is less than five now this is true so it's going to execute these two statements so it's just going to print the number is zero and then it's going to increment the value of I so now I will become one over here it'll go back to this Loop and it'll check if 1 is less than five which is true so it'll execute these two commands similarly it'll keep going till I is equal to 4 I is equal to 4 it will execute this but when I becomes five five is not less than five so this will not be executed okay now let's just save this and let's change our path in the index.html to while save this as well open up your browser see it prints till number four 0 1 2 3 four okay it is not print number five because five is not less than five okay now let's do the same thing using the do while loop now for the do while loop first you're going to define the do block now over here let's copy paste this code over here okay now after the do Loop you're going to put the while condition okay so let's give the condition as I greater than 5 let's see what happen okay so what is going to happen here is first it's going to execute these two statements okay it's going to print the number is zero over here because we've initialized I to zero over here okay then it's going to increment I to one okay then it's going to come out of the loop and then it's going to check the condition is one greater than five now that is false so it's going to end over here itself okay now let's just comment this out so that you don't get confused okay we'll comment this whole thing out now save the changes open up your browser see the number is zero it's printed only once okay now that's the difference between while and do while loop now next we have for Loop let's look at for Loop so what is for Loop so for Loop basically repeatedly executes the loop code while a given condition is true so test the conditions before executing the loop body now here you can see the syntax of for Loop within the for Loop there is a condition which is begin separated with a semicolon then there is condition semicolon and this step and then there is Loop code okay now this begin statement is executed one time before the execution of this code block okay so before this Loop code is executed this condition will be executed one okay now let's look at the syntax for the for Loop Loop now this for Loop has three statements within the parenthesis okay now begin is executed one time before the execution of this code okay now this condition defines a condition for executing this Loop code the next is the step this is executed every time after the code block has been executed okay so after this is been executed this is executed so guys I know this is sort of confusing let's practically do this you'll understand it better so now I'm going to create a new new file called for now let's declare a for Loop so use the keyword for and then you put the first statement or the first condition which is I is equal to zero okay now the next one is I is less than 5 next one is i++ make sure you separate these conditions or these statements with a semicolon okay you have to put a semicolon over here now open up your Loop code now within the loop Cod just let's perform the same thing that we did in the while loop all right so the number is oh we've actually forgotten to declare I here so let's declare I first let I so I've declared I over here so guys you don't have to declare it over here specifically you can do that of course but you can just declare I over here itself let I is equal to zero you're initializing I and you're declaring it okay so what happens here is first I is equal to Z you're defining a variable I and you're initializing it to zero once you initialize I to zero it's going to execute this statement once okay so it's going to execute this statement once after that it'll go to this condition is I less than five is 0 less than five which is true so it's going to execute this statement okay now after this is executed it's going to execute this third statement which is i++ okay so the value of I is going to become one and the same thing is going to happen again and again let me explain this one more time so first your initializing I to zero when you execute the first statement this code block is executed once all right after this it checks this condition is I less than five if the condition and only if the condition is true this statement will get executed now after this statement is executed this third statement over here will get executed all right I hope that is clear let's save the changes and let's also change the reference over here all right save the changes here as well yeah here you can see that it's displaying it five times okay so that is how for Loop works okay now you can do a lot of things with for Loop so let's say that your teacher has punished you because you talk too much in class and she's asked you to write I'm sorry 50 times so can you use for Loop to do that well you can definitely use for Loop to do that let's try and see how that works okay now we're going to do the same thing set I to zero then I is less than 50 well only if your teacher is kind enough she'll ask you to write it 50 times otherwise 100 times is the minimum all right now within the code block let's log this message okay so first we're going to I'm sorry and let's put a smiley as well okay so I made a mistake over here okay so this is how it works let's save this code and you know let's comment this out okay now let's check our browser so you can see that I'm sorry is displayed so many times so guys that's a simple hack with this we complete our for Loop now the last topic of disc discuss is switch cases so switch statements are used to perform different actions based on different conditions okay now how does switch statement work now here you can see that this is a syntax now after this switch there is an expression and there are few cases case one case 2 case three and default and so on okay whenever case one is true the code block one will get executed similarly if Case two is true code blog three will get executed now how does this work now what happen is the expression within this switch statement is executed one okay after that the value of the expression is compared with the value of each of these cases okay so this is the value of the cases this expression is compared with the value of the cases so if there is a match this block will get executed so basically the value of the expression is compared with the value of the cases so if there is a match then the associated block will be executed so if the value of this expression and the value of this case is the same then this code block will be executed okay let's try this with an example so let's create a new file called switch okay let me type out the code and then you'll understand what I'm saying okay okay so that's a long code but this is very simple now what I've done here is I've defined a variable called games and the value of that variable is football okay now I'm passing this variable into the switch statement so basically the value of games is football over here now if the value of this expression matches with any case then that block will get executed now here the value of games is football correct so you're going to look for football now the case over here is football so basically this is going to get executed okay now let's just save and let's run the code you'll understand what I'm talking about so guys make sure to change the reference over here save it and let's check the logs see it prints I love football so why did it do this exactly now it did this because the value of this expression matched with this case Okay because it matched with with this case the statement within that case got executed okay now if I change the value to foo's ball okay let's see what happens we'll save it it says I like other games now this was the default statement now this default statement is executed whenever this expression does not match with any case Okay because I'm not given fo ball anywhere over here it executes the default statement so this is how the switch statement works so guys with this we come to the end of today's tutorial I hope you all enjoyed performing the demo with me if you have any questions or queries regarding this demo or regarding any Topic in this demo please leave them in the comment box and we'll get back to you with the answers at the earliest so guys thank you so much for watc