Java中能用alert吗 alert用法java

转载

数据小香 2024-04-27 10:50:40

文章标签 Java中能用alert吗前端 javascript html js代码 文章分类 Java 后端开发

JavaScript

JavaScript和HTML结合使用的方式

第一种直接在里面写

<head><!--表示头部信息，一般包含三部分内容，title标签,css样式,js代码-->
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //alert是JavaScript语言提供的警告框函数
        alert("hello javaScript!")
    </script>
</head>

第二种

<head><!--表示头部信息，一般包含三部分内容，title标签,css样式,js代码-->
    <meta charset="UTF-8">
    <title>Title</title>
    <!--现在需要使用script引入外部的js文件来执行
        src属于专门用来引入js文件路径
        script标签可以用来定义js代码，也可以用来引入js文件
    -->
    <script type="text/javascript" src="hello.js">
    </script>
</head>

JavaScript的变量和数据类型介绍

JS的变量类型：
数值类型：number
字符串类型： string
对象类型：object
布尔类型：boolean
函数类型：function
JS里的特殊值：
undefined 未定义，所有JS变量未赋初值的时候，默认值都是undefined
null 空值
NAN 非数字，非数值
JS中的定义变量格式：
var 变量名;
var 变量名 = 值;

关系运算

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

逻辑运算

且 &&
运算结果：
当全为真时，返回最好一个表达式的值
为假时，返回第一个为假的表达式的值

或 ||
全为假时，返回最后一个表达式的值
有一个为真时，返回第一个为真的表达式的值

取反 !
在JS中，所有的变量，都可以作为一个boolean类型的变量去使用
0，null,undefined,""(空串),都认为是false

数组

格式：
var 数组名=[]; //空数组
var 数组名=[1,'abc',false]; //定义数组的同时赋值

JavaScript语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作
数组名.length 计算数组大小

函数

函数的两种定义方式

不可以函数重载，函数重载了直接覆盖掉上一次的定义

第一种定义方式
function 函数名(形参列表){
         函数体
}
<script type="text/javascript">
        //定义一个无参函数
        function fun(){
            alert("无参函数被调用了")
        }
        fun();
        function fun1(a,b){
            alert("有参函数被调用"+a +" "+b)
        }
        fun1(12,12);
        需要返回值直接return即可
</script>



第二种定义的方式
var 函数名 = function(形参列表){函数体}
<script type="text/javascript">
        //定义一个无参函数
        var fun = function (){
            alert("无参函数")
        }
        fun();
        var fun1 = function (a,b) {
            alert(a + " " +b);
        }
        fun1(12,12);
</script>

函数的隐形参数arguments

就是在function函数中不需要定义，但却可以直接用来获取所有参数的变量。
隐形参数像Java的可变长参数Object...args，，可变长参数是一个数组
JS种的隐形参数也是一个数组

<script type="text/javascript">
        //定义一个无参函数
        function fun(){
            alert(arguments.length);
            alert(arguments[0]);
            alert(arguments[1]);
            alert(arguments[2]);
        };
        fun(1,"abc",true);
    </script>

JavaScript中的自定义对象

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


{}花括号形式的自定义对象
var 变量名 = {//空对象
	属性名:值,    //定义一个属性
	属性名:值,
	函数名:function(){}//定义一个函数
};
对象的访问：
		变量名.属性/函数名();

JS中的事件

事件是电脑输入设备与页面进行交互的影响

常用的事件

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

事件的注册

分为静态和动态，就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或者事件绑定

静态注册事件

通过html标签的事件属性直接赋予事件响应后的代码

动态注册事件

是指先通过js代码得到标签的dom对象，然后再通过dom对象.事件名= function(){}这种形式赋予事件响应后的代码
动态注册基本步骤：
1.获取标签对象
2.标签对象.事件名 = function(){}

onload加载完成事件

静态加载onload
<!DOCTYPE html>
<html lang="en">
<head><!--表示头部信息，一般包含三部分内容，title标签,css样式,js代码-->
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
    **************************************************************
        function onloadFun(){
            alert('静态注册onload事件,所有代码')
        }
    **************************************************************
    </script>
</head>
<!--静态注册onload事件
      onload事件是浏览器解析完界面之后就会自动触发的事件
-->
**************************************************************
<body onload="onloadFun();">
**************************************************************
</body>
</html>



动态加载onload
<!DOCTYPE html>
<html lang="en">
<head><!--表示头部信息，一般包含三部分内容，title标签,css样式,js代码-->
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
    **************************************************************
        //onload事件动态注册，是固定写法
        window.onload = function (){
            alert("动态注册的onload事件")
        }
    **************************************************************
    </script>
</head>
<!--静态注册onload事件
      onload事件是浏览器解析完界面之后就会自动触发的事件
-->

<body>

</body>

onclick事件

<!DOCTYPE html>
<html lang="en">
<head><!--表示头部信息，一般包含三部分内容，title标签,css样式,js代码-->
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclickFun(){
            alert("静态注册onclick");
        }
        //动态注册onclick事件
        window.onload = function (){
            //1.动态获取标签对象
            /*
            * document 是JavaScript语言提供的一个对象(文档 整个页面的所有内容)
            * get     获取
            * Element 元素(标签)
            * By      通过
            * Id      id属性
            * 通过id属性获取标签对象
            * */
            var btnObj = document.getElementById("but02");
            //2.通过标签对象.事件名 = function(){}
            btnObj.onclick = function (){
                alert("动态注册的onclick事件");
            }
        }
    </script>
</head>

<body>
<!--静态注册onclick事件-->
<button onclick="onclickFun()">按钮一</button>
<button id="but02">按钮二</button>
</body>
</html>

onblur 失去焦点事件

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

<!DOCTYPE html>
<html lang="en">
<head><!--表示头部信息，一般包含三部分内容，title标签,css样式,js代码-->
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
          function onblurFun(){
              //console 是控制台对象，由JS语言提供，专门用于向浏览器的控制台打印输出，用于测试使用
              //log()是打印的方法
              console.log("静态注册失去焦点事件");
          }
          //动态注册onblur事件
          window.onload = function (){
              //1.获取标签对象
              var passwordObj = document.getElementById("id1");
              //2.通过标签对象.事件名 = function(){}
              passwordObj.onblur = function (){
                  console.log("动态注册失去焦点事件");
              }
          }
    </script>
</head>
<body>
用户名：<input type="text" onblur="onblurFun()"><br/>
密码：<input type="text" id="id1"><br/>
</body>
</html>

onchange事件

<!DOCTYPE html>
<html lang="en">
<head><!--表示头部信息，一般包含三部分内容，title标签,css样式,js代码-->
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
          function onchangeFun(){
              alert("改变");
          }

          window.onload = function (){
              //1.获取标签对象
              var selObj = document.getElementById("id1");
              //2.通过标签对象.事件名 = function(){}
              selObj.onchange = function (){
                  alert("改变！");
              }
          }
    </script>
</head>
<body>
请选择你心中想的：
<!--静态注册onchange事件-->
<select onchange="onchangeFun()">
    <option>--1--</option>
    <option>--2--</option>
    <option>--3--</option>
</select>


<select id="id1">
    <option>--1--</option>
    <option>--2--</option>
    <option>--3--</option>
</select>
</body>
</html>

onsubmit事件

<!DOCTYPE html>
<html lang="en">
<head><!--表示头部信息，一般包含三部分内容，title标签,css样式,js代码-->
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
         function onsubmitFun(){
             //要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
             alert("静态注册表单提交事件,不合法");
             return false;
         }
         window.onload = function (){
             //1.获取标签对象
             var fromObj = document.getElementById("id1");
             //2.通过标签对象.事件名 = function(){}
             fromObj.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" method="get" id="id1">
    <input type="submit" value="动态注册">
</form>
</body>
</html>

DOM模型

Document Object Model 文档对象模型
把文档标签中的属性，文本，转换成为对象来管理
我们可以用

Document对象中的方法

document.getElementById(elementId)
通过标签的id属性查找标签dom对象
document.getElementsByName(elementName)
通过标签的name属性查找标签dom对象
document.getElementsByTagName(tagName)
通过标签名查找标签dom对象
document.createElement(tagName)
通过给定的标签名，创建一个标签对象

<!DOCTYPE html>
<html lang="en">
<head><!--表示头部信息，一般包含三部分内容，title标签,css样式,js代码-->
    <meta charset="UTF-8">
    <title>Title</title>
    需求：校验输入的东西是不是由5-12为的只由字母，数字，下划线组成
    <script type="text/javascript">
        function onclickFun(){
            //1 当我们要操作一个标签的时候，一定要先获取这个标签对象
            var o1 = document.getElementById("id1");
            var text = o1.value;
            //如何验证字符串符合某个规则需要使用正则表达式技术
            var patt = /^\w{5,12}$/;
            /*
            test()方法用于测试某个字符串，是不是匹配我的规则，匹配返回true
             */
            if(patt.test(text)){
                alert("合法");
            }else {
                alert("不合法");
            }
        }
    </script>
</head>
<body>
<input type="text" id="id1">
<button onclick="onclickFun()">校验</button>
</body>
</html>

正则表达式

用于对字符串模式匹配及检索替换

语法
var patt = new RegExp(pattern,moifiers);
或
var patt = /pattern/modifiers

pattern(模式)描述了表达式的模式
modifiers(修饰符)用于指定全局匹配，区分大小写的匹配和多行匹配

表示字符串中是否包含字母e
var patt = new RegExp("e");
或者 var patt = /e/
var str = "abcd";
alert(patt.test(str))//false

[abc]表示字符串中是否包含abc中任意一个字母
[^abc]不包含
[a-z]查找是否包含任何从a-z的字符
\w查找单词字符    a-z A-Z 0-9 下划线
\W 不包含上述的字符
a+ 字符串中是否包含至少一个a
a* 字符串中是否包含0个或多个a
a? 是否包含1个或0个a
a{3}字符串是否包含连续三个a
a{3,5} 字符串是否至少包含连续3个a至多5个       //最多什么时候有用？^a{3,5}$  要求字符串从头到尾都必须完全匹配 
 a{3,} 字符串是否至少包含连续3个a
 a$ 表示字符串必须以a结尾
 ^a 表示字符串必须以a开头
包含 满足就不继续找
加了^ $是从头到尾

两种常用的验证提示效果

getElementById

第一种
<!DOCTYPE html>
<html lang="en">
<head><!--表示头部信息，一般包含三部分内容，title标签,css样式,js代码-->
    <meta charset="UTF-8">
    <title>Title</title>
    需求：校验输入的东西是不是由5-12为的只由字母，数字，下划线组成
    <script type="text/javascript">
        function onclickFun(){
            //1 当我们要操作一个标签的时候，一定要先获取这个标签对象
            var o1 = document.getElementById("id1");
            var text = o1.value;
            //如何验证字符串符合某个规则需要使用正则表达式技术
            var patt = /^\w{5,12}$/;

            var o2 = document.getElementById("id2");
            //innerHTML 表示起始标签和结束标签
            //这个属性可读 可写

            /*
            test()方法用于测试某个字符串，是不是匹配我的规则，匹配返回true
             */
            if(patt.test(text)){
                //alert("合法");
                o2.innerHTML = "用户名合法"
            }else {
                //alert("不合法");
                o2.innerHTML = "用户名不合法"
            }
        }
    </script>
</head>
<body>
<input type="text" id="id1">
<span id="id2" style="color: red;"></span>
<button onclick="onclickFun()">校验</button>
</body>
</html>


第二种
放图片

getElementsByName

<!DOCTYPE html>
<html lang="en">
<head><!--表示头部信息，一般包含三部分内容，title标签,css样式,js代码-->
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //全选
        function checkAll(){
            //document.getElementByName 根据指定的name返回多个标签的集合
            //操作和数组一样
           var hobbies = document.getElementsByName("hobby");
           var len = hobbies.length;
           //checked表示复选框的选中状态，选中为true
            for(var i = 0 ;i < len ;i++){
                hobbies[i].checked=true;
            }
        }
        //全不选
        function checkNo(){
            var hobbies = document.getElementsByName("hobby");
            var len = hobbies.length;
            //checked表示复选框的选中状态，选中为false
            for(var i = 0 ;i < len ;i++){
                hobbies[i].checked=false;
            }
        }
        //反选
        function checkReverse(){
            var hobbies = document.getElementsByName("hobby");
            var len = hobbies.length;
            //checked表示复选框的选中状态，选中为取反
            for(var i = 0 ;i < len ;i++){
                hobbies[i].checked=~hobbies[i].checked;
            }
        }
    </script>

</head>
<body>
兴趣爱好：<input type="checkbox" name="hobby" value="cpp">C++
兴趣爱好：<input type="checkbox" name="hobby" value="java">Java
兴趣爱好：<input type="checkbox" name="hobby" value="js">JavaScript
<br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>
</body>
</html>

getElementsByTagName

和前面的getElementsById一样，只是id变为了标签名

function checkAll(){
         //document.getElementsByTagName("input") 是按照指定标签名来进行查询并返回集合
         //这个集合的操作跟数组一样
         //集合中都是dom对象
         var inputs = document.getElementsByTagName("input");
}

三个方法使用注意事项

document对象的三个查询方法，如果有id属性，优先使用getElementById方法，
没有id属性，使用getElementsByName方式来进行查询，最后使用getElementsByTagName标签名进行查询

以上三个方法，代码一定要在页面加载完成之后执行，才能查询到标签对象

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

上一篇：如何查看各个容器的磁盘占用怎么看磁盘占用率

下一篇：python ur5 控制 python 控制器

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

发布评论

相关文章

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

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