Javascript基础
简介
什么是Javascript？
JS是网景公司开发的一种基于客户端（client-side，区别于服务器端server-side）浏览器，事件驱动式的网页脚本语言。其作用是：用于交互式操作、表单验证、网页特效、Web游戏、服务器脚本开发等。
Javascript创建方式
JS有两种创建方式，分为外部与内部，且两种方式都可置于body或head标签内。在实际运用中常置于body底部，因为HTML代码从上到下执行，先加载CSS可避免html出现无样式状态；减少浏览器打开时间，避免因为加载JS代码块阻塞网页呈现。
1.外部
<script type="text/javascript" src="myScript.js"></script>
2.内部
- Javascript:前缀
- 在script标签中加入JS文件，格式如下：
<script type="text/javascript">
JS文件
</script>
语法
变量和数据类型
变量：JS是弱类型脚本语言，使用变量前，可以无需定义，直接使用。
A.定义方式
- 隐式定义：直接给变量赋值
- 显式定义：使用var关键字定义变量
B.变量声明规则
- 以字母开头，其余字母可以是下划线_，美元$，任意字母与数字
- 以美元$，和下划线_开头合法，但不常用
- 区别大小写
数据类型：JS是弱类型脚本语言，声明变量时无需指定变量的数据类型。JS是解释时动态决定的，数据保存在内存中有数据类型。
A.常用数据类型
- 数值（number）类型：整数和浮点数
- 布尔（boolean）类型：true或false
- 字符串（string）类型：用“”或‘’括起来
- 未定义（undefined）类型：专门用来确定一个已经创建但无初值的变量
- 空（null）类型：表明某个变量的值为空
- 对象（object）类型：JS中对象，数组等
数组 var a=[];
var a=new Array();//不推荐使用
B.数据类型转换
- 数值转换成字符串，用“+”或tostring()方法
- 字符串转换成整型，parseInt()
- 字符串转换成浮点型，parseFloat()
C.字符串处理
| charAt() | 获取字符串特定索引处字符 |
| toUpperCase() | 将字符串的所有字符转换成大写字母，相反的转换成小写为toLowerCase() |
| indexOf() | 返回字符串中特定字符串第一次出现位置，相反的最后一次为lastindexOf() |
| subString() | 返回字符串某个字串，不支持负数参数，格式为[ ) |
| slice() | 返回字符串某个字串，支持负数参数,当从右往左，-1，-2，... |
| concat() | 用于将多个字符串拼加成一个字符串 |
| repalce() | 替换某个字符串中的子串 |
| split() | 用于将一个字符串分割成多个字符串，可指定分隔符，返回数组 |
| match() | 使用正则表达式搜索目标子串，返回目标字符串，不匹配返回null |
| search() | 使用正则表达式搜索目标子串，返回目标字符串，不匹配返回-1 |
判断两字符串是否相等用==即可，无须用equals()方法
D.正则表达式
是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符以及这些特定字符的组合，组成一个规则字符串，这个规则字符串用来表达对字符串的一种过滤逻辑。
目的：匹配字符串并获取特定部分。
1.创建正则表达式语法：
var 对象名=/规则/;
var 对象名=new RegExp('规则');
2.RegExp对象使用的常用方法：
| exec(str) | 检索字符串中指定值。返回找到值，并确定其位置，若无，返回null |
| test(str) | 检索字符串中是否有指定值。返回true或false |
3.正则表达式支持的常用通配符
| . | 匹配任意字符 |
| d | 匹配0-9所有数字 |
| D | 匹配非数字（有一个即可） |
| s | 匹配所有空白数字，包括空格、制表符、换行符、回车符等 |
| S | 匹配所有非空白符（有一个即可） |
| w | 匹配所有单词字符，包括0-9，26个英文字母和下划线 |
| W | 匹配所有非单词字符（有一个即可） |
| 匹配所有单词边界（首字母，末字母） | |
| B | 匹配所有非单词边界 |
| [abc] | 查找[]之间的任意字符 |
| [^abc] | 查找不在[]之间的任意字符 |
| [0-9] | 查找0至9之间的数字，等同于/d |
| [a-z] | 查找从a到z之间的字符 |
| [A-Z] | 查找从A到Z之间的字符 |
| [A-z] | 查找从A到z之间的字符 |
| (red|blue|green) | 任何指定选项 |
| n+ | 匹配包含至少一个n的字符串 |
| n* | 匹配包含0个或多个n的字符串 |
| n? | 匹配包含0个或一个n的字符串 |
| n{X} | 匹配包含X个n的序列字符串 |
| n{X,Y} | 匹配包含X个或Y个序列字符串 |
| n{X，} | 匹配包含至少X个n序列字符串 |
| n$ | 匹配包含结尾为n的字符串 |
| ^n | 匹配包含开头为n的字符串 |
正则表达式修饰符语法：
var 对象名=/规则/修饰符;
| i | 不区分大小写匹配 |
| g | 全局匹配 |
| m | 多行匹配 |
E.数组
var a=[];
var a=new Array();//不推荐使用
运算符
| 算术运算符 | + - * / % ++ -- |
| 赋值运算符 | = |
| 比较运算符 | > < >= <= == != ===（严格恒等于） !== |
| 逻辑运算符 | && || ! |
| 位运算符 | & | ~ ^ << >> |
| 其他运算符 | 三目（？ ：） ，（取最右边表达式结果） void typeof（判断字符属于什么类型数据） instanceof |
流程控制语句
A.分支语句：if和switch
B.循环语句：while,do while,for,for in
for(变量 in 对象){
执行的语句块；
}//一般用来遍历对象 遍历数组中的所有数组元素或遍历JS对象的所有属性
C.提供break（直接终止循环）和continue（终止本次循环，直接进入下一次循环）来改变循环的控制流
常用特殊语句型
A.语句块
B.空语句
C.异常抛出语句 throw new Error（‘xxx’）；
D.异常捕捉语句：
try{
//代码块，有任何一个语句抛出异常，该代码结束运行
}
catch(e){
//try代码块抛出异常时执行此代码块
//e为局部变量，用来指向Error对象或其他抛出对象
//catch只有一个，e前不用加var
}
finally{
//无论代码怎么，finally代码块始终执行
}
E.with语句 with（重复对象名）
函数
函数是事件驱动的或者当它被调用时执行的可重复使用的代码块。
A.函数定义的三种方式
- 有名函数
function 函数名（参数列表）{ 语句块； } - 匿名函数
var func=function(参数列表){ 语句块； } - 使用function类构造匿名函数
new function(参数列表，函数执行体)；
- 立即执行函数IIFE(Immediately Invoked Function Expression)
(function foo(){ 语句块； })(); //第一个()把函数变成表达式，第二个()执行这个函数 改进 (function (){ 语句块； }());
B.函数返回值
JS无声明返回类型，可有函数返回值。return 值
C.局部变量和局部函数
变量只有全局变量跟局部变量之分。
- 全局变量：直接定义的变量
- 局部变量：函数中定义的变量。只在函数内部有效，可覆盖全局变量
- 外部函数：可直接调用其内部函数
- 局部函数：函数中定义
D.函数调用的三种方式
- 直接调用函数
格式： 对象.函数引用； //函数未指明分配给哪个对象使用，默认window对象
- 以call方法调用函数
格式： 函数引用.call(调用名，参数1，参数2，……)
- 以apply方法调用函数
格式： 函数引用.apply(调用名，arguments) //arguments相当于数组，可存放多个参数
对象
JS对象-常用的内置对象：是一种非常重要的数据类型，是自我包含的数据集合。
A.创建Date对象方法
| new Date(); |
| new Date(month dd,yyyy hh:mm:ss); |
| new Date(yyyy,mth,dd,hh,mm,ss); |
| new Date(yyyy,mth,dd); |
| new Date(ms); |
Date对象获取时间细节方法：
| getDate() | 从Date对象返回一个月中的某一天（1~31） |
| getDay() | 从Date对象返回一周中的某一天（0~6） |
| getMonth() | 从Date对象返回月份（0~11） |
| getFullYear() | 从Date对象以四位数字返回年份 |
| getHours() | 返回Date对象的小时（0~23） |
| getMinutes() | 返回Date对象的分钟（0~59） |
| getSeconds() | 返回Date对象的秒数（0~59） |
| getTime() | 返回1970年1月1日至今的毫秒数 |
Date对象设置时间细节方法：
| setDate() | 从Date对象设置一个月中的某一天（1~31） |
| setMonth() | 从Date对象设置月份（0~11） |
| setFullYear() | 从Date对象以四位数字设置年份 |
| setHours() | 设置Date对象的小时（0~23） |
| setMinutes() | 设置Date对象的分钟（0~59） |
| setSeconds() | 设置Date对象的秒数（0~59） |
| setTime() | 设置1970年1月1日至今的毫秒数 |
B.Math对象的常用方法
| abs(x) | 返回绝对值 |
| ceil(x) | 上舍入 |
| floor(x) | 下舍入 |
| max(x,y) | 返回最大值 |
| min(x,y) | 返回最小值 |
| pow(x,y) | 返回x的y次幂 |
| random() | 返回0~1之间的随机数 |
| round(x) | 返回四舍五入 |
| sqrt(x) | 返回x的平方根 |
JS对象-创建：对象是拥有属性（是与对象相关的值）和方法（是能在对象上执行的动作）的数据。
A.访问对象属性
格式：1.objectName.propertyName
2.objectName.["propertyName"] //常用于for...in遍历对象属性
B.访问对象方法
格式：objectName.methodName()
C.创建对象
- 使用new关键字调用构造器创建对象
例1:
function student(name,age){
this.name=name;
this.age=age;
}
var s1=new student();
var s2=new student("Jack",30);
document.write(s1.name+"--"+s1.age+"<br/>"); //undefined--undefined
document.write(s2.name+"--"+s2.age+"<br/>"); //Jack--30
例2：
function student(name,age){
this.name=name;
this.age=age;
student.gender="male";
this.info=function(){
document.write(this.name+"--"+this.age+"--"+student.gender+"<br/>");
}
}
var s1=new student();
s1.info(); //undefined--undefined--male
var s2=new student("Jack",30);
s2.info(); //Jack--30--male
- 使用object直接创建对象
例：
var myobj=new object();
myobj.name="Jack";
myobj.age=30;
my.info=function(){
document.write(this.name+"--"+this.age+"<br/>");
}
myobj.info(); //Jack--30
- 使用JSON语法创建对象
- JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。
- JSON 格式：{名：值，名：值，……} //值可以是各种数据的值，也可以是JSON对象。JSON数组用［］。
例1：{"name":"Jack","age":"30","email":"h.chen@iotek.com.cn"} 例2：{"people":[ {"firstname":"Bill","lastname":"Mclaugnlin"}, {"firstname":"Jason","lastname":"Hunter"}, {"firstname":"Elliotte","lastname":"Harold"}, ]} - JS使用JSON创建对象：object={名：值，名：值，……}
例1：var p={ name:"Jack"; gender:"male"; info:function(){ document.write(this.name+"--"+this.gender); } //此处不加逗号 }; //此处不加分号不报错，但不规范 p.info(); //Jack--male 例2: var person={ name:"Jack", age:30, son:[ {name:"Tom",age:2}, {name:"Jerry",age:5} ], info:function(){ document.write("父亲名字："+this.name+",年龄："+this.age+"<br/>"); for(var child in this.son){ document.write("儿子名字："+this.son[child].name+",年龄："+this.son[child].age+"<br/>"); } } }; person.info(); 输出：父亲名字：Jack，年龄：30 儿子名字：Tom，年龄：2 儿子名字：Jerry，年龄：5