JavaScript 笔记

最新推荐文章于 2024-12-28 08:00:29 发布

原创最新推荐文章于 2024-12-28 08:00:29 发布 · 357 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

1.什么是JavaScript

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易学习。

2.第一个js程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个js程序</title>
    <script src="1.第一个js程序.js"></script>
</head>
<body>
</body>
<!--script标签内写程序，位置不定-->
<!--<script>-->
<!--   弹窗-->
<!--    alert("hello world!")-->
<!--</script>-->

</html>

<!--    弹窗-->
alert("hello world!")

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZocO6sN9-1659024158618)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211010132332184.png)]$

3.基本语法入门

1.变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本语法</title>
    <script>
  // js 要区分大小写
     // 1.定义变量 可以放任意类型
     var v1 =1;
     var v2="hello";
     alert(v2+1)
    // 2.if 语句
     if(2>10){
         alert(2>1);
     } else if (2>0.3){
         alert(2)
     }
    </script>
</head>
<body>

</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cKazfyM1-1659024158619)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211010140400690.png)]$

2.输出

JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

<script>
a=3;
//输出到页面中
document.write(a)
// 弹窗输出
alert(a)
</script>

在这里插入图片描述

3.number

数字（Number)字面值可以是整数或者是小数，或者是科学计数(e)。

<script>
    document.write(12.3+" ")
    document.write(123+" ")
    document.write(12e3+" ")
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4S2wd9Cr-1659024158623)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211010142150251.png)]$

4.String

<script>
     // 单双引号都可以
    document.write("可爱小萝莉   ")
    document.write('小萝莉可爱')

</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A367MAiO-1659024158625)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211010142526219.png)]$

5.条件运算符

==	等于
===	绝对等于（值和类型均相等）
!=	不等于
!==	不绝对等于（值和类型有一个不相等，或两个都不相等）
>	大于
<	小于
>=	大于或等于
<=	小于或等于

注意和=：

<script>
        // == 只会判断值
    document.write(2=="2")
    document.write("<br>")
        // === 值和类型都会判断
    document.write(2==="2")
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sqBYDdGr-1659024158626)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211010144336749.png)]$

尽量不要用浮点数进行运算，因为存在精度问题

document.write((1/3)===(1-2/3))

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kQ6Md2VP-1659024158629)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211010144827233.png)]$

6.逻辑运算符

运算符	描述	例子
&&	and	(x < 10 && y > 1) 为 true
\|\|	or	(x5 \|\| y5) 为 false
!	not	!(x==y) 为 true

7.null和undefined

null:空值

undefined:无定义

<script>
  var a=null;
  var b;
    document.write(a)
  document.write("<br>")
  document.write(b)
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P051r7FE-1659024158631)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211010154936730.png)]$

8.数组

<script>
      // 数组可以放任意类型的数据
      //数组下标越界会出现underfined
  var a=[1,2.8,6,"dd"];
  var b=new Array(1,2.3,"23")
    document.write(a[1])
      document.write("<br>")
  document.write(b[2])
      document.write("<br>")
  document.write(b[3])

</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CIXOdYkh-1659024158632)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211010155948062.png)]$

9.对象

JavaScript 对象是变量的容器。

// 定义对象 必须给值
//最后一行可不写逗号，大括号结束有分号
var per={
    age:15,
    name:"al",
    love:'小萝莉'
};
document.write(per.age)
document.write("<br>")
document.write(per.love)

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JcgFdS7c-1659024158634)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211010161423899.png)]$

10.严格检查模式

<script>
    // 严格检查模式，必须在第一行
    'use strict'
    // 严格检查模式 会规避全局变量
     //这是全局变量，会导致错误发生
    i=0;
    // 定义局部变量用let(推荐)或者var
    var a=1;
    let b=2;
    document.write(i)
    document.write("<br>")
    document.write(a)
</script>

4.字符串

1.转义字符

<script>
    // 字符串可以带转义字符
 var a='123\'3\\';
 document.write(a)
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WKw6btZO-1659024158634)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211010164911767.png)]$

’	单引号
"	双引号
\	反斜杠
\n	换行
\r	回车
\t	tab(制表符)
\b	退格符
\f	换页符

2.多行字符串

<script>
    // 可以多行字符编写，用``
    var a=`123
    dfg
    asd`
 document.write(a)
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ayVf3q7f-1659024158635)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211010165129139.png)]$

3.模板字符串

可以直接拼接字符串

<script>
    // 直接拼接
    var a='abc';
    let b=`123${a}`
 document.write(b)
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K24S5SdJ-1659024158636)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211010165608110.png)]$

4.字符串长度

<script>
        var a='abc123'
     document.write(a.length)
     document.write(a[2])
    </script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EjCKi8ga-1659024158636)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211010165941316.png)]$

5.字符串的不可变性

<script>
     // 字符串写入后不可变
    var a='abc123'
    a[0]='k';
 document.write(a[0])
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4qjihuMj-1659024158637)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211010170738252.png)]$

6.常用方法

方法	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
fromCharCode()	将 Unicode 转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()	根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()	根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值

5.数组

1.长度

<script>
  'use strict'
  // 数组长度是可变的，赋值改变后 会增加或者减少数组的长度
  // 改变太小会丢失数据
    var a=[1,2,3,4];
  document.write(a)
  document.write("<br>")
  document.write(a.length)
  document.write("<br>")
  a.length=10;
  document.write(a)
  document.write("<br>")
  document.write(a.length)
  document.write("<br>")
  a.length=2
  document.write(a)
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LlmSoBID-1659024158638)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211010171801470.png)]$

2. 查找indexOf（）

<script>
  'use strict'
  // 查找数组元素对应的下表，注意数字和字符不同
    let a=[1,2,3,1,"1","2"];
    // 只会返回第一个
  document.write( a.indexOf(1))
  document.write("<br>")
  document.write( a.indexOf("1"))

</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4sLTOOce-1659024158638)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211010172231982.png)]$

3.截取slice()

截取数组的一部分，返回一个新数组，类似于String中的substing

<script>
  'use strict'
    let a=[1,2,3,4,5];
  // 从位置2开始截取
   let b=a.slice(2)
  document.write(b)
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LuCdN5DR-1659024158639)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211010172753102.png)]$

4.push() ,pop()，unshift（），shift()

push:尾部压入

pop：尾部弹出

unshift：头部压入

shift：头部弹出

<script>
  'use strict'
    let a=[1,2,3,4,5];
     // 尾部加入
       a.push('a','b');
  document.write( a)
  document.write("<br>")
       //尾部弹出 返回一个值
      a.pop();
  document.write( a)
  document.write("<br>")
    // 头部加入
   a.unshift("c",'d')
  document.write( a)
  document.write("<br>")
  //头部弹出 返回一个值
  a.shift();
  document.write( a)
  document.write("<br>")
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lr5tLSGV-1659024158639)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211010173742749.png)]$

5.排序 sort()

<script>
  'use strict'
    let a=[2,34,36,4,51];
  // 排序
  document.write(a.sort())
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BYGPya1g-1659024158640)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211010174335549.png)]$

6.元素反转 reverse（）

<script>
  'use strict'
    let a=[1,2,3,4,5];
  // 反转
  document.write(a.reverse())
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pkDUnW5F-1659024158641)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211010174455391.png)]$

7.拼接 concat()

<script>
  'use strict'
  // 字符串拼接
    let a=[1,2,3,4,5];
     let b=a.concat(['a','b','c']);
  document.write(a)
  document.write("<br>")
  document.write(b)
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e7XXSA1x-1659024158641)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211010174855920.png)]$

8.连接符 join

<script>
  'use strict'
    let a=[1,2,3,4,5];
  // 元素之间加入字符
  document.write(a.join("--"))
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ouhh0vJC-1659024158642)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211010175139971.png)]$

9.多维数组

<script>
  'use strict'
    let a=[[1,2],[3,4]]
  document.write(a[1][0])
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3QlAeHOA-1659024158642)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211010175440565.png)]$

10.遍历数组

<script>
  'use strict'
    let a=[1,2,3,4]
  for (let i = 0; i < a.length; i++) {
      document.write(a[i])
  }
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P5fVnslO-1659024158643)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211010180322151.png)]$

6.对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    'use strict'
   /*
   var 对象名{
    属性名;属性值,
    属性名;属性值,
    属性名;属性值
   };
    */
    var loli={
        age:"16",
        name:"小萝莉"
    };
    // 使用一个不存在的对象属性不会报错
      loli.state=2;
    // 可以删除属性名
    delete loli.name
    // 判断这个属性是否在这个对象中
    document.write(`name` in loli);
    // 这样可以添加回来
    loli.name="小萝莉"
    document.write("<br>")
    document.write(`age` in loli);
    document.write("<br>")
    document.write(`name` in loli);
    document.write("<br>")
    // 判断一个对象属性是否是原来拥有的,忽略掉继承
    document.write("<br>")
    document.write(`toString` in loli);
    document.write("<br>")
    document.write(loli.hasOwnProperty(`String`));


  </script>
</head>
<body>

</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tPkJ4QXR-1659024158644)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211010190640450.png)]$

7.流程控制

1.if语句

<script>
  'use strict'
  let a=10;
  if(a>20){
    document.write("大于20")
  }else if(a>10&&a<15){
    document.write("大于10小于15")
  }else if(a<=10){
    document.write("小于等于10")
  }

</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0tN6RSwr-1659024158644)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211010191751492.png)]$

2.switch 语句

<script>
  'use strict'
  var d=new Date().getDay();
  var x;
  switch (d)
  {
    case 0:x="今天是星期日";
      break;
    case 1:x="今天是星期一";
      break;
    case 2:x="今天是星期二";
      break;
    case 3:x="今天是星期三";
      break;
    case 4:x="今天是星期四";
      break;
    case 5:x="今天是星期五";
      break;
    case 6:x="今天是星期六";
      break;
  }
  document.write(x)
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6wNI9mjy-1659024158645)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211010192005371.png)]$

3.for语句

<script>
  'use strict'
  for (let i = 0; i < 10; i++) {
    document.write(i+"$$\n")
  }
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bCVwvXZB-1659024158646)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211010192208658.png)]$

4.while 语句

<script>
  'use strict'
  var sum=0;
  var i=100;
 do {
   sum +=i;
   i--;
 }while (i>=0)
    document.write(sum);
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sUPIG5Zx-1659024158647)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211010192548340.png)]$

8.map和set

map:

键值对

<script>
  'use strict'
 var map =new Map([['loli1',14],['loli2',15],['loli3',16]]);
  document.write(map.get('loli1')); // 获得值
  document.write("<br>")
  map.set('loli4',14.5)// 增加或修改值
  document.write(map.get('loli4')); // 获得值
  document.write("<br>")
  document.write(map.delete('loli1')); // 删除
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IxNxKqiw-1659024158647)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211010194933945.png)]$

set:

<script>
  'use strict'
  // 和Java中的set一样，不允许有重复值
 var set =new Set([1,2,3,1]);
     
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ELrJZqLf-1659024158648)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211010195331974.png)]$

9.Iterator

数组遍历：

var a1=[1,2,3,4,5];
 // in 返回下标值，of 直接返回值
for(var x of a1){
    document.write("<br>");
    document.write(x);
}

map遍历：

var a1 =new Map([['loli1',14],['loli2',15],['loli3',16]]);
 // in 返回下标值，of 直接返回值
for(var x of a1){
    document.write("<br>");
    document.write(x);
}

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BjR8BVsX-1659024158648)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211010201434282.png)]$

set遍历：

// in 返回下标值，of 直接返回值
var a1 =new Set([1,2,3,1]);
for(var x of a1){
    document.write("<br>");
    document.write(x);
}

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HzUJPYxJ-1659024158649)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211010201556186.png)]$

10.函数

1.定义函数

<script>
  // 定义函数 法1
  // 函数执行到return就结束
  // 如果函数没有return 也会返回结果，结果是undefine
 function abs(x) {
   if (x >= 0) return x;
   else return -x;
 }
 // 法2
  var abs1= function (x){
    if (x >= 0) return x;
    else return -x;
  }
  // 法1和法2等价
  // 可以传递多个参数，但是，只会使用第一个
  var a=abs(-2,34,56,-9)
 document.write(a);
  document.write("<br>");
 document.write(abs1(-3));
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W3e6kOYr-1659024158649)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211011155858783.png)]$

2.参数问题

<script>
  //  当函数传递多个参数是  arguments代表这些参数组成的数组
  function abs(x) {
    var a = new Array();  //空数组
    for (let i = 0; i < arguments.length; i++) {
      if (arguments[i] >= 0)  a[i]=arguments[i];
      else a[i]=-arguments[i];
    }
    return a;
  }
  document.write(abs(-2,34,56,-9));
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7jEcY1JL-1659024158650)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211011160906212.png)]$

arguments 代表了所有的参数的集合，而且传入函数的参数个数不定，当想用某个参数时，那就不好找。

<script>
    //a 和b 是两个单独的参数，rest是后面参数组成的数组
  function fun(a,b,...rest){
      document.write(a+1);
      document.write(b);
      document.write(rest);
  }
  fun(1,2,3,4,5)
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0UOGe98L-1659024158650)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211011161856307.png)]$

3.变量的作用域

函数体内定义的变量，函数体外不可以使用

如果函数体内的函数和外部函数变量重名，则各自有各自的变量，不会冲突，

<script>
  'use strict'
  function fun1(){
    var  x =1;
    function fun2(){
     x=2;
      return  x;
    }
    document.write(x);
    document.write(fun2());
  }
  fun1();
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-csQwUlto-1659024158650)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211011215106635.png)]$

变量在编译时会先定义,无论变量在什么位置，然后在赋值

<script>
  'use strict'
  function fun1(){
      var a=1+y;
      console.log(a);
      var y=2;
  }
  fun1();
</script>

y存在，但是没有值

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y4dX2V5S-1659024158651)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211011215856130.png)]$

<script>
  'use strict'
  function fun1(){
      var a=1+y;
      console.log(a);
      var y=2;
  }
  fun1();
</script>

这个是js建立之初就存在的作用，所以要养成规范：所有的变量定义都放在函数体的头部，不要乱放。

4.全局函数：

  <script>
    'use strict'
    var x =1;
    function fun1(){
       x+=1;
    }
    // window 是一个全局对象，所有函数，变量都可以用window
    window.fun1();
    document.write(window.x);
  </script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IdqKwdzf-1659024158652)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211011220751801.png)]$

规范：

由于我们所有的全局变量都绑定在window上，如果不同的js文件，使用了相同的全局变量，如何减少冲突。

<script>
  'use strict'
  // 定义唯一的全局变量
   var AnGeng ={};
  // 定义全局变量
   AnGeng.name=1;
   AnGeng.add=function (){};
</script>

把所有变量，函数都放进到唯一的全局变量中，降低冲突风险。

5.let

<script>
  'use strict'
  function fun(){
      // 定义局部变量
      for (var i = 0; i < 100; i++) {
          document.write(i);
          document.write("<br>");
      }
      // 但是在外部还可以使用
      document.write(i+1);
  }
  fun();
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vNCcw1F0-1659024158654)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211011231006399.png)]$

es6引进的let就不会,所以建议使用let定义局部变量

<script>
  'use strict'
  function fun(){
      // 定义局部变量
      for (let i = 0; i < 100; i++) {
          document.write(i);
          document.write("<br>");
      }
      // 在外部就不可以使用
      document.write(i+1);
  }
  fun();
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GT9oqcv5-1659024158655)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211011231109176.png)]$

6.const

<script>
  'use strict'
  // 在es6之前是这样定义常来的，
  var FUN =123;//只要变量名都是大写，那就是常量
  FUN=23;//无语的是，常量定义后还可以修改
  // es6引入了const关键字
  const fun1=123;
  fun1=345;// 修改就回报错
</script>

7.方法

方法就是把函数放进到对象里面，对象里面只有属性和方法。

<script>

  // 对象
  var ag={
     a:2,
    // 方法
    fun:function (){
  }
  }
  ag.a;
    ag.fun()
</script>

  <script>
      function fun1(){
     return this.a+2; // this 关键字
  }
  // 对象
  var ag={
      a:2,
      b:fun1  // b代表fun1函数
  }
  document.write(ag.b());
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QyeNNwc5-1659024158656)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211012130443668.png)]$

apply:

  <script>
      function fun1(){
     return this.a+2; // this 关键字
  }
  // 对象
  var ag={
      a:2,
      b:fun1  // b代表fun1函数
  }
  // apply 改变js指向
  let l=fun1.apply(ag,[])// apply指向ag这个对象，而且函数参数为空
  document.write(l);
</script>

 Function.apply(obj,args)方法能接收两个参数
obj：这个对象将代替Function类里this对象
args：这个是数组，它将作为参数传给Function（args-->arguments）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eloACXa4-1659024158656)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211012130753981.png)]$

11.Date

<script>
    var now = new Date();
    document.write(now);//获取当前时间
    document.write("<br>");
    document.write(now.getFullYear());//获取当前年
    document.write("<br>");
    document.write(now.getMonth());//获取当前月
    document.write("<br>");
    document.write(now.getDay());//获取当前日
    document.write("<br>");
    document.write(now.getHours());//获取当前时
    document.write("<br>");
    document.write(now.getMinutes());//获取当前分
    document.write("<br>");
    document.write(now.getTime());//时间戳
    document.write("<br>");
    document.write(now.toLocaleString());//标准时间

</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-txBDul92-1659024158657)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211013144909838.png)]$

12.JSON

全称是:JavaScript Object Notation

JSON 和XML一样，是一种文件格式，早期使用XML,现在用JSON

数据形式是以下三种:

对象用{}
数组用[]
键值对用 key:value

对象和JSON相互转换

  <script>
    var ag={
      name:"ag",
      age:16,
      sex:"男"
    };
    // 对象转JSON类型
    var json = JSON.stringify(ag);
    document.write(json);
    // JSON类型 转对象
    var obj=JSON.parse('{"name":"ag","age":16,"sex":"男"}');
    document.write("<br>");
    document.write(obj.name);
  </script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NOCCrXVc-1659024158658)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211013153951203.png)]$

13.面向对象

1.原型

Java中：

类：模板
对象：具体实例

但是在js中，这些都有些不同。

  <script>
    let man={
      name:"man",
      age:16,
      sex:"男",
        fun:function (){
            document.write(this.name+"   fly");
        }
    };
    let ag={
        name:"ag"
    }
    //原型对象
    ag.__proto__=man;
    ag.fun();
    document.write("<br>");
    //而且可以使用原来对象的属性
    document.write(ag.age);
    document.write("<br>");
    //当然，自有的属性会占有原来的属性
    document.write(ag.name);
  </script>

在这里插入图片描述

2.class 继承

<script>

    class man {
         constructor(name) {
             this.name=name
         }
         run(){
             document.write(this.name +"   run");
         }
    }
    class ag extends man {
        constructor(name,grade) {
            super(name);
            this.grade=grade;
        }
     // 独有方法
        fun(){
            document.write(this.grade+"   "+this.name );
        }
    }
    let ag1= new ag("ag","一年级");
    ag1.run();
    document.write("<br>");
    ag1.fun();
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XNh45mh3-1659024158660)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211013203231562.png)]$

本质还是原型！！！

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GXuqrUdP-1659024158661)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211013203515338.png)]$

在这里插入图片描述

14.浏览器对象BOM(重点)

JavaScript的实现包括以下3个部分：
1）核心（ECMAScript）：描述了JS的语法和基本对象。
2）文档对象模型（DOM）：处理网页内容的方法和接口
3）浏览器对象模型（BOM）：与浏览器交互的方法和接口

BOM：Browser Object Model 是浏览器对象模型，浏览器对象模型提供了独立与内容的、可以与浏览器窗口进行互动的对象结构，BOM由多个对象构成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。

window

Window 对象表示浏览器中打开的窗口。
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

window.innerHeight //内高
754
window.innerWidth //内宽
982
window.outerHeight  //外高
824
window.outerWidth  //外宽
1536

Navigator

Navigator封装了浏览器的信息

navigator.appName // 浏览器名称；
'Netscape'
navigator.appVersion // 浏览器版本
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.71 Safari/537.36 Edg/94.0.992.38'
navigator.userAgent // 声明了浏览器用于 HTTP 请求的用户代理头的值。
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.71 Safari/537.36 Edg/94.0.992.38'
navigator.platform// 声明了运行浏览器的操作系统和（或）硬件平台。
'Win32'

大多数时候，我们不会使用navigator对象，因为会被认为修改!
不建议使用这些属性来判断和编写代码

Screen

代表屏幕尺寸

screen.width 
1536
screen.height
864

location

Location 对象包含有关当前 URL 的信息。

location.hash //返回一个URL的锚部分
...
location.host //  返回一个URL的主机名和端口
'localhost:63342'
location.hostname //返回URL的主机名
'localhost'
location.href  // 返回完整的URL
'http://localhost:63342/JS/Day03/2.JSON.html?_ijt=6c5cbel6tplfmal5s6qj4ujo53'
location.pathname // 返回的URL路径名。
'/JS/Day03/2.JSON.html'
location.port // 返回一个URL服务器使用的端口号
'63342'
location.portocol //返回一个URL协议
undefined
location.search // 返回？号后面的所有值。
'?_ijt=6c5cbel6tplfmal5s6qj4ujo53'

document

document代表当前的页面

document.title //当前页面的名称
'navigator.platform - 国内版 Bing'
document.cookie // 获取cookie
'runoob-uuid=06d958f1-54b3-4c7e-9bf0-e5e98fa20d6a; _ga=GA1.2.478802870.1633012762; __gads=ID=7fb91f80db5eb811-2237cd0e06cc004a:T=1633012761:RT=1633012761:S=ALNI_MZ0dTfIZPzcIPj_24LjdAicE8rpvQ; _gid=GA1.2.1437257044.1634133127; Hm_lvt_3eec0b7da6548cf07db3bc477ea905ee=1633758313,1633839643,1633852846,1634133186; Hm_lpvt_3eec0b7da6548cf07db3bc477ea905ee=1634133186; SERVERID=e861f758a7dc0c8cfeac76f2accad538|1634134596|1634133127'

// 劫持cookie原理
<script src="a.js"></script>
//恶意人员通过获取你的 cookie 上传到他的服务器,你的信息被泄露

history

history代表浏览器的历史记录

history.back() // 后退
history.forward() //前进

15.文档对象DOM(重点)

在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点:

文档是一个文档节点。
所有的HTML元素都是元素节点。
所有 HTML 属性都是属性节点。
文本插入到 HTML 元素是文本节点。are text nodes。
注释是注释节点。

浏览器网页就是一个Dom树形结构！

更新：更新Dom节点
遍历Dom节点：得到Dom节点
删除：删除一个Dom节点
添加：添加一个新的节点

获得节点

<body>
<div id="father">
  <h1> 标题</h1>
  <p id="p1">p1</p>
  <p class="p2">p2</p>
</div>

<script>
  // 通过标签名称
  let l1=document.getElementsByTagName('h1')
  // 通过标签id
  let l2=document.getElementById("p1");
  // 通过clss名称
  let l3=document.getElementsByClassName('p2')

  let fa=document.getElementById("father");
</script>


l1
HTMLCollection [h1]
l2
<p id="p1">p1</p>
l3
HTMLCollection [p.p2]0: p.p2length: 1[[Prototype]]: HTMLCollection
fa.children // 返回当下所有节点
HTMLCollection(3) [h1, p#p1, p.p2, p1: p#p1]

更新节点

操作文本：

id1.innerText = '123'// 修改文本的值
'123'
id1.innerHTML = '<strong>123</strong>' 
'<strong>123</strong>'//可以解析HTML文本标签

操作CSS：

id1.style.color='red' // 修改字体颜色
'red'
id1.style.fontSize="100px" // 修改字体大小
'100px'
id1.style.padding = '2em'; // 修改内边距
'2em'

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pZGfXE9o-1659024158665)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211013232231635.png)]$

删除节点：

步骤：先获取父节点，再通过父节点删除自己

<body>
<div id="father">
    <h1> 标题</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    let self=document.getElementById('p1')
  let father=p1.parentElement; //获得p1的父节点
    father.removeChild(self);  //删除节点

    // 这样删行是行，但是要注意，节点是动态变化的
   /*
   动态变化是什么意思呢？
   就是原来有三个节点，删除第一个以后，剩下两个节点的下标自动排序，三个节点是0，1，2，删除0后是0，1
   然后再执行第二句删除下标1节点，然后剩了0节点，再执行删除2节点就会出错。
   */
    father.remove(father.children[0])
    father.remove(father.children[1])
    father.remove(father.children[2])
</script>
</body>

插入节点

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，如果这个Dom节点已经存在元素了，我们就不能这么干了！会产生覆盖

<body>
<p id="a1">额外的p标签</p>
<div id="b1">
  <p id="a2">P1标签</p>
  <p id="a3">P2标签</p>
</div>
<script>
  let p=document.getElementById('a1');
  let father=document.getElementById('b1');
  b1.appendChild(p);
</script>
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yj5hENnk-1659024158667)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211014125428828.png)]$

创建节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src=""></script>
    <link rel="stylesheet" href="" type="text/css">
</head>
<body>
<p id="a1">额外的p标签</p>
<div id="b1">
  <p id="a2">P1标签</p>
  <p id="a3">P2标签</p>
</div>
<script>
    let a1=document.getElementById("a1");//获得a2节点
  let father=document.getElementById('b1');//获得父节点
  let newp=document.createElement('p');//创建一个p节点
  newp.id="newp标签";//给标签加id
  newp.innerText="新的p标签" // 给标签加文档
  father.appendChild(newp); //添加到最后
  father.insertBefore(a1,newp);// 在创建的新标签前面添加一个标签
  //  创建一个script 标签
  let myScript =document.creatElement('script');
  myScript.setAttribute('type','text/javascript');//引进外部script的样式

  //创建一个style标签
  let myStyle = document.creatElement('style');
  myStyle.setAttribute('type','text/css');//引进外部css的样式
  myStyle.innerHTML = 'body{background-color:chartreuse;}';//设置标签内容

  document.getElementByTagName('head')[0].appendChild(myStyle);
</script>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XoqzzlPC-1659024158671)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211014134059627.png)]$

16.操作表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--建立表单-->
<form action = "post">
<!--  建立输入框-->
  <p>
    <span>用户名：</span><input type="text" id = "username" />
  </p>
  <p>
    <span>性别：</span>
    <input type = "radio" name = "sex" value = "man" id = "boy"/>男
    <input type = "radio" name = "sex" value = "woman" id = "girl"/>女
  </p>



  </form>


<script>
  let input_text = document.getElementById("username"); //得到输入框节点
  var boy_radio = document.getElementById("boy");
  var girl_radio = document.getElementById("girl");
  //得到输入框的值
  input_text.value
  //修改输入框的值
  input_text.value  = "value";

  //对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值
  boy_radio.checked;//查看返回的结果，是否为true，如果为true，则被选中。

</script>

</body>
</html>


input_text.value
'1234'
input_text.value=987
987


boy_radio.checked
false

在这里插入图片描述

表单验证

<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <title>Title</title>
  <!--MD5加密工具类-->
  <script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js">

  </script>
</head>
<body>
<!--表达绑定提交事件
    οnsubmit= 绑定一个提交检测的函数，true，false
    将这个结果返回给表单，使用onsubmit接收
-->
<!-- 表单验证 -->
<form action = "https://www.baidu.com" method = "post" onsubmit = "return aaa()">
  <p>
    <span>用户名：</span><input type="text" id = "username" name = "username"/>
  </p>
  <p>
    <span>密码：</span><input type="password" id = "password" />
  </p>
<!--    加密密码-->
  <input type = "hidden" id = "md5-password" name = "password">
<!--  按钮-->
  <button type = "submit">提交</button>
</form>

<script>
  function aaa(){
    alert(1);
    let pwd = document.getElementById("password");
    let md5pwd = document.getElementById("md5-password");
    md5pwd.value = mad5(pwd.value); // 加密
    //可以校验判断表单内容，true就是通过提交，false就是阻止提交
    return true;

  }
</script>

</body>
</html>

17.jQuery

JavaScript

jQuery 库，里面存在大量的 JavaScript 函数

公式：$(selector).action()

导入jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--      调用jQuery-->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<a href="" id = "test-jquery">点我</a>
<script>
  //选择器就是css选择器
  $('#test-jquery').click(function(){
    alert('hello,jQuery!');
  });
</script>

</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N8udKv2D-1659024158683)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211014220915635.png)]$

选择器

//原生js，选择器少，麻烦不好记
//标签
document.getElementByTagName();
//id
document.getElementById();
//class
document.getElementByClassName();

//jQuery css中的选择器它全部都能用！
$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click;//class选择器

事件

$('.class').mousedown(); // 鼠标按下 
$('.class').mousemove(); // 鼠标移动

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

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<style>
    #divMove{
        width: 500px;
        height: 500px;
        border: 1px solid #6d6666;
    }
</style>

</head>
<body>
<!--  标签 获取当前鼠标的坐标-->
mouse:<span id="mouseMove"></span>
<div id="divMove">
    这这里移动
</div>
<script>
    // 获取鼠标坐标的具体实现
    // 当网页元素加载完毕后 再实现功能
    $(function (){
        $('#divMove').mousemove(function (e){  // 获得鼠标的坐标
            $('#mouseMove').text('x:' + e.pageX + 'y:' + e.pageY) // 把坐标在页面上显示出来
        })
    });
</script>

</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tFf77gyJ-1659024158687)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211014222618459.png)]$

操作DOM

<ul id="test-ul">
  <li class="js">JavaScript</li>
  <li name="python">Python</li>
</ul>


// 对节点文本进行操作
$('#test-ul li[name=python]').text();//获得值
$('#test-ul li[name=python]').text('设置值');//设置值
$('#test-ul').html();//获得值
$('#test-ul').html('<strong>123</strong>');//设置值

// 对css进行操作
$('#test-ul li[name=python]').css("color", "red");