JavaScript Fundamentals: Build a Strong Foundation in Web Development

1. Introduction: Hello, and hi. Welcome to this JavaScript class. Am Sa, and I will be your instructor throughout this class. What you will learn in the sports is, you will learn basics of JavaScript and also advanced topics like Async and web B APIs. You will start from very basics. You will learn about what is JavaScript, the syntax of JavaScript and also you will learn how to include JavaScript into your HTML web page. You will learn about variables, data types, operators, and also, you will learn about control flow statements, functions, objects in Javasco and also you will learn about cookies, and he will go to the advanced topic like ASN and web BBIs also, you will learn about how to handle the error in Javascri and also you will learn about keywords in Javas. So what is needed to start this class? No brain experience is needed because we will start from scratch. All we need to have is a computer with a text editor and a browse and also enthusiasm to learn something new. In this class, we will have a class project. At the end of the course, you will know about how to create a list using Javas. You're going to use local storage for this and in this project, you will learn about how to create a new task, how to mark as a task as completer, and also you will learn about how to delete a task. Let's get started. See you on the first list. Thank you. 2. What is JavaScript: Hello Everyone. Welcome to this lecture. In this lecture, we'll see what is JavaScript. This is a high level interpreter programming language. It primarily used for making web pages interactive. It is a core technology of web development. JavaScript enables dynamic content updates, interactive forms, animation, and more. Key features of JavaScript. Clin side scripting, it runs web browser to enhance user experience. Lightweight and versatile. It works well for both small script and complex applications. Even Tripen approach responds to user accents like clicks, keypress and Form submisons the next feature is a synchness. Supports non blocking operations using callbacks, permiss and Async AVID. It supports CASS platform, works on different operating systems and browsers. And finally, extended by libraries and frameworks. Examples include react, angler, and Js. Let's see what are the common uses of JavaScript Dom manipulation. It modifies HTML and CSS dynamically. Palm validation, check user input before submitting forms and JavaScript used in animation and effects Aid smooth transition and animations. Also, we can fetch data from APIs, load content dynamically without reference to page by using Ajax pitch API. Mainly JavaScript used in building web publications. Used in both front end, which means react view JS, and in back end no JS. And. 3. JavaScript Syntax: Player one. Welcome to this lecture. In this lecture, we will see about syntax of JavaScript and also we are going to create our first Hello World program. Let's get started. In my desktop, I have created a new folder called JavaScript. I have opened that folder in my Visual Studio board. Inside that folder, I'm going to create a new five, new HTML five, name it index dot HDH. Okay. This is the basic secular achievement? This is the syntax of JavaScript. It starts with script tag and end with SLA Script tag. Inside between the tag is considered as a JavaScript code. Inside the scripta, I'm going to write our first lo word program by typing document dot R. I'd say hello world. The the file. Let's open this file in our Browser. As you see, here is our output. This document, anything inside between the codes will display in the browser. In this lecture, we have learned about what is the syntax of Ja spit also we have created our first Allo world program. Thank you. See you next lecture. 4. JavaScript HTML: Hello everyone. In this lecture, you will see about how to add JavaScript into HTML file. Let's get started. Let me create a new HTML file and name it Javascript dot HL. A Okay. Here I'm going to create a button. Click me. Actually, we can include JavaScript in HTML in three ways. Bonus Inline JavaScript. Let's see what is inline JavaScript. We can add JavaScript inside the HTML element. Okay. Unclick IO IO the unclick, I write a code, Alert, button clicked. Let it tested out, go to browser. When I click on the button, the alert box is button clicked. Like this way, we can include JavaScript on inside the CML tag. This is called inline JavaScript. The other way external Java script. Instead of writing this, what I'm going to do is I'm going to create a new file called script dot JS. Inside script js, I'm going to create a new function. Button click Alt Okay. Button clicked script triggered using external JavaScript. I use the colored function. Inside that tag, we need to include the external JavaScript file by using script ARC. Here, we need to link our JavaScript file type JavaScript. Save the file. What I'm going to do is This is the syntax to include the JavaScript file within the XML file. Instead of directly calling inline CSS, what I'm going to do is I'm going to call this function clique. Trigger this function. Button, click Controls. Here the file here. This is a syntax for include a script in the tile script here we need to mention our source file Controls and go to browser now it's worked. This is the way we can include external JavaScript file into our Ach file. Next, another method is in canal Javascript. Instead of writing, Javascript external file. Let's copy this inside tag, I'm going to create a script tag inside scripta. I paged the code, copy it from the sple controls, and put a browser. It also works fine. But script triggered using internal JavaScript. All right. In this lecture, we will learn about how to include JavaScript in the TMLFle. We can include JavaScript in three ways. Ones inline JavaScript and second onus external JavaScript, third onus by using internal JavaScript. Thank you. See you next lecture. 5. JavaScript Console: Lower one. Welcome to this lecture. In this lecture, you will see about console dot lag in JavaScript. Console dot lag is used to print messages or values to the browser console for debugging or logging purposes. Let's see the syntax syntax is console dot lag. This is the syntax of console dot A. H. Let's see how can see this console log in browser. See the file. Right, click on the browser and select Inspect. And in this pop up, click Console and here is our output. Test output. This is what we have typed inside the double codes. Let's change the text like test output work. Repress Z output also changed like test output worked. Like this way, we can log the string value by using double codes and also we can log the number values. Okay. We can print the string value, and also we can console the number value. Thank you, and it's west. 6. JavaScript Comment: Player one, welcome to this lecture. In this lecture, we're going to see how to use commands in JavaScript. What is commands? Actually commands are used to add nodes or explain the code. They are ignored by the JavaScript engine and do not affect the execution of the program. There are two types of commands available in JavaScript. One is single line command and another one is multi line command. This is the syntax of single line command. Slash less. And multiline command, start with Pervet slash star, and end with star Pervet slash. Here we can add multi line to describe the code. Like this, we can use multiple line common in JavaScript, Pi. 7. JavaScript Varialbles: One. Welcome to this lecture. In this lecture, you will see about variables in JavaScript. Variables are used to store the data values. We can declare variables using three methods. One is where we are. Let me show you. I'm going to create a new file here. We can create variable in three ways. We let and then const. Let me write asimer code first and use the same index file. I'm going to command this out here and here. We can define a variable called by using where keyword and followed by the variable name. And we can assign value to the variable by using as operator. Okay. There are few rules to define a Java script variable name. Variable name must start with a letter or underscore or dollar symbol. We cannot use reserved keywords. We will see about reserved keywords later, and it is case sensitive. Okay? We can assign value to the variable in multiple ways. Example, it equal Smith. This is string type variable. Next, the age of the Smith is 50. It is indeed type number, and we can assign Boolean value also. But or false. This is type wool. Like we can assign object value to the variable like this. This is object type variable. Also, we can assign array values to the variable by like. And also, we can assign null value to the variable like this, let your variable is value can assign null like this. All right. In this video, we have learned how to create a variable and how to assign value to the variable. And also we have an we can assign multiple data type values to the variable. Thank you, Can structure. 8. JavaScript Let: Player one, welcome to this lecture. In this lecture, you will see about it statement in Java script. Lit statement in JavaScript is used to declare a variable that are black scoped and can be updated but not declared within the same scope. And already we know the syntax of the late variable, start with Git D and followed by the variable name. Like this, we can create a late variable, and we can assign value to the variable by using assigning operator and followed by the value. The value can be string, number, boolean, object, array, null. Okay. Late variable we can access only within a block scope. We write a sample program for this? Did we create a new method? Here I'm going to create a new variable, let x equal to. We're going to log this value Control X. Here, I'm going to call this method. Okay. Let's take a preview in our browser. Actually, the method n will look like this function method, bracket, followed by Ty blazes. Save the file and see the output in our browser. Here is our output. It's fine. So what I'm going to do is I'm going to access this variable. I'm trying to access this variable outside of the method means we will get here. Gut reference error exist not defined. That is what I'm saying variable declared, late are only accessible within the block. They are defined. A, late variable can be updated but not redeclared in the same school you. I will create variable name, let name equal to John. Next, what I'm going to do is I'm going to assign value to the variable name Smith. What will be our output? Our output will be Smith. Let me check it out. Photo browser and see. Here is the output, Smith. This is what I'm saying. It can be updated, but it will not allow us to redeclare the variable in the same program. Let me try to redeclare the same variable name, you see, there will be sewing error alert. Control s and run this program in your browser and we will get error. See, ungat syntax error identifier name has already been declared. Okay. All right. And at the same time, we cannot access the value to the variable before it is inalized. That name equal to Smith. And what I'm going to do is I'm trying to access this value of the variable before it is inalized. We will get error. Ngut reference error cannot access name before initial season. All right. In this lecture, we have learned about how to declare a late statement and and what we have learned, it is a block scope and it can be updated but no re declared in the same scope. As we have learned how to debug error in the chrome console. Thank you. See you next lecture. 9. JavaScript Constant: Layer one, welcome to this lecture. In this lecture, you will see about Kanst statement in JavaScript. Cans statement is used to declare constants, which are black scope like late but cannot be reassigned after declaration. We land, we can access late variable within the black scope, at the same time, we can reassign the value to the late variable. But in Kanst case, we can access the variable within the blackcope but we cannot reassign the value to the Kanst variable. And features of Kant is must be initialized at declaration. I will show you by writing a program. The st variable must start with the P we Kunst followed by the variable name. Let's say Pi and value to the Pi is 3.14. This is the correct way. This is the way we can assign value to the const variable and we cannot re declare. Let's console. Take the program, go to your browser. Inspect, go to conservative. Here is our output, 3.14. What I'm going to try, I'm going to assign. I'm going to create a new constant variable without assigning value. Okay, I'm going to comment this out. Here I have created a Kanst variable without assigning any value to the variable. Now we will get error message. What error we are getting ungod syntax error, missing initializer in Kannst declaration. Okay? That's what I'm saying. Kanst variable must be initialized at declaration. Got it. Okay, fine. And also st variable cannot be reassigned. Here I have created a st variable Pi the value of 3.14. Now I'm going to assign value to reassign value to the variable like this five. We will get error message. Ungat type error assigned to constant variable. We cannot reassign value to the constant again. Okay. When to use const keyword. We can use st by default unless you expect the variable to change and use late only when reassignment is unnecessary. All right. In this lecture, we have learned about Can statement in JavaScript, how to create const variable in JavaScript, and what are the rules to use const keyword and how to debug st method error in Chrome. Thank you. See you next lecture. 10. JavaScript Data Types: Player one. Welcome to this lecture. In this lecture, you will see about JavaScript data types. What is data types in JavaScript? It refers to the type of the value that we were storing or working with. One of the most fundamental characteristics of programming language is the set of the data types in support. There are the types of values that can be represented and manipulated in a programming language. And there are different types of eotypes available in Java Script, which is string, number, Boolean, null, undefined, and also object, array, and function. Okay. Then we write a program for this. Let create a variable, call name equal Smith. This is string type. It can be declared inside double quotes. Double quotes are single codes are within baptis. We can declare like this, or like this by using backods like this. All three will give you the same output. Next, we can declare number number data type. It is number data type. It can be integer float or double. Okay. Another example of number variables rise equal to 9.99 like this. And another data of boolean, either or false. Let is adult True. Either you can use assign, true value or false value. This is the Boolean data type. And also, there is undefined data type, a variable that can be declared but not assigned a value. And also, there is null This is null data type. Next one is object, data type. People. Come as apartn. This is Object data type. Next, you will see about array data type. We can array. We can assing. Well you like this. This type of data type is known as RA data type. Next we will see about function data type. The example of function data type, start with function and followed by the function name inside curly blazes written Okay. Next, we're going to find the type of the data type. Let's write a program for this console dot lag. Type of Hello. Inspect, Console. The output is pin. This is the string type. Get a type. Let's change the string value to the number value. What will be the output? It will be number. Let's change it too. The output will be boolean. Here is our output is boolean and this undefined. This is undefined type of data type. And let's check with null value. This is also known as Object data type. N is also object data type. Here I'm going to add real objective or output will be object data type. In this lecture, you have learned about data types in JavaScript. What are the different types of data types available in JavaScript? We will see you on the next lecture. Thank you. 11. JavaScript Operators: Hello Everyone. Welcome to this lecture. In this lecture, we will see about operators in JavaScript. Operator is a symbol that performs particular task. We create a new file called Operator Orator stream. Okay. Let's see type of operators. There are different type of operators available in JavaScript, which is arithmetic operators. And then compare is an operator. Logical operator, bitwise operator, assignment operator. And finally, miscellaneous operator. Okay. Let's see what is arithmetic operator. Arithmetic operator used to perform mathematical operations such as plus Addison, subaxim minus and multiplication, division, modules, and increment operator plus plus, and decrement operator minus minus. These are the operators tall arithmetic operators. Let's see comparison operator. It used to compare two values. Equals equals, not equal. Strict equal. Not strict equal, greater than, greater than are equal to less than are equal. These are the operator curve comparison operator. Next, we see logical operator. It is used to perform logical operations a Boolean values such as logical logical R, logical naught. These are the operators call logical operators. Let's see bitwise operator. It is used to perform bit level operations on IndigR. There are seven types of Bitwise operator available in JavaScript, which is Bitwise Bitwise R Bitwise R and Bitwise naught, left shift and right shift. Right shift with zero. These are the operators called bitwise operators in Javas. Next, we'll see about assignment operators. This used to assign value to variables, which is simple equal plus equal, which is called add and assign minus equal. This is called subtract and assign, multiply and assign, divide and assign, and finally mordlo and assign. These are the operators called assignment operators. Next we'll see about miscellaneous operators. Other operators other than these five operators, called miscellaneous operator, which is additional then type of nulls question mark and delete Cam then grouping, which is called grouping and yield operator. T dots, which is called spread operator and double star for explanation operator. Now I'm going to write a program by using arithmetic operators. I have created Script tag inside head tag. Let's create a variable called X, and I'm going to assign value to the variable as ten, that Y equal to six, for example. Okay. Console dot lag, x plus Addison for Addison, we must use plus operator. Y. Let's see the output in our browser. Go to Console. Here output. Next, we are going to C subaxon for that we need to use minus simple, which will return 94 as our output. Let's see. C, 94 is our output. Like this way, we can create program for multiplication. Console dot lag, X into Y. This is the multiplication operator. And what will be our output hundred into six which will return six conduct as a output. See, here is our output. Next, we'll see about division. For division, we must use this symbol, let X divided Y, Y. Let's see the output in browser, I will written. Let's see what is our output. Here is our output, 16.66. Next, we'll see about models. X modulo, y. Here is the output per modulo operator. You'll see about Comparison operator. Going to create variable, the const keyword, A equal to ten, and create another variable with const keyword, B equal to 20. Let's store there. We create a new variable ptlls which is A equal equal to B. Let's see the result by using console lab. I'm doing this. This will return forms. Since A and B are not equal. Let's change the value of equal to ten. Now, the result will be two. By this way, we can use the comparison operator equals equals. And let's say not equals. Change the value B back to we D and A, not equal B. I will return the result as prove. Return. Let me change the value of A equal to 20 and now the result will be false. Okay? Let's see, strip equal A equal to 20, B equal to 20. I would say, both are value data time. Both are indegR values. Now our output will be true. Okay. So what I'm going to do is I'm going to change this value as a string 20, const A as a string value 20, const B equal to integer value 20. And it will both the values and the data type. So now our output will be as a false. Let's check here our output as false. We got the output as a false. Next, you will see about logical operator. No, I'm going to write a sample program. First, I'm going to define two variables. Let is huddle equal to it has license equal to pulse. Now we're going to use logical and operator is adult and has license is eligible to drive a car. You can drive a car. Yes. You're going to log messages. You cannot drive a car all the file and see the output. You cannot drive a car because he's adult, the condition is true, but he has no license. Let's change as license value to true. Take the file. Let's see there between bs. Now our output change, you can drive a car. Let's see operate logical. Is adult a license. Let's say the messages, you must at least have one qualification. Plug the message as you didn't meet any qualification. Let's see. You must at least have one qualification. Our statement is true. That's why. This message as printed in output. Let's change both value to falls. Now, you don't meet any qualification. All right. Next, we'll see about not upweight. Not as license, I will change the Bolan value. Actually, we are assigned the value to the as license variable as false by using not variable, we're going to say it as true. Let's see. As license true. By changing the value to the true, our output will be false. As license false. Next, you will see about assignment operators. Let me declare a value. Variable. I now equal to ten. First, you will display going into la or initial value. Okay. Next. Number plus equal to five. Let's console this value. Okay. Next, I'm going to minus three value. H. Okay. So file. And see there or put in browser. We got ungut reference error, console log is not defined. There is a type of error in here. H. Our initial value is ten. After incrementing five, our value is 15 and after decrementing by three, this is our output. Next, we are going to multiply and increment by two value after I'm sorry, the number value. The next, we are going to divide by and assign value by four. Value after divd by f and save the five and let's see the output. This is the initial value. After incrementing by five, 15, after decrementing by three, the output is 12 after multiplying by two, this is our output. This is the output after they are by four. And like the s, we can use mod low and assign. I Say the file and see the output and value after Model two, just zero. All right. All right. In this lecture, you have learned about operators in JavaScript, and also we write a sample program for this. Thank you. See you on next lecture. 12. Control Flow: Hello, everyone. Welcome to this lecture. In this lecture, we will see about control flow in JavaScript. In general, what is control flow in programming language? The control flow determines the order in which statement are executed in a program. Control flow allows developers to write logic that can make decisions, repeat tasks and manage execution path efficiently. In JavaScript, there are three type of control flow statement is there. Let's see one by one. The first one is conditional statement, and the second one is loops. And the third one is continue and break. Let's see about conditional statement. Conditional statement, it allows a program to make decision based on certain conditions. We can categorize conditional statement in JavaScript, now following ways. If statement If statement if statement and switch statement. Okay, Let me write a sample program for using I statement. Let's define a variable called age let age equal to 18. If. This is the syntax of if statement. If inside bracket, you must specify the condition and inside cibrss the code to be executed. Okay, this is the syntax. This is the syntax of if statement. Okay? So now in the condition, we are going to set if A is greater than R equal to 18 means, you're going to control log log the message like you are eligible to code. The statement, the block of code only will run if the condition is true. Save the file. Open your browser to see the output. I the console la, our output is you are eligible to vote, which means our condition is true. When we change the age 15. Is the page, now, nothing will be shown here because our condition is false. Now I'm going to write a program for IRS statement. The syntax of IL is if inside bracket, we must specify the condition and if the condition is true, this part of the code will execute. Otherwise, this part of the code will execute. This is this index of I statement. They define a new variable called temperature equal to 25. If the temperature is greater than 30 means You're going to say at us. It is hot outside. Yelse you're going to say at us. The weather is pleasant. Save the file. What is our output? The weather is pleasant because our value of the temperature variable is 25. Our condition is false. That's why the il spot is working. Let's change the value to 45 and let's see the output. And see, this is the output. It is too hot outside because this statement is true. That's why this part of the core is executed. Okay, fine. Next, we are going to see about Elsev statement. This is the syntax of sf statement. Condition one here, condition. Two. Now I'm going to write a sample program for this. Let's define a variables equal to 90. It say 90. I marks greater than are equal to 90 means. We're going to say it as grade A. I marks greater than or equal to eight means you're going to say us it say grade B. Otherwise, it say grade C. First, the program said the first condition. If it is true, this part of the code will execute. And if the first condition is met false, the second condition will say, and if it is met true, then this part of the code will execute. Otherwise, this part of the code will execute. Let's see the output in our browser. Output as a grade A, B, or condition first condition is true. Let me change it as a five. What will be our output? It will be grade B, C, or both as grade B. Let's the mark to 60, which means this part of the code, both the condition will get failed, this part of the code will execute our output will be grade C. Fine. Next, you're going to see switch statement. Let's declare a variable called D. Let's say Monday. Switch. Here, you need to pass our value and inside switch is Monday. Console dot lag. Okay. Break. Next, we are going to check condition, other case. If the day is Friday means we are going to say it does. Okay. Okay. This is the syntax of switch statement inside bracket, we need to pass the value and here inside switch statement, we will check the case with a value like this, we can check many cases. If all the cases are fail by default, this part of the code will execute. Let's our output and browser. This is start of the week. Now I'm going to change this value to Tuesday. What will be our output? You will get? It is a normal day. This is our output. Now I'm going to change it to the day to Friday means, what we will get weekend is going to start. We going to SA In this video, you will learn about conditional statement in JavaScript. Next, you will see about loop statement in JavaScript. Let's see loops in JavaScript. What is loops? It helps execute a block of core multiple times. There are three types of loops available in JavaScript, which is parlo White loop. The third one is u white loop. Let's either syntax for low, which is far inside bracket. There will be three parts. First one is initials, semicolon. Next will be Cdison semicolon, and the third one will be increment or decrement. Inside curly branches, the code to be executed. This is the syntax of par. Let me write a sample program for using paro. Let I equal to one, semicolon. The next will be condition I less than or equal to five semicolon. Next, we're going to increment the variable. Inside the CLI basis, we are going to log our output by using console dot log. I'm going to love ration value. Say the fi, go to browser. And see. This part of the core is executed for five times. That's why we got the output as tsm on, ds in two, d in three, dc in four and resin five. We can use a for loop when the number of Irasin is known beforehand. Next, we are going to see about boil loops. Wil. This is the syntax of u. Inside bracket, Tison must be specified here, go to execute and here, miss increment. I'm going to write a sample program by using overloop. Let's define a new variable by using lit keyword it count, equal to spi. Okay. Insect condition, count less than or equal to ten mains. Console dt lag. Then here you are going to increment value. What will be our output? It will be five, two, ten. We got output 5-10. We change the number to seven means, you'll get the output 7-10. Okay. We can use boil loop when the number of Ian is not known beforehand and depend on our condition, we can use foil loop. Next, we're going to see do Y. Et's see the syntax of Duvi. This is the condition of duvoi. When we use Dui means when you need to execute the loop body at least once regardless of the condition. So let me write a sample program for this. Let number equal to one inside D, we're going to plug our output using consoled at large Then here, we need to specify condition. Let say number less than or equal to four. The initial output is a number on, and by using the Vilo there are three times the output is printing. Let's say the number is five. What will be our output? C output will be the number one. Sorry, number five. C. First, this part of the code will execute and then this condition is file, so there is no more glue. Like this way, we can use for wine and do Oil in JavaScript. Next, we're going to see Break and continue statement in Javasc. Break statement, stop the loop of execution when the condition is met. Let me write a sample program by using break statement four let I equal to one, and I less than equal to five, I plus plus. Inside console dot lag. I reason I. This is the basic flow program, or will be our output. It will be output 1-5. Let's check first. See, we got output from I decent 12, I desenFive. Now, what I'm going to do is I'm going to check on condition I I equals equals three means. I'm going to say it as break. So now, guess what will be our output? Our output will be from one, two, three. Let's test it out. Okay. Sorry for that. Our output is one to two because our block of code is break from here itself. Here we have specify the console after the break segment. That's why we are getting one, two, two. Fine. Did it say four means or will be our output or output will be one, two, Okay. Fine. Next, we're going to see continue in JavaScript. Continue statement, skip the current son and move to the next set of co. Use the same program. Instead of four, instead of B I'm going to use. Hello, everyone. Welcome to this lecture. In this lecture, we will see about control flow in JavaScript. In general, what is control flow in programming language? The control flow determines the order in which statement are executed in a program. Control flow allows developers to write logic that can make decisions, repeat tasks and manage execution path efficiently. In JavaScript, there are three type of control flow statement is there. Let's see one by one. The first one is conditional statement, and the second one is loops the third one is continue and Break. Okay. Let's see about conditional statement. Conditional statement, it allows a program to make decision based on certain conditions. We can categorize conditional statement in JavaScript, now following ways. If statement If statement if statement and switch statement. Okay. Let me write a sample program for using If statement. Let's define a variable called age, let age equal to 18. Give. This is the syntax of statement. If inside bracket, we must specify the condition and inside clibrs the code will be executed. Okay, this is the syntax of. This is the syntax of if statement. Okay? So now in the condition, we are going to set if A is greater than R equal to 18 means, you're going to control to log the message like you are eligible to code. The statement, the block of code only will run if the condition is true. Save the file. Open your browser to see the output. I the console la, our output is you are eligible to vote, which means our condition is true. Then we change the age 15, Is the page, now, nothing will be found here because our condition is false. Now I'm going to write a program for IL statement. The syntax of IL is I inside bracket, we must specify the condition, and if the condition is true, this part of the code will execute, otherwise, this part of the code will execute. This is this index of I statement. They define a new variable called temperature equal to 25. If the temperature is greater than 30 means you're going to say at us. It is hot outside. Eels, you're going to say at us. The weather is pleasant. Save the file. What is our output? The weather is pleasant because our value of the temperature variable is 25. Our condition is false. That's why the il spot is working. Let's the value to 45 and let's see the output. And see, this is the output. It is too hot outside because this statement is true. That's why this part of the core is executed. Fine. Next, we are going to see about Elsf statement. This is the syntax of sf statement. Condition one here, condition. Two. Now I'm going to write a sample program for this. Let's define a variables equal to 90. Say 90. I marks greater than are equal to 90 means. We're going to say it as Grade A. I marks greater than or equal to AT means you're going to say us. Then it say grade B. Otherwise, it say grade C. First, the program said the first condition. If it is true, this part of the code will execute. And if the first condition is met false, the second condition will say, and if it is met true, then this part of the code will execute. Otherwise, this part of the code will execute. Let's see the output in our browser. Output as a grade A, B, our condition first condition is true. Let me change it as a d five. What will be our output? It will be grade B, C, or both as grade B. Let's change the mark to 60, which means this part of the code, both the condition will get failed. This part of the code will execute our output will be grade C. Fine. Next, we are going to see switch statement. Let's declare a variable called D. Let's say Monday. Switch. Here, you need to pass our value and inside switch is Monday. Console dot lag. Okay. Break. Next, we are going to check condition, other case. If the day is Friday means we are going to say it us. Okay. This is the syntax of switch statement inside bracket, we need to pass the value and here inside switch statement, we will check the case with a value like this, we can check many cases. If all the cases are fail by default, this part of the code will execute. Let's check our output and browser. This is start of the week. Now I'm going to change this value to Tuesday. What will be our output? You will get? It is a normal day. This is our output. Now I'm going to change it to the day to Friday means, what we will get weekend is going to start. Okay, we is going to start. In this video, you will learn about conditional statement in JavaScript. Next, you will see about loop statement in JavaScript. 13. Functions: Hello, everyone. Welcome to this lecture. In this lecture, you will see about functions in JavaScript. What is functions? Functions are reusable block of code that perform a specific task. They help make code modular maintainable and efficient. Let's see how to define function. In JavaScript, we can define functions in multiple ways, which is pungen declaration. Another method is fungonEpresson. And the third one is arrow function. Let's see how to define function declaration. It's start with function followed by the function name. Inside curly braces, P to execute. This is the syntax of funcion declaration. Now I'm going to create a new function. It's called GET function GET inside the function, I'm going to say it as console dot lag. Hello. Welcome to Java Script. Y. Okay. So let's see how to call this function. By simply specify the function N. Okay. Save this code and let's see the output in browser. Okay, here is our output. Hello, welcome to JavaScrub. Next, we are going to see function express. Et's create a new area. I This is car function Expressen. We can create a function and assign a tell you to variable. This is car function expresen. It will give you the same output. See? Here is our output. This is what I have given in a console um welcome. Okay. Let's see, arrow function. Tunsed grid equal to. This is the syntax of arrow function, bracket followed by arrow and curly braces. Inside curly braces, we need to add our code. It's the output? Hello. This is arrow function. Like these three method, we can declare a function in Java Scope. Okay. Next, we are going to see function parameters and arguments. What is parameters? Parameters are a placeholder defined in the function declaration. It act as a variable that receives values when function is called. What is arguments, the actual values pass to your function when calling. Let me write a sample program for this by using arguments and parameters. FunsonGret and inside a bracket, I mentioned name. This is called parameter. Here, name is parameter. Jet colli braces. I'm going to create console la say hello. My name is, and here we are going to print the parameter value. Now I'm going to call this function with argument here SA is the argument. Two. But what will be our output? Hello. My name is Sa. This will be our output. Let's see. Hello, my name is Sab This is the way we can use arguments and parameters in Javasb In Javas web, there are single parameter function and multiple parameter function. This is the sample of single parameter function. Let me create another program for multiple parameter function. Function. I created a new function car ad, and here I am passing two arguments AB. I'm calling the function with two arguments value. Pi, p. So what will the output or output will be 15. Here, I'm passing two arguments, and in the function, I'm getting two parameter values. Here is our output as 15. Like this method, we can use parameter, single parameter function, and multiple parameter function in JavaScript. Next, we are going to see default parameters. What is default parameter? Default parameter allows function to have preset values if no arguments are provided. For example, I'm creating a function function grit, here the parameter, I have preassigned a value for the name as guest. Here I'm calling function with name. What will be our output? The expected output will be, my name is Ja Because I am passed argument value. In a function, we have specified the parameter value name. If there is no name passed, guest will be printed in the name. Here we are passing Jan as argument, so our expected output is my name is Jah. My name is John is our output. Now I'm going to remove this argument value. Let's shake the output. Now our output will be my name is guest. This is car default parameters in JavaScript. Okay, fine. Next, we will see how to return value from a function. In function, we can return values using written statement. Let me create a new function called functon multiply here we are passing two parameters, this A and B. Here we are going to return A and B, A multiply B. Is a written value. Let me create a new variable by using EP here I'm calling the function just multiply. Here, we need to pass two arguments, I'm going to pass it a two Pam pi. Let's print this result. So what is the expected output? Our output will be two into five, which is ten. Okay, fine. So what will happen if we didn't pass argument to the function? I returns null value. Okay. Fine. Next, we are going to see function scope. In Java script variables have different scopes, which one is global scope, and the other is local scope. And Let global variable equal to I am global. The global various are declared outside the function. If we create a new function called test score? Inside a function, I am going to create a variable called local are. The variable which is declared inside the function is called local variable. We can access the local variable inside the function only. Did it say I am local. Now, what I'm going to do is I'm going to print these two values by using Control dt Console dutlog We can access global variable throughout our program. Whether we can use outside of the function and also inside function blog. So what expected output or expected output will be both the values. I am global and I am local. See? This is our output. I am local and I am global. Now I'm going to try rint the local variable outside of the function. Now we will get error like local were undefined. Here gut reference local are is not defined. Like I said, we can access the local variable only inside the function blop. Okay, here. All right. Next, we are going to see about anonymous functions. Okay, what is anonymous functions? A functions without a name or call anonymous functions and are often used in callbacks. Then we create a new function, sit, time out. There after 5 seconds. This message appears after 5 seconds. We taste it out, put your browser. One, two, three, four, and five. See? This is our output, which we'll get after 5 seconds. Right? Here, we didn't mention the function name. This is called anonymous functions. Next, we are going to see about if V which is immediately invoked function expresssHi. It runs as soon as it is defined. Let's see the example for this function. Answer at love. I am i p. Here we have created function. We didn't call it. So let's see the output. Imani P. In this way, we can create IFP, immediately invoked function person. Next, we are going to see about callback functions in JavaScript. A function passed as an argument to another function. This is called callback function. D create a new function as theta. Here, All back as argument. I consider Fix it. Let's check our output in our browser. See, fetching data, fetch data completed. Here, we are passing function as a callback. This is the way we can create use callback function in JavaScrb. Next, we are going to see recresson in JavaScript. What is a regression? A regression that calls itself to solve a problem. Let me write a factorial program for N numbers. Give N equal equal to zero, returns one. Written, N into factorial, of N minus one. Now I'm going to call this function factorial of pi. Let's print this value by using console A. Sorry, the type of error, factorial is not defined. Again, the same problem, factorial is not defined. Sorry, here is a typo. The factorial of Y will be 120. Which is fine. All right. In this lecture, we have learned about functions and you have learned about how to define function. What are the different ways of defining function, which is function declaration, function exopason RO function. And we have learned about what is parameters and arguments. What is default parameters and single parameter functions, multi parameter functions, returning value from a function, function scope, what is global variable and what is local variable. Also we have learned about anonymous functions, immediately invoked function expressens, callback functions, and recurring functions. Function is a core concept in Javascript. It helps in structuring code efficiently. Understanding different types of functions, parameters, scope, and concepts like carbs will enhance your ability to write efficient Javascript Duba. Thank you. See your next lecture. 14. Objects in JavaScript: Hello, everyone. Welcome to this lecture. In this lecture, we are going to see about JavaScript objects. Objects in JavaScript are a fundamental data structure allows storing and managing data in key value pairs. Objects help in organizing code efficiently and enable better data monopolism. Let's create a new object. We can create object in two ways in JavaScript, which is object literal. Another way is using new object, syntax. Now I'm going to create a object by using literals. Let person equal to inside curly braces, name ads and age 30 and City New York. This is one object person is the object name, and this is the values for the object. This is, this is value. Name is a key, H is a key, ity is a key, and these are value to the key values. Let's const this saved or file. And here is our output. The output is object, and here a city name. Okay. Let's see how to create a object by using object method. I'm going to command this out here, I'm going to create a new variable person, and I'm going to create a new object by using object method by calling object. Here I'm going to assign values person name as John age 25. Let's print this value. Which will give you the same output. Object is not defined. Here, the object O must be in uppercase. New object. Here we are assigned a value. Name is a key, John is a value, and a 25 is a value. City is a key, and Los Angeles a value, and our output will be. As you see, this is our output. Like this way, we can create object in both ways. The first one is object literal and by using the second method is new object method, syntax. Next, we are going to see how to access object parameters. We can access object parameters in two ways, which is dart notation and another is bracket notation. Access object parameters. In two ways, one is dot notation. And the second one is Bracket notation. Okay. Let's see what is dot notation. And here we have created a object called person. Now I want to access the person cage. So by using dot notation, person, age, and we co this out this control. Okay. So expected output. I want to know the age of the person. For that, I'm using dart notation here. So expected output is pi five. Let's see. Unexpected bracket. Sorry, I forget to command this out. Okay, fine. So here is our output. The age of the person is 25. Like this way, we can access the city value and also the name value. Now, our expected output is last anus, right? Okay. How to access the Object parameter by using bracket notation. Person, square bracket inside square bracket, we need to specify the parameter, object key value. Now I'm going to want to know the name of the person. So we'll give you JSA output. See? Both ways, we can access them. Object parameters in JavaScript, which is notation and dart notation and bracket notation. Next, we are going to see how to add and modify object properties. Okay. Here we have created a new object, which is person, and here we have name, age and city. Now I'm going to add country for this person object. We can add Object property by using person dot country, which is us USA. Console.law. Let's print the person value. Additionally, we have country value in the object. Now I want to change the age of the person. How we can do that. We can do by using person as. Let's change it to 30. Now our expected output g will be changed to that. Let's see. C, you got the output as H 30. Like this way, we can add and modify object properties in Java Screen. And now let's see how to delete object property. Now, I want to delete the city property from the person. So for that, we need to use delete. Person the city. Now in the person value. Let's see here from our output, the city will be removed. See, our city is gone. No output. Like this way, we can delete object properties in Java school. Next, we are going to see about object methods. Java objects can also have functions as properties. Let me create a new object. That person name as a jump, age as 25, and I'm going to create D as GET. Dan is a function. And here, I'm going to print this name, how to access the name. You can access the name by using this property. This do name. Okay. Now I'm going to call this person do Gret. Output our expected output will be. Hello, my name is Ja. This is our output. Hello, my name is a. In previous, we have seen how to assign property values. And in this, now we can I mean, we have seen about key values. It can be Kang. Next, we are going to see heading over object properties. We can look through an object properties using far in Let me create a new object called person name, age 30. City Okay. So now, what I'm going to do is far let P person. And here we're going to print consoled atlas and persono Okay, here is our output name John H 30 city, New York. Okay, fine. Next, we're going to see Object methods. There are three methods in object, which is object dot keys, object, values, and object entries. Let's see one by one. Here is the person object. Now I'm going to print this. Objects person, which will return all the key values in the object. The expected output will be name, A, and city. Here's our output. The key value of the object is printed here in H city. Let's change these two values, which will return only the values of the E object. As you see, only the value is printed, John 30. Let's see what will be the output by using entry's method. As you will return key and value separately as a correct. Okay, Gi. Okay, fine. Next, you are going to see object constructor. Constructor allows creating multiple instances upon same object. Okay, here. Let's say person is a object. Em pry new function, function person name Kama This name equal to name, and this H Squal to g, and this grid equal to object function, console dot log. Hello, my name is this dot name. Here I have created function with the two parameters name and H. I assigned the values. This is the name equal to name, this that g equal to g, and this is that QuloKalbaFuncton, Console dot L. Hello, my name is the dynamic name value. Now I'm going to create a new variable called person one. The calling Mu person off here, we need to pass to argument, which one is name and the age of the person. What will be our expected output or expected output will be? My name is Jah. Sorry, I forget to call this person. Person WondaG which will return the Out. Hello. My name is Jam. Now I'm going to create another variable card person two I'm going to create a new instance, another instance by using person, and this time, the name will be Sha and age 30. Now I'm going to run this, call this person to dot Grit. Great. Okay. So as you see, hello my name is a Hello, my name is Shah. Like this way, we can create multiple instances same object. Okay? Fine. Next, we are going to see classes. The classes provide a cleaner way to define object looprans. Let's create a new class. The syntax of the class is class keyword and followed by a class name. The inside the class, there will be a constructor name, g like before, you're going to assign this name equal to name and this that g equal to H. Outside of the constructor, I'm going to create a new method, grid glt. Here, I'm going to run this. My name is this dark name. So outside of the class, I'm going to call this class. Let person one equal to going to create a new instance, new person of myth and the age of this spot. Now I'm going to call this person one dt cred. My name is Smith. Instead of name, I'm going to print name age of the Smith, my age is written. My name is my age is Pat. All right. Like this way, we can create and use classes in JavaScript. Next, we are going to see prototypes in JavaScript. JavaScript uses prototype for inheritance. To times. Can we create a sample problem for this function person? Name, am H L previous, this name equal to name and this dth equal to H outside of the function, person, dark, proto, Thi greet, equal to function. La. My name is this name. By using prototype, you can access the property value outside of the function. Let son one equal to u name and H person that grade, which will give you the same output. My name is Sha. This is how we can use prototype in Java School. Next, we are going to see object destructure. Extracting object properties into variable called object destructuring. That person equal to name and age is 30. Let name come, age equal to person. Now, I'm going to bring the two values console log, name, and so log age previously, how we can access the value of the key value object by using person name, one is dart notation and another one is bracket notation. In object destructuring, we can directly extracting the object properties into variable. Now the expected output will be Jum and 30. Let's see. Okay. Here is our output as John and age is 30. Okay? All right. In this lecture, I hope we have learned about what is Java's pot object and how we can create object. We can create object in both ways, object literal and by using new object syntax, and how we can access object parameters and how can we add and modify object properties and how we can delete object properties. And what is object method? And also we have learned about rating over object properties, object methods. We have seen object dot keys, object dot values, object dot Nr, and also we have learned about object constructors and classes in Javascrib prototypes, and also we have an object destructuring. And Javascript objects are essential for structuring and manipulating data. Understanding object creations, methods, constrictors, classes and prototypes helps in writing efficient and maintainable code. Thank you. See you next lecture. 15. Cookies in JavaScript: Hello, everyone. Welcome to this lecture. In this lecture, you will see about cookies in JavaScript. Before that, what is cookies? Cookies are a key value path stored in the browser and it will help maintain user sessen and performance across the web. Cookies are a small text file stored in the user browser. Remember information such as login sessens references and tracking data. In Javascript, we can create and read and delete cookies. Let me show you how we can create cookies in JavaScript. We can create a cookie by using document dot cookie here equals inside the double codes, you need to assign values. Now I'm going to create a new T user name equals to jab semicolon here next, we must specify the expiration date. Okay. Here's the explon did for this value and next to specify them path. Now I'm going to edit uses dot H, this pile. Like this way, we can set the cookies in JavaScript. Next, I will show you how to read cookie in JavaScript. We can read cookies by simply using document dookie. Let's print this value. Okay. Save the point. And in her browser tab, risk control F 12 for the inspect element and here is the storage tab. Under the storage tab, click on Cookies, select the file. As you can see, here is the value. User name Jang and it will expires on Friday 20, February 2025. Like this way, we can read Cookie in JavaScript. Next, I'll show you how to modify Cookie in JavaScript. We can modify cookie by using document cookie. Now here, we need to set different value for the key value. Now I'm going to set use the name SA and it will expire on Saturday, first, March 2025. Then the time 11:59 P.M. The same fine. Okay. Say the file. Now let's print this value. Let's trafas the page and go to cookies and see the username is changed to SA and the expiration date set us subdi first March 2025. Okay. So now you know how to create cookie and how to read cookie and also how to modify cookie. And now I will show you how to delete cookie in Javas. Two. To delete a Goki you need to set the expiration date as a past date. Document GkiequalsU a name equals MD and expires use the name as Sha let's set expiration date. Like Thursday 838 P 2025, and the time as GMT. Semicolon and path the same path tookes dot HD Save the file. Let's go to your browser and test it out. Here, the previous cookie value has gone right. Like this way, we can delete cookies in JavaScript. All right. You know how to create cookie, how to modify cookie, how to read cookie, and also you learn about how to delete cookie in JavaScript. 16. Cookie Functions: Hello, everyone. Welcome to this lecture. In this lecture, we are going to see how to handle cookies by using JavaScript function. In previous lecture, you have learned about how to set cookie by using dkmondt Cookie. Also we are modified the cookie value and also we have learned about how to delete cookie by setting the expelled date as a past date value. In this lecture, you will learn about how to set cookie value by using JavaScript function. Assume we are going to set bookie key value as a phone and value to the phone number as this one, and we're going to set expiry date after five days from the current date, okay? You're going to ala function by using Set Cookie, and key value as form, and value to the cookie is this expiry date five days from the current date. So for that, I'm going to create a new function in the name of Set Cookie. And here we have passed three arguments, so we need to get parameter values. Let's say it has name value a days, okay? Here I have created a new value called expiry date value. Initially, I have assigned null value. Here I'm checking one condition if expiry date value passed, which means here, there is no null value means. I create a new variable called date. Here, I'm getting the current date by using new date method. And here, I'm going to set value data set tap. Here I'm getting the current time value of the current date. Current time plus number of days. Here we are going to convert the days into milliseconds, 24 hours into 60 minutes into 60 seconds into thousand per millisecond. Here, I'm assigning value to the expired value. Semicolon expires equals plus date value. Here I'm converting date value to the UTC string. Okay. And here we are going to set cookie value by using dcman dot Cookie, which is name after cookie. This value we're getting from the parameter name plus say double codes equals, here we need to assign a value to the key, which is values this one. It's Idit value. Plus inside codes, semicolon, and PAT, which is current file. Cookies, punks dot H TMU. Okay? All right. Save this code. Okay. Open Browser and go to storage and another cookies. This is our file name, right? Cookies, das funks and dot EML, and here is our cookie value. Phone and value of the phone is 987-65-4321, and it is going to expire on 20th, February 2025. And this is the current date, 15th, February 2025. All right, we have successfully set cookie value by using JavaScript function. Next, we are going to see how to get a value from cookie. Right now, we have cookie. This is our cookie key value ripe phone, and here we have a value. So in this program, we are going to get this value of this cookie. Let me command this out. I'm going to I want to get this value of four. So for that, I'm going to create a new function, gate cookie. Here I'm getting the parameter value. Here I have created a new variable called cookies, which is cookies. Cookie value, d dot cookie, and here I am splitting this cookie value by semicolon. It will return RA value. To read RA value, I use Pardo, let I equal to zero insulation, and I less than cookies length. A length. And increment I sps to single value equals cookies of I. Again, I'm splitting this value by equals. Here I'm checking on condition. If cookie of zero is equals to our parameter value means you're going to return value of, we will return EMT value. Save the file and go to Browser we print this value by using console dot lag? Save the file. See, here is our output. The cookie value of key value phone is this one. All right. But this way, we can get a value from Cooking. Next, we're going to see how to delete cookie value by using Javascript fonts. Delete Cookie by functions. But I'm going to create a new function, name it as delete, cookie, and here getting a parameter value. Calling function, delete Cookie, are going to delete form number, okay? Usually what we do to set delete a cookie, we simply set expire dates pass date, this is what I'm going to do. Document dot Cookie equals name equals T and expires as past value. Friday, 40th, F 20, 25, 000 GMT, and path equals to current file name bookies functions dot t. Save the file. Go to storage. D. Cookies, these are plena. You see, no data present for selected host. Our cookie data has been deleted successfully. All right. In this lecture, you have learned about how to handle cookie value by using JavaScript. You learned about how to set a cookie by using JavaScript functions and how to get a value from Cookie by using JavaScript function and you have learned about how to delete cookie using JavaScript function. Thank you. See you next lich. 17. Async JavaScript: Hello, everyone. Welcome to this lecture. In this lecture, we are going to see about asynchronous JavaScript. Before that, what is synchronous? Synchronous execute a code line by line, asynchronous means it will perform a hatinoperation. Do not block the execution of the remaining code. For example, consider this sat la. First. Second. And give the file. And here you see this is synchronous, which means it will run each core line by line. Okay? So let's see what asynchronous means. Console a club first and sit, time out. O. I want to execute this line of code after 5 seconds. Okay. Save the file. Go to browser and reference, and here you see first line and third line, and the second line will execute after the 5 seconds. This is called asynchronous, which means it executes the core. It performs et in do not block the execution of the remaining core. Okay? You got it? Okay. Now you know what is synchronous and what is asynchronous. Asynchronous allows task to run in the background without blocking the execution of the other cove. It is very, very essential for handling operations like fetching data and file reading and user interactions. Next, you are going to see premises in Javasc. Okay, what is premises? A premises represents a value that may be available now in the future or never. Let's create a new premise. Is equal to nums and inside parameter. There will be a two parameter resolve and reject and inside the arrow funtonRlt success equals troop set time out. The time would copter 5 seconds. And if success dot resolve data received. Yes. Get message, say like here fetching date. Okay. This is a way to create a premise in JavaScript. Next, we'll see about how to handle remise in JavaScript. To handle a premise,mis do miss dot then Data console dot log. Data. If there is El, catch, error. Console dot g here. This is a way we can handle Rems in JavaScript. Okay. Next, we are going to see async Avite. You are going to see async Avit. What is Async? ASN is a keyword, makes a function return promise. Ait passes execution until the promise resolves. Me syntax of async Avite Async function pig data. Data received. This is a function. It's data. Save the function, save the file. Here is the ho. Okay, this is the syntax of async at. Next, I will demonstrate how to pitch data by using APC pitch APR. Which means handling HTTP records. The wich APA in JavaScript allow us to making a network breakfast. Let me write a sample program for this async function, use. Before that, I will show you this is the website, JSNplaceholder tipico.com. They are providing free sample data to test API. Now we are going to create a new program. Now we are going to get a user data from the external website. Here I create a new variable called rest pwns Avit Punk page KPI, and here we need to mention the URL which is copy from here. I change the function name to get task. It data equals at aspanst JSA. Here you are going to print this value. It will returns pans in JSON form. Okay, here we need to call this function, right? We get ask. Save the file, go to Bowser. And here, you see, this is our data from external website. We're getting this data by using H API in JavaScript. Okay. Next, I will show you how to handle error in H API using as at, and you can handle error by using R catch method. If sometimes the external website may be down. At the time, how we can handle here. I will show you. This is our function. Here I'm going to create dry catch block. This is the syntax of tri cache and inside try move or block of code. Try executes the logic and written our data. If there is RL means this part of the code will execute and here we are going to conso dot log. Let's say as error switching data and plus I'm going to display the actual error. Here, purposefully, I will make the mistake in the URL of the external site, and here we see we got reference error. Okay. What will happen if we come on of this program? The second line is gone right. So this way, by using Tri catch, we can handle the here. Okay. All right. In this lecture, you learn about what is asynchronous and what is premises and how to create a premise and how to handle premise in Javasp you learned about Async and At also you have learned about how to fix data from external website by using pitch API. As you have learned about how to handle error by using drcAXblg. See your next lecture. Two. 18. WEB APIs JavaScript: Hello, everyone. Welcome to this lecture. In this lecture, we are going to see JavaScript web APIs. And what are web APIs? You will see about common Java web APIs and also how to pitch data from API. What is local storage and Session Storage API. Also we are going to write a sample program to get data from web API using Async AI. I will teach you one by one first, JavaScript web APIs, application programming interface, which is called API Ride. JavaScript web APIs allow interact with the browser and external resources. It provides functalty like DAM manipulation, network request, storage, handling, and multimedia control. Let's see what are web APIs. These built in browser interfaces that enables developer to perform various tasks such as modifying the document object model dom, handing user interactions, and fetching data from servers. So let's see common web APIs. First one is down API document object model API. It allows Javascook to interact with modify Hat CML and CSS. Example, assume there is DV ID called my element. Okay. The text says hello. Initially, our text says hello. Now, I want to change this text dynamically by using Dom API. So what I'm going to do is I'm going to use document get element by ID, and inside Dougle codes, our ID name, which is my element. And by using inarth text, we can assign value, then say hello world. To the file. So here we must place this JavaScript code after the due copy this and paste it over here. See the text has changed to hello valve. This is called Dom API and other dom APs are domen dot Quri selector, document dot create element, document pensLE. These are called Dom APIs in JavaScript. Next, we are going to see ph API used to make HCDPE requests to retrieve or send data. It supports both post and gate method. For example, this one, that's DPS colon colon. These placeholder.typicd.com slash todos slash one. This is the external website. They provide sample JSN data for testing purpose, then you're calling the external website. Then response response dot GSM. Then If there is a data, then we'll print the data by using psole dot log. And if there is an error, dot catch error Psog error. Here we print the error data here pitching data plus we'll show the actual error Okay. So by calling pH method, this is called H API pig and here we are calling the external website. And then if there is a response from the API, we are converting the response to the JSON format and then we'll display the data by using console dot log. And if there is an error, we are case the error and print the error by using console error method. And this is called H API. It works with premises and using AI also. Next, we are going to see local storage. And Sasan storage. Before that, let's see the output browser. And here, you see, this is the data from the external APA. And let's change the URL purposefully here I am mentioning the wrong URL. Let's see what the output we will get. And here we get reference error. Error is not defined sorry. This is not actual error, and here there is some typote. So here I need to mention the correct error. Okay. This is our actual RL fetching data type erlFail to fetch. Like this way, we can fetch the data and handle the L using pechPI. Next, I'll show you what is local storage? It stores the data in the browser. The syntax local storage dot set IAM. And key name, user name and value for the key. Say the file. Let's come on this out. Go to the browser and Under the application under local storage, here is our value. Like this way, we can sit local storage. And it stores the data permanently until we delete them. Let's see, SSN storage. It stores the data for the SSNs only. We can store the SSN data by calling ssn storage dot set item. The arc. Save and go to Browser. The the page here C, this is our SSN data. In this lecture, land about JavaScript PBIs, what are web APIs? What are the common JavaScript APIs which is Dom API, phase API, how to set local storage and SSN storage hope you get useful information and see you next lecture. Thank you. 19. Events in JavaScript: Hello, everyone. Welcome to this lecture. In this lecture, we will see about events in JavaScript. What is events? Events when user accents on a web page is called event. We can categorize events into different ways, which is mouse event, keyword event, form event, and Window event. Mouse event. What is mouse event? For example, this is one page, and let's assume here there is an on button. Okay, let's assume there is an button. If you click on the button, this also an event. And when you mouse over the button, this is also called on event, and when you mouse out, this is also called on event. Mouse event, we can classify into click mouse over and mouse out. This is called mouse event and Eb Event. Which is E down. When you press the key on the keyboard, this is also one event E down and A. These two are called keyboard event and next one is form events, which is we are submitting the form. There is one event. If there is value change in the form, there is also event and focus is another event and Blab these fours are called form events. The next window events. Window load, resize and scroll. These three are called Window events. Okay? Now, all you know, what is events and what are the different types of events in Javascript. Next, you learn about event listeners. We can listen event by using add event listener. Okay? So this is a button. If someone click the button, how we can detect if someone clicked under button. I'll show you. Let set ID attribute for the button as BTN. Document, dot, get element by ID, and our ID name BTN, event listeners. Click. If someone click We're going to button, click. Save the file. If you click on the button, you see button clicked. Like this way, we can detect the button click event in JavaScript. Next, you're going to see about event handling methods. We can handle in Javascript in three ways, which is HTML, event attribute. The second one is JavaScript event property. And the third one is Add even listen. By using these three methods, we can handle events in JavaScript. What is talevent attribute? This is a button, right? In the button itself, button click, you're going to Salt clicked. Okay. Go to Browser. You click on this, the prompt box is clicked. This is called TML even attribute. We can write a JavaScript code, even listener inside the ASTML tag itself. Next, we'll see a JavaScript even property. Let BTN equals document get element by ID. Inside double codes, our button ID name, which is BTN, BtntlC equals consen At Alt button. Clicked. Sorry, here, button on click. Save the file. Here you can see. This also gives the same button click. The third one is add even desire, which we have already seen on the previous example. Like these three ways, we can handle events in JavaScript. Thank you. You are excellent. 20. Keywords in JavaScript: Hello, everyone. Welcome to this lecture. In this lecture, you will see about keywords in JavaScript. Before that, what is keyword? Keywords are reserved words that have a special meaning and functionalities. We can use keywords to define variables, functions, and loops, condition, and more. You must understand the NCL keyword to write if is in JavaScript code. There are different types of keywords available in JavaScript. This variable declaration keyword and punks and keywords and control flow keywords. And object oriented keywords. And excepts and handling queue. Okay. So variable declaration keywords. They are we lit and const. These are the keywords used to declare a variable in JavaScript. And let's see what are the keywords for functions, which is function and written. These two keywords are called function keywords. Let's see control flow keywords if switch, and parlo y doy. These are the keywords called control flow keywords. And let's see what are the keywords. It's called object oriented keywords, which is class extends. These three keywords called object oriented keywords and try catch finally through. These four keywords called exception an keywords used to retrieve the R of message data. Thank you. See you next lecture. 21. Error Handling in JavaScript: Hello, everyone. Welcome to this lecture. In this lecture, you will see about error handling in JavaScript. To ensure smooth execution of publication, debuking is very, very important. Let's see type of errors. Syntax error reference error type error, and range error. Let's see what is syntax error. For example, consider this. The syntax of the console lave is this, right? Okay, if I'm missing the bracken means. What we will get? Let's take the output and here see, we got syntax error. There is bracket missing after argument list. This type of error is called syntax error, and next we'll see reference error. For example, I'm trying to print the value of X, and here we didn't define the variable X. What will happen? We got a reference error. X is not defined. Like this type of error is called reference error. Next, we will see about what is type error means. Let's assume Y equals ten, and now I'm going to try to convert this number to uppercase. I'm trying to this number into string by using two upper case. Is two upper gas will convert the lower gase letter to uppercase. So here I am trying to convert the number to uppercase. Let's the output, and here type error. We got type error. Y uppercase is not a function. Okay? This type of error is called type errors. Let's see what is range error? Let array photo array, and there I give negative value to the array. And here Pigon ungut array error, invalid arraynth. Array nth must be starting room 02 positive numbers only. Let's change to positive fi and now the R message will go. Fine. These are the types of error sn Jasp Syntax error, reference error, type error, and arrange error. And in Jase we can handle here by using R catch block. This is the syndex of Tri catch block, and you already know in our previous lesser right. Okay, we can handle error using Tricatchblock also, and finally block. Final black index is the same as tricatchblock, and additionally to that, After cats Pine and here we can print the statement like executon is completed. This is the syntax of pine and also we can handle the RL by using through I'll write a sample program for this. Punks in sick age. Age less than 18 means some custom error using error method. Then it say you must at least 18. Okay? If the condition is failed, let's say Aces grant. Okay, let's say, what is the output? Got err, you must at least 18, right? Let's change the age to 25 means or error mass will bom. Okay. This is through custom. And how to debug error in JavaScript. We can debug error by using console dot error. This is an Rl. What is the difference between console dot log and console dot? Console dot log will print the statement and console dot l will give you the error message. Also, we can debug error using debugger statement. X equals ten Debuker and unsold dotlog X. Say the file. See. This will pass the state execution of the program, you click this, and we'll continue the program. We got output as ten. Okay. All right. In this lecture, we learned about error handling in JavaScript, what are the types of errors in JavaScript syntax error, reference error, type error, and range error, and how to handle the error in JavaScript, like Trctchblock and tryCatch finally, and also you learned about how to throw custom errors and how to debug error in Javascript by using console error and also using debugger statement. Thank you. See you next lecture. 22. Class Project : To Do List Demo: Hello, everyone, and welcome to this lecture. You have learned about Java basics, and now this time to apply our JavaScript skills to the real world project. In this section, we will implement beautiful Interactive to do list. And this is a demo, and here we have textbox and Aardsk button. And you click on the art desk button, and it will ask you to enter the Task. You will implement validation Park and whenever you are the task, it will display right below the input box. Like you can add multiple tasks and once the task is finished, we can delete it or we can mark it as finished like this. So by using local storage, you are going to implement this functionality. In upcoming lectures, I will show you how to achieve this result. Thank you. 23. Class Project : Add To Do List: Hello, everyone. Welcome to this lecture. In this lecture, we will implement to do list by using JavaScript. Okay. So here, we have HTML file and CSS file for styling, and we have script dot JS file. In index HTML file, I have linked the Style C file and also linked the Script Dot JS file. I have attached HTML and CSS file in the resource section. You can download and use it. Okay. This is our UI for how to do list where we have input box, and here we have our task button, and right below the input box, we are listed task. Okay. Now we are going to implement all this dynamically. Okay. Let's get started. And here we have input box and here is the task button, and here is the tasks are listed. So in the script JS, I'm going to create a re variable to select the elements. So first element is text input. Equals, you're going to select the element by using dark Mando get element by ID. The ID of the input field is task input. Next one, our Task button. Equals document dot get element by ID. Up with the ID over here and paste it over again. Next variable will be our task list. Equals document get element by ID. And ID of the UL, which is task list. Okay. Now, whenever user click on the art task button, we need to capture the input value first. AR task button, dot, add event listener. The event is click event. Now I'm going to call the new function, which is R task. Here I'm going to create a new function art task. Inside the function, I create a new variable to capture the input value. Names, task, text equals text input value. Okay. Let's control this value. Say the file. Go to Browser. A we can task, and here is our task value. What happens without entering task value? Empty value is printed here, but we need to validate. We need to inform the user to alert like, please enter your task. So for that, here I'm going to check one condition. SkxtTkxt equals equals empty means. Use alert box to display data. Please enter task and return the function. Okay, save the file, good browser and click on Aart task without entering value. Here is the message says, please enter task. Okay? Or vals is working fine. Here is our task value. Now, we need to display the entered task right. So Bather, I'm going to create a new constant value. I'm going to create a new object. The name it as task. And in the object, there are three values, which one is ID and task and completed. Whether the tasks are completed or not, Okay. So ID. Is it current Datta. Okay. The task is a task text value, the input value, and by default, the status of the completed is set first false. Okay. So pin the task value first. Save the file, go to Browser Enter task and click on North Task button, and here is our object ID as a current date and time, and here is our task value and status of the task is dis false, computed as false. Okay. Next, I'm going to another function to add the task or list. Add task to list, and here I passing our object value as a argument, okay? Come on this up. Here I'm going to create a new function, which is R task tool list here getting parameter value that names task data. Inside the function, create a new variable called consti document ate element. Rate element. It will create a new I to our dom. Next, I'm going to set attribute value for this LI by using set attribute method and attribute name as a data ID and value which is task data dot ID. Fine. Next, I'm going to create a new constant, which is text span. Again, we're going to create a new span by using document dot create element. This time instead of LI, mention it as span. Next, span, text span, we need to assign the value for the span, text span, dot, text content, which is equal to our task data dot task. This is our user input value. Again, next, we need to create a delete button. For that, create a new constant value, name it does delete button. Document that create element, time button. Next, delete button, dot text content equals static value, which is delete. Now we need to bind this value to the LI first. For that, dot open child Next to span. Next, you need to upen the delete button value. Delete button. Okay. Now we need to upen this LI to our UL value. Our select the task list is task list. Copy this. I'm over here. Task list dot up and child. Okay. Save the file. Photo browser. I'm giving a task value as task three, click on task. All right, our task three has been added to the list. Okay. Now we are going to remove the static value. Go to your index SGML five and remove this static value. Save the five, go to Browser, click on task without entering any task, which will written RF, please enter task or well destined some fine. MR task one. Task two. As you see, after entering the task, still the value of the input remains the same. We need to clear this value. So for that, go to Script JS file and inside the art task function. After calling the hard task to list, you're going to set task text value as null. Save the file. Task one. Still it is working, let me check. Okay. Here we are mentioning a Can value, so we can change this value. Instead of giving that task text, we can set value to this one. Task input dot value, which is equal to t value, okay? Ask on click. As you see, our input value a clear deride. Okay, fine. Like this, we can have many tasks as possible. Okay, we have successfully created our add task function. Now, whenever I'm rephrasing the page, our added task has been removed from web page. So we need to remain our task here, right. So for that, we need to use local storage. I will show you on the next lecture. Thank you. 24. Class Project : To Do Local Storage: Hello, everyone. Welcome to this lecture. In this lecture, we are going to save our task value to the local storage. But then after calling this function, I'm going to call new function, save task to local storage. Again, here I am passing our task object as a argument. Now we need to create this function. Function. Save task to local storage. Getting our parameter value. It task. Here I'm creating new variable called tasks. Is MTR. Okay. Task dot push our task value. We're getting this value from our parameter. Next, we are going to set the local storage value by calling local storage dot set item method and devalue as tasks and value Json string five. Tasks. Okay. It will store the task to the local storage. Go to a browser. Put obligation, local storage. Here, there is no value. Now I'm going to add Task one, like task. Here you can see, there is a new key as tasks and here is our value. Okay. Test to click Attask again, instead of adding value to the task, it has replaced the value to the existing task. We need to crack this so far there. And here, getting value from local storage. If there is value to the task variable like JSNPars local storage dot Gate item, we can get value from the storage by using local storage dot G item, our key value, which is tasks. If there is no value, we can set it as TRA. Fine. Say the file. Task three, click task. As you see, there is a new task added to the existing tasks. Enter another one. I just working fine. We have successfully added our task to the local storage. Next, we are going to list the tasks from the local storage whenever the page loads. So. Next lecture. Thank you. 25. Class Project : Load To Do List: Welcome to this lecture. In this lecture, we will implement the functionality. Whenever the page loads, you will getting the value from the local storage, and we are going to list it there. So for that, go to script dots. Starting of the file. Load task from local storage when page loads. Okay? For that, I'm going to first document dot at even sense. Down, content loaded, which means the content of the timal page is fully loaded. We are going to call new method, load tasks. Now we need to create a new function, load task, go to end of the five. Fungon load tasks. And here, let tasks equal to local storage get item, per key value, Task. This is JSN value. We need to pass this value. So Json parse local storage that get item of As There is no data, you'll rem TRA. Okay, fine. Now it will give us an RA value, so task that for each. And as an argument, we are going to call our add Task two list function, this method. Add task list. Okay, save the file. Go Browser. As you see, there are three data from our local storage, and there has been successfully listed here. A new task here and click an R task. Okay, we have successfully select the value from the local storage and listed it over here. Okay. Next, you are going to implement the delete functionality, which I will show you on next lecture. Thank you. 26. Class Project : Delete To Do List: Hello, everyone. Welcome to this lecture. In this lecture, we are going to implement our delete functionality effort to do list. Whenever you use click on the delete button, it should remove from the list. Let's get started. And the script dot js after this line, Delete button. Delete button, ard Event listener or even click, which means we will call back to another function called delete task. Here, we need to pass our task ID as a parameter, which is task data ID. Now we need to create a new function to delete data from all list. Function, delete task. Here I'm getting the parameter values task ID. It our task, get our task value from local storage by using Local storage. Get item, and our key value tasks which will return JSN value. So we're going to parse this value by using JSNPse there is no data, SS MDR. Task equal to task that filter. And here task ID, not equal equal to parameter value task ID. So it will filter the task value, which is not our parameter value. I will return all the value other than our task ID value. Again, we're going to set the task to the local storage by using local storage db set item and our key value as tasks this string file. And here, cast this value. Okay, save the file, go to Browser. Okay. Here is our task you write, I'm going to is the delete of the task three, or that task has been removed from here. And again, the second one is removed and the first one. Okay? It is removed from local storage, but this element is there in our web page. We need to remove that too. Okay? For that. After setting the local storage, and we create a new consvarable task element equals dark Man dart Puri selecta. Data ID equals Dalv or task ID. And again, task list D remove child. This task. Save the file. Add new task. Okay. So when you inspect this element here inside the LI, we are passing ID as a data ID, right? So by using this ID, we are going to remove this element from our web web page. That's why here we are using amount Cory selector, data ID as a parameter value. Select we will select the element and remove from the task list, click on the delete button, it should remove from our task list. There is an error. Kory selector failed to execute Kory selector and document. Let me check. Okay. And here, the double quotes are missing. Here the file. And Task one Task two, and click on the Task two. It has been removed from our mode to do right. Okay. You have successfully implemented our delete functionality. And the next lecture, we will implement how to market us or tasks completed. Okay? See you next lecture. 27. Class Project : To Do Status Complete: One. Welcome to this lecture. In previous lecture, we have implemented our delete functionality, and in this lecture, we will implement how to market us our task is completed. Okay. Let's get started. And this is our text span. So here, text span dot and even listener. Click Whenever user click on the span we're going to call another method tangle completion. And here we need to pass two data, which is task ID and text span value. Whenever user click on the x task text, you are calling the method, tagle completion, and here we are passing two argument O is task ID, and other ones text span. Function, and our function name is tagle completion. Task ID and text span. Okay. First, we need to get the value from our local storage. We create new variable called tasks equals json dot p, local storage dot get item, and our key value is tasks. There is no data says DMD, right. Task equals task that match map inside the map function. Task. It will check each element of array here, if task ID equals equals our task ID, which we are getting from the parameter means task completed equals not task completed. If it is true, it will set it as false. If it is false, it will set it as true, and written. Task. Okay. Now, we need to set a value to the local storage, local storage dot set item tasks. Json string pi. The pausing our last data, save the file, and then go to Browser application local storage, and here are the first task status completed, I does falls. Now I'm going to tap the first task over here, and as you see, the status of the completed changed to u Now we need to mark this task as completed. For that, after this, text spare. Do parent element. We are going to add a new class to the parent element. Class list agl Completed. Okay. Save the file. As I see it is changed to completed. When you inspect this, there is a new class added to the parent element. Again, when you tap on this, the glass has been driven. For the completed glass, I have added the style as a background as a light green and text decoration light room. That's why it is sewing strike out. We have successfully completed our to do list project. 28. Conclusion: Hello, and congratulations to finish this class. And let's see the key takeaways from this project. I hope you have learned about the fundamentals of JavaScript. What is JavaScript? The syntax of JavaScript, how to include JavaScript, TMO webpage, also learned about the operators, keywords, objects, Control pro statements, funk sens, web API, Async, cookies in Java St what next to? Practice regularly and apply your fundamental basics to the next level, practice, practice, practice. Once again, thank you for taking this class and please leave a review if you like this class. Thank you. See you on my next lesson.