前端之JavaScript

最新推荐文章于 2024-05-03 11:47:20 发布

小赵睡不醒：

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量142

点赞数

分类专栏： javaweb 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_63932157/article/details/130092943

版权

javaweb 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaScript 特点：

1.JavaScript 是一种解释型脚本语言，C,C++等语言都是先编译后执行，而 JavaScript 是在程序的运行过程中逐行进行解释。

2.JavaScript 是一种基于对象的脚本语言，可以创建对象，也可以使用现有的对象。

3.JavaScript 是弱类型的，对变量的数据类型不严格要求，变量的数据类型在运行过程可以变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
 1.js代码可以写在 script 标签中
 2.type="text/javascript" 表示这个脚本(script)类型是 javascript
 3.type="text/javascript" 可以不写，但建议写上
 4.js语句后，可以不写分号;
 -->
  <script type="text/javascript">
      // //弱类型
      // var name ="韩顺平教育";
      // //输出 alert() 使用弹框方式
      // //输出 console.log() 在调试输出
      // alert("name="+name);
      // //输出变量的类型 typeof
      // alert(typeof name);
      //
      // name = 100;//给 name 重新赋值
      // alert("name="+name);
      // alert(typeof (name));//类型 number
      //浏览器会缓存,会影响到 name 的值
      //我们用 console.log 检验一下
      var age = 10;//数值
      console.log("age="+age);
      console.log(typeof age);
      age = "北京";//字符串
      console.log("age="+age);
      console.log(typeof age);
      // 类型是变化的  
  </script>
</head>
<body>
      
</body>
</html>

使用方式：

使用方式1.：

1.在 head里面用标签写 js 代码。
2.也可以放在 body 体内
3.执行的顺序是从上到下。建议放在 head

使用方式2：

使用 script 标签引入 js 文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript" src="./js/my.js"></script>
</head>
<body>

</body>
</html>

//在 js/my.js 文件下
alert("hi Acwing");

两种使用 js 的方式，不能混用。同时使用两个，只会生效一个。引入的文件会生效。在head 里面的不会生效。

查看 js 错误信息

1.执行js,chrome浏览器如何查看错误信息

进入调试器即可 Ctrl+shift+i

2.执行js ，ff浏览器如何查看错误信息。

进入调试器即可 Ctrl+shift+i

JavaScript 变量

1.javaScript 变量表示存储数据的容器

在这里插入图片描述

2.变量定义格式

var num = 100;
var name = "小赵睡不醒";
job = "小小码农";
alert("num="+num);
alert("job="+job);

JavaScript 数据类型

1.基本数据类型介绍：

1.数值类型：number

2.字符串类型：string

3.对象类型：object

4.布尔类型：boolean

5.函数类型：function

2.特殊值：

undefined 变量未赋初始值时，默认undefiend;

null 空值

NaN Not a Number 非数值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
1.typeof() 是 JavaScript 语言提供的一个函数
，返回变量的数据类型
2.三个特殊值
undefined 没有赋值使用
NaN 不能识别类型
-->
<script type="text/javascript">
  var email;//特殊值 undefined
  console.log("email="+email);

  var address = null;
  console.log("address="+address);//null
  console.log(10*"abc");//NaN
  
</script>
</body>
</html>

注意事项：

1.String 字符串[可以用单引号，也用双引号]

运算符

1.算术运算符

在这里插入图片描述

2.赋值运算符

y=5;

在这里插入图片描述

3.关系运算符

x=5;

在这里插入图片描述

注意事项

1.等于: == 是简单的字面值的比较

2.全等于： === 除了做字面值的比较之外，还会比较两个变量数据类型

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

<script type="text/javascript">
  var a = "100";
  var b =100;
  console.log(a==b);//true
  console.log(a===b);//false
  
</script>
</body>
</html>

4.逻辑运算符

在这里插入图片描述

4.1.注意事项和细节：

1.在 javaScript 语言中，所有的变量，都可以作为一个 boolean 类型去使用。

2.0，null,undefined,“”(空串) 都认为是 false

3.&& 且运算，有两种：返回值是遵守短路与的机制

当表达式全为真的时候，返回最后一个表达式的值
当表达式中，有一个为假的时候，返回第一个为假的表达式的值。

4.|| 或运算，有两种情况：返回值是遵守短路或的机制

当表达式全为假时，返回最后一个表达式的值
只要有一个表达式为真。就会返回一个为真的表达式的值

5.&& 运算和 || 运算有短路现象

短路现象：当这个 && || 运算有确定结果后，后面的表达式不在执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    //1.在 javaScript 语言中，所有的变量，都可以作为一个 boolean 类型去使用。
    //js 的语法是比较松散的。
    var name = "老韩";
    var age = 100;
    if(name){
      alert("hi");
    }
    if(!age){
      alert("hello");
    }
    //2. 0，null,undefined,""(空串) NaN 都认为是 false
    var address = "";
    if(address){//false
      alert("OK");
    }
    //3.&& 且运算，有两种：返回值是遵守短路与的机制
    var res1 = "Acwing" && 800;//true and true 返回第二个
    alert("res1= "+res1);//800

    //4.|| 或运算，有两种情况：返回值是遵守短路或的机制
    var res2 = "Acwing" || 600;//true or ture 返回第一个
    alert("res2= "+res2);//Acwing
    var res3 = null || 600;//false or true 返回第二个
    alert("res3= "+res3);//600

    var res4 = (10>1) && (6<0);
    alert(res4)//false
	
	var n1 = 1;
	var n2 = 3;
	var res5 = (n1++ >100)||(n2++);
	alert(n1+" "+n2)//2 4
    
  </script>
</head>
<body>

</body>
</html>

5.条件运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
//     条件表达式：
// 1.如果为真，返回第一个表达式的值，如果为假，返回第二个表达式的值
      //js 的使用比较灵活

      var res = (10>1)?"老韩":800;
      alert(res);//老韩

      var res2 = (10<1)?"ACwing":800+90;
      alert(res2)//890

  </script>
</head>
<body>

</body>
</html>

数组

1.数定义的四种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
      //"Audi" ，“BMW”,"Volovo"
      //定义数组的方式1
      var cars = ["Audi","BMW","Volovo"];
      console.log("cars= "+cars);
      console.log(cars[1]);//表示访问 cars1 数组的第2个元素

      //定义的第二种方式
      var cars2 = [];//空数组
      cars2[0] = "奥迪";
      cars2[1] = "宝马";
      cars2[2] = "奔驰";
      console.log("cars2 = "+cars2);
      //如果该元素不存在，返回 undefined
      console.log("cars2[10] ="+ cars2[10]);//undefined

      //定义的第三种方式
      var cars3= new Array("Audi","BMW","Volvo");
      console.log("cars3= "+cars3);

      //定义第四种方式
      var cars4 = new Array();//空数组
      console.log(typeof cars4);//object
      cars4[0] = "法拉利";
      cars4[1] = "保时捷";//可以给数组扩容
      cars4[0] = "红旗"//覆盖
      cars4[10] = "linux";//跳过一些下标，那么中间的元素值是 undefiend
      console.log("cars4= "+cars4);
      console.log("cars4[4]= "+cars4[4]);//undefined
      
  </script>
</head>
<body>

</body>
</html>

2.数组的遍历：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    var cars = ["Audi","BMW","VOlVO",100,1.1,true];
    //遍历
    console.log("数组的长度等于= "+cars.length);
    for(i=0;i<cars.length;i++){
        console.log(cars[i]);//log 方法会自动换行
    }
  </script>
</head>
<body>

</body>
</html>

函数

快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    //定义一个简单的函数
    //如果不去调用函数，该函数就不会执行
    //有两种方式执行函数 1.主动调用 2.通过一个事件触发
    function hi(){
        alert("hi,老韩");
    }
    //hi();
  </script>
</head>
<body>
<!--表示给 button 绑定了一个 onclick 事件
当用户点击了该 button ，就会触发函数
-->
<button onclick="hi()">点击这里</button>
</body>
</html>

函数定义方式1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
      //1.定义没有返回值的函数
      function f1(){
          alert("f1 被调用");
      }
      f1();

      //2.定义有形参的函数
      //这里的形参，不需要指定类型，name 的数据类型是由实参决定的
      function f2(name){
          alert(name+" 被调用");
      }
      f2("老韩");
      f2(800);

      //3.定义有形参和返回值的方法
      //不需要返回类型，返回类型由返回的数据决定
      function f3(n1,n2){
          return n1+n2;
      }
      alert("f3(10,20)= "+f3(10,20));

  </script>
</head>
<body>

</body>
</html>

函数定义方式2：

将函数赋值给变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
      //函数的第二种使用:把函数赋值给变量
      //理解为 f1 指向了这个函数
      var f1 = function (){
          alert("hi,world");
      }
      f1();//调用函数
      //让 f3 指向 f1
      var f3 = f1;
      f3();
      console.log(typeof f1);//function

      var f2 = function (name){
          alert("hi"+name);
      }
      f2("小明");
        //有返回值的函数
      var f4 = function(n1,n2){
          return n1+n2;
      }
      alert(f4(10,20));//30
  </script>
</head>
<body>

</body>
</html>

javaScript 函数注意事项和细节：

1.js 中函数的重载会覆盖掉上一次的定义。

2.函数的 arguments 隐形参数(作用域在 function 函数内)。

隐形参数：在 function 函数中不需要定义，可以直接获取所有参数的变量。
隐形参数特别像 java 的可变参数。
js 中的隐形函数跟java 的可变参数一样。操作类似数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
      //1.js 中函数的重载会覆盖掉上一次的定义。
      // var f1 = function(){
      //     alert("hi");
      // }
      // f1();//hi
      // var f1 = function(name){
      //     alert("world "+name);
      // }
      // f1();//world undefined
      // //当我们调用 f1() 时候，其实调用的是 f1(name)
      // //f1() 已经被覆盖了。
      // //调用 f1()时，如果没有定义，那儿 name = undefined

      //2.函数的 arguments 隐形参数(作用域在 function 函数内)。
      //2.1隐形参数：在 function 函数中不需要定义，可以直接获取所有参数的变量。
      //f2(arguments) 中的隐形参数类似一个数组
      function f2(){
          //遍历函数的隐形参数
          //如果我们希望通过 console.log() 输出对象的数据，使用,
          //而不是 + ,使用 + 会输出数组类型
          console.log("arguments= ",arguments);
          alert("f2().....");
      }
      f2(10,20,30,"Acwing");

      //3.如果我们的函数有形参，在传入实参的时候，仍然按照顺序匹配
      //如果没有匹配上，无所谓
      //最后，仍然会把实参全部付给 arguments
      //如果形参个数大于实参个数，那么没有匹配的形参为 undefined
      function f3(n){
          console.log("n="+n);
          console.log("arguments",arguments);
      }
      f3(100,90,30);

  </script>
</head>
<body>

</body>
</html>

课堂练习：

编写一个函数，用于计算所有参数相加的和并返回，如果实参不是 number ,就过滤掉。

使用 typeof() 判断参数类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
      function f1(){
      //通过 arguments 获取所有的值
          var num=0;//记得赋初始值，不然无法确定类型
          for(i = 0;i<arguments.length;i++){
              if(typeof(arguments[i])== "number"){
                  num += arguments[i];
              }
          }
          console.log("num= "+num);
      }
      f1(10,20,30,40,"Acwing",50);
  </script>
</head>
<body>

</body>
</html>

js自定义对象：

自定义对象方式1：object形式

1.对象的定义:

var 对象名 = new Object();//对象实例(空对象)

对象名.属性=值；//定义一个属性

对象名.函数名 = function(){};//定义一个函数

2.对象的访问：

对象名.属性

对象名.函数名();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
      //定义一个空对象，没有自定义的属性和函数
      var object= new Object();
      //增加一个属性
      object.name = "老韩";
      object.age = 20;
      //增加一个函数
      object.f1 = function (){
          console.log("object的信息= "+this.name+" "+this.age);
      }
      //调用属性
      //去调用一个没有定义的属性,该属性 为 undefined
      //如果没有定义属性，直接使用，就会出现变量提升，显示 undefined
      console.log(object.name+" "+object.age+" "+object.email);
        //调用方法
      object.f1();
      //使用一个没有定义的方法，会直接报错
      //object.f2(); 报错；

  </script>
</head>
<body>

</body>
</html>

自定义方式2：{}形式

1.对象的定义

var 对象名 = {

属性名：值，//定义属性

属性名：值，//定义属性，注意有逗号

函数名：function(){}//定义函数

};

2.对象访问：

对象名.属性

对象名。函数名();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
      var person = {
          //多个属性之间，,号连接
          name:"老韩",
          age:20,
          f1:function (){
              console.log("person的个人信息="+this.name+" "+this.age);
          },
          sum:function(n1,n2){
              return n1+n2;
          }
      }
      //访问方法
      person.f1();
      console.log("sum= "+person.sum(10,20));
      //外部访问属性
      console.log("name= "+person.name+" age= "+person.age);

  </script>
</head>
<body>

</body>
</html>

事件(event):

1.事件介绍:

HTML事件是发生在HTML元素上的"事情"。

当在HTML页面中使用JavaScript时,JavaScript能够"应对"这些事件。

2.事件分类

1.事件的注册(绑定)

事件注册(绑定):当事件响应(触发)后要浏览器执行哪些操作代码，叫事件注册活事件绑定。

2.静态注册事件

通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式叫静态注册

<body>
<button onclick="document"...></button>
</body>

3.动态注册事件(dom)：

通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){} 这种形式叫动态注册。

3.动态注册事件步骤

获取标签对象/dom 对象
dom对象.事件名 = function(){}

4.onload 加载完成事件

onload:某个页面或图像被完成加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
        // //定义一个函数
        // function sayOK(){
        //     alert("静态注册，onload 事件 sayOK")
        // }

        //这时我们使用的 window 的 dom 对象
        //在js中 把页面窗口映射的 dom 对像(window)
        //window对象有很多函数和属性可以使用
        //window.onload 表示页面被加载完毕
        //后面的 function(){} 表示加载完毕后，要执行的函数/代码
        window.onload = function (){
            alert("动态注册onload事件")

        }

		//我们添加一个弹出窗口
		alert("测试~~~");
		//这个弹出的窗口会在页面元素创建完毕之前执行
		//当我们的页面元素创建完毕后，执行onload 的方法

		
  </script>
</head>
<!--静态注册
<body onload="sayOK()">
-->

<body >
hello
<input type="text" value="测试"/>
<!--当我们的页面元素创建完毕后，才会调用 onload 绑定的方法-->

</body>
</html>

5.oneclick 单击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
      function sayOK(){
          alert("hello,world");
      }

  //    动态注册 onclick 事件
      //1.先拿到 id=btn01 的 button 对应的 dom对象
      //2.通过 dom 对象动态地绑定 onclick 事件
      //3.通过 document 的 getElementById 获得对应的 dom 对象
      //var btn01 = document.getElementById("btn01");
      //页面没有加载完毕的话，输出 btn01 只能获取一个空对象
      //如果我们写在 body 里面，就可以显示元素对象
      //alert(btn01);
      //所以我们当页面加载完毕后，再去进行动态绑定
      window.onload = function (){
          var btn01 = document.getElementById("btn01");
          //alert(btn01);
          btn01.onclick=function (){
              alert("hello,java");
          }
      }
  </script>
</head>
<body >
<!--动态注册 onclick 事件-->
<button onclick="sayOK()">sayOK按钮</button>
<button id="btn01"> sayHi按钮</button>
<!--<script type="text/javascript">-->
<!--    var btn01 = document.getElementById("btn01");-->
<!--    //这时 页面已经加载成功了，输出 btn01 会输出一个对象-->
<!--    alert(btn01);-->
<!--</script>-->
</body>
</html>

6.onblur 失去焦点事件

1.onblur:元素失去焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
      //静态绑定
      function upperCase(){
          //1.得到 frame 输入框的 dom 对象
          var fname = document.getElementById("fname");
          //2.先得到 fname输入框 的value
           fname.value = fname.value.toUpperCase();
      }
      //动态绑定
      window.onload = function(){
          var fname2 = document.getElementById("fname2");
          fname2.onblur = function (){
              fname2.value = fname2.value.toUpperCase();
          }
      }


  </script>
</head>
<!--静态注册方式-->
<body >
<input type="text" id="fname" onblur="upperCase()" ><br/>
<input type="text" id="fname2" >
</body>
</html>

7.onchange 内容发生改变的事件

1.onchange ：域的内容被改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
      function mySal(){
          alert("工资范围发生变化了");
      }
      function myfriend(){
          alert("女友发生了变化")
      }

      //动态注册
      window.onload = function (){
          var sel01 = document.getElementById("sel01");
          //给 sel01 绑定事件
          sel01.onchange = function (){
              alert("内容发生了改变");
          }

          var sel02 = document.getElementById("sel02");
          sel02.onchange = function (){
              alert("女友发生了变化");
          }
      }

  </script>
</head>
<!--静态注册方式-->
<body >
<!--静态注册-->
<!--你当前工资的水平:-->
<!--<select id="sel01" onchange="mySal()">-->
<!--    <option>&#45;&#45;工资范围&#45;&#45;</option>-->
<!--    <option>10K以下</option>-->
<!--    <option>10k-30k</option>-->
<!--    <option>30K以上</option>-->
<!--</select><br/>-->
<!--你当前的女友是谁:-->
<!--<select id="sel02" onchange="myfriend()">-->
<!--    <option>&#45;&#45;女友选择&#45;&#45;</option>-->
<!--    <option>石原里美</option>-->
<!--    <option>新垣结衣</option>-->
<!--    <option>长泽雅美</option>-->
<!--</select><br/>-->
你当前工资的水平:
<select id="sel01" >
    <option>--工资范围--</option>
    <option>10K以下</option>
    <option>10k-30k</option>
    <option>30K以上</option>
</select><br/>
你当前的女友是谁:
<select id="sel02" >
    <option>--女友选择--</option>
    <option>石原里美</option>
    <option>新垣结衣</option>
    <option>长泽雅美</option>
</select><br/>

</body>
</html>

8.onsubmit 表单提交事件

1.onsubmit:注册按钮被点击，提交表单(需求：如果用户名或密码为空，不能提交表单)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
        //静态注册表单提交事件
        function register(){
            //得到输入的用户名和密码
            var username = document.getElementById("username");
            var pwd = document.getElementById("pwd");
            //判断是否为空
            if(""== username.value || ""==pwd.value){
                alert("用户名和密码不能为空，不能提交");
                //表示不提交
                return false;
            }
            //表示提交
            return true;
        }
        //代码出现 bug ，使用折半法
        //或者观察页面是否最新的，是不是修改的页面和访问的页面一致
        window.onload = function (){
            //得到 f02 表单对象
            var f02 = document.getElementById("f02");

            //绑定提交事件
            // onsubmit 绑定的元素，会直接将结果 true /false 返回给 onsubmit
            f02.onsubmit = function (){
                //判断是否为空
                if(f02.username.value == ""  || f02.password.value == ""){
                    alert("用户名和密码不能为空，不能提交");
                    //表示不提交
                    return false;
                }
            }
        }
  </script>
</head>
<body>
<!--静态注册表单提交事件-->
<h1>注册用户1</h1>
<!--register 返回的结果 ，通过 return 返回给 onsubmit 让它做出反应-->
<form action="OK.html" onsubmit="return register()">
    u:<input type="text" id="username" name="username"/><br/>
    p:<input type="password" id="pwd" name="pwd"/><br/>
    <input type="submit" value="注册用户"/>
</form>
<!--动态注册表单提交事件-->
<h1>注册用户2</h1>
<form action="OK.html"  id="f02">
    u:<input type="text"  name="username"/><br/>
    p:<input type="password"  name="pwd"/><br/>
    <input type="submit" value="注册用户"/>
</form>
</body>
</html>

9.其他事件，基本原理都一样

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

      window.onload = function(){
          //1.得到 form 的 dom 对象
          var form = document.getElementById("form");

          //绑定提交事件
          form.onsubmit = function(){
              var username = form.username;
              var pwd = form.pwd;
              var confirmpwd = form.confirmpwd;
              var email = form.email;
              //过关斩将法,把正确的情况取反
              if(username.value == "" || pwd.value == ""){
                  alert("用户名和密码不能为空");
                  return false;
              }
              if(!(username.value.length >=4 && username.value.length<=6)){
                  alert("用户名格式不对");
                  return false;
              }
              //处理密码合理
              if(pwd.value.length != 6){
                  alert("密码格式不对");
                  return false;
              }
              //判断两次密码是否相等
              if(pwd.value != confirmpwd.value){
                  alert("确认密码错误");
                  return false;
              }
              //使用正则表达式验证电子邮件
              //1.在java中 转义符 \\ 在js 中使用正则表达式 \
              //2.emailPatten.test("xxx") ，验证 xxx 是不是满足 emailPatten 规则
              var emailPattern = /^[\w-]+@([a-zA-Z]+\.)+[a-zA-Z]+$/;
              if(!emailPattern.test(email.value)){
                  alert("电子邮件个格式不正确");
                  return false;
              }
          }
      }

  </script>
</head>
<body>
<h1>注册用户</h1>
<form id="form">
    用户名:<input type="text" name="username">长度(4-6) <br/>
    密 码:<input type="password" name="pwd">长度(6) <br/>
    确 认:<input type="password" name="confirmpwd">长度(6) <br/>
    电 邮:<input type="email" name="email">满足基本格式<br/>
    <input type="submit" value="注册用户">

</form>

</body>
</html>