JS周结 day0817

ok了家人们，今天这周学习了JavaScript，我们一起看一下吧

一.JavaScript概述

1.1 应用场景

JavaScript 用来做前端页面校验

JavaScript 可以实现网页的一些动画效果，例如：轮播图

1.2 JavaScript介绍

JavaScript 是一门跨平台、基于对象的脚本语言，来控制网页行

为的，它能使网页可交互。
JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但

是基础语法类似。
JavaScript（简称：JS）在 1995 年由 Brendan Eich 发明，并于

1997 年成为 ECMA 标准。
ECMAScript 6 (ES6) 是最新的 JavaScript 版本（发布于 2015年)。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 语言不需要编译，直接由各大浏览器解析运行。学习

JavaScript 语言不需要单独安装软件，只需要浏览器即可。

1.3 JavaScript特点

脚本语言

浏览器分成两部分：渲染引擎和 JS 引擎。渲染引擎 : 用来解析 HTML 和

CSS, 俗称内核，例如 chrome 浏览器的 blink 。 JS 引擎：也称为 JS 解释

器。用来读取网页中的 JS 代码，对其处理后运行，例如 chrome 浏览

器的 V8 。浏览器本身并不会执行 JS 代码，而是通过内置 JavaScript 引

擎 ( 解释器 ) 来执行 JS 代码。 JS 引擎执行执行代码时逐行解释每一行源

码 ( 转换为机器语言 ) ，然后由计算机去执行，所以 JavaScript 语言归

为脚本语言，会逐行解释执行。

弱类型

JavaScript 中也有明确的数据类型，但是声明一个变量后它可以接收

任何类型的数据，并且会在程序执行过程中根据上下文自动转换类

型。

1.4 JavaScript的组成

二.JavaScript引入方式

2.1 内部脚本

将 JS代码定义在HTML页面中，JavaScript 代码必须位于标签之间。
在 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>
<body>
    <script>
    //第一种输出方式:弹出警告框
    alert("嘿嘿");
    //第二种输出方式:输出到页面上
    document.write("哈哈");
    //第三种输出方式:输出到浏览器到控制台上
    console.log("蚂蚁雅黑");
    </script>
</body>
</html>

2.2 外部脚本

将 JS 代码定义在外部 JS 文件中，通过标签引入到 HTML 页面中
标签要么用于定义内部脚本，要么用于引入外部js文件，不能混

用
标签不能自闭合

<!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>
    
</body>
<script>
    alert("嘿嘿");
</script>
<script src="js/demo01.js"></script>
</html>

//js文件代码

alert("哈哈");

三.JavaScript基础语法

3.1 JavaScript的书写语法

区分大小写

每行结尾的分号可有可无

注释：单行注释：// 注释内容，多行注释：/* 注释内容 */

3.2 JavaScript的三种输出方式

弹出警告框： window.alert("hello JS ~");

输出数据到页面： document.write("hello JS ~");
输出到浏览器控制台：console.log("hello JS ~");

 <script>
    //第一种输出方式:弹出警告框
    alert("嘿嘿");
    //第二种输出方式:输出到页面上
    document.write("哈哈");
    //第三种输出方式:输出到浏览器到控制台上
    console.log("蚂蚁雅黑");
    </script>

3.3 JavaScript定义变量

JavaScript 中用 var 关键字（variable 的缩写）来声明变量
JavaScript 是一门弱类型语言，变量可以存放不同类型的值
ES 6 新增了 let 关键字来定义变量。它的用法类似于 var，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明
ES6 新增了 const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

  <script>
        //使用var关键字定义变量
        var a = 10;
        console.log(a);
        a = "hello";
        console.log(a);
        //使用let关键字定义变量  Es6   2015
        let b = 20;
        console.log(b);
        b = "world";
        console.log(b);
        //使用const关键字定义常量
        const c = 3.14;
        console.log(c);
        //TypeError: Assignment to constant variable
        c=3.1415926;
        console.log(c);
    </script>

3.4 JavaScript数据类型

原始类型

number：数字（整数、小数、 NaN(Not a Number) ）

string：字符、字符串，单双引皆可

boolean：布尔。 true ， false

null：对象为空

undefined：当声明的变量未初始化时，该变量的默认值是

undefined

引用类型

就是对象。 Object Date 等

使用 typeof 运算符可以获取数据类型

 <script>
        //number：数字（整数、小数、NaN(Not a Number)
        let a = 3.14;
        console.log(a);
        console.log(typeof a);

        //string：字符、字符串，单双引皆可
        let b = "嘻嘻";
        console.log(b);
        console.log(typeof b);

         //boolean：布尔。true，false
         let c = true;
         console.log(c);
         console.log(typeof c);

         //null：对象为空
         let d = null;
         console.log(d);
         console.log(typeof d);

         //undefined：当声明的变量未初始化时，该变量的默认值是undefined
         let f;
         console.log(f);
         console.log(typeof f);

         //Object Date
         let date = new Date();//object
         console.log(date);
         console.log(typeof date);
    </script>

3.5 JavaScript运算符

一元运算符：++，--
算术运算符：+，-，*，/，%
赋值运算符：=，+=，-=…
关系运算符：>，<，>=，<=，!=，==，===…
逻辑运算符：&&，||，!
三元运算符：条件表达式 ? 值1 : 值2；

3.6 JavaScript全局函数

其他类型转换为数字： parseInt( 数值 ) ，将参数数值转换为整

数，从左向右解析，遇到非数值就停止解析。

如果字面值不是数字，则转为 NaN 。

Boolean类型转换为整数： Number() ， true 转为 1 ， false 转为 0

其他类型转为 boolean ： Boolean(value)

number ： 0 和 NaN 转为 false ，其他的数字转为 true

string ：空字符串转为 false ，其他字符串转为 true

null: 转为 false

undefined ：转为 false

在 JavaScript 中有全局函数概念：不归属任何对象，即可以理解

为不需要任何对象就可以调用的函数；注意：所有的全局函数都

可以使用浏览器窗口对象调用，即 window 对象调用，但可以省

略不写。

 <script>
        //其他类型-->转为数字类型
        let a = "100";
        let num01 = parseInt(a);
        console.log(num01);
        
        let b = "200abc";
        let num02 = parseInt(b);
        console.log(num02);

        let c = "abc200"
        let num03 = parseInt(c);
        console.log(num03);

        //boolean类型转为整数(Number());
        let d = true;
        let num04 = Number(d);
        console.log(num04);

        let e = false;
        let num05 = Number(e);
        console.log(num05);

        //其他类型转为boolean类型(Boolean())
        let f = null;
        let num06 = Boolean(f);
        console.log(num06);

        let g = "hello";
        let num07 = Boolean(g);
        console.log(num07);
        
        let h = 0;
        let num08 = Boolean(h);
        console.log(num08);
  
    </script>

3.7 JavaScript流程控制语句

if
switch
for
while
do…while

 <script>
    for(let i=1;i<=9;i++){
        for(let j=1;j<=i;j++){
            document.write(i+'*'+j+'='+i*j+"&nbsp&nbsp&nbsp&nbsp&nbsp")
        }
        document.write("<hr color='green'/>");
        
    }
    </script>

3.8 JavaScript函数(重点)

3.8.1 方式一

定义： JavaScript 函数通过 function 关键词进行定义

形式参数不需要类型。因为 JavaScript 是弱类型语言

返回值也不需要定义类型，可以在函数内部直接使用 return 返回即

function functionName(参数1,参数2..){
 要执行的代码
}
function add(n, m){
 return n + m;
}

调用：函数名称( 实际参数列表 );

let result = add(2,3);

 <script>

        function function01(){
            console.log("我xx你xxxx");
        }

        function function02(m,n){
            console.log("你x你m");
            return m*n;
        }
        
        function01();
        let num01 = function02(2,5);
        console.log(num01);
        
    </script>

3.8.2 方式二

定义格式

var functionName = function (参数列表){
 要执行的代码
}
var add = function (a,b) {
 return a + b;
}

调用： JavaScript 中，函数调用可以传递任意个数参数

let result = add(1,2,3);

 <script>
      
       let add=function(n,m){
           console.log(n+"..."+m);

           return n+m;
      }
       //调用函数
       let sum=add(2,3);
       console.log(sum);

3.8.3 注意事项

匿名函数还可以作为另一个函数的参数传递
在JavaScript中没有函数重载概念，如果存在函数名一样的函数，后出现的函数就会覆盖之前的函数名
在JavaScript中调用无参函数可以传递实参；调用有参函数可以不传递实参.数据没有丢失会放到js的一个内置数组对象中 arguments


  <script>
       //匿名函数还可以作为另一个函数的参数传递
       function fn01(x){
           /*
              x=function(){
                  console.log("匿名函数...");
              }
          */
           console.log("fn01......");
           x();
      }
       
       fn01(function(){
           console.log("匿名函数...");
           
      });
       //在JavaScript中没有函数重载概念，如果存在函数名一
样的函数，
       //后出现的函数就会覆盖之前的函数名
       function fn02(){
           console.log("fn02..."); 
      }
       function fn02(a,b){
           console.log("fn02..."+a+"..."+b); 
      }
       fn02(10,20);//fn02...10...20
       fn02();//fn02...undefined...undefined
       //在JavaScript中调用无参函数可以传递实参；
       //调用有参函数可以不传递实参.数据没有丢失会放到js的一
个
       //内置数组对象中 arguments
       function fn03(){
           console.log("fn03...");
           for(let i=0;i<arguments.length;i++){
               console.log(arguments[i]);
          }

       fn03(2,3);
  </script>

四.JavaScript对象

4.1 数组对象Array

4.1.1 定义格式一

let arr=new Array(元素1,元素2...);
var myCars=new Array("Saab","Volvo","BMW");

4.1.2 定义格式二

var arr=[元素1,元素2...];
var myCars=["Saab","Volvo","BMW"];

4.1.3 常见属性和函数

push() ：向数组的末尾添加一个或更多元素，并返回新的长度。

 <script>

        let arr = new Array(10,3.14,true,"Hello");
        for(let i =0;i<arr.length;i++){
            console.log(arr[i])
        }

        for(let num of arr){
            console.log(num);
        }

        let arr01 = new Array(10);
        console.log(arr01.length);
        
        
        let arr03 = new Array("雷军");

        console.log("---------------");

        let arr04 = new Array(10,3.14,"你好",true);
        // arr04[8]="雷军";
        // for(let i =0;i<arr04.length;i++){
        //     console.log(arr04[i]);
        // }

       let len=arr04.push("wdf","666");
       console.log(len);
       
        
    </script>

4.2 正则对象RegExp

直接量：注意不要加引号

var reg = /^正则表达式符号$/;

创建 RegExp 对象

var reg = new RegExp("^正则表达式符号$");

方法

test(str)：判断指定字符串是否符合规则，返回 true或 false

语法

^：表示开始
$：表示结束
[]:代表某个范围内的单个字符，比如： [0-9] 单个数字字符
.:代表任意单个字符，除了换行和行结束符
\w:代表单词字符：字母、数字、下划线(_)，相当于 [A-Za-z0-9_]
\d:代表数字字符： 相当于 [0-9]
量词：
+:至少一个
*:零个或多个
?:零个或一个
{x}:x个
{m,}:至少m个
{m,n}:至少m个，最多n个
只能输入数字:
 ^[0-9]*$
6到16位的数字:
 ^\d{6,16}$
字母开头6-16位:
 ^[a-zA-Z][a-zA-Z0-9]{5,15}$

  <script>
        //正规表达式：校验字符串是否符合规范
        //1.创建正规表达式
        //let reg=new RegExp("^.{5}$");
        let reg = /^.{5}$/
        //2.校验
        let flag=reg.test("abcde");
        //3,处理
        if(flag){
            console.log("用户名校验成功！");
        }else{
            console.log("用户名校验失败！请重新输入");
        }
    </script>

4.3 String对象

定义

let 变量名 = new String(s); //方式一
let str = new String("hello");
let 变量名 = s; //方式二
let str = "hello" ;
let str = 'hello';

属性

length   字符串的长度

方法

charAt() 返回在指定位置的字符
indexOf() 检索字符串

 <script>
    //创建对象的方式一(了解)
    let str01=new String("hello");
    console.log(str01);
    console.log(str01.toString());
    
    //创建对象的方式二
    let str02="world";
    console.log(str02);
    
    //属性  lenth 获取字符长度
    console.log(str02.length);

    //函数  charAt()  输入索引，返回字符
    let str04="helloworld";
    let s01=str04.charAt(5);
    console.log(s01);
    
    //函数 indexOf() 返回子字符串在该字符串第一次出现的索引
    console.log(str04.indexOf("llo"));
    console.log(str04.indexOf("abc"));
    
    
    </script>

4.4 自定义对象(重要)

格式

let 对象名称 = {
 属性名称1:属性值1,
  属性名称2:属性值2,
  ...
  函数名称:function (形参列表){}
  ...
  };

实例

 <script>
        let person={
            name:"zhangsan",
            age:23,
            eat:function(){
                //console.log(person.name+"..."+person.age+"...");
                console.log(this.name+"..."+this.age);
            }
        };
        //person.eat();

        console.log(person.name);
        console.log(person.age);
        console.log(person.eat());
        
    </script>

五，BOM对象-Windows

5.1 confile方法

 <script>
        //prompt()用户进行输入的对话框，返回用户输入的字符串
        // let b=window.prompt("请输入你的年龄");
        // let age=parseInt(b);
        // console.log(age);
        
        let c=window.confirm("你确定要删除吗?");
        if(c){
            console.log("删除的操作");
        }else{
            console.log("什么都不做");
        }
    </script>

5.2 prompt方法

        //prompt()用户进行输入的对话框，返回用户输入的字符串
       let b=window. Prompt("请输入你的年龄");
       let age=parseInt(b);
       console.log(age);

5.3 setInterval方法

 let desk=window.setInterval(function(){
           console.log("hello");
           window.clearInterval(desk);//用来清除计时器方法
         },3000);//不清除计时器一直执行

5.4 setTimeout方法

 let desk=window.setTimeout(function(){
            console.log("hello");
        },1000);//代码只执行一次