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标签名进行查询
以上三个方法,代码一定要在页面加载完成之后执行,才能查询到标签对象