JavaEE学习笔记（3）——JavaScript
一、JavaScript与html代码的结合方式
方式一：Script标签输入
在head标签中，或者body标签中，使用script标签来书写js代码
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//alert是js语言提供的一个警告框函数
//它可以接受任意类型的参数，这个参数就是警告框的信息
alert("hello JavaScript");
</script>
</head>
方式二：Script标签引入文件
直接使用script标签引入js文件
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="1.js"></script>
</head>
二、变量
JavaScript的变量类型：
数值类型： number
字符串类型： string
对象类型： object
布尔类型： boolean
函数类型： function
JavaScript中的特殊值：
undefined 未定义，所有js变量未赋初始值的时候
null 空值
NAN Not a Number 非数字，非数值
JS中的定义变量的格式
```html
<script type="text/javascript">
var i;
alert(i);
i=12;
//typeof()是js语言提供的函数，返回变量的类型
alert(typeof(i));
</script>
三、关系运算
等于 == 简单的做字面值的比较
全等于 === 除了字面值的比较还要做类型比较
四、逻辑运算
JS中所有变量都可以做为一个Boolean类型的变量使用
0、null、undefined、“”都认为是null
&&且运算
1.当表达式全为真时，返回最后一个表达式的值
2.当表达式中有假时，返回第一个为假的值
||或运算
1.当表达式全为假时，返回最后一个表达式的值
2.只要有一个为真，就会返回第一个为真的表达式的值
五、数组√
数组的定义：
格式：
var 数组名=[];
var 数组名=[1,'abc',true];
只要通过下标赋值，那么最大的下标就会自动给数组做扩容操作
六、函数√
方式一：function关键字
function 函数名(){
函数体;
}
在JavaScript语言中，定义带返回值的函数？
直接在函数体内return。
<script type="text/javascript">
function fun1() {
alert("无参函数fun()被调用")
}
fun1();
function fun2(a,b) {
alert("有参函数被调用了"+a+" "+b);
return a+b;
}
fun2(1,2);
</script>
方式二：
格式
var 函数名=function(形参列表){
函数体;
}
<script type="text/javascript">
var fun = function (a, b) {
return a + b;
}
</script>
JS不允许函数重载
隐形参数：arguments
在function函数中不需要定义，但却可以直接用来获取所有参数的变量
操作类似数组
<script type="text/javascript">
function fun() {
alert(arguments.length);
}
fun(1,11,"abc");
</script>
七、自定义对象
Object形式的自定义对象
对象的定义：
var 变量名 = new Object(); //对象实例
变量名.属性名 = 值; //定义一个属性
变量名.函数名 = function; //定义一个函数
对象的访问：
变量名.属性/函数名();
{}形式的自定义对象
对象的定义：
var 变量名 = { //空对象
属性名：值， //定义一个属性
函数名：funtion(){}
};
对象的访问：
变量名.属性/函数名();
八、事件
常用事件
常用的事件：
onload 加载完成事件；页面加载完成后，常用于左页面js代码初始化操作
onclick 单击事件；常用于按钮点击响应操作
onblur 失去焦点事件；常用于输入框失去焦点后验证其输入是否合法
onchange 内容发生改变事件；常用于下拉列表和输入框内容发生改变后操作
onsubmit 表单提交事件；常用于表单提交前，验证所有表单项是否合法
事件的注册(绑定)
就是告诉浏览器，当事件响应后要执行哪些操作代码
静态注册事件：通过html标签的事件属性直接赋予响应后的代码
动态注册事件：先通过js代码得到标签的dom对象，然后再通过dom对象.事件名=function(){}这种形式赋予时间响应后的代码
动态注册步骤：
1.获取标签对象
2.标签对象.事件名 = function(){}
① onload事件
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onloadFun() {
alert("静态注册onload事件，所有代码")
}
//onload事件动态注册是固定写法
window.onload = function () {
alert("动态注册的onload事件")
}
</script>
</head>
<!--
静态注册onload事件
onload事件是浏览器解析完页面之后
-->
<body <!--onload="onloadFun()"-->>
</body>
② onclick事件
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onclickFun() {
alert("静态注册onclick事件")
}
//动态注册onclick事件
window.onload = function () {
//获取标签对象
var btnObj =document.getElementById("btn");
//通过对象名.事件名 = funcion(){}
btnObj.onclick = function () {
alert("动态注册onclick事件")
}
}
</script>
</head>
<body>
<!--静态注册onclick事件-->
<button onclick="onclickFun()">按钮1</button>
<button id="btn">按钮2</button>
</body>
③ onblur事件
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//静态注册失去焦点
function onblurFun() {
console.log("静态注册失去焦点事件");
}
//动态注册失去焦点
window.onload = function () {
//获取标签对象
var psdObj = document.getElementById("password");
//通过标签对象.事件名 = function(){};
psdObj.onblur = function () {
console.log("动态注册失去焦点事件");
}
}
</script>
</head>
<body>
用户名：<input type="text" onblur="onblurFun()"><br/>
密码：<input type="text" id="password"><br/>
</body>
④ onchange事件
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onchangeFun() {
alert("女神已经改变了！");
}
window.onload = function () {
var selectObj = document.getElementById("sel01");
selectObj.onchange = function () {
alert("男神已经改变了！");
}
}
</script>
</head>
<body>
请选择心中的女神：
<!--静态注册onchange事件-->
<select onchange="onchangeFun()">
<option>--女神--</option>
<option>--11--</option>
<option>--22--</option>
<option>--33--</option>
</select>
请选择心中的男神：
<!--动态注册onchange事件-->
<select id="sel01">
<option >--男神--</option>
<option>--11--</option>
<option>--22--</option>
<option>--33--</option>
</select>
</body>
⑤ onsubmit事件
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//静态注册表单提交事件
function onsubmitFun() {
//要验证所有表单是否合法，如果有一个不合法就阻止提交
alert("静态注册表单提交事件 --- 发现不合法");
return false;
}
window.onload = function () {
var formObj = document.getElementById("form01");
formObj.onsubmit = function () {
//要验证所有表单是否合法，如果有一个不合法就阻止提交
alert("动态注册表单提交事件 --- 发现不合法");
return false;
}
}
</script>
</head>
<body>
<!--return false阻止提交-->
<form action="www.baidu.com" method="get" onsubmit="return onsubmitFun()">
<input type="submit" value="静态注册"/>
</form>
<form action="www.baidu.com" id="form01">
<input type="submit" value="动态注册"/>
</form>
</body>
九、DOM模型√
DOM：文档对象模型
就是把文档中的标签、属性、文本转换成对象来管理
Document对象
注意：使用优先级：getElementById>getElementBuName>getElementByTagName
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onclickFun() {
//获取标签对象
var usernameObj = document.getElementById("username");
var usernameSpan = document.getElementById("usernameSpan");
//获取属性
var value = usernameObj.value;
//校验
var patt =/^\w{5,12}$/;
if (patt.test(value)){
usernameSpan.innerHTML = "用户名合法！";
}else {
usernameSpan.innerHTML = "用户名不合法！";
}
}
</script>
</head>
<body>
用户名：<input type="text" id="username" value="********"/>
<span style="color:red" id="usernameSpan"></span>
<button onclick="onclickFun()">校验</button>
</body>
节点常用属性和方法
7487
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
