JavaScript 总结

一.什么是前端

        一）.前端，界面，计算机端桌面软件开发的界面，计算机的浏览器界面，移动端的浏览界面。

        二）.使用网络技术HTML+css+Javascript开发界面

                html ；架构师   网页内容

                css ;  修饰师  装饰内容

                javasc； 魔术师  网页进行交互

        三）.js的构成

                1.Ecmas script  语言基础

                2.Dom  对文档中的元素进行操作

                3.Bom  对浏览器进行操作

二、初识

        一）.js的编写

                1.常用快捷键

                        ctrl+shift+n  创建新的html的文件

                        ctrl+c  复制

                        ctrl+v  粘贴

                        ctrl+x  剪切

                        ctrl+b  按照指定的浏览器打开文件

                2.js的编写

                        通过浏览器编写

                        通过<script>标签进行编写

                        通过<script>标签中的src文件进行编写

                       通过console.log()进行输出

                3.js的数据类型

                        原始数据类型

                                string      -      字符串

                                number  -       数字

                                boolean   -     布尔   true   false

                                undefined  -   所有仅声明，未赋值的变量的默认值！ -  空（修饰原始数据类型的空）    

                                null       -    空  （修饰对象的空）

                              *symbol

                        引用数据类型

                                array     function      math  date

                4.数据类型的转换  

                        1）. 算数计算中，一切数据都默认转换为数字后，再做计算

                        2）. 在+运算中，只要碰到字符串，+就不再是+法运算符号了，而变成了字符串拼接符号了，导致另一个不是字符串类型的数据，会变成字符串类型数据

二.逻辑运算

       一）. 逻辑运算；将多个关系运算综合起来，得出一个结论

                3种；&&且   || 或     ！非

                &&；2个条件都必须为true,就返回true

                ||;2个条件都必须为true，才返回true

                短路逻辑

                         条件&&（操作）；如果条件满足则进行操作，不满足则不进行操作

                          值1||值2 ; 如果值1有效，就用值1，否则则用值2

                程序中的3种结构

                        1.顺序结构

                        2.分支结构；根据不同的条件，满足条件则执行，不满足则不执行

                        3.循环结构

        二）.js的三目结构

                语法；条件？操作1：操作2    满足条件则执行操作1，不满足则执行操作2

三.分支结构

        一）.3种分支结构

                1.if结构       if（条件）{  操作   }

                2.if……else……结构  条件事件2选1    if(条件）{满足执行的操作}else{不满足则执行的操作}

                3. if……else if……[else]  多个条件，多选一执行，也可以不执行

                    if（条件）{操作1}else  if（条件）{操作}

        二）.if的分支结构  switch  case结构

switch(b表达式){
    case 值1：
        满足值1则执行操作
    break;
    case 值2：
        满足值2则执行操作
    break;
    case 值3：
        满足值3则执行操作
    break;
    case 值4：
        满足值4则执行操作
    break;
    default:
        如果前面都不满足则执行的操作
}

                注意：如果结构没有break；那么会根据条件进入到满足条件的case执行，并触发此后的所有case执行操作，所以，想要独立执行分支，必须增加break关键词

                可以省略break；则表示上下相同的case执行相同的操作 

四.循环结构

        循环3要素

                1.循环条件；让循环反复执行的条件

                2.循环变量；循环条件用于比较的变量；循环变量总是向着不满足循环条件的趋势进行

                3.循环体；循环反复执行的代码段

        一）.while循环；先判断循环条件再执行循环体

while(循环条件){
    循环体；
    迭代循环变量
}

        二）.do  while  循环；先执行循环体再进行判断循环条件

do{
    循环体；
    迭代循环变量；
}while(循环条件)

        注意；while与do while 循环基本相同，在于看第一个循环条件是否相同，如果满足则等效，不等于，则失效，不满足条件下while 一次不执行，do while 至少执行一次

        三）.for循环   for循环与while循环基本相同

for（1.初始化循环变量；2.循环条件；3.循环变量迭代）{
    4.循环体；
}
执行顺序  1-2-4-3-2-4-3

五.函数

        一）.函数的定义，程序中封装一项专门任务的步骤清单代码段

function 函数名([参数变量列表]){
    任务步骤代码段；
    [return 返回值；]
}
函数名；指向函数定义的一个变量，保存的是函数对象的引用
声明的时候；不执行，同时也不读取内部代码
在程序的任意位置；函数名（[参数列表]）
函数调用时，才开始读取并执行内部代码

        二）. 变量的作用域

                1.变量的2种作用域

                        1）.全局变量；放在全局作用里变量，可在程序任意位置进行访问并修改

                        2）.局部变量；a.参数变量

                                                b.函数中var出来的变量

                变量的声明提前；正式开始执行程序之前，都会先将var申明的变量，和function声明的函数，提前到当前作用域的顶部，集中声明，同时赋值留给本地

                注意；函数的声明比变量的声明更置顶

六.数组

        一）.数组；一个变量的合集，连续保存多个数据的引用类型对象

        二）.创建数组；

                1.创建空数组；var 数组名 = []

                2.初始化数组；var 数组名 = [值1，值2，值3]

                3.创建指定个数的数组  var 数组名 = new array(n)  ; 创建一个数组对象，同时初始化n元素

                4.创建同时直接初始化 var 数组名=new array(值1，值2，值3)

                注意；var arr = new array(7） 可以解释为初始化7个元素，可一个解释为初始化1个元素7

        三）.数组分类

                1.索引数组；下标从0开始每次加1  length - 元素个数

                2.关联数组；下标可以自定义，下标不重复

                3.二位数组；元素又指向另一个子数组的对象

                        行-length 获得数组中有多少个子数组对象

                        列-length 获得子数组中的元素个数

        四）、undefined与null

                1.undefined    所有仅声=声明未赋值的变量

                2.null  修饰的对象为空

                        1）.var 变量=null  表示将来该变量指向一个对象，只是目前没有指向

                        2）.var obj=对象  

                                obj使用完后，可以主动赋值null  表示这个变量不在指向一个对象，可以主动赋值null

                                这么做的话，表示主动的释放内存，节省内存空间从而提高浏览器性能‘

                                内存有个垃圾回收器，如果一个对象没有指向，那么就会被回收，从而释放内存

        五）.数组的遍历

                1.索引数组的下标从0，每次递增1的特性

                2.冒泡排序；将数组中的元素按照从大到小的顺序进行排序

var arr = [2,3,6,5,8,9,6,3,5,3,8]
for (var i=0;i<arr.length;i++){
    for(var r=0;r<arr.length-i;r++){
        if(arr[t])>arr[t+1]}{  
            arr[t]+=arr[t+1];
            arr[t+1]=arr[t]-arr[t+1]
            arr[t]-=arr[t+1]
        }
    }
}

        六）.关联函数

                关联数组-可以自定义下标的数组

                关联数组的key（下标）不可以重复  。length失效

                遍历关联数组

for（var key in obj）{
    console.log(obj(key))
}

         七）.数组API

                .concat合并数组  var new arr=arr.concat(数组1/普通值,数组2/普通值,[数组],值)

                .join ()           可以把数组转化为字符串 可以自定义拼接符

                .toString()        可以把数组转化为字符串 不可以自定义拼接符

                .indexOf(元素)    判断某一个元素在数组中第一次出现的位置，如果没有返回-1

                .arr[元素]=值     新增/修改数组的元素  如果该下标没有元素，新增。否则就是修改 

                .length          获取数组的长度

                .Push            在数组后面追加元素，直接把数组修改了。返回的是数组的长度

                .Pop             删除数组最后一个元素，直接把数组修改了。返回的是删除数组的长度

                .Unshift          在数组前面追加元素，直接把数组修改了。返回的是数组的长度

                .shift              删除数组第一个元素，直接把数组修改了。返回的是删除数组的长度

                .reverse();       数组反转

                splice(start,num,元素(可选))      start操作开始的下标位置  num删除的数量  其余元素代表在数组中插入的元素可选

                        数组排序

                                      需要自定义一些函数参数 升序  比较规则是内置的，我们只需要按照规则使用即可                                   arr.sort(function(a,b){return a-b});           

                        降序排列

                                  arr.sort(function(a,b){return b-a});

        八）、二维数组

                二维数组，数组的元素是另一个数组的下标

                获取二维数组  arr[row][col]

七.string对象

        一）、创建字符串 1.var str= ‘he’   2.var str = new string('he')

        二）、.length    字符串长度

        三）、.toUpperCase    把字符串中的字符转化为大写

        四）、.toLowerCase    全部转化为小写

        五）、.indexOf()           检测字符在字符串中第一次出现的位置，如果没有的话返回-1 ,注意；有大小写的区分

        六）、.split('分隔符')     把字符串转化为数组  以分隔符为字符进行分割 。分割完以后分隔符不存在，返回吃输出的是数组

        七）、 .charAt()             获取指定位置的字符

        八）、.charCodeAt       指定位置字符的unicode编码

        九）、.slice(start,end)，          截取的是重下标为start 开始往后end位 ，不包括第end+start位

                   .substr(start,length)        截取的是重下标为start-end的资费 ，不包括第end位

                    截取字符串 皆包含开始 不包含结束

八、Date对象

1. date对象获取日期相关的一些参数。
2.  获取当前日期 获取的是客户端的日期   var now =new Date();   当前服务器日期
3.  程序中的月份从0开始 0-11月     var date=new Date(2021,10,10); 获取的是9月份
4. 如果书写成字符串月份代表的就是输入的月份var date=new Date('2021,10,10'); 加入字符串则表示获取的是10月份
5. 获取年份             .getFullYear();
6. 获取月份 从0开始    .getMonth()   从0开始所以获取的月份加1
7. 获取日期             .getDate();
8. 获取星期几           .getDay();
9. 获取小时             .getHours();
10. 获取分钟数          .getMinutes()
11. 获取秒数            .getSeconds();
12. 获取毫秒数          .getMilliSeconds()

13.  .getTime()  获取的是1970年累积到当前时间的毫秒数

九、正则表达式

        一）、 正则表达式是构成搜索模式（search pattern）的字符序列

     /^     $/         /表达式/  ^开始的条件  $结束的条件

       二）、 .search 检测字符串中指定的字符 如果不包含该字符得到-1 包含的话就返回该字符开始的位置

        三）.match可以用来检测字符串是否符合某个表达式的规则 如果不符合得到null 符合得到一个对像     (a|b|c)|或的意思  a或者b或者c都可以 其中1个值

        四）..replace(/原来的字符/,'替换字符') g全局 i不区分大小写  把前面的字符，用后面的字符替换

        五）.正则表达式.exec(字符串)  检测字符串是否和正则表达式匹配 不匹配返回null

        六）.正则表达式.test(字符串) 检测字符串是否匹配正则表达式

 

 

 十.Math对象    Math数学对象：专门封装用来处理数字相关的

1. 、 获取pi值console.log(Math.PI)

     2  、 Math.ceil直接进1  var n=10.6      console.log(Math.ceil(n));

     3  、Math.floor直接去除小数点   console.log(Math.floor(n)); 

     4  、Math.round()四舍五入    

     5  、 获取随机数 0-1之间的随机数 包含0不包含1    console.log(Math.random());

        

 

 十一.dom

        一）.js代码一般放置在body内部的底部，因为js进行dom元素的操作，需要等待标签加载完以后再执行

        二）. 代码从上到下执行，如果把js放在上面的话，执行到js的时候，标签还没有渲染。就会报错

        三）.css加载是同步的，渲染标签的时候，会同时去找css样式，所以css放在在页面的哪一个位置都可以

        四）.获取标签    通过id名获取标签 得到的是唯一的 document.getElementById('id名字')

                将获取的标签放到一个变量里   tag = document,getElementById(‘id名称’)

        五）.绑定点击事件  on+(事件名称)（click）=function(){事件代码}

                在使用标签的时候使用id赋值的变量即可

        六）.控制标签的css      获取标签.style.css样式(css样式书写方式和之前一样，只是如果样式带 有中横线，去除中横线，中横线后的首字母大写)='值';

        七）.通过标签名获取标签 获取得到的是一个关联数组 即使只有一个元素，也是数组 数组不能直接进行控制，需要选择到具体某一个进行控制 [下标] document.getElementsByTagName() 注意是s复数 tags.style.color='red';不能使用，因为不能对关联数组进行控制//若需要知道标签数组中的值则需要进行循环遍历一遍输出即可

        八）.This指的是在这次的点击事件中被点击值

十二、控制标签的html

        一）.在js中标签的html指的是标签开始和结束中间的内容 

        二）.修改/新增：获取标签.innerHTML='修改以后的值' 

        三）.获取： 获取标签.innerHTML

十三、控制标签的属性

        一）.标签的属性：所有放在标签后面的都可以称为标签的属性 <标签 k="v"></标签>

        二）.控制标签的属性

                1.k代表的是属性v代表的是属性对应的值

                2.增加/修改属性的值：获取标签.setAttribute('k','v');

                3.删除属性：获取标签.removeAttribute('k');

                4.获取属性的值：获取标签.getAttribute('k')

        三）.onmouseenter,设置鼠标移入事件

        四）.Onmouseleave设置鼠标移出事件

        五）.section标签，用法和div一样，只是语义更重了，一般用来引入大区域的内容

        六）.在js中单引号和双引号使用方法一样的

        七）.a.parentNode    选择a的父级 是唯一的;

        八）.a.children 选择a的子级  得到的是一个关联数组，不能直接进行控制

        九）.创建标签

                1. 创建标签 document.createElement('标签名字');

                2.增加内容 .innerHTML=( 改变内容)

                3.a.appendChild(b)把b追加到a内部的后面

                4. 获取表单值：获取标签.value

                5. 修改表单值：获取标签.value='值'

        十）、增加和删除标签

                1.document.createElement('标签名字');增加标签

                2.a.appendChild(b) 把b追加到a的内部，即a为b的父级

                3.a.parentNode.removeChild(a) 删除a标签，

                4.this代表着在这次事件中用户所操作的标签

        十一）.全选、全不选、反选（购物车的选择功能）

                1.id名唯一的，可以直接通过id名获取标签(此时取id名字的时候，需要遵循变量的命名规则) 只有id名才可以

                2.社区方法：控制标签属性

                        属性的控制，社区方法和官方方法不能混合使用

                        增加/修改标签属性  获取标签.属性名字(如果是class需要变成className)='值'

                3.获取属性的值       获取标签.属性名字

                4.全选 box.checked=true

                5.全不选 box.checked=false

                6.反选   box.checked=!box.checked

        十二）.管理系统的实现

                1.document.getElementsByClassName()通过类名获取标签，的到的是数组，通过下标进行控制

                2.克隆标签 a.cloneNode()克隆a  如果里面什么都不写，代表不克隆内容。也可以加true 代表克隆内容

                3.a.insertBefore(b,c);  把b追加到c同级之前 a是c的父级

                4.Disabl 表示input框能否被修改

                5.模板字符串 进行常量和变量的拼接  `${变量}`(反引号，英文情况1左边的键)

十四.BOM

        一）.ECMAScript指的是基本语法

        二）.DOM控制标签相关的内容

        三）.BOM控制浏览器窗口相关的

                1.window.close()             关闭当前的窗口

                2.window.open('链接地址')    打开新的窗口

                3.setInterval()属于window下的方法  定时器

                4.Confirm ('确认关闭吗')      弹出确认框 点击确认返回true   点击取消或者x返回false

                5.SetTimeOut()              单次定时器

                6.setInterval(fn,1000)   setInterval(‘fn()’,1000)  定时器不加（）书写成函数形式加‘’

                7.history.go(num)可以跳转页面 num的值可以自定义，正值返回之后的页面 负值返回之前的页面

                8.history.go(-1)等价于history.back()

                9.history.go(1)等价于history.forward()

                10.Reload()               刷新页面     Replace（‘地址’）     页面跳转      Assign(‘地址’)          在页面的历史中增加一条跳转记录

                11.location.href=‘’      可以修改地址 直接使用新地址赋值即可

                12.Screen.height  ’屏幕的高度’       Screen.width  ’屏幕的宽度’

                13.Screen.availHeight  ‘屏幕的可用高度’      Screen.availWidth  ‘屏幕的可用宽度’

                14.navigator.appName 检测浏览器的名称    navigator.appVersion 检测浏览器的版本