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陷阱题
Feb 07 Javascript
JS原型对象通俗&quot;唱法&quot;
Dec 27 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
轮播的简单实现方法
Jul 28 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
解决vue的变量在settimeout内部效果失效的问题
Aug 30 Javascript
Vue.js中的组件系统
May 30 Javascript
JavaScript实现点击出现子菜单效果
Feb 08 Javascript
Vue3.0 手写放大镜效果
Jul 25 Vue.js
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用正则表达式匹配URL的简单方法
2013/11/12 PHP
php生成随机颜色的方法
2014/11/13 PHP
php中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
2017/07/31 PHP
jquery 防止表单重复提交代码
2010/01/21 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
2017/10/09 jQuery
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
对Vue beforeRouteEnter 的next执行时机详解
2018/08/25 Javascript
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
详细介绍Python中的偏函数
2015/04/27 Python
Python判断两个对象相等的原理
2017/12/12 Python
django启动uwsgi报错的解决方法
2018/04/08 Python
浅谈Tensorflow由于版本问题出现的几种错误及解决方法
2018/06/13 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
Flask框架路由和视图用法实例分析
2019/11/07 Python
HTML5中新标签和常用标签详解
2014/03/07 HTML / CSS
naturalizer加拿大官网:美国娜然女鞋
2017/04/04 全球购物
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
GafasWorld西班牙:购买太阳镜、眼镜和隐形眼镜
2019/09/08 全球购物
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
什么是类的返射机制
2016/02/06 面试题
工作中的自我评价如何写好
2013/10/28 职场文书
活动总结的格式
2014/05/07 职场文书
品质口号大全
2014/06/17 职场文书
员工考勤管理制度
2015/08/06 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang
SQL SERVER实现连接与合并查询
2022/02/24 SQL Server