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函数
Apr 09 Javascript
25个非常棒的jQuery滑块插件和教程小结
Sep 02 Javascript
js中apply方法的使用详细解析
Nov 04 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
jQuery UI插件自定义confirm确认框的方法
Mar 20 Javascript
js实现的下拉框二级联动效果
Apr 30 Javascript
JavaScript设计模式之代理模式详解
Jun 09 Javascript
javascript观察者模式实现自动刷新效果
Sep 05 Javascript
实现两个文本框同时输入的实例
Sep 25 Javascript
使用Vue开发一个实时性时间转换指令
Jan 17 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
Jul 19 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 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
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
PHP程序员基本要求和必备技能
2014/05/09 PHP
PHPer 需要了解的 5 个 Composer 小技巧
2014/08/18 PHP
php集成环境xampp中apache无法启动问题解决方案
2014/11/18 PHP
PHP5.5迭代生成器用法实例详解
2016/03/16 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
AJAX架构之Dojo篇
2007/04/10 Javascript
ext for eclipse插件安装方法
2008/04/27 Javascript
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
javascript开发中因空格引发的错误
2010/11/08 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
Node.js的进程管理的深入理解
2019/01/09 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
JavaScript实现京东快递单号查询
2020/11/30 Javascript
python查询mysql中文乱码问题
2014/11/09 Python
Django 路由控制的实现代码
2018/11/08 Python
python获取txt文件词向量过程详解
2019/07/05 Python
python实现通过队列完成进程间的多任务功能示例
2019/10/28 Python
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
2014年社区国庆节活动方案
2014/09/16 职场文书
个人工作表现自我评价
2015/03/06 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书
MySQL为id选择合适的数据类型
2021/06/07 MySQL
Python matplotlib绘制雷达图
2022/04/13 Python
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers