JavaScript browser object

a window object

The window object refers to the current browser window.

Javascript timer

The code can be executed after a set interval, rather than immediately after the function is called. ‘

Timer Type:

One-shot timer: fires only once after the specified delay time.

Interval trigger timer: Trigger every certain time interval.

timer setInterval()

grammar:

setInterval(code,interaction time);
  • code: the function to call or the string of code to execute
  • Interaction Time: The time interval (unit: milliseconds) between periodic executions or invocations of expressions

return value:

A value that can be passed to clearInterval() to cancel periodic execution of the "code".

Call function format:

setInterval("clock()", 1000);

setInterval(clock, 1000);

var int=setInterval(clock, 100);

//clock() a function

Cancel timer clearInterval()

grammar:

clearInterval(id_of_setInterval);
  • id_of_setInterval: The ID value returned by setInterval().
<script type="text/javascript">
   function clock(){
      var time=new Date();               	  
      document.getElementById("clock").value = time;//Set the value of the text box
   }
     var i=setInterval("clock()",100);//call clock() every 100ms
</script>
</head>
<body>
  <form>
    <input type="text" id="clock" size="50"  />
    <input type="button" value="Stop" onclick="clearInterval(i)" />//Cancel the timer when the stop button is clicked
  </form>
</body>

timer setTimeout()

The setTimeout() timer, after a delay of the specified time after loading, executes the expression once, only once.

grammar:

setTimeout(code,delay);
  • Latency: The amount of time to wait before executing the code

For example: After opening the webpage for three seconds, a prompt box will pop up

<script type="text/javascript">
  setTimeout("alert('Hello!')", 3000 );
</script>
</head>
<body>
</body>

Cancel the timer clearTimeout()

grammar:

clearTimeout(id_of_setTimeout);
  • id_of_setTimeout: The ID value returned by setTimeout(). The value identifies the deferred execution code block to cancel.

Two History objects

The history object records the pages (URL s) that the user has browsed, and can implement the browser's forward and backward similar navigation functions.

From the moment the window is opened, each browser window, each tab page and even each frame has its own history object associated with a specific window object.

grammar:

window.history.[Attributes|method]

//window can be omitted

history object properties:

history object method:

Return to the previous page viewed back()

Load the previous URL in the history list.

grammar:

window.history.back();

history.back();

Note: Equivalent to clicking the browser's back button.

Equivalent to go(-1):

window.history.go(-1);

Return to the next browsed page forward()

Load the next URL in the history list.

grammar:

window.history.forward();

history.forward();

Note: Equivalent to clicking the forward button.

forward() is equivalent to go(1):

window.history.go(1);

Go back to another page in your browsing history

The go() method loads a specific page in the history list according to the current page.

grammar:

window.history.go(number);

parameter:

For example: to return to the second historical page viewed before the current page:

window.history.go(-2);
//Same as double-clicking the back button in a browser.

Three Location objects

Used to get or set the URL of the form, and can be used to parse the URL.

grammar:

location.[Attributes|method]

location object properties:

method:

Four Navigator objects

Contains information about the browser, typically used to detect browser and operating system versions.

Object properties:

userAgent

Returns a string representation of the user-agent header (that is, a string that includes browser version information, etc.).

grammar:

navigator.userAgent

Use userAgent to determine what browser is used (assuming IE8 browser is used):

function validB(){ 
  var u_agent = navigator.userAgent; 
  var B_name="Failed to identify the browser"; 
  if(u_agent.indexOf("Firefox")>-1){ 
      B_name="Firefox"; 
  }else if(u_agent.indexOf("Chrome")>-1){ 
      B_name="Chrome"; 
  }else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){ 
      B_name="IE(8-10)";  
  }
    document.write("B_name:"+B_name+"<br>");
    document.write("u_agent:"+u_agent+"<br>"); 
} 

Five screen objects

The user obtains the user's screen information.

grammar:

window.screen.Attributes;
//The window prefix can be omitted

Object properties:

Available screen height and width

1. The screen.availWidth property returns the width of the visitor's screen, in pixels, minus interface features, such as the taskbar.

2. The screen.availHeight property returns the height of the visitor's screen, in pixels, minus interface features, such as the taskbar.

The default height of the taskbar in different systems is different, and the position of the taskbar can be anywhere on the screen, so the available width and height may be different.

 

Tags: Javascript

Posted by Foregone96 on Tue, 17 May 2022 09:23:00 +0300