JS commonly used in the three categories of output

Console control output in the browser console

1, the console. The log ()

  • Console.log () outputs on the console,
  • Features: Output data of any data type, the console display is the corresponding data type
     console.log('aaa');
     console.log({name:"liling"});
Copy the code

Output on the console is:

2, the console. Dir ()

  • Console.dir () prints details about an object or a value.
Let arr = {name: 'cloud ', age: 20} console.dir(arr);Copy the code

Output on the console is:

  • Difference from console.log() : console.log() can print multiple values at once, but console.dir() cannot print only one value at a time.
The function func () {} the console. The log (func, 100200); console.dir(func);Copy the code

Output in the console is:

You can see that console.dir() prints the details of an object or a value, and can only print one value at a time.

3, the console table ()

  • Console.table () outputs multidimensional JSCON data as a table.
Let arr = [{id: 1, name: 'yunduo}, {id: 2, name:' clouds'}]. console.table(arr);Copy the code

Output on the console is:

4, the console. Time ()/timeEnd ()

  • Calculate the elapsed time between time and timeEnd for all programs to execute (estimated time: due to current computer performance).
console.time('AA'); for(let i = 0; i < 99999; i++){} console.timeEnd('AA');Copy the code

Output on the console is:

5, the console. Warn ()

  • Console.warn () is printed as a warning.
Console. warn(' Current operation not standard! ');Copy the code

Output on the console is:

2. A window dialog box is displayed

Window An information dialog box is displayed in the browser window, in which the specified information is displayed.Copy the code

1. Alert () prompt box

  • Wait until the Alert pops up and hits OK to close before the code continues (alert/confirm/ Prompt prevents the main thread from rendering).
  • Whatever alert pops up will be converted to a string by default.
Alert (' Hello! '); console.log(100); Alert (10, 30 []); Alert ({name:' cloud '}); //-> "[object object]"Copy the code

When I hit OK, I’ll print 100 in the console,

Array to string:

Convert a normal object to a string:

2. Confirm () Confirm the cancel prompt box

  • Confirm, as opposed to Alert, gives the user the option to confirm or cancel.
  • You can create a variable that receives the result of the user’s selection. Click OK to return true, and click Cancel to return flase.
Let flag = confirm(' Do you have class today? '); console.log(flag);Copy the code

I’ll hit OK, and I’ll say true in the console,

Click Cancel, output flase in the console,

3, prompt() add a reason to confirm

  • Prompt provides the user with information such as the reason for the writing operation based on confirm.
  • Create a variable named “reason”, click “Cancel”, “Reason” returns null, click “OK”, “Reason” returns the user input reason and other information.
Let reason = prompt(' Do you want to delete this message? '); console.log(reason);Copy the code

Enter 123 and click OK. The output is 123.

Click Cancel and the output is NULL.

Insert content into the container specified by the page

Document. write Input to the page

  • The content is written to the page, and as with the alert, the content is eventually converted to a string and then written.
document.write('AA'); document.write(10); Document. The write ({name: "clouds"}); AA10[object object] AA10[object object]Copy the code

The result is:

2. InnerHTML inputs content to the container specified for the page

  • InnerHTML: Inserts contents into the specified container. The inserted information is also changed to a string before insertion.
  • InnerHTML: overwrites the contents of the previous container. To append, += is used.
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" < span style> #box{border: 1px solid lightcoral; border-box: 0px; border-box: 0px; border-box: 0px; border-box: 0px; border-box: 0px; border-box: 0px; background-color: lightblue; width: 200px; height: 200px; } < / style > < / head > < body > < div id = "box" > < / div > < script > box. The innerHTML = "colored"; Box. InnerText = "cloud "; //=> Overwrite all the original content box.innerhtml += "color "; Box. InnerText += "cloud "; </script> </body> </ HTML >Copy the code

Results:

3. InnerText Inputs content into the container specified for the page

InnerText has the same features as inner HTML:
  • To insert the contents of the specified container, the inserted information will also become a string before insertion.
  • It overwrites the contents of the previous container, and if you want to append, you use +=.
The only difference between innerText and innerHTML is:

InnerText treats everything as normal text, while innerHTML recognizes and renders the tag text.

< span style = "box-sizing: border-box; color: RGB (74, 74, 74); < span style = "box-sizing: border-box; box-sizing: border-box;Copy the code

4, Value to enter content into the page form element

  • Assigns a value to the text box on the page.
<input type="text" id = "userName"> <script> let userName = document.getElementById('userName'); UserName.Value = "Come on, everybody!" ; </script>Copy the code