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 相关文章推荐
jquery Mobile入门—外部链接切换示例代码
Jan 08 Javascript
jquery 快速回到页首的方法
Dec 05 Javascript
原生js模拟淘宝购物车项目实战
Nov 18 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
JavaScript中数组Array.sort()排序方法详解
Mar 01 Javascript
ES6正则表达式扩展笔记
Jul 25 Javascript
Angular2 父子组件通信方式的示例
Jan 29 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 Javascript
jQuery zTree插件使用简单教程
Aug 16 jQuery
vue 将多个过滤器封装到一个文件中的代码详解
Sep 05 Javascript
如何用JavaScript检测当前浏览器是无头浏览器
Apr 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脚本中include文件出错解决方法
2008/11/20 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
控制打印时页眉角的代码
2007/02/08 Javascript
jquery的attr方法禁用表单元素禁用输入内容
2014/06/23 Javascript
JavaScript中switch判断容易犯错的一个细节
2014/08/27 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
JS实现判断移动端PC端功能
2020/02/21 Javascript
Python实现从URL地址提取文件名的方法
2015/05/15 Python
Python+django实现文件下载
2016/01/17 Python
python实现周期方波信号频谱图
2018/07/21 Python
python-opencv 将连续图片写成视频格式的方法
2019/01/08 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
Ajax和javascript的区别
2013/07/20 面试题
技校生自我鉴定
2013/12/08 职场文书
应用心理学个人求职信范文
2013/12/11 职场文书
《逃家小兔》教学反思
2014/02/23 职场文书
妇女干部培训方案
2014/05/12 职场文书
公司外出活动方案
2014/08/14 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
个人专业技术总结
2015/03/05 职场文书
党员发展大会主持词
2015/07/03 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
回复函格式及范文
2015/07/14 职场文书
python用字节处理文件实例讲解
2021/04/13 Python
Python基础之hashlib模块详解
2021/05/06 Python
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python