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 相关文章推荐
如何确保JavaScript的执行顺序 之实战篇
Mar 03 Javascript
JavaScript单元测试ABC
Apr 12 Javascript
Backbone.js中的集合详解
Jan 14 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
Feb 06 Javascript
jQuery插件formValidator实现表单验证
May 23 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
May 28 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 Javascript
Vue+Element使用富文本编辑器的示例代码
Aug 14 Javascript
vue路由组件按需加载的几种方法小结
Jul 12 Javascript
微信小程序实现吸顶效果
Jan 08 Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 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把JPEG图片转换成Progressive JPEG的方法
2014/06/30 PHP
php筛选不存在的图片资源
2015/04/28 PHP
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
Javascript技术难点之apply,call与this之间的衔接
2015/12/04 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
Vue实现购物车功能
2017/04/27 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
简述JS控制台的使用
2018/07/15 Javascript
layui 解决form表单点击无反应的问题
2019/10/25 Javascript
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
浅析Python四种数据类型
2018/09/26 Python
在Python中实现shuffle给列表洗牌
2018/11/08 Python
Python转换字典成为对象,可以用&quot;.&quot;方式访问对象属性实例
2020/05/11 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
Python高并发和多线程有什么关系
2020/11/14 Python
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
365 Tickets英国:全球景点门票
2019/07/06 全球购物
个人简历自我鉴定
2013/10/11 职场文书
个人找工作的自我评价
2013/10/17 职场文书
应届毕业生求职信范例分享
2013/12/17 职场文书
办理护照介绍信
2014/01/16 职场文书
2015新年寄语(一句话)
2014/12/08 职场文书
拾金不昧感谢信
2015/01/21 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书
2015年教师教学工作总结
2015/04/28 职场文书
毕业论文致谢范文
2015/05/14 职场文书
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang
Unicode中的CJK(中日韩统一表意文字)字符小结
2021/12/06 HTML / CSS