JavaScript基本使用、JavaScript 输出

JavaScript是一种跨平台的脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。

平台：一般指的是运行环境，这里指的是操作系统

跨平台：就是在很多种操作系统中都可以运行

脚本语言：特点是不能独立运行，需要依赖于网页。

浏览器也是html解析器浏览器打开的都是html的页面

javascript他必须写在html中和css一样

ps：JavaScript程序的运行离不开HTML，HTML的运行离不开浏览器。

JavaScript应用场景

表单验证
网页动态效果（轮播，漂浮的广告）
记住用户名字和密码
游戏开发-经典案例俄罗斯方块
只要你看到页面中有数据的变化或者动态的效果都是js来实现的

JavaScript 构成

ECMAScript 是 JavaScript 的标准，但它并不等同于 JavaScript，也不是唯一被标准化的规范。

实际上，一个完整的 JavaScript 实现由以下 3 个不同部分组成：

核心（ECMAScript）：语言核心部分--基础语法。
文档对象模型（Document Object Model，DOM）：网页文档操作标准--利用js基础来实现各种动态效果。
浏览器对象模型（BOM）：客户端和浏览器窗口操作基础--浏览器窗口的使用并不重要。

JavaScript基本使用

基本使用
变量
流程控制语句
数组
函数
对象

（1）在 HTML 中，JavaScript 代码必须位于<script>与 </script> 标签之间。

<script>
alert('这是我们的第一个js代码')；
</script>

注释：旧的 JavaScript 例子也许会使用 type 属性：<script type="text/javascript">。

注释：type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。

（2）<body>或者<head>中的JavaScript

脚本可被放置与 HTML 页面的<body> 或 <head>部分中，或兼而有之。

body 部分中的脚本: 当页面被加载时执行的脚本放在HTML的body部分。放在body部分的脚本通常被用来生成页面的内容。

head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分中时，可以保证脚本在任何调用之前被加载。

body 和 head 部分可同时有脚本:文件中可以在body和head部分同时存在脚本

总结：js文件放到哪里更好？

浏览器对html页面内容的加载是顺序加载，也就是在html页面中前面先加载。当浏览器加载html文件并解析到<head>时,<body>并没有被解析,浏览器会等到<head>中的js部分执行完再加载页面。

如果把javascript放在head里的话，则先被解析,但这时候body还没有解析。（常规html结构都是head在前，body在后）如果head的js代码是需要传入一个参数（在body中调用该方法时，才会传入参数），并需调用该参数进行一系列的操作，那么这时候肯定就会报错，因为函数该参数未定undefined

从JavaScript对页面下载性能方向考虑：由于脚本会阻塞其他资源的下载（如图片等）和页面渲染，直到脚本全部下载并执行完成后，页面的渲染才会继续，因此推荐将所有的<script>标签尽可能放到<body>标签的底部，以尽量减少对整个页面下载的影响。

（3）引入外部脚本文件

JS程序不仅可以直接写在HTML文档中，也可以放在JavaScript文件中。后缀名是.js。使用任何文本编辑器都可以编辑。
JS文件不能够单独运行，需要使用 <script>标签导入到网页中。
定义src属性的<script>标签不应该再含有JavaScript代码，否则只会下载并执行外部JavaScript文件，嵌入代码被忽略。

1）创建一个js文件，名称为first.js
2) 引入js文件
<html>
<head>
<title></title>
</head>
<body>
<script src='first.js'></script>
</body>
</html>

注意：在外部文件中放置脚本有如下优势：

分离了 HTML 和js代码
使 HTML 和 JavaScript 更易于阅读和维护
已缓存的 JavaScript 文件可加速页面加载

（4）延迟执行JS-defer

<script>标签有一个布尔型属性defer，这个属性的用途是表明脚本在执行时不会影响页面的构造，也就是说，脚本会被延迟到整个页面都解析完成后再运行。
因此在script元素中设置defer属性，相当于告诉浏览器立即下载，但是延迟执行
如果页面中有多个延迟脚本，那么第一个延迟脚本会先于第二个延迟脚本执行
适用于外部JS文件，不适用于script标签包含的脚本

（5）异步加载JS文件-async

在默认情况下，网页都是同步加载外部 JavaScript文件的，在引入外部js文件时会阻塞dom的执行，为此在html4.01为script标签引入了async属性
现在可以为<script>标签设置 async属性，让浏览器异步加载 Javascript文件，即表示应该立即下载脚本，但不应妨碍页面汇总的其它操作。只对外部脚本文件有效。
因为是下载完立即执行，不能保证多个加载时的先后顺序，因此确保异步脚本之间互不依赖

（6）扩展：async&defer

1.没有设置任何属性的script

HTML文件将被解析，直到脚本文件被下载为止，同时将停止解析，发起请求去提取script文件（如果是外部文件）。下载并执行完成后将在恢复解析HTML。

2.设置了defer属性

设置defer属性会在HTML解析的同时下载script，并在完成HTML解析和script下载之后执行该文件，同时设置了defer的脚本会按照他们在文档里面出现的顺序执行。

3.设置了async属性

设置async属性会在HTML解析期间下载script文件，并在完成下载后暂停HTML解析器以执行该文件。

JavaScript 输出

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

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

1.alert：您能够使用警告框来显示数据：在alert()的里写单引号或者双引号都可以

<!DOCTYPE html>
<html><body><script>//和alert是一样的，后续window对象时候讲解window.alert('故事里的小黄花');</script></body>
</html>

2.document.write

1) 可以向HTML输出流中插入你传入的内容，浏览器会按着HTML元素依次顺序依次解析它们，并显示出来。

<!DOCTYPE html>
<html><body><script>document.write('从出生那年就飘着');</script></body>
</html>

2) 需要注意的是，如果在文档加载完成后（即HTML输出已完成），再使用document.write()方法来要求浏览器来解析你的内容，则浏览器就会重写整个document，导致最后的这个document.write()方法输出的内容会覆盖之前所有的内容

<!DOCTYPE html>
<html><body><h6>淡黄的长裙</h6><h6>蓬松的头发</h6><button onclick="document.write('<h1>什么玩意儿</h1>')">试一试</button></body>
</html>

3.innerHTML：id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容：

<!DOCTYPE html>
<html><body><p id="demo"></p><script>document.getElementById("demo").innerHTML = '我们的开始，是漫长的电影';</script></body>
</html>

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

<!DOCTYPE html>
<html><body><p id="demo"></p><script>console.log('苍茫的天涯是的爱');</script></body>
</html>

JavaScript基本使用、JavaScript 输出相关推荐

javascript控制台_超越控制台日志3种在javascript中格式化控制台输出的方法
javascript控制台 As JavaScript developers, we intuitively use console.log() to debug, print out variabl ...
js复习：输出语句，js要不要写标点符号，let ,const(常量)，JavaScript 数组，JavaScript 对象
js复习 1.输出语句 console.log() ,console.dir(),window.alert() 2.js要不要写标点符号? 3.let ,const(常量) 4.JavaScript ...
JavaScript基础 - 字符串倒序输出
目录: 方案一:字符串转数组,反转数组,数组转字符串. 方案二:循环遍历字符串方案三:使用到模拟栈的数组pop/push方法扩展 : 1. JavaScript模拟栈操作 2. 数组`revers ...
JavaScript基础语法（输出语句）
JavaScript基础语法(输出语句) 学习路线:JavaScript基础语法(输出语句)->JavaScript基础语法(变量)->JavaScript基础语法(数据类型)->J ...
JavaScript强化教程——JavaScript Math（算数）对象
为什么80%的码农都做不了架构师?>>> 本文为 H5EDU 机构官方 HTML5培训教程,主要介绍:JavaScript强化教程 -- JavaScript Math(算数 ...
JavaScript 逆向 ( 一 ) --- JavaScript 语法基础
js 逆向:https://www.cnblogs.com/wuxianyu/category/1940304.html js逆向2:https://www.cnblogs.com/wuxianyu/ ...
视频教程-JavaScript全套课程-JavaScript
JavaScript全套课程拥有6年web前端和后端开发经验,4年授课经验,还曾在百度专业培训过网络营销课程,曾就职于联想集团和当当网,不仅有丰富的项目实战经验还有营销经验,综合实力较强,后入北京市 ...
JavaScript简介及JavaScript中的关键保留字、变量和数据类型
1. JavaScript简介 JavaScript 诞生于 1995 年.它当时的目的是为了进行表单输入的验证.因为在 JavaScript 问世之前,表单的验证都是通过服务器端验证的.而当时都是电 ...
轻松学习JavaScript十一：JavaScript基本类型(包含类型转换)和引用类型
一值的类型早在介绍JS的数据类型的时候就提到过基本类型和引用类型,不过在说两种类型之前,我们先来了解一下变量的值的类型.在ECMAScript中,变量可以存在两种类型的值,即原始值和引用值. (1 ...
javaScript系列 [05]-javaScript和JSON
本文输出和JSON有关的以下内容 JSON和javaScript JSON的语法介绍 JSON的数据类型 JSON和XMLHTTPRequest JSON的序列化和反序列化处理 1.1 JSON和ja ...

JavaScript基本使用、JavaScript 输出

JavaScript 构成

JavaScript基本使用

JavaScript 输出

JavaScript基本使用、JavaScript 输出相关推荐

最新文章

热门文章