 Hello, everyone. I am Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. So today we have day 73 of Salesforce learning bootcamp. And this week we are going to understand JavaScript. So this is session two of JavaScript. Yesterday I gave you basic idea like how we can write code with the help of JavaScript and how we can embed that code in HTML. Right. So we'll be understanding few more codes today so that you can understand the behavior of JavaScript. Right. So let's start today's session. So once again, I welcome everyone, those who are joining this session live and welcome to those as well who are watching the recording. Okay. So moving forward, if you have joined this session for the first time, or like you are for the first time watching the video on this bootcamp. So if you want to know like who is your instructor and what I have done, so this slide is for you. Moving to next slide. So be consistent because consistency is the key. So do regular practice, whatever I am demonstrating in the sessions. So today I will be explaining lots of examples. So everybody needs to practice all those examples so that you can understand how JavaScript basically works with HTML. And you can join this telegram group where lots of folks are connected. So it is kind of Sanjay Gupta Tech School Salesforce community where people are interacting with each other and helping each other to solve their doubts. Right. Moving forward, you can see this is week 21 of the Salesforce learning bootcamp. And this week we are going to finish JavaScript. And from next week onwards, we'll be focusing on lightning component development. So HTML CSS and JavaScript is a base for lightning or a component and lightning web components. So that's why I just kept these two weeks for HTML CSS and JavaScript. And now once it is done, so from next week onwards, we'll be focusing on aura and LWC. So just follow Sanjay Gupta Tech School on YouTube, LinkedIn, Instagram, telegram, and all the important links are available in the video description. So just share this channel with everybody, those who want to learn coding, and please share a review or feedback about the bootcamp whenever you wish. Okay, so moving on to the topic. So we need to understand JavaScript, right. So yesterday we did some examples. So moving forward, we have more examples available. So in yesterday's example, we have not done any calculation, right? We directly just displayed some values with the help of JavaScript and HTML. Now, with this example, you will get to know, like in JavaScript, we can do some calculations as well. So if you focus on this example, so initially it is having H1, H1 is for heading, then P, P is for paragraph, then we have another P. So the two P elements are available, which are displaying different messages. Then we have one more P element whose ID is demo. This is important. So yesterday also I explained to you about this, like what is this ID. So ID is basically identification of this P tag, right? So here what is happening? This P element is having no content, but it is having an ID which is known as demo. Now with this script tag, you can see we have some statements like x equals to five, y equals to six, and then we are doing some calculations at equals to x plus y, and the result will be stored into Z variable. Now, what we need to do? We need to display the result of Z. So whenever you want to display the result of any JavaScript, so what you need to do, you need to embed that result into HTML. So these things we'll be doing in Aura and LWC as well. Whatever calculation we'll be doing with JavaScript, so that that result we need to embed with our HTML code so that it can be rendered on the UI, right? So if you want to render your JavaScript result on UI, so you need to take help of HTML elements. So here we have document.getElementById. So getElementById and then we are passing demo. So demo will be receiving some value, then we have .InnHTML here, and it will be having the value of Z is and then Z. So this text plus Z will be assigned to that P element, right? So this way it will be working. So with the help of this code, I hope you will be able to understand through JavaScript, we can do some calculations and that calculated result we can display on UI as well. Now I'm going to show you how it will be working. So quickly I'm going to copy this code, right? And I'm going to paste it in our in our Visual Studio code where I'm implementing all the examples, right? So I just pasted this code here and I'm including HTML tag, right? So we have this body tag inside body we have heading paragraph, then one more paragraph we have then we have script tag which is having JavaScript code and then we have this document.getElementById and in demo we will be storing the result in our HTML. Okay, so this way this code is written. Now what we are going to do, we are going to execute this code. So here I already have this Vab8 if I refresh. So if you see this file, so this file name is Vab8.html. So the code which I copy pasted, it is available in Vab8.html. So I just need to execute Vab8.html on the browser. So browser will be rendering this file. So here you can see the results are available. So JavaScript variables, this is shown with the help of H1. Then we have two messages through P element and then we have the value of JADIS 11. So it is again through P element, but it displayed with the help of this JavaScript code. So whatever JavaScript calculation we have done, we actually assigned it into inner HTML of P element that is related to HTML. Right? So I hope this way you understood how it is actually working and any point of time if you are facing any doubt that you want to discuss with me so you can just type your question in the chat so that I can answer your question. Okay, so this way I hope you understood like how it is actually working. Now moving to next example. So I hope you don't have any problems. I'm moving to next example. So here you can see we have one more example where we have H1 element and P element and P element is having ID as well as some text like JavaScript can change HTML content. Now what I will be doing here I will be creating a button. Button type is button. Then on click off button we are going to perform this JavaScript operation document.get element by ID then we're passing demo then dot inner HTML equals to and then hello JavaScript. Okay, so this code I am going to execute and the label of button will be click me. So when I will be clicking on the button, so this on click code will be executed and what will happen wherever any element is having ID as demo so that element will be having value as hello JavaScript. So this P element this JavaScript can change HTML content. This value will be overridden with this hello JavaScript value. So I think you are not able to see that text properly. So now I think you will be able to see the statement completely. So here after equals to we have hello JavaScript that will be shown with the help of P element and whatever text P element is having that will be removed. Okay, so now I'm going to implement this code for you. So I already explained this and now I'm just copying this code and will be pasting it in visual studio code. So here you can see this code is available. So this is a button and on click this whole code will be executed and then we have label of the button as click me right. So I hope now you are familiar with this statement. It is very simple. It is very simple. So I'm just saving this code now moving here. So again, what I did I just modified the code in web eight dot HTML, right? So I just refreshed the page. So here you can see we have different results. Now what can JavaScript do and JavaScript can change HTML content. Okay, so if I show you the code so these two statements are showing as of now, what can JavaScript do and JavaScript can change HTML content. These two statements are displayed on the browser. And then we have a button and button buttons label is click me if you click on this button. So some result will be displayed on the screen. So this text JavaScript can change HTML content. This text will remove and in place of this text, you will be having different text with the help of JavaScript, right? So what I'm going to do I'm going to click on this click me. And here you can see that text is removed or you can say replaced with this new text that is Hello JavaScript. So this is kind of a client side scripting that we are using JavaScript and it is it is executing the code on client side as well. It is not redirecting or it is not requesting server to perform this operation. So all these actions that we are performing it is happening on the client machine. So that's why the result will be rendering a fast lead. There will be no request to server. So we don't need to waste wait for the response from server. Everything is happening on the client side. Right. So I hope this way you are able to understand how this code is actually working. Okay, if still if you have any doubt, you can ask questions. So moving forward. Now I'm going to have one more example. So I'm just copying it and pasting it here. Okay, before pasting, I just want to show you here in this button button on click. We are directly calling this JavaScript code. Now what I'm going to do I will be creating a JavaScript method. And in that JavaScript method, this code will be available. And that that method we will be calling here. Right. So here you can see we have a function inside script. And above we have h1 and p tags. And then we have a button and on click off button we are calling this change HTML function. Right. So in in this visual studio code, you can see we are calling this change HTML method here on this on click button. And here it is defined. And inside this function, this document dot get element by ID, a demo dot in an HTML equals to JavaScript is written. And whenever we copy so you can see at the end of this line, this this character is wrongly represented. So whenever you copy paste or sometimes your single quotes doesn't copy properly. So you can just remove it and put single quote again. Right. So now this code is perfectly fine. So this way I hope you understood if you implement a function, then how you can call this function and this this process we will be implementing in lightning or a component as well as in lightning web component. So in in both of the component, if you implement any function in JavaScript, so you will be calling that function in HTML in the same way, the way we are calling here, the difference will be like in aura and LWC, both HTML and JavaScript will be written in separate files. So that I'm going to show you today as well like in JavaScript, we have external JavaScript concept. Concept. So you don't need to write this JavaScript code in HTML file, you can write this JavaScript code in separate file. And that file you can call in your HTML code, right? So that we will be discussing. But I hope this function implementation and how we can call it with the element that you understood. If I save this code, so it will be showing the same results. So if I go to web it, I'm refreshing. So you can see it is showing JavaScript can change HTML content. And now if I click on click me, so it is showing Hello JavaScript. So as easy as asking, can we also target paragraph through class? So yes, we can. But generally, we don't prefer that. We prefer it with the help of ID. And classes generally we use for CSS purpose. Okay, so here you can see this code is working. So the same code we can implement in two different ways. If you want, you need to implement a function you can if no, then you can use the JavaScript code directly as well. But best practice says you need to implement a separate function. And if we talk about external JavaScript, so that is actually proper best best practice, right? So don't write JavaScript code in your HTML file. So right now we are a beginner. So we are understanding how we can write JavaScript code when we'll be understanding JavaScript properly. So then we'll be understanding how we can separate out HTML and JavaScript in two different files. Okay, so if you have any doubt so far, you can ask and I would request whatever I am explaining in HTML CSS and JavaScript. So those who are new and from non technical background and you want to understand lightning or a component and lightning web component. So you need to do proper practice implement these code at your own. Instead of copy paste just type these code by watching the video and execute these codes so that you can have enough confidence. Okay, so moving forward. Now I'm going to show you one more example like how through JavaScript we can change HTML attributes. So first let's understand this example and it is very easy. So here what is happening? We have one heading that is JavaScript can change images. So this heading we are having here. Then we have IMG tag whose ID is my image. So ID can be anything. You can use any name as ID. Then we have on click. So on image also we click. So if you click on particular image and you want to flip that image with any other image. So for that purpose we are creating change image function. So we are going to call change image function here and the source is this picture. So you can use any file here. So I will be replacing this file because with this name I don't have any file in my system. I have a file with different names. So I will be using that and you can specify height and width. Then we have script tag where we are writing that function change image. Now here what we are doing we are getting element by ID that is my image and that element information will be stored in this image variable. Right now through image variable we are getting source and we are matching whether it is equals to desert. So if your image name is desert. So what will happen that image source will change to different picture. Right. So what will happen if you click on the picture whose name is desert. So it will be changed with this koala.jpg. So here we'll be using different picture and if this condition is false if your image source is not matching with desert it means it is already koala. So in else part you can see we are setting desert.jpg. So this way you need to use two images and if you click on one image so it will be removed and any other image will be shown at that place. So this calculation we are doing with the help of JavaScript and this JavaScript is written along with HTML. Right. So this is basically internal JavaScript and later today we will be understanding how we can write external JavaScript. Right. So now I'm going to copy this code. So I'm not writing complete code because it will take a lot of time. So I'm explaining each and every line so that you can understand the codes properly. Still if you face any issue so you can ask your doubts in the chat and later whenever you will be practicing so you can discuss these things in telegram group as well. Okay. So here you can see we have this code so I just split it in two parts. Right. Now I'm going to show you my folder where two images are available coding and designing. Right. So I will be using these two images so make sure whatever images you will be using so those images are available in the folder where your HTML codes are available. So here what I'm going to do I'm using coding here also I'm using coding here I'm using designing and here also I'm using coding so initially coding dot PNG my files extensions are PNG so initially coding dot PNG will display then if you click on that picture and if it is having name as coding so it will be converted into designing dot PNG and if it is designing that it will be converted into coding so this way this code will be working on the browser. Right. So I hope you understood whatever I explained in this example and still if you are facing any issue so you can just go through this code. Right. You can just go through this code and if you have any doubt at any line number you can just ask in the chat. Okay. So I'm just saving this code now moving to the browser and here I'm going to refresh the page so here you can see one image is available and if I click so it is changing but it is not visible properly because width is not up to the mark. So what we need to do we need to increase the width so I'm increasing it to 400 now if I refresh so it will be displayed properly still it is stretched more so I'm changing it to 300 so now I think it will be yeah now it is displayed properly so this this image is like coding dot PNG if I click on this so it is changing if I again click it is changing so this way if you want to change your images so you can use this code that I demonstrated you right. So I hope you understood this example like how through JavaScript we can control working off particular image or you can say HTML code. Now moving forward we have one more example through which I will try to change the CSS so let me just explain this example here only with the help of slide and then I will be copying the code and will be demonstrating you so here you can see we have h1 tag which is having what can JavaScript do statement which will display as is then we have p element whose id is demo and it is also showing some text then we have JavaScript and here we have a function whose name is my function inside this function we are getting the element by id so id is demo so it means p element information will be retrieved and that information will be stored in this x variable now what will happen this x dot style dot font size so through this way what we are trying to do we are trying to set css to that p element right with the help of JavaScript okay so Akula Sandeep we cannot place buttons in our images that is not possible so basically we have x dot style dot font size x dot style dot color so we through JavaScript we are setting JavaScript sorry css font size and color right and at the bottom you can see we have a button and on click of that button this JavaScript will execute so initially this p element will show JavaScript can change the style of an HTML element in simple format when I will be clicking on the button so that text will be increased to 25 pixel and its color will become red so this is the example that we are going to showcase with the demo so I just copy pasted the code and here I'm just including HTML tag right so this way code is implemented here now what I'm going to do I'm going to execute this code for you so if I refresh the browser so here you can see what can JavaScript do this is because of h1 then JavaScript can change the style of an HTML element this is because of p now we have a click me button so if we click on this button so you will see this paragraph element will be paragraph sorry this paragraph element text will be modified so I am clicking and you can see its size is increased and its color changed to red so this way with the help of JavaScript you will be able to change the styling of your HTML element right so this is another example that I demonstrated to you and whenever we will be using HTML CSS and JavaScript together in Lightning Aura and Lightning Web Component so few things will change but you will be having a basic fundamental idea so in Aura and LWC you will be having enough confidence if you have knowledge of basic HTML CSS and JavaScript so yeah so Ashutosh in button the type attribute is saying that it is a button so I think it is optional so let me just remove it from here I am saving the code and I am refreshing the page yeah so that is an optional element that optional attribute that you can use with that element right so moving forward we have another example so here you can see we need to validate the data so we have two slides of for this code so initially we have h1 we have paragraph p element then we have one more we have one more element that is input so here in input we are having id as number and type as number then button on click this my function will be called and button label is submit then we have a paragraph element whose id is demo right so this is the code that is available here so I think it is straightforward we have five different elements here and button is important because it will be calling the JavaScript function and this input and p elements are having ids p is having id as demo and input is having id as number number if I move forward so here we have a function in this function we have two variables x and text then through document dot get element by id num I'm going to get the value so basically what will happen in this input in this input element we will be able to type a number so this is the example through which you will be able to understand how we can receive input from html right so this we will be using in aura and html aura and lwc as well so through this num dot value we are going to retrieve the value that we'll be typing into that input element so it will be stored in this x variable now we are checking whether like is nn means not a number so if x is not a number so by any chance in that component if you type any text so it is checking whether it is number or text then we have or operator so it is checking whether it is less than x then we have or operator which is checking whether it is x whether x is greater than 10 so if any of the condition is true so this text will be receiving input not valid if all the conditions are false then text will be receiving input okay right so this way we are validating the input that we will be receiving through html and whatever text we'll be having in this text variable that we are going to set into inner html of the element whose name is whose id is demo so this way we are assigning it so i think this statement is well understood because this we are using a lot in lots of examples right so now moving back i'm going to copy whole code and we'll be putting into visual studio code so that i can show you how it will be executed right so this way i just pasted that code which i already explained to you so initially we have html code then we have javascript code so i'm just saving this and moving to vab8.html and refreshing the page so here you can see through h1 we are having javascript can can validate input then we have please input a number between one to one and ten then we have this input box and then we have a submit button if i take you to the to the code so here we have one p element as well whose id is demo and it is having nothing so right now it is blank it is not showing anything here but it will be having some value basis on the input so here i'm entering four and clicking on submit so you can see it is showing input okay so we are providing input to html element but the result is coming with the help of javascript but through html element so this is our p element if i show you the inspect so i'm right clicking and selecting inspect so here we will be able to see the complete code so you can see all the things are available here and this is input okay so from here if you click on this icon and if you hover on this so it will show you like here it is input okay so if i refresh again so you can see this p demo is blank right now this p demo is blank and if i enter something and click on submit so it is having some value now it is input okay so it is modified automatically right so i hope this way you are able to understand like how things are working in html and javascript and javascript is kind of controlling the functionality on client side with the help of html right so if you want to do some calculation if you want to do some actions so for that purpose you can use javascript now if i enter minus one click on submit so it is showing input not valid so at right hand side you can see p element value is changed automatically right so this way i hope you are able to understand how things are working here okay so moving forward now let's understand how we can implement external js so simply you just need to use script tag and here you need to specify the source my script.js and here you won't see any javascript thing you have only html h1 tag p tag button button is calling javascript function only then we have p element which is showing some message so what we need to do whatever javascript you are using here javascript file so right now this is a file and in this file you will be having this my function right so this way this code is written in html so this is one file that you will be implementing as html and if we go forward so this is our javascript file so in javascript you will be having a function whatever code you want to write you can and this external scripts cannot contain script tag so here you don't need to write any script tag right so what i'm going to do for this example i will be creating a external javascript so from here i'm cutting this code right i'm going to create new file so i'm creating javascript file pasting the code so here you can see that my function is having all the code and i'm just saving this i'm saving it as my script.js and make sure the file which we are creating here my script.js it is saved in the folder where your html file is available so i'm just clicking on save so it is saved in javascript format coming here then removing this and here what i need to do i need to write script tag right so we have some syntax so we need to write script then type equals to text slash javascript and then we need to specify source so this way you just need to write the statement if i take you again again here so this way we are writing the code okay so this is our html now here we are just calling this my function and this my function is defined here and in this javascript file you can define any number of functions so in the same way we'll be implementing html and javascript in lightning aura components and in lightning web components because in both the components you will be having two separate files one html and one javascript right so again i'm moving here on to the browser and i'm going to refresh the code okay so it is yeah so there is one mistake you can see the code everything went under script tag so what i did i did a mistake so i don't need to close it here instead i need to write a script tag like this so you need to start script tag and you need to end it as well it requires and tag otherwise whole your html code will be inside your script tag so now again i'm saving this code moving here refreshing the page so you can see now it is working fine so if you see here javascript like this script tag is ending here only so sometimes if you don't see any any results so you can you can open the inspect and you can see how your javascript how your html is rendering actually on the browser so now here if i enter something and click on submit so it is showing input okay and if i enter 56 so it will say input not valid right so this way our external javascript is also working fine so these are some advantages of using external javascript so it separates html and uh javascript code or you can say code then it makes html and javascript easier to read and maintain so now you have two separate file if you are focusing on javascript you don't need to bother with html right because both are having separate locations then cached javascript files can be speed up page loads and js files can be included in many html file so if you have javascript separately so that javascript file can be used in any number of html file right so if you use internal javascript so that that is limited to one html file but if you use javascript as an external file so it can be included in any number of html files so this is another advantage of using external javascript okay so this is it for today's session i hope you enjoyed the session and you get to know lots of things related to javascript so tomorrow i will be having one more session where a few more concepts related to javascript i will be explaining and from next week onwards we'll be starting lightning aura component and then lightning web components right so two topics are remaining related to development after that we'll be picking deployment related sessions and after deployment like deployment will be having one or two weeks and then i will be having qa related sessions and then i will be having ba related sessions right so this is the upcoming plan so first we'll complete aura then lwc then deployment then qa then ba right so five more modules are remaining as of now so this is it for today please share a review or feedback about the bootcamp and thank you so much for joining today's sessions and if you have watched the recording so thank you to you as well right so yeah this is it for today and i think austin your question is also answered like we'll be having deployment related sessions related to sales force as well okay so so basically jana aura component is not used generally for development purpose but we need to know like how they are implemented because in any of the project if a few components are built in aura so you need to know how aura framework actually works that's why i will be giving you little bit insight about aura components but going forward we'll be focusing more on lightning web component so that's why one week for aura and three to four weeks for lightning web components so rajiv basically that type we mentioned so that we can specify what type of file we are going to use so it is text slash javascript sometimes we have json or other formats as well so we need to specify the type of the file which we are going to use with that script tag so mukhiya yes mukhiya Vidya yes you can attempt pd1 because i hope you are having enough knowledge but if you want to know aura and lwc so you can wait for two more weeks otherwise you can go through the videos all the videos are available on the channel so you can just go through those those as well but if you want to understand those live so you just need to wait for two to three weeks and then you can surely appear for pd1 so rajiv i already explained this okay so if you have any more question you can ask otherwise i can end session here only so we'll be having one more session at 9 30 after one hour so if you are interested to learning coding fundamental so you can join that session and if not and if you want to share the word so just share information like if someone starting their btech or someone is from non-technical background and they want to learn coding concepts so for them that c or c++ bootcamp will be beneficial okay guys so i don't see any more questions so thank you so much for joining today's session see you tomorrow with some new features of javascript thank you take care