Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”
This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.
Hi, I’m Ken
Author: Please call me Ken Link: juejin.cn/user/109118… The copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.
🌊🌈
Part of the content and pictures of the article are from the Internet. If you have any questions, please contact me (there is an official account in the introduction of the home page).
This blog is suitable for just contactJSAnd the friends who want to review after a long time.
🌊🌈
The following is part 8 of the BOM
8.5.3 [Case] Obtaining URL Parameters
When implementing the login function. Form submission is required on the login page (login.html). If the user enters correctly, it is submitted to the index.html home page, and the entered user name needs to be passed so that it can be retrieved and used on the home page. Now that we understand the product requirements, we can start coding the business logic.
- (1) Create the login. HTML login page and set up the form structure. The sample code is as follows:
<form actlon="index html">User name:<input type="text" name="uname">
<input type="submit" value="Login">
</form>
Copy the codeIn the above code, use the action attribute to submit the form to the index.html page. Line 4 sets the input form element type attribute to “submit” to indicate that the form is automatically submitted when the “Login” button is clicked.
- Create the index. HTML home page with the following code:
<body>
<div></div>
<! The -- div element is used to display the parameters passed from the login.html page. -->
<script>
console.log (location, search);
// The result is:? uname=andy
// Use location.search to return the parameters in the URL address.
// 1. Remove the question mark "?" in search.
var params = location.search.substr(1);
console.log (params);
// Result: uname= Andy
// Remove the first character from the string, i.e. the question mark "?" Get rid of.
// 2. Split the string into arrays
var arr = params.split('=');
console.log (arr);
// Result: ["uname", "Andy "]
var div = document.querySelector('div');
// Use the split() method to split the string into arrays.
// 3. Write the data into div
div.innerHTML = arr[i] + 'Welcome';
// Write the data into div to use innerHTML.
</script>
</body>
Copy the code8.5.4 Common methods of location
The location object provides a method for changing the URL, which is supported by all major browsers,
Location object method
| methods | instructions |
|---|---|
| assign() | Create a new document |
| reload() | Reload the current document |
| replace() | Replace the current document with a new document, overwriting the current browser record |
In the above table, the assign() method is a common one. Using location.assign() immediately opens a new browser location and generates a new history. The received parameter is the URL address.
The reload() method’s only argument is a Boolean value, which, when set to true, bypasses the cache and redownloads the document from the server, similar to the “refresh page” button in a browser.
The replace() method makes the browser position change, prohibits new records from being created in the browser history, accepts only one URL parameter to navigate to, and the user cannot return to the previous page after calling the replace() method.
8.6 the navigator object
Navigator objects contain information about the browser, but each navigator object in the browser has its own set of properties and methods,
Properties and methods of the Navigator object
| classification | The name of the | instructions |
|---|---|---|
| attribute | appCodeName | Returns the internal name of the browser |
| attribute | appName | Returns the full name of the browser viewer |
| attribute | appVersion | The platform and version information of the browser is displayed |
| attribute | cookieEnabled | Returns a Boolean value indicating whether Conkie is enabled in the browser |
| attribute | platform | Return to the operating system platform where the browser is running |
| attribute | userAgent | Returns the value of the User-Agent header sent by the client to the server |
| methods | javaEnabled() | Specifies whether Java is enabled in the browser |
In the table above, the most commonly used attribute is userAgent,
Example: Demonstrate the use of userAgent,
<script>
var msg = window.navigator.userAgent;
console.log (msg);
</script>
Copy the codeIn the above code, window.navigator is used to return the value of the USET-Agent header sent by different clients to the server. For example, if the browser is Chorme. Firefox or Internet Explorer, the result is as follows.
- ( 1 ) Chrome
Mozilla/5.0 (windows NT 6.1; win64; x64) AppleWebkit/537.36 (KHTML, like Gecko)Chrome/77.03865.75. Safari/537.36
Copy the code(2) Firefox
Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:69.0) Gecko/20100101 Firefox/69.0
Copy the code- ( 3 ) IE
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR2.050727.; .NET CLR 3.530729.; .NET CLR 3.030729.; Media Center PC 6.0; . NET4.0 C; . NET4.0 E; InfoPath3.)
Copy the code8.7 the history object
The history object provided in the BOM can operate on the history of urls accessed by users in the browser. For security reasons, the history object cannot directly retrieve the URL that the user browsed, but it can control the browser to implement “back” and “forward” functions.
Properties and methods of the history object
| classification | The name of the | instructions |
|---|---|---|
| Attribute length | Returns the number of urls in the history list | |
| methods | back() | Load the previous URL in the history list |
| methods | forward() | Load the next URL in the history list |
| methods | go() | Load a specific page in the history list |
The go() method can complete arbitrary jump of history records according to different parameter Settings. When the parameter value is a negative integer, it indicates the number of pages specified by “back”. When the parameter value is a positive integer, indicates the number of pages specified by “forward”.
🌊🌈
HTML Getting Started Guide learning Column “Finished” :
A Ken HTML, CSS introduction guide (a)_HTML basics a Ken HTML, CSS introduction guide (b)_HTML page elements and attributes a Ken HTML, CSS introduction guide (c)_ text style attributes Ken HTML, CSS introduction guide (four)_CSS3 selector Ken HTML, CSS introduction guide (five)_CSS box model Ken HTML, CSS introduction guide (six)_CSS box model Ken HTML, CSS introduction guide (seven)_CSS box model Ken’s Getting Started with HTML and CSS (8)_CSS box model Ken’s Getting Started with HTML and CSS (9)_ Floating and Positioning Ken’s Getting Started with HTML and CSS (10)_ Floating and Positioning Ken’s getting Started with HTML and CSS (11)_ Floating and positioning Ken’s introduction to HTML and CSS (12)_ The application of forms The introduction to HTML and CSS (13)_ the application of forms (14)_ the application of forms the introduction to HTML and CSS (15)_ the application of forms Ken’s introduction to HTML and CSS (16) _ Multimedia Technology (17) _ Multimedia technology challenge the minimum time to bring you into HTML (18) challenge the minimum time to bring you into HTML (20)
Javascript Getting Started Guide Learning Column “In update” :
Suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (a) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (2) suggest collection 】 【 share | JS dry challenge the shortest time to take you into the JS (3) the share | JS dry Recommended collection 】 challenge the shortest time take you into the JS (4) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (5) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (6) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (7) Suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (eight) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (nine) suggest collection 】 【 share | JS dry challenge the shortest time to take you into the JS (10) 【 share | JS dry goods Recommended collection 】 challenge the shortest time take you into the JS (11) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (12) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (13) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (14) Suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (15) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (16) suggest collection 】 【 share | JS dry challenge the shortest time to take you into the JS (17) 【 share | JS dry goods Recommended collection 】 challenge the shortest time take you into the JS (18) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (19) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (20) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (21) Suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (22) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (23) suggest collection 】 【 share | JS dry challenge the shortest time to take you into the JS (24) 【 share | JS dry goods Recommended collection 】 challenge the shortest time take you into the JS (25) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (26)
🌊🌈 About postscript:
Thank you to meet hello I am Ken personal wechat: WLPChaojiBang Have questions please feel free to communicate with me, a person can go fast, but a group of people can go farther! “Attention” : improve learning efficiency! 👍🏻 : original is not easy, appropriate encouragement! ⭐ : Collect articles, review the old and learn the new! 💬 : Comment exchange, common progress!