 Hello everyone. I am Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. So as you can see today, we are going to have a day 72 of this Salesforce Learning Bootcamp. So we came so far and today we are going to understand the basics of JavaScript. So this this week is totally dedicated to JavaScript. So I will be explaining you all the basic things. Those are necessary for you to understand before moving to Aura and LWC, right? So I will be helping you on that side. So I hope with this session you will be able to understand the things properly, right? So once again, I welcome everybody, those who are live and welcome to those as well who will be watching this as a recorded session. So moving forward, if you have joined this session or this bootcamp for the first time, and if you want to know with whom you are interacting and who is your instructor, so this is all about me. So with this slide, you will be able to know like what I am doing and how many years of experience I have, what all certifications I have done. So if I talk about certification, so you might have seen people are having lots of certification 20x 30x. I have that like in this slide six are shown one or one also I have so total seven certifications I have done but I always focus on quality over quantity. So whatever I have learned so far, I have done those certifications only. And whenever I learn new thing, then only I will be applying for a new certification. So certification is for your knowledge check, but we don't need to do certification to show the numbers only, right? So moving forward, this is my favorite quote like consistency is the key. So this is the result of consistency. I am delivering day 72 in front of you, right? And I know lots of people are consistent with me and learning Salesforce. And I know these this year, like you are facing recession time if we talk about the freshers. So but still be consistent, learn things because we are half of the way, right? We need to learn whole lightning web component development. We need to learn deployment. We need to learn QA practice. We need to learn business analyst practice. We need to understand different different clouds. So I think by the end of this year, you will be having each and every knowledge related to Salesforce and then whenever there will be openings available for freshers or maybe if you want to switch your job from one organization to another, or if you are planning to switch your job role from one role to another. So I think all whole year sessions will be helping you to prepare for interview, right? So be consistent and never give up. If you have started this, so just try to finish each and everything so that you will be able to appear for interviews whenever there will be an opportunity, right? So this is the best time to learn the things. And you can see this QR code. So if you want to become part of the Sanjay Gupta Tech School community, so you can see like I'm not only focusing on Salesforce, I'm focusing on other streams as well. So we did bootcamp on cybersecurity and I'm doing one bootcamp on C and C plus programming. So I'm covering other important subjects as well, right? And if I'm not knowing the things, so I'm searching for other folks and I have planned a few sessions from next month. Those will be delivered by different folks as you saw like Uncle Delivered sessions on integration. So I'm searching those people as well. And if you want to know everything, so just become part of this telegram group where all the information will be shared. And you can see the timeline week nine is completed week 20 is completed. We are in week 21 now. And in this week, we'll be understanding about JavaScript. And from next week onwards, specifically, we will be focusing on lightning component development. So those sessions will be very fruitful for you. And no one in the community ever explained each and everything in detail live, like with so much audience. So I'm doing this for you. And everything is free. Of course, no one is asking any money from you. And what you need to do, you just need to spare some time and practice whatever I'm explaining, right? So just follow Sanjay Gupta Tech School on YouTube, LinkedIn, Instagram, telegram, and all the important links are available in the video's description. And please for please share the information with your juniors as well, those who are appearing for BTech, right, so that they can follow this YouTube channel and they can find lots of resources free of cost, right? So moving forward, let's focus on the topic that I have chosen for today, that is understand basics of JavaScript. Okay, so now, first of all, a few slides will be explaining you the theoretical concepts, whatever are available with related to JavaScript. So we will be discussing them together. And if you face any difficulty, so you can ask your questions in the chat, right? So let me explain two, three slides that I will be moving to chat window and I will be picking the question. So if you see any doubt, just ask that question in the chat, right? So we need to understand what JavaScript is. So JavaScript is basically a lightweight interpreted programming language. Or you can say it is a scripting language. And it is designed for creating network centric application. So you might have heard about like web development uses JavaScript, mobile development uses JavaScript in Salesforce, if you want to implement components, so we use JavaScript. So JavaScript is used widely with the different, different frameworks. And whenever you implement any application, which is network centric, and which is executed through internet, so there you will be possibly using JavaScript. So JavaScript can be integrated with Java. So a few folks mistakenly think like Java and JavaScript both are same, but it is not true. JavaScript is totally different with Java. So if you want to integrate JavaScript with Java, so that is possible. And if you want to integrate Java script with HTML, so that is also possible. So when we talk about lightning or a component or lightning web component, so both type of components are having HTML CSS and JavaScript, right? So whatever JavaScript you will be implementing there, so that JavaScript you need to use in your HTML pages. So in these three sessions, I will be explaining you how we can integrate JavaScript with HTML. So we have two ways to write JavaScript in HTML. So one is you can write JavaScript directly in HTML code. And other way is you can create a separate file of JavaScript as an external JavaScript file. And that external JavaScript file you can use in your HTML code. The same way we did with CSS, right? So we have internal CSS, external CSS. So similarly, you can write JavaScript code directly in HTML. And you can create an external JavaScript file that you can integrate with your HTML code. And it is open and cross platform, right? So these are some features that you need to understand. And one more important thing that you need to understand that is related to JavaScript. So if you focus on this slide, so it is having four points. So just read each and every point properly. So I will be explaining all the points one by one. So first point says client side JavaScript is the most common form of the language, right? So here word is client side. So basically what happens whenever you implement your code in JavaScript, right? Or you implement any component which is having JavaScript code. And whenever it is loaded on the browser. So I hope everybody knows like lightning components or other web components that we implement with the help of HTML, CSS and JavaScript. Those we need to run with the help of web browser. So your code will reside on server. And through browser if you request particular page that is having HTML, JavaScript and CSS code. So that particular page will be loaded on the client machine. So code will come from server. So it will be rendering from server to client machine, right? Now JavaScript is basically client side scripting language. So the script should be included in or referenced by an HTML document for the code to be interpreted by the browser, right? So whenever your component or page is loaded on the browser, so HTML, CSS and JavaScript code altogether will be loaded on the client machine, right? So if you talk about second point, so it says it means that a web page need no longer be static HTML, but can include programs that interact with the user, control the browser and dynamically create HTML content. So what does it mean? Like if you embed, if you use JavaScript with your HTML code, so HTML is kind of static. If you have any button created through HTML, and if you click on that button, so nothing will happen. If you want, like if you click on a button and some action should be performed, so for that you need to write some code, some business logic, and that you can write in your JavaScript code. And that JavaScript code you can attach with that HTML button, right? So this way, whenever you load your component or page on the client machine, so HTML, CSS and JavaScript will be loaded on the client machine. And if you do any operation on the client machine, so JavaScript code will be executed there only because it is already available on the client machine after rendering from the server. So every time you don't need to go to the server to perform the business logic because that code is already available with the client machine. So that's why we can say like JavaScript is a client-side scripting language. So it runs on client machine and provide immediate results. So now if we focus on the third point, so it says, for example, you might use JavaScript to check if the user has entered a valid email address in a form field. So suppose you are receiving some data from user and you just want to check whether entered data is valid or not. So to check that validity, you can use JavaScript. And JavaScript code will be running on the client machine. So unnecessary server interaction will be reduced. Okay, so this is the advantage of using JavaScript. And the JavaScript code is executed when the user submits the form. And only if all the entries are valid, they would be submitted to the web server. Right? So this happens when you are using JavaScript with your component or with your page. Right? So anything you want to run on a client machine, so for that purpose, any business logic you want to run on client machine, so you can just create a JavaScript file and that will be part of your component and it will be executing fast. Right? So this is about client-side JavaScript. Now if we move forward, so we have few more points which are like advantages. So as I think I already covered this point. So these points, first says less server interaction. This I already explained to you. Like the code will be available on the client machine. So you don't need to go to server every time to run the business logic. Right? So this saves like request and response time and performance will be improved. And second point says immediate feedback to the visitor. So this is also clear. Then increased interactivity. Right? So rich interfaces. So these are some features. Those are these are some features or you can say advantages. Those are available with JavaScript. So that's why it is popular whenever we talk about component building. So in Aura, in Aura component, you will be implementing JavaScripts and in Lightning Web Components also you will be implementing JavaScript code. Okay. So now, so these sessions right now, like today, tomorrow and day after tomorrow, whatever sessions I will be delivering. So these sessions will be having JavaScript basics and those basics will be utilizing while implementing Aura and LWC components. And right now whatever examples I will be taking, so it will be like related to web development. So we'll be seeing like in HTML how we can leverage JavaScript so that they both can work together. So if you want to use JavaScript in your HTML, so you need to follow the syntax. So if you remember when we implemented CSS, so in CSS, we used to write style tag. In between style tag, we need to write the CSS code. So similarly, if we talk about JavaScript, so in JavaScript, you need to use script tag. Then you need to specify two attributes. First one is language and second one is type, right? And in between script tag, you will be able to write all your JavaScript code. So whatever JavaScript code you have, so that code you can basically write inside these script start tag and script and tag. Okay. So I guess this syntax is very easy. And if you want to see how we can place it in our HTML file, so this is the example which will show you how we can write our code, JavaScript code and HTML. So you will be having HTML then here head part is missing. But in your code, if you have head part, so you can use that as well. After that, we have script tag in inside body. So script is having one statement like document dot write hello world. So basically in JavaScript, if you want to show something as an output, so you can use document dot write. So document dot write will be displaying hello world on the browser. Okay, so this is the example. So I will be implementing this example for you so that you can understand how it will execute. So let me just take you here. Okay, so I'm going to create new HTML file. Then HTML tag, I'm using body tag. Then inside body, I need to write script. Right. So after writing script, we need to specify two attributes. One is language and one is type. So language will be JavaScript. And we have type as text slash JavaScript. Okay, so I just closed it here. Now inside script tag, we have a statement document dot write. And inside that hello world is written. So what I need to do here, I need to write document dot write. And inside double quotes, I am writing hello world. And then you can have a semicolon. No, semicolon is not required. Right, so I'm just saving this code. So I'm going to save it in the web folder that is available on desktop. And name of file will be web eight dot HTML. Okay, so this way my code is saved. Now if I execute this, so hello world will display on the web browser. Right. So I just saved this file. Now I'm moving on to the desktop and I'm going to open web eight fold web folder. Then we have web eight. So I'm going to open it with Google Chrome. And here you can see it is showing hello world. So this hello world is coming up through that document dot write statement. Okay, so I hope with this example, you got to know like in HTML, we can write script tag. And inside script tag, we can write any statement related to JavaScript. And when we'll be implementing or a component or lightning web component, so basic JavaScript logic will be same. But how we implement that file that is little bit different. So that will be understanding when we'll be implementing aura and LWC components. Right. Now after this example, so we need to quickly understand two more concepts. So first one is case sensitive and second one is comment. So in this slide, you can see case sensitive nature is mentioned. So in my C C plus plus boot camp like yesterday, also I discussed about case sensitivity, right? So case sensitivity means like whenever you are implementing any code. So if you need to use upper case and lower case separately, like upper case and lower case, both are having different meaning. So it means your language is focusing on case sensitive nature. And if both are same upper case and lower case, meaning is same. So your language is case insensitive. Right. So as a Salesforce consultant, we are working on apex programming and apex is basically case insensitive. Now here we have JavaScript which says JavaScript is a case sensitive language. Right. That's why whenever we learn apex programming, so I already I always say to the beginners, don't try to adopt case insensitive nature. Just try to focus on case sensitivity only because HTML HTML is also case insensitive. But if we talk about CSS and JavaScript, so you need to focus on case sensitivity. Right. So this you need to remember and last statement says like time t i m e t capital, then second one is t i m e t i capital and time t i m e all letters are capital. So these are different. But if we write these identifiers in apex, so they will be treated as same. So this is the difference that you need to remember going forward. Now let's talk about comments. So comments we all know like in programming, if you if you write a statement and you don't want to execute it at the time of execution. So what you can do, you can just convert that statement in a comment. So here we have two types of comment symbols. So if you want to comment out any line, any single line, so you can use double slash and if you want to comment more than one lines together, so you can use forward slash asterisk and asterisk forward slash. Right. So these are some ways through which you can make your JavaScript code comment out. Now third and fourth points are important. So JavaScript also recognize the HTML comments opening sequence. So this will be recognized. But if you want to close it, so you need to write double slash and hyphen hyphen greater than. So if you want to use HTML symbols for commenting JavaScript code, so beginning symbol you can use as is but with ending, you need to specify double slash. Okay, so this you need to remember. Now we have four patterns. So this is also important to understand like how we can display values with the help of JavaScript. So we have four different methods. First one is window.alert then document.write, I already explained it to you. Then we have inner HTML and then we have console.log. Okay, so let's focus on window.alert. So if I move to the next slide, so there you will find a code. Right. So before moving to this code, let me just see. I can see a couple of questions are there. Okay, so Adil is just appreciating my efforts. So thank you. I thought it is a question then Shubham. Okay, so Shubham I think when we'll be completing LWC. So maybe then we can focus on this. So if you guys are having any doubt as of now, anything that is coming in your mind and if you want to discuss with me. So just write that in the chat so that we can discuss it later. Okay, so now I am going to focus on window.alert. So window.alert is a method through which you can show some results. Okay, so Ayappa is asking what about confirm message. So I didn't get your question. What are you want to say with this? Akash is asking where we use JavaScript in Salesforce. So Akash, for that you need to wait for next month, sorry next week. So next week we'll be discussing about Lightning Aura component and then we'll be starting Lightning Web Component. So in Lightning Aura component and Lightning Web Component, we will be using JavaScript. Okay, so here you can see we have one more example where a few statements are written. So h1p tag then script is having window.alert. So I'm going to modify the code which I wrote earlier. So here I'm going to write h1. So I'm simply writing heading then I'm writing p. So it is a paragraph so I'm writing paragraph. Right, so we have then script tag and here I just need to use alert. So the syntax for alert is window.alert and then you can pass some values. So here I'm writing window.alert 5 plus 6. Right, so this way I added two values and it will show you a pop-up. It will show you a pop-up. So I'm going to open it. So let me just open with Google Chrome. Yeah, so here you can see alert message is available. So heading in paragraph are displayed. Heading in paragraph you can see at top right top left corner you can see heading in paragraph are displayed and if you focus on this alert so here it is showing 11 that is sum of 6 plus 5. So this way if you want to show some alert so we can use JavaScript as well. If you click on okay so it will go further and you will be able to see the result of the page. Right, so this way we can just utilize the alert functionality. Now if we go further so this is document.write which I already explained to you. So it will be showing the result on the browser's page. Right, so whenever you will be practicing so you can just implement this code in your system and you can practice. Now I am going to write this one. So here you can see what we are doing. We are having a button. So in the beginning of the session I told you like through html we can create a button and then we can embed JavaScript code on that button. So here on button we have an event that is on click and if we see so on click is having document.write 5 plus 6. So what will happen if you click on that button then document.write will show you the result as 11 and the label of that button will be try it. Okay so now I'm going to implement this code. So here we don't need to write script tag you just need to write button then you can write on click document.write then I'm writing 5 plus 6 and its label will be try it. So here you can see a button is available if I click on that button so you can see it is showing 11. Now you might be thinking heading in paragraph is not showing now. So what happens whenever you are using this document.write so document.write basically erase all the previous result and then it starts displaying the new result. Okay so you need to remember whenever we are using document.write so all previous results will be erased and the new result will be available on the UI. Right so this is another way like how we can use javascript so like tomorrow I will be explaining few more complex examples and we will be creating some functions as well and I will demo you how we can create external javascript file and how we can leverage that external javascript file in html because in lightning aura component and lightning web components we will be creating javascript file separately that that will be available along with html but it will be a separate file. Okay so now moving forward we have one more example so if you want to use any element and you want to fill value into that element so that also we can do with the help of javascript so here you can see we have an example so I can see we have some questions so I am asking window.conform message as javascript right now yeah so whatever functions javascript supports you can use those messages you just need to know the syntax and then like right now i am explaining you four examples i'm explaining you four examples window.alert window.write inner html console.long as you are saying we have window.conform so you just need to check the syntax and basis on that you can use that in javascript code so shubham is asking why we javascript instead of javascript so shubham javascript and java both are different languages javascript is for client side business logic implementation and java is separate it has different features so java is whole different programming language so both have different purposes so if you want scripting language that will be available on client machine wherever we access any web page and all the business logic should execute on client machine only so in that case we prefer javascript okay so i was on this example so here i'm going to explain it what is happening so if you remember in css example i explained you like we can provide id to particular element if you are creating any element so to that element you can provide an id right so here in this example what we are doing we have provided an id to this p element so now don't think that this id is related to css it is not anyhow related to css it is just identification of this element p tag right so this p element identity is demo so you can say this p paragraph name is demo now what i'm going to do in script tag i have this document dot get element by id so get element by id then here i'm passing that id then dot inner html so what will happen the result five plus six result will be assigned to the element whose id is demo and whose id is demo it is p p element so p element will be having total of this five plus six and in place of p six eleven will be shown right so i'm going to show you how it will work so i'm going to erase it then here i'm creating p id equals to demo and here it is closed now i'm creating script tag now in between script tag we just need to write document dot get element by id then here you need to provide the id then dot inner html then equals to anything that you want to write so for each example we are just calculating sum of five six so that's why i'm using these so what will happen this five plus six will display here in place of p if you write something in p let's say i'm writing hello so this hello will be replaced with that eleven so after heading in paragraph eleven will be shown automatically and let's say we have one more paragraph so it is paragraph one and it is paragraph two so eleven will be coming between in between paragraph one and paragraph two with the help of this javascript code okay so now i'm going to open it in browser okay here these are already opened so i'm just refreshing the page here you can see web eight is showing and we have heading we have paragraph one then we have eleven hello is not displayed here right hello is not displayed here instead we are able to see eleven and then paragraph two so this way i hope you are able to understand how this code is working so with the help of javascript we are able to put some value into element right so this these kind of features javascript supports so with the help of javascript you can control your html code as well so isaac is asking about writing double quotes and single quotes so i think you can write double quotes single quotes anyway let's see what happens if we write single quotes so i'm writing single quotes here and i'm just refreshing the page so it is working fine right so in javascript you can use any quotes double quotes or single quotes and in html one session i told you if you start with double quotes and in between you want to use double quotes again so in that case you will prefer single quotes so if you have a pair of double quotes and as a nested pair you want to use double quotes again so that is not possible in that case inner double quotes should be replaced with single quotes and if you have single quotes outer so inner will be double quotes and in apex programming we we have single quotes only we we don't have double quotes okay so now moving forward so we have one more example for today so this is the last example for today which is console.log so if you have something in the script and you want to show a result in console if you want to show result in console so you can just use console.log so I am going to show this as well so here I am writing console.log five plus six so what will happen result will be available in the console as well so for that I just need to move here and you can just right click and click on inspect so that you can have the console in front of you so here at right inside you can see console is available so right now it is blank right now it is not showing anything okay right now it is blank so now what I need to do I just need to refresh the page and whenever I will be refreshing so here you can see the result so here we have 11 under the console here we have 11 as a result so I hope you are able to see this so it is a little bit small so this is because of console.log let me just zoom in no it is not getting increased right so if you practice it so if you open the console there you will be finding the results of all the console statements that you are using okay so this way I hope you are able to understand this code that I explained it to you so I just explained you four different ways through which you are able to interact with your web browser with the help of javascript right yes so mangesh you are correct in apex we use system.debug in c programming we use printf and in javascript we will be using console.log right so this is all about today's session so I just covered few basic topics related to javascript and tomorrow also I will be explaining few more topics so we'll be having two to three sessions on javascript and from next week I will be starting lightning aura component and I think lightning aura component and lightning web components are very much important if you want to become a sales force developer because a sales force developer has two things one is backend development and second is front end development so you need to learn both the developments if you want to become a sales force developer right once aura and lwc will be completed so we'll be having deployment related sessions qa related sessions ba related sessions and then I will be starting cloud specific sessions so no man I think I already shared apex practice sheet as well but if you need so I will be resharing it so I will be sharing it in the telegram channel and from there you will be able to receive it okay so I think this is it for today and just share a review or feedback about the bootcamp and share this youtube channel with as many folks as you can and soon I am planning to open offline center in Jaipur and that offline center will be offering internships and job readiness programs so I will keep you posted it will be taking one month or so and that offline center will be located in Jaipur so it will be targeting Jaipur audience initially and that after that I will see if it becomes successful so I will target other cities as well okay so this is it for today okay it's up you are asking like if we don't use double quotes so in that case you will be getting an error message so whenever you write some text messages so in that case double quotes or single quotes are required okay so I hope this is it for today thank you so much for joining this session if you are watching the recording then also thank you so much for sparing some time and putting your efforts so see you tomorrow same time and after some time I will be having cnc plus first bootcamp so I just started that bootcamp this week only so please support and share this information with as many folks as you can because for beginners cnc plus plus programmings are very much important right so with this note I take your leave thank you so much see you tomorrow bye