第一章.JavaScript概述和体验

1.什么是JavaScript

  1. 1.概述:JavaScript是一种属于网络的脚本语言(需要嵌套在html网页中使用),用于web开发
  2. 2.作用:常用来为网页添加各式各样的动态功能,为用户提供了更流畅美观的浏览效果

1599554952972.png

2.JS三大组成部分

组成部分 作用
ECMA Script 所有脚本语言规范,构成了js的语法基础
BOM Browser Object Model 浏览器对象模型,用来操作浏览中各个对象
DOM Document Object Model 文档对象模型,用来操作网页中的各个元素(标签)

3.网页中各技术的作用

技术 作用
HTML 创建网页,网页结构
CSS 用于美化网页
JavaScript 用于网页交互,让网页动起来,让网页更加的美观,提高用户的体验

4.JS体验案例

需求:
使用JS在网页上输出5个Hello World

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js体验</title>
<!--    
   注意:
     1.js代码一定要写在script标签当中
     2.js代码可以放在任意位置
-->
</head>
<body>
<script type="text/javascript">
    for(var i = 0;i<5;i++){
        /*
          document是一个对象,代表当前页面,write是document中的函数(方法),
          可以将想输出的结果展示在页面上,而且还可以写标签
         */
        document.write("<h1>涛哥最帅3</h1>");
    }
</script>
</body>
</html>

第二章.JavaScript的两种引入方式

1.script标签的2种引入方式以及说明

1.引入方式一:
   在html中写一个标签:<script type="text/javascript>js代码</script>
2.引入方式二:
   引入外部的js文件:<script type="text/javascript src="js文件的路径">js代码</script>

script标签的说明:
  1.script标签的个数:在同一个网页中可以出现多个script标签
  2.使用标签:js代码必须放在script标签中(script标签是html中的标签)
  3.位置:script标签可以写在html的任意位置
  4.js语句后要加分号:如果一个代码结束,分号建议加上
  5.以后js脚本通常会放在html页面外部,html中想使用,直接导入
    使用script标签中的属性:src

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js的体验</title>

</head>
<body>

</body>
<!--
  js脚本必须要放在html的标签script中
-->
<script type="text/javascript">
    //使用JS在网页上输出5个Hello World
    for (var i = 0;i<5;i++){
        //在文档上写东西,这个网页就是一个文档,文档对象就是document
        //在网页上写内容,而且write中可以写标签
        document.write("<h1>hello world</h1>");
    }
</script>

<script src = "../js/out.js"></script>
</html>

2.JavaScript的注释

1599554990343.png

第三章.JavaScript的三种输出方式

1599555003260.png

1.alert(输出的内容)->弹框式输出->自带阻塞效果->写标签原样输出
2.console.log(输出的内容)->在浏览器控制台上输出->写标签原样输出
3.document.write(输出的内容)->在页面上打印->写标签生效

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js3种输出方式</title>
</head>
<body>
<script type="text/javascript">
    /*
      1.alert(输出的内容)->弹框式输出->自带阻塞效果->写标签原样输出
      2.console.log(输出的内容)->在浏览器控制台上输出->写标签原样输出
      3.document.write(输出的内容)->在页面上打印->写标签生效
    */

    alert("<h1>我是alert</h1>");

    console.log("<h1>我是log</h1>");

    document.write("<h1>我是write</h1>");

</script>
</body>
</html>

第四章.变量的定义

1.定义语法

ES6中有三个定义变量的关键字
   1.var 以前使用比较多的关键字,用于定义变量
   2.let ES6开始才出现的新的定义变量的关键字
   3.const  定义常量的,相当于java中的final关键字

2.定义代码模板

1599555022785.png

3.设置idea支持ES6

1599555035816.png

4.变量的定义

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js定义变量</title>
</head>
<body>
<script type="text/javascript">
    /*
      1.var
      2.let
      3.const->用于定义常量,相当于java中的final
    */

    var i = 100;
    i = 200;
    document.write(i+"<br/>");

    let j = 500;
    j = 1000;
    document.write(j+"<br/>");

    const x = 1;
    //x = 2;
    document.write(x);
</script>
</body>
</html>

小结:
  var
  let:ES6之后支持的
  const:用于定义常量的,不能被二次赋值->相当于final
数据类型 Java中定义变量 JS中定义变量
整数 int i = 5; var i = 5 或者用let
浮点数 float f = 3.14f; 或 double d=3.14; var f = 3.14或者用let
布尔 boolean b = true; var b = true或者用let
字符 char c = ‘a’; var c = ‘a’//js中没有字符类型,只有字符串类型,即使写单引号也是字符串 或者用let
字符串 String str = “abc”; var str = “abc” 或者用let

5.注意事项

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js中定义变量</title>
</head>
<body>
<script type="text/javascript">
    /*
      注意:
       js中定义变量,不用像java那样上来就确定类型
       js中数据的类型是根据后面赋的值来确定的
       js中没有字符型,即使写单引号也是字符串类型
    */
    //整型
    var i = 5;

    //浮点型
    var i1 = 3.5;

    //布尔型
    var i2 = true;

    //字符型
    //var i3 = 'A';

    //字符串型
    var i4 = "abc";

</script>
</body>
</html>

6.var和let的区别

 1.var不受作用域的限制,let受作用域的限制
 2.[重新定义]变量的区别:var可以改变变量的值
 3.const修饰对象,对象不能变,对象中的内容可变

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>var 和 let 区别</title>
</head>
<body>
<script type="text/javascript">

    /*
       1.var不受作用域的限制,let受作用域的限制
       2.[重新定义]变量的区别:var可以改变变量的值
       3.const修饰对象,对象不能变,对象中的内容可变

    */
    {
        var i1 = 100;
    }
    document.write(i1+"<br/>");

    {
        let i2 = 200;
    }
    //document.write(i2+"<br/>");  F12看显示错误

    document.write("<hr size='3' color='orange'/>");

    var i3 = 1000;
    {
        var i3 = 2000;
    }

    document.write(i3+"<br/>");

    let i4 = 10000;
    {
        let i4 = 15000;
    }
    document.write(i4+"<br/>");

    const person = {"name":"涛哥","age":18};
    document.write(person.name+","+person.age+"<br/>");
    //person = {"name":"涛哥","age":20};

    person.age = 200;
    document.write(person.name+","+person.age);
</script>
</body>
</html>

let和var的区别:

 var不受作用域限制,let受
 var定义变量之后,还可以重新定义,赋新的值
 let定义变量之后,不能重新定义赋新的值

 const定义的对象,不能重新再次定义对象,但是对象中的属性值可以改变

第五章.五种数据类型

js中的数据是有类型的,只不过在定义的时候不用像java那样明确数据类型

1.五种数据类型

关键字 说明
number 数值型,包括整数和小数
boolean 布尔类型 true或者false
string 字符串类型:可以使用 ‘’ “” ``
object 对象类型
undefined 未定义的类型

2.typeof操作符

作用：判断一个变量的数据类型->好像是java中的instanceof

写法：

1.typeof 变量名
2.typeof(变量名)->建议使用

案例：数据类型的演示

需求

分别输出整数、浮点数、字符串(单引号和双引号)、布尔、未定义、对象、null的数据类型

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js中的数据类型</title>
</head>
<body>
<script type="text/javascript">

    /*
      js中的五种数据类型
        number:数字类型
        boolean:布尔类型
        string:字符串类型
        object:对象类型
        undefined:未定义类型

       js中判断数据的类型:
         typeof(变量名)


       null和undefined区别
         null是空
         undefined就是没给赋值
    */

    var i1 = 10;
    document.write(typeof (i1)+"<br/>");//number

    var i2 = 10.5;
    document.write(typeof (i2)+"<br/>");//number

    var i3 = true;
    document.write(typeof (i3)+"<br/>");//boolean

    var i4 = "abc";
    document.write(typeof (i4)+"<br/>");//string

    var i5 = 'abc';
    document.write(typeof (i5)+"<br/>");//string

    var i6 = `abc`;
    document.write(typeof (i6)+"<br/>");//string

    var i7 = {"name":"taoge","age":18};
    document.write(typeof (i7)+"<br/>");//object

    var i8 = null;
    document.write(typeof (i8)+"<br/>");//object

    var i9;
    document.write(typeof (i9)+"<br/>");//undefined

</script>
</body>
</html>

小结

null与undefined的区别 说明
null 本质上对象类型,只是这个对象没有值
undefined 不知道什么类型

第六章.在浏览器中调试代码

1.设置断点

注：设置断点以后要重新刷新页面才会在断点停下来

1599555068511.png

2.语法错误

1599555078831.png

第七章.常用的运算符

1.算术运算符(和java语言一样)

算术运算符用于执行两个变量或值的算术运算
1599555088406.png

2.赋值运算符(和Java一样)

赋值运算符用于给JavaScript 变量赋值
1599555098306.png

3.比较运算符

比较运算符用于逻辑语句的判断，从而确定给定的两个值或变量是否相等。

1599555116586.png

数字可以与字符串进行比较，字符串可以与字符串进行比较。字符串与数字进行比较的时候会先把字符串转换成数字然后再进行比较

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>比较运算符</title>
</head>
<body>
<script type="text/javascript">

    /*
      1.js中==只比较内容(值)
        js中===既比较值,还比较类型

      2.js中!=比较的是值
        js中!==既比较值,还比较类型
    */
    let i = 123;//number
    let j = "123";//string
    document.write((i==j)+"<br/>");
    document.write((i===j)+"<br/>");

    document.write("<hr size='3' color='red'/>");

    document.write((i!=j)+"<br/>");//false
    document.write((i!==j)+"<br/>");//true
</script>
</body>
</html>

4.逻辑运算符(跟Java一样)

逻辑运算符用来确定变量或值之间的逻辑关系，支持短路运算
1599555131434.png

js中逻辑运算符不存在单与&、单或|

5.三元运算符(跟java一样)

1599555142303.png

小结

  • 运算符 === 有什么作用？ 
    恒等于,既比较值,还比较类型

第八章.JS流程控制语句

js中的for,while,if,switch和Java一样,不再阐述

第九章.JS内置对象

1.内置函数

1.parseFloat(String s)->将字符串转成小数(number)
2.parseInt(String s)->将字符串转成整数(number)

3.注意:js是模糊匹配,将字符串转成number类型时,如果是数字开头,就只转数字部分

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>全局函数</title>
</head>
<body>
<script>
    /*
       五种类型:
        number
        boolean
        string
        object
        undefined

       parseFloat(String s)->将字符串转成小数(number)
       parseInt(String s)->将字符串转成整数(number)

       注意:js是模糊匹配,将字符串转成number类型时,如果是数字开头,就只转数字部分
    */
    var numberFloat = parseFloat("2.4");
    document.write(numberFloat+1+"<br/>");

    var numberInt = parseInt("2");
    document.write(numberInt+1+"<br/>");

    var numberInt1 = parseInt("2a");
    document.write(numberInt1+1+"<br/>");
</script>
</body>
</html>

弹出确认框:
confirm("确定要删除吗？")返回boolean型结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>确认框弹出</title>
</head>
<body>
<script>
    var result = confirm("老板，你真的不加个钟吗？");
    if(result) {
        console.log("老板点了确定，表示要加钟");
    }else{
        console.log("老板点了确定，表示不加钟");
    }
</script>
</body>
</html>

2.String对象(java中学过,不再赘述)

1.属性:
  length-->获取字符串长度
2.函数:
  charAt(index)  根据索引获取对应字符
  indexOf(x)     查找参数在字符串中第一次出现的索引位置
  substring(startIndex, endIndex)  字符串切割  含头不含尾
  substr(startIndex, count)        字符串切割  startIndex:开始索引    count : 切割多少个字符

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js中的string</title>
</head>
<body>
<script>
    /*
    *   length->获取字符串长度
    *    没有小括号
    * */
    var s1 = "abcdefg";
    document.write(s1.length+"<br/>");

    /*
     截取字符串:substring(开始索引,结束索引)
             含头,不含尾
    */

    var s2 = "abcdefg";
    document.write(s2.substring(0,3)+"<br/>");

    /*
      截取字符串:substr(开始索引,截取多长)
    */
    var s3 = "abcdefg";
    document.write(s3.substr(0,5)+"<br/>");

    /*
      分割字符串:split(分割的规则),返回一个数组
   */
    var s4 = "abc-哈哈哈";
    var arr = s4.split("-");
    document.write(arr+"<br/>");
    for (var i = 0; i < arr.length; i++) {
        document.write(arr[i]+"<br/>");
    }

    /*
      将小写转成大写:toUpperCase()
   */
    var s5 = "abcd";
    document.write(s5.toUpperCase()+"<br/>");

    /*
       去两端空格:trim()
    */
    var s6 = " helloworld ";
    document.write(s6.trim()+"<br/>");

</script>
</body>
</html>

3.Date对象(日期对象)

1.创建:
  var myDate = new Date();
2.函数:
  getFullYear()从 Date 对象以四位数字返回年份。
  getMonth()从 Date 对象返回月份 (0 ~ 11)。
  getDate()从 Date 对象返回一个月中的某一天 (1 ~ 31)。
  getTime()返回 1970 年 1 月 1 日至今的毫秒数。
  toLocaleString()根据本地时间格式，把 Date 对象转换为字符串。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Date对象</title>
</head>
<body>
<script>
    //创建Date对象
    var date = new Date();
    document.write(date.getFullYear()+"<br/>");
    document.write(date.getMonth()+"<br/>");
    document.write(date.getDate()+"<br/>");
    document.write(date.getTime()+"<br/>");
    document.write(date.toLocaleString()+"<br/>");

</script>
</body>
</html>

4.Array数组

4.1.数组的定义

1.四种定义方式:
     1.let 数组名 = new Array()->创建长度为0的空数组
     2.let 数组名 = new Array(长度)->创建指定长度的空数组
     3.let 数组名 = new Array(元素,元素,元素)->创建带有元素的数组
     4.let 数组名 = [元素,元素...]->创建带有元素的数组
2.属性:length-->获取数组长度

3.注意:看一看容器中有什么元素跟获取出来是两码事儿

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js中的数组</title>
</head>
<body>
<script>
    let arr1 = new Array();
    document.write(arr1.length+"<br/>");

    let arr2 = new Array(5);
    document.write(arr2.length+"<br/>");

    let arr3 = new Array(1,2,3,4);
    document.write(arr3+"<br/>");

    let arr4 = [1,2,3,4];
    document.write(arr4+"<br/>");
</script>
</body>
</html>

4.2.数组特点

1.元素类型,因为js是弱类型语言,数组中的每个元素类型是可以不同的
2.js中的数组,长度可变,动态的增加或者减少长度
3.js中的数组是有方法的

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Array的特点</title>
</head>
<body>
<script>
    /*
      1.元素类型,因为js是弱类型语言,数组中的每个元素类型是可以不同的
      2.js中的数组,长度可变,动态的增加或者减少长度
      3.js中的数组是有方法的
     */
     let arr1 = [1,"柳岩",true];
     document.write(arr1+"<br/>");

     arr1[3] = "涛哥";
     document.write(arr1+"<br/>");
</script>
</body>
</html>

4.3.数组的函数

concat(数组)数组拼接
reverse()->数组反转
join(规则):将一个数组通过分隔符拼接成一个字符串,与字符串中的split功能相反
sort()排序
pop():删除数组中最后一个元素,返回的是被删除的元素
push():往数组最后添加一个或者多个元素,返回的是被添加的元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Array的方法</title>
</head>
<body>
<script>
    /*
   concat(数组)数组拼接
   */
   let arr1 = [1,2,3];
   let arr2 = [4,5,6];
   document.write(arr1.concat(arr2)+"<br/>");

    /*
     reverse()->数组反转
    */
    document.write(arr1.reverse()+"<br/>");


    /*
      join(规则):将一个数组通过分隔符拼接成一个字符串,与字符串中的split功能相反
   */
   document.write(arr1.join("-")+"<br/>");

    /*
      sort()排序
        ASCII表
    */
   let arr3 = [3,2,1];
   document.write(arr3.sort()+"<br/>");

    /*
     pop():删除数组中最后一个元素,返回的是被删除的元素
   */
   let arr4 = [1,2,3,4];
   document.write(arr4.pop()+"<br/>");

    /*
      push():往数组最后添加一个或者多个元素,返回的是被添加的元素
     */
    let arr5 = [1,2,3,4];
    var number = arr5.push(5);
    document.write(arr5+"<br/>");


    //遍历
    let arr6 = [1,2,3,4,5,6];
    //普通for  ->fori
    for (var i = 0;i<arr6.length;i++){
        document.write(arr6[i]+"<br/>");
    }

    /*
        增强for
        将Java中的:改成of
     */
    for (var element of arr6){
        document.write(element);
    }


</script>
</body>
</html>

4.4.数组的遍历

1.普通for:
  for(var/let 变量名 = 0;变量名<数组.length;变量名++){}
2.增强for:
  for(var/let 变量名 of 数组名){

  }

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Array的方法</title>
</head>
<body>
<script> 
    //遍历
    let arr6 = [1,2,3,4,5,6];
    //普通for  ->fori
    for (var i = 0;i<arr6.length;i++){
        document.write(arr6[i]+"<br/>");
    }

    /*
        增强for
        将Java中的:改成of
     */
    for (var element of arr6){
        document.write(element);
    }
</script>
</body>
</html>

第十章.JS函数

1.函数介绍

1.什么是函数
  一个代码块,给代码块取个名字,后面可以通过名字来调用它,实现重用的功能,类似于Java中的方法
2.js中有两种函数:
  命名函数:带名字的函数,可以通过名字来多次调用
  匿名函数:不带名字的函数,不可重用,只能使用一次.后面常用于和js事件结合使用

2.函数定义方式1_命名函数

1.格式:
   function 名字(参数){
           return 返回值;
   }

2.注意:
  1.js中的函数不用声明返回值类型
  2.js中函数的参数位置直接写变量名,连var let都不用
  3.js中函数有没有返回值取决于函数内部是否写了return

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>命名函数</title>
</head>
<body>
<script>
    /*
       定义格式
        function 名字(参数){
           return 返回值;
        }

        注意:
          1.js中的函数不用声明返回值类型
          2.js中函数的参数位置直接写变量名,连var let都不用
          3.js中函数有没有返回值取决于函数内部是否写了return

    */
    //无参无返回值
   function method01(){
       alert("我是method01");
   }
   //调用method01
    //method01();


    //有参无返回值
    function method02(a,b){
        alert(a+b);
    }
    //method02("1","2");



    //无参有返回值
    function method03(){
       return "哈哈哈哈";
    }
    /*var number = method03();
   alert(number);*/


    //有参有返回值
    function method04(a,b){
        return a+b;
    }

    var number1 = method04(1,2);
    alert(number1);

</script>
</body>

3.函数定义方式2_匿名函数

1.定义格式
 let/var 变量名 = function(参数){

 }
2.调用:直接使用变量名()

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js匿名函数</title>
</head>
<body>
<script>
    /*
       定义格式
         let/var 变量名 = function(参数){

         }
       调用:直接使用变量名()
     */

    var method01 = function(){
        alert("我是匿名函数");
    }

    //调用
    method01();

</script>
</body>
</html>

4.JS函数没有重载

注意:js中函数没有重载,后写的会把先写的覆盖掉

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js函数重载</title>
</head>
<body>
<script>
    /*
    *   注意:js中函数没有重载,后写的会把先写的覆盖掉
    * */
   function method01(a,b){
       alert("我是两个参数的method01");
   }

   function method01(a,b,c){
       alert("我是三个参数的method01");
   }

   method01(1,2,3,4);//都是执行后写的method01
</script>
</body>
</html>

第十一章.DOM对象

1.概述:Document Object Model 文档对象模型,代表的是整个HTML页面
2.作用:操作网页中的标签以及标签中的内容

image-20211006165606372.png

1.DOM对象_查找标签方法

document.getElementById("id")   根据标签中的id值获取标签对象
document.getElementsByTagName("标签名")  根据标签名,获取一组标签,返回的是数组
document.getElementsByName("name值")  根据标签中的name的属性值获取标签对象,返回数组
document.getElementsByClassName("类名")根据标签中的class的值获取一组标签,返回的是数组

扩展:
document.querySelector(CSS选择器)  通过css选择器获取一个标签.如:"#id",".类名","标签名"
document.querySelectorAll(CSS选择器) 通过css选择器获取一组标签,返回数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取标签对象</title>
</head>
<body>
<div id="d1">根据id获取标签对象</div>

<div>根据标签名获取标签对象1</div>
<div>根据标签名获取标签对象2</div>

<div name="divName">根据name值获取标签对象1</div>
<div name="divName">根据name值获取标签对象2</div>

<div class="divClass">根据class值获取标签对象1</div>
<div class="divClass">根据class值获取标签对象2</div>


<script>
    /*
      document.getElementById("id")   根据标签中的id值获取标签对象
      document.getElementsByTagName("标签名")  根据标签名,获取一组标签,返回的是数组
      document.getElementsByName("name值")  根据标签中的name的属性值获取标签对象,返回数组
      document.getElementsByClassName("类名")根据标签中的class的值获取一组标签,返回的是数组

      扩展:
      document.querySelector(CSS选择器)  通过css选择器获取一个标签.如:"#id",".类名","标签名"
      document.querySelectorAll(CSS选择器) 通过css选择器获取一组标签,返回数组
     */

    // document.getElementById("id")   根据标签中的id值获取标签对象
    var element1 = document.getElementById("d1");
    console.log(element1);

    //document.getElementsByTagName("标签名")  根据标签名,获取一组标签,返回的是数组
    var elementsByTagName = document.getElementsByTagName("div");
    for (let i = 0; i < elementsByTagName.length; i++) {
        console.log(elementsByTagName[i]);
    }

    //document.getElementsByName("name值")  根据标签中的name的属性值获取标签对象,返回数组
    var elementsByName = document.getElementsByName("divName");
    for (let i = 0; i < elementsByName.length; i++) {
        console.log(elementsByName[i]);
    }

    //document.getElementsByClassName("类名")根据标签中的class的值获取一组标签,返回的是数组
    var elementsByClassName = document.getElementsByClassName("divClass");
    for (let i = 0; i < elementsByClassName.length; i++) {
        console.log(elementsByClassName[i]);
    }

    //document.querySelector(CSS选择器)  通过css选择器获取一个标签.如:"#id",".类名","标签名"
    var element = document.querySelector("#d1");
    console.log(element);

    //document.querySelectorAll(CSS选择器) 通过css选择器获取一组标签,返回数组

    var nodeListOf = document.querySelectorAll("div");
    for (let i = 0; i < nodeListOf.length; i++) {
        console.log(nodeListOf[i]);
    }
</script>
</body>
</html>

2.属性操作

需求 操作方式
读取属性值 元素对象.属性名
修改属性值 元素对象.属性名=新的属性值 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作标签属性</title>
</head>
<body>
<a href="https://www.baidu.com">跳转到百度</a>
<br/>
<script>
    var querySelector = document.querySelector("a");
    querySelector.href = "http://www.taobao.com";
</script>

</body>
</html>

3.标签体操作

需求 操作方式
获取或者设置标签体的文本内容 element.innerText
获取或者设置标签体的内容 element.innerHTML 
innerText和innerHTML区别:
1.不同点
  innerHTML:往指定的标签体中写内容,可以让后面的标签生效
  innerText:往指定的标签体中写内容,不可以让后面的标签生效
2.相同点
  如果使用innerText和innerHTML设置标签体,但是操作的标签中早已经存在标签体了,那么使用innerText和innerHTML设置的标签体会把原来的标签体内容全部覆盖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签体操作</title>
</head>
<body>
<span id="s1"></span>

<script>
    //document.getElementById("s1").innerText = "我是span1";

    document.getElementById("s1").innerHTML = "<font color = red>innerHTML</font>";
</script>
</body>
</html>

4.标签添加和删除

API 功能
document.createElement(“标签名”) 创建元素节点并返回被创建的标签对象，但不会自动添加到文档中,需要用到appendChild函数将创建的标签添加到指定的标签中
element.appendChild(ele) 将ele添加到element所有子节点后面
parentEle.insertBefore(newEle,targetEle) 将newEle插入到targetEle前面
parentEle.replaceChild(newEle, oldEle) 用新节点替换原有的旧子节点
element.remove() 删除某个标签,element指的是要删除的标签对象 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签的创建和删除</title>
</head>
<body>
<ul id="city">
    <li id="bj">北京</li>
    <li id="sh">上海</li>

    <li id="sz">深圳</li>
    <li id="gz">广州</li>
</ul>

<script>
    /*
       创建一个li标签,标签体为"武汉"
       document.createElement("标签名")

       创建元素节点并返回，但不会自动添加到文档中
       需要用到appendChild函数将创建的标签添加到指定的标签中
     */
    let liElement = document.createElement("li");
    //设置标签体
    liElement.innerText = "武汉";

    //获取ul标签
    var ulElement = document.getElementById("city");

    /*
      将创建的li标签添加到ul标签中

      element.appendChild(ele)
     */
    ulElement.appendChild(liElement);

    //------------------------------------------

    /*
      将武汉添加到深圳的前面
      parentEle.insertBefore(newEle,targetEle)
      将newEle插入到targetEle前面
     */

     //获取深圳标签
    let szElement = document.getElementById("sz");

    ulElement.insertBefore(liElement,szElement);

    //----------------------------------
    /*
      用武汉替换深圳
      parentEle.replaceChild(newEle, oldEle)用新节点替换原有的旧子节点
     */
    let szElement1 = document.getElementById("sz");
    ulElement.replaceChild(liElement,szElement1);

    //--------------------------------

    /*
      5. 删除上海这个标签

      element.remove()
     */
    let shElement = document.getElementById("sh");
    shElement.remove();
</script>
</body>
</html>

5.练习(用户注册)

如果用户名的输入框是空的,表单提交失败
如果用户名的输入框不是空的,表单提交成功,提交到用户注册成功页面

事件:
onsubmit事件
此事件如果接收的是true,表单会提交
此事件如果接收的是false,表单不会提交

onsubmit事件用法:在form标签中  onsubmit = "return 函数名()"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<form action="register_success.html" method="get" onsubmit="return register()">
    <table align="center">
        <tr>
            <td>用户名:</td>
            <td><input type="text" name="user" placeholder="请输入用户名" id="user"></td>
            <td><span id="userMsg"></span></td>
        </tr>
        <tr align="center">
            <td colspan="3"><input type="submit" value="注册"/></td>
        </tr>
    </table>
</form>
</body>
<script>
   function register(){
       //1.获取用户名输入框中的内容
       var usernameValue = document.getElementById("user").value;
       //2.判断,如果usernameValue如果是null后者是"",都不能提交表单,返回false
       if (usernameValue==null || usernameValue == ""){
          //3.获取用户名后面的span标签,用于显示"用户名不能为空"的提示
          document.getElementById("userMsg").innerText = "用户名不能为空";
          return false;
       }else{
          return true;
       }
   }
</script>
</html>

第十二章.JS事件

1.JS事件介绍

   用户在操作网页的过程中,会有各种操作,每种操作都会对应一个事件.我们可以通过js来监听这些事件,对这些事件进行编写函数来处理,来实现与用户的交互

2.设置JS事件的两种方式

1.使用命名函数的处理方式:命名函数绑定事件
  直接在标签上使用   在标签中写上:on事件名 = "函数名()"
如:
   <input type = "text" onclick = "sum()"/>
   function sum(){
     事件具体的处理方式
   }

2.使用匿名函数的处理方式:
  标签对象.on事件名 = function(){
     事件具体的处理方式
  }
如:
  <input type = "text" id = "user"/>
  document.getElementById("user").onclick = function(){
    事件具体的处理方式
  }

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>绑定事件的两种方式</title>
</head>
<body>
<input type = "button" value="命名函数" id="b1" onclick = "myclick()">
<input type = "button" value="匿名函数" id="b2">
<script>
    /*
       方式1(命名函数):  onclick
         先在标签中设置:
           事件 = "函数名()"
           function 函数名(){
           }

       在指定标签上绑定事件,一旦操作这个标签,就会触发设置的事件,然后执行事件绑定的函数
     */
    function myclick(){
        alert("你快点点我呀!我等不及了!");
    }

    /*
      方式2(匿名函数):
         document.getElementById("id值").事件 = function(){
         }

         1.获取要操作的标签对象,然后绑定指定的事件,然后将事件再绑定一个function函数

         2.document.getElementById("id值")->根据标签上设置的id值获取对应的标签对象
     */

    document.getElementById("b2").onclick = function(){
        alert("我也等不及了,我也想要被点!");
    }
</script>
</body>
</html>

3.onload事件

1.介绍:当页面加载完毕之后,才触发的事件
2.格式:
  window.onload = function(){
    js代码
  }

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>onload事件</title>
</head>
<body>

<script>
    /*
       onload事件:页面加载完毕之后,执行响应的js代码
        window.onload = function(){
          其他js代码
        }
     */
 window.onload = function(){
     var elementById = document.getElementById("b2");
     alert(elementById);
 }

</script>
<input type = "button" value="匿名函数" id="b2">
</body>

</html>

4.鼠标点击事件

onclick: 单击事件
ondblclick:双击事件
快捷键小技巧:在括号中加$END$,快捷键生成的代码光标会自动跑到小括号中间

获取此input输入框中的value
用获取到的标签对象,去点value->只要是获取到了标签对象,就可以调用标签中的属性,来获取属性值

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>点击事件</title>
</head>
<body>
姓名:<input type="text" id="t1"><br/>
姓名:<input type="text" id="t2"><br/>
<input type="button" value="单击复制/双击清除" id="b1"/>
</body>

<script>
    //单击事件
    document.getElementById("b1").onclick = function(){
        //1.获取id为t1的input标签对象
        var t1Input = document.getElementById("t1");
        /*
           2.获取此input输入框中的value
             用获取到的标签对象,去点value->只要是获取到了标签对象,就可以调用标签中的属性,来获取属性值
         */
        var value1 = t1Input.value;
        //3.将获取的value赋值给id为t2的input标签中
        document.getElementById("t2").value = value1;
    }

    //双击事件

    document.getElementById("b1").ondblclick = function(){
        document.getElementById("t1").value = "";
        document.getElementById("t2").value = "";
    } 
</script>

</html>

5.焦点事件

onfocus:得到焦点
onblur:失去焦点

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>得到焦点_失去焦点</title>
</head>
<body>
用户名:<input type="text" id="user"/><span id="info" style="color: red"></span>
</body>

<script>

    //得到焦点,后面的提示消失,失去焦点时,后面的提示出现

    //得到焦点-> onfocus
    document.getElementById("user").onfocus = function(){
        /*
           获取span标签
           innerHTML:往指定的标签体中写内容,可以让后面的标签生效
           innerText:往指定的标签体中写内容,不可以让后面的标签生效
         */
        document.getElementById("info").innerHTML = "";
    }
    //失去焦点->onblur
    document.getElementById("user").onblur = function(){
       /*
          获取span标签
          innerHTML:往指定的标签体中写内容,可以让后面的标签生效
          innerText:往指定的标签体中写内容,不可以让后面的标签生效
        */
        document.getElementById("info").innerHTML = "<font color = 'red'>用户名不能为空</font>";
    }

</script>
</html>

6.改变事件

onchange:改变事件->当一个框中的内容改变,就会触发onchange事件

this关键字:this在哪个标签对象绑定的事件中使用,this就代表哪个标签对象

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>改变事件</title>
</head>
<body>
城市:
<select id = "city">
    <option value = "广州">广州</option>
    <option value = "上海">上海</option>
    <option value = "北京">北京</option>
</select>

<hr/>
<input type="text" id="user"/>
</body>
<script>
    /*
       需求:选择下拉框中的内容,弹出对应的内容
       注意:
          1.option中设置的value其实就是select标签的value值
          2.this关键字:哪个对象调用的this所在的方法,this就代表哪个对象
            下列代码中,是select对象绑定改变事件后出发的function
            而this就在被调用的function中,那么this就代表获取的这个select对象

     */
    document.getElementById("city").onchange = function(){
        //this在select标签对象绑定的时间中使用,所以this就代表select标签对象
        alert(this.value);
    }
    /*
      在输入框中输出小写字母,改成大写
     */
   document.getElementById("user").onchange = function () {
      //获取当前标签中的value值,调用toUppercase()变成大写,之后重新赋值给当前标签的value
       this.value = this.value.toUpperCase();
   }
</script>
</html>

7.练习_添加删除商品

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品添加删除</title>

    <style>
        table,tr,td,th{
            border: 1px solid black;
            width: 500px;
            text-align: center;
            margin: auto;
        }

        div{
            text-align: center;
        }
    </style>
</head>
<body>
<table cellspacing="0" id="tb">
    <tr>
        <th>序号</th>
        <th>用户名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td>男</td>
        <td>
            <button onclick="deletePerson(this)">删除</button>
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>女</td>
        <td>
            <button onclick="deletePerson(this)">删除</button>
        </td>
    </tr>
    <tr>
        <td>3</td>
        <td>王五</td>
        <td>男</td>
        <td>
            <button onclick="deletePerson(this)">删除</button>
        </td>
    </tr>
</table>
<div>
    <form action="#">
        序号<input type="text" name="num" id="num"><br/>
        用户<input type="text" name="username" id="username"/><br/>
        性别<input type="text" name="gender" id="gender"/><br/>
        <input type="button" value="添加用户" onclick="addPerson()"/>
    </form>
</div>


<script>
 /*
   删除
  */
 function deletePerson(obj){
     obj.parentElement.parentElement.remove();
 }

 /*
  添加
  */
 function addPerson(){
     //获取每个输入框中输入的value值
     var num = document.getElementById("num");
     var numValue = num.value;

     var username = document.getElementById("username");
     var nameValue = username.value;

     var gender = document.getElementById("gender");
     var genderValue = gender.value;

     //创建一个tr
     var trElement = document.createElement("tr");

     //给tr的标签体中添加单元格以及内容
     trElement.innerHTML = "<td>"+numValue+"</td>\n" +
         "        <td>"+nameValue+"</td>\n" +
         "        <td>"+genderValue+"</td>\n" +
         "        <td>\n" +
         "            <button onclick=\"deletePerson(this)\">删除</button>\n" +
         "        </td>"

     //将tr标签添加到table标签中
     var table = document.getElementById("tb");
     table.appendChild(trElement);

     //清空输入框中的值
    num.value = "";
    username.value = "";
    gender.value = "";
 }
</script>
</body>
</html>

第十三章.JSON

1.Json介绍

(JavaScript] Object Notation) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

2.Json的数据格式

1.数组格式：[obj,obj,obj...]，使用中括号包裹，数组的元素可以是任意类型，多个元素之间逗号分开。

2.对象格式：{"key1":obj,"key2":obj,"key3":obj...}，使用大括号包裹，对象采用键值对形式，键必须是字符串类型，值可以是任意类型，多个键值对之间逗号分开。

3.数组和对象之间可以相互嵌套

3.Json数据解析

3.1.json数组

<script type="text/javascript">
    /*
      json数组
     */
    var jsonArray = [1,2,3,4,"哈哈"];
    for (let i = 0; i < jsonArray.length; i++) {
        document.write(jsonArray[i]+"<br/>");
    }

    document.write("======================"+"<br/>");
</script>

3.2.json对象

<script type="text/javascript">
/*
      json对象

      var 对象名 = {"key":value,"key":value}

     */

    var jsonObject = {"name":"张无忌","age":18};
    document.write(jsonObject.name+"..."+jsonObject.age+"<br/>");

    document.write("============================="+"<br/>");
</script>

3.3.json数组嵌套对象

<script>
    /*
      数组嵌套对象
     */
    var jsonArrayObject = [
        {"name":"张无忌","age":20},
        {"name":"赵敏","age":18}
        ];

    //遍历数组,将每一个对象遍历出来
    for (let i = 0; i < jsonArrayObject.length; i++) {
        document.write(jsonArrayObject[i].name+"..."+jsonArrayObject[i].age);
    }
</script>

3.4.json对象嵌套数组

<script>
    /*
      对象嵌套数组
      json是一个对象
      key是一个字符串
      value是一个数组
     */

    var jsonObject = {
        "key":[
            {"name":"赵敏","age":18},
            {"name":"张无忌","age":20}
        ]

    };

    document.write(jsonObject.key[0].name+"==="+jsonObject.key[0].age+"<br/>");
    document.write(jsonObject.key[1].name+"==="+jsonObject.key[1].age+"<br/>");

    //遍历
    for (let i = 0; i < jsonObject.key.length; i++) {
        document.write(jsonObject.key[i].name+"==="+jsonObject.key[i].age+"<br/>");
    }
</script>

3.5.json对象嵌套数组_多个键值对

<script>
    /*
       对象嵌套数组
       多个键值对

       注意:不好遍历,因为每一个key名字都不一样
     */

    var jsonObject = {
        "key1":[
            {"name":"赵敏","age":18},
            {"name":"张无忌","age":20}
        ],

        "key2":[
            {"name":"张三丰","age":100},
            {"name":"张翠山","age":50}
        ]
    };

    //遍历
    for (let i = 0; i < jsonObject.key1.length; i++) {
        document.write(jsonObject.key1[i].name+"==="+jsonObject.key1[i].age+"<br/>");
    }
</script>