一.JavaScript基础语法
1.基础语法
2.函数
3.常见对话框
4.html引入js文件
二.JavaScript对象
1.prototype属性扩展类的属性和方法，以及实现类的继承
2.内置对象
3.document对象
4.window对象
三.正则表达式
一.JavaScript基础语法
1..基础语法
注释：// or /**/
弱类型变量
显式声明：var usename=”blabla”;
var age=20;
隐式声明：不使用var关键字，直接给变量赋值(默认为全局变量，即使位于函数中也是全局变量)
sName="myname";
undefined 和 null 的 区分
空值：null var x=null;
未定义值：undefined var x;
- undefined是null派生来的，alert（null==undefined); //输出true
- typeof undefined返回的是字符串，if（typeof undefined ==“undefined”） //true
- typeof null 返回的也是字符串，但是 是“object” if(typeof null=="object") //true
命名规范：
Camel命名法：首字母小写，接下来每个单词的首字母大写 var firstName="myname";
（命名函数）
匈牙利类型命名法：在变量前加一个字母说明变量类型 var sName="myname";
（命名变量）
运算符：
==等于：只根据表面值判断，不涉及数据类型“17”==17 返回true
===绝对等于：表面值和数据类型同时判断：“17”=17 返回false
！=不等于
！==不绝对等于
字符串运算符：+
数据类型转换函数：String（），Number（），Boolean（）
var x=3;
alert(String(3)+123); //3123
var y="1234";
alert(Number(y));
var z=0;
var k=1;
alert(Boolean(z));
alert(Boolean(k));
parseInt("",进制[默认十进制])
parseFloat()
eval()
var y=parseInt("1234");//将字符串转换成数字
var z=parseFloat("123");//同上，将字符串转换为浮点数
alert(y);
alert(z);
var str="5+4";
var b=eval(str);//转换成数字并计算
alert(b);
var k=b+eval(prompt("请输入数字："));
alert(k);
b.函数function（）
1.function本质：name/value
如：
function firstName（）
{
alert（“have a good day！”）;
}
alert(firstName)；
输出结果：
function firstName（）
{
alert（
“have a good day！”）;
}
函数调用：
在事件响应中调用函数：
<input type="submit" name="Submit" value="显示" onClick=“函数名（）”>
通过链接调用函数：
<a href="JavaScript : 函数名( );">显示的文字</a>
函数定义：
function 函数名（参数列表）{}
2.使用function（）伪装一个类：
function Car(color,size)
{
this.color=color;
this.size=size;
this.run=run;
this.voice=voice;
}
function run()
{
return "I can run!";
}
function voice()
{
return "I can voice!";
}
var myCar = new Car("red","middle");
alert(myCar.color);
alert(myCar.run());
alert(myCar.voice());
3.用arguments参数重载
function firstLove（）
{
if（argunments.length==0）
{
alert("没有参数");
}
else if(arguments==1)
{
alert("一个参数");
}
else
{
alert("多个参数！")
}
firstLove();
firstLove(1);
firstLove(1,2,3);
}
4.匿名函数变量
var greetings=function()// 定义匿名函数
{
message="hello!";
return message;
}
var k=greetings(); //函数调用greetings()；
document.writeln(k);
var kkk=greetings; //将greetings引用赋值给另一个变量
var y=kkk();
document.writeln(y);
5.闭包：在一个函数里定义一个匿名函数，并返回匿名函数的引用（闭包可以让变量存活更久）
function myName(a,b)
{
var x1=a;
var x2=b;
var show=function() //定义匿名函数
{
document.writeln(a);
document.writeln(b);
}
return show; //返回匿名函数的引用
}
var one=myName(1,2); //one ,two 都是show的引用
var two=myName(3,4);
one(); //调用匿名函数
two();
c.常见对话框
alert（"x"）;弹出一个警告x
prompt("what is your name？","name");补足信息,name为初始值 ，文本框的内容就是返回值，否则返回null
confirm（“Are you sure?”）;确认对话框，返回true false
d.html引入js文件
内嵌
<script>
</script>
外部引入：
<script src=" 文件路径" type="text/javascript"></script>
二.JavaScript对象
创建对象的三种方式
1. var obj = {}; //推荐 ：简洁，效率高
2. var obj1 = new Object(); //涉及到原型的问题
3. var obj2 = Object.create();
1.使用prototype扩展类的属性和方法：
//使用function（）伪装一个类
function Car(color,size)
{
this.color=color;
this.size=size;
this.run=run;
this.voice=voice;
}
function run()
{
return "I can run!";
}
function voice()
{
return "I can voice!";
}
var myCar = new Car("red","middle");
var myCar2=new Car("white","small");
alert(myCar.color);
alert(myCar.run());
alert(myCar.voice());
Car.prototype.mode=1000;
Car.prototype.kill=function kill()
{
alert("I can Kill!");
}
alert(myCar.mode);
alert(myCar2.mode);
myCar.kill();
myCar2.kill();
使用prototype实现类的继承
2.内置对象
1.字符串对象
创建字符串对象：
var mystring = "it is a new day":
var mystring = new string("it is a new day");
字符串常用属性：
mystring.length 返回字符串的长度
字符串常用方法:
toUpperCase();转换为大写
toLowerCase();转换为小写
2.数学对象
创建数学对象：
Math.[{property | method}]
property:属性名
method：方法名
Math.E;
Math.abs(-3);
向上取整，向下取整
ceil（）向上取整 5.01取整为6
floor（）向下取整 6.99取整为6
round（）小数部分大于等于0.5时向上取整，否则向下取整
生成随机数：Math对象的random（）返回一个0~1的小树
for(var i=0;i<10;i++)
document.write(Math.random(),"<br>");
for(var i=0;i<10;i++)
document.write(Math.floor(Math.random()*10),"<br>");
3.日期对象（必须使用 new 语句）
创建日期对象：
当前时间：var mydate = new Date（）；
设置时间 var mydate = new Date（"2018/3/15"）;
设置详细时间： var mydate = new Date("2017,3,15,16,16,16");
距离1970年1月1日0分0秒n毫秒的时间 var mydate = new Date（n）；
常用方法：
setXxx：设置时间和日期值
getXxx：获取时间和日期值
toXxx：转换成指定格式
Date 对象方法
日期间的运算
日期对象与整数年，月，日相加
date.setDate(date.getDate()+value); // 增加天
date.setMonth(date.getMonth()+value);// 增加月
date.setFullyear(date.getFullyear()+value); // 增加年
日期相减
两个日期对象相减会返回两个日期之间的毫秒数，之后再进行转换
4.数组对象
创建数组对象
var myArray = new Array（6）；
var myArray = new Array（1,2,3,4,5）；
属性
myArray.length;
Array 对象方法
Array 对象方法
3.document对象
文档（document）对象代表浏览器窗口中的文档。
作用：可以访问HTML文档中包含的任何HTML标记并可以动态的改变HTML标记中的内容：表单，图像，表格，超链接等
1.document对象方法
| close() |
关闭open()方法打开的文档 |
| open() |
产生一个新文档，并清除已有文档的内容 |
| write ( “ 输出内容 ” ) |
输出文本到当前打开的文档 |
| writeln() |
加一个换行符 |
| document.createElemet(Tag) |
创建一个HTML标签对象 |
| document.getElementById(ID) |
获得指定ID值的对象 |
| document.getElementByName(Name) |
获得指定Name值的对象 |
2.document对象属性
document.title //设置文档标题等价于HTML的title标签
document.bgColor //设置页面背景色
document.fgColor //设置前景色(文本颜色)
document.linkColor //未点击过的链接颜色
document.alinkColor //激活链接(焦点在此链接上)的颜色
document.vlinkColor //已点击过的链接颜色
document.URL //获取当前页面的URl值
document.fileCreatedDate //文件建立日期，只读属性
document.fileModifiedDate //文件修改日期，只读属性
document.charset //设置字符集 简体中文:gb2312
document.fileSize //文件大小，只读属性
document.cookie //设置和读出cookie
obj.readyState;//获取文档中每个对象的当前状态eg：document.readyState | title.readyState
状态值：loading正在载入数据
loaded载入数据完毕
interactive 用户可以和该对象进行交互，不管对象是否加载完毕
complete 对象初始化完毕
3.document对象常用事件
document.body.onclick=”func()” //鼠标指针单击对象是触发
document.body.onmouseover=”func()” //鼠标指针移到对象时触发
document.body.onmouseout=”func()” //鼠标指针移出对象时触发
4.document对象的集合
images集合：网页中的图像
<body>
<img name=mypicture >
<script>
var mypicture=new Image();
document.images.mypicture.src="图片路径"；
</script>
4.window对象
window对象表示浏览器中打开的窗口。
Window 对象属性
Window 对象方法
打开一个新的浏览器窗口或查找一个已命名的窗口。
open（<URL字符串>，<窗口名称字符串>,<参数字符串>）
URL字符串：指定要打开的网页的URL地址
窗口名称字符串：指定被打开新窗口的名称
参数字符串：width=400 窗口的宽度
height=300 窗口的高度
scrollbars=yes|no 窗口是否有滚动条
。。。
创建定时事件：
setTimeout（“函数x”，t时间）；经过t时间调用函数x
setInterval（“函数y”，t时间）；每隔t时间调用函数x
frameset框架标签：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<frameset rows="25%,75%" frameborder=1 border=5 > //cols按列分，frameborder控制有无边框，border定义边框宽度，为0时无边框
<frame src="2.html">//frameset是和body，head并列的标签
<frame src="3.html">
</frameset>
</html>
2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
1234
</body>
</html>
3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
56478
</body>
</html>
frame对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<frameset cols="25%,75%" frameborder=1 border=5 > //cols按列分，frameborder控制有无边框，border定义边框宽度，为0时无边框
<frame src="2.html" name=xframe>//frameset是和body，head并列的标签
<frame src="3.html" name=yframe>
</frameset>
</html>
2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<script>
function setColor(color)
{
parent.yframe.document.bgColor=color;
}
</script>
<body>
<a href="JavaScript:setColor('red')">red</a> //颜色要用单引号，因为外面已经有双引号了
<a href="JavaScript:setColor('yellow')">yellow</a>
<a href="JavaScript:setColor('gray')">gray</a>
<a href="JavaScript:setColor('black')">black</a>
</body>
</html>
3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
56478
</body>
</html>
location对象
Location 对象方法
| 方法 |
说明 |
| assign() |
载入一个新的文档 |
| |
重新载入当前文档 |
| |
用新的文档替换当前文档（会将当前页面从历史页面中移除） |
k.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<frameset cols="25%,75%" frameborder=1 border=5 >
<frame src="2.html" name=xframe>
<frame src="3.html" name=yframe>
</frameset>
</html>
2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<script>
function setColor(urlAddress)
{
parent.yframe.location.href=urlAddress;
}
</script>
<body>
<a href="JavaScript:setColor('https://www.baidu.com')">百度</a> <br> <!--颜色要用单引号，因为外面已经有双引号了-->
<a href="JavaScript:setColor('https://www.imooc.com')">慕课网</a><br>
</body>
</html>
3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
history对象
描述：保存了用户访问页面的轨迹（在栈中保存）
类似于浏览器的向前向后按钮
<a href="JavaScript:history.go(-1);">上一页</a>
<a href="JavaScript:history.go(1);">下一页</a>
screen对象
检测屏幕尺寸：
![]()
<script>
document.writeln(screen.width);
document.writeln(screen.height);
document.writeln(screen.availHeight);
document.writeln(screen.availWidth);
document.writeln(screen.colorDepth);
</script>
三.正则表达式：验证检验
组成结构：
1.字符类
[...] 匹配方括号中的任意一个字符，可用“-”指定范围
[^...] 匹配方括号中不包含的任意字符
\d 匹配任意一个数字字符，相当于[0-9]
\D 匹配非数字字符，相当于[^0-9]
\s 匹配任意空白字符
\w 匹配任何英文字母，数字字符，以及下划线
2.量词
? 匹配前一项0次或者n次
+ 匹配前一项一次或者多次
* 匹配前一项0次或者多次
{n}匹配前一项恰好n次
{n,}匹配前一项至少n次
{n,m} 匹配前一项的次数 n=<x<=m（数字之间不能有空格）
3.指定匹配位置
^ 行开头
$ 行结尾
\b 单词边界
\B 非单词边界
4.选择匹配符
|
5.括号分组
（）
创建正则表达式对象的两种方法：
first：用RegExp类来创建对象
var objExp = new RegExp("\正则表达式","标志信息")；
var objExp = new RegExp("\\d{2,3}","g");
标志信息：
g：全局标志，设置该标志，对所有可以匹配的字符串进行匹配，否则，只匹配第一个字符串；
i：忽略大小写标志
m：多行标志；设置该标志，^可以匹配每一行的开头，$可以匹配每一行的结尾。否则只能匹配多行字符串的开头和结尾。
second:直接用变量来创建正则表达式对象
var objExp =/正则表达式/标志信息；
var objExp=/\d/g;
模式匹配的两种方法：
1.test（）方法
搜索到匹配的字符串返回true，否则返回为false；
<script>
function checkQQ()
{
var qq=document.form1.name4.value;
var obj=/[0-9][1-9]{4,15}/;
if(obj.test(qq)==true)
alert("输入QQ合法！");
else
alert("输入QQ不合法");
}
</script>
2.exec（）方法
没有搜索到字符串时返回null，否则返回一个数组。
satnding-by
原文发布时间：2018年06月19日
本文来源CSDN博客如需转载请紧急联系作者
