java script与html连起来 java script和java web

转载

Aceryt 2024-01-31 00:35:38

文章标签 java script与html连起来 html javascript 静态注册 文章分类 Java 后端开发

前言

2021年5月16日，开始学习javaweb。在经过springboot的学习之后，发现了自己学习的知识很少，知识的广度很浅。
长风破浪会有时，直挂云帆济沧海！冲！

（一）什么是JavaScript

Javascript 语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行 JavaScript 代码。
JS 是 Netscape 网景公司的产品，最早取名为 LiveScript;为了吸引更多 java 程序员。更名为 JavaScript。

（二）JavaScript的使用

2.1基础使用

在html中的<head内使用

<script type="text/javascript> 
消息
</scrpit>

2.2引用其他js页面

<script type="text/javascript" src="1.js"></script>
<script type="text/javascript">
alert(" 国哥现在可以帅了");
</script>

2.3逻辑运算

在javascript中，除了nan，null，false，空串为假，其他的都是真。
且运算：&&
或运算：||
取反运算：!
注意与java的区别
&& 且运算。
有两种情况：
第一种：当表达式全为真的时候。返回最后一个表达式的值。
第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值

|| 或运算
第一种情况：当表达式全为假时，返回最后一个表达式的值
第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值

并且 && 与运算和 ||或运算有短路。
短路就是说，当这个&&或||运算有结果了之后。后面的表达式不再执行

2.4js数组

这没什么好说的，就是python列表

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var arr = [true,1]; // 定义一个空数组
// alert( arr.length ); // 0
arr[0] = 12;
// alert( arr[0] );//12
// alert( arr.length ); // 0
// javaScript 语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作。
arr[2] = "abc";
alert(arr.length); //3
// alert(arr[1]);// undefined
// 数组的遍历
for (var i = 0; i < arr.length; i++){
alert(arr[i]);
}
</script>
</head>
<body>
</body>
</html>

2.5函数

2.5.1使用格式

函数的第一种定义方法：

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

定义带有返回值的函数
只需要在最后return

function 函数名(形参列表){
函数体
return 结果
}

第二种定义方法：
var 函数名 = function(形参列表) { 函数体 }

<script type="text/javascript">
var fun = function () {
alert(" 无参函数");
}
// fun();
var fun2 = function (a,b) {
alert(" 有参函数 a=" + a + ",b=" + b);
}
// fun2(1,2);
var fun3 = function (num1,num2) {
return num1 + num2;
}
alert( fun3(100,200) );
</script

2.5.2注意的点

js内的函数不允许重载，如果重载会覆盖掉上次的定义
js可以传入任意个参数，函数在定义的时候有arguments隐藏参数
js 中的隐形参数也跟 java 的可变长参数一样。操作类似数组。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function fun(a) {
//虽然函数定义了一个参数，但是由于调用传入n个参数，其就有n个隐藏参数。
alert( arguments.length );//可看参数个数
alert( arguments[0] );
alert( arguments[1] );
alert( arguments[2] );
alert("a = " + a);
for (var i = 0; i < arguments.length; i++){
alert( arguments[i] );
}
alert(" 无参函数 fun()");
}
// fun(1,"ad",true);
// 需求：要求 编写 一个函数。用于计算所有参数相加的和并返回
function sum(num1,num2) {
var result = 0;
for (var i = 0; i < arguments.length; i++) {
if (typeof(arguments[i]) == "number") {
result += arguments[i];
}
}
return result;
}
alert( sum(1,2,3,4,"abc",5,6,7,8,9) );
</script>
</head>
<body>
</body>
</html>

2.6js中的自定义对象

js中也有对象的定义，基本和java里面的定义是相同的
对象的定义：
var 变量名 = new Object(); // 对象实例（空对象）
变量名.属性名 = 值; // 定义一个属性
变量名.函数名 = function(){} // 定义一个函数
对象的访问：
变量名.属性 / 函数名();

<script type="text/javascript">
// 对象的定义：
// var 变量名 = new Object(); // 对象实例（空对象）
// 变量名.属性名 = 值; // 定义一个属性
// 变量名.函数名 = function(){} // 定义一个函数
var obj = new Object();
obj.name = " 华仔";
obj.age = 18;
obj.fun = function () {
alert(" 姓名：" + this.name + " ,  年龄：" + this.age);
}
// 对象的访问：
// 变量名.属性 / 函数名();
// alert( obj.age );
obj.fun();
</script>

（三）JS中的事件

什么是事件？事件是电脑输入设备与页面进行交互的响应。我们称之为事件。

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

3.1事件的注册

事件的注册包括静态注册和动态注册。这是告诉浏览器，当事件的响应执行完成之后，应该做哪些操作。
静态注册指的是：通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。
动态注册指的是：是指先通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件响应后的代码，叫动态注册。

3.2onload事件

问题：
1、静态注册写在哪：答写在body的属性中
2、当使用静态注册时，还能不能用动态注册：答不能

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// onload 事件的方法
function onloadFun() {
alert(' 静态注册 onload  事件，所有代码');
}
// onload 事件动态注册。是固定写法
window.onload = function () {
alert(" 动态注册的 onload  事件");
}
</script>
</head>
<!--静态注册 onload 事件onload 事件是浏览器解析完页面之后就会自动触发的事件
<body onload="onloadFun();">-->
<body>
</body>
</html>

3.3onclick事件

问题：
1、静态onclick事件注册写在哪：答写在body体内
2、动态注册的步骤是什么答在代码里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclickFun() {
            alert('静态注册onclick')
        }
        // 动态注册的步骤
        // 获取标签对象
        // 通过标签对象.事件名=function () {
        //
        // }
        window.onload=function () {
            var btnObj=document.getElementById("btn01")

            btnObj.onclick=function () {
                alert('动态注册onclick')

            }

        }

    </script>
</head>
<body>
<!--创建一个button，点击后显示动态注册还是静态注册-->
<button  id="btn01">按钮1</button>
<button onclick="onclickFun()" >按钮2</button>
</body>
</html>

3.4onblur失去焦点事件

注意，input框内，各个属性之间没有逗号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload=function () {
            var usObj=document.getElementById("username")
            alert(usObj)

            usObj.onblur=function () {
                console.log("动态失去焦点")
            }

        }

    </script>
</head>
<body>
用户名:<input type="text" id="username"></br>
</body>
</html>

3.5onchange事件

常用于下拉列表

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onchangeFun() {
alert(" 女神已经改变了");
}
window.onload = function () {
//1 获取标签对象
var selObj = document.getElementById("sel01");
// alert( selObj );
//2 通过标签对象.事件名 = function(){}
selObj.onchange = function () {
alert(" 男神已经改变了");
}
}
</script>
</head>
<body>
请选择你心中的女神：
<!--静态注册 onchange 事件-->
<select onchange="onchangeFun();">
<option>--女神--</option>
<option>芳芳</option>
<option>佳佳</option>
<option>娘娘</option>
</select>
请选择你心中的男神：
<select id="sel01">
<option>--男神--</option>
<option>国哥</option>
<option>华仔</option>
<option>富城</option>
</select>
</body>
</html>

3.6onsubmit表单提交事件

注意：在静态获取，后面的οnsubmit="return onsubmitFun();"这里的return是必须要写的，要不然不会生效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" >
        // 静态注册表单提交事务
        function onsubmitFun(){
// 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
            alert(" 静态注册表单提交事件---- 发现不合法");
            return false;
        }
        window.onload = function () {
//1 获取标签对象
            var formObj = document.getElementById("form01");
//2 通过标签对象.事件名 = function(){}
            formObj.onsubmit = function () {
// 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
                alert(" 动态注册表单提交事件---- 发现不合法");
                return false;
            }
        }
    </script>
</head>
<body>
<!--return 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

4.1getElementById（）

document.getElementById 通过id获取元素
常用于数据校验功能
需求：当用户点击校验，取出输入框中的值，然后验证其是否合法
验证的规则是：必须由字母、数字、下划线组成，并且长度是5-13位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclickFun() {
            var usernameObj=document.getElementById("username")
            var uservalue=usernameObj.value;
            var patt=/^\w{5,12}$/
            if(patt.test(uservalue)){
                alert("输入的格式正确")
            }else{
                alert("输入的格式不正确")
            }


        }
    </script>
</head>
<body>
用户名：<input type="text" id="username"/>
<button onclick="onclickFun()">校验</button>
</body>
</html>

4.2getElementBy（）

用途：经常用于对选择框进行全选，全不选，反选等操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function checkAll() {
            var hobby=document.getElementsByName("hobby")
            for(var i=0;i<hobby.length;i++){
                hobby[i].checked=true;
            }

        }
        function checkReverse() {
            var hobby=document.getElementsByName("hobby")
            for(var i=0;i<hobby.length;i++){
                hobby[i].checked=!hobby[i].checked;
            }


        }
        function checkNo() {
            var hobby=document.getElementsByName("hobby")
            for(var i=0;i<hobby.length;i++){
                hobby[i].checked=false;
            }
        }
    </script>
</head>
<body>
        兴趣爱好:
        <input type="checkbox" name="hobby" value="cpp" checked="checked"> c++
        <input type="checkbox" name="hobby" value="java"> java
        <input type="checkbox" name="hobby" value="javascript"> javascript

        <button onclick="checkAll()" >全选</button>
        <button onclick="checkNo()">全不选</button>
        <button onclick="checkReverse()">反选</button>



</body>
</html>

4.3getElementByTagName（）

<script type="text/javascript">
// 全选
function checkAll() {
// document.getElementsByTagName("input");
// 是按照指定标签名来进行查询并返回集合
// 这个集合的操作跟数组 一样
// 集合中都是 dom 对象
// 集合中元素顺序 是他们在 html 页面中从上到下的顺序。
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++){
inputs[i].checked = true;
}
}
</script>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：android 局域网查看局域网查看器安卓

下一篇：EffectSdk是哪个端的架构 effects level

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯