JavaScript基本的输出和嵌入式写法教程


Posted in Javascript onOctober 20, 2015

JavaScript 没有任何打印或者输出的函数。
在 HTML 中, JavaScript 通常用于操作 HTML 元素。
操作 HTML 元素
如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法。
请使用 "id" 属性来标识 HTML 元素,并 innerHTML 来获取或插入元素内容:
实例

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p id="demo">我的第一个段落</p>

<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

</body>
</html>

以上 JavaScript 语句(在 <script> 标签中)可以在 web 浏览器中执行:

  • document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。
  • innerHTML = "Paragraph changed." 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

写到 HTML 文档
出于测试目的,您可以将JavaScript直接写在HTML 文档中:
实例

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

<script>
document.write(Date());
</script>

</body>
</html>

请使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖。
实例

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

<button onclick="myFunction()">点我</button>

<script>
function myFunction() {
document.write(Date());
}
</script>

</body>
</html>

写到控制台
如果您的浏览器支持调试,你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。
浏览器中使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单。
实例

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>
Javascript 相关文章推荐
js实现页面转发功能示例代码
Aug 05 Javascript
JavaScript匿名函数与委托使用示例
Jul 22 Javascript
js对象继承之原型链继承实例
Jan 10 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
利用Angularjs实现幻灯片效果
Sep 07 Javascript
移动端基础事件总结与应用
Jan 12 Javascript
vue.js之vue-cli脚手架的搭建详解
May 05 Javascript
jquery中each循环的简单回滚操作
May 05 jQuery
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 Javascript
使用原生js写ajax实例(推荐)
May 31 Javascript
javascript实现留言板功能
Feb 08 Javascript
javascript省市级联功能实现方法实例详解
Oct 20 #Javascript
基于JavaScript实现移动端TAB触屏切换效果
Oct 20 #Javascript
js点击文本框后才加载验证码实例代码
Oct 20 #Javascript
javascript实现状态栏中文字动态显示的方法
Oct 20 #Javascript
基于jQuery实现的扇形定时器附源码下载
Oct 20 #Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 #Javascript
JavaScript实现的简单烟花特效代码
Oct 20 #Javascript
You might like
php的curl实现get和post的代码
2008/08/23 PHP
php定义数组和使用示例(php数组的定义方法)
2014/03/29 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
jQuery JSON的解析方式分享
2011/04/05 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
2013/12/17 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
编写高质量JavaScript代码的基本要点
2016/03/02 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
2017/01/03 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
使用yeoman构建angular应用的方法
2017/08/14 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
Django卸载之后重新安装的方法
2017/03/15 Python
Python 加密的实例详解
2017/10/09 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
python 生成图形验证码的方法示例
2018/11/11 Python
Python循环中else,break和continue的用法实例详解
2019/07/11 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
台湾三立电视电商平台:电电购
2019/09/09 全球购物
营业经理岗位职责
2013/11/10 职场文书
房地产项目策划书
2014/02/05 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
社区元宵节活动总结
2015/02/06 职场文书
2016年大学生党员承诺书
2016/03/24 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js
关于Vue中的options选项
2022/03/22 Vue.js