JavaScript Fundamentals | Bharath Thippireddy | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

90 Lessons (4h 45m)
    • 1. Course and Instructor Introduction

      1:39
    • 2. JavaScript Introduction

      2:40
    • 3. Create a Internal JavaScript

      4:41
    • 4. The document object

      0:46
    • 5. Commenting the code

      3:33
    • 6. Create a External JavaScript

      2:44
    • 7. Using a Semi Colon

      1:27
    • 8. Checking for errors

      1:09
    • 9. Variables

      2:24
    • 10. Variables HandsOn

      3:20
    • 11. Arithmetic Operators

      2:10
    • 12. Plus Operator and Strings

      3:41
    • 13. NaN

      2:27
    • 14. Assignment Operators

      3:15
    • 15. Increment and Decrement Operators

      4:08
    • 16. Conditional Operators

      2:55
    • 17. alert popup

      2:59
    • 18. prompt popup

      1:51
    • 19. Sum Of Two Numbers

      2:33
    • 20. If

      2:30
    • 21. If Else

      1:41
    • 22. If else ladder

      8:23
    • 23. If Else Ladder hands on

      8:23
    • 24. Logical Operators

      1:08
    • 25. Switch

      5:00
    • 26. Switch with String

      2:28
    • 27. Loops Introduction

      0:54
    • 28. For

      4:04
    • 29. While

      2:24
    • 30. Do..while

      2:02
    • 31. Break and Continue

      2:35
    • 32. Function with arguments

      2:08
    • 33. Returning values from Functions

      2:19
    • 34. Closures

      2:28
    • 35. Local and Global Variables

      4:40
    • 36. Events Introduction

      2:25
    • 37. Mouse Over and Mouse Out Events

      2:47
    • 38. Using user defined functions to handle events

      6:01
    • 39. OnClick Hands On 1

      4:51
    • 40. OnClick Hands On Part 2

      3:47
    • 41. onchange switch background color

      3:39
    • 42. Onchange switch website

      2:27
    • 43. Onchange switch background images

      4:26
    • 44. Onfocus and onblur

      3:19
    • 45. Keydown and keyup Assignment

      0:59
    • 46. Onload print

      2:26
    • 47. Onload redirect

      1:21
    • 48. Set Timeout

      2:25
    • 49. OnSubmit

      2:06
    • 50. Strings

      6:20
    • 51. Boolean

      4:13
    • 52. Math

      3:22
    • 53. Arrays

      5:19
    • 54. Concat revers and join Functions

      3:59
    • 55. Delete and replace Functions

      2:24
    • 56. Date

      5:17
    • 57. SetInterval method

      2:05
    • 58. Error Handling and Debugging Introduction

      4:59
    • 59. Throwing Custom Errors

      5:25
    • 60. Finally

      2:06
    • 61. Debugging

      3:34
    • 62. HTML DOM Introduction

      1:39
    • 63. Acess HTML

      4:09
    • 64. Access Styling Information

      2:03
    • 65. EventListener

      4:12
    • 66. Remove NODES

      3:25
    • 67. Create a Node

      2:15
    • 68. Insert and Replace Child Elements

      3:04
    • 69. Set and Remove Attributes

      2:21
    • 70. BOM Introduction

      1:14
    • 71. Screen

      1:23
    • 72. History

      4:10
    • 73. Navigator

      4:00
    • 74. Basics of form validation

      8:16
    • 75. Validating Numbers

      3:31
    • 76. Validating Select Menus

      3:53
    • 77. Validating Check Boxes

      6:08
    • 78. Validating the Radio Buttons

      5:17
    • 79. Regular Expression Introduction

      1:51
    • 80. Regular Expression Syntax

      3:19
    • 81. Validation using Regular Expression

      5:27
    • 82. Alpha Numeric Validation

      3:43
    • 83. Specifying a range

      1:05
    • 84. Introduction

      1:10
    • 85. Using new and Object Type

      3:25
    • 86. Using Functions

      4:00
    • 87. Add Functions to an Object

      2:33
    • 88. Display Blog Details Function

      1:54
    • 89. Create object using Literal Constructor

      2:54
    • 90. Create a Singleton Object

      2:22
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

27

Students

--

Projects

About This Class

This hands on JavaScript training course provides the fundamental knowledge necessary to design and develop dynamic Web pages using JavaScript. It introduces students to client-side JavaScript and how the language can be used to turn static HTML pages into dynamic, interactive Web pages.

JavaScript topics include adding JavaScript to a Webpage, use of dialogues to interact with the user and JavaScript intrinsic objects such as Date, Array and Math. Students will also be introduced to the Document Object Model (DOM), creation of functions, event handling, form validation, object creation and more.

  • Create JavaScript Programs

  • Use Variable and Operators

  • Launch Popup Boxes

  • Write conditional and looping logic

  • Create custom functions

  • Handle Events Programmatically

  • Catch and handle errors

  • Learn the basics of debugging

  • Manipulate HTML from JavaScript

  • Use the Browser Object Model

  • Do HTML form validations

  • Create custom JavaScript Objects

What are the requirements?

  • Text Editor,Web Browser(Chrome,Firefox,IE etc)

Meet Your Teacher

Teacher Profile Image

Bharath Thippireddy

You are the creator of your destiny

Teacher

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Course and Instructor Introduction: good to see you again. And thanks for enrolling. This is electability. I'm a software architect and instructor, and I'm going to do my best to help you master JavaScript Fundamentals. He will start this course by learning what JavaScript is and why we needed toe build interactive dynamic of applications. He will then see how JavaScript handles variables dynamically at runtime on also used their different types off operators such as assignment, arithmetic and conditional JavaScript supports three types off pop up windows from within your web. Rosa, you will see them in action. We'll also learn how to define logic using conditional statements, execute the same piece off court multiple times using loops and also create reusable functions. Everything that happens on a webpage is through. Evens will learn how to handle events by learning the different types off, building JavaScript objects and also handled errors. Debugging is a key skill every javascript developer should have. You're going to learn the basics off how to debug, eh? Javascript program at runtime minute transcend over Broza using the document object mortal . We can access and manipulate the HTML dynamically on our webpage. It will do that and also you will learn the browser, object mortal and even validate the forms or the data that the user enters. It will wrap this course up by learning how to create your own custom objects and use them . 2. JavaScript Introduction: JavaScript is a lightweight, dynamic on type programming or scripting language. Lightweight because using a few syntactical elements, we can accomplish a lot off work or write a lot off court dynamic because there is no compilation step in world when we write JavaScript programs. But it will be interpreter by interpreter or JavaScript engine. Unlike other programming, languages like C or Java are dotnet, there is no step off compilation involved here. UN. Type is a very powerful feature off JavaScript, as it will learn later on, When we use different types off data in our JavaScript programs, we need not mention their type dynamically at runtime. The type will be assumed based on the data we are using. It supports multiple paradigms. That is, it supports both functional as well as object oriented principles. Along with his HTML and CSS for styling, JavaScript is required to build interactive websites, and all other browsers are there, like chrome Internet explorer, Firefox Safari, etcetera. How inbuilt support to run JavaScript Using JavaScript, we can accomplish a lot off things on the browser. For example, when a user clicks a button or he enters something in the text field, we can handle that even on perform. But validations or any other operations on that data? We can even send the data to the server side application. And once that application, since the response back, we can handle that response in JavaScript on dynamically update the hitch tear Melinda Broza So we can perform all these operations from within the VA Broza using JavaScript Back when I started my career in 2002 JavaScript was only meant to be used on the Broza. But slowly it has caught up on the server side as well. Lower days. A lot of applications are built to run on a server using JavaScript as well. For example, frameworks like nor days can be used to develop silver, Sire, Java applications. The JavaScript specification. The standard is maintained by E. C. M. A. Script dark orc so you can find the entire specification by going to this website. But we asked all a person and not worry. Aborted specification brother creators are JavaScript. Engine creators like chrome ie Firefox are the ones who need toe. Follow the specification. We, as developers will learn this in tax off JavaScript and just use it to build our applications 3. Create a Internal JavaScript: in this luxury will learn how to use the our script inside a HTML page. There are two ways to do it. One is by using internal script to is to use the external script in this lecture will create an internal script. Go to your favorite i D or text editor. For me, it's sublime text. I'm still evaluating it. You can use their nor pad nor pad plus plus for any other text editor off your choice. Create a history mill document. The root element is hasty. Emmel slash html head slash head Depending on the editor you are using, you might be getting some help as soon as you type in head. It might be generating the head for you if you're using a replace or some other I. D. Party, body and within head included Title as well, since this is the very first document we're creating, were typing in everything. But going forward will copy this HTML portion and type a lot off. JavaScript formatted a little enter move ahead to a new line to attack for the title in the body. The title. Call it internal script. I'll explain why it's called internal script in a bit. Save it. I'm going to save all the files from this course. Under my documents, create a new folder, Call Java script. You can create this folder on your desktop. See Dr D Drive wherever we want. Create. We had a supporter for the section called Basics on the file Name internal script dot html . So far, we haven't used any JavaScript court. All this is his Tiemann. Start typing in some JavaScript cord after the title document. Not right brackets cynical at the end. Within double courts inside the brackets inside the head element. Save it. Similarly, you can use document dot right inside the body as well. The 10 double courts inside the body element save it. Run our HTML and see the output go to either Windows Explorer or Finder on Mac Order. The failed folder very have saved this file documents. JavaScript Basics. Right Click on it and you can open it with any off your favorite Web browsers. For me, it's Google Chrome. Open it in that and it would not see the actual or put. But they will see whatever we have type. Being as text in the browser is because we haven't wrapped it in a script element. So in here, whenever we want to use the our script, according to his team and document, you need to use a script and close the script right after ever tell a script court same in the body as well. You can have any number off strip blocks texted. It has some in built support for JavaScript, so it generated the script element with that type. Attribute on it. Diaby's text slash javascript The newer Russians off our brothers do not need. This is deprecate ID. You can get rid off this. You can simply use script block, save it. Go back to the closer reference your page. And now this output is actually coming from the JavaScript AP A that you have used. It stays inside the head element and inside the body go back to the I. D or the North pat. You can also include hasty Emelin here br slash a line break so that we'll see it in two different lines. Go back to the Broza enter and inside the body goes to a different line because we have added a line break at the end. I'll explain what this document dot right is in the next lecture. The reason this is called internal script is because we are embedding the JavaScript court right inside HTML page. In the next few lectures. I'll also show you how to create an external script where in the week putting all the JavaScript court in a file off its own. 4. The document object: document here is a JavaScript object in the world off JavaScript. Everything is an object elements, numbers, race, strings document. And if you go to the Broza, this browser window is represented by edge. Our script object called Window Document, represents the current hiss team and doctrine that is loaded into the rep Rosa Using it, we can write things to the current History Eman document, as well as access the elements within the HTML document. We learn more about document in lectures later on. For now, you have used the right method on their document object. This right method writes. Whatever you do, do it to the Web, Rosa. 5. Commenting the code: whatever we put into the comments section will be skipped by the JavaScript engine in the lab. Rosa whenever his team El Pais is loaded and our javascript he's executed, there are three types off comments, single line comments where we can use to forward slashes to skip a single line off JavaScript execution. Multilane comments which starts with a forward slash as tricks on all those lines which we want to come and out. Our skip will go inside it and then ask tricks and forward. Slash to close it. And another comment is html. Comment used to comment out his TML court. Less than symbol, exclamation too high funds and all the history Mel Core should go there and then to high funds and greater than symbol comments are a great way to provide documentation for another developer. If you want to explain a complex logic you're writing, you can do that using comments and for some reason, if you want to comment out a few lines off cord for a little bit off time, then you can use comments as well. So let's work on a program by going to sublime text audio letter editor, Whatever you are using new file. I'm going to copy over the internal script into this new file. Call this. She is the title. Do comments. If I want to comment on this document dot right here, I lose a single line comment, which is to forward slashes. Save this file under basics comments dot html is the name of the file. Save it. Go to the Web browser. I go to the Finder, Oliver Windows Explorer, Open this common store. Tasty Emel, right Click Open with your Broza and you see only inside the body element because the browser skips Waterbury. How commented out? That is the reason you're not seeing inside the head element. Now let me copy this twice on the change. This to lying to save it. To use multi line comment. You will use that forward slash as tricks and close it using Asterix forward slash Go to the Web Rosa Refresh and you will not see any or put from our program because you have commented it out using it multi line comment. Let's add some history McCord in the body be He was a bold his team attack within be, say, using his Deimel comments save it. Cordillera browser Enter You will see that in Bold. Now come back to your program or the history Mel Page. Use the hysterical comments. It starts with less than symbol exclamation do forward slashes, and it ends with wherever we want to end it to. Forward Slash is greater than symbol. Save it well back to the Web Rosa Refresh and that is gone toe. In this lecture, you have learned the two types off JavaScript comments, which are the single lane comment to forward slashes and multilane comments and also the hits TML comments, which you can use to comment or the HTML cord. 6. Create a External JavaScript: in this lecture, you will learn how it external JavaScript document and use it inside a HTML page. Create a new file copy or the contents from the internal script. Baste it in the new file, Get it off the JavaScript court here because we're going to move it to a separate document and change this title to external Save it. Call it external dot hits Yemen. Create another new document. This is our javascript file document dot Right within. Double courts external document. Save it. Call it external dot Js Well, back to the hits Tamalpais To use the external door Js in our history Emel page on the start element on the start script element used The SRC attribute is equal to within double course you the pat off the externality is external door Js is related path because Js is in the same folder as the HTML page Save it do the same on the script block inside the body SRC is equal Do within double courts external dot Js save it or do we were folder Wherever we have saved the file open it to never Broza and out protest external document External document twice because we are using the script block and including this file twice to the browser. First it lowers the history Emel page Then it looks at the script block it lords it and executes water Is there in the external Lord Js to organize it Better You can move this external door J s two s help folder create a new folder on the River Basics folder Call it genius and more this external Dargis into that Js folder and come back to your his TML page . You'll have to change this to Js slash The path is related Js slash So hasty MLPs isn't there Basics folder External lord html relate You do that you need to give the path which is Js slash external Js Well, back to the lab Rosa the fresh It should still work as is 7. Using a Semi Colon: like other programming languages, such as Java. Every statement in JavaScript me not end with semi Colon. For example, If I remove this cynical and save the file, go to the Web. Rosa Refresh dissect external dot html. It still works as expected, but you need a semi colon when there are multiple lines. For some reason, if you're putting multiple statements in the same line, then you need to use this chemical and otherwise, if you go back to the Broza, a fresh there is an error. That is the reason you are not seeing any output to see what the arteries in chrome. You can goto view developer JavaScript concern, and it says unexpected. Identify. So go back. Use a semi colon right there. Save it, come back to the Broza enter. Everything works as expected in the error goes of a So although semi colon is not mandatory , it's always a good practice to use semi colon. That way, the court is more reliable. The developer knows that this is one statement and this is another statement. If you don't use a semi colon, it just makes the court less available. But always remember that if you have multiple lines off JavaScript court on a single line, you should separate them out with a semi colon 8. Checking for errors: I'll show you how to handle errors and also how to debug JavaScript program in a section later on. But at any point in this course, if you are not seeing the expected result or output on the Web. Rosa, you can always go to view dollop er javascript console and it will display the errors you might have in your program. For example, go back to the external dot Js and remove this bracket. Go back to the lab, Rosa, the fresh, the external RTs and you don't see their expected output because there isn't better in our script and the console displaced that better It stays on court syntax, error, missing bracket and it also tells you what line it is. It is that external dot Js lined one. If you click on it, it will even take you toe that line within the Broza so we can go back and fix it. Save it, come back to the Broza it enter on and we see the expected output. So I'm going to cover ever handling and debugging in little more detail in section later on 9. Variables: in any programming language. We use variables to store and retrieve the data in our programs instead, off using on remembering the memory locations off the data, we use variables which act as a container off that data. JavaScript support three types off primitive data types, numbers, strings and bullion. Unlike other programming languages, Java script variables are declared using the where keyword In other programming languages like Java, we would use int string float, etcetera. But in JavaScript we use work e word to define different types off variables on a run time . The JavaScript engine dynamically knows which type off variability is by looking at the data on the right hand side. So JavaScript is untie pipe or dynamic when it comes to their types off variables. The other Steptoe also supports to other primitive or trivial types, namely, no on undefined will CDs in sections Later on, there are something naming conventions we need to follow. When we create variables, they are a variable name can start with that underscore are on alphabet. It cannot start with the number like this, and our script variables are case sensitive. That is lawyer case account is not the same s a per case, a account. It will treat them as two different variables and you should not use reserve keywords such as break if far on, all the key words that he will be learning in sections later on cannot be used as variable names. JavaScript also supports composite data type called object, and we can also create our own object types and use several inbuilt object types, which he will be doing in sections later on. To summarize, we use variables to store under two data in our application. In JavaScript, variables are on type on dynamically at runtime. The JavaScript engine will know that type of variables by looking at the data there pointing to in the naming conventions. Always start with their underscore our alphabet, you can start with the number and you cannot use reserved words to name your variables. 10. Variables HandsOn: in this lecture will define some JavaScript variables and display their values on the Broza . To do that, create a new file copy over the his demon from internal script based it right here. Get it off the body. We don't need it. Save it. I'm going to create a new folder under JavaScript. Parallel to basics. I'll call it Variables On and operators in the name of the file Variables north html. Save it within the script. Block off the head. Change the title. Two variables. Declare where X is equal to 10 second variable, where we can also start with an underscore. Underscore X is equal to 20 where dollar you can use the dollar symbol as well. Dollars X is equal to 20.45 Where. Capital X Masterpiece case. Since you saw the variable names so small X is different from Capital X. Capital X is equal to 30 where yes is equal to Barrett. So by simply using where we are defining different types off data Here. Indigenous floating point data on string, which is nothing but a sequence off characters to initialize strings. We put it inside double courts. Let's display these values document dot Right X documented art. Right. Underscore X In between, we can harder line break Welcome indoors. Right within double courts. We are slash Close it right there. Copy the BR line so that we can add it even after underscore X coffee based these two lines Couple more times so that we can bring the other values as well. Dollar X, capital X and one more. We don't need a B. After that. The final value is s string were printed X underscore X dollar X than the Capital X and finally the string value. Go to the finder on your windows Explorer, go to the JavaScript folder. Variables and operators opened the variable start html in the web Rosa and displace 10 2020.45 30 parrot. 11. Arithmetic Operators: you might already know the fourth Ready cooperators. For addition, it is the plus ember for subtraction. It is high fund for division. It is forward slash on for model s. It's tough person date symbol. The forward slash for division abuses. The caution off the division operation the marvelous the percent symbol gives us the remainder off their division operation. Let's see them in action by creating a new history Emel file. File new file copy over the court from variables dot html Past it. Get it off everything in the script block except for the very well. X Declaration defined another variable where why is equal to 20 document dot right ex Bless Why copy? Paste it four times so that we can see the results off all the operators. X minus way. Let's do have y by X on. Finally why Person? Peach X. Save it as a writ medic operators dot html Enter. Go open that file in the web. Rosa and thou parties. Everything is in one line. 30. My understand two and zero. So let's have some spaces. There are. Let's put them into new lines so that you can see the output properly. copy Paste this. Get it off X plus y Within double courts. Use a line break, which is br flash copy basted in between each line. Save it. Go back to the Web Rosa Refresh that produced 30 for addition, 10 Minutes twenties Manus Tan 20 by 10 is too for the division operator. And finally, the model s operator uses the remainder zero because 20% days 10 that refineries zero. 12. Plus Operator and Strings: the place operator can also be used with string data types. It acts as a concatenation operator when one off the operations is a strength. Let's see that inaction create a new file copy over the contents of the arithmetic operators. Based it change that I told to bless and strings Get it off their document. DOT writes. Define a variable where Z or third is equal to X plus why we're riding x and Y and putting the result into Z document Door right Displayed a value off. See Save it plus with string door his Deimel Go to the finder, Open it plus with string in Europe, Broza output is 30. So far, no surprises. Well, back to your editor defined two more variables where a is equal to within double courts Then where B is equal to within single courts 20 We can define strings within single courts as well. But double courses preferred where si is equal toe a les bee document dot Right See? Go back to the lab Rosa have five on the result is 10 20 Exporter line break in between. Right after this, within double courts br our slash Close it come back to the lab. Rosa Refresh 30 is the result of X plus Why, when we assign numbers But when we have created string types, it can coordinates those two strings. These two here are sequence off characters because we have put it inside double courts. Now let's try one more where P is equal to X, which is a number bless B, which is a type strength document. No, what right result which is B corporate this lane break Darkman dot Right line break basted here so that we can see the new result in a new line. Go back to the web, Rosa Refresh. The result still is 10 20. So if you use the plus operator with the string and on any other type any other numeric type, it will still appended to the result here. Instead, off putting this br on a different line. We can use the place operator and put it right here. Use it right here. Get it off this document dot right, because it is going to append the value off that to be our which is OK. We can do the same here as well. Dental x c bless br cut it off document dot Right? Save it. Go back to the web, Rosa, enter. The results still are same. So always remember that if you are using a string type with a plus symbol, it will upend the values. Do the string in the operation. 13. NaN: in this luxury will learn about JavaScript automatic type conversion and also a special inbuilt value called Not a Number and A and Get Started by creating a new file copy or the court from Plus, it's strings delete everything in the script block except for their declaration off X and Y . Where are Zardari? Z is equal to X minus. Why, but a simple change. Let's change this X and y values. Two strings water strings Save it, man dot his TML. Let's follow the convention off using small letters Now and artist Deimel document dot right within double courts Reserved ease. We can upend a message. Now you know that we can use a plus operator to upend a string within brackets. Use X minus Y. I'm subtracting two strings, not numbers. Internally, the values are numbers, but they are strings. Let's see what happens. Open your page nan dot html in the vab Rosa, and the result is minus 10. It still works because JavaScript internally converts these into numeric values when we use arithmetic operators. But if one off these is not a number, let's change the white do X y Z and start off her number. Save it well, back to the lab, Rosa Refresh. And you see, man, not a number. This is a special value which is in build into javascript and we'll see that. Can you try to you performer Automatic operations on two strings and one of the strings is our two off. The strings are not numbers internally when you can perform other operations such as X slash. Y a fresh? You'd still man. If I change it back toe 20 he will see you correct result, which is 0.5 when 10 is divided by 20. 14. Assignment Operators: you have been using the simple assignment operator, which is the equal to operator, which, when used a science, the value on the right hand side to the very Belinda left hand side. In this lecture, you will learn a few more assignment operators, which are compound assignment operators. Create a new file copy or the court from Nan North. His TML paste it Get rid off the last two lines within script block, where the is equal to X Star equal. Do why I'm performing a compound assignment here. The way this works, let's see it in comments Z is equal to X is equal to X star. Why? So this compound star which times for multiplication equal to the way it works, is X is equal to X star. Why and we are then assigning the value off X to Z. Comments that will be Z is equal to X is equal to the value of X and y are 10 star 20. But in comments Z is equal to X is equal to 30. So that is the end result. Save it assignment operators thought his demon. Let's bring the value off X before we do this operation document Dark right within brackets double courts Ex Colin Bless X call Pay this basted after the operation at the end, we can put a BR Now that you know we can can coordinate strings using the place we are a line break Copy the holding Do the same for why and said why And finally z changed the message also too white Onda z Save it, open it in ever Broza assignment operators And the results are X is 10. We don't We didn't give a line break. They're so go back a pen A line break Before the operation the value off X should be displayed in a user friendly manner. Save it. Go back to the Broza Refresh X starts with 10. The next becomes 200. Why is 20? Because we're not assigning anything. Toe Wife, You go back and see. We're not using why anywhere and Z or said also becomes 200 at the end. So you can use this complex assignment or calm born assignment operator with any off the arithmetic operators. It could be star. It could be addition. It could be multiplication or even more journalists 15. Increment and Decrement Operators: the increment and equipment operators, as the name itself says the increment and Vikram in the value off a variable by one they're represented using plus plus and minus minus symbols. There are two variations off it are two combinations off them post increment and post Dick Clement, where we use the operators after the very blame. Pre increment and predicament where we use the operators before the variable name. Let's see it in action by creating a program and how they impact the values of our variables. New file copy or the country's off assignment operators pasted. Get it off everything except for the variable Declaration. Remove the double courts exceeds 10 and why, instead of 20 make it explicit plus user post increment operator document dot right display The values are both X and y within double courts. X Colin Space plus X plus a line break. We are copy this bested Why? Why save it in agreement and agreement operators dort html A long name. Go to the Va Broza by opening the increment and equipment dot html operator start html. There are parties exes 11 But why? He's still pen If you go back to the program. So the value in the airport X came out to be 11 and the value off why is still 10? That is how the post increment operator works when we use a post incremental posed equipment. First, the elevation off this expression happens on then that plus plus or minus minus operated the post increment will be executed by the JavaScript engine. That is the reason we're the Y. Value First will be assigned from the X value, which is tent. That is the reason we're seeing why, as 10 but ex wants, this expression is evaluator. The value off X will be implemented. That is where we are seeing it as 11. You can also try minus minus. Save it. Go to the Web browser Refresh X became nine. But why is still 10? Because it has the old value off X dry. Another example where a is equal to men where b is equal to plus. Plus they were using three in agreement this time. Copy this, but the lanes based them Here tabs bring the values off A and B be change it to be save it . Go back to the Barossa. But a fresh is 11 b is also 11. That's the difference between post and pre increment. In case off pre increment, the increment happens first and then the expression is evaluated. You can try minus minus as well. This is a three D criminal operator. In this case, the value first minus minus. A will be executed and then the expression will be evaluated. Go back to the browser. A fresh border Values are nine. So, depending on your program requirement, especially when you are using looping statements, etcetera, you can use either post increment or post detriment or pre increment or creed equipment. 16. Conditional Operators: the comparision operators take two operations, compare their values and return a boolean proof or falls as a result. For example, let's say we have a variable X, which has a value assigned, which is 10. If we use the doubly call to operator, which does the equality. Check X double equal to 10 will return. A. True because X is 10. Even if we do it, extrapolate equal to 10 within double courts a string. Even then, it returns it true because it does not care about the type off data doesn't do a type chick , whereas the Tripoli call to operator, which is a special operator in JavaScript. We'll check for the type as well. It will return it true if we use it as extra pill equals tent, it will written a false if we use it against the string because this is off type number or in teacher. But here we are trying to compare it with the string, and they both are not equal because the type does not match. The not equals is opposite off double equals XRT close to 10. Willard and Falls Ex article to strengthen also will return a false because it doesn't care about the type. Next is not double equal to this is opposite off. Triple equal to this cares about the type, so X not equal to double equal to 10 will return. False but X, not noble equals to strengthen will return a. True because they are off different types and we are doing and not off it, which is true. Less then and less than are equal to our straightforward X less than 10 and x less then strengthen returns False, which, because it is not true, exceeds 10 x less than or equal to 10. Or, if we use X less than or equal to strengthen will return a. True because X is equal to 10 similarly greater than and greater than he called you. If we compare X is greater than 10 that should return a false because X is equal to 10 and also string comparision. It returns the false because X is equal to attend. These operators do not care about the type, but if we use X is greater than or equal to 10 of course, it is equal to 10 that returns. A true X is greater than or equal to strengthen. Even that returns. That true because it does not care about their type, except for the purple equals operator who checks for the type and not double equals operator with checks for the type. And it is opposite off what the Tripoli calls does. All the other operators are straightforward, and they don't care about the type off data. 17. alert popup: JavaScript support three types off pop up boxes or windows. They're alert. Confirm on prompt. He will learn, alert and confirm in this lecture on, we will see prompt in action in the next one. Go to your editor. Create a new file copy order Script from in certain equipment operators based it here changed the title to alert on Come from pop ups. Get rid off the court inside the script block. Save it. I'm going to create a sub folder under my JavaScript folder. Call it pop ups and the name of the file will be alert on confirm dot html within the script, using alert is very simple. Alert within brackets. What? Our message you want to display to the end user click toe, proceed within double courts are single courts. Order the folder system or to the pop ups folder. Open it in the Broza and you see the alert window and it say's click toe. Proceed. It will learn more on when to use alerts in lectures later on, when we talk about form submission, etcetera. In the initial days off JavaScript, we used to use alerts for debug debugging purposes as a developer. If we want to see what's going on with the system. We used to use alerts, but there is a different way, often debugging, which is supported by browsers currently. So we don't use alerts anymore for debugging hit okay. And the alleged window will be gone. There is no practical use off alerts that is being shown here, but it will learn that in sections later on. Go back to the editor to use a confirm. The alert has only one button. If you go back to the Broza ender, there is only one. OK, button one. OK, button in comments but the confirm On the other hand, all small confirm within brackets, you can pass in the message very similar to alert. Click here to proceed. Save it. Go back to the web. Rosa hit. Enter first will be alert. Then it will show the confirmation pop up. It has two buttons. Either you can cancel it or you can hit. Okay, this can be used in a workflow when you build an application. If the user wants to stay on the pace, then he will hit. Cancel If he hits, Okay, we are going to submit that formed when other page we'll learn all that in lectures later on 18. prompt popup: the third and the last type off Pop up is the prompt pop up, which allows us to gather some information from the end user and use it in our script. Create a new file copy or the hundreds off alert and confirm. Paste change the title. All it romped. Bob, get it off Alert and confirm. Save it as prompt. Lord History ml under pop ups to use prompt prompt within brackets and the message we're going to ask the end user toe, enter his user I d You can assign this prompt were variable. What? Our value the user enters in a prompt that al you will be assigned to this variable variable s is equal to prompt. Enter his use already. Display this document dot Right? Yes. Save it or the folder opened the problem dot html in the web. Rosa, immediately you see the prompt window. It has a field very similar to a history text field on The message you have enter is shown here under his user. I d You can change it to a much court. Meaningful one Enter. You are used already. Save it. Come back. Cancel this a fresh the page the previous one displayed another because we haven't entered any value in the prompt. But it it okay and the value Parrott will be displayed on the console so we can gather information from the end user and we can make use off it with another script. 19. Sum Of Two Numbers: in this luxury will work on a use case toe. Add two numbers to calculate the sum off two numbers, which the end user will enter. While doing that, you learn a few more concepts off Prompt and some functions, such as parts into end parts float. Create a new file. Copy the contents from prompt artist Yemen. Change it to some off two numbers you are num. One is equal to you can ask the end user. Enter the first number, copy that line paste it. Number two is equal to enter the second number where some is equal to number plus number two. But before we execute this program and display that some document dot right, some prompt by default considers the value that the user enters as a string. So we need to use matters such as parts into to convert it into a numeric value into will convert it into in Teacher Florida will convert it into a decimal past float. Depending on the input you have, you can use the appropriate conversion methods or typecasting methods. Save it some off. Well, it's more Some off do numbers dot html fix the spell. Oh, here they should be parsed into. I'll explain the program in a second. Once we're on it, some off two numbers the first pop up. Enter the first number, which is an India, Let's say 30. And it asked, Enter the second number 40. Okay, and the same is 70. So what exactly happened here is this prompt is the first prompt, wherein we have entered 30. That 30 is being converted from string to integer type. It's assigned to number. Similarly, the second number, which is by default string, is converted to an indigent on the summit's calculator and the value is displayed. 20. If : the first off the conditional statements is the if statement it starts with, if followed by a condition within brackets. This condition or expression should always evaluate to a bully and true or false. If it is true, then the body off the if will be executed. The body goes inside a flower bracket and ends with a floor racket as well. If it is false, this court inside life block will never be executed. That's welcomed a hands on example. Go to your editor, file new copy or the script block from any off the earlier JavaScript files. Get it off everything inside. Desperate block. Change their title to if inside the script where X is equal to we're going to prompt the end user to enter a value or enter a number within double courts. Please enter a number and we're assigning it to X. Use the if condition if x double equality and open the floor racket and close the floor bracket. Document dark right within double courts X colon, plus the value off X. Save this. I'm going to save it under JavaScript. Create a new folder. Conditional statements in the name of the file will be if God, his TML that saved. So here we are saying if the value entered by the end user is 10 only then it's going to display the output on the browser. If not, it does nothing. Go to your explorer under JavaScript. Conditional statements opened this on the Web browser. And it will prompt you the end user, to enter a number. Enter something like a dean. Okay. You don't see any output refreshed the page. Enter again. Enter, Tend this time it okay? And you see the value off excess 10. So our if statement the body only executed when the value is 10. If not, it never executed the document Art, right? 21. If Else : the court inside they've block is executed If their condition evaluates to true, If we weren't some court that needs to be executed when the condition is false, we use the else block right next to the If block the score is run only when the Kardashian is false. Let's see that in action. Go back to your editor will reuse the if dot html The else block should start right after the if where they've ends else Lower racket and floor back. It closes the body off. It goes inside it document dot Right within double courts else block ex school and we're going to print the value off X when it goes into the else block. That is when X is not equal to zero. The hell's block will be executed if, as X is equal to zero, this document aren't right will be executed. We can also pass a default value to the prompt right. When the prompt comes up in the browser, we can pass a default value using comma A second perimeter. Let's have a default as 10. Save it. Go to your explorer. Opened the shortest email again in the Broza. If you see the default values. 10 Because we have given it as 10 in our program. Come back it. Okay, It goes into the block and prince the value off X. Come back. No. Fresh under 20. Okay, now it goes into the else block and it displaced the value off X. 22. If else ladder : in this lecture will build a grating application. The very first requirement is to ask the end user prompt him to enter three marks. JavaScript, java on Darknet. What do you already toe? Copy some cord from the if dot html file New file basted. They're getting off the block and change this variable name X two Java script marks prompt . Please enter the J s marks nor defaults. Get it off that save it under conditional statements. If else larder We can typecast this because the marks are going to be in pictures. Parts int What are value comes from the point prompt will be string by default. We are typecasting it toe in teacher copy This based it on the next lane. And one more line Second is Java marks to the end user In this case is an instructor like me. He is going to enter all these three months. Finally, dotnet dotnet marks that I turned side dot net. Once we have all the three marks were going to calculate the total off them bad total is equality. Javascript marks Bless Java marks Bless Dark Nic marks document dot Right display the daughter. Total marks. Colin space. Bless Norton. Now calculate the average where average is equal to total by. We have three subjects. Three document dot right within double. Courts have a reach Golan Space plus Average same equipment. Now the logic stocks were going to use the if block and he fell. Slaughter. The very first requirement is to check if he has passed or failed the exams. So all the three subjects he should have scored 35 or more than that. Let's do their check first. If JavaScript marks he is greater than or equal to 35. And to use multiple conditions, we're going to use double Amper signed. I'm going to explain this double ampersand in detail in the next lecture, but we use double and percent to how multiple conditions in a conditional statement and Jabal Marks. He's greater than or equal to 35 as well and double 1%. Again. Darknet marks is greater than or equal to 35 only if that is true, we're going to execute the rest off the logic else. Document door, right result plus or result failed. Failed is the result. If this condition is false, if not, we're going to great, great and come up with the grating logic. The very first grade is the C grade. If it is 35 or more of the average is 35 or more in less than 59 less than or equal to 59. Then it's a see great. So let's start there. If average is greater than or equal to 35 and ever reach is less than 60 you can either say less than 60 or you can say averages less than or equal to 59. If that's true, then document dot right grade coal and see can give a space if you want to save it else. If we were going to use, they fell. Slaughter here within brackets average he is greater than or equal to 60. And our age he's less than or equal to 70. There is a requirement we have from 60 to 70. It's not less than or equal to. It is less than 70. Document Not right within double courts. Great colon space Be finally else. We know that it's great. It great colon. Okay. Eso you belong to this Grady a block here. You as a student on this course, So the logic here is very simple. If he has passing all the exams, only then we are going in to this. If statement, we can also print right here. As soon as we're going to the block, we can say document dot dot Right. First of all, we should tell him that he has passed Result Colin Best and if it goes into the else block were displaying Result failed and if he has passed, were also showing him the great, depending on the average he has scored. Open it in the Web. Rosa Soto documents JavaScript Conditional statements. If else larger haven't saved it with the correct extension. So let me do that file save As he fell. Slaughter dot html Go to the Explorer open. They fell. Slaughter brought his human in the Web browser it prompts for JavaScript. Mark Marks. Let's say 40. Oh, let's try 80 Jello marks. 90 on Darknet marks again. Let's say 70. It okay, and the results are total marks to 40 average is 80. There is this pillow, their spelling mistake wizard these past and Grady's A. Let's add some be ours, then off each line and fix the spilling here average and in the end, off each document dot Right Ireland B R line break in his TML copy their starting from plus all the way to the end based it, after ordered the end off each document dot right so that it will be clean when the user ceased output. We don't need it at the end. Go back, Refresh it asks to enter the JavaScript marks. This time I'm going to enter all forties. 40 40 40. And the results. The total marks is 1 20 averages 40 he has passed and Grady's see. 23. If Else Ladder hands on: in this lecture will build a grating application. The very first requirement is to ask the end user prompt him to enter three marks. JavaScript, java on Darknet. What do you already toe? Copy some cord from the if dot html file New file basted. They're getting off the block and change this variable name X two Java script marks prompt . Please enter the J s marks nor defaults. Get it off that save it under conditional statements. If else larder We can typecast this because the marks are going to be in pictures. Parts int What are value comes from the point prompt will be string by default. We are typecasting it toe in teacher copy This based it on the next lane. And one more line Second is Java marks to the end user In this case is an instructor like me. He is going to enter all these three months. Finally, dotnet dotnet marks that I turned side dot net. Once we have all the three marks were going to calculate the total off them bad total is equality. Javascript marks Bless Java marks Bless Dark Nic marks document dot Right display the daughter. Total marks. Colin space. Bless Norton. Now calculate the average where average is equal to total by. We have three subjects. Three document dot right within double. Courts have a reach Golan Space plus Average same equipment. Now the logic stocks were going to use the if block and he fell. Slaughter. The very first requirement is to check if he has passed or failed the exams. So all the three subjects he should have scored 35 or more than that. Let's do their check first. If JavaScript marks he is greater than or equal to 35. And to use multiple conditions, we're going to use double Amper signed. I'm going to explain this double ampersand in detail in the next lecture, but we use double and percent to how multiple conditions in a conditional statement and Jabal Marks. He's greater than or equal to 35 as well and double 1%. Again. Darknet marks is greater than or equal to 35 only if that is true, we're going to execute the rest off the logic else. Document door, right result plus or result failed. Failed is the result. If this condition is false, if not, we're going to great, great and come up with the grating logic. The very first grade is the C grade. If it is 35 or more of the average is 35 or more in less than 59 less than or equal to 59. Then it's a see great. So let's start there. If average is greater than or equal to 35 and ever reach is less than 60 you can either say less than 60 or you can say averages less than or equal to 59. If that's true, then document dot right grade coal and see can give a space if you want to save it else. If we were going to use, they fell. Slaughter here within brackets average he is greater than or equal to 60. And our age he's less than or equal to 70. There is a requirement we have from 60 to 70. It's not less than or equal to. It is less than 70. Document Not right within double courts. Great colon space Be finally else. We know that it's great. It great colon. Okay. Eso you belong to this Grady a block here. You as a student on this course, So the logic here is very simple. If he has passing all the exams, only then we are going in to this. If statement, we can also print right here. As soon as we're going to the block, we can say document dot dot Right. First of all, we should tell him that he has passed Result Colin Best and if it goes into the else block were displaying Result failed and if he has passed, were also showing him the great, depending on the average he has scored. Open it in the Web. Rosa Soto documents JavaScript Conditional statements. If else larger haven't saved it with the correct extension. So let me do that file save As he fell. Slaughter dot html Go to the Explorer open. They fell. Slaughter brought his human in the Web browser it prompts for JavaScript. Mark Marks. Let's say 40. Oh, let's try 80 Jello marks. 90 on Darknet marks again. Let's say 70. It okay, and the results are total marks to 40 average is 80. There is this pillow, their spelling mistake wizard these past and Grady's A. Let's add some be ours, then off each line and fix the spilling here average and in the end, off each document dot Right Ireland B R line break in his TML copy their starting from plus all the way to the end based it, after ordered the end off each document dot right so that it will be clean when the user ceased output. We don't need it at the end. Go back, Refresh it asks to enter the JavaScript marks. This time I'm going to enter all forties. 40 40 40. And the results. The total marks is 1 20 averages 40 he has passed and Grady's see. 24. Logical Operators: There are two types of logical operators and and R and is represented by two and persons. And our is represented by two pipe symbols you already used and to use multiple conditions inside a if block here like this, this means that both this on the left hand side as well as on the right hand side bought the expressions should evaluate true. Only then this end will return. True, in this case, we have used and more than twice we have easily three times. So at the end off it, if all these three expressions here have elevated true only then then this. If block will be executed, the result will be passed on. The great will be calculated. Otherwise, the result he's failed in case off our even if one off these expressions evaluates to true , then the entire result will be true. It's OK even if you opt them are false. Even if one of them is true, the body off it will be executed. That is, that is how our works 25. Switch: then we want to execute a particular block off court from multiple blocks off court. We can use the switch statement as well. The Syntax force which ISS, which within brackets a value, our expression followed by several case statements and a default in the body off the switch . If the expression within the switch bracket or the value matches to one off the labels, that particular labels court will be executed. If none off the if the value doesn't match any off the labels than their default court will be executed, the court that goes under the default will be executed. That's work on example. File new copy over the court from, if not from, NFL's, because there is a lot of course that we need to delete after it off everything. Chances to switch the titlists, which within script declare a variable end is equality. Prompt the end user to enter a value between one and three. Enter any number comma within double courts 0 to 3. This will be shown to the user. Let's say 123 and the prompt comes up. This will be shown to the user so that he can enter any number between one and three converted into in pita by using parse int, We're going to use this end inside our switch switch within brackets and start us with statement with their floor racket. Close it with the floor racket as well. Case one Colin, Document door. Right then double courts one semi colon. Enter break. I'll explain about this. Break in a second. Once we see the output, save it. Switch door html case to case space than the label Colin Document door Right within brackets double courts to If the user enter sir value to then this case should be matched. Finally, the D fort, You can have any number of cases. Let's defend one more or let's leave it by default. It will be cased three if the user and a street should go to default. Document door right within brackets double courts three. A break statement After the second case break save. Open it in the lab. Rosa, enter any value from 1 to 3. So let's enter too. It okay and there is no or put that means theories and error. If we go back. Look at the syntax. There is a spell. Oh, should be document. Save it. Come back to the Broza. Enter Enter too. And it displays too. So whatever we enter that goes into the switch Here. Do goes here and it matches Case two and it prints toe that center three. This time it okay, And it goes toe three, because by default were displaying it US three This break. If I take this break out, the court will continue executing. If I value entered is one. After executing this particular statement, the execution will continue For case to that is the reason we have to use brake brake will break that particular switch and the execution will come out off it. Let's drive one this time. Go to the browser are taken over the break from here. Case one. You're fresh And there one. Enter it. Prints one and two as well. After two. If I take out this break also save it Blowback or a fresh Enter one again. Enter Now it prints 12 and three. So whenever uses which always make sure that you break right after each case 26. Switch with String: sweet statement can also be used with string values that start an example file new copy or the switch core based it. Change this to enter any name the name could be. Whatever you want, John X, Y c comma mark three names. You can enter your own name as well. Switch strings dot hits Yemen. We don't need this. Parsons. Get rid off that because this is we want the value as a string. The case here from one. This should change. Do within double courts. If it is John, then we should say document dot Right, John. Case two is X Y Z. What? Like seeing this X ray z toe within double courts should be within the course. I, Mr Area to put it John, Parrot and Mark. So the second case is, but it within double courts again. Let's use another case. Enter case within double courts. Mark. Cool. Then document door. Right, Mark. The 2nd 1 The value that it would twenties Barrett When Barrett his match Richard say it is Barrett Tab. The default. It should say no match. If he enters any other value, the end user other than John Parrott or market should say no match. I need to add a break after this. After every case, you need to have a break. Save it. Change the title from switch to switch using string. Open this in the lab. Rosa, switch with strings. You can enter either John Parrott or Mark that center, Brett. Okay. And it displace Parrot, your refresh and X y Z and it's a it's no match. 27. Loops Introduction: looping statements give us the syntax to execute the same logic or cord multiple times. This could be displaying the details off all the products in our application or database, or it could be displaying the exam. Results are adding several new orders to our database by sending a request to the so if we write the logic ones and put it inside a loop, that will happen as many number off times as we want. This could also be simply displaying the numbers from 1 to 10 or 1 200 There are four types off loops, the for loop, the while loop the do I loop and finally the foreign loop. He will see the 1st 3 inaction in this section. The foreign loop is used to display the properties off JavaScript object. So I will talk about it and you will see it in action in a section later on. When you learn about objects 28. For: in this luxury will learn the syntax off a for loop and work on a hands on example as well . If Arlo begins with four, followed by brackets within which we have three important things separated wear semi colon in between. The first portion is initialization. This is where we start the loop. We're going to initialize a variable here. The second is condition which should evaluate were boolean true or false? If the condition is true, the loop will continue executing. Whenever it is false, the loop will stop. Then comes the increment or discriminate. This is where we change the value off are available whether we increment it or discriminated, followed by a floor racket. And it ends with a flower racket on whatever body called we put into the for loops body will execute until the condition returns. False ex work on example. Gordy already there the use cases that you're going to ask the end user toe. Enter a particular number and you are going to display all the numbers from one to the number the user has entered. File new file, copy order Last program. We can use the where and is equal to instead off. Enter any name, Enter a number, Get it off the default value. We don't need that. Save it. Create a new folder under JavaScript. Carl. Oops and call this file four dot html was in tax for for look for int or for where I is equal to one I e. Is less than or equal to end what our value are the number the user enters. We're going to take that number on loop upto that number I plus. Plus, we're using the increments operator here, followed by the body off the loop inside, which you're going to print the number document dot right within double courts number. He's bless I going to bring the value off. I would start from one hand, Goes all the way we learned Semi colon Save it. Go to your folders, documents, JavaScript loops. Open it in Broza and it asks you to enter a number. Let's say 10 enter and it displaced. Number is one number is two etcetera had a line break by going back to your program after I plus within double course pr slash close the BIA go back for fresh. Let's display the numbers up. 200 this time and it prints Number is one Although a few scholar down till 100 the way for look works First we initialize it toe Wonder Luke begins. It will go in display the value off one because we have used their document dot Right then it even before it goes into checks The condition one is less than whatever number lets say 100 goes and displaced the value off one. Then the increment is executed. The value off I will become do this condition is checked Who is less than 100? It goes into the loop displaced the value off to again increment happens I use three condition is checked and so on up 200 when I reaches 100 the condition When I reached 101 this condition here I is less than or equal 200 will be false 101 is not less than or equal to 100. That is when their loop will stop 29. While: the for loop uses the syntax where we can initialize the variable, check the condition and also do the increment or document, or all in one line, one short. But the wild loops in taxes slightly different. The while starts with wild, with the condition in the brackets on blue body starts on discord inside the body will be executed as long as the condition is true. When it returns false, it will stop. But the initialization off the variable will happen even before the wild loop and the increment and equipment can happen inside the why. Look, it's up to us whether we need a increment or detriment or even initialize er variable. That's work on a hands on example copy or the court from four dot html pasted. If I forget to change the title, you are welcome to change it. This was the for loop on the new one. He's for the while. Look, save it as why Lord his Deimel get it off this far. It will be a while. I is less than and we haven't initialized or declared I where I is equal to one. So we initialize and declare the variable outside the looking syntax and the condition goes into a while and we should increment it right here. I bless. Plus, save it. Go to your folder or finder. Nobody can vile and there are a number 15 15 and it displaced the value from 1 to 14 because the condition have used this while I is less than and if I say I is less than or equal to in, it will display the values up to 15 at center 20 this time, and it goes all the way from 1 to 20. The only difference between foreign Vialli's in what four were able to do everything in one short, but here we declare the variable separately and do the increment and detriment separately. 30. Do..while: unlike the far loop or the while loop the do a loop executes at least once before it checks for the condition. The syntax starts with a do polar bear flower racket, and it ends with the flower racket followed by the while and then the condition. The cord inside the do well gets executed even before the carnation is checked. If the condition returns false, then the do well will not be executed anymore. If it returns true, the court will be run again. Go to your editor, file new poppy over the court from my loop, pasted. Get it off everything from the script. We're going to use different values this time changed the title to do. I look started where I is equal to three on where n is equal to do so. We are starting from I, but we're ending it, too. Let's see how our do wild works do Lord racket. Close it with the floor racket while the condition is eyes less than or equal to and and within the body document door right ice. Our value off I Colin plus I and the do well should end with a semi colon at the end, save it as do wild or HTML. Open it in the Web. Rosa and the Hope. What is three? Although the condition this evaluates to false the loop executes at least once, that is the reason you are seeing that I is three. I is not less than or equal to end because three's not less than or equal to two, but still love executes at least once. 31. Break and Continue: in this lecture, you will learn about the break and continue statements which are used inside a loop. Conditionally create a new file crap. The court from the for loop pissed it. We don't need the prompt. Get it off it. Let's hardcore the value off into 10. Since that I tell to brake on. Continue save it as break in. Continue. The loop starts from Isaac went one. It goes all the way to end I plus Plus, that's fine. And we are printing out the number here conditionally, if we say if I is equal to Noble is equal to four rockets. Break. Let's run this program and see the output. I have to save it as hasty and model save as are tasty in months. Open it in the Broza and it prints the numbers from 1 to 2. Once it reaches, once I becomes four, it doesn't execute this statement. Any war, it breaks the loop. It comes out of the loop right here for Have a statement after the for loop document Dart right within double courts after the loop. Refresh the Broza and it will be executed. But the loop will stop right when this condition is met. That is how break works you already used. Break when you have worked with switch in case off switch execution was ending right after a particular case. When used the break in case off a loop It will break out off the loop if we use Continue, we use continue to skip a particular iteration off the loop here. I'm saying When I is equal to four, don't do this, but continue the loop after it go back to the Broza Refresh, if you see, doesn't print the value off I when it is for it brings 123 and then it continues from five . And after the far look, proceed after the look, so break breaks out of the loop Is running condition, whereas continue skips that particular iteration in which the condition is satisfied 32. Function with arguments: we can pass imports to a function which can be used in the court that we right within that function to produce the expected results. These inputs are called arguments or perimeters off a function which are followed by the function name within the brackets, and they are separated by commas. Create a function by going back to your readyto file, new file copy or the court from the function start HTML. You're going to create a function that will multiply. Calculate the product off two numbers, so call it multiply and the two parameters are X comma. Why get it off the alert? He will display the result document dot Right within brackets X star Why cut it off All these displace in walked a multiply function multiply pass into numbers 10 comma 20. That is how we passing parameters. So these parameters will be When this function is in walked This X and Y will be replaced with 10 and 20 and the result should be 200 similarly and walked the multiply one more time five comma four and the results should be 20. Save it as functions with harems door hitch de Emmel. Open it in the lab Rosa, and the result is 220 to display the results on New Line Arden Line break right after document or right here for this X star. Why inside? But I kids bless within double courts. We are slash are the line break. Go back to the Web Rosa Refresh and there is also 220 You can invoke this. Multiply as many number off times as you want with different imports are arguments. 33. Returning values from Functions: We can also return the results off A function using the return Cheever return statement should be the last statement within a function, and it is optional. As you've already seen, the harder it and functions without using the return statement. But wherever you want to return the results off a function, you should use the return key word on the result itself, and it should be the last line within that function. Create a new file copy or the court from functions with parameters. You can take this, multiply and reuse it. Go back to the new file based it functions with return this multiply instead off simply displaying the result. Here it can return X Star Why? Which is the result we are expecting. And when we walked this believed one off them. Where result You can assign the result that multiplies. Returning here to a variable on you can display that result document or right. The result is colon, plus the result. Save it as functions with Britain Door HTM Month Open it he never Broza, and the result is 200 Find Children that returns something. If you simply involved that function coming this stockman dot right. If you simply in walk that function and assign it to a variable that doesn't do anything. If you want to display the results, then you have to use the document dot Right, So here we are in walking dysfunction. 10 and 20 will go into X and y. This function uses X and y and it against a product off those two we had assigning it to a variable and then displaying the results even without assigning, you can copy dysfunction call undoubtedly paste it here and you can comment out this line. If you want to come back to the lab, Rosa enter and the result is still 200. 34. Closures: closures are functions that we define inside another function. These functions how access to the parent functions, variables as well as the global variables. Create a new document copy or the court from functions with return based. It believed. Change that I will do closures. Save it as closures Door HTM Month. Within the script, create a function fun one within the body. Where is equal to hello. Define a variable A offs type string. Create another function called fun too defined. Another variable called B is equality within double courts. Put your name. I'm going to put parrot document dot right this year. Whatever we have defined is a closure. It is a function within another function. It has access routes, local variables as well as the variables off the parent function. And if we define any global variables, it can access them as well. A. A plus are the space in between A and B be. We're A pending A and B using the plus operator with the space in between. Save it and in the parent function, you can say written and involved the chilled function to we had to find a closure on. We are in walking that closure and returning its or put in the script block. We in what the fun one, which is the parent function, save it or to find her open closures dot html in the Web browser and all parties hollow space Parrot. So here we have a is being upended with the be with the space in between and that is being written using document dot Right, whatever this function returns or whatever dysfunction does, the output off it is being returned, and that is what is being displayed on the Willbros. 35. Local and Global Variables: we can define two types off variables in a JavaScript program. They are local and global. Local variables are those which we define inside a function, and they're available for use only within that particular function that is their local toe that function. Global variables, on the other hand, are those which we define outside the function within the script block, and they can be used anywhere within that script. Block. Let's see the differences between local and global by creating a new program, coffee or the core from the previous one. Save it. Get rid of everything inside the script. Save it as local and global not hitched. Yemen jeans their title Do local and global variables Within the script block, Create a function function fun one in the body Declare a variable where X is equal to 20. Document north right within double courts Ex colon I can also say inside fun one ex school and plus the value off X plus b R line break save it Involved the Function fund one. Open this in the lab Rosa local and global Lord HTML and displaced Our party is not new to you, but this X here is a local variable which can be used only within this function. For example, if I try to use it after fun one here, Document door Right. But in double courts outside Fun one ex colon Bless X. Save it. Go back to the browser. Refresh But you will see only wanting. Inside fund one exists 20 only this line. But not this. Because X is not accessible outside off fund one. And that is the reason this never works nor define a variable outside off fun one which is a global variable within the script block where why is equal to 30 This 30 can be accessed both within this function as well as outside. He had changed this stoop. Why? And this too. Why small way Copy this line bested inside Fund one. Change this to white and display the value off. Why as well Save it. Go back to the Broza. Enter and you will see three statements inside Fund one Axis 20. Why? Which is global can be used both within the functions as well as outside the functions, nor define another function. Copy this basted. Call it fun To define a variable, you can have the same variable, insurmountable functions Or let's define a variable a changes to fund too. A display the value off K Save it. You cannot use X inside the fund to because X is local to dysfunction. Similarly, you cannot use a outside off this function and you cannot use it inside fund one. It can only use a which is local to fund to within fun too. But why, on the other hand, is available for all the functions as well as any chord within that script? Go back to the Broza Fresh Something wrong in our court. Where a way we haven't called fun too simply by writing the function, it doesn't mean anything will have toe in. Walk it in work Fun too right after fun one. Go back refresh and issued a Or put change this to fund to as well save it. Come back fresh and the displaced from one fund to as the less outside fund one you can change the door, said fund. One hand find too 36. Events Introduction: when we build interactive Web applications or websites, everything that happens on those websites is through even handling. These events are raised by the brother itself and sometimes are many times because off the user activity, for example, the on Lord even is fired by the vibe. Rosa. Once the Hasty Immel document, it's completely loaded into the Broza. The on focus is fired when the user focuses on a particular text field text 80 or any other HTML field. The on click event is fired by the browser when the user clicks on a button. Or it could be a hasty amul butter Nora submit button, etcetera. We, as our script dollar purse, will handle these events on right the court that is required for our application. That court could be simply validating the fields that the user has entered, submitting their data to us, our side application or even changing the HTML in that document. Dynamically, you're going to do all that in the next few lectures. Once you understand how to handle one. Even then, you can handle any type off even. Let's look at a couple off real time examples before you work on some court go to Google, and here we have a text field and few buttons. As soon as you point your most, you're you're focusing on it. So that's that on focus. Even the brother Firestone focus even, and you can handle it by writing JavaScript court. You will learn that in the next few lectures. When you click on it, it's their own click. Even I've been JavaScript, you click on this button again. That's a on click. Even behind the scenes the Google websites, his Deimel page will have JavaScript court that will take this text and send it to the server side Google App that will return all the search results. Once the results are back, it will display those as you can see. Similarly, if we were to the Facebook website for Facebook, sign up without entering any off these fields. For simply click the sign of button. Exactly. Cuban on Click Facebook is validating all these feels, and it is making sure that how to enter otherwise it will throw an error and I can't submit . This data is not submitted to the server side application 37. Mouse Over and Mouse Out Events: in this luxury will learn and use the on most over on on most out events. The almost over event is triggered by the browser or fired when the user places the cursor on the target element. This could be any off the HTML elements on most out, as the name itself says, is triggered when the user removes the cancer on the targeted element. Let's see those two in action. New file copy or descript from closure. Clean it up. Call it on most over slash on most out notes. That title start with some HTML. In this section, we need some hits TML body as well slash body using mark you mark you whatever text you put in it, it will scroll across the browser. M R Q. U E on most over is the even we want to handle. Stop Stop is an inbuilt function in JavaScript, and it will stop the scrawling off the mark. You similarly on, most out, as soon as they removed Ramos is equal to within the Belcourt start again. This is an inbuilt function that will start the scrawling off the mark. You add some text to it start slash stop slash Markit. That will be the text that we be scrawling across the Broza. Close the mock, you save it, create a new folder called Events and call it on most over on out north html. Go to find her just a folder. Open it in the web, Rosa, and you will see a texts crawling here. If you place your most on it, it will stop. And if you as soon as you most out it will scroll again. So in this lecture have used the in build functions stop and start to handle the on most over and on most out events. In the next lecture, you will write your own functions to handle these two events. 38. Using user defined functions to handle events: the previous lecture, you have learned how to handle the on most over our non most out evens using the stop and start matters which are inbuilt matters in JavaScript. In this lecture, it will learn how to handle them, using your own custom or user defined functions on in the process. He will also learn how to access HTML elements and manipulate them from within. JavaScript get started by copying the contents off this file. Create a new file paste it. Change that title to almost over on most out using custom functions are user defined functions. Change this market to a paragraph like to use a paragraph and change the contents off this paragraph. Two. Mouse over slash Most out, save it most over, most out C f Heart Hasty ml Amusing A shortcut. Otherwise, it will be a very long name. Embryo ambo, CIA four. Custom function dot It's Deimel. Save it instead. Off using the stop, we're going to create our own function called handle most over even and change this to handle most out. Even we're going to create these two functions in a second, go to the script block function handle most over even whatever course you are going to write in this function will be executed by the Web browser when this even happens, because this matter will be invoked when this even happens now to access the paragraph. Inside this function, the easiest and the best way is to passing this. This points to the current object. Everything in JavaScript is an object, so whenever the handle most over even is being in walked on which our object it is being called. This is an inbuilt object in JavaScript, which points to that current object. So using this weekend past the current element or the object to the JavaScript function, and here we can receive it using any argument or variable, let's say X save it inside the function. No, we can access the paragraph using X because X points to the paragraph element be. Let's change a style off the paragraph. Extort style door color is equal to within double courts. Red X start style dot background color. See capital is equal to within double courts. Let's say hello. Save it now. Create another function copy dysfunction based it to handle on most out. Even change this to why you can leave it as X because X is local dysfunction. You can have the same name in another function or just to differentiate. Use white Why dart style. Dark color is a cordial exchanges toe. Look on. Why don't styled or background color for the paragraph will be blue, so we're using different colors when the handle most over even happens on on handle. Most out even. Also, we need to pass this. This points to the paragraph again. The current element being processed. Save it. Go to the Web browser by opening your on most over more more. Cf Dart his Tiemann. Right now there are no effect Snow styles point your cursor and it changes. The contents are red and the background color is yellow, because that is what we have asked the browser to do by defining dysfunction. Contention. Go read on the background colors. Return hello, and we place our most cursor on it and remove the Carson and the changes to the background Color is blue on the text calories. Hello. You can also access the HIST email contents off this paragraph from it in you were JavaScript function using extort in there? Html This property use you the history malcontents off a particular objects you can change it. Using is equal to most over. We're changing the contents, which are currently most over slash most out to most over copy it basted inside of the second function changes from X to y and in the content itself to house out. Go back to the Web rose. There are fresh. As soon as you point your cursor, it changes to most over and move your castor out changes to most out. So in this lecture, how learned quite a few things? The first thing is how to handle the hits team. The Dallas trip evens that happened on a hits Tiemann using your own custom JavaScript functions. It also learned about that this keyword in Java, which points to the current HTML object or element on which we are in walking the JavaScript function. If you pass it to a function, we can use that and manipulate the contents off it or retrieve the contents off it. In this case, we have changed the background colors and also you have retreated the inner hitched Yemen and changed its contents by using the inner HTML property, which is available to every history and metal object in JavaScript 39. OnClick Hands On 1: When a user holds the left most button it releases it, it is called a Most click in this lecture will learn how to handle the most click event. You're going to create a calculator program in the process. You are going to learn how to retrieve the values off. HTML. Form fields from within a JavaScript function. Go to the editor, copy the previous program, create new file basted, clean up the script block as well as the body change the title. Do on Click within the script block. We'll get there. But before that, create a hitched animal form. Name it as Calcutta form because we're going to create a calculator. Close the form. We need a form because we want the end user toe. Enter some values to numbers. Number one is the 1st 1 Input type is equal to next. Onda name is equal to num one. Close it right there are their lane break as well. Copy that line and paste it four times. The 2nd 1 changed the label to number two on the name to number two. 3rd 1 is the result. You want to display the result. First, you will calculate the sum off these two numbers in this lecture will perform only the addition in the next lecture. Real Enhance our calculator program to perform subtraction, Multiplication division and Marvelous. This is the result. So name it as result, and the last one we don't need a label for it. Type is button, and the user clicks on this button. We want to perform the higher operation. Save it as on flick dot html. Open it in your Web, Rosa. It's going to have to numbers. Give the addition button label Our value value is equal to within. Double. Courts are Go back to the lab. Rosa Refresh. You see the add button. So when the user clicks on this Burton, once he enters the two numbers and clicks on it, we need to calculate the sum and display it. In this result text box. Go back. So on the button we need to handle on click event and create a function called calculate. This function will be called when the user clicks on this button. Create this function in the JavaScript block function, calculate to retrieve their text fields within the form from within. Our JavaScript function will use document dot Use the form name talc form dot the feel name . It's very hierarchical dot value. If you want to recruit the value of a particular field, which the user enters, you use the dot value property. This, by default, is string or text, so you need to convert it into MPCA, using the parts in method, because we want to calculate the sum off two numbers where X ascended to a variable. Similarly, where y is equal to parts int document dot Kalac form dot numb to dart value. Once we get both the numbers, the next is to retrieve the result or get a hold off the result field where Z or zed is equality document dot cal form dot result. I don't need the value we're going toe. Assign it. Value z dot value is equal to X. Plus. Why calculate the sum and put it into the sea text box, which is pointing to the result. Save it. Go to your Web Rosa Refresh. Enter 10 and 20. Click on the add button and the result. These 30. So in this lecture you have learned how to use the hitched A JavaScript on click even and handle it and in the process you have also learned how to access the HTML form fields using document art, form named or the feeling. And if you want the value, we can use the dot value. 40. OnClick Hands On Part 2: in this lecture will work on the rest off the requirement for our use case that is to perform subtraction, multiplication division and more journalists as well. Copy this button and paste it four times so that the end user will be able to perform all the operations starting with sub for subtraction, model for multiplication do for division and finally more for more delis. Save it inside the calculate function in order for us to know which button the user has clicked. If you go back to the Broza, the fresh Now you have four buttons here You can delete the BR line break at the end so that we'll have them all in one single line. Save it. Refresh the browser. We have five buttons in our JavaScript function. We need to know which particular button the user has clicked. That is where that this will come into picture again. This is very powerful. So use the discover. This points to this particular button when the user clicks this button and this is pass it to the calculate function assigned itto variable called a Can you whatever name you want, You can call it part conflict as well and passed this everywhere. Whenever Catholic gets called, if you pass this, that particular button will be passed and then we can use conditionally. If a dot value is equal to within double cords ID, then we'll perform addition, conditionally, similarly else. If a thought value, nobody quotes, sub perform, subtraction and so on. So copy this else if based it a couple of times model do. And finally we can use else else we can perform the model s operation. So move this edition control X pasted inside the if block habit to formatted correctly basted inside the L C four subtraction multiplication division and finally inside the else block as well and changed the operators to x minus way Next are by for multiplication x slash y for division and finally x person teach y for marvelous. So we're conditionally performing the operations based on the value off the button that user clicks. We're receiving the button that the user is clicking using that this key word on the reference variable which points to the current object on which the even is being raised and we are assigning the result toe the z dot value. It should be going to the text field called Result. So go back to the Broza Refresh and their two numbers 20 and 10. Click on subtraction. The result is 10 20 and 10. If you perform multiplication, the result is 200. Division result is too model s. The result is zero. 41. onchange switch background color: the unchanging event is triggered. Havana change occurs. Typically, we use this on a hitch. TML Salik box or the combo box Work on an example. Create a new file. Grab the script from the Leo one. Paste it cleaning up. Delete everything inside the body on the script. Change that I will do on change. Create a select inside the body his Deimel Select with options, which will allow that user to select colors and using those colors. You're going to change the background off the entire document option value. Let the 1st 1 B blank select any color are simply select. Okay, color slash option. That's option one can copy paste this three more times at the value. The 1st 1 blue The text is also blue. Be capital. All right, Andi Finally green. Save it on change Norte. Html is the name, and we involved the JavaScript that will handle this on change, even on the select box on changes, the event is equal to within double course. Handled on change even is the function. Go to the script block function, handle on change. Even always, Capital sees Cap Italy's capital. It's just a convention. It's up to you. If you want all lower case, you can use that as well and within the body. I want to change the background color off the document in the browser, and I user picks the color to do that. Well, how? Toe pass which color guard choosed and you know how to do that Using this If you pass this , this points to the current object that is selected. There is the current option that is selected, but to get the value off it, you can do at this door value pass it as a parameter to dysfunction. So this dark value here points to whichever the user selects in the Web browser that value will be best. So based on that value, we're going to say document dot BG Color is the quality O X, Save it. Open this in the Bab Rosa events on click on Change. It is the Selic box that we maximize that for you or zoom in for you. Select a color that's the first option selected Blue It didn't change. That means there is some problem with the court. Go back. Should be BGC capital color. Save it. Come back. Refresh the page Select blue. Now the bag drone becomes blue. So you're handling the own change even on depending on the color the user selects, you are changing the background off over document. 42. Onchange switch website: in this lecture, you are going to use the on change event to go to a particular website. They use their selects copy. This create a new file bested only changed the select box. You can leave everything else as it is. Select a website instead of blue. It's had it. The period disrupts hate. That is my website. The value will be the You are all city P colon toe forward slashes www dot but the purity dot com The next Web site you can use google dot com. Our Google and the Valley will be history. T P colon to forward slashes. Www dot google dot com Save it as on change website. Not his Deimel. And here the function we're going to change. Document RBZ color. Cut it off that line. We want to switch the browser location so window points to the Broza Dart Location is equal to X which our website they use the tooth. This it will be a past. This door valley will be passed to this function. So the websites you are all will be passed which are selected and we're switching that by pointing it to we know dark location to that particular location. Get it off this green. Two options are enough. If you want to add 1/3 1 who are welcome to do that documents JavaScript evens on change website dot html. Open that in the browser. Let me zoom in for you selective website, but at the purity and it will goto. Www dot Paraty purity dot com Very will find many talks hand tutorials off mine. Go back, select Google. And this time it will goto google dot com. In the next lecture, you are going to switch the images, the background, the majors using the own change event. 43. Onchange switch background images: in this lecture, you are going to switch the background image off or document based on the amazed that user picks were going to provide three images to the user. So go ahead and create a folder under a word, documents our script evens, create a folder called Images and put any three images inside it. How put Maybe in Dart J P C Web services Store J P T and excessively dot jp Z, which are all my courses on your enemy. You can put whatever it may just you want into this four. Learn. We're going to use these images in our HTML page dynamically. Create a new hitch TML new file copy over the select box. This time select image. The value will be the name off the file because we'll put in a second the 1st 1 40 images maven. The 2nd 1 is Web Services Copy paste. I need one more option. 3rd 1 is excess ality access. Lt The value images slash You heard pastor and they're part which is related to this file this file Let's save it directly under evens. Name it on change images dart HD a month we are saving this directly under evens and we give the path to the image we have toe give the related path to this file, which is images slash maven door J p G. Similarly, images slash web services dart G PG. The last one images slash access lt thought jpg on the function will change from the Nord Art location is it connects to document not body darts style dot background image is equal to here It gets a little tricky within double courts. You have to use that you are l function which will convert the given you, Worrell or given string into it. You are all I didn't think you a single courts than a double courts happened. One more double courts. We're a pending the value, whatever is passed or passing this valley water or we get this path. So this Worrell function dynamically, so use X right there. So you are upto here within single courts were passing the value on DA then happening it again. So we're closing their single courts right here. What are single Courts were opening for our value for the image. We're closing it right here and then at the end of semi colon. Save it, run it and I'll come back and explain it. If you have any confusions there on change a major start html open that in the Broza zoom in select image I said, like maven on my background, 10 years to my maybe an image. Similarly, if I choose up services it was just a Web services image XLT. It switches to the XLT image. Go back to the editor. So here we are using their document dot bodyguard style Lord background, the maid style. So this we're assigning here you are all from where it needs to pick up the images and dynamically in between to the two Worrell function were passing our image name whatever they use their picks so that it will be upended in between the you are ill and passed in as a parameter to the Worrell function. 44. Onfocus and onblur: the unfocused event is triggered by the Web Rosa. When the user places the cursor on a text field, the UN blur is a posited. That is, it is triggered, and the user moves the cursor away from the text field that's handle these two events. Go to your editor, copy the country's off the last file, create a new file, paste the contents, change the title. Do on focus slash on blur. Clean up the script, Lock on the body, off the history. Emmel inside the body Arda Input type. Next, and start handling the on focus even on on bladder events. Close the text field on focus. We're going to invoke their hand in on focus method that he will create in a second on blur Handle on Blur. These are the two functions you will create in the script. Block function Handle on Focus on Function Handle on Blur within these functions were going to change the color off the front and also the background color off the text whenever these events happen. So let's receive this. We need reference to their text field. This year will point to the text field from which this event is being raised on being handled. He used X or whatever variable we want. Extort style. Lord color. We're changing the style. The color off the text in the text field is equal to within double courts. Red extort style. Daut. Let's see in the background color off the text field back. Good on. See capital color is equal toe. Make it blue save. It has on focus on blur dot html. Copy that two lines based it. In the second function, we're going to some do something similar when it's blurred out where the colors will be blue and red. It's the opposite. Our background color should switch to read when they user most. The cars are out off the text field. Open this file on focus on Blurred Artist email and the Web. Rosa here Is there text field have zoomed it in for you As soon as you place our focus, the cursor, the background changes to blue and whatever I type in, it appears in red because that is what we had. That is how we have handled even. And that is what we want it to happen Now if I take the cuts are out off the text field. Their text should be blue, and the background color should change. To read, go back to the browser, click anywhere else on her Web Rosa and the text. Collagen is too blue and the background changes to read. 45. Keydown and keyup Assignment: the on Kidan. On on key up are the keyboard events. Donkey down is too good when the user holds a particular key on the keyboard on donkey up is triggered when the user leaves the key. The on key press is the combination off on kiddo Nhan on Key up as an assignment, I want you to handle all these three e vents you can copy over the court from the previous one, which is on focus on Blur. Create a text field on when you press a key on the text field. It could be anything on your keyboard. You should handle the on key. Don't first something similar to handle on Focus. You can change the color and the background color. Use different colors for on key. Don't on key up as well as on key press. Handle all the three events for on key presses will. How to create the third function to handle that even 46. Onload print: The next event is the on Lord. Even this even this triggered by the web. Rosa and the complete his team. A document is loaded into the Broza. You're going to handle this event and print the entire document. At least open up the printer dialogue from the Broza Start by creating a new document. A copy over the contents of the previous one. Change the title toe on Lord clean up and within the body. Add some text saying within bold tags printing the document or print this document. The on Lord goes on to the body tag. Once the entire estimate document is loaded, we're going to handle the on Lord which is triggered by the verb Rosa. The history male body will have this even on Lord handle on Lord is the function that you're going to create within the script, Block function, handle on Lord. Within the function, you're going to use Window, which represents the browser in JavaScript. Dark print is the method to print and air document which is loaded into the Broza. Save it on lord sprint dot html. So, in this one you heard them Two things One is you have learned how to handle the on Lord even as well as you are printing the document using window objects, print method upon this in my broza on lord print dot html and immediately as there as soon as the rock meant Lourdes, it will open up the print dialog on. And if I zoom in the doc, men that it is spending is printing this document. That is the content off for file here in Bold and also the title is shown here and today's date as well. I'm not going to print this. You are welcome to do it by changing the settings. Is the print dialog from the Web browser itself? We haven't created this on the flight were just using the printer functionality that is available in the Web. Rosa using window dot print 47. Onload redirect: in this lecture, you direct a page when it is lorded. So you're going to redirect this particle html page to an other website, which is Paraty purity dot com. So copy the conference off this file. Create a new file and in here instead off saying printing this document. Simply say read directing. You can redirect it to whatever website you want. I'm going to read directly to my website. Save it on Lord re direct dot html Teens the title toe on Lord Slash redirect and within the handle on Lord function. Instead, off window door print will be using window dot location. Does he quality? Do his TDP colon to forward slashes leverage? W w dot but the bitter d dot com Save it. Open this in Web Rosa on Lord Redirect artist Yemen and you will see that as soon as it lords. It says it is redirecting and it goes to my website, which is parity parity dot com 48. Set Timeout: In the previous lecture, you have learned how to redirect toe website or to a different page in this one. It will learn how to add some delay before a particular JavaScript function is invoked. That is, if I want dysfunction to be delayed for some time before this redirect happens, then we can use the set time out function which is in bill function in JavaScript. It takes the method name or the function name which we provide on the time in milliseconds dysfunction will read for the amount of time we provide before our function is in. Walked back to the previous example on Lord Redirect. And here I don't want the redirect to happen right away, but to wait for five seconds, so create a new method function, wait for five seconds and changed the name off this method to redirect. And inside the wait for five seconds method he will use set time out, which is in bill function in Javascript and provided two parameters. The first parameter is the name off the method which is redirect comma. I want to wait for three seconds. So 3000 milliseconds on on Lord will have to call wait for five seconds. You can also call it rate for five seconds 100 direct if you want to the matter name. Save it. Go back. Open the onboard redirect anywhere where Broza It opens it. This time it waits for more time. Three more seconds and then it does the redirect. And once it does it, it will go to the website. Anyway. So let me explain the flow for you. As soon as the 60 mile pages loaded, you are in walking. Wait for five seconds matter and the wait for five seconds. Method is using the set time up to which you are passing two parameters. The function that should be in walked, which is redirect on the time for which it should wait before this function is invoked. 49. OnSubmit: the last off. The important evens that you're going to handle is the own submit. Even this even this triggered when the user clicks on the submit button insider html form. In this lecture, we learn about it briefly but in a section later on which is dedicated to form field validations, you will use it a lot. Go to your editor by now you know all the instructions. Copy the country's new file based it seems that title do on submit clean up. Get rid off the horn Lord as well on the body because we're going to use on submit on the hitched email form when the form is submitted We want to handle that using on submit inside the form For now, we'll use only the submit button Input type is equal to submit Close it right there Save it as on Submit your history and month On the form on submit is the even that little girl When the user clicks on the submit button handle on submit creative function in the JavaScript block function handle on submit Simply display alert message. Within this function, you can do whatever you want. You can validate all the form pills for not there are no form fields in year. As I said in a section later on, you will be retrieving all of home feels inside this method, and they will be validating them within double courts. Submitting the form, save it, go and open it in the Web browser. Click on on Submit. Here is the submit button. Quite huge. Click on that and you will see the alert with, say's submitting the form. 50. Strings: string is one of the most used in built Java object types. It is a sequence off characters in this lecture will learn how to create a string on also the various methods and properties that are available under string type. Copy the contents of the last file creating new file basted. Clean up the script block as well as the body. We don't need the body for this particular program. The title. Change it to string Save it by creating a new folder under JavaScript. New folder called Inbuilt Objects are building objects. It's up to you. Create sting dart HTML. But in the script block to define a string who are S is equal to within double courts. Hello World To print the length of the string used document door right Lent Colin Bless s dot length Lee en d d Hitch. So every string is represented within double courts or single courts. It's the sequence off characters on every string in JavaScript has a property called length that tells us the length off the strength. Open this in a Web Rosa go to inbuilt objects Sting, George html and the length these 11 add a line break at the end because we're going to use other methods as well. Br copy this line based it. The next method is the index off matter Index off. Oh, I want to check. What is the index off? Oh, in this string s dot index off. It's a method and not a property within double courts passing the character off. What you want to find the index off? The index always starts from zero. So 0123 and four forties The position off. Go back to the Broza and a fresh and it says index off always for copy pasted again. The next method is last index off index off gives you the first index off off a given character. The last index off method last a capital or capital. So javascript matters. You don't realize that I know that they're camel case. They all start with a lower case letter on. From that point, each word will start with a capital letter. That is camel case. The last index gives the last index off all in the string. Which is this all here? So this is four spaces five, six and seven. So go back to the Broza for fresh in the last index off. Oh, he's seven. It also has several useful methods such as to lawyer case and to uppercase do lawyer case all in one word to a lawyer case L Capital C capital not, oh, simply and walk a start to lower case. No need to pass in any parameters back to the Broza Refresh and you see hello world in lawyer case. Similarly, you can guess the next method which is to upper case which will display everything in uppercase do upper case Save it a fresh and everything is in a per case. There are also some styling matters which we do not use because we use CSS for styling and usually we learn Jack J Query and we'll use CSS to do that. But let me show you display in world you can say a start bold on the contents if you're a fresh will be displayed in world for you but it's not preferred to use the our script for all this. Simply we can use CSS with advancer frameworks like J query One more method document dot All right, replace is very helpful method replace Colin s start replace within double courts. Whatever you want to replace, it could be a string Also. For example, if I want to replace hello comma with Let's say my name parrot, I save it here. We need to use the plus symbol. Go back to the Broza, the fresh and they will see that Hello gets replaced with Barrett. Similar leave and also replace a character instead of replacing the entire string. Let me show you how to replace on single character. I want to replace Hitch Mitt if save it the fresh And now instead of hollow it says cell. Oh well, I want another lane break here. So let's do that. Be odd. Go back to the browser, Refresh and replace. You can also replace a character, not just the complete string. 51. Boolean: The next inbuilt type is the bullion type, which stands for false and true in JavaScript. These values false and cruel, represented by zero and one. It also allows various other values which it will treat as true and false. Let's see what they are copy based. We will start the script block by starting with the bullion she is entitled to bullion within script. Far B one is equal to go to create a new object, use new bullion and so that constructor you can pass eh values zero. That means this is false. Similarly, where B two is equal to new bullion one document dot right b one document dot right b two Save it as bullion dart 60 a month. Open it in ever Broza and the results are false and true. So zero represents false on and one represents drew a red line. Break it the end. Let's see some other values. No. Create B three passing a value off string MP string. Save it and display B three. I had a line break here as well. Copy that Faced it Beat three save Go back to the Broza. A fresh false proved false. So if you pass in empty string. The result will be false use in an Norton number and see what the result of these and capital a small and capital again. James is to before document dark right before plus within double courts. We are fresh, false again. So except for one so far, everything is false. One more. No passing a value. Now be five copy paste this lane, but in B five onto the Broza a fresh even that is false. Let's try as by passing in a string which is not blank. Let me cancel this back B six and passing any string off length, non zero length. Hello. Copy the document dot right lane basted. Print the value off B six back to the Broza and it's true. So if the length of the string is not zero, then it will be true. But if it is zero, if it is a blank here like this, then you see that the result is false. So always remember that one and non zero length string and passed through a Boolean constructor will return a Boolean troop. Everything else nan, now a blank string or length zero string and also zero will return false 52. Math: The next inbuilt type is the math type and, as the name itself say's provides, properties and methods are functions that begin used to perform mathematical operations. Let's see what those properties and operations are. By creating a new file, Copy the contents from bullion. Create new file based. It changed the title to Matt. The very first property is document Dark right, Matt M capital dot by B I get the constant value off by save it. Azmath dart html Open it in your Web Rosa on. The result should be 3.14 and the complete value off bike. So this constant is defined inside this math type, and we can use it wherever it is required in our application. Next, very useful function. Matt bought Squire route. If you want to calculate the Squire wrote off a number used sq rt. That's the function name. Pass it in number and it will calculate the square root for you at a line break so that we can see the results on a new line Copy from Plus all the way to the end based it in the next one as well. Save it. Go to the Rosa refresh and the square root off nineties. Three. We also have a power function how we were the blue, which will calculate the power given and number hundreds exponents to come off. Four. It will raise the exponential exponential. It will raise the value off two by four. The result. He's 16. Matt also offers various rounding off functions such as floor, seal and round. Let's use floor document out right matt dot floor. Pass it a decimal number that's a 3.8 floor always returns the lawyer born, so the result should be three. Use seal C E I l. And this should give up power bone dry 3.2 and it is for our online break it. And in the sealed off 3.2 is four, which always gives the upper bone. Finally use their own method, which will calculate depending on whether the number is less than 0.5, for example, of which 3.2. If you round it off, the result will be three. It will give you the lawyer born, and if it is about 3.5, let's say 3.6. Save it fresh. It will give you the up a bone. So in this lecture you have learned about the math inbuilt type using which you can perform various mathematical operations as well as learning off operations. 53. Arrays: and L. A is a group. Off objects are a collection off objects. We can store different types off objects in an area. It could be number strings, dates, etcetera. For example, here is an array which has three different types in it. Indigent number A string under Bismol point number. There are three different ways in which we can create a race. You will learn those three ways in this lecture on you will learn various useful matters that a rape requires in the next few lectures. What do you readyto copy the last programme? Best it change the title Do at a creation within the script block to create an area where a is equal to use the new operator on that pipe, which is very The new operator is an inbuilt operator in JavaScript used to create objects off a particular type. In this case, it is a rare type on within the brackets. You can initialize the area with values to comma 4.54 or 56 calmer within double courts. Parrot, I'm using my name. You are welcome to put your name there. Once we have an area to display the array use document door, right, You the name of the area. Plus at a line break, save it as a radar STM open this invade Broza in the conference off the A are shown as comma separated values. To find out the length off the area, the egg uses a property called a door length. And this has the length off the area, which should be three. There are three elements in there, so the length is three. To access individual elements, we can do it using the index off each element document dot Right, a off within square brackets, if I want to Access to I will use the index zero. The index always starts from zero. If we access to, we should get 4.56 And if we access one, then you'll get 4.56 And if you give the nexus to, then it will get this string Hey, off zero plus within double courts space. Bless the off one. Plus he off to address space in between so that you can see it clearly on the web. Rosa. Within square brackets, the index should be passed. Go back for a fresh and you will see the three different values here. This time they're not comma separated. They are unusual air ailments. The second way to create an area where B is equal to Instead of using the new operator you conducted deplored the values in a square bracket. Do come a 4.56 comma within double courts. Barrett, save it. Document Not right. Be. And that will display the values off Arabi here. So I had a line. Break it the end off the previous document dot Right? Br if you want to within double courts here you can give a message a B colon just to separate it out plus B and the baby is to point to come a 4.56 and parrot Second Way is to created directly by initializing the area using square brackets the last and final bay where sees equal toe New Eddie. Instead of providing the values directly during creation, you are using the new operator to create a new era. But it is blank and it is created. There are no values in it. It is empty. The prior values you see off zero the index is equal to do see off one is equal to 4.56 and finally see off to is equal. Do within double cords. Barrett copy this. Darkman dot right faced it a c and print or the country itself, see, and their A C once again is to calm a 4.56 comma. Barrett had a line break here. They're fresh. In this lecture, you have learned what arrays are under three different ways in which you can create a raise . It is bypassing the values when you use the new operator statically by using square brackets and providing the values. Third, create an empty array and then initialize that area using the in Texas off there. 54. Concat revers and join Functions: copy the country's off the last file. Create a new file based it, and I'll tell you what you're going to learn in this lecture. Three functions, namely, can Kat Rivers and join that every area has clear the script. Block you the 1st 1 first line, as is creation off an array A and delete everything else. Declare a new era. Be within square brackets. Used different values. 15. Comma 25 defined one more A C is equal to within square brackets. That's a 20 calmer 30 document. Not right. Tokcan coordinate a race or even other elements to a race. We use the concurrent method. For example, a daughter can cat within crackers. You can pass in any values or a race, which you want to concurred in eight. Tow. This particular a passing Be that will can coordinate a B to A are appended, and you can pass in any values. 19. Comma 29 comma B R C. Save it as Harry can, Cat Enjoying and Rivers North, Hasty and Mullah. Very long name. Open it in the web. Rosa and the output is at a eat is concurred in a tid with 15 and 25 because we are using a baby first that gets can coordinated and then 1929 and finally a Raissi's con coordinators . So you see 20 in 30. The next method is the reverse method document dot Right at the line, break a door, rivers The reverse method, as the name itself sees, reverses the every copy. This line break added at the end. Save it first a broza and it diverse sister countries off the Eric. So here you see that, although you know, can coordinated it. If you do not assign it back toe the variable a the value still remains as the old one. So if you want it to have all these were lose here, then it will have to. Assigning to a is equal to when you do that. Then the value off a will change. Do the entire concatenation area and here you can simply display it. Save it back to the browser refresh. Now a becomes the entire new concatenation area and you see the rivers off the tongue coordinated Eric, the next and the last matter you're going to learn in this lecture is the joint method. The joint method Darkman don't write. It allows us to join all the elements off the area with a D limiter in between. For example, if I do a dot join, I can pass in any deal emitter, it could be comma. It could be high fund. Let's use it high fun. See you go back to the Broza, the fresh, and you will see all the elements with high funds in between, You can use any character here. So in this lecture you have learned three important matters Con cat, which can coordinates a race with other rays or even elements. Rivers which reverses Terry and join that joints all the elements off menorah with their given be limited. 55. Delete and replace Functions: the every class offers for more method called the elite method. In this lecture, we learn how to use it on also how to replace an element off an array with different element copy. Change that title do delete, slash Replace. Leave the very first read declaration as it is, we're going to use it. We're document door, right. Display the values off the area so that we can see the conference after deletion line Break br to delete the element of an array used delete matter and you need to tell it which every element you want to delete a off zero I want to delete do from this area to delete space a off zero. Save it as Eddie delete and replace dot html. Now, if we try to access the very first element off the area document dot right a off zero Bless Lyon Break, save it, open it in the Web browser to see the results had a delete and replaced art HTML and our party's undefined. So if you try to access the element that is deleted, he will see undefined because if you display the area one more time after deletion, copy this document or right based it after deletion. Save it. Refresh the browser and you will see that there is something here as the first element. But it is not defined because we got it off it. That is the reason you see it as undefined. To replace an element of an array, simply use the index. For example, I want to replace 4.56 with 5.5. I will use a off cool. I thought the elf one is Equality 5.5. Copy this statement which displays the country's off their pasted the end. Go back to the Broza. They're fresh now 4.56 got replaced with 5.5. 56. Date: the JavaScript date object gives us access to their systems. Date on time. It has very is useful functions, such as two local time that uses the time in string. Formatting to local date. String accuses the date to local string that uses both date and time in string format. And also we can access the individual components off the date and time, using functions such as Get ours, get minutes, get Seconds and many more. Elkana example will be the last script. Create a new file in your editor paste. It Date is the title. Clean up the script block to create a new date where the is equal to use the new operator on the day. Type B capital open and close the brackets document dot right the simply Display the date on the Web. Rosa Save it As Day Dart hits Tiemann, open it in Europe, Broza and it displaced the current date on my machine. I'm recording this video on November 28 at 10:15 a.m. Go back to you. What I did are the paragraph inside the body. Let's do a little more work now that you know how to handle events. Let's put that into action here. I heard a paragraph. Leave it as empty. Give it that I e d is equal to a unique I d did in full. I want to display this date information dynamically from within. JavaScript. I want to operate this paragraph with the current date information. So put this inside. A function function display date is where or date creation and everything will go delete this line Where were writing it to the Broza To access this paragraph from within our function we use the door. Maybe I he will learn more about dominate future section It's very simple document dot Get element by idee ease capital, bees, capital and I use capital within brackets within double courts past this I d on We can access the paragraph object dot to manipulate the html in a h T m l all capital is equal to I'm ascending the date to it. We're creating a date on dynamically We're assigning it toe It's TML tag which is the paragraph back. I want to invoke this function right when the document is lorded To do that, we lose the on Lord even on the history My body is equal to within double courts. Display who Deep save it, Go back to the lab. Rosa Refresh. You will still still see the date, but this time it's not using document dot right. But we are dynamically updating this particular paragraph. You can also add some fixed here. Current date colon we are. You can display the date in a new line, refresh the page current date and then it displaced the date. Information dynamically. If you refresh the page, it gets operated. If you look at the time, the second spot, especially now it's 10 18 fresh again. Extend 06 In the next lecture, I will show you how toe keep updating this dynamically. You need not refresh the page. I will show you how to do that. Let's let's try a couple more matters here instead, off displaying the complete did. You can also display partially where X is equal to the dot local do blow. Can time string just that I am portion. This method or function returns is the time part. So here, instead, office saying that B s I an X, save it, go back refresh and displaced just the current time. Similarly, yet local. Or let me copy paste this comment the previous one so that you can come back and revisit that. If you want to add a point later on, changed this time too. Date be capital. Save it. That will give you just a time portion, and if you want both simply remove that date. Come in this as well based. Remove their time and it returns the complete date and time in string format. You see both date and time separated with the comma. So in this lecture you have learned how to create a date, and then you also learn how to dynamically displayed within a paragraph and also a few methods, such as two local time string to local date string and to local strength. 57. SetInterval method: in this lecture, you will learn how to continuously update this time on the web. Rosa, That is how toe continously in work this display date matter in our script create a new function. Call it continuous display. You have already learned and use it the set time out method which in walks a particular matter only once That is once that given time period experts it invokes that method in this lecture will use the set interval Another inbuilt method or function in javascript which will in work a particular method continuously display date is the method I want to be in walked comma every second you give the time period how frequently you want to invoke this matter for me? I want to invoke this display date I want to display the day details every second So I'm passing in 1000 milliseconds. Save it and we need being walked there continues Display mattered when the document is loaded So change that matter Call on Lord I'm in walking Cantonese display which in turn in works displayed eight every second continuously back to the Web browser refreshed this page and now you will see that the seconds they keep updating. And after it reaches the 59 60 the minutes will also be updated. The city development there it will stop by in walking. The stop Intrav Elementary are clear. Interval method clear in Devon within our script are by closing the web. Rosa, close it. If I come back, open it again. It will. Lord, there I am again in the current time is 10 34 and keeps operating the seconds every one second. 58. Error Handling and Debugging Introduction: There are two types off errors in JavaScript. Syntax errors on run time errors. The syntax errors happen when we screw up the JavaScript syntax, for example. Here I haven't closed their double courts is one example where we'll see a syntax error, even if I remove one off the brackets. That is also wrong syntax, which will result in a syntax error. The run time errors, as the name itself says they happen at run time. For example, if you try to invoke a function that doesn't even exist, then that's a runtime error. Our script uses a way to handle run time errors using a pry block within, which will put all the cord, which might cause a runtime exception. And they will handle that error. In JavaScript, we use the term error instead. Off an exception, we handle that error within a catch, block our script, perhaps the error inside an object, and it hands it over to the catch block. Using that object, you can know what that batteries by using the object dot message property that seed in action by creating a program, a new copy or the earlier script clean up. You don't need the on lord event being up the body as well. Change this to and, uh, handling within the script block ID. I'm trying to invoke a method which doesn't even exist. Add two numbers. Save it within a different folder. Under JavaScript. Create a new folder called Error Handling Error Dart html. Open this You never broza her handling and Earnhardt html and you don't see anything here. But if you want to look at JavaScript errors, it will have to go to the dollop of you. Go to view developer, developer tools or directly to JavaScript console. You can also hit F call button on your machine, and they will go to this view and you click on the console tab and you see the error it say's uncaught reference. Error at two number is not defined, so our program will terminate right there. If I are there, document dot Right after this within double courts after the error, this will never execute. Go back to the Broza Refresh. You don't see anything on the web, Rosa, because wherever the error happens, the program will stop right there to handle it. Use All right, flower racket. Drop that function which our is causing the error within the right catch. We'll be jail document dot right o b j. Dot Message is the property that will tell us Water Airy's and that it happens. The JavaScript engine will wrap that error inside an object and it will hand it over to the catch block. Save it. Go back to the Broza, the fresh. Now you see that at two number is not defined. That message is coming from our catch block and it also executes the court after the catch block, which is after the error. If I put a line break here, it will be much more clear for you. B r right after the message in the catch block arda line break, Save it. Go back to the browser. Refresh. Now you don't see any others on the console because we are handling it using pre catch it displays the message. And then whatever court we put after the catch block will be executed by the JavaScript engine. So, in real name programs, if there are, if there is any court that you are writing that might cause an exception, it could be connecting to a server connecting to a database or whatever. You put it inside a try catch block. And if an exception happens, we will write that exception to the browser R to the console, as it will learn later on. And the rest of the program will continue executing. If you don't handle it using pre catch, as you have seen earlier, your program will terminate right there. 59. Throwing Custom Errors: in the previous lecture, you have learned how to handle run time errors in this one. It will learn how to throw your own errors from your program and handle them. JavaScript gives us that throw keyword, using which we can throw our own custom errors. The other itself could be a string message, an object off any type as well. We're going to work on a program which will validate the age off a given percent to check if he is eligible to work or not. It is a Z is equal to or greater than 18. Then he's eligible. If not, we'll throw a exception. Create a new file copy over the error dot html. Content. Throw is the title. Delete everything in the script block. Add some hissed email fields. Input type is equality. Next, give it an idea. Is Equality age? You're going to ask the end user to enter his age? We gave it already so that we can access this field as an object from within our JavaScript . Later on. Second, a button where the user can click import type sequel to Button on Click is the even validate Age is the function we are going to write close the Barton type and finally are a paragraph as well. This is where we're going to display the error message dynamically from within. Our JavaScript idea is equal to better in four. Close the paragraph within the script create the function Valley date age. This will be called when the user clicks the Barton dry. You're going to put everything inside the try block by block should have a catch at the end . Catch O B J. We'll handle it in a second within the try block. Start courting where X is equal to documented Ought get element by i d. Get the h. We're getting this age here dot Value will give their value that the user enters into this text field. Once we have it, we can start our validations if age. What if X You can call this X age as well. If age double equals blank, if they use it does not enter anything, then we'll throw an exception within double courts. A string message. Age cannot be MP else. If are, we can do else if if age is less than 18 through another exception, the message to think to port. Save it as throw dot html. So here we are using that throw keyword to throw our own exceptions based on some validations and in the catch block. Whenever there is an exception, the JavaScript engine will take this exception, which are we are growing on repeal. Pass it into this object to the catch block so we can access it inside a catch block using O B G document. I want to write this string What are were throwing when it's handled into the paragraph in our HTML document dot get element by I. D. 90 Off the paragraph is era in full use that dark inner hiss TML history. Mali's capital is equal to four b j and simply assigning the other message. Do the paragraph Save it open that throws dart html error handling throws or throw dart html in your Web Rosa. Here is the button. Let's give the butternut value Value is equal to validate, and that will show up on the button under age. Say 12. Click on validate and you see the error messages to and to vote. Let's leave it as a blank click on Validate Age cannot be empty, so validation is kicking in and it is throwing an exception using the throw keeper. We're handling it and we're displaying the error on the we're brother inside the paragraph . Typically, in real time applications, you will be writing this to log or to the council, which I'll show you later on. 60. Finally : the last piece in JavaScript. Error handling is the finally block try. Block is accompanied by either a catch block or it can just have a finally block. Or it can help both a catch. And finally, whatever court you right in the finally block will be executed when there is an exception or error, or even when there is no error at all. So if you want to put any court that cleans up your resources, for example, if you are opening a connection to a particular server, and if you want to close that connection than, finally is a good place to put that court because it will be always executed. Even when there is an exception, it will be executed. Even when there is no exception, it will be executed. Let's copy paste this line to prove that finally gets executed. Always. All right, another product it off in the body. Call it finally, in four and in here in the finally block, we'll update the finally in four. It some fixed, seeing inside. Finally save it. Go back to the Broza at a fresh that's enter a valued value 19 pecan validate. It stays inside. Finally, Now when there is an ex when there is no exception, the finally block court executed. We don't have any errors here. We're not throwing it because the eighties 19 It's okay, Let's make it blank. Click on validated. Now you see, there is that error it displaced. The age cannot be empty. And our message So the catch got executed. This particle catch here and then the finally gets executed again. So always remember that the finally block gets executed always and it is a good place to clean up. Any resource is that you might be using anywhere program. 61. Debugging: In this lecture you will learn how to debug JavaScript program from within the Broza Copy the old script, Create a new file and then I'll explaining what debugging is on how to do it from the Crumble Broza clean up their script and also the body off the history Emel change title to debugging within the script block define a variable X is equal to 20. Display the variable document or right X copy paste these two lanes. If I unavailable, why is equal to 30 in the value too? Why save it as debugging thought STM month So debugging is a great way to know how our program is behaving at run time. And also, if something is going wrong in the program, if the results are not as expected as a developer will go to the Web rose a debug and seed line by line. What exactly is going wrong? Open this debugging north estimate in the Vab Rosa Right now it prints output 20 and 30. You can add a line break if you want to express within double cords we are save it and a fresh and you will see those two in different lanes toe D back. If you are on windows, click after well, even on the market. Steph, call button. Are you can right? Click se inspect and go toe sources Tab, click on the source of stab, not the console to D back. Let me scroll this up. If you select the debugging nor his team will you can see the entire HTML here you can place a break point break point is very Want to stop the program? Execution? Let me place a break point right on this line where y is equal to 30 They're fresh the page and they will see that it prints 20 which is this line here is doing this printing and then it will stop at this particular attack line because I have a break point. So at this point, I can verify If I point my closer to X, it will show me that the value off axis 20. So when you are developing complex JavaScript applications, you can be but and see what the values off different objects are on what's going wrong or how we our your application is behaving. So to continue you click on this regime script, execution and then the program will continue and it will execute the rest off the line so you can have any number off break points you want. I can place a break point right here as well. Now I have to break forints. You're fresh and the execution is right here. And you see that both are gone and nothing has been displayed yet. There are multiple buttons you can play around with, Click on the regime and it'll exclude this statement. And then it will stop at the next to break point again Resumed the script execution and it is completed. So in this lecture you have learned how to debug JavaScript from within a crowbar. Broza, by going to the sources, stab once you click. After all, this console opens up and you go to the source of stab and you place break points and d But 62. HTML DOM Introduction: Dom stands for document Object mortal. The document is the History Mel document that is loaded into memory and the entire hits Demon document is represented as objects the history, Emel body and any other packs that we use inside. It will be represented as objects and we can access all the history Emel elements and its attributes from within our JavaScript court using the dom AP I the application programmers interface provided by JavaScript. So we have several inbuilt objects and matters on them are functions on them using which we can access the elements and attributes as well as the styling information off four html from within our towers pipped court and also we can create, replace and remove them dynamically from JavaScript. For example, document dot get element by I. D. Dysfunction on the document object will return you a particular HTML element by using its unique I d that big you do it Similarly, we can also get an element bite tag, name a text field, for example. If we have a name for my text, you can retrieve it using get element by tag name another matter. We can also get the element using its style by using get element by class name. In the next few lectures, you're going to explore all the dorm functions, toe access, the history, animal elements, attributes as well as by using its styling information. 63. Acess HTML: in this luxury will learn how to access and manipulate the HTML. Attribute values from within. JavaScript using their JavaScript dorm FBI To do that, copy the last programme. Create a new file based it. Clean up Diddley's Dom Colon. It's TML. Save it. As HTML attributes, Lord hissed Hymel create a new package instead. Offs having it under her handling. JavaScript New folder Dom JavaScript, Dom and hits TML attribute. Values were going to change their values off their tributes. Save it. Create a couple off fields or tax inside the body off the history Emel paragraph Islay is equality. Give it an I d para one. The value can put your name in here Close the paragraph The second feel added image image Give it an idea as well. I am t one on a serc is equal to you Need some images here so you can go back to the early a program where we user some images which is under evens Grab the majors from the Majors folder Come back to Dom based then we just need to off them How copied all three point the SRC to one up them. I'm going to use maybe in, which is my latest course, Maybe in dot J p. G. Save it and close the attack right there. Open this page in the Bab Rosa STM Electable value stored his demon right now you see, parrot and then the image we're going toe She's the alignment off this Barrett so that it will be in the center and also switch this image dynamically from within. Over Javascript Back to the script within the script block, create a function which will call on Lord off the speeds function Name it handle hits de Hemel within the script document dot Get element We have been using this method for quite some time now. Element by i d passing the I d which is a bad one toe change the alignment you use the ally in method available to every javascript object that represents a HTML align is equal to within double courts. I wanted to be at the centre off the browser or the screen, so center alignment. Similarly, I want to switch this image Source bana McCoury document dot Get element by i d The idea off the images I am G one dot s r c is the property is equal to instead off mainland or J p . C. I want to use xlt dot jpg excess kulti dark jpg semi colon. Save it. Invoked dysfunction on Lord off the body handle H T m l is the javascript function. Saved the page. Well, back to you out of Rose there, referee Shit Andi will see. But are your name appearing at the center off the Broza and image has switched. Although we are using Miranda or deputy in the HTML when the page Lords, we are dynamically switching it to exercise the dot jpg 64. Access Styling Information: using their document object mortal. We can also apply styling to our hits. TML elements dynamically to do that copy or the last file. New file based it. You can call it Dom hits tm dom CSS are dom. It's styling saying this matter named to handle CSS, which stands for cascading style sheets. Get it off the second line here. We're not going to use any images in this particular script. James Dysfunction named to handle CSS to change the style off this particular paragraph. This parrot here is very boring, so let's change it to you. Are the creator off your destiny? We'll stop. Save it as styles dot html, we're going to manipulate the styles from within. JavaScript. The document Dark get element by I. D. Called the paragraph instead, off a line To assign some styling information, you use the style property on a history mel object dot Whatever style we want to manipulate color, for example, a sign dread. This will be the forint color off this particular paragraph. Whatever text goes into it, the color off it will be read when the pages lorded. Similarly document dot get element by i D in double courts one dot i want to change the background color off this paragraph as well. Style dot back good on See, capital color is equal to a look. Save it. Open this style store Tasty Emelin of a broza and output background color off The paragraph is yellow on the foreign color is red 65. EventListener: in this lecture will learn how to dynamically add events are halted dynamically handled events by using even listeners get started by copying the contents. New file based It seems that I tell to Dom even and even listener, or is the nurse is the matter Name to handle event Clean it up. Remove the paragraph All we need is a input pipe button I is a quality Martin Value is equal to like me and give it the i d so that we can access it from a water dom or JavaScript Elise Equal Do Martin one save it as even start HTML and River Don folder. This handle even method is not being called anywhere. We're going to get it off the on Lord as well. And I will show you how to handle these events dynamically inside the handle. Even access the button document dot Get element by i d. Passing the idea it is, But on one once we have the button dot I'll even listener is there method which allows us to add even listeners dynamically fasten they even that you want to handle what is a click event comma the function that should be called handle button Click. This function doesn't even exist yet will have to create it. Close the bracket. Save it. Within this function, you can create another function. There's the beauty off JavaScript function handled button. Click. So when the button is clicked, simply alert. Click u. N Save It So So far, what we have done is we are dynamically access the battlefield from within the JavaScript on we have assigned it even listener, which takes the even that needs to be handled on the method that needs to be called. When that even happens, we're able to dynamically ascena, he went well are we are able to dynamically handle a U. N. But the handle evened itself is not being called anywhere. We can also assign that dynamically by using window, which is the broza dot id. Even listener we know dot aren't even listener on Lord, I want the handle event to be involved. Save it, open this from within the browser and I will explain you what's going on in the background events start his TML. All you see is a button in here. Click on it and you see the alert with say's click event what exactly happened here. As soon as the page lures this particular line, he's executed, which will tie the on Lord even with the handle event method. So the browser knows when the pages lorded. It should invoke the handle event. So once the HTML is loaded into memory, once the button is in place, this method will be invoked. Inside this method we are tying. The Parton are We are assigning even listener for the button. Even which is click and the matter we want to be invoked is handle, button click. And when we click the button, the browser in walks, this particular function, which we have created which will alert saying click event. 66. Remove NODES: the JavaScript door. Maybe a represents the entire history Immel document as nodes In this lecture, you are going to learn how to dynamically create hitch Tiemann Lords, as well as remove the north from within our JavaScript functions Create a new file copy or the continent changed the title to Dom. Create and remove Lords clean up the script block as well as the hits TML created. Do tack in the history Emel Within the do we're going to have two paragraphs be idee is equal to B one. All the power is within you close the paragraph The second paragraph Islay is equal to be. Do you can do anything and everything? Who was the bad? I get off. Save it as north's dot html because we are manipulating the HTML lords are elements from within JavaScript outside the do at two buttons start with one input type is equal to Barton Value is equal toe removed. So when this button is clicked by, the user will be removing one off These paragraphs dynamically from JavaScript on click is the even We want to handle handle removed Go to the script Block function handle removed to access the people or to access the parent. We need to give it an i. D. I D is equal to do one. That b is equality. Our call it parent, where parent is equal to document dot get element by i d. Passing the I D, which is due one. To access the jail element. Let's delete P two from here, where shale is equal to document dot get element by i d big toe. To remove the child we use parent dot removed. Chilled is the function. See capital and passing the chilled that we want to remove. Save it. Open this north start html in the Web. Rosa maximize. You see two paragraphs here in the remove button. Click on it on the second paragraph is gone. That made a finish it again. The moon on the 2nd 1 is gone. You can change the court to remove the first paragraph instead of the 2nd 1 by simply switching from Peter to people inside your function, Go back to the Broza Refresh. Now the first paragraph is gone. In the next lecture will learn how to dynamically add a new paragraph 67. Create a Node: in the previous lecture, you have learned how to remove element using the door. Maybe I in this one it will create element dynamically to do that Copy this button based. It changed the value to create and change the matter. To handle, create copy or dysfunction based it change it to handle create. We're going to create a new paragraph from within our JavaScript. We need to first get the parent element, which is due one, because under it, we're going to add a new chain element are chilled, is equal to document dot Create element use that create element function to create a new element. And we weren't a paragraph so passing beat depending on the type of element we want to create, it will pass it here now create a text element so that we can assign some text to tow this paragraph document dot Create fixed Nord is the function bath at some value I am new in here Full stop how to upend this text nor to this to jail element or the paragraph we use Chill dot Happened chilled Next everything in the escape door Maybe I is it north. So we have created a chill. Nor then we have created a text. Nor now we are assigning that text, nor, as a chilled to the chill Norwich is paragraph. Next, we'll have to assign this sale, nor, as a chilled to the parent, do tack. So instead of a parent or removed chilled, we use parent dot upend chilled and add the new paragraph to the do tack. Save it. Go back to the Web, Rosa Refresh. Now we see two buttons Click on Create and you see the new line getting upended dynamically . If I hit it again, one more new land will be at it. 68. Insert and Replace Child Elements: the previous lecture, you have learned how to create a new hits TML element dynamically on appended at the end, off the jail elements off a particle apparent in this lecture will learn how to insert it before another jail element, and also how to replace an existing child element with the new element. Go back to your text editor, comment out the parent startup and chilled. We're not going to upend the child. Instead, we're going to insert it before another child. To do that, we need access the one off the chilled element. I want to insert it. Let's say in between p one and p two. Then I'll have to get the Pito object to do that. Where we do is equal to document, not get element by i e. D Pass in the I D, which is Pito. Once a happy to a canoes parent, which is the do tack Do you want Bette and dot Insect before is the method that we should be using for the function passing the element which we want to add. The element we want to add is the tail element which you have already created, which is a new paragraph, which says, I am new in here. Last deck on the second parameter is the element before which you want to insert this new change element that is, be Do I want it before B two In the HTML, go back to the Broza. Refresh the page. Click on, Create on. Now. If you see the new element is being inserted between P one and P two, it create again and other element is inserted between P one and P. Two. Go back to replace an existing element with the new element. Common taught this one as well. You can add a new button called Replace, but I'm going to reuse the same create button to the monster this parent dot replace chilled. I want to replace Pito with the new element. Be too, should be replaced with I'm new in here To do that. Use the replacement there. Pass in there chilled neutral element comma Pito, the element to be replaced. Save it, go back. Refresh. Now we have two paragraphs a year inside the do when I hit create. The second paragraph is being replaced with the new chilled, which we are creating dynamically inside our javascript So in this lecture you have learned to new methods insert before which inserts a given chilled before a particular element which we specify, and replace jail, which replaces a particular element which is already there in the Hiss team, along with the new jail element. 69. Set and Remove Attributes: using the door. Maybe I weaken dynamically. Add on the remove the attributes on a particle HTML element. For example, let's on and attribute, called a line on the paragraph to align is equal to write. Right now, this element is on the left side off your brother. If you refresh the screen, it will move the words right to remove it dynamically from our JavaScript. Commend this. Replace jailed. We're going to use the same create button, but they are actually removing the child to remove a child on a particular element. We need to first access that element, which is Peter. We already have it be to dot the move at tribute because that attribute is on the Peter Element within brackets past the name off their to beauty. Want to remove a line? Save it? Go back to the lab. Rosa. The fresh. Now the element is still on the right side. If you click on this create button, it should remove it. Click on the element is moved to the left because the alignment the right alignment, he's removed. Similarly, if you want to add an attribute dynamically, let's say we want to ally in the p one to center. First we need to access it where B one is equality document daughter Get element by I e. D. It didn't double courts be one p one thought set attributes. We had to pass the name and the Value Alliance is the name comma. Value is center center alignment. Save it. I'm commenting about the P two. Don't remove attribute. Go back to the Broza. Refresh it. B two is on the right. That's OK, but if you click on create now, P one is more towards the center. So in this lecture you have learned to important matters. Removing their tributes by using remove, attribute and also sedately were to set a new tribute name and value on a history my element dynamically. 70. BOM Introduction: the browser object mortal gooses access to the different functionality that is available in the Web browser in the form off objects. The brother itself is represented as the window object in JavaScript, and you have already been using different functions on the window. Objects such as alert, conform and prompt for pop ups, set time art and set interval to invoke either matters on a timely basis or a timely fashion and also a location object. You have used this when you work with the own change, even to switch from one location to another interval. Broza. The location object is a chilled object off the window object. You're going to learn few other child objects that are screen history and navigator in the next few lectures. Using window dot is optional. You can directly use these objects and access the functionality that is available in them. The brother object Mortal is not a part off the JavaScript standard, and it is up to the Web browser to provide support for it. And these names can be different in different Web browsers. But most of the brothers support the same naming convention, which you are going to learn in the next few lectures 71. Screen : in this lecture will learn how to use the window dot screen. Object that seat inaction by creating a new file. It's going to be a very small script. Clean up the hits TML body as well as the script. That title is Scream. It allows us to get the properties off this cream on our machine document dot right window dot screen dot wit The Victor Horse screen What the Web Rosa Less. Give a space or a comma in between window dot screen dot height, height off or screen. Save it in a new package or a new folder under JavaScript. New folder Bomb, Roeser Optic Mortal screen door HTML. Open it in Web rose or by going to bomb screen dot html, and the result is 1 to 80 by 7 20 That is my screen resolution with, and then the height 72. History : and we navigate from one place to another in ever. Broza. The Web browser maintains the entire history, the browsing history and using the forward and the bag buttons on the left top corner. We can go back or go forward for kick on the back button. It will go to the previous page. If I click on the forward, it will go to the next one. In this lecture will learn how to simulate or access this browser history, the back and forward from it. In JavaScript, the history object on the window object allows us to navigate forward and back using window dot history dot forward. We can go forward and using the Nord Art history dart back. We can go backward to the previous speech, go to the editor, copy the last script. We're going to create two hits Deimel files so that we can aggregate from the first HTML to the second HTML, and then we can start using the forward and backward functionality. Change this to log in. Simply give it a meaningful name believed everything. Inside the script, Logan will help to things a hitch ref so that the user clicks on this link and he will go to the next page. Call it home dot html. That's the page we want. They used to go to home. It's last day and also are the button input type is equal to, but then value is equal to forward on click is equal. To handle forward, close it in the script block. Create a function called handle forward in the body. Off the function you will use window dot history dot forward. This window dot, as I mentioned earlier, is optional. You can directly use history as well. Save it under bomb as logging dot It's demon. Now we should create the home dot html. Copy this. Create a new file based it title is home and handle back from this page. The user wants to go back. We're going to use the we no doubt history dart back. We don't need hits it off here, changing this button to back and dysfunction to handle back. Save it as home dark. It's Tiemann, so we have created to historical documents. First, we'll open the first HTML endeavor. Broza. The user clicks on the link. Then he goes to that home, not his TML from within that if we click the back button, we should be going back to the logging Dart hits TML and then if we click the forward but and we should go back to the home dot hits TML, let's open log in dot html in the Web. Rosa, let me zoom it in for you. Click on the Homelink, not the Father button, because at this point we do not have any history. If you see these two buttons here are disabled so we can't use forward click home that will take you to the home dot It's TML, which has a bag. But at this point, if you see even the brothers back button is enabled, click on the back button here, and that will go back to the previous space. Because we have used indoor dot history dot back in the back button is clicked. Now I can use the forward button If you see the brothers Forward Button is also enabled because it has some history, like on forward, it goes back to the whom not pay html 73. Navigator : the last object in the browser object. Mortal is the navigator object. Using it, we can get all the browser information such as the APP name or the browser name app core name cookie enabled. We can also know whether cookies are enable or not more about cookies in lectures later on . So let's see how to use Navigator and get some brother information. Go to you already there. Copy the last one new file. Seems that I told you, navigator, clean it up. We don't need any his team. Abadi directly. We're going to write out some properties off. Broza document dot Right AP name. Bless Navigator, not AP and Capital name. Using window is optional. Save it as navigator dot html and River Bomb Folder and open it in a Web Rosa and it stays app. Name. Netscape. Let's add some space. All the recent brother Russians. They use the same app. Corn, Netscape, the older versions. They have their own specific AP names, but now they use this tender core Netscape from Netscape. Copy this entire line based it AP Cord name. See Capital and then capital. A fresh AP court name changes to app Core name and add a new line at the end of the 1st 1 B r slash Save it. Refresh up. Poor name is Mozilla. You can try it in other brothers as well at the BR to the second Dr Men Don't right coffee based it one more time. We'll see if cookies are enable or disable navigator dot cookie enabled. This will return true if cookies are enabled. Otherwise it will return falls. Go back to the browser refresh and the result. Ease True to see all the properties that are available on a particular object in JavaScript , we can use the foreign loop. There is the loop I have skipped earlier. Four Within brackets X In Navigator I want to see all the properties that are available on a particular object. In this case, Navigator lets in taxes for within brackets X is a variable in navigator. Each property will go into X as this loop continues looping inside the body document not right X within brackets X plus and lane brick. This will display all the properties on the optic navigate or to the browser refresh. Let me zoom out then are quite ah lot off properties on the navigator object. We don't need all this. We rarely use them. Probably cookies. Enable is the one with my touch once in a while. Other than that, we don't need any off this. Let's try service worker or strike Java enabled. Copy that. Go back to a video instead of cookie enabled. Replace it with Java enabled. Save it well back to the boroughs. There, the fresh call it up and it says NATO cord. It's an object. It's not true or false. There is more to it. Similarly, you can try out I gotta properties as better. 74. Basics of form validation: in this lecture, you are going to do your first form validation where and you're going to create a user registration page where the user needs to enter the email I D. And a passport both fields her mandatory. Let's make it mandatory Photo file, new file copy or the navigator court pasted. I need not tell you by now you are an expert cleaning up title. Change it to form validation, text field or text fields inside the body off the HTML start by creating a form name is equal to my form. Action is equality. That's a registration dot jsp is not a really action. We're not going to do anything on submission. But in real time applications, typically we submit our form to us over side paid, such as a jsp Jarvis over page, or is some X in case off dotnet or a dot PHP. These pages can dynamically retrieve our information that the brother is submitting and they can do some dynamic cooperations. It could be operating the database operating another external system etcetera. For us, it is dummy on submit is equal to I'm going to call her handle. Submit. Oh, our call it validate. Only if this validate returns true, only then this form will be submitted. So are there. Return return validated? I will explain it in detail Once you wrap it up, close the form about the form canary that hitched. Three. Hurting. Use a registration. Colin. Close the hating history. Let it all be small. Create two fields. One is email the user needs to enter his email to resistor. Input type is equal to text. Name is equal to email, and that's it at the second field email, and we also need a password. Liapis Password and name is password as well. Finally, it's submit button input type is equal to submit. Value is equal to register. Close it, save it under a new folder under JavaScript. Create a new folder called Form Validation and the name off. This file is fixed. Field start HTML. We're going to validate the text field. In this case, we help extremely as well as the password field. Inside the script, Block scored the validate function function well. He did. The very first step is to retrieve the values off text and password that the user enters. We can have an I D and retrieve it. Or we can simply use the document dot for me, my form, not a text field name, which is email dot value as I in this trip where email is the variable. Similarly, where password is equal to document Dart my form dark password dark value we have about the values now starts the validation. If email double equals blank, you can also check email dot length is equal to zero. Or you can check if female double equals blank. Nothing. Then that means the user hasn't entered the email information alert. Email is mandatory. Similarly else. If password double equals blank alert, double courts password is mandatory. Finally else alert within double courts validation successful. And when the validation feels we should return a false so that the for form submission won't happen. So what? Our value you returned from here will be used on this on submit event on submit all small. So if you return false this form submission. The brother won't submit this form and if you return it true, it will be submitted. So inside this validation successful, we can return a true value. Seemed a living. The password validation fails. We return false, save it. Open this and have a Broza go to form validations ex fields dot html. I didn't use any BR, so they all are on the same line. Entry Humility Be at d dot com Password. Best click on register and it says validation. Successful on the pages submitted to a registration dot jsp, which doesn't even exist. We don't care about it. We are more worried about the validations. I'll go back. Refresh the page without entering anything. Click on register and immediately it says email ease mandatory. The validation is happening. It goes into this. If it takes, it is blank. That is where it is displaying. Email is mandatory on. Let's see if it submits the form once I click. OK, it stays on the same page. It doesn't submit like it did the last time. That's the beauty offer. Returning falls from here. But if you see the focus is not in the email field to focus the field before you return, you can say document dot my form dart user dot focus. By using the focus method available for every field, you can set the focus on that particular field. It's not user. It's email. Email is the feeling name. Similarly, the password also and the password validation fails. We want the focus to be on the password feet go back to the Broza fresh without entering anything. Click on the register. It says. Email is mandatory. Click OK, and if you see the focus goes to email, let's enter a email. Now leave the password blank. You can't register. Password is mandatory hit okay. And the focus goes to password. In this lecture, you have learned how to validate their text and password fields from within JavaScript and also to focused them when the validations fail. 75. Validating Numbers: in this lecture will learn how to make sure that the user is really entering a number when we want him to copy the earlier script, create a new file were going toe, ask the end user toe, enter any numbers from 1 to 10 enter and number from 1 to 10. Instead, off registration or JSP. You can have it as numbers dot PHP Doesn't matter. We don't have that file anyways. Get it off the second field, which is the password on change. This to number and the name will be numb. The value we can change it to submit. Save it as numbers validation dot html and inside the function, get it off everything where X is equal to document dot form my form dot The text field name is numb dot value. Once we have the value we need to check if the user is really entering a number to do that , they are a step gives as a ese man in capital a small and again in his capital, Nan stands for not a number. If it returns true, that means the user hand has entered a non numeric value and the valuation should fail our ex ease Less than one. Oh, are X He's greater than 10. We're making sure that the user is really entering it badly, which is within one in 10. If that's not true, alert within double courts. Please enter a rallied number between 1 to 10 within that range, and also we want to set the focus on the number so document dot my form dot numb dot focuses the function that will set the focus on that particular field and return false. We don't want the form submission to happen else. Alert in double courts Validation success are successful weekender done true By default it will be true. Anyways, we need not explicitly returned True. Save it Form validation text fields Numeric values is the title. Open it in the lab Rosa numbers validation and remember, which is Valley eight. Submit Relation is successful. It OK and it will be submitted to wear numbers dot PHP page which doesn't even exist. Go back the fresh enter 12 submit and it says please enter a valid number between one toe tell hit OK and the focus goes to the number field 76. Validating Select Menus: in this lecture will learn how to validate and make sure that a user is selecting at least an option or a value from a hasty ML. Drop down. Copy the last script. Create a new file. Once you learn validating one of the history minefields, it's very easy and straightforward to do it for any history. Millfield. We're going toe. Ask the Indians that, too. Select their color. That's our drop. Don't get it off the import type. Next, we still need the submit button. Select close the select start with option value is equal to blank. Select a color. This is the default that will appear. Option. Copy it basted three times. You can use your favorite colors. I'm using mine view, and the value also will be blue or the value that appears should be blue. Read. Read Green and green G capital. Save it as drop down dot html instead, off numbers dark PHP. You can say drop down dark. Be hasty. PHP doesn't matter. This space doesn't exist. It's going up. Clean up the script. Block off the body off the function. We still need the function itself. Form Validation changed the title to drop downs when the validation valid function is in walked, were going toe. Ensure that the user has picked at least one off these colors, where color is equal to document dot my form dot gilda Select box and name name is equal to color so that we can refer to it using the name color dot value. If color double equals blank. That means the user hasn't picked anything because Blank means it's the default. Select Pickler, then alert within double cords. Please pick or please select a color. Put the select box and focused document Dart my form door color dot focuses the function. It applies to all the history, man, fields or objects, and then we'll return a false so that that form will not be submitted. Health's alert validation is successful, but it done true in real time. Applications will not be writing this else block, and the validation passes we simply submit on the data will go to the silver sight. We need not even do this return through by default. It will be true if we do not attend a false open it in a broza drop down door test Yemen without picking any color If I click submit it says Please select a color it okay and the robe Dhoni's focused Let me pick a color blue hit. Submit. Validation is successful As soon as I hit OK, the form is submitted to a drop down dot PHP whose doesn't exist. 77. Validating Check Boxes: using the HTML tick boxes. We can prompt or ask the end user to make a choice. He can select multiple check boxes In this lecture. We're going to learn how to validate and see if the user has selected at least one check box. Poppy. The last one create a new file. The requirement is that you are going to ask the end user toe pick at least one technology for his job application. Starting with JavaScript. The technologies are his TML, JavaScript, J query and angular teas. Input type is equal to checkbooks. Give it a unique I. D. Start with JavaScript. Value is equal to Joe uh, crypt and outside it. Give it a label. How a script. Copy that and paste it three times. 2nd 1 is a query equity change the label as well. T J query thirties, angular, deace, angular gs and the last is Nord Norge is change the label as well. Save it as chick boxes nort h to Yemen. We have to change the validate method. Get rid of everything inside the method or the function form validation. That title is chick boxes start by defining a flag where valued is equal to false. We're assuming that the validation has failed. And if the conditions go true, then we'll turn this flag to true. If document dot get element by i d. Within double courts. Check if JavaScript is selected. JavaScript dot checked is the property on the check boxes object that tells us whether that particle check boxes checked or not? If they're district then valued is equal to true. We're turning this lacto true. Even if it least one is selected, we need to add the same condition multiple times else, if else if else. If finally else if none armed, none of them are selected. That means the validation has failed. Well done. We leave the flag as it is and then here we can add an other condition if rallied, then display alert. Alert, validation. Successful else. If the flag is still true, offer all these conditions. We're going to change these conditions in a second for J Query, angler Jeez, etcetera else Alert. Please select at least one technology without knowing anyone. Technology. We can't give him a job and return false so that the form will not be submitted. Change these two element variety. Jake witty angler Js and finally, nor deace. So we're making sure at least one of them is selector. Change this heading here to select technology. Save it. I'll explain it once we run it or executed from the web. Rosa JavaScript form validations Jake boxes. You see four check boxes. Click on the submit button without selecting anything and it says, please select at least one technology It okay, and the form is not submitted. So what's happening here is that as soon as the submit button is clicked on, submit, the validate mattered will be invoked inside the validate method. We have declared a flag called false and we're doing it. Felts were using the felts ladder to check if at least one off the check boxes is checked by using the checked property on the check box Object. If it is checked, then we're turning the flight to true. And once we're out off the felts larder, we're doing another chick to see that the valid has turned true. If it has turned through, then the validation is successful. We don't do anything special. The form will be automatically submitted. Else we are saying please select at least one technology and returning false so that the history male form is not being submitted Now if I select at least one off the technologies hit the submit button, it stays validations successful, click OK and the form will be submitted. I can also select multiple here and hit submit and the form will be submitted again. So in this lecture you have learned how to access check boxes from within JavaScript and how to validate them. 78. Validating the Radio Buttons: using the hitch Deimel radio buttons, we can ask the end user to make one and only one choice from the available options. In this lecture, you're going to ask the end user to select one off the payment. Moore's, that is. You are working on an e commerce application, and you will allow the end user toe pay either by cash on delivery or credit card are. They would cut only one off them. Create a new file copy or the last one based it. Get it off all the input types in the form. We'll start by creating a radio type. Input type is equal to radio. Name is Equality Payment Method. Value is equal to the very first option E, C or D, which stands for cash on Daily Worry Copy. Best that line. We're going to use the same name. That is how we group radio buttons by using the same name but change the value off the 2nd 1 to credit card teens. The label as well Credit card David Card is the last option. Change the label as well Toe David card. Save it as radio buttons dot it's Tiemann select their more off payment is the heading. Scroll up. Delete everything except for the value. The flag. We're going to use the valid flag again inside the validate function. We're going to access the radio buttons differently than how we access the check boxes. Instead, off using get element by Heidi we're going to use document dot my form dart the name, which is payment method that will you as an array off elements where X is equal to that. So this X is an array because we're using the same name. The door. Maybe a will give us all these three with the same name as an area we can loop through the array and validate them all at one shot for where use the for loop. I'd rate starting from eyes equal to zero. The index often array, starts from zero. I is less than ex door length. Length is a property on every area that tells us the length off the area. I plus plus Luke till the end inside the loop. If x self I dot checked is the property similar to check boxes, we use the checked property on the radio buttons. Also, this properties available if it is sicked. That means value is equal to true. A taste. One radio button. Only one radio button can be selected. So we're checking if one of them is selected, then while it is true and we can break, we need not look through the rest off the choices. For example, if he picks up there cash on delivery, then we need not hydrate and check credit card and debit card because he can make only one choice. And outside the loop once the far look completes. If valley initially valid, will be false. Only of one off them is check to the valley turns truth. So if valid, alert, validation, successful else. You know what to do. Alert. Please select a more off payment return. False so that the form is not submitted. Save it. Since that I tell you, radio buttons, open the radio button sort html in the web, Rosa, and you will see three choices here. Don't select anything. Click on the submit and you see Please select a moored off payment. Our validation has kicked in. It looks through and checks for each radio button. If they're checked, then it will turn it to Truman. autumn is checked, that is where the value will stay false and this alert the following second alert. Please select. A more off payment is being shown and I click. OK, the form is not submitted because we're returning false. Let's make a choice. Cash on delivery submit It stays valuations successful. Click OK and the form is submitted. 79. Regular Expression Introduction: using a regular expression, we can define a character pattern. For example, if we want to ensure that the user registering on our website follows a particular pattern when he chooses his password, then we can use a regular expression toe. Do that validation that is always the password should have some characters as well as some numbers and also a special character. We can create a regular expression pattern for this on validate the data that the user enters against our regular expression. Similarly toe. See if the email I d entered by the end user is valid. We can come up with a regular expression as well. Instead, off we searching character by character and ensuring that the at symbol is there. The dot com is there. We create a regular expression and validate the data against that regular expression. The second use off regular expression is to search for a string inside another string or a file as well. In JavaScript, we create a regular expression by defining of our on the pattern directly that we want are by creating a new regs object on passing the Parton on any additional attributes. Once we have a pattern object simply invoked the best method on passing the string, which we want to validate against the pattern we have come up with. This method returns true if the test passes, if the sting does not match the pattern than it will return a false value, we need to follow certain syntax to come up with their regular expression pattern. It will learn what that's in taxes in the next lecture, or you will learn that constructs that you need to come up with the syntax in the next lecture, and it will create several regular expressions in the next few hands on lectures. 80. Regular Expression Syntax: When we come up with regular expressions, we need to follow certain in syntax to create the pattern. The first important thing is brackets using brackets with space. Further range off characters that we want to use in the regular expression brackets on with characters match any character in the brackets. If we started with the carrot symbol or exponential symbol that will negate it, or it'll be the opposite off simply using characters and Sarah brackets. That is anyone. Character not in the brackets. 0 to 9 matches. Any dismal visit from 0 to 9. Similarly small A to Z matches any character with small A to Z similarly capital A to Z. So using brackets, we can specify the characters or range of characters, which will be used as a pattern toe match against any string. Then, once we define the range, we can quantify it. Using quantify IRS, X Place means it matches any string containing one or more Xs plus means one or more X Star means zero are more access. Then comes the Range X within floor brackets, and it matches any string containing sequence off in excess. You can help if they replace and with three. That means any string with three Xs will match that pattern. We can also specify the Range three comma fire, meaning there should at least be free access in their string on a maximum off five access ex dollar, meaning it matters in the string with X at the end, dollar means at the end and correct symbol means at the beginning. If you use a carrot similar, then the X it matches in E string with except the beginning. There are also metta characters such as DOT means. Any character, any single character backwards slash small s a white space character this matter, said whitespace capitalists, Non white space. It matches any non white space character in the given string slash Smalley Any disease in the range 0 to 9 instead, off defining the entire range. We can simply use backward slash b backwards less Bigbie stands for in non visited his opposite off backwards Last Morley on backwards last w small w Any word? It could be lower case or upper case or even digits, using which we can Any word character. That's what it matches, and there are two more literal send modifiers. I want you to explore these two as an assignment, do a Google search for JavaScript regular expression and check out what literal SAR on modifiers are and how they can be used. This lecture. You have learned the syntax to come up with a regular expression that is using brackets, quantify IRS and also metta characters. You are going to use all these in the next few lectures to create regular expressions and also test them out. 81. Validation using Regular Expression: in this lecturing on how to use regular expressions to validate the data the end user enters. We're going to make sure that a user can only enter our for vertical characters. For a field called user name, create a new file copy or the radio buttons in the form. All we need is one field off type text color user name. You can call this formers user registration name is equal to name. Get it off value. We don't need anything that you can close this element right here and remove the cash on delivery as well. We have a history malformed with only one field. When the user enters it, we want to validate and make sure that he's entering only alphabetical value. No numbers. Nothing else is allowed. So inside. Validate. Clean up the function. Leave the validate flag. Define a regular expression where e X p is equal to forward slash. That is how we started a great expression. Use the correct symbol or the exponential symbol, which you'll find on six digit six hold shift and hit. Six. We use this to mention that it should start within brackets. Whatever character you want. A to set on also small a two that were saying it should always start with any off. These characters and Richard also end right there. No other characters should be enters or dollar dollars with faced that it should end right there with those characters using. Plus, we can tell that at least one off these should be there for you. A star. It's zero to many if we use. Plus it is one too many. Any number on we ended using a forward slash again save it as next. Reggae X, not his TMR. Txt already e x, not his demon. We're validating a text field using regular expressions semi colon where result the valuation reserves is equal to e XP. The glare expression object dot best is the matter. It has pass it the valley which we want to validate it first get that value which is this text field here where user name is equal to document dot my form dot name or call it you name changes to you name, user name, dark value, but as that user name to the test method and it will return true if it satisfies this regular expression. If not, it will return false if result. That means it's true then our validation is successful. Alert for validation. Successful Els Alert. Validation failed. Put the focus on that field. Darkman Dark My form dart you name dot Focus and also return false so that that form will not be submitted. We don't need this valid flag in this case. So get rid off that Save it! Change that title Do form Validation Our text Field validation! Next field validation using Big X big Let expressions Save it. Open it! Next the GX nort H to Yemen. Let's try submitting it. And immediately you say validation failed because we haven't entered anything since. We have used the blessed symbol, it expects at least one character in between. These character sets it. Okay, The page will not be submitted and the focus course onto the text field under some numbers , submit again. The violation failed because we can enter only alphabets. Capital A to Z and small A to Z it. Okay, go back. This Dementor parrot, both capital and small submit This time it stays valuation Such this will hit OK and it submits to a piece that doesn't exist. So to summarize. In this lecture, you have learned how to use regular expressions to validate a text field value. We have used the alphanumeric regular expression that's types with alphabets and also ends with alphabets. Only here used a place symbol to ensure that at least one character is there. 82. Alpha Numeric Validation: in the previous lecturing. How used a regular expression to ensure that whatever they use a renter is a alphabetical value. In this lecture, you were going to validate, address, field and ensure that he only enders. Alphabets are numeric values or spaces so that he can enter the door number or the street number etcetera. To copy the last script, create a new file basted, Get it off the import type. Next we're going to use for address. We lose a text area exterior. Give it a name as address, close the text area right there, save it as text area. Greg X, not history and month. Go to the validation. Well, that's the regular expression in a second change. This to address from user name, address and also we are testing the address. Using the regular expression. We want to allow alphabets as well as 0 to 9 as well as spaces in between. For space, we should use backwards slash Yes, that represents space plus means at least one off. This should be there if you don't want that dress to be mandatory. If you don't want the end user to enter any off the characters still the form should be submitted, then use a star means zero or nothing plus means one are any number star means zero. Are any number off characters? If the result is true, adoration is successful. But if the validation feels or the regular expression returns false, then instead of displaying alert, let's use a special bold tag right after text area had a bold attack. Give it the I. D. Is equal to e r. R so that we can display the error message inside it instead, off using alerts a line break br right after it, save it, come back into the validation and it goes into the else block used document dot Get element by idee e r r is the element named dot inner hasty Emel is equal to please enter hot off nomadic. But I lose only and change this to document art. My phone door address dot focus. So when the validation fails, we're going into the else block and displaying the error message inside the Newbold Paige, we have put right next to the text area Open this in of a Broza exterior rejects tortoise Deimel, let me try to enter an address be 102 Mira Mesa Boulevard Sen. San Diego Submit. It says the validation. Successful it okay, and it goes to the next page. But now let me try to enter some special characters here. Person day symbols hit, submit and it says, Please enter. All far numeric values only does not enter percentage characters. 83. Specifying a range: We can also restrict the length off the address field, using the regular expression to do that right after these brackets insert off using the plus, which is one or any number we can use within angler brackets, give it a range. For example, let's say minimum three characters and a maximum off 10 characters. You can you what our range you want. So the user should at least enter three characters and the max off. 10 characters. Go back to the Broza for fresh. Let's try entering only one character click. Submit the validation fails. Four characters A B C D. Submit. The validation is successful. Go back. Let's start to enter more than 10. Submit. The validation fails again, but get less than 10. Relegation is successful, so to restrict the number off characters, you can use the range instead of using plus or Asterix within angler brackets. Give it a range three comma, then 84. Introduction: As I have said in the very first JavaScript introduction lecture. JavaScript is object oriented, and so is this world. For example, if you look at only herself, you'll find your laptop or the stop a fan room chair or air conditioner. All these are objects. Let's take a real time example. If it turns their Facebook, the user using Facebook, his pictures, videos, timeline. Everything is an object similarly for Amazon customer products, shopping card, credit card and many more. All these are objects, so it's very easy. Using object oriented programming to map thes real world objects are problems into the software solution. In other object oriented programming languages, such a C plus plus and Java object is represented using yet class. But JavaScript is a prototype based language, and it uses functions to create and initialize objects. Each object will have properties and methods are functions. In the next few lectures, he will learn the different ways to create an object 85. Using new and Object Type: There are multiple ways in which we can create a user defined or custom object in JavaScript. In this, in the next few lectures, you're going to learn few off those important face. We'll be working on a use case called Block Post that is, will be creating a block post object with three properties, a title flawed, the block post the text that should go into the blawg and finally a category into which their block post falls in tow. Go to your editor to create this object. Copy the last script. New file basted. Clean up everything inside the body as well as the script is that I tell you custom object creation or use a different object creation inside the strip. The very first way to create an object is to use the in built object in JavaScript, where Block post is the name off. My object is equal to a new object is their inbuilt type in JavaScript, using which we can create our own types to ascend properties to it. Block post dot title. We can ascend properties dynamically is equal to a value. Let's say JavaScript is the title of our block post blood post dot The second field is fixed and the 3rd 1 is category text is equal to Yeah, last herpes. Awesome. Blogged posed dot category is equal to you. I technology is much more than that today, but let's put it under a category called you White technology to display their details often object. We use document or right to access the properties again, we use the object name, block, post dot All right, don't copy that. Just a couple more times fixed and finally Cartago t save it. Create a new folder under JavaScript. Call it. Oops. And save your file under it. Object creation are Let's call it block post using object dot html We're creating a custom object using object. If you don't have this folder, create a fuller card Oops on River JavaScript folder. I already have it. Save it. Open it In the web browser. Oops. Brock Post using object artist Deimel and it this place Javascript. It is awesome. You I technology All this is coming from our object properties. We can add a line break at the end so that we can see it appended to the next one as well. Save it go back to the lab, Rosa, for fresh and you see the object properties in three different lines. So in this lecture have learned how to create an object using new object. New is the operator on object is the inbuilt type and you have assigned the properties dynamically to that particular object. 86. Using Functions: the second and one of the very popular and most used ways to create an object is to use a function copy the earlier script, create a new file basted, clean up the script block custom object creation using function within the script block. We start by creating a function. Call it block post title. Calmer, fixed are the perimeters category. I'm going to show you how toe add the category dynamically using another method in the next lecture. For now, you're going to pass in title and text. This DOT title is equal to title here. This is an inbuilt keyword in javascript that points to the current object that is being created using this function. So whatever title is passed as a parameter, we are assigning that title to the current object that is being created to this block post here, dysfunction acts as a constructor or initialize er off a object we create. This not next is equal to the text that is passed in her to create an object we lose what BP one is equality New block post. We use the new operator again and use the name off the function passing the two values their title say Jake Witty, Comma Makes Js is yet to use daiquiris. The library, which makes JavaScript even more fun and easy to use. That is the fixed or display the values document dot right BP one is the object name dot title comma Oh, are semi colon at the end. Copy that basted. Display that text as well. Save it as blawg post using function, not html. Open it in the web. Rosa documents Joe A script. Oops, block post using functions Dart HTM on And the result is J query makes Js easier to use. Go back, are there line break, We are slash Save it. Come back refresh and you will see that into different lines. So in this lecture you have learned how to create an object using a JavaScript function What our values were passing to this function. We are using them to initialize the object that is being created here. When we create a function or when we create an object, we pass in the parameters. Those will be used to initialize the properties off that particular object. We can create multiple objects as well. Copy these two lines or three lines basted quality. BP to New Block Post angler GS change their text to to build single page APS. Another very popular JavaScript library changes to BP to dark titled People Do That Next. Well, back to the Web. Rosa Fresh This time you're going to see multiple objects on the details are the line. Break it the end off the text off the 1st 1 br This way we can use this function to create any number off block post objects and assign them different values. 87. Add Functions to an Object: So far, we have been learning how to add properties dynamically to an object In this lecture will learn how to create an assigned functions to them. Functions are methods that will have functionality in them. Start by creating a new function function. I kattegat e passing their car diggity We're going toe Assign that category Do This start category is equal to a category given a category, it will assign that category to that particular objects category property Save it not to assign this method to a particular object will have to do that when we create that object inside the constructor. When we create an object in the block post this dot our category is equal to at category This is a cleaner way off doing it. You can as well copy dysfunction this entire function Cut it on, paste it right here. But it will be not easy for a developer to read. This is also possible, But a cleaner in a better way To do it is to define the function outside and then assign it to that particular object Once we instead, she ate the object. We want to assign the category so we can do it right here and you create BP one. You can say BP one daughter add category and passing it. Carnegie, you I pick technology. Save it. Similarly, copy Paste that line for BP to as well. BP to dot Add category advanced. You I technology Save it. Well, back to the lab. Rosa refresh. We still see the same result. Do a document dot Right. Bp to dot category. That's the new property we have added using this method. Welcome. Indoor, right? BP one, I thought Cartago. Yes. Well, save it. Go back to the lab. Rosa Refresh. Now you see the category along with title in text. So in this lecture you have learned how to create a function and assign it to a particular object called Block Post. In the next lecture, I will show you how to add one more function to display the details. 88. Display Blog Details Function: if we look at our court, we are repeating these three lines which display the details off a particular object. So let's create a matter so that we can invoke it instead off repeating this scored on that matter will display the details off the object, create a function display blood post on copied these three lines Baste it in there instead , off calling BP one. You will use this. This always refers to the object that is in working that particular matter the current object that is refering to that method. I'll explain that one more time once we finish it, get it off this tree lines. No need to repeat these three lines every time we simply use BP one dot display block post . Before you do that, you will have a sign that method in the block post function which we used to create. The object will have to say this dot This play block post is equal to the block post the display block post method which we have just created. Save it now, once we create an object and also add a category, you can invoke BP one dot display block post. Similarly, BP to dot display block post as well Go back to the Broza refresh. The output still is the same. It is still displaying the details. But this time we're not repeating these three lines. Instead, we have created a method called display block post on. We have a sign that matter to our object post, and we are in walking it. Once we create a object, assign a category and then display the block post method. 89. Create object using Literal Constructor: So far, we have learned how to create an object using the inbuilt object type as well as by using the function as a construct of for our object. In this lecture, we learn how to use a literal constructor. Start by copying the last script. Create a new file based it. Clean up the script Block James The title. Duke Custom Optic creation Using literal construct up, Save it Blawg Post Using literal lord hitched human within the strip block to use a literal constructor we start with of our block post. These are object is equal to within flower brackets or braces. We start defining. Our object title is the first property separated by colon and then the value within double courts. Java title is Java. That's a value assigned to it. Next colon. The value is, is object audience that are, you can say ease a object oriented language and each of these properties should be separated by a comma. We can also define functions here. Display details is a function colon function. Use the function keyword brackets and then followed by a lower bracket within which will define the body off that function document dot right this dot title on displaying the title off the particular object title Property. I had a line break using B R document door right this dot next semicolon at the end. On we end it, we end a little object using a semicolon as well. Save it to use the literal object block post is the name of four object dart display details is the function on it and walk that open this page in a browser block post using literal dot html and our party's Java is object oriented language. So in this lecture you have learned that third way off, creating an object which is using the literal constructor, you start with the object variable and U. S. Senate a literal object by using flour brackets within which you define properties and functions with names on the left off the semi colon or colon. On on the right hand side, we define the values on the function body 90. Create a Singleton Object: In this lecture you will learn how to create a singleton object. A single down object is an object which is created only once in our entire to how a script application. No matter how many times it is used, there will be only one instance off that object. Copy the last script. Create a new file basted custom Singleton object creation. We can do it in multiple ways. This is one of the popular and easiest ways to do it. Clean up the script block start by defining s and build an object where block post is equal to new function. So right when we define our object using a function we are in Stan Shih ating it and we're assigning it to object. Variable This door title is equal to within double courts Ruby on rails this dot text is equal to rapid that development this door display the details is equal to function defined the function document dart right title this not like that Save it a single ton dot It's Tiemann to use this object Blawg forced dart display details. I haven't displayed their text. You are welcome to do that. Go ahead, open it in the Web. Rosa singled on dark HTML and out parties Ruby on rails in this lecture, How successfully created a singleton object, which can be or which will be in Stan She hated only once in application. Wherever we want will use this dark post object. You do it using the new operator right When we defined a function and we didn't that function we defined the properties under methods are functions for that particular object.