JavaScript基础
(一)特点
1.交互性
(他可以做的就是信息的动态交互)
2.安全性
(不允许直接访问本地硬盘)
3.跨平台性
(只要可以可以解释JS的浏览器都可以执行,和平台无关)
(二)JS和HTML代码的结合方式
1. 嵌入式
<!--位于head内--->
<script type="text/javascript">
alert("hello,world!");
</script>
2. 引入式
<!--
需要用javascript标签引入js文件
src属性专门用来引入js文件路径(可以是相对路径,也可以是绝对路径)
script标签可以定义js代码,也可以引入js代码文件
但是两者二选一
-->
<script type="text/javascript" src="1.js"></script>
<script type="text/javascript" >alert("hello,world!")</script>
(三)变量
1. JS数据类型
| 变量类型 | 名称 |
|---|---|
| 数值类型 | number |
| 字符串类型 | string |
| 对象类型 | object |
| 布尔类型 | boolean |
| 函数类型 | function |
2. 特殊的值
| 特殊的值 | 解释 |
|---|---|
| undefined | 未定义,所有js变量没有赋初始值,默认值都为undefined |
| null | 空值 |
| NAN | Not a Number 非数字非数值 |
3. JS中定义变量格式:
var 变量名;
var 变量名=值;
<script type="text/javascript">
var i;
alert(i);//undefined
i=12;
alert(typeof(i));//取出变量的数据类型-number
var j="abc"
alert(typeof(j))//string
alert(i*j)//NaN,非数字,非数值
</script>ty
(四)关系运算
1. ==表示内容相等
2. ===内容相等,并且数据类型相同
<script type="text/javascript">
var i=12;
var j="12";
alert(i==j);//true
alert(i===j);//false
</script>ty
(五)逻辑运算
1.且运算:&&
2. 或运算: ||
3. 取反运算: !
注: Javascript语言中,所有变量,都可以作为一个boolean类型的变量去使用
<script type="text/javascript">
var i=12;
var j="12";
alert(i==j);//true
alert(i===j);//false
</script>
(六)数组
1. JS数组,最大下标对数组扩容
<script type="text/javascript">
var a=[];//定义空数组
alert(a.length);//0
a[0]=12;
alert(a.length);//1
a[2]="abc";
alert(a.length);//3
alert(a[1]);//undefined
for(var i=0;i<a.length;i++)
alert(a[i]);
</script>
(七)函数定义
1. 定义形式
<script type="text/javascript">
function fun(){
alert("无参函数被调用")
}
function fun2(a,b){
alert("有参函数被调用-->"+a+b)
}
function sum(num1,num2){
var sum=num1+num2;
return sum;
}
fun();
fun2(Str,ing);
sum(1,2);
</script>
2. 函数不能重载,如果硬要,就只能覆盖
3. 隐形参数,无形参,直接传实参也可以运行
<script type="text/javascript">
function fun(){
//和数组差不多,可以取出,可以遍历
alert(arguments[0])
alert(arguments[1])
for(var i=0;i<arguments.length;i++)
alert(arguments[i]);
alert(arguments.length)//可查看参数个数
alert("隐形参数");
}
fun(123,"abc",true);
</script>
<script type="text/javascript">
function fun(num1,num2){
var sum=0;
for(var i=0;i<arguments.length;i++){
if(typeof(arguments[i])=="number")
sum+=arguments[i];
}
return sum;
}
alert(fun(1,2,3,"abc",4,5,6,7,8,9));
</script>
(八)自定义对象
00. 对象
对象的定义:
var 变量名=new Object();//对象实例化
变量名.属性名=值;//定义属性
变量名.函数名=function(){}//定义函数
对象的访问
变量名.属性 /函数名();
1.Object形式的自定义对象
var obj =new Object();
obj.name="skz";
obj.age=18;
obj.fun=function(){
alert("姓名:"+this.name+",年龄:"+this.age);
}
obj.fun();
2.花括号形式的自定义对象
var obj={
name:"skz",
age:18,
fun:function() {
alert("姓名:" + this.name + ",年龄:" + this.age)
}
};
alert(obj.name);
alert(obj.age);
obj.fun();
(九) JS事件-电脑输入设备与页面交互的响应
| 名称 | 常用事件 | 说明 |
|---|---|---|
| onload | 加载完成事件 | 页面加载完成后,常用于做页面js代码初始化操作 |
| onclick | 点击事件 | 常用于按钮的点击响应操作 |
| onblur | 失去焦点事件 | 常用于输入框失去焦点后验证其输入内容是否合法 |
| onchange | 内容发生改变事件 | 常用于下拉列表和输入框内容发生该表后操作 |
| onsubmit | 表单提交事件 | 常用于表单提交前,验证所有表单项是否合法 |
00. 事件的注册又分为静态注册(绑定)和动态注册(绑定)两种:
1. 静态注册事件
通过html标签的事件属性直接复制与事件响应后的代码,这种方式叫静态注册.
2. 动态注册事件
是指先通过js代码得到标签的dom对象,然后再通过dom对象.事件名=function(){}这种形式赋于事件响应后的代码,叫动态注册.
3. 动态注册基本步骤
- 获取标签对象
- 标签对象.事件名 =function(){}
1.onload 加载完成事件
静态注册. 事件的注册又分为静态注册(绑定)和动态注册(绑定)两种:
<html>
<head>
<meta charest="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onloadFun(){
alert('静态注册onload事件,所有代码');
}
</script>
</head>
<body onload="onloadFun();">
</body>
</html>
动态注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload=function(){
alert("动态注册onload事件")
}
</script>
</head>
<body>
</body>
</html>
2.onclick点击事件
静态注册和动态注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//静态注册
function onclickFun(){
alert('静态注册onclick事件');
}
//动态注册
//(1)获取对象
//(2)对象.事件名=function(){}
window.onclick=function(){
var clickobj=document.getElementById("btn02");
clickobj.onclick=function(){
alert("动态注册click事件");
}
}
</script>
</head>
<body>
<button onclick="onclickFun();">按钮1</button>
<button id="btn02">按钮2</button>
</body>
</html>
3.onblur失去焦点事件
静态注册和动态注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//静态注册
function onblurFun(){
console.log("静态注册onblur事件");
}
//动态注册
window.onblur=function(){
var passwordobj=document.getElementById("password");
passwordobj.onblur=function(){
console.log("动态注册onblur事件");
}
}
</script>
</head>
<body>
用户名:<input type="text" onblur="onblurFun()">
密 码:<input id="password" type="text" >
</body>
</html>
4.onchange内容发生改变事件
静态和动态注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//静态注册
function onchangeFun(){
alert("地区已更改");
}
//动态注册
window.onchange=function(){
var areaobj=document.getElementById("area");
areaobj.onchange=function(){
alert("快递公司已更改")
}
}
</script>
</head>
<body>
请选择所在区域:<br/>
<select onchange="onchangeFun()">
<option>--省市--</option>
<option>--北京市--</option>
<option>--天津市--</option>
<option>--上海市--</option>
<option>--重庆市--</option>
</select>
请选择快递公司:<br/>
<select id="area">
<option>--省市--</option>
<option>--东风快递--</option>
<option>--顺丰快递--</option>
<option>--中通快递--</option>
<option>--人肉快递--</option>
</select>
</body>
</html>
5.表单提交事件
静态注册和动态注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//静态注册
function onsubmitFun(){
alert("静态注册表单提交失败");
//如果不阻止直接return true;
//否则
return false;
}
//动态注册
window.onload=function () {
//(1)获得对象
var onsubmitobj=document.getElementById("submit");
//(2)对象.事件=function(){}
onsubmitobj.onsubmit=function () {
alert("动态注册表单提交失败")
return false;
}
}
</script>
</head>
<body>
<form action="http://www.baidu.com" method="get" onsubmit="return onsubmitFun()">
<input type="submit" value="静态注册">
</form>
<form action="http://www.baidu.com" method="get" id="submit">
<input type="submit" value="动态注册">
</form>
</body>
</html>
(十)DOM对象
1.说明
全称:Document Object Model 把文档中的属性,文本,标签,转换成对象来管理.
2.结构图
Document 对象的理解
- Document它管理了所有HTML的文档内容.
- Document是一种树结构的文档,有层级关系.
- 它让我们把所有的标签都对象化.
- 我们可以通过Document访问所有标签对象.
3.Document对象的方法
-
document.getElementById(element Id)
通过标签的id属性查找dom对象,elementId是标签的id属性值
-
document.getElementByName(elementName)
通过标签的name属性查找标签的dom对象,elementName标签的name属性值
-
document.getElementByTagName(tagname)
通过标签名查找dom对象 tagname是标签名
-
document.createElement(tagName)
方法,通过给定的标签名,创建一个标签对象,tagName是要创建的标签名.
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onclickFun() {
var usernameobj=document.getElementById("username");
var usernameText=usernameobj.value;
var patt=/^\w{5,12}$/;//正则表达式
if(patt.test(usernameText)) alert("用户名合法");
else alert("用户名不合法")
}
</script>
</head>
<body>
用户名:
<input type="text" id="username" value=" ">
<button onclick="onclickFun()">按钮1</button>
</body>
</html>
4.正则表达式
1.格式
//第一种
var patt=new RegExp(pattern,modifiers);
//第二种
var patt=/pattern/modifiers;
2.内容
modifiers 修饰符
| 修饰符 | 描述 |
|---|---|
| i | 对大小写不区分 |
| q | 找到所有匹配不是找到第一个就停止 |
| m | 多行匹配 |
方括号
| 表达式 | 描述 |
|---|---|
| [abc] | 查找abc之间任意一个字符 |
| [^abc] | 查找除abc任意一个字符 |
| [0-9] | 查找0-9任意一个数字 |
| [a-z] | 查找除0-9任意一个数字 |
| [A-Z] | 查找A-Z之间任意一个字符 |
| [A-z] | 查找A-z之间任意一个字符 |
元字符
| 元字符 | 描述 |
|---|---|
| . | 查找单个字符，除了换行和行结束符。 |
| \w | 查找单词字符(包含a-z A-Z 0-9以及下划线) |
| \W | 查找非单词字符 |
| \d | 查找数字 |
| \D | 查找非数字字符 |
| \s | 查找空白字符 |
| \S | 查找非空白字符 |
| \b | 查找单词边界字符 |
| \B | 查找非单词边界字符 |
| \n | 查找换行字符 |
| \f | 查找换页字符 |
| \r | 查找回车字符 |
| \t | 查找制表字符 |
| \v | 查找单个字符 |
量词
| 量词 | 描述 |
|---|---|
| n+ | 至少一个为n的字符串 |
| n* | 0个或多个n的字符串 |
| n? | 0个或1个为n的字符串 |
| n{X} | X个n的序列字符串 |
| n{X,Y} | X或Y个n的序列字符串 |
| n{X,} | 至少X个n的序列字符串 |
| n$ | 结尾为 n 的字符串。 |
| ^n | 开头为 n 的字符串。 |
| ?=n | 其后紧接指定字符串 n 的字符串。 |
| ?!=n | 其后没有紧接指定字符串 n 的字符串。 |
1267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
