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 相关文章推荐
XP折叠菜单&amp;仿QQ2006菜单
Dec 16 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Jun 05 Javascript
JQuery核心函数是什么及使用方法介绍
May 03 Javascript
jQuery Dialog对话框事件用法实例分析
May 10 Javascript
轻松掌握JavaScript中的Math object数学对象
May 26 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
Jun 22 Javascript
老生常谈 js中this的指向
Jun 30 Javascript
jQuery动态改变多行文本框高度的方法
Sep 07 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 Javascript
如何理解Vue的render函数的具体用法
Aug 30 Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
vue element项目引入icon图标的方法
Jun 06 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中的外观模式facade pattern
2018/02/05 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
JavaScript 学习笔记一些小技巧
2010/03/28 Javascript
javascript JSON操作入门实例
2010/04/16 Javascript
Jquery之美中不足小结
2011/02/16 Javascript
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
Mac地址验证的javascript代码
2013/11/09 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
2013/11/25 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
2016/03/10 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
2016/03/13 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
JS获取html元素的标记名实现方法
2016/10/08 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
Mint UI组件库CheckList使用及踩坑总结
2018/12/20 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
详解Django之auth模块(用户认证)
2018/04/17 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
对Python中数组的几种使用方法总结
2018/06/28 Python
Python获取数据库数据并保存在excel表格中的方法
2019/06/12 Python
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
2014/11/05 HTML / CSS
linux面试题参考答案(3)
2012/09/13 面试题
学习党课思想汇报
2013/12/29 职场文书
先进党支部事迹材料
2014/01/13 职场文书
女生节标语
2014/06/26 职场文书
水利水电专业自荐信
2014/07/08 职场文书
户外活动总结
2015/02/04 职场文书
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL