当前位置： 首页 > news >正文

【JavaWeb】JavaScript

news 来源：原创 2024/5/3 5:04:07

💛 JavaScript的基本介绍💛
javascript语言的诞生主要是用于完成数据验证,因此它运行在客户端,需要运行浏览器来解析执行javascript代码.

特点:
(1).交互性(信息的动态交互)
(2).安全性(不允许直接访问本地硬盘)
(3).跨平台性(与平台无关)
js是弱类型
弱类型:可变
例如: var i = 12;
i = ‘aba’;
java是强类型
强类型:不可变
例如: int i = 12;

文章目录

  • 1.JavaScript与HTML的结合方式
    • 1.1.第一种方式
    • 1.2.第二种方式
  • 2.变量
  • 3.关系运算
  • 4.逻辑运算
  • 5.数组
  • 6.函数
    • 6.1.函数的第一种定义方式
    • 6.2.函数的第二种定义方式
    • 6.3.函数的arguments隐形参数(只在function函数内)
  • 7.JS中的自定义对象
    • 7.1.Object形式的自定义对象
    • 7.2.{}形式的自定义对象
  • 8.js中的事件
  • 9.DOM模型
  • 10.验证用户名是否有效

1.JavaScript与HTML的结合方式

1.1.第一种方式

⭐️在head标签和body标签中,使用script标签来写代码.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
        alert("hello javascript");
    </script>
</head>
<body>
</body>
</html>

1.2.第二种方式

⭐️使用script标签引入单独的javascript文件.

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

注意:
(1).使用script标签引入外部的js文件来执行,使用script标签定义js代码,但只能使用其中之一.
(2).src属性专门用于引入js文件路径(可以是绝对路径,也可以是相对路径).

2.变量

⭐️变量是可以存放某些值的内存的命名.

javascript的变量类型:
数值类型: number
字符串类型: string
对象类型: object
布尔类型: boolean
函数类型: function

javascript里特殊的值:
undefined: 未定义,所有js变量未赋初始值的时候,默认值都是undefined.
null: 空值.
NAN: 非数值.

js中变量定义的格式:
var 变量名;
var 变量名 = 值;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
        var i;
        alert(i);//undefined
        i = 12;
        alert(i);//12
        alert(typeof(i));//number
    </script>
</head>
<body>
</body>
</html>

注意:typeof()是javascript提供的一种函数,用于返回变量的数据类型.

3.关系运算

❤️等于: ==简单的字面值比较.
❤️全等于: ===除了字面比较外还有数据类型的比较.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
      var a = "12";
      var b = 12;
      alert(a == b)//true
      alert(a === b)//false
    </script>
</head>
<body>
</body>
</html>

4.逻辑运算

💙在javascript语言中,所有变量都可以当作一个布尔类型的变量去使用.
💙0,null,“”(空串),undefined都被认为是false.

且运算: &&
第一种情况: 当表达式全为真的时候,取最后一个表达式的值.
第二种情况: 当有一个表达式为假的时候,返回第一个为假的表达式的值.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
      var a = "abc";
      var b = true;
      var c = false;
      var d = null;
     alert(a && b);//true
     alert(b && a);//abc
     alert(a && c);//false
     alert(a && d);//null
    </script>
</head>
<body>
</body>
</html>

或运算: ||
第一种情况: 当表达式全为假的时候,取最后一个表达式的值.
第二种情况: 当有一个表达式为真的时候,返回第一个为真的表达式的值.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
      var a = "abc";
      var b = true;
      var c = false;
      var d = null;
     alert(d || c);//false
     alert(c || d);//null
     alert(a || c);//abc
     alert(a || b);//true
    </script>
</head>
<body>
</body>
</html>

5.数组

js中数组的定义:
第一种情况:var 数组名 = []; —空数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
     var arr = [];//空数组
     alert(arr.length);//0
     arr[0] = 12;
     alert(arr[0]);
     alert(arr.length);
     arr[2] = "abc";
     alert(arr.length);
     alert(arr[2]);
     alert(arr[1])//undefined
     for(var i = 0;i < arr.length;i++){
         alert(arr[i]);
     }
    </script>
</head>
<body>
</body>
</html>

第二种情况:var 数组名 = [1,‘abc’,true]; -----定义的同时赋值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
     var arr = [1,"abc",true];//空数组
     alert(arr.length);//3
     alert(arr[2]);//true
     alert(arr[9]);//undefined
     arr[0] = 12;
     alert(arr[0]);//12
     for(var i = 0;i < arr.length;i++){
         //alert(arr[i]);
     }
    </script>
</head>
<body>
</body>
</html>

注意:js中的数组,只要我们通过数组下标赋值,那么最大的下标值就会自动的给数组做扩容操作.

6.函数

6.1.函数的第一种定义方式

使用function关键字来定义函数.
格式:
function 函数名(形参列表){
函数体
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
        //无参
    function fun(){
        alert("123456");
    }
    fun();
       //有参
    function fun2(a,b){
        alert(a + b);
    }
    fun2(12,"abc");
    //有返回值
        function sum(num1,num2){
            var r = num1 + num2;
            return r;
        }
        alert(sum(100,50));
    </script>
</head>
<body>
</body>
</html>

6.2.函数的第二种定义方式

格式: var 函数名 = function(形参列表){
函数体
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
        //无参
        var fun = function(){
        alert("123456");
    }
    fun();
       //有参
   var fun2 = function(a,b){
        alert(a + b);
    }
    fun2(12,"abc");
    //有返回值
       var sum = function(num1,num2){
            var r = num1 + num2;
            return r;
        }
        alert(sum(100,50));
    </script>
</head>
<body>
</body>
</html>

注意:js中不允许重载,否则会覆盖上面的定义.

6.3.函数的arguments隐形参数(只在function函数内)

说明:
(1).就是在function函数中不需要定义,但却可以直接用来接收所有参数的变量,就是隐形参数.
(2).js中的隐形参数,操作类似数组.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
       function fun(a){
           alert(arguments.length);//2
           alert(arguments[0]);//1
           for(var i = 0;i < arguments.length;i++){
               alert(arguments[i]);
           }
       }
       fun(1,2);
      function sum(num1,num2){
          var r = 0;
          for(var i = 0;i < arguments.length;i++){
              if(typeof(arguments[i]) == "number") {
                  r += arguments[i];
              }
          }
          return r;
      }
      alert(sum(1,2,3,4,5,6));
    </script>
</head>
<body>
</body>
</html>

7.JS中的自定义对象

7.1.Object形式的自定义对象

对象的定义:var 变量名 = new Object();
定义一个属性:变量名.属性名 = 值;
定义一个函数:变量名.函数名 = function(){}
对象的访问:变量名.属性名/函数名().

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
      var obj = new Object();
      obj.name = "靓仔";
      obj.age = 18;
      obj.fun = function(){
          alert(this.name + this.age);
      }
      obj.fun();
    </script>
</head>
<body>
</body>
</html>

7.2.{}形式的自定义对象

对象的定义:var 变量名 = {};
属性和函数的定义: var 变量名 = {
属性名 : 值,
属性名 : 值,
函数名 : function(){}
};
对象的访问:变量名.属性名/函数名();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
        //对象的定义,属性的定义,函数的定义
    var obj = {
      name : "靓仔",
      age : 18,
      fun : function(){
          alert(this.name + this.age);
      }
    };
    //对象的访问
    alert(obj.name);
    obj.fun();
    </script>
</head>
<body>
</body>
</html>

8.js中的事件

(1).事件:电脑输入设备与页面进行交互的响应.
(2).事件的注册:静态事件注册和动态事件注册.
静态注册事件:通过html标签的事件属性直接赋予事件响应后的代码的这种方式.
动态注册事件:通过js代码得到标签的dom对象,然后通过dom对象.事件名 = function(){},这种形式赋予事件响应后的代码.
(3).常用的事件:
onload 加载完成事件:页面加载完成之后,常用于做页面js代码初始化操作.

静态注册:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
        function onloadfun(){
           alert("静态注册");
        }
    </script>
</head>
<body onload = "onloadfun();">
</body>
</html>

动态注册:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
        window.onload = function(){
            alert("动态注册");
        }
    </script>
</head>
<body >
</body>
</html>

onclick单击事件:常用于按钮的点击响应操作.

静态注册:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
        function onclickfun(){
            alert("静态注册");
        }
    </script>
</head>
<body>
<button onclick = "onclickfun();">按钮1</button>
<button> 按钮2 </button>
</body>
</html>

动态注册:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
       window.onclick = function (){
           var obj = document.getElementById("dh");
           obj.onclick = function(){
               alert("动态注册");
           }
       }
    </script>
</head>
<body>
<button onclick = "onclickfun();">按钮1</button>
<button id = "dh"> 按钮2 </button>
</body>
</html>

onblur失去焦点事件:常用于输入框失去焦点后验证其输入内容是否合法.

静态注册:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
      function onblurfun(){
          console.log("静态注册");
      }
    </script>
</head>
<body>
用户名:<input type="text" onblur="onblurfun();"><br/>
密码:<input type="text"><br/>
</body>
</html>

动态注册:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
      window.onload = function(){
          var obj = document.getElementById("password");
          obj.onblur = function(){
              console.log("动态注册");
          }
      }
    </script>
</head>
<body>
用户名:<input type="text" onblur="onblurfun();"><br/>
密码:<input type="text" id = "password"><br/>
</body>
</html>

注意:
(1)console是控制台对象,经常用来向浏览器的控制器打印输出.
(2)log()是打印的方法.

onchange内容发生改变事件:常用于下拉列表和输入框内容发生改变后操作.

静态注册:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
     function onchangefun(){
         alert("静态注册");
     }
    </script>
</head>
<body>
<select onchange = "onchangefun();">
    <option>--红红--</option>
    <option>黄黄</option>
    <option>兰兰</option>
</select>
</body>
</html>

动态注册:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
   window.onload = function(){
       var obj = document.getElementById("color");
       obj.onchange = function(){
           alert("动态注册");
       }
   }
    </script>
</head>
<body>
<select id = "color">
    <option>--红红--</option>
    <option>黄黄</option>
    <option>兰兰</option>
</select>
</body>
</html>

onsubmit表单提交事件:常用于表单提交前,验证所有表单项是否合法.

静态注册:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
           function onsubmitfun(){
               alert("不合法");
               return false;
           }
    </script>
</head>
<body>
      <form action="http://localhost:8080" method="get" onsubmit="return onsubmitfun();">
           <input type="submit" value="静态注册"/>
      </form>
</body>
</html>

动态注册:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
          window.onload = function(){
              var obj = document.getElementById("form01");
              obj.onsubmit = function(){
                  alert("不合法");
                  return false;
              }
          }
    </script>
</head>
<body>
      <form action = "http://localhost:8080" id="form01">
           <input type="submit" value="动态注册"/>
      </form>
</body>
</html>

9.DOM模型

DOM全称:文档对象模型
在这里插入图片描述
Document对象的理解:
第一点:它管理了所有的HTML文档内容.
第二点:是一种树结构的文档.
第三点:它让我们把所有的标签都对象化.
第四点:通过document可以访问所有的标签对象.
在这里插入图片描述
在这里插入图片描述

10.验证用户名是否有效

验证规则:必须有字母,数字,下划线组成,并且长度是5到12.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
         function onclickfun(){
             var obj = document.getElementById("un");
             var unt = obj.value;
             var patt = /^\w{5,12}$/;
             if(patt.test(unt)){
                 alert("用户名合法");
             }else{
                 alert("用户名不合法");
             }
         }
    </script>
</head>
<body>
       用户名:<input type="text" id="un" value="wz">
       <button onclick="onclickfun()">校验</button>
</body>
</html>

注意:test()方法用于测试某个字符串,是否符合规则,符合就返回true,不符合就返回false.

正则表达式对象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
           //表示字符串中,是否包含字母e
           var patt = new RegExp("e");
           var patt = /e/;
           //表示字符串中,是否包含字母a,b,c
           var patt = /[abc]/;
           //表示字符串中,是否包含小写字母
           var patt = /[a-z]/;
           //表示字符串中,是否包含大写字母
           var patt = /[A-Z]/;
           //表示字符串中,是否包含任意数字
           var patt = /[0-9]/;
           //表示字符串中,是否包含字母,数字,下划线
           var patt = /\w/;
           //表示字符串中,是否包含至少一个a
           var patt = /a+/;
           //表示字符串中,是否包含0个或多个a
           var patt = /a*/;
           //表示字符串中,是否包含1个或0个a
           var patt = /a?/;
           //表示字符串中,是否包含连续三个a
           var patt = /a{3}/;
           //表示字符串中,是否包含至少三个连续的a,至多五个连续的a
           var patt = /a{3,5}/;
           //表示字符串中,是否包含至少三个连续的a,至多n个连续的a
           var patt = /a{3,}/;
           //表示以a开头
           var patt = /^a/;
           //表示以a结尾
           var patt = /a$/;
           //从头到尾完全匹配
           var patt = /^a{3,5}$/;
           var patt = /\w{5,12}/;
           var str = "aaa";
           alert(patt.test(str));
    </script>
</head>
<body>
</body>
</html>

两种常见的验证提示效果:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
        function onclickfun(){
            var obj = document.getElementById("un");
            var unt = obj.value;
            var patt = /^\w{5,12}$/;
            var objs = document.getElementById("uns");
            if(patt.test(unt)){
            objs.innerHTML = "<img src=\"right.jpg\" width=\"18\" height=\"18\">";
            }else{
                objs.innerHTML = "<img src=\"wrong.png\" width=\"18\" height=\"18\">";
            }
        }
    </script>
</head>
<body>
用户名:<input type="text" id="un" value="wz"/>
<span style="color:#ff0000;" id="uns"></span>
<button onclick="onclickfun()">校验</button>
</body>
</html>

前面已经介绍了getElementById(),接下来我们还要学习以下两种方法:
(1).getElementByName()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
        function checkAll(){
            var obj = document.getElementsByName("hobby");
            for(var i = 0;i < obj.length;i++){
                obj[i].checked = true;
            }
        }
        function checkNo(){
            var obj = document.getElementsByName("hobby");
            for(var i = 0;i < obj.length;i++){
                obj[i].checked = false;
            }
        }
        function checkReverse(){
            var obj = document.getElementsByName("hobby");
            for(var i = 0;i < obj.length;i++){
                obj[i].checked = !obj[i].checked;
            }
        }
    </script>
</head>
<body>
兴趣爱好:
<input type="checkbox" name="hobby" value="cpp" checked="checked">c++
<input type="checkbox" name="hobby" value="cppp" checked="checked">java
<input type="checkbox" name="hobby" value="cp" checked="checked">python
<br/>
<button onclick="checkAll();">全选</button>
<button onclick="checkNo();">全不选</button>
<button onclick="checkReverse();">反选</button>
</body>
</html>

注意:
(1).document.getElementsByName(“hobby”);是根据指定的name属性返回多个标签对象集合.
(2).这个集合的操作和数组一样.
(3).集合中每个元素都是DOM对象.
(4).集合中的元素顺序是它们在html页面中从上到下的顺序.
(5).checked表示选中状态,如果选中就是true,否则就是false.
(6).checked这个属性可读可写.

(2).getElementByTagName()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
        function checkAll(){
            var obj = document.getElementsByTagName("input");
            for(var i = 0;i < obj.length;i++){
                obj[i].checked = true;
            }
        }
        function checkNo(){
            var obj = document.getElementsByTagName("input");
            for(var i = 0;i < obj.length;i++){
                obj[i].checked = false;
            }
        }
        function checkReverse(){
            var obj = document.getElementsByTagName("input");
            for(var i = 0;i < obj.length;i++){
                obj[i].checked = !obj[i].checked;
            }
        }
    </script>
</head>
<body>
兴趣爱好:
<input type="checkbox" value="cpp" checked="checked">c++
<input type="checkbox" value="cppp" checked="checked">java
<input type="checkbox" value="cp" checked="checked">python
<br/>
<button onclick="checkAll();">全选</button>
<button onclick="checkNo();">全不选</button>
<button onclick="checkReverse();">反选</button>
</body>
</html>

注意:getElementById(),getElementByTagName(),getElementByName(),一定要在页面加载完成之后执行,才能查询到标签对象.
所谓页面加载完成也就是,浏览器获得所有信息.
💜💜💜
我们再学习最后一个方法:createElement(tagname),通过给定的标签名,创建一个标签对象.
在写代码之前我们需要知道以下内容:
(1).节点就是标签对象.
(2).
getElementByTagName()
获取当前节点的指定标签名孩子节点.
appendChild(oChildNode)
可以添加一个子节点.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
       window.onload =function(){
           var obj = document.createElement("div");
           //obj.innerHTML = "我爱你";//标签的内容,但只在内存,不能显现出来.
           //也可以,像下面这句话一样.
           var tobj = document.createTextNode("我爱你");//创建文本节点对象.
           //然后添加到div标签内.
           obj.appendChild(tobj);
           //最后将div标签加到body标签内.
           document.body.appendChild(obj);
       }
    </script>
</head>
<body>
</body>
</html>

相关文章：

  • MySQL常见操作
  • [ C++ ] STL_list 使用及其模拟实现
  • 树状数组笔记
  • 【ffmpeg】SDL视频显示
  • 【JavaEE进阶系列 | 从小白到工程师】正则表达式的语法使用
  • LIO-SAM框架：点云匹配前戏之初值计算及局部地图构建
  • 机器学习实战（5）——支持向量机
  • 手撕前端面试题（Javascript~事件委托、数组去重、合法的URL、快速排序、js中哪些操作会造成内存泄漏......
  • lombok学习
  • Vue操作数组的几种常用方法(map、filter、forEach、find 和 findIndex 、some 和 every)
  • 【Docker】傻瓜式开发
  • ＜数据结构＞ - 数据结构在算法比赛中的应用（上）
  • python中的函数和类的区别
  • 【计算机网络】UDP/TCP协议
  • python并发编程 多线程/多进程/协程
  • android图片蒙层
  • co.js - 让异步代码同步化
  • const let
  • JS+CSS实现数字滚动
  • python 装饰器（一）
  • React中的“虫洞”——Context
  • Redis 中的布隆过滤器
  • select2 取值 遍历 设置默认值
  • Terraform入门 - 1. 安装Terraform
  • vuex 笔记整理
  • WordPress 获取当前文章下的所有附件/获取指定ID文章的附件(图片、文件、视频)...
  • 发布国内首个无服务器容器服务，运维效率从未如此高效
  • 更好理解的面向对象的Javascript 1 —— 动态类型和多态
  • 构建工具 - 收藏集 - 掘金
  • 模仿 Go Sort 排序接口实现的自定义排序
  • 那些年我们用过的显示性能指标
  • 前端每日实战 2018 年 7 月份项目汇总（共 29 个项目）
  • 如何实现 font-size 的响应式
  • 通过获取异步加载JS文件进度实现一个canvas环形loading图
  • 微信小程序设置上一页数据
  • 小程序 setData 学问多
  • ​Linux·i2c驱动架构​
  • # C++之functional库用法整理
  • #ifdef 的技巧用法
  • ( 10 )MySQL中的外键
  • （33）STM32——485实验笔记
  • （day 2）JavaScript学习笔记（基础之变量、常量和注释）
  • (MIT博士）林达华老师－概率模型与计算机视觉”
  • (Ruby)Ubuntu12.04安装Rails环境
  • （编译到47%失败）to be deleted
  • （超简单）构建高可用网络应用：使用Nginx进行负载均衡与健康检查
  • （二）学习JVM —— 垃圾回收机制
  • （分享）一个图片添加水印的小demo的页面，可自定义样式
  • （十六）Flask之蓝图
  • .Net MVC4 上传大文件，并保存表单
  • .NET/C# 将一个命令行参数字符串转换为命令行参数数组 args
  • .NetCore Flurl.Http 升级到4.0后 https 无法建立SSL连接
  • @Data注解的作用
  • @四年级家长，这条香港优才计划+华侨生联考捷径，一定要看！
  • [ Linux ] Linux信号概述 信号的产生