JS的引入

<script>标签

  • 向 HTML 页面中插入 JavaScript 的主要方法,就是使用*<script>*元素
  • 按照传统的做法,所有<script>元素都应该放在页面的<head>元素中
  • 但是现在脚本一般都写在 body 元素紧接着关标签之上
  • 浏览器解析HTML文档的时候，将根据文档流从上倒下逐行解析和显示。JS是HTML组成的一部分，因此JS脚本的执行顺序也是根据<script>书写位置决定的
  • 作为最佳实践，我们会在关闭body标签前引入JavaScript代码。这样浏览器就会在加载脚本之前解析和显示HTML，有利于提升页面的性能
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的引入</title>
</head>
<body>
    <script>
        alert(1);
    </script>
    <script src="./demo1.js"></script>
</body>
</html>

<script>元素属性

  • src :可选。表示包含要执行代码的外部文件。
  • type :可选 一般为 text/javascript。现代浏览器默认脚本类型是JavaScript，因此可以省略type

外部JS文件

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

延迟执行JS-defer

  • <script>标签有一个布尔型属性defer，这个属性的用途是表明脚本在执行时不会影响页面的构造，也就是说，脚本会被延迟到整个页面都解析完成后再运行。
  • 因此在script元素中设置defer属性，相当于告诉浏览器立即下载，但是延迟执行
  • 如果页面中有多个延迟脚本，那么第一个延迟脚本会先于第二个延迟脚本执行，而这些脚本会先于DOMContentLoaded事件执行
  • 适用于外部JS文件，不适用于script标签包含的脚本
//外部引入的js文件
alert("外部引入js+defer");
<!-- 
    看运行结果
        1.head引入js
        2.body末尾引入js
        3.外部引入js+defer
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./01.js" defer></script>
    <script>
        alert("head引入js")
    </script>
</head>
<body>
    <script>
        alert("body末尾引入js")
    </script>
</body>
</html>

异步加载JS文件-async

  • 在默认情况下，网页都是同步加载外部 JavaScript文件的，在引入外部js文件时会阻塞dom的执行，为此在html4.01为script标签引入了async属性
  • 现在可以为<script>标签设置 async属性，让浏览器异步加载 Javascript文件，即表示应该立即下载脚本，但不应妨碍页面汇总的其它操作。只对外部脚本文件有效。
  • 异步脚本不要在加载期间修改DOM，异步脚本语言一定会在页面的load事件前执行，但可能会在DOMContentLoaded事件(DOM渲染完成的监听事件)触发之前或之后执行。
  • 因为是下载完立即执行，不能保证多个加载时的先后顺序，因此确保异步脚本之间互不依赖
<!-- 以下代码在network中测试可见 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet">
    <link href="http://cdn.staticfile.org/foundation/6.0.1/css/foundation.css" rel="stylesheet">
    <script async src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.js"></script>
    <script async src="http://libs.baidu.com/backbone/0.9.2/backbone.js"></script>
    <script async src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
</head>
<body>
   <ul>
       li*1000个
   </ul>
    
</body>
</html>

async&defer

  • 没有设置任何属性的script
    HTML文件将被解析，直到脚本文件被下载为止，同时将停止解析，发起请求去提取script文件（如果是外部文件）。下载并执行完成后将在恢复解析HTML。
  • 设置了defer属性
    设置defer属性会在HTML解析的同时下载script，并在完成HTML解析和script下载之后执行该文件，同时设置了defer的脚本会按照他们在文档里面出现的顺序执行。
  • 设置了async属性
    设置async属性会在HTML解析期间下载script文件，并在完成下载后暂停HTML解析器以执行该文件。

基础调试代码

alert()

  • JavaScript 语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情
  • alert() 语句让浏览器弹出一个窗口，窗口里的内容就是 alert() 中的内容
alert(125);
alert("大帅比");
var sex = "girl";
alert(sex);

console.log()

  • console.log可以打印出你想要看到的信息
  • 包含浏览器的警告和报错和脚本打印内容
console.log("hello world");

document.write()方法

  • 可以向HTML输出流中插入你传入的内容，浏览器会按着HTML元素依次顺序依次解析它们，并显示出来。
  • 需要注意的是，如果在文档加载完成后（即HTML输出已完成），再使用document.write()方法来要求浏览器来解析你的内容，则浏览器就会重写整个document，导致最后的这个document.write()方法输出的内容会覆盖之前所有的内容

javascript 脚本语 js脚本使用教程_HTML

document.write("hello");
document.write("world");
// 点击文档执行事件
document.onclick = function(){
    //当文档解析完成以后执行，会直接覆盖
    document.write("事件发生1");
    document.write("事件发生2");
}

JS基本词法

  • 区分大小写
    JavaScript严格区分大小写，为了避免输入混乱和语法错误，建议采用小写字符编写代码。在以下特殊情况下可以使用大写形式：
  • 构造函数的首字母建议大写
  • 如果标识符由多个单词组成，可以考虑使用骆驼命名法—除首个单词外，后面单词的首字母大写
  • 标识符
  • 标识符指的是变量、函数、属性的名字，或者函数的参数。
  • 标识符命名是有规范的
  • 第一个字符必须是一个字母、下划线（_）或一个美元符号（$），其他字符可以是字母、下划线、美元符号或数字
  • 不能含有空格 不能以关键字或保留字命名

关键字

 

 

 

break

do

instanceof

typeof

case

else

new

var

catch

finally

return

void

continue

for

switch

while

debugger*

function

this

with

default

if

throw

delete

in

try

top

 

保留字

 

 

 

abstract

enum

int

short

boolean

export

interface

static

byte

extends

long

super

char

final

native

synchronized

class

float

package

throws

const

goto

private

transient

debugger

implements

protected

volatile

double

import

public

yield

implements

package

public

interface

private

static

let

protected

  • 注释
    注释就是不被解析的一串字符。 JavaScript注释有以下两种方法
  • 单行注释：
//我是单行注释  快捷键ctrl+/
  • 多行注释：
/*
    我是多行注释 快捷键ctrl+shift+/
*/
  • 语句
  • JS中的语句以一个分号 ; 结尾
//有效的语句 可能会出问题--不推荐
var sum = a + b
//有效的语句--推荐
var sum = a + b;
//花括号结尾可以省略分号--推荐
function sum(a,b){return a + b}
  • 变量
  • 变量相当于容器，值相当于容器内装的东西，而变量名就是容器上贴着的标签，通过标签可以找到变量，以便读、写它存储的值
  • 为一块内存区域起的代号，通过这个代号，程序就可以把对应类型的数据保存到这个内存区域来完成相关计算的要求
  • ECMAScript 的变量是松散类型（弱类型，动态类型）的,所谓松散类型就是可以用来保存任何类型的数据。换句话说, 每个变量仅仅是一个用于保存值的占位符而已
  • 使用变量可以方便的获取或者修改内存中的数据
  • 变量的使用
  • 语法: var关键字 + 变量名称 = 数据 。等号右边的数据给等号左边变量名进行赋值
  • 在一个var语句中，可以声明一个或多个变量，也可以为变量赋值，未赋值的变量初始化为 undefined(未定义)值。当声明多个变量时，应使用逗号运算符分隔
  • 在 JavaScript中，可以重复声明同一个变量，也可以反复初始化变量的值
var name = "xiaowang";

var sex = "女" , age = 18;
var sex2 ;
var sex3 , age2;
var sex4 , age3 = 19;
console.log(sex,age);

var score = 100;
score = 120;
console.log(score);
var score = 150;
console.log(score);
  • JS变量类型的特点
    JavaScript是弱类型语言,对于变量类型的规范比较松散。具体表现如下。
  • 变量的类型分类不严谨、不明确,带来使用的随意性。
  • 声明变量时,不要求指定类型。
  • 使用过程不严格,可以根据需要自动转换变量类型。
  • 变量的转换和类型检查没有一套统一、规范的方法,导致开发效率低下
  • 变量污染
    定义全局变量有3种方式：
  • 在任何函数体外直接使用var语句声明。
  • 直接添加属性到全局对象上。在Web浏览器中,全局作用域对象为 window
  • 直接使用未经声明的变量,以这种方式定义的全局变量被称为隐式的全局变量。

全局变量在全局作用域内都是可见的,因此具有污染性。大量使用全局变量会降低程序的可靠性,用户应该避免使用全局变量

  • 练习
    两个变量的值交换
//普通的做法就是声明多一个临时变量tmp，进行数据交换过程中的缓存。这样的做法直观，易懂。但是，会增加内存的使用。
    var a = 1,
        b = 2,
        tmp;
 
    tmp = a;
    a = b;
    b = tmp;

//算术运算,通过算术运算过程中的技巧，可以巧妙地将两个值进行互换。但是，有个缺点就是变量数据溢出。因为JavaScript能存储数字的精度范围是 -253 到 253。所以，加法运算，会存在溢出的问题。
    var a = 1,
        b = 2;
    
    a = a + b; // a = 3, b = 2
    b = a - b; // a = 3, b = 1
    a = a - b; // a = 2, b = 1

//其他方法可以以后学习～