HTML之JavaScript自学笔记(2)
2017-08-10 16:59
369 查看
JavaScript输出
JavaScript 可以通过不同的方式来输出数据:
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
使用window.alert(),你可以弹出警告框来显示数据。
如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法。
请使用 "id" 属性来标识 HTML 元素,并 innerHTML 来获取或插入元素内容:
如果您的浏览器支持调试,你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。
浏览器中使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单。
JavaScript的语句,循环,判断等基本语句和其他编程语言无异,包括注释方法,运算等等。
要注意的几点:
1、定义变量的时候用关键词 var;
2、可以用反斜杠\对语句折行
如:
document.write("你好 \
世界!"); //正确
document.write \
("你好世界!"); //错误3、注意HTML中和JavaScript中注释方法的不同,切勿混淆
JavaScript 可以通过不同的方式来输出数据:
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
使用window.alert(),你可以弹出警告框来显示数据。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h1>我的第一个页面</h1> <p>我的第一个段落。</p> <script> window.alert(5 + 6); <!--如需输出文本,加双引号--> </script> </body> </html>使用innerHTML(操作HTML元素)
如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法。
请使用 "id" 属性来标识 HTML 元素,并 innerHTML 来获取或插入元素内容:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h1>我的第一个 Web 页面</h1> <p id="demo">我的第一个段落。</p> <script> document.getElementById("demo").innerHTML="段落已修改。"; </script> </body> </html>document.write()用法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <h1>我的第一个 Web 页面</h1> <p>我的第一个段落。</p> <script> document.write(Date()); <!--若输入文字请加双引号--> </script> </body> </html>写到控制台:
如果您的浏览器支持调试,你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。
浏览器中使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h1>我的第一个 Web 页面</h1> <p> 浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单。 </p> <script> a = 5; b = 6; c = a + b; console.log(c); </script> </body> </html>
JavaScript的语句,循环,判断等基本语句和其他编程语言无异,包括注释方法,运算等等。
要注意的几点:
1、定义变量的时候用关键词 var;
2、可以用反斜杠\对语句折行
如:
document.write("你好 \
世界!"); //正确
document.write \
("你好世界!"); //错误3、注意HTML中和JavaScript中注释方法的不同,切勿混淆
相关文章推荐
- HTML之JavaScript自学笔记(1)
- HTML之JavaScript自学笔记(3)
- HTML之JavaScript自学笔记(4)
- Html,JavaScript,正则表达式(reg express) 自学笔记
- javascript学习笔记(一) (2007-12-20 11:14:19| 分类: jsp+html+js+Ajax)
- HTML自学笔记(一)
- 【HTML+CSS+JavaScript】网页实战开发笔记之二—关于Web标准,你不能不知道的事
- 自学javascript笔记_自用_解析W3school的代码_创建删除节点
- HTML之jQuery自学笔记(五)
- WebViewJavascriptBridge使用(ios自学笔记)
- javascript全面理解笔记(三)-动态 HTML和动画
- JavaScript学习笔记——事件(转自:http://www.blogjava.net/amigoxie/archive/2007/08/27/139711.html)
- JavaScript:学习笔记(1)——在HTML中使用JS
- html,css,javascript,jquery使用笔记
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第22讲_js三大流程控制(顺序流程、分支控制、循环控制)_学习笔记_源代码图解_PPT文档整理
- 自学android, java, html, css, php, mysql, javascript路线
- html自学笔记6——表格
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第31讲_this关键字详解_学习笔记_源代码图解_PPT文档整理
- Javascript自学笔记2(数组)
- 【HTML+CSS+JavaScript】网页实战开发笔记之二—关于Web标准,你不能不知道的事