foreword
The role of this video teaching is limited to students who need to get started with 0 basics. The blogger will plan other courses in the later stage. If you do
n’t understand the video or have any questions, please contact me directly. I will answer
the courseware information. You can join the self-study study group, learn with your peers, and communicate more conveniently
vx search public account [Front-end New Weather] If you have my WeChat, please be sure to fill in the remarks (B station-name)
Courseware code address https://github.com/haojiey/js-Introductory-courseware
what can be learned
- Output console information
- output html content
- browser alert box
- browser question box
JavaScript can output data in different ways:
- Use alert() to pop up an alert box.
- Use the confirm() function to pop up a dialog box;
- Use the document.write() method to write content to the HTML document.
- Write to an HTML element using innerHTML .
- Use console.log() to write to the browser's console.
alert()
The alert() function can pop up a prompt box in the browser. In the prompt box, we can define the content to be output.
The alert() function is a function under the window object
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
confirm()
J pops up a prompt box in the browser window, and the prompt box includes a "OK" and "Cancel" button. If the "OK" button is clicked, the confirm() function will return a Boolean value true, and if the "Cancel" button is clicked, the confirm() function will return a Boolean value false.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
var res = window.confirm("这里是要显示的内容");
if(res == true){
alert("点击了“确定”按钮");
}else{
alert("点击了“取消”按钮");
}
</script>
</body>
</html>
innerHTML
innerHTML means to access an HTML element from JavaScript, and then insert content into the element
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
</html>
document.getElementById("demo") is JavaScript code that uses the id attribute to find an HTML element.
innerHTML = "paragraph modified." is the JavaScript code used to modify the HTML content (innerHTML) of the element.
document.write()
Write content to the html document
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
document.write(Date());
}
</script>
</body>
</html>
console.log()
Use F12 in the browser to enable debug mode, and click the “Console” menu in the debug window.
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>