In
JavaScript, the following methods are generally used to output data:
JavaScript Basics to Advanced
Canvas Game Development
Native JavaScipt Case Collection
JavaScript + DOM Basics
1. In the console output of the browser
Browser F12 to open the browser console (generally, the necessary browser for front-end developers is Google Chrome, and the following uses Google Chrome as an example to analyze the console carefully);
-
Elements: The elements in the page are all in this, often used to adjust the style of the page
-
Network: Contains all resource files (html, css, js, pictures, data interfaces requested from the background, etc.), and tells us the event of each file loading completion; so that we can optimize resources that take too long to load
-
Sources : Contains all the source codes of html, js, and css in our project. Many programmers use it when picking up some excellent website codes
-
Resources : Data stored locally on the current website (cookie, localStorage, sessionStorage)
-
Console : The data output from the current page to the console is displayed here
-
Toggle device toolbar: There is a mobile phone and PC conversion icon button in the upper left corner of the console. Click it to enter the mobile phone simulator. There are options to simulate the mobile phone size of various mainstream mobile phone models. You can also customize and add the corresponding mobile phone size ; Our mobile development is done in this simulator
-
We can also use the console to add breakpoints to js code for page bug
debugging
well, let's get back to business. Above we have a deep understanding of the console, so how to output data in the browser console?
console.log();
console.info();
console.debug();
console.warn();//输出警告信息
console.error();//输出错误信息
console.dir();//输出一个对象的详细信息
console.table();//将json数据按照表格的形式输出，这样在查看结构时能够更加的清晰直观
2. Write content to an element in the page
element.innerHTML、element.innerTexT
Example:
var oEle = document.getElementById(''oId");
oEle.innerHTML = "<strong>加点料，更直观！！</strong>"
The above two usages are the same, so what is the difference between them?
- Firefox (Firefox) does not support innerText, but innerHTML does not have browser compatibility issues.
- innerText can only add text, even if there are html tags, it cannot be effectively recognized, but written into the element as text; while innerHTML can not only add text, but also add html tags
- Generally, in js projects, developers use innerHTML uniformly, and basically do not use innerText
3. Pop up the content that needs to be displayed on the page
window.alert(); //j警告框，确保用户收到消息
window.confirm(); //确认框，返回用户操作的布尔值
window.prompt(); //提示框，根据给出的提示让用户输入信息并返回
Tip: For the above three, the previous window can be omitted, and use alert(), confirm(), prompt() directly
4. Output content directly to the page
document.write();
Tip: Compared with the above three data output methods, it is generally not recommended to use the fourth method; the fourth method can be used to add an advertisement to the page