松软科技带你学前端:JavaScript 输出

JavaScript 不提供任何内建的打印或显示函数。

JavaScript 显示方案

JavaScript 能够以不同方式“显示”数据:

  • 使用 window.alert() 写入警告框
  • 使用 document.write() 写入 HTML 输出
  • 使用 innerHTML 写入 HTML 元素
  • 使用 console.log() 写入浏览器控制台

使用 innerHTML

如需访问 HTML 元素,JavaScript 可使用 document.getElementById(id) 方法。

id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容:

实例

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<p id="demo"></p>

<script>
 document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html> 

使用 document.write()

出于测试目的,使用 document.write() 比较方便:

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<script>
document.write(5 + 6);
</script>

</body>
</html> 

使用 window.alert()

您能够使用警告框来显示数据:

实例

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html> 

使用 console.log()

在浏览器中,您可使用 console.log() 方法来显示数据。

请通过 F12 来激活浏览器控制台,并在菜单中选择“控制台”

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<script>
console.log(5 + 6);
</script>

</body>
</html>

文章来源:松软科技(www.sysoft.net.cn)

原文地址:https://www.cnblogs.com/sysoft/p/11610903.html

时间: 2024-10-16 05:38:08

松软科技带你学前端:JavaScript 输出的相关文章

松软科技带你学开发:SQL--FIRST() 函数

FIRST() 函数(原文链接 松软科技:www.sysoft.net.cn/Article.aspx?ID=3731) FIRST() 函数返回指定的字段中第一个记录的值. 提示:可使用 ORDER BY 语句对记录进行排序. SQL FIRST() 语法 SELECT FIRST(column_name) FROM table_name SQL FIRST() 实例 我们拥有下面这个 "Orders" 表: O_Id OrderDate OrderPrice Customer 1

菜鸟学前端--javascript基础

在学习过css相关的知识,有了前端工程师的一些基础知识.但要较好的掌握前端,必须要学习好javascript的知识. 下面将从基本语法.变量.关键字.保留字.语句.函数.BOM等角度阐释. 一.基本语法 javacript作为一种面向对象的.脚本级的轻量语言,与java一脉相承. 命名:区分大小写,弱类型定义(一般采用var,不限制类型). 行末分号可有可无(从经验上来看,推荐写,可以提高代码阅读质量). 括号用于代码段. 注释与C.java类型,单行用"//",段注释用"/

JavaScript 语法:松软科技前端教程

JavaScript 语法是一套规则,它定义了 JavaScript 的语言结构. var x, y; // 如何声明变量 x = 7; y = 8; // 如何赋值 z = x + y; // 如何计算值 JavaScript 值 JavaScript 语句定义两种类型的值:混合值和变量值. 混合值被称为字面量(literal).变量值被称为变量. JavaScript 字面量 书写混合值最重要的规则是: 写数值有无小数点均可: 15.90 10011 字符串是文本,由双引号或单引号包围: "

15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码)

15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码) 前言 设计模式是一个程序员进阶高级的必备技巧,也是评判一个工程师工作经验和能力的试金石.设计模式是程序员多年工作经验的凝练和总结,能更大限度的优化代码以及对已有代码的合理重构.作为一名合格的前端工程师,学习设计模式是对自己工作经验的另一种方式的总结和反思,也是开发高质量,高可维护性,可扩展性代码的重要手段. 我们所熟知的金典的几大框架,比如jquery, react, vue内部也大量应用了设计模式, 比如观察

跟我学《JavaScript高程3》,开讲啦……

定制了一个电脑桌,周末师傅过来组装的.买了一把椅子,快递在路上,明天到.这样硬件就准备的差不多,可以开始录制前端课程教程视频 了. 加了很多前端的QQ群,很多同学在自学,也有报名参加培训机构的.每天会有同学问各种问题,每次看见了我都会认真回答,想尽可能的帮助他们一下.因为我曾经学习的时候,也是这样过来的.知道初学者的痛苦,有时候一个很简单的问题,卡住了,就是半天或者一天,或者更久.怎么也想不明白,如果有人指点一下,该多好. 身边的朋友也经常在QQ里面问我一些问题,很多都是思路问题,基础语法问题.

前端javascript模板

doT.js——前端javascript模板引擎问题备忘录 我手里维护的一个项目,遇到一个问题:原项目的开发人员在Javascript中,大量的拼接HTML,导致代码极丑,极难维护.他们怎么能够忍受的了这么丑陋.拙劣的代码呢,也许是他们的忍受力极强,压根就没想去寻找解决方法. 可是,我,是万难不能接受这种丑陋的解决方式的.有没有优雅的解决方法呢,于是在网上搜索到了doT.js. 主页很简洁,就一个页面,研究了一下,就顺利的上手了,相当的简单易用.主要分两步走. 1.写模板 写模板,就用官方文档里

跟我学《JavaScript高程3》第三讲,课程笔记

跟我学<JavaScript高程3> 第三讲:第4章 课程制作:bling,兴哥,5年Java,3年前端 课程知识:JavaScript.Html.Css 课程目标:前端体系课程,逐步深入,找到一份前端工作    课程大纲:本书目录结构 适合人群:前端初学者,可以0基础,但要认真,踏实 课程回顾 1.数据类型:5种基本类型,1中复杂类型. 2.操作符:需要注意运算优先级,算关逻条赋逗. 3.语句:if-else.for.for-in.while 4.函数:函数定义,目前的两种方法 补充:变量在

跟我学《JavaScript高程3》第一讲,课程笔记

跟我学<JavaScript高程3> 第一讲:第1~3章 课程制作:bling,兴哥,5年Java,3年前端 课程知识:JavaScript.Html.Css 课程目标:前端体系课程,逐步深入,找到一份前端工作    课程大纲:本书目录结构 适合人群:前端初学者,可以0基础,但要认真,踏实 回答几个问题 1.为什么要学习前端?JavaScript有哪些用处?为什么要讲这本书? 移动互联网是未来的趋势,移动设备H5开发带动了前端趋势,今后App基本都是Native+H5实现. 页面效果,数据交互

我要带徒弟学JAVA架构 ( 写架构,非用架构 )

我要带徒弟学JAVA架构 (写架构.非用架构) 非常多人做java开发2,3年后.都会感觉自己遇到瓶颈. 什么都会又什么都不会.怎样改变困境,为什么非常多人写了7,8年还是一个码农,工作中太多被动是由于不懂底层原理. 公司的工作节奏又比較快,难有机会学习架构原理,也没人教.所以这个时候,学习架构原理,扩展思维,对自己以后职业生涯尤为重要. 相同公司的两个新人,一个新人一点就通.学东西非常快,有的人.学东西非常慢,也非常痛苦,处处都是新技术.为什么?由于那个人懂原理,万物都有规律,掌握了规律学其它