10.js

一、
为了完成页面数据验证 运行在客户端 跟java无关
二、方式
方式1
只需要在 head 标签中，或者在 body 标签中， 使用 script 标签 来书写 JavaScript 代码

<script type="text/javascript">
    alert("我来自head");
</script>

方式2
使用 script 标签引入 单独的 JavaScript 代码文件 src

1.js里写alert("我来自head");
html写<script type="text/javascript" src="1.js"></script>

三、变量 数组 函数
(1)变量

var i=12 ,a=3,b="a";
alert(i+a); 12a
alert(i*b); NaN

var a = "12";
var b = 12;
alert( a == b ); // true
alert( a === b ); // false 除了值还比类型

var a=0;
if(a)alert(1);
else alert(0);
/*&& 且运算。
有两种情况：
第一种：当表达式全为真的时候。返回最后一个表达式的值。
第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值 */
var a = "abc";
var b = true;
var d = false;
var c = null;
 alert( a && b );//true
 alert( b && a );//abc
/* || 或运算
第一种情况：当表达式全为假时，返回最后一个表达式的值
第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值 */
 alert( d || c ); // null
 alert( c|| d ); //false
 alert( a || c ); //abc
 alert( b || c ); //true

(2)数组

var arr = []; // 定义一个空数组
alert( arr.length ); // 0
var arr = [true,1];
 alert( arr.length ); // 2
arr[0] = 12;
arr[2] = "abc";
alert(arr.length); //3
for (var i = 0; i < arr.length; i++){
    alert(arr[i]);
}

(3)函数

方式一用function
function fun(){
    alert(" 无参函数 fun() 被调用了");//
}
方式二用var 
var fun = function () { //不可以重写 会被覆盖
alert(" 无参函数");
}
fun();
function fun2(a ,b) {
    alert(" 有参函数 fun2()了 被调用了 a=>" + a + ",b=>"+b);
}
 fun2(12,"abc");
// 定义带有返回值的函数 加<font color="red">return</font>
function sum(num1,num2) {
    var result = num1 + num2;
    return result;
}
alert( sum(100,50) );//150

四、事件
事件是电脑输入设备与页面进行交互的响应。
（1）onload
静态注册

html写<script type="text/javascript" src="../1.js">  、 <body onload="onloadFun()">
js写function onloadFun(){alert("...");}

动态直接在js写 但body必须不能写onload 否则被忽略

window.onload=function(){ alert("ddzc");}

(2)onclick
在js定义onclickFun()在写button里onclick="onclickFun()"
动态注册在button添加id 在js中getElementById获取对象 然后对象.函数

window.onload=function(){
      var btnobj=document.getElementById("btn02");//1.获取标签对象
    //  alert(btnobj);
    btnobj.onclick=function(){//2.标签对象.事件名function(){}
        alert("动态注册");
    }
}

(3)onblur 失去焦点
F12 console看效果

用户名:<input type="text" onblur="onblurFun()"><br>//html文件中
function onblurFun(){console.log("失去焦点");}//js文件

window.onload =function(){
var pwdObj=document.getElementById("pwd");
alert(pwdObj);
pwdObj.onblur=function(){
console.log("动态失去焦点");
}
}
（4）onchange 下拉标签

html <select onchange="onchangefun()">
js function onchangefun(){alert("has been changed");}

（5）onchange表单

<form action="http://localhost:8080" method="get" onsubmit="return onsubmitfun()">
    <input type ="submit" value="静态注册">
</form>

function onsubmitfun(){
    alert("提交失败");
    return false;
}
posted @ 2021-05-28 15:58  liv_vil  阅读(57)  评论(0)    收藏  举报