javascript
一、js的简介
1、js是什么
Js是一种轻量级的脚本编程语言
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YxnIRwj0-1602655615055)(file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml12584\wps1.jpg)]
2、特点
灵活性 弱类型 易用 基于对象 跨平台
3、作用
- 操作元素对象，是页面实现动态效果，提高用户体验度
- 进行表单验证
- 可以发送ajax请求
4、组成部分
js由三部分组成
- ECMAscript是js的核心，定义了js的语法、变量、规则等等
- DOM-document object Model 文档对象模型
- BOM-brower object model 浏览器对象模型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cS6U7BgX-1602655615063)(file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml12584\wps2.jpg)]
二、js的引入
****行内式****:在开始标记中使用事件相对于的属性引入js代码
Eg:
****内嵌式****：可以在网页中任意位置添加script标签，标签中获取元素，添加事件属性以及属性对应的js代码
Eg:
****外链式****:外部新建一个js文件，文件中获取元素，添加事件属性以及属性对应的js代码；在需要引入该脚本文件的网页中使用script标签中的src属性引入js文件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wf50iXYI-1602655615065)(file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml12584\wps3.jpg)]
注意：
1、在获取网页中元素时需要确保该元素已经加载完成
2、script标签在引入了外部js文件之后，中间不能继续书写js代码（书写无效）
三、js中六种输出方式
1、alert（）弹窗
2、confirm（）确认弹窗 有返回值
3、console.log（）浏览器控制台输出
4、innerText 元素中输出文本内容
5、innerHTML 元素添加子元素或文本输出
6、value 对元素设置value属性设置值
Eg:
//alert("hello!");
//var flag =confirm("你确定要删除？");//根据选择的是确定、取消给出相应返回结果 true/false
//console.log(111)
//document.getElementById("box").innerText = "<span style='color:red'>中午好</span>";//覆盖元素中的文本内容
//document.getElementById("box").innerHTML = "<span style='color:red'>中午好</span>";//添加子元素或文本内容
document.getElementById("inp").value = "马云";
练习：
<style>
#lamp{
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 50%;
margin:30px 0 0 100px;
}
#btn{
width: 60px;
height: 30px;
text-align: center;
line-height: 30px;
border-radius: 4px;
background-color: dodgerblue;
margin-left:120px;
}
#staff{
width: 10px;
height: 500px;
background-color: goldenrod;
margin-left: 145px;
}
</style>
</head>
<body>
<div id="lamp"></div>
<div id="btn">关灯</div>
<div id="staff"></div>
<script>
document.getElementById("btn").onclick = function () {
var text = document.getElementById("btn").innerText;
if(text=="关灯"){
document.body.style.backgroundColor = "black";
document.getElementById("btn").innerText = "开灯";
}else{
document.body.style.backgroundColor = "white";
document.getElementById("btn").innerText = "关灯";
}
}
</script>
多种形式获取网页中的元素对象
//1、使用id获取对应元素
// var text = document.getElementById("box").innerText;
//2、使用类名获取元素--以数组形式返回，对指定元素操作需要使用索引获取
// var text = document.getElementsByClassName("outer")[0].innerText;
//3、使用标签名获取元素--以数组形式返回，对指定元素操作需要使用索引获取
var text = document.getElementsByTagName("div")[0].innerText
console.log(text);
四、js中数据类型以及运算符
Java中数据
int num = 10;
string name=”张三”；
Js中数据
Var num = 10;
Var name = “张三”
变量命名规则：
var num = 100;
// console.log(Num);//js中变量名大小写敏感
// var 1num = 100; //不能以数字开头
// var if = "mary";//不能使用关键字和保留字
var studentScoreInformation = 100;//命名以驼峰式
var stuScoreInfo = 99;//尽量简化
js中有5大基本数据类型 4大引用数据类型
基本数据类型 ：
Number :整数 小数 —还包含NaN
String :字符串 需要加引号
Undefined:未定义 本质上就是空的 只有一个值 undefined
Null: 为空 有一个为空的占位符 只有一个值null
Boolean: true/false
var num = 10.1;
console.log(typeof num)//number
var str = "12px";
console.log(typeof str);//string
var u = undefined;
console.log(typeof u);//undefined
var n = null;
console.log(typeof n);//object
var flag = (u==n);
console.log(flag);//true
var flag2 = (u===n);
console.log(flag2);//false
var ff = true;
console.log(ff==1);//true
var ss = false;
console.log(ss==0);//true
注意： ===比较，先比较类型，若得到true的结果一定是类型一致
== 先进行类型的转换 再进行比较 若得到true的结果不一定是类型一致
Number中的NaN:
//NaN是number
var numb = NaN;
console.log(typeof numb);//number
console.log(Number("12px"));//NaN
console.log(Number("12"));//Number()可以将其他数据类型转为number类型
console.log(12);
// var flag = isNaN(NaN)//is not a number? 是不是NaN ----true
// var flag = isNaN(12)//is not a number? 是不是NaN ----false
var flag = isNaN("12px")//is not a number? 是不是NaN ----true
console.log(flag);
引用数据类型:
数组array 对象object 函数function 正则regExp
var arr = [“aa”,”bb”,”cc”,”dd”];
var obj = {name:”cuihua”,age:18,address:”三里屯”}
var sum = function(){ js代码块 }
var reg = /ab/
Eg：
var arr = ["aa","bb","cc","dd"];
// console.log(arr[2]);//cc
/* for(var i=0;i<arr.length;i++){
console.log(arr[i]);
}*/
/* for(var num in arr){
console.log(arr[num])
}*/
var obj = {name:"cuihua",age:18,address:"三里屯",sex:true,1:"aaa"};
//console.log(obj.sex);
//console.log(obj.name);
//console.log(obj[1]);
//console.log(obj["address"]);
/*for(var key in obj){
console.log(obj[key]);
}*/
var sum = function(){
var c = arguments[0]+arguments[1]+arguments[2] ;
console.log(c);
return c;
}
/* function sum(){
var c = arguments[0]+arguments[1]+arguments[2] ;
console.log(c);
return c;
}
var reNum = sum(40,10,20);
alert(reNum)*/
var reg = /aa/;
var flag = reg.test("bcdaaaa");
console.log(flag);//false
Js中的运算符与java中类似
算数运算符 + - * / % mud
比较运算符 > < >= <= == ===
逻辑运算符 ！ || &&
三元运算符： var a = 10与 var b = 20比较,若a大输出“辣椒炒肉”，b大输出“肉炒辣椒”
Var str = a>b?”辣椒炒肉”:”肉炒辣椒”
五、函数
函数创建：
格式：function 函数名（）{ js代码块 }
原理：
1、在堆内存中开辟一块空间
2、将函数中的js代码块转换成js字符串存储在该堆内存中
3、将该堆内存地址赋给函数名
函数的执行：
格式： 函数名（）
原理：
1、开辟一个私有的栈内存空间
2、通过函数名获取到js字符串
3、将js字符串转换为js代码块在私有栈中运行
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8RT2jBGM-1602655615070)(file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml12584\wps46.jpg)]
六、定时器
早上闹钟、下课铃声、定时炸弹
开发中所见定时器：定时的广告弹窗、定时的数据推送、轮播图
分析可得：有两种类型
超时定时器：指定一个时间段，超过该时间执行函数----一次性
周期性定时器:每隔一段相同时间执行的函数----------------周期性
超时定时器：
格式：setTimeOut(参数1,参数2)
参数1：到点之后执行的js代码块或函数
参数2：指定时间，毫秒为单位
清除格式：clearTimeOut(参数)
参数：创建定时器时的返回值
周期性定时器：
格式：setInterval(参数1,参数2)
参数1：每个一段相同时间执行的js代码块或函数
参数2：指定间隔时间，毫秒为单位
清除格式：clearInterval(参数)
参数：创建定时器时的返回值
<script>
// setTimeout("fn()",2000);
//创建超时定时器
var id = setTimeout(fn,2000);//建议使用
function fn(){
alert('boom~');
}
//清除定时器
clearTimeout(id);
</script>
<script>
//创建周期性定时器
var id = setInterval(fn,2000);
function fn(){
alert("懒虫起床");
}
//清除定时器
clearInterval(id);
</script>
轮播图案例：
<body>
<!--1、使用img标签向网页中引入图片-->
<img src="image/img1.png" width="100%" height="420px" />
<script>
// 2、开启一个周期性定时器 定时间为3s 执行一次函数change-
setInterval(change,3000);
// 3、change中循环切换src值
var num = 1;
function change(){
num ++;
num = num>3?1:num;
document.getElementsByTagName("img")[0].src = "image/img"+num+".png";
}
</script>
</body>
七、正则
元字符
^ 开始标记
$ 结束标记
\d 0-9任意数字
\w 数字知名下划线
\D 除了\d之外其他字符
\W 除了\w之外的其他字符
. 任意字符
. .本身
量词
* {0，}出现任意多次
+ {1，}至少出现一次
? {0,1}出现0或1次
{n,} 至少出现n次
{n,m} 出现n到m次
{n} 出现n次
或
| ( )
[abcd]
[a-zA-Z]
[^abc]
练习：
1、用户名验证： 以字母开头， 有6到12位字符 除第一位之外其他位数字字母下划线
Var reg = /1\w{5,11}$/;
2、密码验证： 第一位为大写字母 后面加5到9位小写字母
Var reg = /2[a-z]{5,9}$/;
3、手机号码： 以1开头 第二位为3456789中的任意一位 后面的9位为任意数字
Var reg = /^1[3-9]\d{9}$/;
4、邮箱验证： 4到6位数字字母 加@ 加6位的数字字母下划线 可以加上.com
Var reg = /3{4,6}@\w{6}(.com)?$/;
<body>
<form action="3、开关灯.html" method="get">
USERNAME: <input type="text" name="uname" id="uname"><span id="nameMsg"></span><br>
PASSWORD: <input type="password" name="upwd" id="upwd"><br>
<input type="button" value="提交" id="sub">
</form>
<script>
document.getElementById("sub").onclick = function(){
//当点击提交按钮，获取用户名信息
var uname = document.getElementById("uname").value;
//检查用户名是否输入,未输入给出提示
if(uname==null||uname.trim().length==0){
//为空
alert("请输入用户名");
return false;
}
//使用正则验证该信息是否符合要求
var reg = /^[a-zA-Z]\w{5,11}$/;
var flag = reg.test(uname);
//符合要求继续提交表单，反之 取消提交动作
if(!flag){//验证不通过
document.getElementById("nameMsg").innerText = "格式不正确";
document.getElementById("nameMsg").style.color = "red";
return false;//取消提交动作
}else{//验证通过
document.getElementById("nameMsg").innerText = "格式正确";
document.getElementById("nameMsg").style.color = "green";
}
}
</script>
验证该信息是否符合要求
var reg = /4\w{5,11}$/;
var flag = reg.test(uname);
//符合要求继续提交表单，反之 取消提交动作
if(!flag){//验证不通过
document.getElementById(“nameMsg”).innerText = “格式不正确”;
document.getElementById(“nameMsg”).style.color = “red”;
return false;//取消提交动作
}else{//验证通过
document.getElementById(“nameMsg”).innerText = “格式正确”;
document.getElementById(“nameMsg”).style.color = “green”;
}
}
扫一扫
839
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
