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 相关文章推荐
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
JavaScript计算器网页版实现代码分享
Jul 15 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 Javascript
Bootstrap模态框使用详解
Feb 15 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
Vue 仿QQ左滑删除组件功能
Mar 12 Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 Javascript
谈一谈vue请求数据放在created好还是mounted里好
Jul 27 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采集速度探究总结(原创)
2008/04/18 PHP
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
Laravel框架Eloquent ORM删除数据操作示例
2019/12/03 PHP
PHP 8新特性简介
2020/08/18 PHP
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
JS中 用户登录系统的解决办法
2013/04/15 Javascript
基于JQuery实现的Select级联
2014/01/27 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
使用jQuery和ajax代替iframe的方法(详解)
2017/04/12 jQuery
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
深入解析Python编程中super关键字的用法
2016/06/24 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
PyTorch在Windows环境搭建的方法步骤
2020/05/12 Python
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
管道维修工岗位职责
2013/12/27 职场文书
不服从上级领导安排的检讨书
2014/09/14 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
个人承诺书格式范文
2015/04/29 职场文书
Python超简单容易上手的画图工具库推荐
2021/05/10 Python