JavaWeb之JavaScript基础

最新推荐文章于 2022-07-11 15:39:31 发布

等待的疲倦

最新推荐文章于 2022-07-11 15:39:31 发布

阅读量282

点赞数

分类专栏： JavaWeb 文章标签： javascript java js html

本文链接：https://blog.csdn.net/qq_38596491/article/details/107053001

版权

JavaWeb 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Java后端程序员有必要学习JavaScript！

一、介绍

JavaScript语言只要是为了完成页面的数据验证，因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。
——JS是弱类型，Java是强类型。
（弱类型就是类型可变；强类型就是定义变量的时候，类型已确定，而且不可变）
eg:var i; i =12; i = “abc”

特点

①交互性（可以做的就是信息的动态交互）
②安全性（不允许直接访问本地硬盘）
③跨平台性（只要是可以解释JS的浏览器都可以执行，和平台无关——通过浏览器实现，跟OS无关）

二、JS与HTML结合

（1）第一种方式
只需在head标签中，或者body标签中，使用script标签来书写JavaScript代码。

（2）第二种方式
通过在标签内使用src来引入js文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--方式一：使用script标签来书写JavaScript代码-->
    <script type="text/javascript">
    alert("hello！");
    </script>
    
    <!--方式二：使用script标签导入外部js文件来执行:src属性专门用来引入路径。
    script标签可以用来定义js代码，也可以用来引入js文件，
    但是，两个功能二选一使用，不能在同一标签内同时使用两个功能。
    -->
    <script type="text/javascript" src="1.js"></script>
</head>
<body>

</body>
</html>

在模块下另外再创建一个JS文件，用于src引入：

alert("hello too!")

三、JavaScript基本知识

（1）数据类型

数值类型：number
字符串类型：string
对象类型：object
布尔类型：boolean
函数类型：function
JS里特殊的值：
–undefined 未定义，所以JS变量未赋初始值时，默认值都是undefined
–null 空值
–NAN 全称是：Not a Number。非数字，非数值

验证数据类型：
① number

<script type="text/javascript">
        var i;
        i = 12;
        alert(typeof(i));//typeof函数可以取变量的数据类型返回
</script>

在这里插入图片描述
② NaN

    <script type="text/javascript">
        var i = 12;
        var j = "abc";
        alert(i * j);//NaN是非数字，非数值
    </script>

在这里插入图片描述
——此类结果虽在语法上允许，但是结果为NaN

（2）JS关系（比较）运算

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

【验证】：

    <script type="text/javascript">
        var a = 12;
        var b = "12";
        alert(a == b)
    </script>

——true：仅做字面值的比较

    <script type="text/javascript">
        var a = 12;
        var b = "12";
        alert(a === b)
    </script>

——false：还会比较变量数据类型

（3）JS逻辑运算&&，||，

0，null，undefined 和""空字符串，均为false，其他均为真
&&运算：当表达式全为真时，返回最后一个表达式的值；当有一个为假时，返回第一个为假的表达式的值；
||运算：当表达式全为假时，返回最后一个表达式的值；当只要有一个表达式为真，返回第一个为真的表达式的值。

（4）数组
var arr = [];空数组
var arr = [1,“abc”,];

<script type="text/javascript">
        var arr = [];
        arr[0] = 12;
        arr[2]="adf";
        for(var i=0;i<arr.length;i++){
            alert(arr[i]);
        }
</script>

（4）函数

① 第一种定义方式
function关键字：
function 函数名(形参列表){
}

    <script type="text/javascript">
        function sum(a,b) {
            var res = a + b;
            return res;
        }
        alert(sum(12,8))
    </script>

② 第二种定义方式

    <script type="text/javascript">
        <!--函数的第一种定义方式-->
        function sum(a,b) {
            var res = a + b;
            return res;
        }
        alert(sum(12,8))

        <!--函数的第二中定义方式 -->
        var sum = function (n,m) {
            res = n + m;
            return res;
        }
        alert(sum(12,9));
    </script>

（5）JS不允许函数方法的重载

    <script type="text/javascript">
        function fun() {
            alert("无参函数。")
        }
        function fun(a,b) {
            alert("有参函数。")
        }
        fun();
    </script>

在这里插入图片描述
——即便传参不对，也会显示最后出现的一个方法，会将原方法覆盖掉，不会因为传参不同而重载。

（6）隐形参数arguments

——在function函数中不需要定义，但却可以直接用来获取所有参数的变量。
类似于Java可变长参数：public void fun(Object … args);

    <script type="text/javascript">
        function fun() {
            alert(arguments[0]);
            alert(arguments[1]);
            alert(arguments[2]);
        }
        fun(1,'a',"fg");
    </script>

——弹出警告框，依次显示：1,a,fg

【使用案例】编写一个函数用于计算所以参数相加的和，并返回

    <script type="text/javascript">
        <!--使用案例:编写一个函数用于计算所以参数相加的和,并返回 -->
        function fun() {
            var sum = 0;
            for(var i=0;i<arguments.length;i++){
                sum = sum + arguments[i];
            }
            alert(sum);
        }
        fun(1,2,4,5);
    </script>

在这里插入图片描述

（7）JS中的自定义对象

① Object形式的自定义对象
var 变量名 = newObject();
变量名.属性名 = 值；
变量名.函数名 = function();

对象的访问：
变量名。属性/函数名()；

    <script type="text/javascript">
        var obj = new Object();
        obj.name = "二狗子";
        obj.age = 18;
        obj.fun = function () {
            alert("姓名："+this.name+"，年龄："+this.age);
        }
        obj.fun();
    </script>

在这里插入图片描述

（8）花括号形式的自定义对象

    <script type="text/javascript">
        var obj = {
            name:"二狗子",
            age:18,
            fun:function () {
                alert("姓名："+this.name+",年龄："+this.age)
            }
        };
        obj.fun();
    </script>

在这里插入图片描述

四、JS的事件

——输入设备与页面进行交互的响应，称之为事件。

（1）常用事件

onload：页面加载完成事件——常用于做页面JS代码初始化操作
onclick：单击事件
onblur：失去焦点事件——常用于输入框失去焦点后，验证其输入内容是否合法
onchange：内容发生改变事件——下拉列表和输入框发生改变后操作
onsubmit：表单提交事件——常用于表单提交前，验证所有表单项是否合法

（2）事件的注册（绑定）

——就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册（或绑定）
① 静态注册
——通过HTML标签的事件属性直接赋予事件响应后的代码，这种方式我们叫做静态注册。
② 动态注册
——先通过js代码得到标签的dom对象，然后再通过dom对象.事件名 = function()这种形式，赋予事件响应后的代码，叫动态注册。

动态注册事件基本步骤：
1、获取标签对象；
2、标签对象.事件名 = function(){ }

（3）onload事件（加载完成事件）

① 静态注册onload事件：
——onload是浏览器解析完页面之后就会自动触发的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onloadFun() {
            alert("静态注册onload事件");
            alert(12);
        }
    </script>
</head>
<!--静态注册onload事件：是浏览器解析完页面之后就会自动触发的事件 -->
<body onload="onloadFun();">

</body>
</html>

② 动态注册onload事件：

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

</body>
</html>

（4）onclick事件（单击事件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //1、静态注册onclick事件
        function onclickFun1() {
            alert("静态注册onclick事件");
        }
        //2、动态注册onclick事件
        window.onload = function(){
            /*
            *document是JavaScript语言提供的一个对象（文档）
            * getElementById():根据id获取元素
             */
            var btnObj =  document.getElementById("btn01");
            btnObj.onclick = function () {
                alert("动态注册onclick事件");
            }
        }
    </script>
</head>
<body>
<!--1、静态注册onclick事件-->
<button onclick="onclickFun1();">按钮1</button>
<!--2、动态注册onclick事件-->
<button id="btn01">按钮2</button>
</body>
</html>

（5）onblur事件（失去焦点事件）

——用于输入框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
    	//1、静态失去焦点事件
        function onblurFun() {
            //console是控制台对象，是由JS语言提供，专门用于向浏览器的控制台的控制器打印输出，用于测试使用
            //log()是打印的方法
            console.log("静态注册失去焦点事件");
        }
        //2、动态失去焦点事件
        window.onload = function () {
            var passwordObj =  document.getElementById("password");
            passwordObj.onblur = function () {
                console.log("动态注册失去焦点事件");
            }
        }
    </script>
</head>
<body>
	<!--1、静态失去焦点事件-->
    用户名：<input type="text" onblur="onblurFun();"><br/>
    <!--1、动态失去焦点事件-->
    密码：<input type="password" id="password"><br/>
</body>
</html>

① 静态注册失去焦点事件

在这里插入图片描述
当鼠标从点击用户名文本框到离开该文本框，控制台对象就会打印一次：“静态注册失去焦点事件”。
② 动态失去焦点事件

在这里插入图片描述

（6）onchange事件（内容发生改变）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //1、静态注册onchange事件
        function onchangeFun() {
            alert("老婆换了");
        }
        //2、动态注册onchange事件
        window.onload = function () {
            var selObj =  document.getElementById("sel01");
            selObj.onchange = function () {
                alert("老公换了");
            }
        }
    </script>
</head>
<body>
    你未来的老婆：
    <!--静态注册onchange事件-->
    <select onchange="onchangeFun();">
        <option>--选择你想要的老婆--</option>
        <option>林志玲</option>
        <option>范冰冰</option>
        <option>刘亦菲</option>
        <option>热巴</option>
    </select>

    你未来的老公：
    <!--动态注册onchange事件-->
    <select id="sel01">
        <option>--选择你想要的老公--</option>
        <option>鹿晗</option>
        <option>蔡徐坤</option>
        <option>郭德纲</option>
        <option>吴彦祖</option>
    </select>
</body>
</html>

在这里插入图片描述

（7）onsubmit事件（表单提交事件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onsubmitFun() {
            //验证所有表单项是否合法，如果有一个不合法，就阻止表单提交
            alert("静态注册表单提交事件，发现不合法");
            return false;//此处改为true即可提交表单
        }
        window.onload = function () {
            var formObj = document.getElementById("form01");
            formObj.onsubmit = function () {
                alert("动态注册表单提交事件");
                return true;//此处改为true即可提交表单，false不提交
            }
        }
    </script>
</head>
<body>
    <!--onsubmit()方法如果返回false，则onsubmit提交的为false，可以阻止提交表单 -->
    <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
        <input type="submit" value="静态注册"/>
    </form>
    <!--态注册表单提交事件-->
    <form action="http://localhost:8080" id = "form01">
        <input type="submit" value="动态注册"/>
    </form>
</body>
</html>

【案例】验证用户名是否有效

DOM全称Document Object Model文档对象模型

document的dom对象，是用来记录标签信息的对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*当用户点击校验按钮，要获取输出框中的内容，然后验证其是否合法
        *需要验证的规则：必须由字母、数字、下划线组成，并且长度是5-12位
         */
        function onclickFun() {
            //当要操作一个标签的时候，一定要先获取这个标签对象
            var usernameObj =  document.getElementById("username");
            var usernameText = usernameObj.value;
            //使用正则表达式来验证字符串是否符合某个规则
            var patt = /\w{5,12}/;//由字母、数字、下划线组成，并且长度是5-12位
            /*
            *test()方法用于测试某个字符串，是不是匹配上了规则，匹配就返回true，否则false
             */
            if(patt.test(usernameText)){
                alert("用户名合法");
            }else{
                alert("用户名不合法");
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username" value="输入用户名"/>
    <button onclick="onclickFun()">校验</button>
</body>
</html>

在这里插入图片描述

五、正则表达式对象

/[a-z]/;
/[abc]/;
/\w/;——\w表示单字字符匹配，包括：字母、数字、下划线
\W——非单字字符匹配
/a+/——至少一个a的字符串

<script type="text/javascript">
        var patt = /a+/;
        var str = "Abda123";
        alert(patt.test(str));
</script>

n*——表示匹配任何包含0个或多个n的字符串
/a?/——表示匹配包含0个或1个a字符串
/a{3,5}/——表示匹配包含3到5个a的字符串
/a$/——表示匹配以a结尾的字符串
/^a/——表示匹配以a开头的字符串
/^a{3,5}$/——表示匹配只包含3-5个a的字符串

【用户名验证提示】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*当用户点击校验按钮，要获取输出框中的内容，然后验证其是否合法
        *需要验证的规则：必须由字母、数字、下划线组成，并且长度是5-12位
         */
        function onclickFun() {
            //当要操作一个标签的时候，一定要先获取这个标签对象
            var usernameObj =  document.getElementById("username");
            var usernameText = usernameObj.value;
            var patt = /\w{5,12}/;//由字母、数字、下划线组成，并且长度是5-12位
            var usernameSpanObj = document.getElementById("usernameSpan");//dom对象
            if(patt.test(usernameText)){
                usernameSpanObj.innerHTML = "用户名合法";
            }else{
                usernameSpanObj.innerHTML = "用户名不合法";
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username" value="输入用户名"/>
    <span id="usernameSpan" style="color: red;"></span>
    <button onclick="onclickFun()">校验</button>
</body>
</html>

等待的疲倦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb之JavaScript基础

Java后端程序员有必要学习JavaScript！一、介绍JavaScript语言只要是为了完成页面的数据验证，因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。——JS是弱类型，Java是强类型。（弱类型就是类型可变；强类型就是定义变量的时候，类型已确定，而且不可变）eg:var i; i =12; i = “abc”特点①交互性（可以做的就是信息的动态交互）②安全性（不允许直接访问本地硬盘）③跨平台性（只要是可以解释JS的浏览器都可以执行，和平台无关——通过浏览器实
复制链接

扫一扫