var a=[]; // 创建一个空数组
a.push(1,2,3); // push()方法向数组中添加元素
a.reverse(); // 另一个方法：将数组元素的次序反转
---------------------------------------------------
函数可以一次定义多次调用
函数是一种值可以赋值给变量
var square=function(x){
return x*x;
};
----------------------------------------------------
转义字符
\o NUL字符 \b 退格符 \t 水平制表符
\n 换行符 \v 垂直制表符 \f 换页符
\r 回车符 \" 双引号 \' 撇号或单引号
\\ 反斜线
-----------------------------------------------------
1.javascript 基本语法
2.javascript面向对象编程
3.bom与dom编程
4.正则表达式
javascript基本介绍：
javascript是一种广泛用于客户端Web开发的脚本语言，常用来给html网页添加动态功能
脚本语言是什么？
1.脚本语言往往不呢过独立使用，它和html/jsp/php/asp/asp.net配合使用
2.脚本语言有自己的变量，函数，控制语句（顺序，分支，循环）
3.脚本语言实际上是解释性语言（即在执行的时候 ，直接对源码进行执行）
4.js ->浏览器（js引擎来解释执行）
js的变量的类型究竟怎样决定
1.js是弱数据类型语言
即： 在定义变量的时候，统一使用var 表示，甚至可以去掉var 这个关键字
js标识符命名规范
1.由数字，字母，下划线和$符号组成，
2.不能以数字开头，
3.不能使用关键字和保留字
4.区分大小写
5.单行注释 // 多行注释/* */
js的数据类型
1.基本数据类型
分为：
①.数字
②.字符串
③.布尔型
通过typeof可以看到变量是什么类型
例：
var v1="abc";
window.alert("v1是"+typeof v1);
2.复合数据类型
数组 和 对象
3.特殊类型
null 和 undefined
4.自增自减
++a : 先自加，再运算
a++ ：先运算，再自加
--b : 先自减，再运算
b-- : 先运算，再自减
介绍prompt 和 writeln
例：
var va1=window.prompt("请输入值");
var va2=window.prompt("请输入另一个值");
document.writeln("你的输入是" + (parseFloat(va1) + parseFloat(va2)));
js也有位运算和移位运算，其规范和java一致
var a=4>>2;
window.alert(a); -- 1
js系统函数：
escape() 编码
unesacep() 解码 一般联合使用，用于防止乱码
isNaN() 判断是否是数字
函数调用的方式：
1.普通调用
函数名（参数1，参数2，...）
2.通过指向函数的变量去调用
var myvar=函数名;
myvar(实际参数);
3.关于接收函数返回值的问题
var myvar=test('abc');
// 如果test函数没有返回值，但是你又接收了，则返回的就是undefined
// 如果有返回值，则是什么就是什么
4.递归调用
function abc(num1){
if(num1>3){
abc(--num1); //递归
}
document.write(num1);
}
5.js 的函数天然支持可变参数
function abc2(){
//在js 中有一个arguments,可以访问所有传入值
window.alert(arguments.length);
//遍历所有的参数
for(var i=0;i<arguments.length;i++){
window.alert(arguments[i]);
}
}
abc2(45,60,2);
abc(4);
abc();
-------------------------------------------------------------------
数组
-------------------------------------------------------------------
多维数组---二维数组
遍历二维数组
var arr = [["ahunping",123,4.5],["a","b","c"]];
//遍历
for(var i=0;i<arr.length;i++){
//输出第一行（二维数组一个元素[数组]）
for(var j=0;j<arr[i].length;j++){
document.writeln(arr[i][j]+" ");
}
document.writeln("<br/>");
}
//输出"c"
window.alert(arr[1][2]);
/*
0 0 0 0 0 0
0 0 1 0 0 0
0 2 0 3 0 0
0 0 0 0 0 0
*/
//输出上面的数组
var arr=[[0,0,0,0,0,0],[0,0,1,0,0,0],[0,2,0,3,0,0],[0,0,0,0,0,0]];
for(var i=0;i<arr.length;i++){
for(var j=0;i<arr[i].length;j++){
document.writeln(arr[i][j]+" ");
}
document.writeln("<br/>");
}
多维数组-矩阵转置（即行列互换）
/*
2 4 6 8
8 9 0 -1
9 6 2 1
*/
var arr=[[2,4,6,8],[8,9,0,-1],[9,6,2,1]];
//定义一个新的数组
var arr2=[];
//初始化，定下有多少行
for(var i=0;i<arr[0].length){
arr2[i]=[];
}
//动态添加数据
//遍历旧数据
for(var i=0;i<arr.length;i++){
for(var j=0;j<arr[i].length;j++){
arr2[j][i]=arr[i][j];
}
}
//遍历 arr2 数组就是一个转置数组
for(var i=0;i<arr2.length;i++){
for(var j=0;j<arr2[i].length;j++){
document.writeln(arr2[i][j]+" ");
}
document.writeln("<br/>");
}
js数组排序：冒泡法
var arr=[5,0,-56,900,12,20];
var flag=false;
//大的循环比较多少次
for(var i=0;i<arr.length-1;i++){
//小的循环
for(var j=0;j<arr.length-1-i;j++){
if(arr[j]>arr[j+1]){
var t = arr[j];
arr[j]=arr[j+1];
arr[j+1]=t;
flag=true;
}
}
if(flag){
flag=false;
}else{ break;}
}
for(var i=0;i<arr.length;i++){
document.writeln(" ");
}
数组查找：
① 顺序查找 ② 二分查找
二分查找：
二分查找有一个前提：该数组是有序的，如果不是有序的数组，则不能使用二分查找
var arr=[1,4,6,8,9,45,80];
//思路：找到数组的中间数（midVal），和你要查找的数（findVal）进行比较，
//如果midVal> findVal 则说明findVal 在数组的走边，就把该数组二分（就只在左边查找）
function binarySearch(arr,findVal,leftIndex,rightIndex){
//防止无穷递归
if(leftIndex>rightIndex){
//提示找不到
document.writeln("找不到");
return;
}
//找到中间这个值
var midIndex = Math.floor((leftIndex+rightIndex)/2);
var midVal = arr[midIndex];
//比较
if(midVal > findVal){
//在左边找
binarySearch（arr,findVal,leftIndex,midIndex-1);
}
else if(midVal < findVal){
binarySearch（arr,findVal,midIndex+1,rightIndex);
}
else{
document.writeln("找到 下标为" + midIndex);
return;
}
}
//测试
binarySearch(arr,8,0,arr.length-1);
----------------------------------------------------------------
js面向对象编程
-----------------------------------------------------------------
澄清概念：
js 中基于对象 == js面向对象
js 中没有类class,但是它取了一个新的名字叫 原型对象，因此 类 == 原型对象
为什么需要对象？
1.js中的对象属性可以动态添加
2.属性没有限制
类与对象的区别和联系：
1.类是抽象的概念的，代表一类事物
2.对象是具体的代表一个实体
3.对象是以类为模板创建的
创建对象的方式有5种:
1.工厂方法--使用new object创建对象并添加相关属性
2.使用构造函数来定义类（原型对象）
3.使用prototype
4.构造函数及原型混合方式
5.动态原型方式
使用构造函数来定义类（原型对象），然后再创建对象实例
基本语法：
function 类名/原型对象名(){ }
创建对象：
var 对象名 = new 对象名（）
特别说明：
① js中一切都是对象
② 类其实也是一个对象（比较特别）
补充说明：（带var 和不带 var的区别）
//全局变量
var abc = 89;
function test(){
//在函数里，如果你不带var，则表示使用全局的abc变量
//如果你带上var, 则表示在test（）中，定义一个新的abc变量
abc = 900;
}
test();
window.alert(abc);
访问对象的属性有两种：
1.普通方式
对象名.属性名
2.动态访问
对象名["属性"] ---可拼接
js 还提供一种方式，主动释放对象内存
delete 对象名.属性名; //这样就会立即释放 对象的属性空间
this:
function Person(){
this.name="abc"; //name属性是公开的
this.age=15;
var name1="sd"; //name1属性是私有的只能在内部使用
}
var p1=new Person();
var p2=new Person();
p2.name="顺平";
window.alert(p1.name+" "+p2.name+" "+p1.name1);
注意事项：
this 不能放在类的外部使用，否则调用者就变成了window
对象--成员函数（方法）
function Person(name,age){
//这个就是使用传入的实际参数，去初始化属性
this.name=name;
this.age=age;
//输出自己的名字，这里 this.show 就是一个公开的函数，函数名是show
this.show=function(){
document.write("名字："+ this.name);
}
//添加jisuan 函数，可以计算从1 +..+1000的结果
this.jisuan=function(){
var res = 0;
for(var i=1;i<=1000;i++){
res+=1;
}
return res;
}
}
var p1=new Person("宋佳",90);
p1.show();
var p2 = new Person("林城",12);
p2.show();
document.write("<br/> res="+p1.jisuan());
//多个对象共享某个函数
function Dog(){ }
//使用prototype 去绑定一个函数给shout
Dog.prototype.shout=function(){
window.alert("小狗");
}
var dog1=new Dog();
dog1.shout();
var dog2=new Dog();
dog2.shout();
Array 对象
var arr1 = new Array(4);
arr1[0] = "a"
arr1[1] = "b"
arr1[2] = "c"
arr1[3] = "d"
//遍历数组
for(var i=0;i<arr1.length;i++){
document.write(arr1[i]+" ");
}
//使用Array提供的reverse()方法，颠倒数据
arr1.reverse();
document.write("<br/>");
//如何给所有Array 对象添加一个方法 find（val）
Array.prototype.find=function(val){
for(var i=0;i<this.length;i++){
if(val == this[i]){
return i;
}
return -1;
}
document.write("b 下标="+arr1.find("b"));
继承：
function Stu(name,age){
this.name=name;
this.age=age;
this.show=function(){
window.alert(this.name+" "+this.age);
}
}
function MidStu(name,age){
this.stu=Stu;
this.stu(name,age); //js中实际上是通过对象冒充，来实现继承(因为js是动态语言，如果不执行，则不能实现继承效果)
}
function Pupil(name,age){
this.stu=Stu;
this.stu(name,age);
}
var midStu=new MidStu("顺平",20);
window.alert(midStu.name);
特别说明：通过对象冒充，js可以实现多重继承的效果(用的少)
js的重载和重写
重载：js中不支持重载（即 不可以通过参数的个数来决定调用哪个函数），
但是js本身支持可变参数，所以，可以看成天然支持重载
重写：
子类可以重新写函数，来覆盖父类的某个方法
覆盖：
//父类
function Stu(name,age){
this.name=name;
this.age=age;
this.show=function(){
window.alert(this.name+" "+this.age);
}
}
//子类
function MidStu(name,age){
this.stu=Stu;
this.stu(name,age); //js中实际上是通过对象冒充，来实现继承(因为js是动态语言，如果不执行，则不能实现继承效果)
this.show=function(){
window.alert("已覆盖");
}
}
var midStu=new MidStu("顺平",20);
midStu.show(); //这里就会去调用子类的show()
js内部类：
Math类：
Math.ceil(4.5) //5 向上取整
Math.floor(4.5) //4 向下取整
Math.round(4.77) //5 四舍五入取整
Math.round(Math.random()*100) //1到100之间的随机整数
Data类：
new Data().toLocaleString() //当前日期
getYear() //返回年
getMonth() //返回月
getDate() //返回日
getHours() //返回时
getMinutes() //返回分
getSeconds() //返回秒
string类：
indexOf() //f返回某个字符串值在该字符串中首次出现的位置
split() //分割字符串
substr() //提取从某一下标开始的指定数目的字符
substring() //提取字符串中介于两个指定下标之间的字符串
charAt() //返回指定位置的字符
length //得到字符串的长度
toString() //转化成某个格式的字符串
match()
replace()
search()
Array对象：
var myarr=new Array();
//动态添加数据
myarr[0]="sp";
myarr[1]=90;
window.alert(myarr.length+" "+myarr); // 2 sp90
myarr.pop(); //出栈
window.alert(myarr.length+" "+myarr); //1 sp
myarr.push("abcd"); //入栈
window.alert(myarr.length+" "+myarr); //2 spabcd
js事件机制：
-------------------------------------------------------
改变style内部属性：
背景颜色 js里是backgroundColor
引用外部样式：
<link href="mycss.css" rel="stylesheet" type="text/css">
<link href="mycss2.css" rel="stylesheet" type="text/css">
function test4(eventobj){
//获取mycss.css 中所有class选择器都获取
var ocssRuless = document.styleSheets[0].rules; -- 0 引用样式里面的第一个
//从ocssRuless 中取出你希望的class
var style1=ocssRuless[0]; --mycss.css 文件中第一个规则
if(eventobj.value=="黑色"){
style1.style.backgroundColor="black";
}
else if(eventobj.value=="红色"){
style1.style.backgroundColor="red";
}
}
<div id="div1" class="atyle1"> div1 </div>
<input type="button" value="黑色" οnclick="test4(this)"/> --this
<input type="button" value="红色" οnclick="test4(this)"/>
一个事件可以被多个事件监听
window 有三个事件：
onload:页面打开
onberforeunload: 关闭页面前
onunload: 关闭页面
鼠标事件：
oncontextmenu = "return flase" //点击右键不弹出菜单 一个页面中，BODY中用οncοntextmenu='return false'来取消鼠标右键
onselectstart //目标对象被开始选中时
一般事件：
onclick 鼠标点击事件
onDblClick 鼠标双击事件
onMouseDown 鼠标上的按钮被按下了
onMouseUp 鼠标按下后，松开时激发的事件
onMouseOver 当鼠标移动到某对象范围的上方时触发的事件
onMouseMove 鼠标移动时触发的事件
onMouseOut 当鼠标离开某对象范围时触发的事件
onKeyPress 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]
onKeyDown 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象]
onKeyUp 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]
窗口状态栏 字体来回移动示例：
<script language="javascript" type="text/javascript">
var space_num = 0;
var dir = 1;
function myScroll(){
var space_my = "";
space_num = space_num + 1 * dir;
if(space_num > 50 || space_num <0){
dir = dir * -1;
}
for(var i=0;i<space_num;i++){
space_my = space_my + " ";
}
window.status = space_my + "世界你好！";
}
function startIt(){
setInteval("myScroll()",100); //每隔100毫秒调用一次myScroll()函数
}
</script>
<body οnlοad="startIt()">
</body>
history 对象：go(),back(),forward()
作用：该对象包含客户端访问过的URL信息
<script language="javascript">
function goback(){
history.back(); //等价于 history.go(-1);
}
</script>
<a href="#" οnclick="goback();"> 返回上一级页面</a>
location 对象：
location.reload() 重新加载当前文档
location.hostname 获取URL地址
screen 对象：
height 返回显示屏幕的高度（按像素）
width 返回显示屏幕的宽度（按像素）
availHeight 返回显示屏幕可用高度（去掉windows任务栏）
availWidth 返回显示屏幕可用宽度
关于绑定事件的细节：
1.直接和某个html控件绑定 比如：
<input type="button" value="刷新页面" οnclick="test()" />
2.通过getElementById() 获得元素后，再绑定监听
<script>
document.getElementById("but1").οnclick=test;
</script>
3.如果我们有一个投票系统，但是只能投一次票（使用attachEvent detachEvent）
<script language="javascript">
function test(){
window.alert("你投了一次票");
//解除事件绑定
document.getElementById("but1").detachEvent('onclick',test);
}
</script>
<body>
<input type="button" id="but1" value="投票" />
<script language="javascript">
// document.getElementById("but1").οnclick=test;
document.getElementById("but1").attachEvent("onclick",test);
</script>
</body>
<script>
function test(event){
//用户每按下一个键，就去判断是不是一个数
if(event.keyCode<48 || event.keyCode>57){
window.alert("你输入的不识数字");
return false;
}
}
</script>
<body>
<input type="text" οnkeypress="return test(event)" id="text1" />
<input type="button" οnclick="test()" value="提交" />
</body>
document对象：
定义：document对象代表的整个html文档因此可以去访问到文档中的各个对象（元素）
1.write
这个是向文档输出文本，html或js代码
2.writeln
这个是向文档输出文本，html或js代码与write不同的地方是writeln是换行输出
但是对浏览器来说没有区别
3.open() 打开文档
4.close() 关闭open()打开的文档
5.getElementById() 根据html元素的id查找元素（如果有多个相同的id 则取第一个）
6.getElementsByName() 根据html元素的name获取对象集合
7.getElementsByTagName()
通过标签的名字，获取对象集合
//通过标签名来获取对象（元素）
function test(){
var myObjs = document.getElnmentsByTagName("input");
for(var i=0;i<myObjs.length;i++){
window.alert(myObjs[i].value);
}
}
如何动态的创建html元素
例：
function test1(){
//创建元素
var myElement=document.createElement("input"); //写希望创建的html元素标签名
myElement.type="button";
myElement.value="我是button";
myElement.id="id1";
//给新的元素天机啊必要的信息
//myElement.href="http://www.sina.com";
//myElement.innerText="链接到sina";
//myElement.style.left="200px";
//myElement.style.top="300px";
//myElement.style.position="absolute";
//添加到document.body
//document.body.appendChild(myElement);
//将元素添加到div
document.getElementById("div1").appendChild(myElement);
}
function test2(){
//删除一个元素（删除一个元素是有前提的：必须获得父级元素）
//这是第一种删除方法（比较不灵活）
document.getElementById("div1").removeChild(document.getElementById('id1'));
//第二种比较灵活(推荐)
document.getElementById('id1').parentNode.removeChild(document.getElementById('id1'));
}
<input type="button" οnclick="test1()" value="动态的创建一个按钮" />
<input type="button" οnclick="test2()" value="删除一个元素 id是id1" />
<div id="div1" style="width:200px;height:400px; border:1px solid red;">div1</div>
body对象：
1.appendChild() 添加元素
2.removeChild() 删除元素
3.getElementsByTagName() 通过html元素名称，得到对象数组
4.bgColor 文档背景色
5.backgorund 文档背景图
6.innerText 某个元素间的文本
7.innerHtml 某个元素的html代码
8.onload事件 文档加载时触发
9.onunload事件 文档关闭时触发
10.onbeforeunload事件 文件关闭前触发
11.clienWidth 网页可见区域宽
12.clienHeight 网页可见区域高
13.offsetWidth 网页可见区域宽(包括边线的宽)
14.offsetHeigth 网页可见区域高(包括边线的宽)
小太阳移动挡板示例：
<script>
//定义全局变量
directX=1; //X轴的方向
directY=1; //Y轴的方向
sunX=0; //小太阳的坐标x
sunY=0; //小太阳的坐标y
speed=2;
function sunMove(){
sunX += directX * speed;
sunY += directY * speed;
//修改div的left top
sundiv.style.top = sunY + "px";
sundiv.style.left = sunX + "px";
//判断什么时候转变方法
//X方法（offsetWidth可以返回当前这个对象事件宽度）
if(sunX + sundiv.offsetWidth >= document.body.clienWidth || sunX <= 0){
directX = -directX;
}
//判断Y方法
if(sunY + sundiv.offsetHeigth >= document.body.clienHeight || sunY <= 0){
directY = -directY;
}
}
setInterval("sunMove()",10);
</script>
<body style="background-image: url('./1.jpg')">
<div id="sundiv" style="position:absolute">
<img src="太阳.gif">
</div>
</body>
---------------------------------------------------------------------------
在文本域里换行要用:\r\n
在table里如果只是为了调整同列<td>的宽度，只在第一行的td 定义class 设置宽度就行
if(document.forms[0].pwd1.value.length<=3){
span2.innerText="密码要求大于3位";
return false;
}
if(document.forms[0].pwd1.value != document.forms[0].pwd2.value){
span3.innerText="两次输入的密码不一样";
return false;
}
submit 是提交按钮，提交完成后刷新页面，
如果不想刷新页面要在方法里返回一个 return false; οnclick="return checkinfo()"
在验证表单的时候，可以在
<form action="" οnsubmit="函数名" />
也可以：
<input type="submit" οnclick="函数名" />
表单:
---------------------------------------------------------------------------
<body>
<h1>个人信息</h1>
<form action="">
U:<input type="text" name="username" /><br/>
P:<input type="password" name="pwd" /><br/>
<input type="submit" value="提交">
</form>
<h1>兴趣爱好</h1>
<form action="">
爱好1:<input type="text" name="hobby1" /><br/>
爱好2:<input type="text" name="hobby2" /><br/>
<input type="submit" value="提交">
</form>
<input type="button" value="tesing" οnclick="test()" />
</body>
<script type="text/javascript">
function test(){
//如何取得所有的表单
var allforms = document.forms;
window.alert(allforms.length); //2
//可以通过allforms 去访问指定表单
window.alert(allforms[0].username.value); //第一个表单username的值
window.alert(allforms[1].hobby2.value); //第二个表单hobby2的值 //等价于下面的写法
window.alert(allforms.item(1).hobby2.value);
}
</script>
------------------------------------------------------------------------------
img对象：
img可以响应onerror事件 和onload事件，
如果图片加载成功响应onload事件，如果加载失败则响应onerror事件
例：
<img src="太阳.gif" οnerrοr="test1()" οnlοad="test2()" />
all对象：
function abc(){
var myall=document.all; //取出的是html所有的节点元素
for(var i=0;i<myall.length;i++){
window.alert(myall[i].nodeType+" "+myall[i].nodeName);
}
}
正则表达式
-----------------------------------------------------------
问题1：
给你一个字符串（或一篇文章），请你找出所有四个数字连在一起的子串，并且这四个数字要满足：
第一个与第四位相同，第二位与第三位相同，比如 1221,5775,...
问题2：
比如验证电子邮件，身份证，是不是数...
9147
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
