JavaScript
一、JavaScript
表单验证-减轻服务器端压力
JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言
解释性语言，边执行边解释
1. 组成
ECMAScript(ES)
DOM
BOM
2. 执行原理
3. 引入方式
<html>
<head>
</head>
<body>
</body>
<script type="text/javascript">
document.write("hello js");
</script>
</html
<script src="./js/index.js" type="text/javascript"></script>
<div onclick="alert(33)">666</div>
<div onclick="javascript:alert(\"aaa\")">666</div>
4.代码调试方式
alert();//弹窗
doccument.write();//网页输出
console.log();//控制台输出
二、ECMAScript
1. 变量
变量声明使用var关键字
typeof()查看变量的数据类型
1.1 let 和 var 的区别
//let 关键字定义的变量的作用域就在当前的语句块内
//var 函数级作用域
2 .数据类型
object
对象类型
number
number数值类型
boolean
true和false
string
string类型：单引号或者双引号
undefined
undefined 一个变量没有定义初始值，那么它的值就是undefined，未定义的意思。
null
null一个变量的初始值为null，有值，但是值为null
NaN
不是一个数字
String属性
字符串对象.length
String方法
| 方法名称 | 说明 |
|---|---|
| charAt(index) | 返回在指定位置的字符 |
| indexOf(str,index） | 查找某个指定的字符串在字符串中首次出现的位置 |
| substring(index1,index2) | 返回位于指定索引 index1和index2之间的字符串，并且包括索引index1对应的字符，不包括索引index2对应的字符 |
| split(str) | 将字符串分割为字符串数组 |
3. 数组
//1.定义数组
var arr = new Array();
arr[0]=10;
arr[1]=20;
arr[2]=30;
arr[3]="java";//不给值就是empty
arr[6]=true;
//2.定义数组
var fruit = new Array("apple",98,true);
//3.定义数组
var arr1=[10,"java",true];
for(var i=0;i<arr1.length;i++){
console.log(arr1[i])
}
//4.定义数组，长度为5
var fruit = new Array(5);
//追加一个值
arr1.push(50);
//扩容
var arr = new Array(5);
arr.length=10;
//缩小
var arr = new Array(5);
arr.length=2;
属性方法
| 类别 | 名称 | 描述 |
|---|---|---|
| 属性 | length | 设置或返回数组中元素的数目 |
| 方法 | join() | 把数组的所有元素放入一个字符串，通过一个的分隔符进行分割 |
| sort() | 对数组排序 | |
| push() | 向数组末尾添加一个或者更多元素，并返回新的长度 | |
| shift() | 删除并返回数组的第一个元素 | |
| unshift() | 向数组的开头添加一个或多个元素，并返回新的长度 | |
| pop() | 删除并返回数组的最后一个元素 | |
| splice(x,y) | 删除元素，并向数组添加新元素;x开始 删除的下标，y删除的个数 | |
| splice(1，0，"你好") | 在下标为1的位置添加元素“你好“ | |
| toString() | 把数组转化为字符串,并返回结果 | |
| reverse() | 数组反转 |
4. 运算符
| 类型 | 运算符 |
|---|---|
| 算数运算符 | +，-，，/，%，++，-- |
| 赋值运算符 | =，+=，-= |
| 比较运算符 | >，<，>=，<=，，!=，=，!== |
| 逻辑运算符 | &&，||，!，^，&，| |
alert(true=="true");//F
alert(true==1);//T
alert(true=="1");//T
alert("true"==1);//F
alert("true"=="1");//F
alert(1=="1");//T
5. 逻辑控制语句
if
if(条件){
//javaScript代码;
}
else{
//javavScript代码;
}
switch
switch(表达式){
case 常量1:
javaScript语句1;
break;
case 常量2:
javaScript语句2;
break;
...
default:
javaScript语句3;
}
for
for(初始化;条件;增量){
js代码;
}
while
while(条件){
js代码;
}
for-in
var fruit = new Array("apple",98,true);
for(var i in fruit){
console.log(fruit[i]);
}
do-while
var i=0;
do{
console.log(++i);
}while(true)
6. 注释
//
/**/
7. 输入输出
alert()
alert("提示信息");
prompt()
prompt("提示信息","输入框的默认信息");
prompt("请输入你喜欢的颜色","红色");
prompt("请输入你喜欢的颜色","");
8. 语法规定
代码区分大小写
变量，对象和函数的名称
分号
9. with域的用法
//里面所有内容都基于document对象
with(document){
write("hello js");
write("hello js");
write("hello js");
write("hello js");
}
10. 函数
不用定义属于某个类，直接使用
函数分类：系统函数和自定义函数
10.1 常用系统函数
parselnt(“字符串”)
将字符串转换为整型数字
如: parselnt(”86”)将字符串“86“转换为整型值86
parseFloat(”字符串”)
将字符串转换为浮点型数字
如: parseFloat("34.45”)将字符串“34.45“转换为浮点值34.45
eval()
//计算
var num1= 1;
var num2= 2;
var sign= "";
var result = eval(num1+sign+num2)
isNaN()
用于检查其参数是否是非数字
escape()
转码
unescape()
解码
var str = 'AAAA';
var aTest= new Array(); //['ff'[,'er']] \ new Array(10); \ new Array('ff','fee');
var obj = new Obejct(); // {name:'zhangsan',height:198}
var today = new Date();
// Math对象示需要声明。
字符串：
length属性:长度
concat 方法（String）连接两个或更多个字符串。
indexOf(string) 返回出现字符串的位置
substr(num1,[num2])截取字符串
toLowerCase() 转换成小写
toUpperCase() 转换成大写
replace(str1,str2) 字符串替换
Array:
concat 返回一个由两个数组合并组成的新数组。
join 返回一个由数组中的所有元素连接在一起的 String 对象。
pop 删除数组中的最后一个元素并返回该值。
push 向数组中添加新元素，返回数组的新长度。
shift 删除数组中的第一个元素并返回该值。
unshift 返回一个数组，在该数组头部插入了指定的元素。
sort 返回一个元素被排序了的 Array 对象
reverse 返回一个元素反序的 Array 对象。
slice 返回数组的一个片段。
splice 从数组中删除元素，
Math:
ceil(数值) 大于或等于该数的最小整数
floor(数值) 小于或等于该数的最大整数
min(数值1,数值2) 返回最小值
max(数值1,数值2) 返回最大值
pow(数值1,数值2) 返回数值1的数值2次方
random() 返回随机数 0---1
round(数值) 四舍五入
sqrt(数值) 开平方根
Date:
getYear() 返回年份（2位或4位）
getFullYear() 返回年份（4位）
getMonth() 返回月份 0-11
getDate() 返回日期 1-31
getDay() 返回星期数 0-6
getHours() 返回小时数 0-23
getMinutes() 返回分钟数 0-59
getSeconds() 返回秒数 0-59
getMilliseconds() 返回亳秒数0-999
例：获取本地时间
var myDate=new Date(dtime.replace(/-|\./g,"/")); //dtime格式 2013-08-09 24:08:09 ie
myDate.getYear(); //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-????)
myDate.getMonth(); //获取当前月份(0-11,0代表1月)
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
var mytime=myDate.toLocaleTimeString(); //获取当前时间
myDate.toLocaleString( ); //获取日期与时间
setTimeout();
setInterval();
10.2 自定义函数
var sum = function(){
return 10+20;
}
var sum =new Function("aler('我是函数声明')");
//无参
function sum(){
return 10+20;
}
//有参
function sum(num1,num2){
return num1-num2;
}
//函数互相调用
function mathDemo(n1,n2){
alert(sum(n1,n2));
}
11. 变量
11.1 全局变量
定义在script脚本中，方法之外的变量叫做全局变量,被整个页面共享。
局部变量是定义在函数之中，或者是代码块之中的变量叫做局部变量，作用在函数内部。
与java不同的地方
var num1=100;
function cale1(){
if(num1>3){
var num3=101;
}
alert(num3);
}
//定义在代码中的变量，在方法内部都可以进行访问
12. 事件
| 名称 | 说明 |
|---|---|
| onload | 一个页面或一幅图像完成加载 |
| onclick | 鼠标单击某个对象 |
| onmouseover | 鼠标移到某个元素上 |
| onmouseout | 鼠标离开 |
| onmousemove | 鼠标移动事件 |
| onkeydown | 某个键盘按键被按下 |
| onchange | 域的内容被改变 |
| onfocus | 获得焦点事件 |
| onblur | 失去焦点 |
13. 创建对象
//方式1：
let obj01 = new Object();objo1.name = "AA";
objo1.age = 17;
objo1.sex = "男";
objo1.getInfo = function(){
return this.name + ","+this.sex+","+ this.age;
}
document.write(obj01.getInfo())
//方式2：
function user(name,age){
this.name = name;
this.age = age;
this.eat = function(){
alert("eat方法");
}
}
document.write(user("zs",11))
//方式3：
var obj3 = {name:"zs",sex:"nan",age:88,getInfo:function(){
return this.name + ","+this.sex+","+ this.age;
}};
document.write(obj3.getInfo())
//方式4：
var stu = '{"name":"zs","age":19}';
var obj = eval("("+stu+")");
//原型prototype对象
function user(name,age){
this.name = name;
this.age = age;
this.eat = function(){
alert("eat方法");
}
}
function user2(){
this.run = function{
alert("run方法");
}
}
user.prototype = new user2();
var us =new user();
us.run();
三、BOM对象和DOM对象
1. BOM对象
1.1 三种弹窗
window.alert();//弹窗
window.confirm();///确认 取消
window.prompt();//输入
提供了独立于内容的，可以与浏览器窗口j进行互动的对象结构
BOM可实现功能
弹出新的浏览器窗口
移动，关闭浏览器窗口以及调整窗口的大小
页面的前进，后腿
1.2 属性
window.属性名="属性值"
window.location="http://www.baidu.cn"
表示跳转到百度首页
| 属性名称 | 说明 |
|---|---|
| history | 有关客户访问过的URL的信息 |
| location | 有关当前URL的信息 |
1.3 方法
| 方法名称 | 名称 |
|---|---|
| prompt() | 显示可提示用户输入的对话框 |
| alert() | 显示带有一个提示信息和一个确定按钮的警示框 |
| confirm() | 显示一个带有提示信息确定和取消按钮的对话框 |
| close() | 关闭浏览器窗口 |
| open() | 打开一个新的浏览器窗口,加载给定URL所指定的文档 |
| setTimeout() | 在指定的毫秒数后调用函数或计算表达式 |
| setInterval() | 按照指定的周期(以毫秒计)来调用函数或者表达式 |
1.4 open方法参数
window.open("弹出窗口的url","窗口名称","窗口特征")
2. history对象
2.1 属性
length
返回浏览器历史列表中的url数量
2.2 常用方法
| 名称 | 说明 |
|---|---|
| back() | 还在history对象列表中的前一个url |
| forward() | 加载history对象列表中的下一个url |
| go() | 加载history对象列表中的某个具体的url，负数后退，正数前进，0刷新 |
3. location对象
3.1 常用属性
| 名称 | 说明 |
|---|---|
| host | 设置或返回主机名和当前URL的端口号 |
| hostname | 设置或者返货当前URL的主机名 |
| href | 设置或者返回完整的URL |
3.2 常用方法
| 名称 | 说明 |
|---|---|
| reload() | 重新加载当前文档 |
| replace() | 用新的文档替换当前文档 |
4. Screen对象
window.screen.heigth;
window.screen.width;
//获得当前屏幕分辨率
5. Navigator对象
window.navigator.userAgent;
//用户代理
6. 内置对象
6.1 Date对象
var 日期对象 = new Date（参数）
参数格式：MM DD,YYYY,hh:mm:ss
var today = new Date();//返回当前日期和时间
var tdate = new Date("september 1,2013,14:58:12");
6.1.1 常用方法
| 方法 | 说 明 |
|---|---|
| getDate() | 返回 Date 对象的一个月中的每一天，其值介于1～31之间 |
| getDay() | 返回 Date 对象的星期中的每一天，其值介于0～6之间 |
| getHours() | 返回 Date 对象的小时数，其值介于0～23之间 |
| getMinutes() | 返回 Date 对象的分钟数，其值介于0～59之间 |
| getSeconds() | 返回 Date 对象的秒数，其值介于0～59之间 |
| getMonth() | 返回 Date 对象的月份，其值介于0～11之间 |
| getFullYear() | 返回 Date 对象的年份，其值为4位数 |
| getTime() | 返回自某一时刻（1970年1月1日）以来的毫秒数 |
使用Date对象的方法显示当前时间的小时、分钟和秒
function disptime(){
var today = new Date();
var hh = today.getHours();
var mm = today.getMinutes();
var ss = today.getSeconds();
document.getElementById("myclock").innerHTML="现在是:"+hh +":"+mm+": "+ss;
}
disptime();
<div id="myclock"></div>
6.2 Math对象
6.2.1 常用方法
| 方法 | 说 明 | 示例 |
|---|---|---|
| ceil() | 对数进行上舍入 | Math.ceil(25.5);返回26Math.ceil(-25.5);返回-25 |
| floor() | 对数进行下舍入 | Math.floor(25.5);返回25Math.floor(-25.5);返回-26 |
| round() | 把数四舍五入为最接近的数 | Math.round(25.5);返回26Math.round(-25.5);返回-26 |
| random() | 返回0~1之间的随机数 | Math.random();例如：0.6273608814137365 |
如何实现返回的整数范围为2~99？
var iNum=Math.floor(Math.random()*98+2);
6.2.2 随机选择颜色
function selColor(){
var color=Array("红色","黄色","蓝色","绿色","橙色","青色","紫色");
var num=Math.ceil(Math.random()*7)-1;
document.getElementById("color").innerHTML=color[num];
}
6.3 定时函数
制作的时钟特效示例中，时间为什么不改变？
由于时间在不停地走，所以应该每隔1秒调用显示时间的方法，如何解决？
setTimeout()
setTimeout("调用的函数",等待的毫秒数)
var myTime＝setTimeout("disptime() ", 1000 );
<input name="s" type="button" value="显示提示消息" onclick="timer()" />
function timer(){
var t=setTimeout("alert('3 seconds')",3000);
}
setInterval()
setInterval("调用的函数",间隔的毫秒数)
var myTime＝setInterval("disptime() ", 1000 );
如果要多次调用，使用setInterval()或者让disptime()自身再次调用setTimeout()
6.4 清除函数
clearTimeout()
clearInterval()
clearTimeout(setTimeOut()返回的ID值)
var myTime＝setTimeout("disptime() ", 1000 );
clearTimeout(myTime)；
clearInterval ()
clearInterval(setInterval()返回的ID值)
var myTime＝setInterval("disptime() ", 1000 );
clearInterval(myTime)；
制作显示年、月、日、星期几，并且显示上午（AM）和下午（PM）的十二进制的时钟
获得年、月、日、时、分、秒
按12小时制显示小时
判断星期几
使用setInterval()定时显示当前时间
如果hour(小时)>12，则hour=hour-12
6.5 BigNumber
https://mikemcl.github.io/bignumber.js/
var num1= 0.1;
var num2= 0.2;
console.log(BigNumber(num1).plus(num2)-0);
console.log(BigNumber(num1).minus(num2)-0);
console.log(BigNumber(num1).times(num2)-0);
console.log(BigNumber(num1).div(num2)-0);
console.log(BigNumber(num1).mod(num2)-0);
6.6 arguments对象
function method1(){
document.write(arguments.length);
for (let i = 0; i < arguments.length; i++) {
document.write(arguments[i] + " ");
}
}
method01(1,2,3,4,5,6,7);
7. Document对象
7.1 常用属性
| 名称 | 说明 |
|---|---|
| referrer | 返回载入当前文档的URL |
| URL | 返回当前文档的URL |
7.2 Document直接获取节点
| 名称 | 说 明 |
|---|---|
| getElementById() | 返回对拥有指定id的第一个对象的引用 |
| getElementsByName() | 返回带有指定名称的对象的集合 |
| getElementsByClassName() | 返回带有指定类名的对象的集合 |
| getElementsByTagName() | 返回带有指定标签名的对象的集合 |
| write() | 向文档写文本、HTML表达式或JavaScript代码 |
7.3 Document间接获取节点
| 属性 | 说明 |
|---|---|
| .childNodes | 获取所有子节点（空白文档也算节点） |
| .parentNode | 获取父节点 |
| .nextSibling | 获取下一个节点,包含空白文档 |
| .nextSibling.nextSibling | 获取下下一个节点，包含空白文档 |
| .nextElementSibling | 获取下一个节点，不包含空白文档 |
| .previousSibling | 获取上一个节点,包含空白文档 |
| .previousSibling.previousSibling | 获取上上一个节点，包含空白文档 |
| .previousElementSibling | 获取上一个节点,不包含空白文档 |
7.4 操作属性
let a = document.getElementById("div1");
let ty = a.type;
let va = a.value;
let na = a.name;
let hi = div.getElementsByTagName("div");
hi.style.width="300px";
//background-color:需要使用驼峰命名规则进行改变
hi.style.backgroundColor="red";
7.5 操作文本
let hi = div.getElementsByTagName("div");
var inn = hi.innerHTML;//获取html内容
var inn = hi.innerText;//获取文本
//用于双标签
//单标签用value获得
<!--特殊的操作-->
<select id="sele" onchange="demo2()">
<option value="0">--请选择--</option> <option value="1">中国</option>
<option value="2">美国</option>
</select>
<textarea rows="20" cols="20"id="tex">1223455</textarea>
<script type="text/javascript">
var value = getElementById("sele").value;
var value = getElementById("tex").value;
</script>
7.6 添加节点
//创建节点
let fom = document.getElementById("fom");
let p = document.createElement("p");
p.innnerText="照片";
let inp = document.createElement("input");
inp.type="file";
//添加节点对象
fom.appendChild(p);
p.appendChild(inp);
//获得最后一个节点对象
var lastNode=document.getElementById("lastNode");
//添加到之前
fom.insertBefore(p,lastNode);
//移除子节点
p.removeChild(inp);
p.removeChild(inp2);
//移除本身
p.remove();
//替换节点
p.replaceChild(p,img);//把img替换成p
7.6.1 操作节点样式
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<script>
let list = document.getElementByTagName("li");
for (let i = 0; i < list.length; i++) {
switch (i % 2) {
case 0:
list[i].style.color = "red";
break;
case 1:
list[i].style.color = "blue";
break;
}
}
</script>
7.7 a链接触发javascript
<a href="javascript:changebc()">点击更换主题</a>
7.8 控制表单提交方式
方式1：
onsubmit = "return checkName()"
方式2：
//手动提交表单
document.fom.submit();//name=fom
//根据id获取后.submit();
7.9 表单校验
7.9.1 正则表达式
^:开始
[0-9][a-z A-Z]:数字 字母
{2，4}:段域 至少是2位 最多是4位
{3}:指定范围是3位
{2,}:至少2位
$:结束
\d:[0-9]
\w:[0-9 a-z A-Z]
//汉字正则表达式
var reg=/^[\u4e00-\u9fa5]{3,5}$/
reg.test(内容);
7.10 获取表单值的方式
<form action=""></form>
<form action=" name="myForm">
<input type="text" id="userName"name="uName" value="IT老邪">
</form>
<script>
var userName = document.getElementById("userName").value;
var userName = document.myForm.uName.value;
var userName = document.forms[1].uName.value;
var userName = document.forms['myForm'].uName .value;
var userName = document.forms.myForm.uName.value;
var userName = document.getElementsByTagName("input")[0].value;
var userName = document.getElementsByTagName("input").item(0).value;
document.write(userName);
</script>
7.11 操作表格
var tab = document.getElementById("tb_table");
var row = tab.insertRow();//添加行
row.insertCell(0).innerHTML = "00";//添加单元格
row.insertCell(1).innerHTML = "01";//添加单元格
8. 多选按钮
<body>
<ul>
<li><inputtype="checkbox" name="hobby[]" value="1">琴</li>
<li><inputtype="checkbox" name="hobby[]" value="2">棋</li>
<li><inputtype="checkbox" name="hobby[]" value="3">书</li>
<li><inputtype="checkbox" name="hobby[]" value="4">画</li>
</ul>
<button onclick="doSel(1)">全选</button>
<button onclick="doSel(2)">全不选</button>
<button onclick="doSel(3)">反选</button>
</body>
<javascript>
function doSel(sel) {
// 获取所有的input标签
let list = document.getElementsByTagName("input");
for (let i = 0; i < list.length; i++) {
switch (sel) {
case 1: // 全选
list[i].checked = true;
break;
case 2: // 全不选
list[i].checked = false;
break;
case 3: // 反选
list[i].checked= !list[i].checkedbreak;
break;
}
}
}
</javascript>
9. 进度条
<head>
<meta charset="UTF-8">
<title>进度条</title>
<script>
var progress=null;
var time = null;
var m = 0;
function running(){
time = setInterval(function(){
progress.value = ++m;
if (m > 100){
clearInterval(time);
time = null;
document.getElementById("btn").disabled=true;
alert("下载完成");
return;
}
},100);
}
function doStart(){
progress = document.getElementById("pid");
if(!time)
running();
}
</script>
</head>
<body>
<progress id="pid" value="50" max="100">-- 浏览器不支持这个进度条部件</progress>
<button onclick="doStart()" id="btn">下载</button>
</body>
10. 级联效果
<body>
<h3>级联效果</h3>
<hr>
<select name=" id="sid01" onchange="method(this.value)">
<option selected disabled>-- 选择班级 --</option>
<option value="1">一班</option>
<option value="2">二班</option>
<option value="3">三班</option>
</select>
<select name=" id="sid02" style="display: none;"></select>
<script>
var list = new Array();
list[1] = ["101","102","103"];
list[2] = ["201","202","203"];
list[3] = ["301","302","303"];
function method(n){
var sid02 = document.getElementById("sid02");
sid02.style.display="block";
for(var i = 0;i<list[n].length;i++){
sid02.add(new Option(list[n][i],i));//option(内容,value属性中的内容)
}
}
</script>
</body>
11. 右键菜单
//如果需要跟踪鼠标轨迹的话，需要在匿名函数中传递 ent(事件对象) 参数
document.oncontextmenu = function(ent) {
// 处理兼容性问题
var ent = ent || window.ent;
// 确定鼠标的位置，显示菜单
uid.style.left = ent.clientX + "px";
uid.style.top = ent.clienty + "px";
// 显示UL
uid.style.dispaly = "block";
return false;
}
// 隐藏UL
document.onclick = function(){
uid.style.display = "none";
}
12. 事件冒泡
mid.onclick = function () {
alert("大的DIV被点击了! ~");
};
sid.onclick = function (ent) {
var event = ent || window.event;
alert("小的DIV被点击了!~");
// event.stopPropagation();
event.cancelBubble = true ;
};
