JavaScript学习笔记

学呗q还能怎么办
247 阅读21分钟

JavaScript

运行在客户端的脚本语言(Script是脚本的意思)

脚本语言:不需要编译 运行过程由JS解释器(js引擎)逐行解释执行

可基于Node.js进行服务器编程

作用
  1. 表单验证
  2. 网页特效
  3. 服务端开发(Node.js)
  4. 桌面程序(Electron) 日历
  5. App(Cordova)
  6. 控制硬件 - 物联网(Ruff)
  7. 游戏开发(cocos2d-js)
浏览器执行JS

渲染引擎 : 用来解析HTML与CSS,俗称内核,chromr的bink

JS引擎 : JS解释器 用来读取JS代码 chorme 的V8

JS的组成
  1. ECMAScript(JS语法)
  2. DOM(页面文档对象模型) 操作元素的
  3. BOM(浏览器对象模型) 操作浏览器窗口 弹窗跳转 获取分辨率

输入输出语句

alert(msg) 浏览器弹出警示框

console.log(msg) 浏览器控制台打印输出信息(给程序员看)

prompt(info) 浏览器弹出输入框 ,用户可输入

获取的数据默认是字符串类型的

变量

1.定义

是一个存放数据的容器 通过变量名获取数据 可修改

本质是在内存中申请的一块用来存放数据的空间

2.使用

var(variable可变的) age(这是一个随便的变量名)

var myname = '贾培东'

更新变量 前面的会被覆盖

可同时声明多个变量,,,写一个var 变量名之间用,隔开

var age = 18,

address = '杭州',

gz = 3000;

声明变量的特殊情况

1.只声明不赋值 结果是undefined(未定义的)

var sex ;

console.log(sex);//undefined

2.不声明 不赋值 直接使用会报错

直接 console.log(tel);//报错 tel is not defined

3.不声明直接赋值 ,,,会变成全局变量

qq = 2676677439;

console.log(qq)//不会报错会变成全局变量

变量命名规则

1.由字母,数字,下划线_,美元符号组成注意只有这两种符号 也不允许空格

userAge,_name

2.不能数字开头

3.区分大小写

4.不能是关键字,保留字

比如 var for while if name在浏览器中也许有特殊含义最好不要用作变量名

5.变量名必须有意义

6.驼峰命名法 首字母小写 后面每个单词首字母大写 myFirstName 尽量不要使用name

变量交换练习

var temp;
​
  var apple1 = '青苹果';
​
  var apple2 = '红苹果';
​
  temp = apple1;
​
  apple1 = apple2
​
  apple2 = temp
​
  console.log(apple1);
​
  console.log(apple2);//重点注意后面的值传给前面

数据类型

为了便于把数据分成需内存大小不同的数据 充分利用存储空间

1.JS是弱类型语言或者说动态语言

//int num = 10; java   这个num就是整型
var num;//这里的num 不确定属于那种数据类型
var num = 10; //看到数字才确定num属于数字类型

js的数据类型只有在程序运行中,根据等号右边的值才可确定

var str = 'pink'

动态语言:变量的数据类型是可以变化的

var x = 10; x是数字类型
x = 'pink' x是字符串类型

2.数据类型的分类

1.简单数据类型

Number 数字型 包含 整型值和浮点型值

如 21、0.21

进制

1.八进制 var num1 = 010; 就是十进制的8

程序里面数字前面加0 表示八进制

2.十六进制 0-9 a-f #000黑色 #ffffff白色

var num2 = 0xb; 就表示11 数字前面加 0x 表示十六进制

3.isNaN (not a number)用来判断非数字,

是数字返回 false 不是数字返回 true

Infinity 无穷大

字符串型 Sring

是引号中的任意文本 可以是单引号 也可以是双引号

JS字符串转义符 要写到引号里面

\n 换行

'单引号

"双引号

\t tab缩进

\b 空格 blank

字符串长度length 获取字符串长度

var str = 'my name is andy';
    console.log(str.length);

字符串和其他类型拼接 最后的结果都是字符串

console.log('贾培东' + 18 + '帅的一批')
console.log(12+12);//24
console.log('12'+12);//'1212'
​

Boolean 布尔值类型 true 等价于1, false等价于0 默认值是false

  var flag = true;// flag 布尔型
  var flag1 = false;// flag1 布尔型
  console.log(flag + 1); //true 参与加法运算当1来看

Undefined 未定义数据类型

var a; 声明了变量a 但是没有给值 a = undefined

prompt 取过来的值是 字符串型的

字面量

固定值的表示法

数据类型转换

1.转换为字符串

  • toString() 转换为字符串

    var num = 10

    var str = num.toString();

  • String()

console.log(String(num));

  • 利用 + 拼接字符串的方法实现转换效果 隐式转换

console.log(num + ' ');

2.转换为数字类型

  • parseInt('3.14')

console.log(parseInt('3.14')); //3 取整

console.log(parseInt('120px')); //120 会去掉单位

  • parseFloat('3.14'); //3.14 将string类转换为浮点类
  • 利用Number(变量)

console.log(Number(str));

  • 利用算数运算 - * / 隐式转换

console.log('12-0'); 可-0 可*1

3.转换为布尔类型

  • Boolean() 函数
  • 代表空,否定的值会被转换为 false 如 '空字符串',0,NaN,null,undedined , 除了这些其他都是true.

解释型语言 与 编译型语言

区别在于翻译的时间点不同

  1. 解释型语言:在运行时进行及时编译 , 并且立即执行
  2. 编译型语言: java编译器 编译出 中间代码文件.class 然后运行

标识(zhi)符

就是开发人员为变量,属性,函数,参数取的名字 不能是关键字 保留字

运算符

1.运算符( operator ) 也称为操作符 用来实现赋值 比较 和执行算数运算等功能的符号

加减乘除取余

  • 浮点数 运算时会有一些问题 最高精度位有17

    console.log(0.1 + 0.2); //0.30000004

    console.log(0.07 * 100); //7.0000001

    判断一个数能否被整除用取余

表达式

由数字,运算符,变量等以能求得数值得有意义排列方法所得得组合

简单理解 : 是由数字,运算符,变量等组成的式子 称为表达式

表达式都会有结果返回给我们

程序中把右边的表达式返回给左边

递增 递减运算符

num = num + 1 //相当于 ++num

++--放在前面 叫 前置递增 递减

先返自增 自减,后返回原值

var age = 10;
++age; //11
​
var p = 10;
console.log(++p + 10);21
//先自增 后返回值

前置自增和后置自增 单独使用效果是一样的

放在后面 叫 后置递增 递减

后置递增递减

先返回原值,后自增 自减

必须和变量配合使用

var age = 10;
console.log(age++ + 10); //20
console.log(age); //11
​
var c = 10;
 c++ =10  c = 11
var d = c++ + 2; // C++ = 11   c = 12
console.log(d); // 13

多用后置递增 并且代码独占一行

比较运算符

大于 小于 <= >= 等号是==

== 会把字符串类型转换为数字型

console.log(18 == '18'); true

\

===全等 要求数值 数据类型完全一样

console.log(18 === '18'); flase

逻辑运算符

&& 逻辑与 , 简称 "与" and

console.log(3 > 5 && 3 < 2); //只要有一个为假就是假

|| 逻辑或 , 简称 "或" or

console.log(3 > 5 || 3 < 2); //只要有一个为真就是真

! 非

短路

赋值运算符

= +=

num = num + 2 // num += 2;

运算符优先级

小括号 一元运算符 算数运算符 关系运算符

流程控制

分支结构

1.if(条件表达式){

//执行语句

}

  1. 执行思路 如果if条件表达式结果为真 ,则执行大括号里面的执行语句

为假 执行后面的语句

经典判断平闰年
var year = prompt('请输入年份');
    if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
        alert('闰年')
    } else {
        alert('平年')
    }

2.多分支语句

多条件 选择不同的语句执行 得到不同的结果 多选一的过程

三元表达式

++ num一元 3+5二元 ?:

3.语法结构

条件表达式 ? 表达式1 : 表达式2

4.执行思路

如果条件表达式 结果为真 返回表达式一的值 结果为假 返回表达式二的值

switch

  1. 语法结构
switch(表达式){
    case value1:
        执行语句1;
        break;
    case value2:
        执行语句2;
        break;
        ...
    default:
        执行最后的语句
}
//执行思路 利用表达式的值 和 case 后面的选项值相匹配   都无匹配执行default
//如果当前的语句里没有 break 就会执行下一个case

switch通常用于 case 比较确定值得情况 if...else...常用于范围判断

循环结构

循环的目的 重复执行某些代码

for循环

1.for 重复执行某些代码 , 通常跟计数有关系

2.for 语法结构

for (初始化变量;条件表达式;操作表达式){
// 循环体
}
//初始化变量 就是用var 声明的一个普通变量, 通常用于作为计数器使用
//条件表达式 就是用来决定每一次循环是否继续执行 就是终止的条件
//操作表达式 是每次循环最后执行的代码 经常用于计数器变量进行更新(递增或递减)
for (var i = 1; i <= 100; i++){
    console.log('你好吗');
}
//1.首先执行里面的计数器变量 var i = 1, 但是这句话 在 for 里面只执行一次  index(索引号)
//2.去 i <= 100 来判断是否满足条件 如果满足条件 就去执行 循环体  不满足条件 退出循环
//3. 最后执行i++
​

for 循环嵌套

//99乘法表
 var str = ''
        for (var i = 1; i <= 9; i++) {   //外层循环控制行数
            for (var j = 1; j <= i; i++) {  //里层循环控制每一行的个数
                //1 x 2 = 2
                str += i + 'x' + j + '=' + i * j;
            }
            str += '\n';
        }
        console.log(str);

断点调试

自己去浏览器看看

for循环 重复执行不同代码

因为计数器变量 i 的存在 i 每次循环值都会变化

for(var i = 1; i <= 100; i++){
    console.log('我今年' + i +'岁了');
}

for循环重复执行某些操作

//求 1 - 100 整数累加和
var sum = 0;// 求和的变量
    for(var i = 1; i <= 100; i++){
        sum = sum + i;
    }
    console.log(sum);

while 循环

先判断后执行

while(条件表达式){
    //循环体
}
// 执行思路  当条件表达式为true 则执行循环体 
​
​

do while 先执行后判断

continue

跳出本次循环 继续下一次循环

 //求1-100之间 ,除了能被7整除之外的整数和
        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 7 == 0) {
                continue;
            }
            sum += i;
        }
        console.log(sum);

break

退出整个循环

数组(Array)

将一组数据存储在单个变量名下的优雅方式

创建 数组

var arr = new Array(); //创建了一个新的数组

利用数组字面量创建数组 方括号[]就是数组的字面量

var 数组名 = [ ]; //创建了一个空的数组

声明数组并且赋值 称为数组的初始化

数组里元素类型无限制

数组索引

索引号:从零开始

可通过索引访问元素 log(array[2])

遍历数组

就是把数组的元素从头到尾访问一次

  var arr = ['red', 'green', 'blue']
        for (var i = 0; i < 3; i++) {
            console.log(arr[i]);
        }

for 里面的 i 是计数器 在遍历循环中当索引号使用 arr[i]是第 i 个数组元素

Array 可以包含任意的数据类型

  1. 长度 数组名.length 动态监测数组的个数

    // 求数组 [2,6,1,7,4] 的和 遍历加到 sum 中
var arr = [2, 6, 1, 7, 4];
        var sum = 0;
        var average = 0;
        for (var i = 0; i < arr.length; i++) {
            sum += arr[i]; // 我们加的是数组元素arr[i] 不是计数器 i
        }
        average = sum / arr.length
        console.log(sum, average);

    求数组中最大的值

    //求数组[2,6,1,77,52,25,7]中最大的值
var arr = [2, 6, 1, 77, 52, 25, 7, 99]
var max = arr[0]
        for (var i = 1; i < arr.length; i++) {
            if (arr[i] > max) {
                max = arr[i]
            }
        }
        console.log('该数组里面的最大值是:' + max);
​

    数组转换为字符串

    //1.需要一个新变量用于存放转换完的字符串 str
//2.遍历原来的数组,分别把里面的数据取出来,加到字符串里面
//3.同时在后面多加一个分隔符
 var arr = ['red', 'green', 'blue', 'pink'];
        var str = ''
        var sep = '!'
        for (var i = 0; i < arr.length; i++) {
            str += arr[i] + sep
        }
        console.log(str);
    数组中新增元素

    1. 修改length长度 以及 索引号 增加数组元素

      length 属性是可读写的

      // 新增数组元素 ,修改length长度
 var arr = ['red', 'green', 'blue']
        arr.length = 5;  //数组中会有两个 empty
​
// 新增数组元素 修改索引号  追加数组元素
var arr = ['red', 'green', 'blue']
        arr[3] = 'pink';  // 如果本来就有 就会替换
        console.log(arr);
​

    使用循环来追加数组

     var arr = [];
        for (var i = 0; i < 10; i++) {
            arr[i] = i + 1;
            console.log(arr);
        }

    查找存储到新数组

    方法一 . 新定义一个变量 有点笨  为了方便理解才讲
var arr = [2,0,6,1,55,77,45,4,5,5]
     var newArr = [];
     var j = 0
     for (var i = 0; i < arr.length; i++) {
         if ( arr[i] > 10){
             // 新数组的索引号   需要从零开始依次递增
             newArr[j] = arr[i]
             j++; 
        }
     }
     console.log(newArr);
方法二 .
  var arr = [2,0,6,1,55,77,45,4,5,5]
     var newArr = [];
     newArr.length //刚开始是0   
     for (var i = 0; i < arr.length; i++) {
         if ( arr[i] > 10){
             // 新数组索引 因该从零开始依次递增
             newArr[newArr.length] = arr[i]   //和上面呢个也差不多
             j++; 
        }
     }
     console.log(newArr);
​

    删除数组指定元素(数组去重)

      var arr = [2, 0, 5, 0, 5, 0, 6, 77, 5, 755, 26]
        var newArr = [];
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] != 0) {
                newArr[newArr.length] = arr[i];
            }
        }
        console.log(newArr);
    反转数组
    // 数组长度  
​
var arr = ['red', 'green', 'blue', 'pink']
        var newArr = []
        for (var i = arr.length - 1; i >= 0; i--) {
            newArr[newArr.length] = arr[i]
        }
        console.log(newArr);

    冒泡序列

    是一种算法 把一系列数据按照一定顺序排列

    重复走火要排序的数列 一次比较两个元素 ,如果他们顺序错误就把他们交换过来

    //一共需要交换的次数 我们用外层 for 循环
//每层循环中交换的次数 用内层
//交换两个变量
var arr = [5, 4, 3, 2, 1];
        for (var i = 0; i <= arr.length - 1; i++) {   //外层循环管循环的次数
            for (var j = 0; j <= arr.length - i - 1; j++) {   //里层循环管每次交换的次数
                //内部交换两个数的值
                if (arr[j] > arr[j + 1]) {
                    var temp = arr[j]
                    arr[j] = arr[j + 1]
                    arr[j + 1] = temp
                }
            }
        }
        console.log(arr);

    如果给arr.length赋值,数组大小就会发生变化,如果赋值变小 元素就会丢失

  2. indexOf ,通过元素获得下标索引

  3. slice () 截取Array的一部分,返回一个新数组,类似于Substring

  4. push() 压入到尾部 unshift():压入到头部

    pop()弹出尾部一元素 shift():弹出头部一元素

  5. 排序 sort()

    arr.sort()

  6. 元素反转

    reversel()

  7. 拼接

    arr.concat([1,2,3])

    并没有修改数组只是会返回一个新数组

  8. 多维数组

    arr = [[1,2],[3,4],['5','6]]

函数

声明函数
  1.//函数一般是坐某件事情 函数名一般是动词
        2.//函数不调用 自己不执行
        
        function 函数名(){
            //函数体
        }
_______________________________________________
        function sayHi(){
            console.log('hi~~');// return aru
        }
调用函数
函数名( );
​
sayHi();
​

利用函数参数 实现函数重复不同代码

形参 和 实参
​
        // function 函数名(形参1, 形参2) { //在声明函数的小括号里面是 形参 (形式上的参数)
​
        // }
        // 函数名(实参1, 实参2);  //在调用的小括号中是实参(实际的参数)
        // 执行过程`
        function cook(aru) { //形参是接收实参的  底层是 aru = '酸辣土豆丝' 形参类似于一个变量
            console.log(aru);
        }
        cook('酸辣土豆丝')
        cook('大肘子')
        //  函数的参数 个数不限
​
​
​
//求两个数的和
        function getSum(num1, num2) {
            console.log(num1 + num2);
        }
        getSum(1, 3);
​
​
//求两个数之间的和
        function getSums(start, end){
            var sum = 0
            for(var i = start; i <= end; i++){
                sum += i;
            }
            console.log(sum)
        }
     getSums(1, 100);

函数形参和实参个数不匹配

1.实参个数多于形参个数 最终取决于形参个数

2.实参个数小于 形参个数 形参的默认值都是 underfined

形参可以看作是不用声明的变量 没有接受值 就是 underfined

函数的返回值 return语句

函数将值返回给调用者

//函数的返回值格式
function 函数名(){
    return 需要返回的结果;
}
函数名();
//1. 函数只是实现某种功能, 最终的结果需要返回给函数的调用者
//2. 只要函数遇到return 就把后面的 结果返回给函数调用者
//3. 代码验证
求 数组中的最大值
  function getArrMsx(arr) {
            var max = arr[0]
            for (var i = 1; i <= arr.length; i++) {
                if (max < arr[i]) {
                    max = arr[i]
                }
            }
            return max;
        }
        // getArrMsx([5, 6, 7, 9, 5, 2, 4, 99, 44, 55]); //实参是一个数组
        var re = getArrMsx([5, 6, 7, 9, 5, 2, 4, 99, 44, 55]); //用变量接收返回结果
        console.log(re);
返回值注意事项

1.return 终止函数

2.return 只能返回一个值

3.函数如果没有 return 返回的是 underfined

break 结束当前循环体

continue 跳出本次 继续执行下次

return 不仅可以退出 返回return值 同时结束当前函数体内代码

arguments的使用

用argunments 就不需要( ) 里面的实参了

当不知道需要几个形参的时候

arguments 是当前函数的一个内置对象 所有函数都内置了一个arguments 其中存储了传递的所有实参 ,只有函数才有

伪数组: 1.具有数组的 length 属性 2.按照索引的方式进行存储

3.没有真实数组的一些方法 pop() push()

函数冒泡排序

sort 排序

​
        function sort(arr) {
            for (var i = 0; i < arr.length - 1; i++) {
                for (var j = 0; j < arr.length - i - 1; j++) {
                    if (arr[j] > arr[j + 1]) {
                        var temp = arr[j]
                        arr[j] = arr[j + 1]
                        arr[j + 1] = temp
                    }
                }
            }
            return arr;
        }
        var arr1 = sort([1, 4, 2, 9])
        console.log(arr1);

函数可以调用另一个函数

自己悟 我睡着了 没记

函数声明方式 2

函数表达式 (匿名函数)

var 变量名 = function(){}

调用

变量名();

JavaScript 作用域

就是代码名字(变量)在某个范围内起作用和效果 , 是为了提高程序的可靠性 并减少命名冲突

js的作用域(es6)之前 : 全局作用域 局部作用域

全局作用域 : 整个script 标签 或者是 一个js文件

局部作用域 : 在函数内部就是局部作用域

变量的作用域

全局变量 在全局作用域下的变量

如果在函数内部 没有声明直接赋值的变量也属于全局变量

全局变量 只有在浏览器关闭的时候才会销毁 比较占内存

局部变量 函数内部

程序执行完毕就会销毁 比较节约内存

作用域链

内部函数访问外部函数的变量,采用的是链式查找的方式来决定取那个值

在目标处 一层一层往外查找

JS 预解析

js代码是由浏览器中 JS解析器来执行的

解析的时候分为两步 预解析和代码执行

预解析 js 引擎会把js 里面所有 var 和 function提升到当前作用域的最前面

执行 就是从上往下顺次执行

预解析 分为 变量预解析 (变量提升) 和 函数预解析(函数提升)

1.变量提升 把所有变量声明提升到当前作用域最前面 不提升赋值操作

2.函数提升 把所有的函数声明提升到当前作用的最前面 不调用函数

// 案例一
 var a = 18;
        f1();
​
        function f1(){
            var b = 9
            console.log(a);
            console.log(b);
            var a = '123'
        }
        // 相当于以下代码
        var a;
        function f1(){
            var b
            var a 
            b = 9
            console.log(a);// 拿上面呢个 a 结果是undefined
            console.log(b);
            a = '123';
        }
        a = 18
        f1();
// 案例二
 f1();
        console.log(c);
        console.log(b);
        console.log(a);
​
        function f1() {
            var a = b = c = 9;
            //相当于 var a = 9; b = 9; c = 9; b 和 c 直接赋值 没有声明 是全局表变量
            //不同于集体声明 var a = 9, b = 9, c = 9;
            console.log(a);
            console.log(b);
            console.log(c);
        }
        // 预加载后
        function f1() {
            var a;
            a = b = c = 9;
            console.log(a);
            console.log(b);
            console.log(c);
        }
        f1();
        console.log(c);
        console.log(b);
        console.log(a);  // var属于局部变量 不能调用 所以是 undefined

JavaScript对象

对象是一个具体事物

一个数据库 一张网页 一个远程服务器的连接也可以是对象

在JS中对象是一组无序的相关属性和方法的集合,所有的事物都是对象 例如 字符串,数值,数组,函数等.

属性: 事物的特征 ,在对象中用属性来表示(一般用名词)

方法: 事物的行为 ,在对象中用方法来表示(一般用动词)

{ } 其中属性或者方法采用键值对 , 方法冒号后面跟一个匿名函数

使用对象

调用对象的属性 我们采用 对象名.属性名

console.log(obj.uname);  //调用
        console.log(obj['age']);
        obj.sayHi //调用对象   对象名.方法名()

变量 属性 函数 方法

 // 变量和属性的相同点 他们都是用来存储数据的
        var num = 10
        var obj = {
            age: 18
        }
        console.log(obj.age); 
        // 变量 单独声明并赋值  使用的时候 直接写变量名
        // 属性 在对象里面的不需要声明的 使用的时候 对象.属性
​
 // 函数和方法的相同点  都是实现某种功能
//函数是单独声明 并且调用的 函数名.()  是单独存在的
//方法 在对象里面
​
​
​
利用构造函数创建对象

因为前两种创建对象的方式一次只能创建一个对象

1.利用函数的方法 封装对象 就叫构造函数

2.构造函数不需要return 就可以返回结果

   function 构造函数名(params) {
            this.属性 = 值;
            this.方法 = function () {
            }
            new 构造函数名();
        }
  function Star(uname, age, sex) {  //构造函数 首字母大写
            // 下面这些是相同的属性 下面还需要赋值
            this.name = uname
            this.age = age;
            this.sex = sex;
            this.sing = function(sang){
                console.log(sang);
            }
        }
        var ldh = new Star('刘德华', 18, '男'); //调用函数返回的是一个对象
        console.log(ldh.name);
        console.log(ldh['sex']);
        ldh.sing('冰雨')
// 只要 new Star() 调用函数就创建一个对象 ldh {}
​

3.只要 new Star() 调用函数就创建一个对象 ldh {}

4.属性和方法前面必须加 this

5.构造函数 首字母大写

构造函数和对象

1.对象是一个具体的事物

2.构造函数 是泛指的某一大类 类似于 java 语言中的 类

3.利用构造函数创建对象的过程我们也称之为实例化

new 关键字执行过程

1.new 构造函数可以在内存中创建一个空的对象

  1. 让this 指向刚才创建的空对象

3.执行构造函数里面的代码 给空对象添加属性和方法

4.返回这个对象 ,(所以构造函数里不需要return)

for in 遍历对象

var obj = {
    name: '贾培东',
    age: 18,
    sex: '男',
    fn: function(){}
}
for(变量 in 对象)
for(var k in obj){
    console.log(k); // k 变量输出  得到的是 属性名
    console.log(obj[k]); // obj[k] 得到的是 属性值
}
// 使用 for in 里面的变量 我们喜欢写 k 或者是 key

小结

  1. 对象可以让代码结构更清晰
  2. 对象复杂数据类型object
  3. 本质 : 对象就是一组无序的相关属性和方法的集合
  4. 构造函数泛指某一大类,比如人
  5. 对象实例特指一个事物,比如你
  6. for in 循环 遍历对象

JavaScript内置对象

内置对象

语言自带的一些对象 并且 提供了 一些基本的 功能(属性和方法)

JavaScript中对象分为3种 : 自定义对象(var { }) , 内置对象 , 浏览器对象

Math对象

不是一个构造函数 所以不需要 new 来调用 直接使用

绝对值方法 Math.abs( )

向下取整 Math.floor( ) // 地板

向上取整 Math.ceil( ) // ceil 天花板

四舍五入 Math.round ( ) // .5比较特殊 会往大了取

随机数方法

1.random( ) 返回一个随机小数

2.方法里面不跟参数

console.log(Math.rundom());
// 两数直接的随机整数 并且包含两数
 function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        console.log(getRandom(1, 100));

Date 日期对象的使用

Date( ) 日期对象 是一个构造函数 必须使用new 来调用创建日期对象

// 1. 使用Date  如果没有参数返回当前系统的当前时间
var date = new Dare();
console.log(date);
// 2.参数常用的写法
//数字型 2019.10.01 或者是 字符串型 '2019-10-1 8:8:8'
 var date = new Date('2019-10-1 8:8:8')
        console.log(date);
// 3.日期格式化
 var date = new Date();
        console.log(date.getFullYear());// 返回当前日期的年 2019
        console.log(date.getMonth() + 1);// 返回的月份小一个月 记得+1
        console.log(date.getDate()); // 返回的是几号
        console.log(date.getDay()); // 返回的是周几  周日是0
        // 写一个 人看的
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var dates = date.getDate();
        var arr = ['星期日', '星期一', '星期三', '星期四', '星期五', '星期六'];
        var day = date.getDay() - 1;
        console.log('今天是:' + year + '年' + month + '月' + dates + '日 ' + arr[day]); 
//  时分秒 和这个差不多  getHours    getMinutes    getSeconds

获取Date总的毫秒数

不是当前时间的毫秒数(时间戳),而是距离1970年一月一号过了多少

// 1.通过 valueOF()  getTime()
var date = new Date();  //现在时间距离 1970过了多少毫秒数
console.log(date.valueOf())
 // 简单写法  最常用
var date1 = +new Date(); // +new Date() 返回的就是总的毫秒数
// H5 新增的 获得总的毫秒数
console.log(Date.now());
​
​
// 倒计时 --------------------------------------------
  function conutDown(time) {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var inputTime = +new Date(time)  //返回的是用户输入时间总的毫秒数
            var times = (inputTime - nowTime) / 1000;  // times是剩余时间总的毫秒数  一秒等于1000毫秒
            var d = parseInt(times / 60 / 60 / 24); //天
            d = d < 10 ? '0' + d : d
            var h = parseInt(times / 60 / 60 % 24) // 时
            h = h < 10 ? '0' + h : h
            var m = parseInt(times / 60 % 60) // 分
            m = m < 10 ? '0' + m : m
            var s = parseInt(times % 60) // 当前的秒
            return d + '天' + h + '时' + m + '分' + s + '秒';
        }
        console.log(conutDown('2022-4-23 18:00:00'))

数组对象

 var arr1 = new Array(2)  //1.这个表示数组有两个空
 
 var arr1 = new Array(2,1)  等价于 [2,1] //2.这个表示数组里 有1,2
​
​

添加数组元素

push( ) 在数组的末尾添加 一个或多个数组元素

arr.push( ); push完之后返回值是数组的长度

arr.unshift( ); 在数组开头添加元素 添加完后也返回数组长度

删除数组元素

arr.pop( ) 删除数组的最后一个元素 无参数 返回的是删除的呢个元素

arr.shift( ) 删除数组第一个元素

数组排序

1.反转数组

arr.reverse( );

2.数组排序 (冒泡排序)

arr.sort( );

var
index of

数组去重

遍历旧数组 然后取查询新数组

数组转换为字符串

arr.toString

arr.join (分隔符)

字符串对象

基本包装类型 : 把简单数据类型 包装为 复杂数据类型

有三种 number

var temp = new String('andy')

str = temp;

temp = null;

字符串不可变

var str = 'andy'

var str = 'red'

常用方法

根据字符返回位置

var str ''

//查找一个字符出现的位置及次数
//先查找第一个 0 出现的位置
var str = 'gawlsdfooasdfoeo'
var index = str.indexOf('o')
var num = 0;
while (index !== -1) {
            console.log(index);
            index = str.indexOf('o',index + 1)
        }
console.log('0出现的次数是' + num)
​

查找一个字符出现的位置及次数

得到的是属性值

操作DOM

获取元素

getElementByld

getElementByClassName

querySelector('') 返回指定选择器的第一个元素对象 里面的选择器需要加符号 类.box id #name

返回指定选择器所有的元素对象集合

var allBox = document.querySelectorAll('box')

获取body元素 或 html 标签

var = bodyEle = document.body // 返回body元素对象

var htmlEle = dcoument.documentElement // 返回html元素对象

事件基础

触发响应的一些机制

事件由三部分组成

1.事件源 : 事件被触发的对象

var btn = document.getElementById('btn');

2.事件类型 : 如何触发 什么事件 比如

鼠标点击(onclick)

鼠标经过

键盘按下

3.事件处理程序 通过一个函数赋值的方式完成

btn.onclick = function( ){

alert('随便')

}

4.执行事件的步骤

  • 获取事件源
  • 注册事件 (绑定事件)
  • 添加事件处理程序(采用函数赋值形式)

操作元素

innerText

var div = document.querySelector('div')

div.innerText = '要改变的内容' //不识别 html标签

innerHtml

div.innerHtml = '要改变的内容/strong' 识别Html标签

// 如果想要某个表单被禁止 不能再被点击 disabled
// 
var flag = 0
eye.onclick
原本是淘宝的案例
​

循环精灵图

<ui>
    <li> </li>
    <li> </li>
    <li> </li>
    <li> </li>
    <li> </li>
</ui>
​
    <script>
        var lis = document.querySelectorAll('li')
        for(var i = 0; i < lis.length; i++){
            lis[i].style.backgroundPosition = '0 -44';
​
        }

获取变量数据类型

typeof 后跟变量名

数据类型的转换

1.转换为字符串类型

  • 变量名.toString()
  • String()括号里面放变量名
  • 拼接字符串 只要有字符串和其他类型拼接结果都是字符串 数值相加 字符相连

2.转换为数字

  • parselnt(string)将string转换为整数数值类型 parse解析
  • parseFloat(String) 将string转换为浮点数
  • Number(String) 强制转换
  • 数字运算 隐式转换 '12'-0 12变为数字

3.转布尔

Boolean()函数 代表空,否定的值 会被转换为false

翻译器翻译方式有两种 一个是 编译 一个是解释

两者区别在于翻译的时间点不同

编译 在代码执行之前编译

解释器 运行时解释 如 JavaScript

标识符 变量 属性 函数 参数的名字

运算符(operator)

后++ 先返回原值

逻辑运算

&& 与 两个都为真结果为真

|| 或 一个为真 结果为真

! 取反

比较运算符

= 赋值

== 等于 (类型不一样,值一样也会判断为true)

比如 1 = '1'

多用=== 绝对等于(类型一样,值一样)

NaN!===,与所有的数值都不相等 包括自己

console.log((1/3) === (1-2/3))

尽量避免使用浮点数进行运算 存在精度问题

复杂数据类型

数组

var arr = [1,2,3,4,5,6,'hello',null,true]
new Array(1,2,3,4,5,6,'hello',null,true)

为保证代码的可读性 建议使用[]

对象

若干个键值对

JavaScript 中所有键都是字符串 ,值是任意对象

var 对象名 = {
    属性名:属性值,
    属性名:属性值
}

动态的删减属性

通过delete删除对象属性

动态添加 ,直接给新的属性添加值即可

判断属性值是否在对象中 属性值 in 对象名

创建对象的三种方式

1.利用字面量创建对象

对象字面量 就是 { } 里面包含了具体对象的属性和方法

对象用大括号 数组用中括号

 var person = {
•       name: "jiapeidong",
•       age: 3,
        tags:['shuai','youqian','...']
}

每个属性之间使用 逗号 隔开

流程控制

if 判断(){}
循环

while(age<100){

age = age + 1;

console.log(age)

}

do{

(age<100)

age = age + 1;

console.log(age)

}while(age < 100)

for(let i = 0; i < 100 ; i++){

console.log (i)

}

数组循环

for in 出来的是下标

for of 出的是 具体的值 可用于 遍历数组和Map

Map (感觉很像字典)

var map = new Map([['字典',100],['我',10],['总之',110]]);

var name = map.get('tom');

通过Key获得Value 与字典相似

map.set('admin',123456); 添加

map.delete('admin'); 删除

console.log(name);

set

可以去重

set.add(2); 添加

set.delete(1); 删除

console.log(set.has(3)); 是否包含某个元素

iterator

函数

定义一个函数

1.直接

function abs(x){
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

执行到return代表函数结束,没有执行returnu也会返回结果 结果是underfined

2.赋值

算是匿名函数 赋值给abs 可通过abs调用

var ads = function(x){
     if(x>=0){
        return x;
  }else{
        return -x;
    }
}

3.调用函数

参数问题

JS 可以传任意个参数,也可以不传,,,所以我们有时需要手动throw异常,来判断

arguments 关键字

代表传入的参数是数组,但是包含所有参数

rest

获取除了已经定义的参数之外的所有参数 ,只能写在最后面 必须用...在之前做标识

箭头函数

基础语法:

const fun = () => 100

console.log(fun());

() 中定义参数 如果只有一个参数可以不写括号;

{}中写函数体 如果函数体中只有返回值, 可以不写return

区别:

1.this指向不同

  • 普通函数,谁调用这个函数,this指向谁
  • 箭头函数,在哪里定义函数,this指向谁

变量的作用域

var 如果是在函数体内声明,函数体外是不能调用的

内部函数可以访问外部函数

假设内部函数变量和外部重名,会优先内部(变量查找是从函数内部开始的)

js执行引擎 会提升后面变量的声明 但不会提升后面变量的赋值 , 变量的定义最好放在函数的头部,不赋值也单个申明在头部

alert(x); == alert(windows.x)

alert()自生也是一个windows的值

默认所有的全局变量都绑定在windows对象下

Javascript 实际上只有一个全局作用域,任何变量(函数也可以视为变量),向外查找无果就会报错

规范

由于我们所有的全局变量都绑定在window上,如果不同的js文件 使用了相同的全局变量,就会冲突我们可以定义一个全局变量,调用即可 把自己的代码放入一个命名空间,以降低全局命名冲突问题

局部作用域

使用 let 解决局部变量冲突问题 建议使用let定义局部变量

常量 const

es6前 定义常量用大写 甚至可以被改变,,,

方法

把函数放到对象中就是方法了 对象中只有属性和方法

调用方法一定要带括号() XXX.age()

this 可以指向自己的属性,是默认指向调用它的那个对象 但是在Javascript中 可用apply 控制this的指向

apply是所有函数都有的属性.......getAge.apply(指向的一个对象,[]);代表 this指向了这个对象 参数为空

对象

标准对象

1.Date

2.JSON

是一种数据交换格式 参差结构 提升网络传输效率

任何JavaScript支持的类型都可以用JSON来表示

格式

  • 对象都用{}
  • 数组都用[]
  • 所有的键值对 都是用 key:value

对象转换为JSON字符串

var Name = Json.stringify(需要转换的对象)

字符串转换为对象 parse解析的意思

JSON.parse(加引号的JSON)

面向对象

  1. 和JAVA有点区别 类是一个模板

    对象是一个实例

    类是对象的抽象 对象是类的具体表现

原型: proto前继承后

原型链: JS每一个函数都有一个prototype属性 ,这个属性指向函数的原型对象 原型对象都包含一个指针 都会指向老祖宗object object也会指向自己

class继承

  1. 定义一个类 里面有属性和方法

严格检查模式

'use strict' ;

局部变量建议使用let去定义

Web APIs

API (应用程序编程接口)

是一些预先定义的函数 ,一种工具 不需要访问源码

web API

  1. 浏览器提供的 操作浏览器功能和页面元素的API(BOM和DOM)
  2. 一般有输入和输出(函数的传参和返回值),有很多都是方法(函数)

DOM

简介

  1. 文档对象模型(一个页面就是一个文档) 就是编程接口 可改变网页内容,结构和样式

  2. DOM树

    • 页面就是文档使用document表示

    • 页面中所有标签都是元素,使用element表示

    • 节点 网页中所有的内容都是节点(标签,属性,文本,注释等),DOM中用node表示DOM把以上内容都可以看作是对象

      更新节点

    选择名.innerText='修改内容'

    innerHtml 可修改标签

    可以操作CSS

    选择器(就是获取节点) 加 Style.属性

    删除节点

    获取父节点

    var father = p1.parentElement;

    然后通过父节点方法(removeChild) 删除

事件

事件源 事件名 事件监听 事件处理

load加载事件 当页面加载完毕后执行的事件

事件流:指页面接受事件的顺序

事件传播顺序 事件捕获和事件冒泡

事件捕获:从大到小

事件开始时由document接受 然后具体节点

事件冒泡: 从小到大

事件开始时由最具体的元素接受 然后逐级向上传播

事件处理程序: 相应某个事件的函数叫做事件处理程序(或者事件监听器)

事件处理程序都是以ON开头的

1.HTML事件处理程序

事件绑定在标签上

2.DOM 0级事件 通过JS指定事件处理程序的传统方式

将一个函数赋值给一个事件处理程序属性需要有一个操作对象的引用

只能为同一元素的同一事件设定一个事件程序,如果重复会覆盖,只能写在后面

3.DOM 2级事件 处理添加指定删除事件

addEventListener()

参数一事件名

参数二 处理事件的函数

参数三 事件冒泡或捕获

removeEventListener()

都接受三个参数 要处理的事件名 作为事件处理程序的函数和一个布尔值(如果是ture,在捕获阶段处理,false,在冒泡阶段调用事件处理)

可以为同一设置多个

常用事件

onload 页面加载完成后执行

onclicl 点击事件

onchange 改变域的内容

onmouseout 鼠标移动到某个元素

onkeruop 某个键盘的键被松开

BOM对象

核心对象是window 表示浏览器的一个实例

window 的一些方法

1.消息框 alert 会阻止代码运行

2.输入框 prompt 返回提示框中的值

3.确认框 confirm

开关窗口
  1. window
document.getElementById("btn1").onclick = function(){
​
window.open
​
}
时间函数

setTimeout();

参数一 执行的函数

参数二 时间单位毫秒

history

节点

文本节点

属性节点

注释节点

元素节点

获取节点

1.getElementByld() 根据ID获取dom对象 只有一个

2.getElementsByTagName() 根据标签名获取DOM数组

3.getElementsByClassName()根据样式名获取dom对象数组

创建插入节点

创建

1.createElement() 创建一个新节点

avatar
文章
阅读
粉丝