1.定义：
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，
内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言
2.组成部分：（W3C文档中可查找）
ECMAScript:js基础语法(规定 关键字 运算符 语句 函数等等...)
BOM:浏览器对象模型
DOM:文档对象模型
3.作用:
1.修改html页面的内容
2.修改html的样式
3.完成表单的验证
4.数据类型：
1.原始类型:(5种)
Null
String
Number
Boolean
Undefined
通过 typeof运算符可以判断一个值或者变量是否属于原始类型,若属于原始类型,他还可以判断出属于那种原始类型
typeof 变量|值;
若变量为null,使用typeof弹出的值 object
注意： 使用typeof的返回值
undefined - 如果变量是 Undefined 类型的
boolean - 如果变量是 Boolean 类型的
number - 如果变量是 Number 类型的
string - 如果变量是 String 类型的
object - 如果变量是一种引用类型或 Null 类型的2. 引用类型:(了解)
var s= new String(); alert(typeof s); //此时的s就是一个对象object引用类型通常叫做类（class）也就是说，遇到引用值，所处理的也就是对象
注意：ECMAScript 并不是真正意义上的类，
ECMAScript定义了“对象定义”逻辑上等价于其他语言上的类。
5.变量声明:
1.var 变量名=初始化值;
2.var 变量名;
变量名=初始化值;
注意:
var可以省略 建议不要省略
一行要以分号结尾,最后一个分号可以省略,建议不要省略3.运算符:
运算符:
比较运算符: > >= < <=
若两边都是数字 和java一样
若一边为数字,另一边为字符串形式的数字,将字符串形式的数字转换成数字再进行比较 3>"2"
若一边为数字,另一边为字符串,返回一个false 3>"hello"
两边都是字符串的时候,比较ascii
等性运算符 == ===
== :只判断值是否相同
===:不仅判断是否相同,还要判断类型是否相同
语句:
if语句 和java一样
for while 语句和java一样
switch 和java一样(区别,switch 后面跟字符串. 还可以跟变量)
6.JS和html的整合：
方式1:在页面上直接写
将js代码放在 <script></script>标签中,一般放在head标签中
方式2:独立的js文件
通过script标签的src属性导入
7.js事件驱动函数
只有发生事件的时候函数才会执行，通过事件驱动函数
1.函数定义格式：
方式1：（常用）
function 函数名(参数){
函数体;
}注意：
函数不用声明返回值类型
参数不需要加类型
函数调用 函数名(参数)function add (a,b) { alert(a+b); } //调用 add(2,2);方式2:
var 函数名=function(参数)
{
函数体;
}2.js中的事件：
常见事件：
单击: onclick
表单提交: onsubmit 加在form表单上的 οnsubmit="return 函数名()" 注意函数返回值为boolean类型
页面加载: onload
元素失去焦点：onblur 比如在一个文本框输入完内容后点击其他文本框以外的部位...........
3.js事件和函数的绑定:
方式1: 通过标签的事件属性 <xxx οnclick="函数名(参数)"></xxx>案发
<script> function BtnClick() { alert(试试就试试); } </script> <input type ="button" value="点击我试试" onclick="BtnClick()"> //注意：如果没有onclick="BtnClick(),网页只会出现 点击我试试方式2：给元素派发事件
1. document.getElementById("id值").οnclick=function(参数){....}
2. document.getElementById("id值").οnclick=函数名（一种是匿名函数，另外一种是写好函数再调用）<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function btnCli(){ alert(44944); } function init(){ alert("页面加载成功"); //***1 } var btn2cli=function(){ alert("244944"); } </script> document.getElementById("btn2").onclick=btn2cli;//***2 </head> <body onload="init()"> <input type="button" value="点击我试试" onclick="btnCli()"> <input type="button" value="点击试试2" id="btn2"> </body> //***3 </html>此时上面的代码会因为获取到的onclick是空而出现问题
解析：
js是一个解释型语言，他从上往下逐步翻译，走到底**2时
document.getElementById("btn2")他是并获取不到下面的btn2属性的
改正1：在**3位置放，此时内存中存在
<script> document.getElementById("btn2").onclick=btn2cli; </script>改正2：但如果还想上面的head语句块中执行时
function init() { //alert("页面加载成功"); document.getElementById("btn2").onclick=btn2cli; }就是在页面加载成功的时候它才做这个事情也是可以的
注意:
内存中应该存在该元素才可以派发事件
a.将方式2的js代码放在html页面的最下面
b.在页面加载成功之后在运行方式2的js代码 onload事件.
8.js获取元素：
1. 获取元素方式1: var obj=documnet.getElementById("id值");
2.获取元素的value值： obj.value;
3.获取元素的标签体中的内容 ： obj.innerHTML;
9.应用实例1-完成表单的验证
以姓名和密码校验证的表单为例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function checkForm(){
//获取用户名及其内容
var usernameObj=document.getElementById("username");
var username=usernameObj.value;
//判断value是否为空 若为空不能提交表单,
if(username==null || username == ""){
alert("用户名不能为空");
return false;
}
//获取密码及其内容
//1.获取密码元素
var pwdObj=document.getElementById("password");
//2.获取密码的值
var pwdValue=pwdObj.value;
//3.判断
if(pwdValue==null || pwdValue==""){
alert("密码不能为空");
return false;
}
return true;
}
</script>
</head>
<body>
<form action="#" method="get" onsubmit="return checkForm()">
姓名:<input name="username" id="username"/><br>
密码:<input type="password" name="password" id="password"><br>
<input type="submit" value="保存"/>
<input type="reset" />
</form>
</body>
</html>
10.应用部分
加载方式：
body加载
<body οnlοad="init()">
............
</body>
window加载
<script>
//window.onload == onload相同
//window.setInterval()== setInterval()相同
οnlοad=function(){
..........
}
</script>定时器:(BOM-window对象)：
1. var id=setInterVal(code,毫秒数):每隔指定的毫秒数执行一次函数 周期
2.var id=setTimeout(code,毫秒数):延迟指定的毫秒数之后 只执行一次函数
清除定时器:
1.clearInterval(id);
2.claerTimeout(id);bom(浏览器对象模型)总结：
先看几张w3c文档介绍style属性的表部分图
1.bom它是无规范的，但厂商们的默认的统一规范：
所有的浏览器都有5个对象：
Window:窗口
Location:定位信息 (地址栏)
History:历史
Navigator对象属性，浏览器版本神魔的， 了解
Screen频幕的信息：大小，分辨率......。 了解1.window对象详解:
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，
并为每个框架创建一个额外的 window 对象。
常用的属性:
通过window可以获取其他的四个对象
1.1window.location 等价域 location
1.2 window.history 等价于 history常用的方法
消息框
alert("...."):警告框
confirm("你确定要删除吗?"):确定框 返回值:boolean
prompt("请输入您的姓名"):输入框 返回值:你输入的内容
定时器
设置定时器
setInterval(code,毫秒数):周期执行
setTimeout(code,毫秒数):延迟多长事件后 只执行一次.
例如:
1.setInterval(showAd,4000);
2.serInterval("showAd()",4000);
清除定时器
clearInterval(id):
clearTimeout(id):
打开和关闭
open(url):打开
close():关闭2.location:定位信息
常用属性:
href:获取或者设置当前页面的url(定位信息)
location.href; 获取url
location.href="...";设置url 相当于 a标签3.history:历史
back();后退
forward():向前
★go(int)
go(-1) 相当于 back()
go(1) 相当于 forward()//制作一个按钮前进 <body> 我是a页面<br /> <a href="b.html">b.html</a><br> <input type="button" value="前进" onclick="forw()" /> </body> <script> //前进 function forw(){ history.go(1) } </script> //在设置一个b.html就可以跳转到b了
1.案例实现-打字机
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> var s="好好学习，天天向上!"; var i=0; var divObj; function init(){ divObj=document.getElementById("divId"); setInterval(show,200); } //往div中写内容 function show(){ i++; var s_=s.substring(0,i); //往div中设置内容 divObj.innerHTML=s_; //当字符串写完的时候 重新开始 if(i==s.length){ i=0; } } </script> </head> <body onload="init()"> <div id="divId"></div> </body> </html>2.案例实现-轮播图片
<script> var i=1; function init(){ //创建一个定时器 setInterval(changeImage,1000); } //更改图片 //<img id="luboid" src="../img/1.jpg"/> function changeImage(){ //获取图片元素 var imgObj=document.getElementById("luboid"); i++; //修改图片元素的src属性 imgObj.src="../img/"+i+".jpg"; //当i>3的时候 重置i if(i>=3){ i=0; } } </script>注意：1 ../的使用，次代码是运行在Hbuider下的,所以定时更换照片只用更改src的属性即可。
2. <body οnlοad="init()"> ... </body>的使用(body加载方式)
3.案例实现-定时弹出广告
效果：打开页面后4秒,展示广告,2秒之后,该广告隐藏.再停2秒,继续展示.
步骤分析:
1.确定事件
2.编写函数
a.获取元素
b.操作元素先在网页的指定的部位隐藏（display: none）要弹出的照片
<div id="ad" style="width:100%;display: none;"> <img src="../img/ad_.jpg" width="100%" /> </div>然后在script标签中写入具体实现的过程
<script> //记录次数 var i=0; //定时器id var timer; onload=function(){ //设置定时器 间隔4秒后展示图片 timer=setInterval(showAd,4000); } //展示广告方法 展示2秒之后隐藏 function showAd(){ //展示的次数加1 i++; //若i=3 清空由setinterval设置的定时器 if(i==3){ clearInterval(timer); } //1.获取广告 var divObj=document.getElementById("ad"); //2.修改广告的样式 将其显示 divObj.style.display="block"; //3.2秒之后隐藏 只执行一次 setTimeout(hideAd,2000); } //隐藏广告 function hideAd(){ //1.获取广告 var divObj=document.getElementById("ad"); //2.修改样式 将其隐藏 divObj.style.display="none"; } </script>补充：//修改js的样
操作css属性
document.getElementById("id").style.属性="值"
属性:就是css中属性 css属性有"-" 例如:backgroud-color
若有"-" 只需要将"-"删除,后面第一个字母变大写即可
function btnCli(){ //1.获取元素 var obj=document.getElementById("divid0"); //alert(obj) //2.操作元素 //添加背景色 按照rgb比例的颜色 obj.style.backgroundColor="#ff0"; //添加边框 1个像素， 实体 红色 obj.style.border="1px solid red"; //添加宽和高 obj.style.width="100px"; obj.style.height="100px"; }
11.常见事件：
常见的事件:
焦点事件:★
onfocus
onblur
表单事件:★
onsubmit
onchange 改变
页面加载事件:★
onload
鼠标事件(掌握)
onclick
鼠标事件(了解)
ondblclick:双击
onmousedown:按下
onmouserup:弹起
onmousemove:移动
onmouserover:悬停
onmouserout:移出
键盘事件(理解)
onkeydown:按下
onkeyup:弹起
onkeypress:按住
12.了解：
13.应用实例-隔行换色
获取元素:
document.getElementById("id"):通过id获取一个元素
document.getElementsByTagName("标签名"):通过标签名获取一种元素(多个)返回一个数组
Array:
常用属性:
length:数组的长度关键代码：
<script> //页面加载成功 onload=function(){ //1.获取所有的tr var arr=document.getElementsByTagName("tr"); //alert(arr); //alert(arr.length); //2.判断奇偶数 添加不同的样式 遍历数组 for(var i=1;i<arr.length;i++){ if(i%2==0){ arr[i].style.backgroundColor="#FFFFCC"; }else{ arr[i].style.backgroundColor="#BCD68D"; } } } </script>
14.应用实例-全选或者全不选
1.确定事件 最上面那个复选框的单击事件 onclick
2.编写函数:让所有的复选框和最上面的复选框状态保持一致
a.获取最上面这个复选框选中状态 通过checkbox的checked属性即可
b.获取其他的复选框,设置他们的checked属性即可
可以通过以下两种方案获取元素
document.getElementsByClassName():需要给下面所有的复选框添加class属性
document.getElementsByName():需要给下面所有的复选框添加name属性首先给每一行加上一个class="itemSelect"
eg:<td><input type="checkbox" class="itemSelect"></td>
然后给最上层的框的点击属性中加this
<th><input type="checkbox" οnclick="selectAll(this)" ></th>
其次执行下面操作
<script> function selectAll(obj){ //获取当前复选框的选中状态 var flag=obj.checked; //获取所有的复选框 var arr=document.getElementsByClassName("itemSelect"); //遍历数组,将所有的复选框和flag相同 for(var i=0;i<arr.length;i++){ arr[i].checked=flag; } } </script>
15.dom(文档对象模型）
当浏览器接受到html代码的时候,浏览器会将所有的代码装载到内存中,形成一棵树(document树)
节点(Node)
文档节点 document
元素节点 element
属性节点 attribute
文本节点 text
获取节点:
通过document可以获取其他节点:
常用方法:
document.getElementById("id值"):获取一个特定的元素
document.getElementsByTagName("标签名"):通过标签名获取一种元素(多个)
document.getElementsByClassName("class属性的值"):通过class属性获取一类元素(多个)
document.getElementsByName("name属性的值"):通过name属性获取一类元素(多个)
设置获取获取节点的value属性
dom对象.value;获取
dom对象.value=" 值";设置
设置或者获取节点的标签体
dom对象.innerHTML;获取
dom对象.innerHTML="值";设置
获取或者设置style属性
dom对象.style.属性;获取
dom对象.style.属性="值";设置
获取或者设置属性
dom对象.属性
/
对于htmldom的操作若在js或者htmldom 查找不到 去查找xml dom
关于文档的操作 在 xml dom 的document中
关于元素的操作 在 xml dom 的element中
appendChild(dom对象):在一个元素下添加孩子
16.应用实例-左右选中
1.确定事件,按钮的单击事件
2.编写函数:
点击移动单|多个的:
a.获取左边选中的选项 select对象.options--数组
遍历数组 判断是否选中 option对象.selected
b.将其追加到右边的下拉选中
rightSelect对象.appendChild(option);
点击移动所有的
a.获取左边的所有的选项
b.一个个的追加过去单个移动
<script> onload=function(){ //给单移按钮派发事件 document.getElementById("toRight1").onclick=function(){ //获取左边所有的option var arr=document.getElementById("left").options; //遍历数组 判断是否选中 for(var i=0;i<arr.length;i++){ //判断是否选中 若选中 则追加(移动)到右边的select中 if(arr[i].selected){ document.getElementById("right").appendChild(arr[i]); break; } } } </script>多个移动：去掉break,同时在里面加上i--
原因：l两个相邻的会是剪切的行为，默认的是选中一个，会导致移动只移动一个，所以加上i--。
全部移动：
17数组总结:
数组：
语法:
new Array();//长度为0
new Array(size);//指定长度的
new Array(e1,e2..);//指定元素
非官方
var arr4=["aa","bb"];
常用属性:
length
注意:
1.数组是可变的var arr1 = new Array(); alert(arr[1]); 结果：undefined var arr2 = new Array(1，2，3); arr2[3]=4; alert(arr2[3]); 结果：42.数组可以存放任意值
常用方法:(了解)
存放值:对内容的操作
pop():弹 最后一个
push():插入 到最后
shift():删除第一个
unshift():插入到首位
打印数组:
join(分隔符):将数组里的元素按照指定的分隔符打印
拼接数组:
concat():连接两个或更多的数组，并返回结果。
对结构的操作:
sort();排序
reverse();反转
18 应用实例-省市联动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
// 定义二维数组:
var arr = new Array(4);
arr[0] = new Array("哈尔滨","齐齐哈尔","大庆","佳木斯");
arr[1] = new Array("长春市","吉林市","四平市","通化市");
arr[2] = new Array("沈阳市","锦州市","大连市","铁岭市");
arr[3] = new Array("郑州市","洛阳市","安阳市","南阳市");
</script>
</head>
<body>
<form action="#" method="get">
<input type="hidden" name="id" value="007"/>
姓名:<input name="username" value="jianqi"/><br>
密码:<input type="password" name="password" value="123" disabled="disabled"><br>
性别:<input type="radio" name="sex" value="1" checked="checked">男
<input type="radio" name="sex" value="0">女
<br>
爱好:<input type="checkbox" name="hobby" value="eat">吃
<input type="checkbox" name="hobby" value="drink" checked="checked">喝
<input type="checkbox" name="hobby" value="sleep" checked="checked">睡
<br>
头像:<input type="file" name="photo"><br>
籍贯:
<select name="pro" onchange="selCity(this.value)">
<option >-请选择-</option>
<option value="0">黑龙江</option>
<option value="1">吉林</option>
<option value="2">辽宁</option>
<option value="3">河南</option>
</select>
<select name="city">
<option >-请选择-</option>
</select>
<br>
自我介绍:
<textarea name="intr" cols="40" rows="4">good!</textarea>
<br>
<input type="submit" value="保存"/>
<input type="reset" />
<input type="button" value="普通按钮"/>
</form>
</body>
</html>
<script>
function selCity(index){
//alert(index);
var cities=arr[index];
//获取市的下拉选
var citySelObj=document.getElementsByName("city")[0];
//先初始化
citySelObj.innerHTML="<option >-请选择-</option>";
//遍历数组 组装成option 追加到select
for(var i=0;i<cities.length;i++){
citySelObj.innerHTML+=("<option>"+cities[i]+"</option>");
}
}
</script>
<!--
-->
19.
引用类型总结:
原始类型中的String Number Boolean都是伪对象,可以调用相应的方法
Array:数组
String:
语法:
new String(值|变量);//返回一个对象
String(值|变量);//返回原始类型var s="aa"; var s1=new String(true); alert(typeof s1); 结果：object 因为是new出来的 var s2 =String(false); alert(typeof s2); 结果：string
常用方法:
substring(start,end):[start,end)
substr(start,size):从索引为指定的值开始向后截取几个
charAt(index):返回在指定位置的字符。
indexOf(""):返回字符串所在索引
replace():替换
split():切割
常用属性:length
Boolean:
语法:
new Boolean(值|变量);
Boolean(值|变量);
非0数字 非空字符串 非空对象 转成true 是”“的话是false
Number
语法:
new Number(值|变量);
Number(值|变量);
注意:
null====>0
fale====>0 true====>1
字符串的数字=====>对应的数字
其他的NaN
Date:
new Date();
常用方法:
toLocalString()
RegExp:正则表达式
语法:
直接量语法 /正则表达式/参数
直接量语法 /正则表达式/
new RegExp("正则表达式")
new RegExp("正则表达式","参数")
参数:有两个
i:忽略大小写
g:全局
常用方法:拿正则去匹配字符串
test() :返回值为booleanvar pattern = /正则表达式/; // 匹配数字 [0-9] \d // 匹配所有英文字符 [a-zA-Z] // 匹配单词字符 [a-zA-Z0-9_] \w // 匹配任意 . // 匹配起始 ^ 匹配结束 $ // 匹配次数 {m,n} 最少出现 m 次，最多出现 n 次 // {m, } 最少出现 m 次, 没有上限 // {0, } 0到多次 * // {1, } 1到多次 + // {0,1} 0到1次 ?
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script> var r1=/^[0-9]$/;匹配一个数字 var i=1; //alert(r1.test(i)); false var r2=/^[a-z0-9_-]{3,16}$/ var s="12"; //alert(r2.test(s));//false s="123" alert(r2.test(s));//true </script> <body> </body> </html>
Math:
Math.常量|方法
Math.PI
Math.random() [0,1)
全局:
★
decodeURI() 解码某个编码的 URI。
encodeURI() 把字符串编码为 URI。Number():强制转换成数字
String():转成字符串
parseInt():尝试转换成整数
parseFloat():尝试转换成小数
eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行。
409
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
