BROWSER OBJECT MODEL

Javascript Dom- Window Object

(00:00)

Hello guys, welcome to our Javascript series. In our last segment, we saw the basics of the Browser Object model. We conducted an introduction segment, like what all is included in Browser Object Model, how many sub objects are included?

Window object is its first parent object and its sub objects like document, navigation, history, location, screen etc and we saw how to deal with all the mentioned objects in the last segment, we conducted an introductory segment.

Today we will see about the Browser Object Model’s main object or parent object i.e. window object and simultaneously we will see other objects related to BOM.we will see them one by one.

So we will start with a window object, what is a window object? So basically whatever our browser is, that browser’s current window represents our window object, it means we don’t have to create a new object browser related data that is already present in the window object which browser itself creates and give it to us in Java script program which we can access through window object.

As it is written in the 2nd line, “an object of the window is created automatically by the browser”, meaning this object is created by the browser itself. Window is the object of browser, it is not the object of Javascript, this is very important line, in our previous segments we saw objects of Javascript like array, string, date, math, number, object etc, so those were objects of Javascript and currently we are going to see are not Javascript objects, means these window, document, navigation, history etc objects are all our browser’s objects.

So there is a difference which you have to remember that all those objects which we saw in our previous segments are of Javascript whereas objects like document, screen, location, navigator, screen etc are our browser’s objects, not of javascript. Now we will see some basic methods which are provided to us by window objects. Understanding methods of window objects is very easy, it creates a prompt or pop up through which we can pass any information to the user.

If we want any data related to the user then we can get that also and we can also perform user interaction so basically our window object methods are useful for user interaction. So we will start with the alert method, so here the methods which are shown in the table like alert, confirm, prompt, open, close and set timeout, all these are window methods which work through a pop up. So we will start from alert, the first method is alert, what is the use of alert here? Alert displays the alert box containing a message with an ok button.

It means in alert we will have only one button, okay button, on clicking okay alert box will be closed and in that box we can show our message to user, this is our alert message program, we will run this, here you can see I have taken a button and on click of that button we are showing some alert. So how does this work? (5 seconds gap) alert, save and we will name it as alert only.

So what do we want in alert?

In alert, we will need a button and on clicking that button my alert box should appear, so I will create a button in body, input type equal to button. We don’t need a name, we need a value. It should be “click me” and when we click this then some operation should be performed which means Java script’s function will be called which will show an alert box. Let’s say I generate a function named ‘message’ on ‘onclick’ so that I will write in Javascript.

(05:00)

Function, name of function is message I will not require argument, what will we write in body? Alert that’s it alert and after that “This is Learnvern” (typing) save and that’s it, so this is our program in which we have ‘click me’ button and on clicking that an alert box is shown, as we saw in alert box, we will have only one button i.e. okay button. What is the use of an alert box? To show a message to our user, here we have simply passed a message “This is Learnvern” that message you can see here.

Whatever message you want to show to our client, write that message in alert’s text, our message will be shown there, when you will click on okay that will disappear, again if I click this my alert box will appear, so this was alert, alert is our window method, here if I write “window dot alert” then still same operation will be performed and if I simply write “alert” then also my alert box will appear, so this was very first method of window.

Next is confirm method, confirm method is used for asking client an answer in yes or no, so that time we use confirm method, here it is written same in the table, “displays the confirm dialog box containing message with okay and cancel button”, means when we want confirmation from user in “okay or cancel” or “yes or no” or “true false” something like that, that time we use confirm method. Basically confirm gives us two options in the form of two buttons.

We will run a program of ‘confirm’, I will copy this same program and paste and what do we need here? we will need a button, clicking on which we will have to confirm whatever is shown. So I will make a button called ‘are you sure?’ confirm message and here we will write confirm, and in confirm what will we write? When we take confirmation from the user, then it will be in this way, variable temp equal to confirm, so as soon as our confirm method is executed client will be able to see the pop up in which yes or no option will be there.

So let’s say I want to show “are you sure?” that’s it, means on basis on confirm user will be able to see two buttons like okay and cancel, if I save this… and this is our program…, so when I am clicking on this I am able to see confirm box in which I can see the message which I have passed, like you can see here I have passed a message “are you sure?” and I have named the button also as “are you sure?” so on clicking this I will get a confirm box.

In alert I used to get only okay button, in this I am getting two buttons as okay and cancel, so definitely I will get something based on okay and I will get something based on cancel, means I am getting two options okay and cancel, so what are those options? On clicking okay I will get true value and on clicking cancel I will get false value. Means when I am executing this confirm line through var temp then my pop up will be opened and if I click on okay then in my temp a value will be stored which is either true or false.

So let’s say if temp equal to equal to true, and if it is true then I will show the value is true (keep typing) (4 seconds gap) else alert (5 seconds gap) the value is false that’s it we will save it and run this program again,are you sure, okay so on okay what did I get? The value is true, now I will click this again and I will cancel it. Now I am getting false value, this value is false.

(10:25)

So here what have we done? Confirm gives our user two options: if I click on okay then I will get true value and if I click on cancel then false value will be passed. If we have to do some coding based on this true or false, means if we have to code something which is based on this user input, based on user’s yes or no then we will do that on the basis of true or false. That’s why confirmation is very useful if we want an answer from a user like yes or no. Whatever your required message is you can pass that here and you can get the answer

Next in our slide is prompt, prompt is used to take input from the user. Input means whenever let’s say confirm takes one out of two inputs it will be either yes or it will be no, if we have to take input apart from yes or no then that we can get by prompt. So for a prompt what will we do? Let’s say I want the age of the user, whoever my user is I want to know the age of the user, I will be able to do that with help of p-r-o-m-p-t, so here (4 seconds gap) what is your age?

And here we will remove this and we will write a ‘prompt’ in temp and in that we will pass a message ‘what is your age?’ That’s it I will save this first, prompt and now we will run this program,

here i am getting this program, “what is your age?”.

when I will click on this you can see whatever question I have passed means whatever I have written here that is shown here as a label and here below this I am getting an input field, this input field is useful to get data from user, let’s say I write what is your age? 20 When I click okay my data will be submitted here, if I want to show that data after getting it then I will repeat the same procedure which we did earlier.

Alert, user’s age is, temp, so let’s say I will click here, here I wrote 20 okay, so what am I getting in the alert? User’s age is 20. So whatever value I have passed through the dialog box of prompt that I have again shown as alert also, means whatever data we are getting we are showing that. So what is the prompt used for? Prompt is used when we want to take an input from a user and perform an operation on that, that time we use prompt.

Next is open, what is written in open? Opens the new window, means if we have to open a new window with the help of a window object then we can do that with help of open, how can we do that? Let’s say I will remove this thing, this open and we will save this program, here I will create a button and its name will be learnvern, message named function is already created in that we will write open and here I will place learnvern’s URL…. in this way, that’s it. Use of Open is only this much. When we click this button, this function will be called and whatever is written inside the function that will be called means we will be redirected towards this website.

We will save this program and run, so this is our program, I have named the button as learnvern,... okay so when I am clicking on this, you can see that, in new tab I am redirecting towards kearnvern’s website, this we used to do with target equal to underscore blank in href,in HTML, same task is performed by open method in Javascript, means if we have to redirect on any URL or website so that task instead of html href we can do it with Java script’s open method, so this was our open method.

(15:55)

Next is the setTimeout method, what is setTimeout used for? When we have to give delay in any task that time this setTimeout method is used. Like setTimeout performs action after specified time like calling a function, evaluating expression etc., it means if we have to execute any function or if we have to perform any task and in that task if we have to add any delay, let’s say I am performing 1 plus 1 and I am adding data again and again in the same variable and I don’t want that data urgently I want that to execute after some time means I want to update my data after every two seconds, so the delay which we are adding that we can do with help of setTimeout method.

How can we do it? like here what is given? If we want to redirect on learnvern’s website after two seconds then in that case we can give this setTimeout function. Let’s say if I go to program, here we will keep learnvern only and here I will write click me, okay so this function I will remove temporarily, here I will write, I will keep function as it is and in that only we will write setTimeout, this is my function and here you have to remember whatever you will write you have to write in this parenthesis, you can’t write this outside.

So here only you have to write, function and in this you can write alert (8 seconds gap) this is learnvern, that’s it and now here where our curly braces are closing there we will write comma and after that you have to set time in milliseconds, so for two seconds, I will give 2000 that’s it, so in this way you have to perform timeout function, so whenever you are giving a timeout function that time you have to write setTimeout and in parenthesis whatever task you have to perform write that as function and after curly braces you have to give your time.

So we will save this (5 seconds gap) timeout (6 seconds gap) I will click this, and you can see nothing happened but after sometime my alert box is showing which indicates I don’t want to show my data promptly, I want to show it after some time then in that case I will give timeout, if here instead of 2000 I write 3000 reload, click, 1 2 3and my pop up appears which means whenever we use b setTimeout, after a specific time my operation will be performed.

Lastly our close method is remaining, so let’s say I take this as it is close (3 seconds gap) save and this is our button here and I will click on this so you can see my tab got closed, I will again open it, you can see and here we will write close, if you want to keep a closing button in the tab itself except this close button, so for that you can use close button, here I have given learnvern as name so instead of that (3 seconds gap) close the current tab, so as soon as I click on this button because of the close method my tab will get closed, so this was our close function.

So guys in today’s lecture we covered all the methods related to windows and we also learned introduction of window object, alert, confirm, prompt, open, close ad setTimeout all these methods we saw in today’s segment.

I request you to practice at least one time all the methods which we saw today so that you will be thorough in this and you will learn how to use it. If you have any doubts or questions then you can tell us on forums.learnvern.com we will revert back with solutions to all your questions.

If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.

In the next segment we will see another object of the window i.e. history object. Thank you.

(video duration- 21 minutes 39 seconds)