苏飞论坛

标题: 【零基础学习web前端】JavaScript 显示方式 [打印本页]

---

作者: Amy    时间: 2018-12-11 16:38
标题: 【零基础学习web前端】JavaScript 显示方式
【零基础学习web前端】JavaScript 显示方式

【零基础学习web前端】教程目录导航

http://www.sufeinet.com/thread-24027-1-1.html

JavaScript 可以通过不同的方式来输出数据：

• 使用 window.alert() 弹出警告框。
• 使用 document.write() 方法将内容写到 HTML 文档中。
• 使用 innerHTML 写入到 HTML 元素。
• 使用 console.log() 写入到浏览器的控制台。
  

window.alert() 弹出警告框

---

[HTML] 纯文本查看 复制代码

<h1>苏飞论坛</h1>

<p>JavaScript基础教程</p>

<script>

window.alert("欢迎来到苏飞论坛");

</script>

显示：
(, 下载次数: 114)

上传

点击文件名下载附件    (, 下载次数: 103)

上传

点击文件名下载附件
上图分别为打开页面的弹出，和点击确定以后的显示。

document.write() 方法

---

[HTML] 纯文本查看 复制代码

<h1>苏飞论坛</h1>

<p id="sufei">JavaScript基础教程</p>

<script>

document.getElementById("sufei").innerHTML="段落已修改。";

</script>

(, 下载次数: 92)

上传

点击文件名下载附件
可以看到JavaScript语句把p标签元素的内容修改了。

innerHTML 写入到 HTML 元素

---

[HTML] 纯文本查看 复制代码

<h1>苏飞论坛</h1>

<p id="sufei">JavaScript基础教程</p>

<script>

document.write(Date());

</script>

(, 下载次数: 100)

上传

点击文件名下载附件

console.log() 写入到浏览器的控制台

---

浏览器中使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。

[HTML] 纯文本查看 复制代码

<h1>苏飞论坛</h1>

<script>

a = 5;

b = 6;

c = a + b;

console.log(c);

</script>

(, 下载次数: 94)

上传

点击文件名下载附件

---

作者: 站长苏飞    时间: 2018-12-11 16:44
我只是路过打酱油的。

---

作者: 竹林风    时间: 2018-12-11 17:40
楼主加油，我们都看好你哦。

---

作者: liu    时间: 2018-12-11 17:41
感恩无私的分享与奉献

---

作者: 惜    时间: 2018-12-13 14:18
强烈支持楼主ing……

---

欢迎光临 苏飞论坛 (http://www.sufeinet.com/)

Powered by Discuz! X3.4