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 相关文章推荐
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
浅谈JavaScript function函数种类
Dec 29 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 Javascript
Json按某个键的值进行排序
Dec 22 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
浅谈Vue数据绑定的原理
Jan 08 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
Jul 04 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
May 16 Javascript
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
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
全国FM电台频率大全 - 26 西藏自治区
2020/03/11 无线电
我的论坛源代码(二)
2006/10/09 PHP
php实现的漂亮分页方法
2014/04/17 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
有关于eclipse配置spket需要注意的一些地方
2013/04/07 Javascript
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
Script标签与访问HTML页面详解
2014/01/10 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
js获取鼠标位置实例详解
2015/12/09 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
浅谈Koa服务限流方法实践
2017/10/23 Javascript
JS打印彩色菱形的实例代码
2018/08/15 Javascript
js尾调用优化的实现
2019/05/23 Javascript
微信小程序使用字体图标的方法
2019/05/23 Javascript
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
基于Python实现的ID3决策树功能示例
2018/01/02 Python
Django使用中间键实现csrf认证详解
2019/07/22 Python
python issubclass 和 isinstance函数
2019/07/25 Python
python关于倒排列的知识点总结
2020/10/13 Python
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
2013/02/04 HTML / CSS
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
以幸福为主题的活动方案
2014/08/22 职场文书
单位考核聘任报告
2015/03/02 职场文书
初中政治教师教学反思
2016/02/23 职场文书
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle