Javascript BOM - History Object

BROWSER OBJECT MODEL

Java script Dom- History Object

(00/00)

Hello guys welcome to our series Java script.

In our last segment, we saw about BOM browser object model’s window object.

And we also saw different methods available and I hope you have practiced all the methods, if you have any difficulties or issues during practice, if you have any queries related to the last segment then do tell us on forums.learnvern.com.

we will revert back with solutions to all your questions.

Today’s segment is about another object in B O M, browser object mode, i.e. history object, it can be called as window object’s child object,

but history object has its own properties and methods we will cover all that today,

history object is comparatively small concept it has only 3 methods and 1 property,

So it can be called an easy concept but from an interview point of view,

the chances of questions on this topic is very high, this is an easy concept but understanding it thoroughly is important.

Understood?

History object mostly deals with tabs in the web browser,

when we open new URLs in tab, then in that single tab all the URLs which are opened,

history tab keeps record of this URLs.

For example, if I open any browser in that, I will open LearnVern’s site,

which means first what did I open? Google chrome, in Google chrome I opened this tab,

default what will I get in tab?

Google chrome page is shown, if I go back from here on the very first page of tab, our back button has been disabled.

If I open new tab, then my both back and forth buttons are enabled, if I close this tab,

I will start from here where it is empty, initially both are disabled, means we do not have any history,

currently my page is history dot 1,

 means it is my first page, as soon as I open LearnVern’s page,

you can see my back button will be enabled, forward button is still disabled,

 let’s say in this, I will open one more page,

let’s say I open a HTML 5 course,

here you can see my backward button is still enabled and forward button is still disabled.

(03/15)

So here in total I have changed two tabs, first Google chrome’s homepage then LearnVern’s homepage and after that our HTML page,

 after this I will again redirect it to learn vern's home page,

so in my back button a total three pages will come.

When I click the first time back button, then my HTML page will open,

If I click this again then the home page will open and if I click this again then, Google chrome’s page will be opened.

Right?

Clear?

So if I click on the backward button once also then my forward button gets enabled, if I again click on the forward button and go to my current LearnVern’s home page then, my both buttons are active back and forward both.

Here, all the pages that I have visited, opening leranvern’s site, opening HTML’s course then, I went back to home page,

so here. a history is generated on visiting different URLs which tells us how many URLs we have opened.

Let’s go back to our slide, (Reading ppt ; be slow)

“the Java script history object represents an array of URLs visited by the user. By using the object, you can load previous, forward or any particular page”,

means if I have opened more than one pages then, what I can do with back button same thing I can do with Java script’s history button also,

if I am on previous page and, if I have next visited pages available then, I can open those pages and I can also open previous pages and I can also go on a specific page from my array of pages, if I know which page is located at which position then I can go to that page directly, if I have to go to third page then I don’t have to click this back button three times.

Understood ? great !

(05:05)

So let’s say how can we do this thing?

We can do this with the help of window dot history or simply with help of history.

History objects give us a property and three methods. The first property is history dot length means, how many histories I have in my current page that I can check with history dot length,

for this we will generate a Java script program, (4 seconds pause ; typing) history,

Here, what do I want to write?

If we want history then we can get that with help of history dot length.

(writing program ; be slow)

Let’s say, here I will write,(4 seconds pause; typing) document dot writeln (4 seconds pause; typing) current page history plus history dot length, we will write this much only,

 save and let’s see what output do we get?

So you can see here in current page history we are getting 1,

This indicates what?

This indicates in our current page we have not opened any other page,

 means when I run this program means only this program is available,

so that’s why here we are getting current page history 1.

If I copy this URL from here and paste it where I opened learnvern page and if I run this,

Then what am I getting?

Current page history is 3, how?

You can see here, if I click on back button then my first page is learnvern home page,

then my google chrome page, first learnvern second google chrome and third my history program.

Okay , Guys !

Now, I will repeat the same thing,

I have opened google homepage here,

 I opened learnvern and here,

I will open html page in designing,

And now let’s say I will open another course,

here we have Angular JS and now I will again open my program in the same tab,

So what do I have?

Current page history, because the history has got added so that’s why my current page history is 5 means in total I have opened 5 pages.

So, history dot length returns us the count of the number of pages that are opened.

(Done)

In the slide, you can see

“the length property returns the number of URLs in the history list of the current browser window”.

(08/04)

 Means it will give u the count of number of pages opened,

so the current property returned us 1.

so you can see, when I first ran this program, now if I open this tab here I am getting 2.

If I again open it I am getting 2,

It means, I have visited this history programme once,

okay !

but when I run this program again I am getting 1,

but when I am copy pasting it I am getting 2,

you can see this is my program here as soon as I run this my new tab will get open in which I am getting current page history 1,

 means when I am copy pasting it,

I am getting 2 because it has already been visited.

but when I open it freshly, and ran the program, that time I get 1,

but if I open this in such a tab in which I have already visited other URLs then,

I will get according to the count there, so this was our history dot length.

clear, up till now, perfect !

Now, we have three methods in history back forward and go,

Now we will see these three methods one by one,

first is back method,

Here in browser, the work which we can do with back button, same work is done by back method also,

(writing program ; be slow)

so let’s say here in program, we will take a button and in that, we will create a function of go back, in which we will write window dot history dot or simply we can write history dot back,

This is my program.

I will write here history dot back.

And here,

we will need a button, , (pause 3 seconds ; typing)

so input type equal to button,

we don’t need name so,

(typing)

value equal to go to previous page on click we will create a method named go back which will be called.

and there will be function named go back in which,

we will call history dot back,

that’s it so as soon as we will call history dot back,

that’s it window dot history dot or only history dot back we need only this much,

here I will write my back method and now we will run this program.

(Done)

(11:00)

So when I run this program,

first time there will be no operation performed here,

because this has been opened in new tab.

And now, I will run this program where my 5 tabs are visited,

copy paste and go to previous page and as I click this my previous page opens current history page 6,

which page is my 6^th page this back operation page I will again click on forward and go to previous page.

And I am returning to my back page.

So what is history dot back used for?

To go to previously visited URLs,

exactly same task we can perform for go forward,

(writing program ; be slow)

here, we will write forward go to next page, (pause 4 seconds, typing)

save,

(done)

I will run the new program and,

definitely, this will not work in our new page,

because here, we don’t have next page,

but if I open this in that tab where 6 pages are visited,

So let's say here, my go to forward won’t work.

so, I will go back in between learnvern and now I am placing this here.

but as I will place this every time this will be removed,

because here freshly a page will be opened now let’s say here I open learnvern, okay.

Where I run my forward program, now in the same page I have opened learnvern tab.

Now, I will go back now if I use the next page button instead of forward button

then, I have the next page available that is my learnvern’s URL.

So when I run this program and after that if I open some pages then I have pages in my array available, so in order to perform next I need visited URL so that’s why this program is running, so this was our forward.

understood !

Next is go method, go to any page or go to specific page so here,

(writing program ; be slow)

we will write only go function go,

because the name of this method is go,

that’s why it is go, so what is go used for?

We have seen back method and forward method, go is used for as you can see go back to two pages means to go back 2 pages,

so for that here we will write minus 2,

if I have to go forward then I will write plus one so let’s say I will write as it was written there go back to previous 2 pages,

so here i will write minus 2, save and go.

(done)

so here, when we freshly run this nothing will happen but when I place this in this URL,

okay as soon as I clicked this I went 2 pages back there which page was present?

My go next page program where I run my program.

If I run this program my learnvern appears if I click the forward button

then, I will reach go back to the previous page if I click again then I will go 2 pages back.

If instead of minus 2 I write,

(writing program ; be slow)

let’s say I generate one more button, go to next 2 page, function go 2 will be its name, function go 2,

same history dot go here in positive 2, that’s it,

here I have generated two buttons, first button is go back to previous 2 pages and second button go to next 2 page,

(done)

so here it will not work but if I place this in very previous page then go to next 2 pages so on clicking this my same page is opening,

 go to next 2 pages my Google home page is opening,

here next next and here programming is not showing then learnvern again and I will open any designing course.

Now, if I go back and click on go to next 2 pages then my designing page will be opened, if we have to go to next visited pages then,

we will give value in positive numbers but if we have to go to previous pages then,

we will have to give negative numbers in go, so this was our history method.

In history, we have one property history dot length and we have 3 methods: first is back and second is forward and third was go.

Back is used to go on previous pages, forward is used to go on the next page and go is used to go to any page based on the positive or negative number.

In history objects, we have these 3 methods and one property there is nothing much given in history.

So guys compared to other objects,

history has very less methods and properties,

so all the practical which we performed related to history I request you to practice all those practical as they are little tricky,

but if we have to redirect URLs in web page for next pages or back pages that we can do with help of history.

So I request you all to practice all the practical from today’s segment.

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 a navigator object which is a part of our BOM i.e. browser object model. Thank you.

(video duration- 18 minutes 4 seconds )