hey guys good evening good evening to all hello everyone hello people hello Sayang okay hi hi everyone guys am I Audible and visible clearly to you all just give me a quick uh respond in the chat that am I Audible and visible clearly good evening hello hello guys hello hello Basha hello jatin thank Namaste Banu thank you guys thank you for your reply so guys uh thank you I can see the chat is already Super Active thank you you people for thank you to you all so I will give a short in introduction about myself my name is Anam Khan I am one of the team member of let's subgrade and I'm here to launch the session basically like inform to inform you all like about the session what we are going to do in this five days boot camp so we are starting with JavaScript boot camp which is for five days and it's only for one hour each day so and we will learn from Basics to advance sir will teach you uh sir is already a pro so he will teach you all people very uh in a very like interactive way so I will share my screen quickly and explain you all about the like what are the other things to get your certificate in this boot camp I hope my screen is also visible to you all hi hi guys put some Emoji or we can chat in the live chat like where people are from joining from where you from which field you people are and where you stay it's visible yes yes uh thank you guys thank you so marking your for marking your attendance you can see a one link for registration certificate attendance assignment we have this one link and please click on this link you will be redirected to this enrollment page where you enrolled yourself for this program so uh it will take a little time so let this page till then uh load we'll move ahead the to this uh allinone documentation here uh this is the one one document one document where you can find all the links all the resources and uh everything like this is the doc link and enrollment link and this is the session link and this are the notes that we made for you people you can refer it and save it for future it will help you a lot so make sure that you are saving this link and do not ignore this link it will help you people so this is the link this was about one link and we have our uh student ambassador program which starts on every first of uh month so we have our July batch has already started and you if you people are interested you can join for our August batch it also taking time so we yeah so this is the uh attendance page here you can see the mark attendance toggle right beside the day one title click on this toggle here is the rating session on a 0 to 10 scale so mark it according to yourself how much you like the session and everything so I will give for not on 10 and this is the feedback uh op box like what you what you people want from us what do you Improvement you want us to make and everything so for now I will give nothing and submit my attendance after submitting the attendance see this progress bar increase it will increase day by day as you mark your attendance and to get to get eligible for the certificate you need at least 50% of the progress bar so make sure that you people are attending the sessions all the sessions are marking your attendance properly do not miss it so you won't get the certificate and when the program ends that is on the day five you will get a generate certificate option right here beside the progress bar so you can generate your certificate from there and we are building Discord community and WhatsApp channel so if you people are uh if you if you people want uh update and like uh regular invites sessions invit so please make sure that you're joining our Channel and Discord community so uh and you also can uh ask their doubts and uh also chat up with your friends yeah this was all about the attendance page and if you people have any query from us if you want anything to any doubt what is student ambassador ma'am I'm oh great great gorov hope you will enjoy the program so we'll uh attendance attendance link I'm sharing in the chat right now you can mark your attendance to this link and the one dog also you can save it somewhere how to fill attendance I have already showed you can go back and check the video again so I will introduce a trainer for today for this boot camp that is prti Sir for most most of them you all already must knowing him so here is the sir hi sir good evening sir hi good evening everyone Hi so how are you sir I'm good so I hope everyone is excited for today's session I guess so yeah they they are already Super Active in the chat and guys make sure that you are attending the session for your learning basis not for attendance and certificate only so yeah sir I can I'm hand i'm handing over the session to you and I will take a leave and you can go ahead so thank you guys thank you sir bye everyone yeah thank you for the introduction all right so I hope everyone is ready super excited for the session okay how let's see how many of you are excited for today's session if you guys are excited for the today's session I want everyone to write excited in the chat yes let's see how many of you are excited for this session okay hi good evening swapnil good evening B yeah all right I can see I can see there are a lot of people but yes excited I cannot see much in the chat yes suit coal okay very good thanks for being super active in the chat yes all right so this sess uh okay all right great so um where are like how many of you have learned JavaScript are you this is how many of for how many of you this is the first time like if it is the first time you can write write first time in the chat and if this uh session you have like uh uh you know before just like uh excited to learn more learn more okay something first time I can see first time okay first time very good okay so this session which I will be taking it will be a more like a beginner friendly to your advanced level so we'll learn everything from the very basic to the more advanced way okay today we will be building few of the cool stuff okay like let's build a game that is rock paper and Caesar how many of you have played the game rock paper and Caesar yes no I have played or played in the chat if you have played okay that game will be building using the JavaScript okay and we'll start with a very introductory program that is like your fortune taor that is a very basic program okay we'll start with that so are you guys ready for the session yes ready yes all right okay I will try for the Hindi also uh okay Hindi and English okay so JavaScript since this is a JavaScript first class and few of you had told that uh you have learned like can anyone tell me like what is the JavaScript yes yes anyone yes I'll be telling you the tool say which tool you'll be using so no need to worry step by step we'll be going okay this is a basic to advance Z to Advan level uh class okay so this in uh first day one day two will be a very Dynamic something basic something new you'll be learning but yeah this will be a combination okay I got few an it is a scripting language provides functionality to the web page scripting language very good okay Si say JavaScript both client and server side language okay Kpop says it's a programming language Vu says javascripting language hero of website nice okay it is uh aush is logic function director okay so let's understand let's understand there are few things which I'll be telling you there are few things which I'll be also giving you assignment so for the basic you can say this JavaScript is a high level language there are different type of languages you have low level language you have high level language which I'll be telling but JavaScript is a high level language and it is just in time compiled programming language okay I know this might sound something easy so it is a high level language and it is a just in time compiled programming language so what is this just in time thing so in short like if you uh understand if you uh get it in a Layman explanation this is a technique the just in time compilation is a technique for running the programming language much more faster okay it is something like which you can say as a combination of a interpreter and a compiler okay we'll go much more deep into this definition but are you guys able to understand what I'm saying is it understandable yes I got it IGT in the chat if you are able to understand this point or slowly we'll be going much more deeper that's also if you got it you can say IGT in the chat okay IGT if you got it okay interpreter no not same interpreter and compiler both are not same yeah but just in time uses a combination of both okay I can see if you IG in the chat I didn't go okay sansar if you have any doubt you can just let me know like which part you are unable to understand okay so basically what this uh so basically this is just a definition but to understand let's first talk about it what it is not okay to understand each it in a much more better way let's understand what exactly it is not okay before understanding what it is okay first thing it is not Java JavaScript is not Java okay are you clear in that point yes JavaScript is not Java okay and JavaScript is not a scripting language JavaScript is not a Java JavaScript is not a simple script scripting language okay it is a programming language which you can say JavaScript is a programming language we'll go through it so let me share the screen just give me a moment just give me a moment let me share my screen so that things will be clear so I'll be frequently uh changing my screen all right I have shared the screen right now okay it is I hope it is visible every to everyone okay visible just write visible [Music] yes yeah all right great great all right so understand so what will so this this covers like we'll be going into the intro part like uh we'll understand the introduction to JavaScript we'll do the setup of the development environment we'll learn about the basic syntax data types operators and expression then we'll build the game so now which I was explaining is what is Javascript and then what I was doing is I was telling you about the jit compiler which a technique for the programming language for running the programming language much more faster which in sort which you can say and it is a combination of what you can say is both the uh compiler and the uh interpreter okay so like uh while the traditional interpreter what it does it reads the code and execute the code directly okay it uh the traditional interpreter reads and executes the code directly which is a bit slower technique while the jit just in time enabled engines adds one of the extra to it okay like the JavaScript engine you might have heard the JavaScript engine there are few JavaScript engine which is there in Chrome which is called as V8 okay V8 in Chrome in Firefox we have something called as fire spider monkey okay you can make guys what you can do is the stuff which I am telling you you can make a note of it because there are few stuff which I'll be telling which you will be getting in your interview round questions and all the stuffs so keep this in mind makeing note of it okay which will be essential for you okay got it so you for the JavaScript JavaScript engine the Chrome has is V8 Firefox has spider monkey JavaScript code which the uh what you can say is uh your what more browser we have Safari safas Safari have JavaScript core something what they do is they take the immediate interpreted bite code and compile it on the fly faster like combined it on the way in a much more optimized machine code and the process can exit and what the pro and that part the processor can execute it more efficiently in this what happens is what is the advantages of this compilation or technique compilation is that it improve uh it improve the performance of the code okay like executions like jit increases the speed of this JavaScript code execution by optimizing different kind of technique that is called as hard functions and all okay it increases the speed of the JavaScript code execution okay are you are you able to got it get it yes no IG in the chat and if you have any doubt just leave me a comment okay like this part I am having a doubt okay okay if you're getting it IG in the chat I got it okay and if you have doubt just write doubt and the IT optimizes the code yeah not page okay so it has the on the Fly optimization which I introduced just few time back it has on the Fly optimization so what happens is this just in time compiler can make the running time decision like based on how your code is actually being used it makes that decision runtime decision while while it is on the runtime like compiler can can make that runtime decision based on how you how you are using the code and uh it has it basically intelligently optimizes the code and so that uh the compilation part becomes much more faster and it is platform independent okay since JavaScript is still interpreted initially okay so it it makes this jit it maintains its like cross platform compatibility like with adding the jit with jit adding this this is one of the benefit which makes it also the platform independent kind of stuff it is not dependent on any single kind of platform and all the stuff okay so these are the few benefits of using the just in time are you able to get it yes yeah it is a combination of both they just yeah this is what I was telling that just end time jit is just end time compilator which I was explaining it right now okay clear s or any any part you are not you are having doubt you can just tell me doubt and I will explain you from there itself okay all right so what we can do next is uh we have have few things that we can do come up next okay so what is a programming language this explain very hard okay yes I will try to JS execute Sy yes J execution okay doubt okay which part you have doubt just let me know like uh you have someone Len got and uh gorov and yes yes yes can you tell me which part you are not able to understand so so what you can say is there are few pros and cons of like compiler okay let me take you a different context for the jit okay take you to a different context and explain you in a other way around so what happens in compiler the score source code like the code which you have that is converted into machine code okay the source code is converted into this machine code like this okay this is what happens the source code is converted into this is what I am explaining you about this jit compiler stuff okay so just so this term is you might find difficulty first I'm telling about compiler compiler the source code is converted into machine code once once it get executed okay so here you have how the things work is let me tell you with this example first you have the source code okay then after the source code what happened is the source code is source code is transferred into a compile okay then what happens at this stage is it is now compiler converts this into a machine code okay and then we get the computer are able to read and we get the this is how the code is executed right now inside the computer okay and then we see the output from the computer this is the whole process what happens okay suppose we have so here what we happened what is the benefit of this compiler this is what how the compiler work the source code is converted into missing code and then get executed okay but the what is the pros and cons let's understand is there any kind of pros and cons to it so here in this example suppose we have a loop that rops 40 times suppose we have the same thing that runs same code that runs for 40 times then we do not need to translate the same code again and again if there is a single Loop that needs to be uh run 40 times then we do not have to translate the same code 40 times into machine code so this is how the compiler saves the time for uh optimizing such kind of processes in the loops the loop part to not get executed multiples St so this saves a lot of time because if you if the code same block of code runs for 40 times in a loop and we every 40 times we generate a new machine code that takes a lot of time so here we time got saved code is and the converted code will be much more efficient to uh use and we can like if you have what we can say is uh it is very easy to use the what you can say is this but there are every uh thing has also consequences associated with it okay it uh it takes a what happens with this is this compiler has also a tate so like it takes a little bit more time to start up because why compiler takes a l more like initial startup time for this kind of the for the code if you do the compilation it takes a lot of it takes a little bit more time to start up because you have to go through that all the steps compilation step to begin the program so initial startup time is a little bit long in terms of compiler so is the compiler part clear with everyone okay first I'm tell telling about compilers so understand the compiler then I will be coming to The Interpreter part okay yeah I'll be talking about guys what I'm doing is we'll be going everything step by step okay so I'll be telling how to install how to do all the stuff step by step first and understand this topic okay repeat one CSS tell me one more time okay so what happens compiler if you have uh the same Loop that runs for 40 times it do not translate the same code again and again to machine code it saves time that is a pros and the cons is it takes a lot of startup time because it has go to go through every line by line like it has to go through that compilation Step At the very beginning all the compilation State part so that's why it takes a little bit long time to start but what happens is interpreter is a bit more faster so how The Interpreter things happen you have the source code now I'm telling you about The Interpreter okay then what happens source code is transfer to The Interpreter and then you get the output okay so in this state what happens interpreters here are quick and we do not have to go through the whole compilation step for execution what happens it just start translating the things line by line okay what happens is interpreters interprets the code line by line so you don't not take a long time to start clear I got it in the chat so what is the benefit pros of it the the it has like Fast startup time it start very faster it do not have to wait for the whole code to compile and get executed but there are cons also associated with it okay so when you are running the same code more than once for example if you are in a loop now I'm talking about interpreter not compiler so when you are in a loop you have to do the same translation over and over again for the 40 times because every you're going line by line so the loop will run for 40 times and you have to go through it line by line okay so this make it less efficiency in this part for The Interpreter okay now you know what is a compiler now you know how The Interpreter Works clear everyone yes everyone clear or any question okay so to overcome this procedure okay to overcome this all this stuff what happen is we have this jit compiler which is a combination of both which takes the pros and cons of both and make it a much more efficient jit compiler to make the code much more running of the code much more efficient and faster okay yes so this is how the things happens all right so let's move so this is how the jit and all the stuff now you understand the machine language okay so to understand what is a machine language the machine every language what happens is language every language has a set of rule and in like how you communicate with each other okay similarly every programming language has a set of rules and we also call it as something as Syntax for programming language okay so all right so similarly uh the machine language is like a set of instruction okay that the uh computer processor runs okay it's a set of processor that the computer processor runs is what you can say is the machine language this is a lowlevel language Machine Label language okay because uh uh it's uh uh like all theod by the computer at a very lower level Okay so this is all about the machine language okay gorov is not getting the OTP for the registration form guys yeah gab have patience team will help you out keep patience the team will be helping out for you soon okay I have already informed the team will be helping you out just after the session just also if now you can continue with the session after the after after it the team will surely help you out okay yeah it is a sar yes it's a combination of both yes it's executes in browser yeah we I'll be coming you coming to the like but and uh the machine codes are the Fest and the possible way to instruct a particular computer okay there are few things which uh why we are learning the JavaScript okay so let me tell you so that your doubts will be cleared okay like few of you have asked me the question so let's take a few example to make this part a little bit clearer like why JavaScript okay like as a programmer why we are learning JavaScript like what it makes it different from other language I had got a question right now I guess someone asked yes Ganesh has asked yes so let's continue with that so why JavaScript okay so to understand like why we are using JavaScript let's how many of you have play like Lego is something like this Lego boards how many of you have played Just Lego you have like how many of you have built you might have built few of you might have built this cas Cas and all the stuff the main reason of you learning JavaScript is the first step it's because of its less complexity okay like this you can say how this is less complex how the Javas script is less complex imagine with Legos you do not need to worry about how the individual bricks are made here in this Legos you do not need to worry about how this individual what you can say is uh bricks are made or how this individual blocks have made okay you do not need to worry about that at the very Atomic level how the small things are made you what you need to do you just need to take this follow the instruction okay and uh put it in a particular form to give it a save by following the instruction that is given on the manual like how to do form particulars uh shape okay similarly in this particular case like the Lego if you if I combine like if you take example with a JavaScript part JavaScript what it does it it hides a very complex part or like how it works how it communicate with the computer the complexity part it hides everything you just need to function on what you want your program to do like I want to classify which number is bigger I want to classify like uh I want to run a particular block of code for multiple times too or what you can say is I want to see get the prime number what I want to see the largest number in a particular set of block so this is what you do you need to only focus on what you want your program to do you not need to focus on like how the things work and how the things will communicate with the computer the whole chain of cycle of interaction with the computer and the program that that thing you do not need to worry about this is how it's less complex okay all right I hope you all right yes unal yes we we will be uh completing both the code okay uh so first understand you need to do how the things work and all how the yes both yes thank you SAS for answering if I skip by chance while explaining if I skip any if I just forget to explain you any Ty topic just remind me after the explanation when I ask if you have any doubt I will explain you guys okay all right I hope this L complexity part is clear so and let's understand more it is very easy to use like the Legos are designed in such a way that each like you have the blocks like it is very easy to assemble and use so this is is bner friendly JavaScript okay and it is very easy to use and the development cycle and the whole process is faster so that's why this is the major benefit of using this like with Legos you uh you can build the thing in a much more quicker way because of it safe structure and the formation okay similarly JavaScript allow you to write code in a faster because you do not get to bog down into the lower level details like how the things are working and for focus on the creative aspect of the programming how how creative you can or write a optimized and much more simplified code to make it work okay so this is all about this so let's start with a very basic program okay and even which I was talking about the speed of development by using also JavaScript it's also lot more faster so let's go let's deep down uh de so let's understand what are the things you need for for the uh for your uh what you can say tools you need for this class okay how many of you are excited for the tools yes if you guys are excited or if you want to know how many of you also want to know the tools what you need for this programming language so I'll be sharing a screen right now just yeah all right is the screen visible yes no all right Str visible all right all right so there are the few things first thing which is available right now you are seeing on the screen is the browser okay for this code uh which the browser you can use any browser you can use Chrome you can use Firefox what I using is Firefox Developer Edition developer Edison Firefox so this is what I'm using right now you can use this I'll be sharing the screen uh sorry I'll be sharing the link right now so this is what you guys will be I'll be using so I found it good like there is no such I found it good in terms of development and all stuff so you guys can use this I have shared the link uh the team also will be sharing with you guys I'm also sharing the chat so this is the tool one which you'll be using and the next thing what we'll be using is the uh what you can is Visual Studio code okay this is for the browser for the execution of the code where you will be seeing the retain code the code which you write okay and then you have the uh Visual Studio code this is what we'll be writing the code editor where we'll be writing and executing which will help us to execute the code which we will be writing okay so how many of you have already installed the vs code okay vs code okay the vs code link also right here for those okay the two links are already shared with you guys okay okay I have installed installed okay very good installed okay perfect perfect since you guys have installed let's Deep D Deep dive into the first code of the day all right so let me open the vs code just give me a moment and let's start with our very first program just give me a minute yeah I guess the screen screen first let's dive into [Music] the all right when the screen is visible just let me know yes everyone visible to everyone and let me know about the font size okay so what we'll be doing is we'll be creating a new file for the today so there there are different folders for our different session to create a new folder this is the uh icon to create a new folder and this is the icon to create a new file okay so we have already built a folder just when you click it will just uh write the name of the folder which you want to create and press it will create a folder what I'll do is let's create a folder like uh intro program okay so I have created a folder that named as int program and inside it I want to create two file one is index. H HTML one is app.js these are the two files okay there are different ways of implementing the JavaScript code okay so so there are multiple ways of implementing the JavaScript code you what you can say is you have uh uh you can use it in line you can use it you can use a external Javascript file there are multiple ways okay so right now what I I'll be doing is I'll be using a external Javascript I know I what I'll do is I will keep everything clean from the very first end I do not want to like uh yes I'll show you a sample code okay yeah so what I want to I don't want to uh put everything in the same file and make the code look messy at the from the very first end okay so to do that what I am doing is I want to uh uh uh yes uh I am keeping everything separate from the very initial stage okay so this is what I'm doing right now and so for this part just give me a moment [Music] yes okay so you can can uh use it uh JavaScript you can use it inside the let me load the PO plate okay there is a shortcut to load the initial code for a HTML file okay there is a shortcut how many of you know it yes know so those who don't know uh I I am I'll be telling you a uh simple trick shortcut okay to use it so just press shift and one it will just put exclamation mark and just press enter it will load a boiler plate code for you with the basic all the HTML I hope you guys are clear with the HTML part so this is a document type HTML this is a starting opening tag of HTML closing tag of HTML and inside the HTML we have two things that is the head part and the body part head part contains the meta information type and all the stuff so let's so title is like what the page will be known that is seen at the tab of the browser so I want it to be name it as fortune teller okay so to understand the for tune part played on the browser part okay am I going is it understandable are you able to understand the stuff till now like the initial setup part how many of you are not able to understand just let me know you just write uh you you in the chat those who are unable to understand and which part you are okay understandable once more for the tricks if you want to know the trick like for loading the uh like uh how uh like you want to put the boiler plate just write shift and one it will just put the exclamation and press enter while the exclamation arrives so and okay I got a few question this meta stuff those who are unable to understand so these are like external external added information that are required by the search engine of search engine use it to use by the search engine mostly uh this search engine taxs uh and uh what happens is what this meta information the search engine takes like what is the title description understand the page and does the ranking and visibility in the search engine accordingly with this meta information which has all the information about the there are lot of meta tag HTML meta tags if you like uh Meta Meta data is just a information this information which the carry about a particular page that is all combines with the meta tax okay which is always there inside the head okay and it will not be what information you provide with the meta tax that not visible to the browser directly this is for the search chent kind of stuff understandable stuff and this is basically used by the browser to understand how the content also will be displayed on the browser search engine keywords and all the stuffs all this information are there along with it okay clear okay yes design in coding format and all all right thank you sansar for helping me out with this okay what is Fortune tellor Okay Okay cool so this is a very simple app which simple JavaScript code which which will be writing where a user will be uh entering um his particular color code like red blue green and accordingly it will tell you the fortune like if you choose the red color then what will be your fortune for today if you change uh blue color then what will be the fortune this is a very beginner like and level uh JavaScript intro code not a complex one so I hope this will be be helpful for you guys okay so here for the heading we'll be using the H1 tag those line of code you guys won't be able to understand okay abishek says why you are installing Firefox I prefer Firefox developer addition for my there is no Harden set it is I found I find it much more efficient and friendly so you can choose this accordingly as for your is there any increase in progressing okay okay those who Len C you had any doubt just after the doubt you just mention which part you are having out so that I can help you guys okay all right so let's build this fortune teller let's complete it so in the heading let's write wordss this H1 tag is for the heading which will be displayed in the browser wordss your future sorry carrier so this you just tell this okay and then we'll add a paragraph which will start with the P tag uh those who anyone who is there who are unable to understand HTML is there anyone now for now node is not yeah but you can inser you can use any browser as I said yeah inside the class folder is everything there yeah okay those who are unable I'm not getting Ganesh Ganesh which part you are having doubt which part you are unable to understand just let me so HTML we have starts with the HTML tag and closes with the HTML tag the content which you want to get execut put on the browser you need to mention the P tag that is a paragraph This the start of the paragraph This suggests the start of the paragraph and this suggest the end of the paragraph This HTML is like a building block of the web page which marks the thing like here you add the heading it marks the content in the web page like here you need to Mark the H1 tag that is a heading here you need to Mark the paragraph that is a ptag so this is how the HTML is like the building blocks or the skeletal structure of of a web page not the design part so enter your favorite color so today we'll be trying to complete two things that is this and the few part of the what you can say is the rock paper SE game okay enter your favorite color okay you'll be entering your favorite color and to take the input from the user there is a particular tag okay through which we'll be taking the in input from the user so I will just write input type is equal to text which I'll be taking the input and uh let's give it a identification like every person you you if you are working you might have a employee ID in your office if you are studying how many of you are student how many of you are working just mention in the chat no that is not necessary for now yes okay Ganesh you are not getting to how to create a class folder okay I will help you with that okay fewer students okay so if you are unable to create a folder what you can take do is right here you can also go to file okay file then new file you can create a new file right here okay if you want to create a folder if you are opening a current directory this is my current directory the second one is for the new folder click here it will automatically create a new folder for you okay clear Ganesh any doubt just let me know yes I'm using the live server okay all right so title which are you having doubt see in the title part okay why you have used the ID you are having doubt okay input tag is just like every form you can see you you have a rectangular save where you can need to enter the information okay that is the input tag what we are using for and ID what if you want to identify a certain person like in this let's say in this particular class which you are taking right now I I might have lot of abishek right now I might have lot of Abdul right now and if I call the class Abdul you if you have any doubt there might be a chance of two Abdul like raising their like answering my question simultanously so here what happens is there might be a difficulty in addressing the students like so to uniquely identify a student every people inside the class are assigned with a unique role number that is the identification number so that's the reason in this input box I have used the ID as Fab color to identify that input box like this identity input box which I'm using right now is a uh is uh uh identified as the Fab color right now here in the comment section there is a input box this is also input box so these are all the input box this is for the unique identity gives a a unique identity to a specific entity here if it is clear just write clear in the chat okay let's let's move faster because we have very less time left for today okay so let's add a script tag in the script tag this is how you add a external Javascript code okay so we are using a script tag at the end of the body Okay so this app.js so Javascript file extension is JS so name of the file is app and the extension name is JS for the Javascript file the name of the file is index and the exens name isml so what I'm doing is in this I am using the script tag okay to connect my uh file having the JavaScript code so that it can combine and run along with this HTML page so I'm not using the JavaScript code right here in the same HTML page I'm using the external Javascript page code uh uh like page which is having all the JavaScript code inside it and I am just calling it right here like uh at the end of the body so that it can run and get executed right here in this HTML page so this is here I am using a external Javascript file and implementing right here in this HTML file okay it get invoked right here inside the skip tag okay so this is how the uh HTML is invoked so you can uh like JavaScript you can place the number of script inside the body also in the head so depending on how you are implementing it okay so here I am implementing at the end of the body because like if let's take example so this is one of the question that is mostly asked like you also asked why I'm using the script tag at the end okay not at the beginning not at the after the body why I'm using at the end of the body so there is a reason there is a chance what happens if my JavaScript code is very big and lengthy what happens is initially what instead of this last okay if I let me also add the source page SRC for the source of the file which I'm implementing I'm connecting the app.js okay so let's say I'm not using it right here for now I will just comment it I'm using it right here so here if I use it at the very first if the JavaScript code is very lengthy what will happen is it will make my code very lengthy and lot of time it will take the JavaScript load page uh like code to run and until and unless my JavaScript code is not executed till that particular time you'll see a blank page for a long time uh on my browser so what happens it increases the loading efficiency of a page and uh gives a very bad user experience so that's why I'm using it at the very end okay clear this part it's just a preference yes script yes yes you can watch the video at the end all right so this is how I have connected the page so let's light write the code all right so let's move and one more thing I need to add one more things so this is the fav color input box where I'll be taking the input okay through this input box I'll be taking the input from the user to enter their favorite color okay after that what I'll be doing is after someone I will add a button okay so I'll add a button and this button what will happen is on click event I will add a on click event like what will happen if someone clicks on the button okay to this I'm adding a onclick event which will while when we click this onclick button a onclick event will trigger which will call a function that is named as tail Fortune okay this function I'll be adding I will Define this function inside this app.js I'm just telling you when you click on this button a function is called that is on click on click event is triggered and this function is called after that so let me add a name to it like tell me don't worry I will show you the how it looks on the browser then I will create a paragraph give it a ID to it named as Fortune I'll tell you why I'm using it okay so let's see how this page actually looks in the browser so I have for this particular uh code uh what you can do is go to view then go to extensions there are the few things which you can install for this like you can uh extension like you can add HTML uh snippet HTML CSS snippet you can install few of those things to make make the code writing much more efficient way and you can just add a live server the uh you can just install this live server so you go to view then inside view you go to extensions okay then in this search input box WR live server this will display so what happens is by implementing this live server and to execute it just right click open with live server when you click it so every time you do changes to the code okay every single time you do a single change to the code you do not need uh to ref ref phras the page so it will do the refresh page automatically for you okay isn't it helpful like every time you do a certain kind of change you do not need to refresh the page okay sansar you're telling s is explain the syntax you have given the onclick button okay I'll I'll help you guys this is onclick event so these are all the javascri button trigger events so when you click on this Buton button on click what will happen is this will trigger the function that is uh okay let me write the JavaScript part then it will be easier for you to understand okay SAR just have a patience I'll just write the JavaScript part then it will be easier for you so when you uh click on this button a onclick event will be triggered yes and then you will see a page something like this just give me a moment let me show you the screen let me share the screen okay you'll see the page something like this okay screen it will be shared with you just give me a minute yeah this is how the HTML code looks like so this page here what we have is control shift I press control shift I for this then you can see this is the H1 tag this is the paragraph then we have the input box to take the input and the button when you click on this tell me button right this tell Fortune function will be triggered which is there in the app.js which we have not defined yet but which will be writing here and on this par gra I have added deliberately a paragraph which will display us the result output okay let's go back to the code right now all right guys so since this part is getting interesting right now because we'll be coming to the JavaScript part can I take like more of your like uh 10 minutes if it is fine with you guys yes is it okay with you guys can I take your like more 10 minutes to complete the session no I have no vishno I have not written a single code yeah Naga the Developer Edition is just a reference there is okay I get I'm getting much more yes okay thank you for giving your permissions thank you Kalan thank you chair and thank you assis okay so let's uh get deep di let's complete this at least a single code for now which will clear more of your doubts so here let's define the function right now to define the function I need a keyword that is a fun function then the name of the function okay like tell Fortune okay and make sure it start with a curly Braes and end with a curly Braes have written right here is same to this what you have written right here or else it will not work okay so right so this is how the keyword function is written then the name of the function along with the brackets curve bres and the par uh like you have the curly bracket right here this is start of the function end of the function and here you define WR the function definition what this will do so inside it what will be do it uh it will uh uh so now what we want okay so first to make this work someone has to write something inside this input field so how this will program will work someone one at the client level on the browser we'll write something at the input field like red green blue that input we need to pick it up we need to compile it and according we need to pick that information right there from the text box that you have right there that if someone has written red we need to pick that color red that text value that you have entered and we need to do a certain kind of interpretation and show you the result this is what we are going to do right now so for that for storing different value in JavaScript what we have is called as variable okay we have something called as variable in javascripts there the like variable there are different kind of variables like using VAR late and const okay so this are the multiple ways so this we are use we use variable to store a certain kind of value it is a programming practice okay and we need to also declare the variable before use okay we need to keep in mind so V so there are three things which I'm writing v l and const okay so these are the three very uh like most types of variable so VAR is used for all the JavaScript code but it is mostly used between 1995 from the start to 2015 but from the after Generations mostly which is a preferred standard variable name which you need to use is late and const keyword these are the two keywords that is added after 2015 okay constant uh uh like we use the const for which the value are fixed to through the end of the program and do not change and let we use if you want to store a value that changes frequently in a program okay this is what a practice this is how we need to practice the stuff okay all right so let me share the screen uh okay I have shared the screen which is not visible with you guys sorry yeah all right so the screen is shared uh okay I hope right now it's visible yeah so let's let's do one thing let me quickly like I am using the Slate keyword and the name of the variable is Fab color so I'm just writing the code which part you are not able to understand then I am using document. get element by ID okay so I'll explain you this Part F I'll just copy this ID to identify this element from the ID fav color so there are extensions which you can use to make this work helpful I'll tell you okay sorry then dot value so let me explain this part okay explain this particular part of the code so it what happens is it retrieves the value that you have entered so this line of code document. get element by ID do value so here it retrieves the value that you have entered in the put field okay which has the ID named as fav color okay and stores it collects this information right here and store it in the fav color okay so basically what it does this uh from the document the whole HTML document it searches from the element that has the get element by ID uh it searches for the element that has the ID named as fav color from this element it grabs the value of that particular element and store it inside the Fab color variable okay is it clear till this part yes no in the chat yes no is it clear this part or you need explanations any kind of queries or any questions you have in mind just let me know yes clear CLR in the chat okay game if you have any doubt just let me know which part is not clear okay so here from the document HTML document it will grab the element that is having the ID as fav color okay that is the input field okay in the HTML document what we have done we have given the ID in Fab color to this input field so it will F that element by using this get element ID it will search for that element that is having the ID as PA color and do value it will grab the value of that particular input field if you write uh red in the input field it will grab the red value and store it in the Fab color if you write uh Green in the input field it will grab that green value and store it in the Fab color okay so this is how it works then I am creating another variable just name it as carrier okay just I'm just declaring okay then we are will be using the control statements okay so new thing which you might come right now here so here what we'll be uh doing is we will be using the conditional statements okay so this is important JavaScript we are learning about if else else if okay so very often we try to we write different code and we need to perform certain actions okay like uh based on the decision that is made like if I am interested for the class I will join like if I find this project interesting I will definitely do this or if we find this R t-shirt good then I will definitely buy it if I do not find this red t-shirt good I'll definitely not buy it this is what based on certain color you are taking a decision of purchase B on certain interest you doing taking a certain way of uh execution of certain things so this is what we'll be doing using this conditional statement so in this like here JavaScript has different conditional statement like if else if if else and switch so right now we will be using the if LC part okay and the syntax which I'll be telling you right now just give me more five minutes will be completing right Asad if if you have any like uh any any doubt you can just ask me like which part you are unable to understand or anything okay so where is a if you are unable to understand the where part where is the older version that is of storing a variables which is valid till to 2015 from that we as for the standards current standard it is always preferred to use the late and const depending on the requirement which I have already explained but still if you have doubt you can just ask me okay so I have already defined this three things where late and const okay con is for the constant variable which do not change throughout the program late is for the value storing value which changes throughout the program you can change that variable throughout the program but if you use const you need to get this value need to be constant throughout the program unless you will get the error we'll see that program while writing the code I will we will tell you how the issues happen Okay uh like if you add a constant then if you change its variable then what will happen all those things we'll be covering right now keep patience okay function we are uh for efficient us reusability of the code we are using functions right here and use of the code for the multiple times you can call it any time anywhere and use a particular block of code for multiple times that's why you are using functions right we'll go we'll de go deep diver into it slowly gradually we have a Time particular time for it let's understand this slowly I will just make a note of it I'll will tell you what happens where like if you use const you change the variable then which error you'll be getting if you use rare late then what are the scope how the scope changes according to different instances all the things I'll be explaining have patience so let's understand right now the conditional statement like how the conditional statement works but keep in mind if I buy any chance by tomorrow I I am unable to explain just let me know okay I I'll go go deep dive into this V late and const okay just to store for now just understand these are used to store different kind of variable according to different instances okay clear any doubts still you can you can ask me there is no issues you can freely ask me any doubt if you have so conditional statement we are using if if okay here in the Fab color we are storing the color right now okay we get got the Fab color from the document using this document. G element by ID the name of the ID of the input field and its value through this we got the value like if you write it in the input field red we have faced that color red and we have stored it right here now the time of comparison like here how inside the if and this inside the bracket we need to write if the condition here we need to write the condition and condition okay I'm telling you the syntax if the condition is true then this block of code will be executed or else not nothing or if that part is becoming false then the Els If part code is executed okay else if then the second condition is checked and then the if this part is get executed okay so if this condition is true then this block of code is executed and it moves out of this Loop if this condition is false then it goes to the lcf part and again if this condition is false it will move out or else if there is another lcf part with the condition it will check that condition okay it will check that condition and if that part is true then it will execute that particular block or if that part is false it will go through the else part and execute that else for the rest it will execute the else part if that even if this condition also became false it will execute this part okay so to take example let's take if the Fab color which you have stored right here so if the Fab color which you have stored is triple equals to I'll tell you why I have used triple equal to not double equal to okay so if I'm here I'm doing a comparison if the Fab color that you have collected from the input box is here I'm checking the condition is equals to Red then what will do is it will store in the carrier part okay the carrier variable okay which have not defined it will be defined right here is equals to you might be a passionate leader if you have entered the color equal to Red in this input field then it will inside this carrier variable it it will store this value that you might be a passet leader okay if this condition is true but if you have entered blue color then what happens this condition becomes false so if this condition becomes false it will move to the LC part check the next concurrent condition so in this part what we can say is if the fair color is triple equals to Green okay then we'll write the statement for this then uh in the carrier part what we can do is the [Music] world of creativity awaits youu again if the Fab color is not equals to Green then it will move to the next possible condition is Fab color it will check if the Fab color is is sorry equals to Blue if that is equals to Blue then inside the carrier you can see since we have used late we can store multiple stuff okay it's it value also get changed can be changed you have uh a potential of being a problem solver okay so then again if this condition is not true for the rest of the case it will store the you might be uh or you can see the future holds many exciting stuff for you all right so how many of you are able to understand this particular code yes are you guys able to understand this particular code yes okay the code is not visible what screen is not working okay I have already shared I don't know let me reshare again okay I think there might be a technical glitch okay let me reshare the screen just give me a moment okay I have shared it again right now is it sorry there might be a technical glitch that's why okay I guess the screen is now fixed sorry so here till what part you have understand okay if this Fab color here we are checking if the Fab color is triple equals to Red if the Fab color is that you have selected is red then inside the carrier variable it will store you might be a passet leader if the fa color you have entered in the uh like uh input field is equal to Green it will say the carrier holds like the world of creativity aits for you or else if the Fab color equals to Blue you have a potential to be a potential Problem Solver all right uh yes if the Fab color you have inputed in the input field is equals to this particular color then it will display this all right or if none of this condition is true it will just execute the else part okay if none of the color that you have selected is not green not blue not red then it will store the value that is there in the carrier part okay so this is till now you have done the storing now is the part of execution so here what we have done is we have created a paragraph and I have said I have created a paragraph given it a ID as Fortune to display the result so let's use that paragraph from the document how do you grab that particular paragraph from the document I will get the element by ID and what is the ID of that element is Fortune okay what I'll do is I'll just add this for Fortune right here and of what I want to do right now is this is a paragraph which do not have any text inside it here inside the paragraph We have the content like enter your favorite color but here inside this paragraph We it is blank we have not entered anything so what I want to do is I have faced the element by the ID okay to like then in inner HTML I want to change the inner HTML of that contain like the content part of the paragraph okay inside the tag I want to change it to the what is there in the carrier so here what we'll do is the carrier is blank okay so how the program works let me tell you here the carrier is blank initially you have entered a color right here in the input field and you have clicked on this button which triggers a function that is called as ta Fortune okay this will trigger the tail Fortune when you trigger this particular function what it will do it will store grab the value first from the input field and store it inside the Fab color and according to the selection of the color what you have written it will store the value inside the carrier and the final value is right here and this is where the value get executed let me save it and let me show you how it looks okay so right click open in live server everyone if you are doing along with me just let me share the screen okay just give me a moment let me share the screen uh okay so this is how the screen looks the screen is shared okay this is how the screen looks okay it will be displayed just give me a moment okay why you have used three times equals okay okay I I I'll explain you that just have a look this is like we are doing a comparison between two things okay I'm comparing if the Fab value is equals to the red why I'm not using double equal to why I'm using triple equal to I will tell you the stuff right now but just see the working I will explain you that okay on the process so this is how the page looks okay here if I write red and click on this tell me you can see in the paragraph part it is showing you might be a passate leader if I write here blue and place place on tell me it will trigger that it will do the comparison if and accordingly it shows the result right here if I write here something like yellow which is not there it will just display the else part other than red green blue if I write any other color like brown it will display the same thing because it will only execute the else part what is there because the three condition is not true for the rest other condition it will just put me this but instead of this if I write here red this is how the things get executed so yes is it exciting are you able to do this okay screen is I guess not the screen is working yes any doubts any doubt any questions okay that double equals to and triple equals to let me explain you I think uh uh where to use double equals to where to use triple equals to that question that ises one of the question which you usually get inside the interview questions okay you can make a note of it okay everyone those who want so uh there is a difference between this double equals to and triple equals to that is like what you can say strict versus lose equality what we call as strict equality versus lose equality okay let me explain you guys okay the two things okay uh those who want those who uh this is that's it for today those who want to understand the double equals to and triple equals to they can stay others if you want you can end this session okay so in the double equal to and triple equals to this is what we call Double equals to and triple equals to okay the in JavaScript we use usually these two things then one thing you need to remember that the double equals to and the triple equals to are used for the comparison to find out the degree of how degree of equality between the two things how how equal the two things are okay so double equals to means true and similar if you do the compare triple equals to means they need to be exact same and if they are not same it will show false and it is not similar so both are uh double it's like how it works let me give you an example okay so let me share the screen others those who don't have doubt in this particular part you can just aim just those who have doubt you can stay right here I can explain it right here so here what let me give you example right here so here we take a constant okay and a = to 100 Bal to 100 if we do dou equals to console log a equals to B the output will be true okay but in the example we have uh open just uh but in the above example uh yes just five minutes uh in the example we have two variables A and B the type of the varable a is a number okay just you need to keep in in mind here the type of variable a is a number number but the type of variable B is a string okay so uh if you do the double comparon the output is true but if you do the triple equals to write here the value will be false because the two types are different one is uh right here is uh a integ another is a string but if both the value are 100 and 100 if you write it as integer and integer or if you write con c equal to 100 then it is true so this is all about the class I hope they are equal even and the data types are same so that's all about it any question or else we the session right here all right any doubt any questions if you have just let me know you can end this yeah so that's it for today and uh for tune part if you have any doubt just go through it take complete this code and let me know in the next class okay so that's it for tomorrow see you tomorrow good night everyone [Music] he [Music]