web前端 6 JavaScript

JavaScript

JavaScript

JavaScript是一种运行在JavaScript解析器/引擎中的解析性语言。

运行环境

  1. 独立安装的js解析器（Node JS）
  2. 嵌入在浏览器中的JS解析器

JS组成

  1. 核心ECMAScript JS基础语法
  2. 文档对象模型DOM 让JS有能力与网页进行对话，对某个元素进行操作
  3. 浏览器对象模型BOM 让JS有能力和浏览器进行对话，进行一系列浏览器操作

JS特点

  1. 开发工具简单
  2. 无需编译
  3. 面向对象
  4. 由数据来决定数据类型

浏览器内核作用：

  1. 内容排版引擎解析HTML和CSS
  2. 脚本解析引擎解析JavaScript

JS添加方式

1）行内添加 使用onclick属性把JS代码嵌入到元素‘事件’中 onclick表示单击元素时所作的操作

1
<div id="" onclick="JS代码"></div>

2）内嵌添加 在script标签中添加 script标签是添加在body或者head标签中

1
<script>JS代码</script>

3）外部添加 把JS代码写入到外部文件中到head标签里使用script标签引用它
注意：引用外部文件后script标签不能添加其他内容

1
2
3
<head>
   <script src="xx.js"></script>
</head>

语法规范

变量

声明 var 变量名
赋值 变量名=值
声明并直接赋值 var 变量名=值
一次性声明多个变量并赋值 var 变量名1=值, 变量名2=值.变量名3...
注意声明过程中不要省略var变量，不然声明的是全局变量

变量名的命名规范

数据类型

1）原始类型（基本类型）
2）引用类型

基本类型分类

  1. 数字类型
  2. 字符串类型
  3. 布尔类型
  4. 空 声明对象未赋值
  5. 未定义类型 声明变量未赋值或者访问对象不存在的属性

数据类型转换

隐式转换：自动转换

typeof()/typeof 获取数据类型
NaN （not a number）表示非数字
isNaN 判断数据是否为非数字 isNaN(数据) 结果是true表示为非数字

注意：所有数据类型与string做+运算，结构为string

显示转换（强制换行）

toString() 将任意类型转换为string类型 变量.toString()
parseInt() 获取数据的整数部分 parseInt(数据) 从左到右依次转换，碰到第一个非整数字符，就会停止转换。如果第一个字符就是非整数字符，结果是NaN
parseFloat() 将指定数据类型转换为小数 parseFloat(数据) 执行结果和parseInt()一样
Number() 将字符串解析为数字 Number(数据) 如果一旦包含非法字符，则返回NaN

运算符与表达式

函数

是一段预定义好，可以被反复使用的代码块

函数定义

1
2
3
function 函数名(){
    可执行语句;
}

函数调用

1
函数名();

带参数的函数

1
2
3
function 函数名(形参1,...){
   可执行语句;
}


有返回值的函数

1
2
3
4
function 函数名(形参1,...){
   可执行语句;
    return 返回值;
}

由于有返回值，可以让变量来接收它

1
var 变量=函数名(参数);

函数的作用域

函数作用域中的变量（局部变量）只在当前函数内可访问到，离开函数就不能访问。
全部变量可以再任何位置访问到
当变量前带var 该变量为局部变量

判断结构

if语句 语法格式

1
2
3
if(条件表达式){
    语句块;
}

注意：如果条件表达式中的值是0 0.0 " null undefined NaN都是认为是false

if-else语句 语法结构

1
2
3
4
5
6
if(条件表达式){
   语句块1;
}
else{
   语句块2;
}

else-if语句 语法结构

1
2
3
4
5
6
7
8
9
10
if(条件表达式1){
   语句块1;
}
else if(条件表达式2){
   语句块2;
}
...
else{
   语句块n;
}

分支结构

根据表达式的不同取值，从不同的程序入口开始执行。一般switch-case与break一起使用，可以做到执行完该语句块后不继续执行其他语句块。

switch-case语句 语法结构

1
2
3
4
5
6
7
8
9
10
11
12
switch(表达式){
    case 值1:
       语句块1;
       break;
   case 值2:
       语句块2;
       break;
    ...
    default:
       语句块n;
	   break;
}

switch-case结束机制：1）碰到break 2）整个结构都执行完毕，结束直落，两个case或者多个case之间没有任何的执行代码，以最后一块case为主。

练习：购物车判断

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <script>
       // 单价 数量 收款金额 产品总价 找零
       var    price,count,money,total,change;
       price=prompt("请输入购买的商品单价");
       count=prompt("请输入购买的商品数量");
       total=price*count;
       if(total>500){
           total=total*0.8
           alert("请本次消费大于500元,享受8折优惠,本次消费金额为"+total+"元");
       }
       money=prompt("本次收款金额");
       if(money>total){
           change=money-total;
           alert("找零"+change+"元");
       }
       else{
           alert("你给的钱不够。");
       }
   </script>
</head>
<body>
   
</body>
</html>

循环结构

while语句 语法结构

1
2
3
while(bool值表达式){
    循环体语句;
}

continue 用于终止本次循环，继续执行下次循环
break 终止整个循环结构

do-while语句 语法结构

1
2
3
do{
   循环体语句;
}while(bool值表达式)

for语句 语法结构

1
2
3
for(表达式1;表达式2;表达式3){
   循环体语句;
}

while do-while for区别

  1. for while 最少执行0次
  2. while多用于不确定次数的循环 for多用于确定次数的循环
  3. do-while 最少执行1次，并且多用不确定次数的循环

练习：猜数字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <script>
       // 随机生成0-100的随机数 Math.random()生成0-1的随机数
       var r=parseInt(Math.random()*100);


       do{
           var num=prompt("请输入一个数字");
           if(num>r){
               alert("你输入的数字大了");
           }
           else if(num<r){
               alert("你输入的数字小了");
           }
           else{
               alert("恭喜你，答对了");
           }
       }while(num != r);
       alert("游戏结束！");
   </script>
</head>
<body>
   
</body>
</html>

索引数组

var arr=[] 或 var arr=new Array() 创建空数组
var arr=[元素1,元素2,...] 或 var arr=new Array(元素1,元素2,...) 创建数组并初始化值
arr[下标] 访问数组

数组名.length 数组长度 值是最大下标+1

使用for循环遍历数组

总结：

  1. 获得最后一个元素的值 arr[arr.length-1]
  2. 获得倒数第n个元素的值 arr[arr.length-n]
  3. 数组缩容 减小arr.length的数值 ，会删除结尾多余的元素
  4. 遍历数组使用for
    1
    2
    3
    for (var i=0;i<arr.length;i++){
        arr[i]; //当前正在遍历的元素
    }

关联数组（hash）

关联数组又叫hash。就是下标有具体名称。比索引数组更快找元素

创建关联数组
1）创建空数组 var arr=[]
2）向空数组中添加新元素并自定义下标名称 arr["name"] =a

使用for in遍历数组

数组函数

String(arr) 把arr中每个元素转为字符串，并用逗号分隔 一般用于给arr拍照，用于鉴别数组被修改过
arr.join("连接符") 把arr中的每个元素转为字符串，用自定义的连接符分隔

concat() 拼接两个或者更多的数组，并返回结果 不会修改原数组，而返回新数组。
arr.concat(值1,值2,arr,2,值3...) 表示把值1，值2，arr2每个元素和值3 拼接到arr的元素之后

slice() 选取 返回现有数组的一个子数组 不会修改原数组，而返回新数组。
arr.slice(starti,endi+1) 选取arr从starti位置开始，到endi结束的所有元素组成的新数组的返回 两个参数都是下标 含头不含尾 如果只有一个参数表示从该下标选取到最后

splice() 直接修改原数组
arr.splice(starti,n) 删除 删除arr中starti位置开始的n个元素 返回值是被删除的临时数组
arr.splice(starti,0,值1,值2) 插入 在arr的starti位置插入值1，值2，用starti的值及其之后的值被向后顺移
arr.splice(starti,n,值1,值2) 替换 删除starti位置的n个值，再从starti位置插入值1，值2 删除的元素的个数和插入的元素个数不必一致

reverse() 颠倒
arr.reverse() 颠倒数组中的元素的顺序

sort() 排序
arr.sort() 默认将所有元素转换为字符串再排列 只能排序字符串类型的元素

DOM查找

DOM（document object model） 是 W3C（万维网联盟）的标准， 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
对网页进行增删改查的操作。

1）按id属性，精确查找一个元素对象

1
var elem=document.getElementById("id值")

2）按照标签名查找
查找指定父标签下的所有标签的子标签 返回是一个动态集合 即使只有1个元素 必须使用[0]来取元素

1
var list=elem.getElementsByTagName("子标签")

3）通过那么属性查找

1
var list=document.getElementsByName("name值")

4）通过class查找

1
list=elem.getElementsByClassName("class值")

5）通过CSS选择器查找

只找一个元素

1
var elem=document.querySelector("CSS选择器")

找多个元素

1
var list=document.querySelectorAll("CSS选择器")

练习：验证码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #code{
            width: 100px;
            height: 50px;
            letter-spacing: 5px;
            background-color: lightblue;
            font-size: 33px;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <script>
        function createRandomCode(){
            //生成随机数的字符 randCode存放最终的随机验证码
            var chars=['a','b','c','1','2','3'];
            var randCode="";
            for(var i=0;i<4;i++){
                //Math.random 产出0-1随机数 chars.length获得chars数组的长度 这里是6
                //Math.random()*5 产出0-5随机数
                //Math.floor(Math.random()) 产出0-1随机正整数
                var charspos=Math.floor(Math.random()*(chars.length-1));
                randCode += chars[charspos];
            }
        //document对象 getElementById方法找到对应的元素 innerHTML属性获得或者替换元素内容
        document.getElementById('code').innerHTML=randCode   
        }
    </script>
    <div id="code"></div>
    <button onclick="createRandomCode()">验证码</button>
</body>
</html>

DOM修改

核心DOM：可操作一切结构化文档的API, 包括HTML和XML 繁琐
HTML DOM：专门操作HTML文档的简化版DOM API仅对常用的复杂的API进行了简化 简单

1）读取属性值

1
var value=elem.getAttribute("属性名")

2）修改属性值

1
elem.setAttribute("属性名","值")

3）判断是否包含指定属性 值为true或者false

1
var bool=elem.hasAttribute("属性值")

4）移动属性

1
elem.removeAttribute("属性名")

5）修改CSS样式

1
elem.style.属性名

属性名：去掉横线，变驼峰

DOM添加

添加元素步骤
1）创建空元素

1
var elem=document.createElement("元素名")

2）设置关键属性/样式
elem.innerHTML 获得或者替换元素内容
elem.style.cssText 添加多行的样式

3）将元素添加到DOM数
appendChild 只能把新建的元素默认添加到父元素的最后子节点上

1
parentNode.appendChild(childNode)

insertBefore 用于在父元素中的指定子节点之前添加新的子节点

1
parentNode.insertBefore(newChild,exisingChild)

优化元素添加

由于每次使用appendChild insertBefore都会修改DOM树导致重新布局。为了减少对DOM数操作，有下面2中情况来优化

  1. 同时创建父元素和子元素时，建议在内存中先将子元素添加到父元素，再将父元素一次性添加到页面中
  2. 只添加多个平级子元素，将多个子元素添加到文件片段中，再将文件片段添加到页面中

文件片段 在内存中，可以临时保存多个平级子元素的虚拟父元素。用法和普通的父元素完全一样

使用文件片段挂到页面步骤
1）创建文件片段

1
var frag=document.createDocumentFragment();

2）把子元素添加到文件片段中

1
frag.appendChild(child);

3）把文件片段添加到页面中

1
parent.appendChild(frag);

BOM

BOM（Browser Object Model）专门操作浏览器窗口的API——没有标准, 有兼容性问题
它包含下面几个对象

window.outerWidth/outerHeight 获取完整窗口宽度和高度
window.innerWidth/innerHeight 获取文档显示区宽度和高度

定时器

让程序按指定时间间隔自动执行任务，可以实现网页动态效果，计时功能

周期性定时器

让程序按时间反复执行一项任务

1
2
3
setInterval(exp,time)  //exp执行语句 time时间周期，单位为毫秒

clearInterval(定时器名) //停止定时器

一次性定时器

让程序延迟一段时间执行

1
2
3
setTimeout(exp,time)  //exp执行语句 time时间周期，单位为毫秒

clearTimeout(定时器名) //停止定时器

练习：魔方

正方体的X Y和Z轴的关系

transform: translate() 平移 可以按X,Y和Z轴来平移
box-sizing: border-box width=context+padding+border+margin 假如设置盒子width100px 里面有两个元素各50px border为2px 这里超出了2px 使用box-sizing: border-box设置后两个元素自动调整为48px 整体像素符合盒子的大小
background-position-x: 设置背景图片水平位置
background-position-y: 设置背景图片垂直位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            width: 300px;
            height: 300px;
            /*border: 1px solid #000;*/
            margin: 150px auto;
            perspective: 20000px;
        }
        #box{
            width: 300px;
            height: 300px;
            transform-style: preserve-3d;
            /*测试代码*/
            /*transform: rotateX(45deg) rotateY(45deg);*/
            animation: ro 4s linear infinite; /*infinite一直动*/
        }
        /*整个魔方的动画*/
        @keyframes ro{
            0%{ transform: rotateX(0deg) rotateY(0deg); }
            100%{ transform: rotateX(360deg) rotateY(360deg); }
        }
        .box-page{
            width: 300px;
            height: 300px;
            /*位置初始化*/
            position: absolute;
            /*让小元素保持3d效果*/
            transform-style: preserve-3d;
        }
        .top{
            /*background-color: red;*/
            /*沿Z轴平移150px*/
            transform: translateZ(150px);
        }
        .bottom{
            /*background-color: green;*/
            transform: translateZ(-150px) rotateX(180deg);
        }
        .left{
            /*background-color: orange;*/
            transform: translateX(-150px) rotateY(-90deg);
        }    
        .right{
            /*background-color: pink;*/
            /*沿x轴平移150px 在安y轴顺时针旋转90度*/
            transform: translateX(150px) rotateY(90deg);
        }    
        .before{
            /*background-color: blue;*/
            transform: translateY(150px) rotateX(-90deg);
        }    
        .after{
            /*background-color: yellow;*/
            /*沿y轴想上平移150px 在安x轴逆时针旋转90度*/
            transform: translateY(-150px) rotateX(90deg);
        }            
        
        /*第一个小元素调用动画*/
        .box-page div:nth-child(1){
            animation: ro1 4s ease-in-out 0s;
        }
        .box-page div:nth-child(2){
            animation: ro1 4s ease-in-out 0.5s ;
        }
        .box-page div:nth-child(3){
            animation: ro1 4s ease-in-out 1.0s ;
        }
        .box-page div:nth-child(4){
            animation: ro1 4s ease-in-out 1.5s ;
        }
        .box-page div:nth-child(5){
            animation: ro1 4s ease-in-out 2.0s ;
        }
        .box-page div:nth-child(6){
            animation: ro1 4s ease-in-out 2.5s ;
        }
        .box-page div:nth-child(7){
            animation: ro1 4s ease-in-out 3.0s ;
        }
        .box-page div:nth-child(8){
            animation: ro1 4s ease-in-out 3.5s ;
        }
        .box-page div:nth-child(9){
            animation: ro1 4s ease-in-out 4.0s ;
        }
        
        /*每个小元素div动画*/
        @keyframes ro1 {
            0%{ transform: translateZ(0px) scale(1) rotateZ(0deg); }
            20%{ transform: translateZ(300px) scale(0) rotateZ(360deg); }
            80%{ transform: translateZ(300px) scale(0) rotateZ(360deg); }
            100%{ transform: translateZ(0px) scale(1) rotateZ(0deg); }
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="box">
            <div class="box-page top"></div>
            <div class="box-page bottom"></div>
            <div class="box-page left"></div>
            <div class="box-page right"></div>
            <div class="box-page before"></div>
            <div class="box-page after"></div>
        </div>
    </div>
    <!-- 控制每个面中的9个元素div和其样式 -->
    <script>
        var arr=document.querySelectorAll(".box-page");
        //遍历6个面
        for(var n=0;n<arr.length;n++){
            //外层循环遍历面里的行
            for(var r=0;r<3;r++){
                //内层循环遍历面里面的列
                for(var c=0;c<3;c++){
                    var divs=document.createElement("div");
                    divs.style.cssText="width:100px;height:100px;border:2px solid #fff;box-sizing:border-box;position:absolute;background-image:url(images/a"+n+".jpg);background-size:300px 300px;";
                    arr[n].appendChild(divs);


                    //设置每个小元素div的位置
                    divs.style.left=c*100+"px";
                    divs.style.top=r*100+"px";
                    //设置背景图片的初始位置
                    divs.style.backgroundPositionX=-c*100+"px";
                    divs.style.backgroundPositionY=-r*100+"px";
                }
            }
        }
    </script>
</body>
</html>

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

欢迎光临<br><br>本博客是用来记录学习Linux Python Shell和Perl<br>谢谢大家