JavaScript

1.JS概念

JavaScript是用于实现用户交互、动态控制文档的外观和内容,动态控制浏览器操作、创建cookies等网页行为的跨平台、跨浏览器的由浏览器解释执行的客户端脚本语言 js文档：https://zh.javascript.info/#tab-1

2.特点

• 是基于对象的弱类型语言

  • 弱类型语言：是一种弱类型定义的语言，某一个变量被定义类型，该变量可以根据环境变量自动进行转换，不需要经过显性强制转换。弱类型语言包括vb，php，javascript等。

  • 强类型语言：是一种强制类型定义的语言，一旦某一个变量被定义类型，如果不经过强制转换，则它永远就是该数据类型了，强类型语言包括java，net，c++等

• 跨平台

  • Linux，windows，mac只要有浏览器，就能够运行

• 事件驱动

  • 鼠标点击，鼠标悬浮，鼠标移动，键盘按下，键盘弹起，获取焦点，失去焦点，加载等常用的事件

4.JS的用途

• 表单客户端验证；

• 动态HTML(DHTML)：不需要人为介入，就能自动实现动画效果。

• 用户交互的动画效果：需要鼠标和键盘介入的动画效果

• 动态添加一些网页内容

• 动态的获取和改变html元素的属性或css属性，从而动态的创建网页内容或改变内容的显示

8.引入方式

8.1 如何在HTML中引入Javascript

• 引入js文件

• 写在script标签内部（可以使用多个，每一个之间都是有联系的）

• 注意事项：

  • js代码必须放在结束的后面【原因：js会阻塞dom的解析；当js加载没有完成，页面是不会继续往下执行的】

  • 在head中添加js代码，必须使用window.onload

  • 不能在s

    8.2 如何在HTML中使用Javascript

  • 使用事件传入javascript代码

      <div onclick="alert('hello world')"></div>

  • 使用超链接传入javascript代码

  • <a href="javascript:alert('hello world');"></a>

    9.输出语句

  • alert（"这是我的输出页面"）； 弹窗输出

  • document.write（“这是我输出的内容”）； 在页面输出，可以输出标签

  • console.log（） 在控制台中打印，打印任意字符或者js的变量信息； 可以接受任何字符串、变量、数字、对象；

  • 10.JS语句与注释

  • javaScript中的语句以一个分号结尾，如果省略分号，则由解析器确定语句的结尾，一般情况下，换行会被当做一个语句的结尾

alert('hello world') ;
document.write('hello world');

11.标识符

注意：

JavaScript的数据类型

分为两种：原始类型（即基本数据类型）和对象类型（即引用数据类型）；

js常用的基本数据类型包括

undefined - - (未定义)、null- - (空的)、number - - (数字)、boolean- - (布尔值)、string- - (字符串)

js的引用数据类型也就是

对象类型Object- - (对象)，比如：array - - （数组）、function - - （函数）、data - - （时间）等；

JS为弱类型语言，不必声明数据类型，而是在使用或赋值的时候确定其类型 基本数据类型存放在栈中 引用数据类型存放在堆中【讲完类型后面详细说堆和栈】

强类型语言/弱类型语言

强类型语言【java】：

弱类型语言【js/python/php】：

对象类型

判断数据类型

可以通过typeof运算符来判断数据类型

• 标识符的组成：标识符可以由字母、数字、下划线（_）和美元符号（$）组成。这意味着标识符可以包含英文字母、数字、下划线和美元符号。

• 不能以数字开头：标识符的第一个字符必须是字母、下划线或美元符号，不能以数字开头。

• 大小写敏感：JavaScript是大小写敏感的，因此“MyVariable”和“myvariable”被视为两个不同的标识符。

• 保留字和关键字：标识符不能使用JavaScript的保留字（关键字），如if、for、while，true、false和null等。这些词被JavaScript语言内部使用，具有特定的用途，用户不能自定义同名的标识符。

• 描述性和驼峰命名法：标识符应具有描述性，能够清晰地表达其含义和用途（有意义）。命名通常采用驼峰命名法，即第一个单词小写，后续单词首字母大写，例如myVariable、calculateSum等。

• 常量命名：常量通常使用全大写字母，并用下划线分隔单词，例如MAX_VALUE、PI。

• 变量的声明和赋值

• 什么是变量？

  解释：可以变化的量

• 变量是用于存储信息的容器【内存空间】 变量是一段命名的存储空间 变量是在程序运行过程中值允许改变变量的值 变量是由变量名，变量值，和变量类型组成

• 变量命名规则

• 第一个字符必须为字母，_或$，其后的字符还可以是数字 严格区分大小写，要有一定的含义 建议使用小驼峰规则来命名变量。redApple 不能使用关键词，保留字作为变量名

• 变量的命名和赋值

• var 变量名

• 变量名=值

• var 变量名=值

• 变量名=值

• var 变量1=值1，变量2=值2，变量3=值3

• 变量名是浏览器关闭后才释放在，在没关闭之前随时使用

• 重新声明的变量，不会丢失原始值，除非重新赋值

• 换行是语句的结束，最好结束时都加上 “ ； ”

• 变量名是区分大小写的

• 要求变量的使用要严格符合定义，所有变量都必须先定义后使用。

• 一旦一个变量被指定了某个数据类型，如果不经过强制转换，那么它就永远是这个数据类型了

• 它与强类型定义语言相反, 一个变量可以赋不同数据类型的值

• 本地对象：string，Array，Date，Math，Golbal，独立于宿主环境的ECMAScript实现提供的对象

• 宿主对象：DOM，BOM。ECMAScript中的‘宿主’就是我们网页的运行环境，即‘操作系统’和‘浏览器’

• String类型【重要】

js中用来表述文本的数据类型

• 字符串用单引号或双引号包括起来

• 单双引号均不能解析变量

• 变量与字符串，变量与变量之间可以使用运算符‘+’来链接

• 单引号和双引号可以互相嵌套，如果单引号中要嵌套单引号，需要使用转义字符

注意：

1. \n换行（在alert中生效）

2. 8进制表示法【进行两次转换，这里面的数字是ASCII中表示的八进制数字】

3. 16进制表示法

4. 16进制unicode表示法 

console.log('\062') //八进制50 对应的值：2

1. Number

按照进制划分：二进制、八进制、十进制、十六进制 按照其他划分：整形、浮点型、NaN（not a number） js中所有的数字是以IEEE-75标准格式表示的，浮点数的精确问题不是js特有的；因为有点小树以二进制表示位数是无穷的

整形： 0，6，-100，0xff00（十六进制），0377/0o77（八进制），0b1010（二进制），不管输入的是几进制，最终显示时都会转为10进制

浮点型： 1.2，0.123，3.14e11=>3,14*10^11 科学计数法

0.375+0.248.toFixed(2)=>保留两位小数（四舍五入）
console.log(1.0-0.9==0.1)//false
console.log(1.0+0.9==1.9)//true

NaN（not a number）： NaN是一个特殊的number值，not a number表示非数字，当程序由于某种原因计算错误时，将产生一个无意义的数字NaN NaN与任何值都不想等，包括NaN本身 任何涉及NaN的操作，结果都为NaN

var a='hello';
b=10;
alert(a-b)  // NaN

1. Boolean

1. 值只有true和false。分别代表逻辑真与假

2. 布尔值通常用来表示比较所得的结果

3. true和false是严格区分大小写的

var n=10;
if(n>8){
    alert('我是true');
}else{
    alert('我是false');
}

1. undefined【了解】

1. 定义了一个变量但没有为该变量赋值，使用了一个并未赋值的变量

2. 使用了一个不存在的对象的属性时

3. null【了解】

4. null表示一个空值

5. null不等于空字符串""、''或0

6. null和undefined的区别是，null表示一个变量被赋予了一个空值，而undefined则表示该变量尚未被赋值

7. Array(数组)【重要】

8. 创建数组

   方法一：

   var 数组名=new Array();

   方法二：

   var cars=new Array("Audi","BMW","BYD");

   方法三：

   var cars=["Audi","BMW","BYD"];

   获取数组中的值

var arr = ['少林寺','龙门石窟','二七塔','华谊电影小镇'];
console.log（arr[0]）;
console.log（arr[1]）;
console.log（arr[2]）;
console.log（arr[3]）;

 多维数组

Object 对象【重要】

一切皆对象

对象: 属性：本身所拥有的特性 方式：能做的事情

对象： { },使用{ }包括起来的都是对象 [ ], 使用[ ]包括起来的都是数组

创建对象： 方法一：var 对象名称 = new Object(); 方法二：var 对象名称 = {'键'：‘值’，'键'：‘值，'键'：‘值，'键'：‘值}；

JS的严格模式【了解】

在js中存在一个严格模式，使用 use strict来定义；这个是ES5中新增加的；

"use strict";
x = 3.14; 
console.log(x);

"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它，许多大项目已经开始全面拥抱它

另一方面，同样的代码，在"严格模式"中，可能会有不一样的运行结果；一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行。

1. 数据类型的检测

2.  var sum = 0
   console.log(typeof(sum));

   数据类型转换

• 自动转换：js会通过关系运算符，逻辑运算符，算数运算符，if语句等实现隐式转换
•      根据需要自动进行类型转换，但是转换时会遵循一定的规则
• 强行转换->通过内置对象的方法强制转换，比如：parseInt(),parseFloat(),Number(),String(),Boolean(),toString（）

转为字符串【掌握】

自动转换

类型	转换字符串型后的结果
number	NaN、0、或数值对应的字符串
null	"null"
boolean	"true"、"false"
undefined	"undefined"
object	若对象存在为其toString()方法的值，若对象不存在为"undefined"

强制转换： String（），object.toString() 

转为数字类型【掌握】

类型	转换为数字型后的结果
string	若内容为数字则为相应数字，否则为NaN
null	0
boolean	true转为1,false转为0
undefined	NaN
object	NaN

注意：数学运算（特殊情况：+再出现字符串的情况下不是数学运算，而是字符串的拼接）

强制转换 Number()

按照自动转换规则转换 parseInt(string) 、parseFloat(string)

isNaN() 函数用于检查其参数是否是非数字值

注意：parseInt还可以接受第二个参数（2到36之间），表示呗解析的值的进制，返回该值对应的10进制数。parseInt的第二个参数为10，即默认是十进制转十进制

parseInt('1000'); // 1000
// 等同于
parseInt('1000',10); // 1000
parseInt('1000'，2); // 8
parseInt('1000'，6); // 216
parseInt('1000'，8); // 512

转为布尔类型【掌握】

自动转换

类型	转换布尔型后的结果
""或''	FALSE
0或0.0	FALSE
NaN	FALSE
undefined	FALSE
null	FALSE
其它	TRUE

强制转换 Boolean(), !!

if(0 || "" || '' || NaN || undefined || null){
  alert('true')
}else{
  alert('false')
}
!!123.11  // true
Boolean('abc') // true
console.log(Boolean([])); // true

 特殊案例

console.log(Boolean([])); // true
console.log([] == false);   // true; ==两边的数据类型不一致，需要转为数字进行比较；[]=>字符串''=>数字0
console.log(![] == false); // true  ==的优先级比较低，肯定是先算左边 ![] 然后与后面进行比较，[]转为布尔值为true 取反 false false==false
console.log('0' == false); // true

• 在==比较的过程中，数据转换的规则 类型一样的几个特殊点：
• {} == {} false,对象对比的是堆内存的地址
• [] == [] false
• NaN == NaN false
• 类型不一样的转换规则：

• null == undefined true，但是换成 === 结果是false（因为类型不一致），剩下null/undefined和其他任何数据类型值都不相等

• 字符串 == 对象，要把对象转为字符串

• 剩下如果 == 两边数据类型不一致，都是需要转换为数字再进行比较

• 如果类型都是字符串，就会按照ASCII编码的进行对比

数据类性判断eg 

<script>
    console.log(Boolean([]));//结果true
    // 两边数据类型不一致的情况
    console.log(![]== true);//结果为false
    console.log(![]== false);//结果为true
    console.log('0'== false);//结果为true
    console.log('0'== true);//结果为false
    

    console.log(!5);//结果为false
    console.log(!'hello');false
    console.log(![]);false



    7%4
    i=5
    j=i++//
    console.log(j);//j=5 i=6
    k=++i
   console.log(k);//k=7 i=7
    m=i--
    console.log(i);
 console.log(m);//m=7 i=6
    n=--i
  console.log(n);//n=5 i=5
   </script> 

1. 运算符

 表达式

常量 1.2   'str'  false
变量 x  y
复合 x+1

操作符：表达式 x+1中的x，1为操作符 运算符：表达式x+1的，+为运算符 

• 11.1 算术运算符（+，-， *，/，%【重要】，++【重要】，--） 

• “+”算数加和字符串想接 i++ 先赋值，再加1；++i 先加1，再赋值

// 实现各行换色效果
for(var i=1;i<=10;i++){
  if(i%2==0){
      document.write("<font color='red'>"+i+"</font>");
  }else{
      document.write("<font color='green'>"+i+"</font>");
  }
}

 注意：正号有隐式类型转换功能

alert(typeof(+'5'))  // number

 比较运算符（>,<,>=,<=,==,!=不等于,!==不全等于）【了解】 

 专门用作判断，返回值结果为boolean

console.log(1.2+1.1==2.3) //true
console.log(1.2-1.1==0.1) //false

总结：比较运算符的结果是boolean类型 

赋值运算符（=【掌握】，+=【掌握】，-=， *=，/=，%=）

 ‘’= ‘’赋值运算符

var a = 10;
var arr = ['张三','李四','王武','孙刘','马奇'] 

 表示给num+1，再把相加之后的结果赋给num这个变量

var i=10;
i+=1 // i=i+1 效果一样  i++

使用场合：累加求和，字符串拼接

逻辑运算符（！，&&，||）【两边均为表达式】【重要】 

运算符	解释
!	逻辑取反
&&	逻辑且；只有两个操作数都为 true 时，才返回 true，否则返回 false。
??（了解）	空值合并运算符，如果左侧的表达式为 null或者 undefined 时，返回其右侧表达式，否则返回左侧表达式。

逻辑运算符用于测定变量或值之间的逻辑

|| 存在断点问题，第一个式子成立，不在执行第二个式子；如果第一个式子不成立，执行第二个登式(真假为真，假假为假，真真为真)

&& 存在断点问题，如果&&前面的值为false,后面的不再运行

&&式子两边同时成立，执行的是if（true），只要有一个不成立。或两个都不成立执行false

||运算方法[真前假后]：

1：只要“||”前面为false,不管“||”后面是true还是false，都返回“||”后面的值。 :2：要“||”前面为true,不管“||”后面是true还是false，都返回“||”前面的值。

   &&运算方法：

1：只要“&&”前面是false，无论“&&”后面是true还是false，结果都将返“&&”前面的值;

2：只要“&&”前面是true，无论“&&”后面是true还是false，结果都将返“&&”后面的值;

 eg

if(0 && 5){
  console.log('真');
}else{
  console.log('假');
}
console.log(10&&5);
console.log(0&&5);
var a=1;
console.log(a>5 && a++);
console.log(a<5 && a++);
console.log(a<5 && --a);
var a=10;
if(a<20||a++){
  console.log('真',a);
}else{
  console.log('假',a);
}

 使用技巧：|| 或 运算符使用技巧

// 如果你必须给一个变量赋默认值，可以简单的这样写
var a;
console.log(a) // undefined
a = a||'default value';
console.log(a)  // default value
a = a||'new value';
console.log(a)  // new value
// 在函数中传參使用，如果传參就使用传递过来的参数，没有传參就使用默认值
function show(10){
  var shownum = num || 20;
  console.log(shownum);
}
show(10);

条件运算符【三元运算符/三目运算符】【重要】

条件表达式?结果1:结果2 如果条件表达式结果为true则返回结果1 如果条件表达式结果为false则返回结果2 

var m=100>99?66:33
alert(m)

1. 运算符的优先级

小括号>算术运算符>比较运算符>逻辑运算符>赋值运算符 

eg：

<script>
        if(0 && 5){
        console.log('真');
        }else{
        console.log('假');
        }//false
        console.log(10&&5);//5
         console.log(0&&5);//0
          var a=1;
         console.log(a>5 && a++);//false
          console.log(a<5 && a++);//1
          console.log(a<5 && --a);//1
         var a=10;
         if(a>20||a++){
         console.log('真',a);
         }else{
         console.log('假',a);
         }//真 11
        // 如果你必须给一个变量赋默认值，可以简单的这样写
            var a = 0;
            console.log(a) // 
            a = a||'default value';
            console.log(a)  // 
            a = a||'new value';
            console.log(a)  // 
            // 在函数中传參使用，如果传參就使用传递过来的参数，没有传參就使用默认值
            console.log( 0 || 1 ); //1
            console.log( 1 || 2 ); //1
            console.log( 0 && 1 );//0
            console.log( 1 && 2 ); //2
            var a=5;b=3;
            var c;
            c=a+b>3 && a<a-b*2; 
            alert(c)//false
            思考1
            var i = 4=='4' ? 'A' : 'B';
            alert(i);  
            //思考2
             var m = 3+4>7 || 4*0.25>0.09; 
             alert(m);// true //
            //思考3
             var n = 1;
            var s = 0;
            if(p=--n||++s){
            n++;
            s++;
            }
             alert(n); //1
            alert(s);//2  
            // //思考4
             var a=0;
            var b=4;
          if(c=a && b<6){
             c=a+b;
             }else{
             c=a-b;
             }
             alert(c);//-4
    </script>

JSON数据类型

JSON：JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式 主要作用： JSON 是用于存储和传输数据的格式。 JSON 通常用于服务端向网页传递数据 。 特性： json的键不能重复，如果键是一个完整的单词，可以直接写，如果键里面包含了空格，要用引号引起来 格式：

{key: value, key: value}

1. 数据为 键/值 对。
2. 多个数据由逗号分隔
3. value可以为任意类型

 定义复杂的json格式

var address = {
    "city":"成都",
    "province":'四川',
    "aaa":{
       "name":'Test',
       "value":{
           "value":"123"
       }
     },
     "bbb":[{
       "name":"lisi"
     },{
       "name":"zhangsan"
     },{
       "name":"wangwu"
     }]
};

流程控制

在任何一门程序设计语言中，都需要支持满足程序结构 化所需要的三种流程控制:

• 顺序控制

• 分支控制（条件控制）

• 循环控制

顺序控制：在程序流程控制中，最基本的就是顺序控制。程序会按照自上而下的顺序执行。 

分支流程控制

• if语句

• switch语句

if语句【重要】 

eg

// 判断成绩是否及格
// 单分支
var score = 78;
if(score>=60 && score<=100){
  console.log('及格');
}
// 双分支
if(score>=60 && score<=100){
  console.log('及格');
}else{
  console.log('不及格');
}
// 双分支 改写 三元运算符
var res = score>=60&& score<=100?'及格':'不及格';
console.log(res);
// 多分支
var score = 59;
if(score>=60 && score<=100){
  console.log('及格');
}else if(score>=0 && score<=59){
  console.log('不及格');
}else{
  console.log('输入错误！');
}
// 分支嵌套
var score = 59;
if(score>=60 && score<=100){
  if(score>=85){
    console.log('优秀');
  }else if(score>=75){
    console.log('良好');
  }else{
    console.log('中等');
  }
}else if(score>=0 && score<=59){
  console.log('不及格');
}else{
  console.log('输入错误！');
}

 Switch【掌握】

switch (变量){
  case 值1:
  代码段;
       break;
  case 值2:
  代码段;
       break;
  ...
  default:
  代码段;
}

 （）只能是变量或值，不能是表达式

var d = new Date();
console.log(d); // 获取日期时间对象
var week = d.getDay(); // 获取星期几
switch (week) {
  case 0:
    console.log('星期天');
    break;
  case 1:
    console.log('星期一');
    break;
  case 2:
    console.log('星期二');
    break;
  case 3:
    console.log('星期三');
    break;
  case 4:
    console.log('星期四');
    break;
  case 5:
    console.log('星期五');
    break;
  case 6:
    console.log('星期六');
    break;
}

对比：什么时候用if，什么时候用switch

if：条件是一个范围 或者 是具体的值

switch：条件是一个具体的值

能够使用switch实现的判断，都可以使用if来实现 但是，能够使用if语句实现的判断，不一定能使用switch实现

eg:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>唱歌</button>
    <button>说话</button>
    <button>跳舞</button>
</body>
<script>
    var bb = document.querySelectorAll("button");
    //bb.length 获取button的长度
    for (var i = 0; i < bb.length; i++) {
        bb[i].onclick = function () {
            console.log(this.innerText);
            if (this.innerText == '唱歌') {
                console.log('喜洋洋与灰太狼');
            } else if (this.innerText == '说话') {
                console.log('njhgjk');
            } else {
                console.log('discore');
            }
        }
     }
</script>

</html>

循环控制语句

3.1 while语句【掌握】 

While 循环会在指定条件为真时循环执行代码块。 While循环，先进行条件判断，再执行循环体的代码

while (条件表达式){
  循环体
}

 注意：当前循环中，如果不满足条件，一次都不会执行

var i= 1;
while(i<=10){
  console.log(i);
  i++;
}

  do......while【了解】

do/while 循环是 while 循环的变体。该循环会执行一次代码块，在检查条件是否为真之前，然后如果条件为真的话，就会重复这个循环。 do while循环，先执行循环体代码，再进行条件判断。至少执行一次循环体的代码。 

do {
    代码段
} while (条件表达式)

 for【重要】

for (循环变量初始化表达式; 循环条件表达式; 更新循环变量表达式) { 循环体 }

注意：

1. 循环变量可以定义在for 循环结构体外

2. 没有更新循环变量会变成死循环

3. 循环条件中的‘；’不能省略

 eg:求100以内奇数和

<script>
    var sum = 0;
    for (i = 1 ;i<100;i++){
        if(i % 2 !=0){
            sum = sum +i
        }
    }
    document.write(`1+3+5+...+99=${sum}`)
  

    
</script>

eg:九九乘法表

乘法表
        for(i =1;i<=9;i++){
        for(j = 1;j<=i;j++){
            document.write('<div>'+i+'*'+j+'='+(i*j)+'</div>')
        }
        document.write('<br>')
        }

金子塔：

 <style>
        .kl{
            width: 50px;
            height: 50px;
            margin: 2px;
            display: inline-block;
         
           
        }
        .fg{
            width: 50px;
            height: 50px;
            margin: 2px;
            display: inline-block;
            background-color: blueviolet; 
        }
    </style> 


<script>
        var l = 2;
       for(i = 0;i<6;i++){
        for(j=0;j<6-i;j++){
            document.write('<div class="kl"></div>')
        }
        for(k = 0 ;k<l*i+1;k++){
            document.write('<div class="fg"></div>')
        }
        document.write('<br>')
       }
</script>

for...in【掌握】

• for...in 语句用来遍历对象的每一个属性。每次都将属性名作为字符串保存在变量里

• 在无法预知对象的任何信息，和循环次数的时候使用

• 常用于数组和对象                                                                                                                            

语法格式

for (变量 in 对象) { 代码段 }

 eg

 <script>
        var aa = {
            'name':'张三',
            'age':18,
            'sex':'男',
            'heigh':180,
            'weight':60,
            'class':'大数据222班',
            'hobbliuy':{
                'ball':'足球','篮球':'羽毛球',
                'aa':"bb"
            }
        }
        // console.log(aa.hobbliuy);
        for ( k in aa) {
           console.log(aa[k]);
      }
    </script>

跳转语句 

break：break语句只能应用在循环（while、do......while、for）或switch语句中 break语句用于退出循环，阻止再次反复执行任何代码或者退出一个switch语句

for (var i=1; i<10; i++) {
  if (i % 5 == 0) {
    break;
  }
  iNum++;
}
alert(iNum);

 continue【掌握】

continue语句只能应用在循环中（while、do......while、for）语句中 用于中止本次循环，根据控制表达式还允许继续进行下一次循环。

var iNum = 0; 
for (var i=1; i<10; i++) {
  if (i % 5 == 0) {
    document.write(i);

    continue;
  }
  iNum++;
}
alert(iNum);

自定义函数 

1定义函数

 

• 函数是一个可重用的代码块，用来完成某个特定功能。每当需要反复执行一段代码时，可以利用函数来避免重复书写相同代码。

• 函数包含着的代码只能在函数被调用时才会执行，就可以避免页面载入时执行该脚本

• 在JavaScript中，可以使用以下三种方法来定义一个函数

  • 使用function语句定义函数[最常用]

  • 使用Function()构造函数来定义函数

  • 在表达式中定义函数

1.1Function构造函数定义函数 

构造函数的方法

 var 函数名 = new Function(“参数1”，”参数2”，”参数3”……”函数体”);

注意：

1. 在使用Function()构造函数的时候，第一个字母要大写 Function()构造函数只能在JavaScript 1.1或更高版本中使用 每次调用构造函数时都会解析函数体，并且创建一个新的函数对象，效率非常底

1.2function语句定义函数[最常用的方式] 

语法格式 

 function 函数名 (参数1，参数2……[形参]){ <语句块> return 返回值 }

function关键字：用于定义一个函数 函数名：函数名通常是一个合法的标识符,是唯一的，区分大小写的 参数：在函数里，可以有0个或者多个参数。如果有多个参数，参数与参数之间要用逗号隔开。无论函数是否有参数，小括号必需要有 函数体：用大括号括起来的代码块，即函数的主体 返回值：函数返回的值由关键字return完成，可选项 

1.3在表达式中直接定义函数 

 语法格式 

var 函数名 = function (参数1，参数2，…){函数体};

注意： 在表达式中定义函数的方法只能在JS1.2版本或以上版本中使用 函数名（） 函数名/变量名 

 eg

var rightKey=function(){
    if(event.button==2){
       alert("禁止使用鼠标右键");
    }  
}
window.onmousedown = rightKey;

2调用函数的方法

1.直接调用 

myFunction();或window.myFunction()


函数名. ();

 2事件处理中调用

<div onclick = ''click()" ><div>

3.将函数的返回值赋给变量

 var b = 函数名()

 

3函数的参数

形參：定义函数时，函数名后面()中的参数；JavaScript中的函数允许给行参赋初始值 实参：调用函数时，传递的参数 参数的匹配： 默认情况下，形參和实参是一一对应的 但是当传递的参数个数与函数定义好的参数个数可以不匹配当不匹配时 

• 如果传递的参数个数小于函数定义的参数个数，JavaScript会自动将多余的参数值设为undefined；

• 如果传递的参数个数大于函数定义的参数个数，那么多余传递的参数将会被忽略掉

 3.1获取所有实参【arguments】

function Test(a,b){
    alert(typeof(arguments)); // 获得类型
    alert(arguments[1]);      // 获取下标为1的参数值
    alert(arguments.length);  // 获取参数的长度
    alert(arguments.callee);  // 获取函数的所有内容
}
Test("zhang","li");

默认参数 

JavaScript中的函数允许给参数赋初始值

比如：我们在创建封装一个创建table表格的函数，如果任何参数不传，我们也想创建一个四行五列，并且背景颜色，各行换色的表格，这时候我们就可以使用表格来创建

默认参数应该放在函数参数列表的末尾

 创建表格案例（创建一个带默认参数的函数）

function tab(row,color='pink',color2='gray'){
  document.write('<table border="1" width="500">');
  for(var index = 0; index < row; index++){
    if(index%2 == 1){
      document.write('<tr bgcolor="'+color+'"><td>'+index +'</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>');
    }else{
      document.write('<tr bgcolor="'+color2+'"><td>'+index +'</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>');
    }
  }
  document.write('</table>');
}
tab(10,'gray','orange');

 3.2函数的返回值

• return语句并不是必须的

• 默认情况下，函数的返回值为undefined

• 在使用 return 语句时，函数会停止执行，并返回指定的值，return后面的代码不再执行

• 什么情况下添加return？如果函数中的变量要在函数外进行调用；

 function sum (x,y){

     

     return x + y;

    }

   var h = sum (20 ,30);

   console.log(h);

 

3.3变量的作用域

全局变量： 在函数外声明的的变量为全局，在整个JS文档中生效

局部变量： 在函数内用var声明的变量为局部变量，只能在函数内部使用。

 3.4全局变局部

 全局变量可以在局部的任意位置使用

3.5局部变全局 

局部变量不能在全局使用，如果想要在全局使用，可以去除前边的var或者将该值使用return返回到全局 

3.5什么是作用域链

• 只要在js中创建变量，就会存在作用域【全局作用域】

• 写在函数内部的被称为局部作用域

• 如果函数中还有函数，那么在这个作用域中就又可以诞生一个新的作用域

• 在函数中如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这样一个查找过程形成的链条就叫做作用域链。

默认情况下：内部环境可以通过作用域链访问所有外部环境，但外部环境不能访问内部环境的任何变量和函数

eg：

var n = 10;
function outer(){
  function inner(){
    function center(){
      console.log(n);
    }
    center();
  }
  inner();
  var n = 15;
}
outer(); //=> undefined

 案例：案例分析

var a = 1
function fn1(){
  function fn2(){
    console.log(a)
  }
  function fn3(){
    var a = 4
    fn2()
  }
  var a = 2
  return fn3
}
var fn = fn1()
fn() //输出2

函数的执行，形成一个私有作用域，形参和当前私有作用域中声明的变量都是私有变量，保存在内部的一个变量对象中，其下一个外部环境可能是函数，也就包含了函数的内部变量对象，直到全局作用域。

预解析

预解析，又称之为变量提升，在js代码真正执行之前，进行提前加载，把所有带有var和function的关键字进行预解析

• JavaScipt代码是由浏览器中的JavaScript解析器来执行的

• JavaScript解析器在运行JavaScript代码的时候分为两步：预解析和代码执行

• 预解析分为变量预解析（变量提升）和函数预解析（函数提升）

• 代码执行是按代码的书写顺序从上到下执行的

1. 对于带有var和function关键字在预解释的时候操作

     var :只声明不定义

     function:既声明又定义 注：私有作用域下也要进行预解析

console.log(a); // 注意：预解析的问题，如果同时有变量和函数的预解析，那么函数的优先级高
var a = 'hello';
function a(){
  console.log(123);
}
// 优先执行栈内存中的内容
// function a(){
//     console.log(123);
// }
// var a = 'hello';
// console.log(a); // hello

 案例

   <script>

// 案例1
            var num = 10;
            fun();
            function fun(){
            console.log(num);//显示结果：unfiend
            var num = 20;
            }
            案例二
              var num = 10;
              function fun() {
                console.log(num);//显示结果：unfiend
                var num = 20;
                console.log(num);//显示结果：20
            }
             fun();

            案例三
            var a = 18;
            f1();
            function f1() {
                var b = 9;
                console.log(a);//显示结果： unfiend
                console.log(b);//显示结果：9
                var a = 13;
            }

            
            案例四
            console.log(a,b,c);
            var a = b = c = 5;
            // 案例四
            f1();
            console.log(c);
            console.log(b);
            console.log(a);
             function f1() {
                var a = b = c = 9;
                 console.log(a);//9
                 console.log(b);//9
                 console.log(c);//9
            }


            // 案例五
            fn();//报错 只预解析“=”左边的，右边的是指针，不参与预解析
            var fn=function(){
                console.log(11);
            }
             

            案例六
            function fn(){
                 console.log(a);//显示结果：报错
                 a=100;
            }
            fn();
             console.log(a);//显示结果：100


            //注意：js中，如果在不进行任何特殊处理的情况下，上面的代码报错，下面的代码不再执行
             案例七
            console.log(show);//函数体
               function show(){
                console.log(123);//
            }
            var show = 10; 

            案例八
            function show(){
            console.log(123);//空
            }
            var show = 10;
            // console.log(show);//10
     </script>

3.6自执行函数的效果

自执行函数可以用来保存变量的作用域，防止污染全局变量 以一个经典的面试题为例；

 

<ul>
  <li>这是第1个li</li>
  <li>这是第2个li</li>
  <li>这是第3个li</li>
  <li>这是第4个li</li>
  <li>这是第5个li</li>
  <li>这是第6个li</li>
</ul>


var lis = document.querySelectorAll('li');
for(var i = 0;i<lis.length;i++){
  lis[i].onclick = function (){
    console.log(i)
  }
}
// 无论哪个li被点击，打印的永远都是相同的值，因为在所有的点击事件中，访问的都是全局的 i,当事件触发时，i的值已经变成是lis.length了。

 在es6语法出现之后，我们使用 let 关键字创建的块级作用域可以解决这种问题，在 let 出现以前，通常是使用匿名函数+闭包的方式创建函数作用域来保存每一步循环里 i 的值；

var lis = document.querySelectorAll('li');
for(var i = 0;i<lis.length;i++){
  (function(i){
    lis[i].onclick = function (){
      console.log(i)
    }
  })(i)
}
// 使用这种方法，每次循环都会创建一个匿名函数，这个匿名函数生成了闭包的效果，新建了一个作用域，
// 这个作用域接收到每次循环的i值保存了下来，即使循环结束，闭包形成的作用域也不会被销毁；
// 事件处理函数中访问的 i 不再是全局变量，而且匿名函数中的局部变量。

 

3.7闭包

什么是闭包：闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。 特点：

1. 闭包就是一个特殊的函数

2. 函数内部可以引用函数外部的参数和变量【能访问到其他作用域中的变量】

3. 参数和变量不会被垃圾回收机制回收【延长变量的生命周期】

案例闭包函数

// 简单的闭包，
var num = 10;
function show(){
    console.log(num);
}
// 局部变量在全局使用
function show(){
  var num = 10;
  return function(){ // 闭包函数
    return num
  };
}
var b = show();
console.log(b());
// 局部变量
function f1(){
  var n=999;
}
// 局部变量在全局使用
function f1(){
  var n=999;
  function f2(){
    alert(n); // 999
  }
  return f2; // 闭包函数
}
f1()()
// 总结：闭包就是能够读取其他函数内部变量的函数。

 

闭包的缺点

比普通函数更占用内存，会导致网页性能变差，在IE下容易造成内存泄露。

什么是内存泄漏

首先，需要了解浏览器自身的内存回收机制。 每个浏览器会有自己的一套回收机制，当分配出去的内存不使用的时候便会回收；内存泄露的根本原因就是你的代码中分配了一些‘顽固的’内存，浏览器无法进行回收，如果这些’顽固的’内存还在一直不停地分配就会导致后面所用内存不足，造成泄露。

闭包造成内存泄漏

因为闭包就是能够访问外部函数变量的一个函数，而函数是必须保存在内存中的对象，所以位于函数执行上下文中的所有变量也需要保存在内存中，这样就不会被回收，如果一旦循环引用或创建闭包，就会占据大量内存，可能会引起内存泄漏 闭包参考文档：

3.8函数案例

1. 封装一个反转数组方法

 

// 方法一
function reverse(arr){
  var newArr = [];
  for(var i=0;i<arr.length;i++){
    newArr[arr.length-i-1] = arr[i];
  }
  return newArr;
}
var arr1 = reverse([1,4,7,9,12,16]);
console.log(arr1);
// 方法二
function reverse(arr){
  var newArr = [];
  for(var i=arr.length-1;i>=0;i--){
    newArr[newArr.length] = arr[i]
  }

  return newArr;
}
var arr1 = reverse([1,4,7,9,12,16]);
console.log(arr1);
// 注意：数组中不管是任意内容，都可以实现反转

判断平闰年

function isRunYear(year){
  // 闰年 true，平年 false
  var flag = false;
  if((year%4==0 && year %100!=0 )||year%400==0){
    flag = true;
  }
  return flag;
}
console.log(isRunYear(2000));
// 思考：输入年份，判断当前年份的2月份有多少天

判断最大值

function max(arr){
  var max = arr[0];
  for(var i=0;i<arr.length;i++){
    if(arr[i] > max){
      max = arr[i]
    }
  }
  return max;
}
console.log(max([1,34,96,23,78]));

4对象

javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。 在 JavaScript 中，对象是拥有属性和方法的数据。

属性是与对象相关的值。

方法是能够在对象上执行的动作。

.关键词（）

举例：汽车就是现实生活中的对象。

汽车的属性：

car.name=Fiat 名称

car.model=500 型号

car.weight=850kg 重量

car.color=white 颜色

汽车的方法：

car.start() 启动

car.drive() 驾驶

car.brake() 刹车

1. Object对象

创建对象

var 对象名称=new Object();

设置对象属性 

对象名称.方法名=function(){ }

 调用对象属性

对象名称.属性名

调用对象方法

对象名称.方法名()

 4.1String对象

创建String对象

var strOb = new String("abcefg");

var strOb = String("abcefg");

var strOb = "abcefg";

方法

1. 子字符串位置 indexOf(string,[index]) //返回子字符串abc在字符串中第一次出现的位置（从0开始计算），不存在返回-1

string ： 查找的字符串的内容，必填项

index：开始查找位置，可有可无

返回值：返回值是查找到的子字符串的位置（下标），默认情况下，返回的是第一个被查找到的内容；如果被查找的内容不存在，则返回-1

1. lastIndexOf(string,[index]) //返回子字符串abc在字符串中最后一次出现的位置

     string ：子字符串，查找的字符串的内容，必填项

     index：开始查找位置，可有可无

     返回值：返回值是查找到的子字符串的位置（下标），默认情况下，返回的是第一个被查找到的内容；如果被查找的内容不存在，则返回-1

   // 案例：查找 afgdtywgbfnjekagrn 字符串中有多少次 g 
   var str = new String('afgdtywgbfnjekagrn');
   var index = str.indexOf('g'); // 2
   // 统计次数
   var num = 0;
   while(index !== -1){ // 查找
       num++;
       index = str.indexOf('g',index + 1);
   }
   console.log('g一共出现了'+num+'次');

   // 案例：查找 afgdtywgbfnjekagrn 字符串中有多少次 g 
   var str = new String('afgdtywgbfnjekagrn');
   var index = str.indexOf('g'); // 2
   // 统计次数
   var num = 0;
   while(index !== -1){ // 查找
       num++;
       index = str.indexOf('g',index + 1);
   }
   console.log('g一共出现了'+num+'次');

   start 表示开始位置，从0开始到正无穷

2. slice(start,end) 获取字符串的某个部分 截取是前包含，后不包含

3. end 表示结束位置，可以为正值，也可以为负值,end没有参数值,默认截取到末尾

// 基础使用
var str = 'hello wolrd';
console.log(str.slice(3,5));
console.log(str.slice(3,-1));
// 案例：使用slice和定时器，实现内容的输出
var str = '我的名字叫张三，我今年十三岁了';
var oBox = document.querySelector('#box');
var i = 0;
function show(){
    if(i<str.length){
        oBox.innerHTML += str.slice(i,++i); // 方法一
        oBox.innerHTML += str.charAt(i++); // 方法二
        setTimeout(show,100);
    }
}
show();

 

1. 截取 substr(起始位置,[截取长度]) //截取不写则代 表截取到字符串未尾

起始位置：可以自定义，从0开始

截取长度：可以是一个数字，还可以不写；如果不写长度，表示截取到字符串的末尾

返回值：截取出来的字符串

1. substring(起始位置,[结束位置]) //不包括截取结果的右边界字符

起始位置：是一个下标值，不能为负值

结束位置：是一个下标值，不能为负值（不包括截取结果的右边界字符）

// 需求：判断图片是什么类型； 照片的格式必须是 png/jpg txt
// 获取文件名的后缀 - 后缀名开始的下标 - lastIndexOf / substr
function getSuffix(){
   var file = document.getElementById('files');
   var pic = file.value;// 图片的路径
   // var pic = '.././images/banner/one.txt';
   var suffix = pic.substr(pic.lastIndexOf('.')+1);
   if(suffix=='png'||suffix=='pneg'||suffix=='jpg'||suffix=='jpeg'){
       alert('图片格式正确');
   }else{
       alert('格式不正确！');
    }
}

<!-- 上传文件，判断文件格式是否正确 -->
<input type="file" id='file'>
<button id='btn'>提交</button>
<script>
    var oBtn = document.querySelector('#btn');
    var oFile = document.querySelector('#file');
    oBtn.onclick = function(){
        var res = getStr(oFile.value);
        if(res){
            alert('上传成功')
        }else{
            alert('图片格式不正确')
        }
    }
</script>

1. 替换 replace('子字符串1','子字符串2') //将字符串中子字符串1替换为子字符串2,

     在替换的时候要注意有些字符是需要加转移字符\，不然会把它认为成其他字符。

     例如“ *”在替换的时候要注意有些字符是需要加转移字符\，不然会把它认为成其他字符。

2. var str='My name is apple. So I like to eat apple very much!';
   // 1. 普通替换
   alert(str.replace('apple','banana'));
   alert(str.replace(/apple/g,'banana'));
   // 2. 将所有的数字替换为 空格
   var str2 = '张三1李四2王五3马六';
   alert(str2.replace(/[0-9]/g,' '));
   // 3. 将所有的小写字母替换为空格
   var str2 = '张三w李四f王五n马六';
   var newStr2 = str2.replace(/[a-zA-Z]/g,' '); 
   console.log(newStr2);
   //  4. 将所有的字母 替换为 空格【不区分大小写】
   var str2 = '张三w李四F王五n马六';
   // var newStr2 = str2.replace(/[a-zA-Z]/g,' '); 
   var newStr2 = str2.replace(/[a-z]/gi,' '); 
   console.log(newStr2);

3. 转换大小写 toLowerCase() toUpperCase()

<!-- 登录验证码效果 -->
<input type="text" id='inp'><span>tR4wC</span><br/>
<button id='btn'>按钮</button>
<script>
    // 模拟验证码的规则
    // 1. 找到按钮
    var oBtn = document.querySelector('#btn');
    // 3. 获取input里面的内容
    var oInp = document.querySelector('#inp');
    // 4. 获取span里面的内容
    var oSpan = document.querySelector('span');
    // 2. 添加点击事件
    oBtn.onclick = function(){
        // 5. 将input里面的内容转为大写
        var inp = oInp.value.toUpperCase();
        // 6. 将span里面的内容转为大写
        var yanzheng = oSpan.innerText.toUpperCase();
        if(inp == yanzheng){
            console.log('验证成功');
        }else{
            console.log('验证失败');
        }
    }
</script>

1. 获取指定位置的字符 charAt(n) 默认为第一个字符 n 表示的是下标，范围是 0-正无穷，不能使用负值

2. 获取指定字符的ASCII编码 str.charCodeAt()

String.fromCharCode() 根据ascii返回对应的字符

var str1 = 'helloworld';
var getStr1 = str1.charCodeAt(2);
console.log(getStr1);
var num = 97;
console.log(String.fromCharCode(num)) // a

 

1. 将字符串分割为数组 split(分割符,[返回数组的最大长度])

分隔符：是一个字符串类型 或者是 正则表达式

返回值：数组

// 基础案例
var str = 'I am student my name is jack'; 
console.log(str.split()); // 将整个字符串分割为一个整体
console.log(str.split(' ')); // 按照空格进行分割
console.log(str.split('')); // 将字符串中的每个字符都进行分割
var str1 = '张三*20211203*10';
console.log(str1.split('*')); // 按照*进行分割
var str1 = "jack1Rose2Box3Tom4Jerry";
console.log(str1.split(/[0-9]/)); // 按照数字进行分割
var str1 = "张三t里斯r王五p马六";
console.log(str1.split(/[a-z]/)); // 按照字母进行分割

1. 面试题：编写一个函数，按下面的输入内容和输出接结果编写

function strChange(title){ // 此次编写代码 } var resultStr = strChange("Hello*Books*world*hello"); console.log(resultStr ) // 返回 “hello-books-world-world”

1. str="one two thr for fiv six"

将字符串中所有的f换成F，并将字符串转成数组

1. 扩展：创建一个按钮，点击上传图片，判断上传的文件是否是一张图片

2. 将一大串数字转为xxx,xxx,xxx这种有间隔的方法【难】

function numberFormate(num) { // 数字格式化为x,xxx,xxx,xxx
    // 1. 将num专为数字类型
    num = parseFloat(num);
    // 2. 判断是否是一个数字
    if (!Number.isNaN(num)) {
        // 3. 将数字按照.进行分割（主要是针对浮点数）
        let str = Math.abs(num).toString().split('.');
        // 4. 整数部分按照3个一组，看可以分为几组
        const a = Math.ceil(str[0].length / 3);
        // 5. 不够3个一组的，自动补充0
        str[0] = str[0].padStart(a * 3, '0');
        const numArr = [];
        // 6. 将数字按照3个一组进行截取
        for (let i = 0; i < a; i++) {
            numArr.push(str[0].substring(i * 3, (i + 1) * 3));
        }
        // console.log(numArr);
        // 7. 将数组中的第一个值中前面补充的0去除
        numArr[0] = parseInt(numArr[0]);
        // 8. 将数组中的数字按照逗号进行拼接，并且拼接上小数点后面的值
        const formateStr = numArr.join(',') + (str[1] ? '.' + str[1] : '');
        // 9. 判断初始值是正值还是负值，需不需要添加-
        return num < 0 ? "-" + formateStr : formateStr;
    } else {
        throw new TypeError("传入的参数必须是数字");
    }
}
console.log(numberFormate(1123456789.2234)); // 结果为1,123,456,789.2234

 

 Date对4.2

创建Date对象

var dateObj=new Date();

方法

1. 将日期转为字符串

toLocaleString()
 toLocaleDateString()
 toLocaleTimeString()

toLocaleString特殊用法：可以将一串数字转为xxx,xxx,xxx这种有间隔的方法

console.log((123264849.12).toLocaleString('en-US')); // 123,264,849.12

1. 获取年、月、日、小时、分、秒

• 1）getYear() //两位的年(2000年前)或三位的年[1900] 获取两位数的年，从1900年开始计算，现在这个方法基本上已经没弃用

console.log(d.getYear());

getFullYear() //四位的年 获取完整的四位数的年，使用的比较多 

console.log(d.getFullYear());

• 3）getMonth() //月份+1 获取月份，返回值为0-11，表示1月到12月，所以获取到月份之后需要+1

• cosole.log(d.getMonth()+1); // 当前月+1

getDate() //日 获取天，返回值为今天是几号 

• 获取每月有多少天 var max = new Date(2023,10,0).getDate()

• console.log(d.getMonth()+1); // 当前月+1

 getHours() //小时

console.log(d.getHours()); // 当前月+1

 

getMinutes() //分钟

console.log(d.getMinutes()); // 当前分钟

 getSeconds() //秒

console.log(d.getMinutes()); // 当前秒钟

getTime() //1970 年 1 月 1 日至今的毫秒数 时间戳专门用来计算时间的差值，或者倒计时等功能 

// 时间跳动案例
function getT(){
        // 获取时间
        var d = new Date();
        var year = d.getFullYear();
        var month = d.getMonth()+1;
        var day = d.getDate();
        var h = d.getHours();
        var m = d.getMinutes();
        var s = d.getSeconds();
        var ms = d.getMilliseconds();
        var oTime = document.getElementById('times');
        oTime.innerHTML = year+'-'+month+'-'+day+' '+h+':'+m+':'+s+' '+ms;
}
function stop(){
        // 清除某个定时器  clearInterval(定时器的名称);
        clearInterval(myTime);
}

1. 怎么计算时间差 使用时间戳【UNIX时间戳，timestamp】

计算时间差

2021-9-5 10:30:20 -> 1630809020000

2020-8-9 12:30:45 -> 1596947445000

差多少年，天，小时，分钟，秒钟 时间戳

参照时间： 1970/1/1 0:0:0(格林威治时间) 1970/1/1 8:0:0（北京时间）

时间戳：d.getTime(); 单位是毫秒数

计算公式

d = parseInt(总秒数/60/60/24) // 天数

h = parseInt(总秒数/60/60%24) // 小时

m = parseInt(总秒数/60%60) // 分钟

s = parseInt(总秒数%60) // 秒

    var aTime = new Date('2021-9-5 10:30:20'); // 指定的某个时间
    var bTime = new Date('2021-8-5 8:20:10');  //
    var cha = aTime.getTime() - bTime.getTime();
    if(cha<=0){
        console.log('时间输入有误！');
    }else{
        var miao = cha / 1000; // 秒的单位
        var s = miao % 60; // 秒
        var fen = parseInt(miao / 60); // 分钟的单位
        var m = fen%60;// 分钟
        var hour = parseInt(fen / 60); // 小时的单位
        var h = hour % 24; // 小时
        var day = parseInt(hour / 24); // 天
        var d = day % 365;
        var y = parseInt(day/365); // 年
        console.log('两个时间相差：'+y+'年，'+d+'天，'+h+'小时，'+m+'分钟，'+s+'秒钟');
    }

 案例商品抢购呢

<!DOCTYPE HTML>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>商品抢购</title>
	<style>
		body,
		ul,
		ol,
		p,
		h3,
		input {
			padding: 0;
			margin: 0;
			font-size: 12px;
		}

		li {
			list-style: none;
		}

		b,
		em {
			font-style: normal;
		}

		img {
			border: none;
		}

		.box {
			padding: 10px;
			width: 648px;
			margin: 30px auto;
			border: 1px solid #ccc;
		}

		.h3s {
			height: 28px;
			line-height: 28px;
			border-bottom: 2px solid #9e9e9e;
			color: #6e6e6e;
			font-size: 14px;
		}

		.h3s span {
			padding-left: 20px;
			font-size: 14px;
			font-weight: normal;
		}

		.con {
			width: 648px;
			height: 280px;
			overflow: hidden;
			position: relative;
		}

		.none {
			width: 325px;
			height: 280px;
			position: absolute;
			left: 0;
			top: 0;
			background: url(img/none.jpg) 0 0 no-repeat;
			display: none;
			z-index: 10;
		}

		.box ul {
			height: 280px;
		}

		.box ul li {
			width: 162px;
			height: 280px;
			float: left;
			position: relative;
		}

		.goods {
			width: 151px;
			height: 264px;
			border-right: 2px solid #f2f2f2;
			padding: 5px 0 10px 9px;
			position: absolute;
			left: 0;
			top: 0;
		}

		.dinput {
			width: 151px;
			height: 21px;
			margin-bottom: 15px;
		}

		.txt {
			width: 110px;
			height: 19px;
			line-height: 19px;
			background-color: #dadada;
			border: 1px solid #f2f2f2;
			color: #323232;
			float: left;
		}

		.btn {
			float: left;
			cursor: pointer;
		}

		.remtime {
			width: 143px;
			padding-left: 8px;
			height: 16px;
			line-height: 16px;
			overflow: hidden;
			margin-bottom: 14px;
			color: #9e9e9e;
			display: block;
		}

		.dimg {
			width: 120px;
			height: 117px;
			padding: 18px 10px 14px 10px;
			position: relative;
		}

		.dimg b {
			position: absolute;
			width: 48px;
			height: 36px;
			padding-top: 12px;
			right: 0;
			top: 0;
			background: url(img/b.png) 0 0 no-repeat;
			text-align: center;
			color: #fff;
		}

		.dimg b span {
			font-size: 20px;
			display: block;
			height: 20px;
		}

		.dps {
			width: 145px;
			height: 32px;
			line-height: 16px;
			color: #6e6e6e;
			overflow: hidden;
		}

		.price {
			width: 145px;
			height: 16px;
			line-height: 16px;
			color: #c0c0c0;
		}

		.price em {
			font-style: normal;
			color: #b9003d;
		}

		.detail {
			width: 648px;
			height: 36px;
			margin-bottom: 3px;
			background-color: #e6e6e6;
		}

		.detail p,
		.detail span {
			float: left;
			width: 180px;
			text-align: center;
			overflow: hidden;
			color: #323232;
			font-weight: bold;
			line-height: 36px;
		}

		.box ol {
			width: 648px;
		}

		.box ol li {
			width: 603px;
			height: 62px;
			background-color: #e6e6e6;
			padding: 10px 45px 10px 0;
			margin-bottom: 3px;
		}

		.box ol li p,
		.box ol li span {
			float: left;
			width: 170px;
			text-align: center;
			overflow: hidden;
			color: #323232;
			height: 62px;
			line-height: 62px;
			padding: 0 5px;
		}

		.box ol li span {
			font-weight: bold;
		}

		.box ol li div {
			width: 77px;
			height: 60px;
			background-color: #fff;
			border: 1px solid #626262;
			float: right;
		}

		.box ol li div img {
			display: block;
			width: 77px;
			height: 60px;
		}

		.result {
			height: 44px;
			line-height: 44px;
			padding-left: 10px;
			color: #000;
			font-size: 14px;
			font-weight: bold;
			position: relative;
		}

		.result strong {
			color: #b9003d;
		}

		.result input {
			position: absolute;
			right: 10px;
			top: 10px;
		}
	</style>
</head>

<body>
	<div class="box" id="box">
		<h3 class="h3s">限购时间<span>(输入格式为：mar 12,2020 10:30:00)</span></h3>
		<div class="con">
			<div class="none" id="none"></div>
			<ul>

				<li>
					<div class="goods">
						<div class="dinput">
							<input type="text" class="txt" value="" />
							<input type="button" class="btn" value="确定" />
						</div>
						<span class="remtime">剩余00天00小时</span>
						<div class="dimg"> <img src="./imgs/txd.jpg" width="120" height="117" alt="" />
							<b><span>8.8</span>折</b> </div>
						<p class="dps">飞利浦（Philips）RQ370 锐锋系列电动剃须刀</p>
						<p class="price">抢购价：<em>￥</em><em>455.00</em></p>
					</div>
				</li>

				<li>
					<div class="goods">
						<div class="dinput">
							<input type="text" class="txt" value="" />
							<input type="button" class="btn" value="确定" />
						</div>
						<span class="remtime">剩余00天00小时</span>
						<div class="dimg"> <img src="./imgs/dn.jpg" width="120" height="117" alt="" />
							<b><span>8.8</span>折</b> </div>
						<p class="dps">索尼（SONY） SVF15A18SCB 15.5英寸触控笔记本 </p>
						<p class="price">抢购价：<em>￥</em><em>5599.00</em></p>
					</div>
				</li>
				<li>
					<div class="goods">
						<div class="dinput">
							<input type="text" class="txt" value="" />
							<input type="button" class="btn" value="确定" />
						</div>
						<span class="remtime">剩余00天00小时</span>
						<div class="dimg"> <img src="./imgs/sj.jpg" width="120" height="117" alt="" />
							<b><span>8.8</span>折</b> </div>
						<p class="dps">联想VIBE Z K910（铂雅银） WCDMA/GSM　双卡双待双通</p>
						<p class="price">抢购价：<em>￥</em><em>2299.00</em></p>
					</div>
				</li>
				<li>
					<div class="goods">
						<div class="dinput">
							<input type="text" class="txt" value="" />
							<input type="button" class="btn" value="确定" />
						</div>
						<span class="remtime">剩余00天00小时</span>
						<div class="dimg"> <img src="./imgs/watch.jpg" width="120" height="117" alt="" />
							<b><span>8.8</span>折</b> </div>
						<p class="dps">BURBERRY/巴宝莉 时尚英伦格纹优雅石英中性</p>
						<p class="price">抢购价：<em>￥</em><em>899.00</em></p>
					</div>
				</li>

			</ul>
		</div>
		<div class="detail">
			<p>商品名称</p>
			<span>价钱</span>
		</div>
		<ol>
			<!-- <li><p>BURBERRY/巴宝莉 时尚英伦格纹优雅石英中性</p><span>899.00</span><div><img src="img/watch.jpg" width="77" height="60" alt="" /></div></li> -->
		</ol>
		<div class="result" id="result">
			总价：<strong></strong>元
		</div>
	</div>
</body>
<script>
	var txts = document.querySelectorAll('.txt');
	var btns = document.querySelectorAll('.btn');
	var remtimes = document.querySelectorAll('.remtime')
	  for(let i = 0 ;i<4;i++){
		btns[i].onclick = function () {
	   setInterval (function(){
		var newDate= new Date(txts[i].value);
		var cha = newDate - new Date();
		if(cha <=0){
			remtime.innerHTML = "活动结束";
		}else{
			var allS = parseInt(cha / 1000);
			var s = allS % 60;//现在秒
			var allM = parseInt(allS / 60);
			var m = allM % 60//现在分钟
			var allH = parseInt (allM / 60);
			var h = allH % 24 //现在小时
			var day = parseInt(allH / 24);//现在天
			remtimes[i].innerHTML = `剩余${day}天${h}小时${m}分钟${s}秒`;
		}
	   },1000);
	  }
           
	}
</script>

</html>

生日

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
  <style>
    input{
        width: 300px;
        color: blueviolet;
        border: 1px solid blue;
        outline: blue;
    }
    .jk{
        width: 500px;
        margin: 0 auto;
        text-align: center;
    }
  </style>
<body>
    <div class="jk">
    <div class="one"></div>
    <div class="two"></div>
    <input type="text" name="" class="nextYear">
    <div>我已经生活了.....</div>
    <input type="text" name="" class="cc">
    <div>您已在本站停留了</div>
    <input type="text" name="" class="ee">
</div>
</body>
<script>
    var year = prompt("输入出生年份")
    var month = prompt("输入出生月份")
    var day = prompt("输入出生天")

    // 计算生日
    function age() {
        var one = document.querySelector(".one");
        one.innerHTML = `我的生日是${year}-${month}-${day}.(${year}/${month}/${day})`//生日结果

    }

    var data = new Date();
    var nowYear = data.getFullYear();//年
    var nowMonth = data.getMonth() + 1;//月
    var nowDate = data.getDate();//日

    // 年龄
    function countAge() {
        var two = document.querySelector(".two");
        var nowAge = nowYear - year
        if (nowMonth < month || (nowMonth == month && nowDate < day)) {
            nowAge--;
        }
        var naxtAge = nowAge + 1;
        two.innerHTML = `我今年${nowAge}岁了,我即将${nowAge + 1}`//生日结果
    }



    // 还有几天 几时 几分 几秒 过生日
    function birthday() {
        setInterval(function () {
            if (nowMonth < month || (nowMonth == month && nowDate < day)) {
                var inp = document.querySelector('.nextYear')
                var NowBirthday = new Date(nowYear + '-' + month + '-' + day)
                //  得到时间戳
                var cha = NowBirthday - +new Date()//ms

                var allS = parseInt(cha / 1000);
                var s = allS % 60;

                var allM = parseInt(allS / 60);
                var m = allM % 60;

                var allH = parseInt(allM / 60);
                var h = allH % 24;
                var t = parseInt(allH / 24)
                var str = `${t}天, ${h}小时, ${m}分钟, ${s}秒钟`
                inp.value = str

            } else if (nowMonth > month || (nowMonth == month && nowDate >= day)) {
                var mingnianbir = new Date(nowYear + 1 + "-" + month + '-' + day);
                console.log(mingnianbir.toLocaleString());
                var cha = mingnianbir - +new Date(); // ms
            }
        }, 100)


    }


    //活了多少天
    function live() {
        setInterval(function () {
            var hh = document.querySelector(".cc");
            var cha = +new Date() - +new Date(`${year}-${month}-${day}`);//ms

            var allS = parseInt(cha / 1000);
            var s = allS % 60;

            var allM = parseInt(allS / 60);
            var m = allM % 60;


            var allH = parseInt(allM / 60);
            var h = allH % 24;
            var t = parseInt(allH / 24)
            var str = `${t}天, ${h}小时, ${m}分钟, ${s}秒钟`
            hh.value = str
        }, 100)
    }


    // 停留多长时间
    var sum = 0;
    function stop() {
        setInterval(function () {
            var jj = document.querySelector(".ee");
            sum++;
            var s = sum % 60;
            var allM = parseInt(sum / 60);
            var m = allM % 60;
            var allH = parseInt(allM / 60);
            var h = allH % 24;
            jj.value = (`${h}时${m}分${s}秒`);
        }, 1000);

    }
    stop();
    live();
    birthday();
    countAge();
    age();




</script>

</html>

 5math

方法

Math.round(number) //四舍五入整数

Math.ceil(number) //向上取整

Math.floor(number) //向下取整

Math.random() //随机返回0.0~1.0之间的数

Math.max(x,y) //求最大值

Math.min(x,y) //求最小值 Math.pow(x,y) //求xy

 随机数

Math.floor(Math.random()*(max-min+1))+min

6Bom对象 

BOM（Browser Object Model）浏览器对象模型 BOM 使 JavaScript 有能力与浏览器“对话” BOM尚无正式标准,但是浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性（window）

window对象

• 表示浏览器窗口，所有浏览器都支持 window 对象

• 所有 JavaScript 全局的对象、函数以及变量均自动成为 window 对象的成员[属性和方法]

• 全局变量是 window 对象的属性

• 全局函数是 window 对象的方法

• window对象是BOM模型中的顶层对象，因此所有BOM模型中的对象都是该对象的子对象

• HTML DOM 的 document 也是 window 对象的属性之一

• 子对象	作用
  document	文档对象用于操作页面元素
  location	地址对象用于操作URL地址
  navigator	浏览器对象用于获取浏览器版本信息
  history	历史对象用于操作浏览器历史

属性

属性名	说明
closed	返回一个布尔值，用于判断窗口是否已经关闭。

方法

窗口控制

方法名	说明
open([url],[_blank],[width	height
close()	关闭当前页面
moveTo(x,y)	移动窗口到指定坐标
moveBy(x,y)	相对当前位置移动
resizeTo(x,y)	窗口大小调整到指定宽高
resizeBy(+w,+h)(可以是正、负数值)	窗口大小增减宽高

 

<input type="button" value="打开窗口" name="" id="" onclick="openWin()">
<input type="button" value="关闭窗口" name="" id="" onclick="closeWin()">
<input type="button" value="判断窗口" name="" id="" onclick="panduanWin()">
<input type="button" value="移动窗口" name="" id="" onclick="moveWin()">
<input type="button" value="调整窗口大小" name="" id="" onclick="resizeWin()">
<script>
  function openWin(){
        // myWindow = window.open('http://www.baidu.com','',"width=500,height=500,top=100,left=100");
        // window.open('','',"width=200,height=200");
        // window.open('','',"width=500,height=500,top=100,left=100");
        myWindow = window.open('','',"width=500,height=500,top=200,left=200");
        myWindow.document.write('hello world');
  }
    function closeWin(){
        // 注意: 接收一个打开的窗口的名字
        myWindow.close();

    }
    function panduanWin(){
        // 能够判断窗口的状态是关闭的还是打开的
        // false=没有关闭  true=关闭
        console.log(myWindow.closed);
    }
    function moveWin(){
        // moveTo(x,y) x,y 只能为正值
        // moveBy(100,-100) 当前坐标的基础 + 100,-100
        myWindow.moveBy(-100,100);
    }
    function resizeWin(){
        // resizeTo(x,y) x,y 只能为正值
        // resizeBy(100,-100) 当前坐标的基础 + 100,-100
        // myWindow.resizeTo(100,100);
        myWindow.resizeBy(-100,-100);
    }
</script>

方法名	说明
alert("信息内容")	弹出一个警告框
confirm("信息内容")	弹出一个确认对话框

 

• 如果用户点击确定按钮，则 confirm() 返回 true。如果点击取消按钮，则 confirm() 返回 false。

• 在调用 confirm() 时，将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。

方法名	说明
setInterval("javascript语句",毫秒)	周期性执行计时器（执行多次）
clearInterval(计时器)	取消计时器
setTimeout("javascript语句",毫秒)	定时执行计时器(只执行一次)
clearTimeout(计时器)	取消计时器

 

// 只执行一下
setTimeout(function(){
    alert('欢迎光临');
},1000);
// 周期性定时器
setInterval(function(){
    alert('hello world');
}, 1000);

任务计划

 

location对象

location 对象用于获得当前页面的地址 (URL)，或把浏览器重定向到新的页面

<a id='a1' href="http://www.baidu.com">百度</a>
<script>
  var a1= document.getElementById('a1');
    a1.onclick = function(){
        // 重定向到淘宝
        window.location = "http://www.taobao.com";
        // 阻止默认事件的发生
        return false;
    }  
</script>

 

属性

属性名	说明
pathname	返回当前页面的路径和文件名。
href	返回当前页面的 URL
hostname	返回域名
port	返回端口
protocol	返回协议
search	返回传值部分

修改href的值 

location.href="https://www.baidu.com/"

 

console.log(window.location.pathname);  // 返回文件名和路径地址
// console.log(location.pathname); // 可以省略window
console.log(location.href);  // 返回当前页面的url路径
console.log(location.hostname); // 返回域名 127.0.0.1
console.log(location.port); // 返回端口号 5500
console.log(location.protocol); // 返回协议 http
console.log(location.search); // 返回参数值

方法

方法名	说明
reload([true])	刷新
replace("url")	跳转到新页面

多种跳转方式

location.replace("https://www.qtummatrix.com/") // 替换当前路径
window.location  ='' // 跳转到对应的页面
window.location.href = '' // 跳转到对应的页面
window.open('url')

history对象

history对象是JavaScript中的一种默认对象，该对象可以用来存储客户端浏览器窗口最近浏览过的历史网址。通过History对象的方法，可以完成类似于浏览器窗口中的前进、后退等按钮的功能

属性名	说明
length	浏览器窗口的历史列表中的网页个数

方法

back()表示返回到上一页面，效果相当于go(-1);

forward()表示返回到下一页面，效果相当于go(1);

go()用于指定页的跳转，比如go(-2)表示返回到浏览过的前两个页面

思考： history.go(0)是什么效果

navigator对象

navigator对象，也称为浏览器对象，该对象包含了浏览器的整体信息，如浏览器名称、版本号等

IE11 - userAgent

低版本IE7 - userAgent

Chrome - userAgent

Safari - userAgent

火狐 - userAgent

appVersion: "5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome

userAgent参数：

• Mozilla：是Netscape浏览器的内核 Mozilla最开始是网景公司的，在userAgent看到她表示可以支持html标准框架；因为IE浏览器也是支持html标准框架的，所以最开始为了拿到含有标准框架的页面，也把userAgent设置成了Mozilla，

• windows NT：是微软发布的桌面端操作系统，一般指window电脑

• Trident：IE浏览器的内核，IE、傲游、世界之窗浏览器、腾讯TT等都使用这个内核

• MSIE：全称为Microsoft Internet Explorer，是微软公司的网页浏览器

• compatible：兼容版本

• Macintosh：Mac的全拼，一般指苹果公司的计算机

• AppleWebKit：是苹果公司开发的浏览器核心；但后来谷歌公司和它合作，你下载个谷歌浏览器看看里面也是用了AppleWebKit核心

• KHTML：

• Gecko：是一个排版引擎，这个排版引擎最开始也是网景公司开发的

• webkit：这个内核是safari的，在2005年苹果进行了开源

注意：chrome浏览器使用的是webkit的一个分支，命名为chromium，他在自己的浏览器中加入了chrome和safae两个名字；后来有了新的内核Blink

 案例

if(navigator.userAgent.indexOf("MSIE") > -1){
    console.log("低版本IE浏览器");
}else{
    console.log("普通浏览器");
}

案例：判断是否是手机端，是否要跳转手机端页面

if(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)){
    window.location.href = ''; // 手机端 
}else{
    window.location.href = ''; // 电脑
}

screen对象

1. screen对象是一个由JavaScript自动创建的对象，该对象的作用主要是描述客户端的显示器的信息，例如屏幕的分辨率、可用颜色数等。

2. screen对象是一个全局对象，该对象中存放的都是静态属性，这些属性值是只读的

今天作业

1. 创建一个表单，对表单中的用户名/密码/电话号码进行验证 如果用户名长度在5-10位之间，并且以字母开头 密码全都是数字 电话号码都是数字并且长度为11位，并且第一位是1，那么就提交到msg.php 页面，否则就弹窗输出错误提示 页面加载完毕，在页面弹出登录窗口，点击 X 关闭窗口(类似于知乎网站没有登陆的时候，访问时遮罩层的效果)

encodeURIComponent() 函数

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。 该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。 其他字符（比如 ：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。

var uri="http://w3cschool.cc/my test.php?name=ståle&car=saab";
document.write(encodeURIComponent(uri));
// 结果：http%3A%2F%2Fw3cschool.cc%2Fmy%20test.php%3Fname%3Dst%C3%A5le%26car%3Dsaab