JavaScript
JavaScript语言主要完成页面的数据验证。
运行在客户端，使用浏览器来解析JavaScript代码。
JavaScript特点：
? 1、交互性，进行信息的动态交互。
? 2、安全性，不允许访问本地磁盘。
? 3、跨平台性，任何可以解析JS代码的浏览器都可以执行。
JavaScript使用：
? <script type="text/javascript"></script>
? 在head标签内可以直接使用srcipt双标签进行script语句书写。
? <script type="text/javascript" scr="JS文件路径"></script>
? 在head标签内可以直接使用srcipt双标签,并在src内指定外部JS文件。
? 注意：
? 一个script标签内容，只能有一种写法，要么在script双标签内写内容，要么使用src引入文件，不能又写内容，又去引用。
JavaScript变量
变量类型：
? 数值类型：number
? 字符串类型：string
? 对象类型：object
? 布尔类型:boolean
? 函数类型：function
特殊值：
? undefined 未定义，所有js变量未赋初始值时，默认值都是undefined。赋值后，可以使用typeof()用来判断变量类型。
? null 空值。
? NAN 全称是：Not a Number。非数字，非数值。
关系运算
< 小于
<= 小于等于
> 大于
>= 大于等于
!= 不等于
== 等于 作字面值比较
=== 全等于 字面值和数据类型联合比较
逻辑运算
&& 且运算
? 有两种情况：
? 第一种、当表达式全为真时，返回最后一个表达式的值。
? 第二种、当表达式有一个为假时，返回第一个为假的表达式的值。
? 总结：执行到哪里，返回哪里的值，也就是那一个值可以确定运算结果。
|| 或运算
? 有两种情况：
? 第一种、当表达式全为假时，返回最后一个表达式的值。
? 第二种、当表达式有一个为真时，返回第一个为真的表达式的值。
? 总结：执行到哪里，返回哪里的值，也就是那一个值可以确定运算结果。
! 取反
在JavaSrcipt中，所有的变量，都可以作为一个boolean类型的变量使用。（0、null、undefined、”“ 都认为是flase）
数组
定义数组：
? var 数组名 = [];
? var 数组名 = [元素1，元素2......];元素数据类型不要求一致
? JavaScript语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作。
函数
定义函数：
? function 函数名(形参){}
? var 函数名 = function(形参){}
? 形参不带数据类型，直接写变量名即可。带有返回值的函数，可以直接在return后跟返回值，不需要在函数声明时声明返回值类型。
注意
? JavaScript不允许方法重载。重载后会覆盖之前的函数。
函数的arguments隐形参数(只在function函数内)
? 在function函数中不需要定义，但却可以直接用来获取所有参数的变量。类似于java的可变长参数。arguments代表传入数组名称。
<script>
var resault=0;
var sum=function () {
for(var i=0;i<arguments.length;i++)
if (typeof arguments[i]=="number")
resault+=arguments[i];
}
sum(1,5,34,"qwe",3);
alert(resault);
</script>
自定义对象
Object自定义对象
? var 变量名 = new Object();
? 创建空对象。
? var 变量名 ={属性名:值,属性名:值,函数名:function(){} }
? 在对象里直接定义属性和函数。
? 变量名.属性名 = 值
? 为变量的属性赋值，也可以为空对象定义新属性和值。
? 变量名.函数名 = function(){}
? 定义一个函数，也可以为空对象定义新函数。
对象的访问
? 变量名.属性/函数();
事件
电脑输入设备与也米娜进行交互的响应，称之为事件。
常用的事件
? onload
? 加载完成事件，页面加载完成之后，常用于做页面js代码的初始化操作。
? onclick
? 单击事件，常用于按钮的点击相应操作。
? onblur
? 失去焦点事件，常用于输入框失去焦点后验证其输入内容是否合法。
? onchange
? 内容发生改变事件，常用于下拉列表和输入框内容发生改变后操作。
? onsubmit
? 表单提交事件，常用于表单提交前，验证所有表单是否合法。
事件的注册：
? 分为静态注册和动态注册。告诉浏览器，响应后，浏览器要执行那些代码。
? 静态注册事件：
? 通过html标签的事件属性直接赋予事件响应后的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function onload() {
alert("方法加载时被调用！");
}
</script>
</head>
<body onload="onload();">
</body>
</html>
? 动态注册事件：
? 先通过js代码得到标签的dom对象，然后通过dom对象.事件名=function(){}这种形式赋予事件响应后的代码。
? 动态注册的基本步骤：
? 1、获取标签对象 document.getElementById("");
? 2、标签对象.事件名= function(){}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload=function () {
alert("加载时方法被调用！");
}
</script>
</head>
<body>
</body>
</html>
示例(onclick的动态和静态注册)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function button1() {
alert("静态方式注册！");
}
window.onload = function () {
var button2 = document.getElementById("button2");
button2.onclick = function () {
alert("动态方式注册！");
}
}
</script>
</head>
<body>
<button id="button1" onclick="button1();">按钮1</button>
<button id="button2">按钮2</button>
</body>
</html>
示例(onblur的动态和静态注册)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function onblur1() {
console.log("静态注册时失去焦点！");
}
window.onblur = function (){
var onblur2 = document.getElementById("onblur2");
onblur2.onblur =function () {
console.log("动态注册时失去焦点");
}
}
</script>
</head>
<body>
<input type="text" onblur="onblur1();"/>
<input type="text" id="onblur2"/>
</body>
</html>
示例(onchange的动态和静态注册)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function onchangeStatic() {
alert("静态注册内容发生改变");
}
window.onload = function() {
var onchangeDynamic = document.getElementById("onchangeDynamic");
onchangeDynamic.onchange=function () {
alert("动态注册内容发生改变");
}
}
</script>
</head>
<body>
<select onchange="onchangeStatic();">
<option >张三</option>
<option >李四</option>
<option>王五</option>
<option>赵六</option>
</select>
<select id="onchangeDynamic">
<option >张三</option>
<option >李四</option>
<option>王五</option>
<option>赵六</option>
</select>
</body>
</html>
示例(onsubmit的动态和静态注册)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function onsubmitStatic() {
alert("静态注册检测提交是否合法");
return false;
}
window.onload = function (){
var onsubmitDynamic = document.getElementById("onsubmitDynamic");
onsubmitDynamic.onsubmit = function () {
alert("动态注册检测提交是否合法");
return false;
}
}
</script>
</head>
<body>
<form action="Test.html" method="get" onsubmit="return onsubmitStatic();">
<input type="submit"/>
</form>
<form action="Test.html" method="get" id="onsubmitDynamic">
<input type="submit"/>
</form>
</body>
</html>
DOM模型
Document Object Model文档对象模型
作用:
? 把文档中的标签，属性，文本，转化为对象处理。
Document 对象的理解
? 第一点：Document它管理了所有的HTML文档。
? 第二点：Document它是一种树结构的文档，有层级关系。
? 第三点：他让我们把所有的标签都对象化。
? 第四点：我们可以同过Document访问所有的标签对象。
示例（验证用户名是否合法）
DOM对象查询的三种方法：
document.getElementById("id")
document.getElementsByName("name")
document.getElementsTagName("tagName")
? 三种查询方法，如果有Id属性，使用id属性查，如果没有id属性，有name属性，则使用name查，最后使用标签查。
? 以上三个方法，必须要页面加载完成后才可以查。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证用户名是否合法</title>
<script>
function onclickStatic() {
var user = document.getElementById("user");
var admit = document.getElementById("admit");
var value = user.value;
var reg = /^\d{7}$/;
if (reg.test(value)){
admit.innerHTML="用户名合法";
}
else{
admit.innerHTML="用户名不合法，要求为7位数字";
return false;}
}
</script>
</head>
<body>
<form action="Test.html" method="get">
<input type="text" value="123" id="user">
<span id="admit" style="color: red;"></span>
<input type="submit" onclick=" return onclickStatic();" value="提交">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function optionAll() {
var hobby = document.getElementsByName("hobby");
for(var i=0;i<hobby.length;i++)
hobby[i].checked=true;
}
function optionNotAll() {
var hobby = document.getElementsByName("hobby");
for(var i=0;hobby.length;i++)
hobby[i].checked=false;
}
function optionRe() {
var hobby = document.getElementsByName("hobby");
for (var i=0;hobby.length;i++){
if (hobby[i].checked==true)
hobby[i].checked=false;
else
hobby[i].checked=true;
}
}
</script>
</head>
<body>
打篮球 <input type="checkbox" name="hobby" id="palybasketball">
唱歌<input type="checkbox" name="hobby" id="sinning">
rap<input type="checkbox" name="hobby" id="rap">
<button onclick="optionAll();">全选</button>
<button onclick="optionNotAll();">全不选</button>
<button onclick="optionRe();">反选</button>
</body>
</html>
createElement();
? 方法，通过指定名称创建一个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
var div = document.createElement("div");
div.innerHTML="默认显示值";
document.body.append(div);
}
</script>
</head>
<body>
</body>
</html>
|