JavaScript

代码心航者

于 2024-08-18 00:45:18 发布

阅读量408

点赞数 20

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_75004322/article/details/141289537

版权

一.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 引擎执行执行代码时逐行解释每一行源 组成部分

作用

ECMA

Script

构成了 JavaScript 核心的语法基础

BOM

Browser Object Model 浏览器对象模型，用来操

作浏览器上的对象

DOM

Document Object Model 文档对象模型，用来操

作网页中的元素（标签）

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

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

弱类型

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

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

型。

1.4 JavaScript的组成二.JavaScript引入方式

二.内外脚本

2.1 内部脚本

将 JS 代码定义在 HTML 页面中， JavaScript 代码必须位于标签之

间。

在 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>
  <script>
       alert("出现一个弹框!!!")
  </script>
</body>
</html>
<!DOCTYPE html>

三.JavaScript基础语法

3.1 JavaScript的书写语法

区分大小写

每行结尾的分号可有可无

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

3.2 JavaScript的三种输出方式

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

输出数据到页面： document.write("hello JS ~");

输出到浏览器控制台： console.log("hello JS ~");

<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("出现一个弹框!!!")
  </script>
  <script src="js/demo01.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">

3.3 JavaScript定义变量

JavaScript 中用 var 关键字（ variable 的缩写）来声明变量

JavaScript 是一门弱类型语言，变量可以存放不同类型的值

ES 6 新增了 let 关键字来定义变量。它的用法类似于 var ，但是

所声明的变量，只在 let 关键字所在的代码块内有效，且不允许

重复声明

ES6 新增了 const 关键字，用来声明一个只读的常量。一旦声

明，常量的值就不能改变。

<meta name="viewport" content="width=device
width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
  <script>
       //1.弹出框
       alert("出现一个弹框!!!")
       //2.输出数据到页面
       document.write("输出数据到页面")
       //3.输出到浏览器控制台
       console.log("输出数据到浏览器控制台")
  </script>
</body>
</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>

3.4 JavaScript数据类型

原始类型

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

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

boolean ：布尔。 true ， false

null ：对象为空

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

undefined

<body>
  <script>
       //ES6前使用var定义
       var i=10;
       console.log(i);
       
       var n="hello";
       console.log(n);
       
       //ES6定义变量使用let
       let x=1.1;
       console.log(x);
       let y="world";
       console.log(y);
       //ES6定义常量使用
       const PI=3.14;
       // PI=3.1415; //报错，因为PI是常量，不能改变
       console.log(PI);
  </script>
</body>

</html> 引用类型

就是对象。 Object Date 等

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

<!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>
       //number (整数 小数 NaN)
       let v01=10;
       console.log(v01);
       console.log(typeof v01);
       let v02=1-"a";
       console.log(v02);
       console.log(typeof v02);
       //string 字符类型
       let v03="hello";
       console.log(v03);
       console.log(typeof v03);
       //布尔类型 true false
       let v04=true;
       console.log(v04);
       console.log(typeof v04);
       //null:空对象类型
       let v05=null;

3.5 JavaScript运算符

一元运算符： ++ ， --

算术运算符： + ， - ， * ， / ， %

赋值运算符： = ， += ， -=…

关系运算符： > ， < ， >= ， <= ， != ， == ， === …

逻辑运算符： && ， || ， !

三元运算符：条件表达式 ? 值 1 : 值 2 ；

  console.log(v05);
       console.log(typeof v05);
       //undefined:未定义类型
       let v06;
       console.log(v06);
       console.log(typeof v06);
       //引用数据类型 Object Date等
       let date = new Date();//获取当前系统时间
       console.log(date);
  </script>
</body>
</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>       /*

== 和 === 区别

==: 非严格比较 , 会进行类型转换 ,

如果两端的数据类型不一致 , 会尝试将两端的数据转

换成 number, 再对比 number 大小

===: 严格比较 , 不会进行类型转换 ,

如果两端数据类型不一致 , 直接返回 false, 数据类

型一致在比较是否相同

   let i=10;
      let j='10';
      console.log(i==j);//true
      console.log(i===j);//false

逻辑运算符 : && || !

1.&& 短路与 : 遇 false 则 false false && true

2.|| 短路或 : 遇 true 则 true true || false

3. 在 JS 中有六种 false

false 0 空字符串 "" NaN null

undefined

在 JS中逻辑运算符可以针对任意类型进行运算

  */
      if(0 && true){
           console.log("真的");
           
      }else{
           console.log("假的");
      }
     
      if("" && true){
           console.log("真的");
           
      }else{

3.6 JavaScript全局函数

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

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

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

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

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

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

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

null: 转为 false

undefined ：转为 false

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

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

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

略不写。

       console.log("假的");
      }
  </script>
</body>
</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>

3.7 JavaScript流程控制语句

if
switch
for
while
do…while
  <script>
       //其他类型转换为数字
       console.log(parseInt("100hello"));//100
       console.log(parseInt("3.14"));//3
       console.log(parseInt("a100"));//NaN
       //将布尔类型转换为整数
       console.log(Number(true));//1
       console.log(Number(false));//0
       //其他类型转换为布尔类型
       console.log(Boolean(0));//false
       console.log(Boolean("hello"));//true
  </script>
</body>
</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>

3.8 JavaScript函数(重点)

3.8.1 方式一

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

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

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

返回即

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

 <script>
       for(let i=1;i<=9;i++){
           for(let j=1;j<=i;j++){
             
document.write(i+"*"+j+"="+i*j+"   &
nbsp; ")
          }
           document.write("<hr/>");
      }
  </script>
</body>
</html>
function functionName(参数1,参数2..){
要执行的代码
}
function add(n, m){
return n + m;
}
let result = add(2,3);
<!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>
       /*
          function functionName(参数1,参数2..){
          要执行的代码
          }
          调用函数:函数名(实参,....); 函数必须被调用才能
执行
      */
     
      function fn01(){
           console.log("fn01....");
      }
      fn01();
      function fn02(n,m){
           console.log(n+"......"+m);
           return n+m;
      }
      let sum=fn02(2,3);
      console.log(sum);
  </script>
</body>
</html>

3.8.2 方式二

定义格式

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

var functionName = function ( 参数列表 ){

要执行的代码

}
var add = function (a,b) {
return a + b;
}
let result = add(1,2,3);
<!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>
       /*
          匿名函数:没有名字的函数
          格式:
          let 函数名=function(参数列表){
              函数体
          }
      */
       //将匿名函数赋值给一个变量
       let add=function(n,m){
           console.log(n+"..."+m);

3.8.3 注意事项

匿名函数还可以作为另一个函数的参数传递

在 JavaScript 中没有函数重载概念，如果存在函数名一样的函

数，后出现的函数就会覆盖之前的函数名

在 JavaScript 中调用无参函数可以传递实参；调用有参函数可以

不传递实参 . 数据没有丢失会放到 js 的一个内置数组对象中

arguments
           return n+m;
      }
       //调用函数
       let sum=add(2,3);
       console.log(sum);
   
  </script>
</body>
</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>
       //匿名函数还可以作为另一个函数的参数传递
       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]);
          }

三.JavaScript对象

3.1 数组对象Array

3.1.1 定义格式一

    }
       fn03(2,3);
  </script>
</body>
</html>
le't arr=new Array(元素1,元素2...);
var myCars=new Array("Saab","Volvo","BMW");
<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页
面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以
书写中文 -->
<html lang="en">
<head>
   <!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不
书写就会乱码 -->
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible"
content="IE=edge">
   <meta name="viewport" content="width=device
width, initial-scale=1.0">
   <!-- 标题标签 -->
   <title>Title</title>
</head><body>
<script type="text/javascript">
   /*
    创建数组对象方式一：采用Array方式
    */
   let arr = new Array(1,2,1.2,"哈哈");
   //遍历数组
   //使用增强for
   // for(let x of arr){//x表示数组的数据
   //     console.log(x);
   // }
   //1.采用方式一即上述方式定义数组注意：如果只给一个number
类型的值，那么此时数值表示数组长度，数组中的数据都是empty
   let arr1=new Array(10);
   // console.log(arr1.length);//10  

   //2.采用方式一即上述方式定义数组注意：如果只给一个number
类型的值，那么此时数值表示数组长度，要求不能给小数，数组长度不
能是小数
   // let arr2=new Array(3.14);
   // console.log(arr2.length);

   //3.采用方式一即上述方式定义数组注意：如果只给一个非
number类型的值， 那么此时数值表示数组的元素
   let arr3=new Array("华哥");
   // console.log(arr3.length);//长度是1   数据是 ['锁
哥']
   //4.js中的数组长度是可变的
   let arr4=new Array(10,20,1.2,"柳岩");//数组长度是4
   //给索引是7的位置添加数据
   arr4[7]="牛";//7表示索引   数据： [10, 20, 1.2, '柳
岩', empty × 3, '牛'] 长度变为8
3.1.2 定义格式二
   let arr5=new Array(10,20,1.2,"柳岩");//数组长度是4
   //更改长度
   arr5.length=2;//[10, 20]
</script>
</body>
</html>
var arr=[元素1,元素2...];
var myCars=["Saab","Volvo","BMW"];
<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页
面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以
书写中文 -->
<html lang="en">
<head>
   <!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不
书写就会乱码 -->
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible"
content="IE=edge">
   <meta name="viewport" content="width=device
width, initial-scale=1.0">
   <!-- 标题标签 -->
   <title>Title</title>
</head>
<body>
<script type="text/javascript">

3.1.3 常见属性和函数

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

 /*
    创建数组对象方式二：采用中括号方式
    */
   let arr1=[10,1.2,"呵呵"];
   //定义数组
   let arr2=[10]; //10表示数组元素，长度是1
</script>
</body>
</html>
<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页
面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以
书写中文 -->
<html lang="en">
<head>
   <!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不
书写就会乱码 -->
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible"
content="IE=edge">
   <meta name="viewport" content="width=device
width, initial-scale=1.0">
   <!-- 标题标签 -->
   <title>Title</title>
</head>
<body>
<script type="text/javascript">
   /*

3.2 正则对象RegExp

直接量：注意不要加引号

创建 RegExp 对象

方法

   数组Array对象中的函数
    */
   let arr = [10, 1.2, '哈哈'];
   //push() 向数组的末尾添加一个或更多元素，并返回新的长
度。
   console.log(arr.push(true,100,10));//6  
   /*
      2.splice(index,n) 从数组中删除元素。
          index表示从哪个索引删除
          n表示删除数据的个数
    */
    let arr1 = [10, 1.2, '哈哈'];
    //需求:删除数据1.2 哈哈
    arr1.splice(1,2);
   //第一个参数1表示arr1数组的索引，从1索引开始删除 第二个
参数2表示删除2个数据
   
</script>
</body>
</html>

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

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}$

需求：使用正则表达式验证指定的字符串是否满足长度是 6.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible"
content="IE=edge">
   <meta name="viewport" content="width=device
width, initial-scale=1.0">
   <title>Document</title>

3.3 String对象

定义

</head>
<body>
   <script>
      /*
          test(被验证的字符串) 如果被验证的字符串满足正则
对象中的表达式
          则test函数返回true，否则返回false
          需求：验证指定字符串长度是否是6
      */
      //1.创建正则对象
      //let reg=new RegExp("^.{6}$");
      let reg=/^.{6}$/;
      //2.使用正则的对下调用验证的函数test
      let b=reg.test("abcdefg");
      //3.判断
      if(b){
           console.log("通过校验");
      }else{
           console.log("校验失败");
      }
   </script>
</body>
</html>
let 变量名 = new String(s); //方式一
let str = new String("hello");
let 变量名 = s; //方式二
let str = "hello" ;
let str = 'hello';属性
length   字符串的长度
方法
charAt() 返回在指定位置的字符
indexOf() 检索字符串
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible"
content="IE=edge">
   <meta name="viewport" content="width=device
width, initial-scale=1.0">
   <title>Document</title>
   
</head>
<body>
   <script>
   /*
    String字符串对象
    */
   //1.创建对象 了解
   let s = new String("abc");
   console.log(s);
   console.log(s.toString());//"abc"
   //2.创建对象 掌握
   let s1="abc";
   console.log(s1);//"abc"
   //3.创建对象 掌握
   let s2='abc';

3.4 自定义对象(重要)

格式

实例

 console.log(s2);//"abc"
   //4.常见属性：length 表示求字符串的字符个数或者字符串长
度
   console.log(s2.length);//3
   //5.常见函数
   //5.1charAt() 返回在指定位置的字符。 参数表示索引，索
引从0开始
   //创建对象
   let s3="helloworld";
   console.log(s3.charAt(5));
   //5.2.indexOf() 检索字符串。
   //查找字符串在指定字符串中存在的索引，如果不存在返回-1
   console.log(s3.indexOf("wor"));//5
   </script>
</body>
</html>

let 对象名称 = {

属性名称 1: 属性值 1,

属性名称 2: 属性值 2,

...

函数名称 :function ( 形参列表 ){}

  ...
  };let person = {
name:"zhangsan",
  age:23,
  eat:function (){
  alert("干饭~");
  }
};
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible"
content="IE=edge">
   <meta name="viewport" content="width=device
width, initial-scale=1.0">
   <title>Document</title>
   
</head>
<body>
   <script>
       let person ={
           //属性名:属性值
           name:"柳岩",
           address:"湖南",
           age:18,
           //定义函数 函数名:function(形参列表){}
           eat:function(){
           //TODO:如果在自定义对象中使用当前自定义对象中的
其他属性或者函数那么格式：this.属性名或者this.函数名(实参);
           console.log("干饭人，干饭
魂..."+this.address);//this表示当前对象即person
           console.log("干饭人，干饭
魂..."+person.address);//this表示当前对象即person
          }
      };   
       //获取name和age的值并输出控制台
       console.log(person.name);//柳岩 获取属性值：对
象名.属性名
       console.log(person.age);//18
       //调用函数 对象名.函数名(实参);
       person.eat();
   </script>
</body>
</html>