JavaScript开发基础学习
JavaScript开发基础学习
JavaScript语言概况
什么是JavaScript
JavaScript是一种基于对象（Object）和事件驱动（EventDriven）并具有安全性能的脚本语言
简单来说它是一种运行在客户端的监本语言，结构简单，使用方便，期待吗可以直接放在HTML文档中，可以直接在支持JavaScript的浏览器中运行。JavaScript使得网页制作的交互性更强，更生动和灵活。当在浏览网页时做了某种操作就产生了一个事件，JavaScript所编写的程序对相应的事件做出反应。
基本特点
- 脚本编写语言
- 基于对象的语言
- 简单性——简化的Java语言；变量类型采用弱类型
- 动态性——JavaScript是动态的，采用以事件驱动的方式进行的
- 跨平台性——JavaScript是依赖于浏览器本身，与操作环境无关
JavaScript和Java的区别
- Java是面向对象的语言，面向对象的三大特点（封装、继承、多态）缺一不可。JavaScript是脚本语言，是基于对象和事件驱动的语言，通常情况下基于对象是使用对象，但是无法利用现有的对象模板产生新的对象类型。
- Java的源代码在执行之前必须经过编译，而JavaScript的代码不需要，由浏览器直接解释执行。
- java主要在服务端运行；javascript主要运行在客户端浏览器中。
- JavaScript是动态类型语言；而Java是静态类型语言。java在定义了一个数组的长度以后就不能再改变了，但是javascript却可以。
- JavaScript是弱类型的，即在使用前不需要声明，而是浏览器解释器在运行时检查数据类型；Java属于强类型，即所有变量在编译前必须作声明；
- JavaScript 的面向对象是基于原型的（prototype-based）实现的，Java 是基于类（class-based）的；
- Java的语法规则比JavaScript要严格的多，功能要强大的多。
- java语言的代码是一种HTML没有关系的语言；javascript语言的代码是一种文本字符格式，可以直接嵌入HTML文档中，并且可动态加载。
编写注意事项
- JavaScript区分大小写，在命名方法时需要注意
- JavaScript会忽略多余的空白
- JavaScript的注释分为单行注释（//）和多行注释（/***/）
引入方式
HTML页面的任意位置都可以引入JavaScript，有两种方式进行引入
一种是直接在HTML文档中直接使用
另一种是创建JS文件，然后再HTML页面中引入该文件
JavaScript基本语法
- JavaScript语法上与Java十分相似，不同的是JavaScript不是强类型，变量没有任何类型，可以不进行声明而直接使用，即使声明也可以不用指明变量类型
- 变量在程序的运行过程中是用来存储数据、传递数据用的
- 变量的命名规则：开头以字母或者下划线。后面可以使数字或大小写字母
- 区分大小写
- 使用变量之前必须对其进行赋值，也可以直接使用变量并对其赋值，不使用var
变量数据类型的转换
在使用不用的数据类型进行表达式运算时，JavaScript将根据需要自动尝试进行不必要的数据类型转换，总是将左边的数据类型转换成右边的数据类型，但并不是所有的都能转换成功，比如“abc”无法转换成数值类型
内置关键字
在JavaScript中，任何变量都用var关键字来声明，var是variable的缩写。语句以分号结尾，分号可以省略。这里值得注意的是，JavaScript中的关键字，不可以作为变量名。。JavaScript的关键字和保留字：
abstract、else、instanceof、super、boolean、enum、int、switch、break、export、interface、synchronized、byte、extends、let、this、case、false、long、throw、catch、final、native、throws、char、finally、new、transient、class、float、null、true、const、for、package、try、continue、function、private、typeof、debugger、goto、protected、var、default、if、public、void、delete、implements、return、volatile、do、import、short、while、double、in、static、with。
数据类型
- 整型——正整数、0、负整数，可以是常用的进行类型的整数
- 浮点型
- 字符串型——可以使用单引号或双引号
- 布尔型——true或者false
- 对象
语句
语句以分号结束，可以使用{}将多个语句包括在一起
JavaScript语句在语法上与Java基本相同，也包括顺序、分支、循环三种程序结构
顺序结构按语句顺序执行，分支结构根据条件执行不同的语句块，循环则反复执行同一语句块
数组
声明数组
var 数组名 = new Array（数组大小）
常用属性
length——返回数组中元素的个数
常用方法
reverse——点到数组元素的顺序，使第一个元素成为最后一个元素，最后一个元素成为第一个元素
sort——对数组元素 进行排序
控制结构
- if（）{}else（）{}语句
- switch（case）语句
- for循环
- do-while循环
do{
//语句
}while(循环条件)
- while循环
while(循环条件){
//语句
}
break——结束循环，跳出循环体
continue——结束本次循环，进入下一次循环
函数
JavaScript中函数有多种，如对象的方法、全局函数等等，此处的函数是指自定义函数
function 函数名([参数集]){
return 值；
}
用在function之后和函数结尾的大括号是不能省去的，就算整个函数只有一句
对象
JavaScript中的对象是属性和方法的组合，属性时对象所拥有的一组外观特征，一般为名词，方法是对象可以执行的功能，一般为动词
三类对象
-
浏览器对象
浏览器窗口 window
文档 document
地址 URL
-
脚本对象
String 字符串对象
Date 日起对象
Math 数学对象
-
HTML对象
段落
图片
超链接
基本对象
字符串对象——String
属性：length——返回该字符串的长度
方法：
- charAt（i）——返回该字符串位置为i的单个字符
- charCodeAt（i）——返回该字符串位置为i的单个字符对应的ASCII码值
- indexOf（）——在当前字符串找到是否存在参数中的字符串对象，找到则返回位置，没有找到就返回-1
- split（）——返回一个数组
- subString（）——返回原字符串的子字符串
数学对象——Math
方法：
- Math.random（）——产生0~1的随机小数
- Math.round()——四舍五入取证
日期对象——Date
Date对象存储的日期为1970年1月1日00:00:00以来的毫秒数
数字对象——Number
属性：
- MAX_VALUE——返回最大值
- MIN_VALUE——返回最小值
- NAN——返回NaN
- NEGATIVE_INFINITY——返回负无穷大
- POSITIVE_INFINITY——返回正无穷大
方法：
toString（）——返回字符串形式
数组对象——Array
JavaScript中的数组对象与Java中的数组对象相同，也是一个对象的集合。不同在于JavaScript中数组中的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”，用来表示它在数组中的位置，从零开始。
全局对象——Global
全局对象是一个虚拟的对象，通常用Global代表。JavaScript有一些全局的函数，通常认为是Global对象的，调用这些方法时直接写名字即可，无需用对象名限定
Regular Expression 正则表达式
正则表达式是一个描述字符模式的对象，JavaScript的RegExp对象和String对象定义了使用正则表达式来执行强大的模式匹配和文本检索与替换函数的方法，可以使用一个RegExp（）构造函数来创建RegExp对象，也可以将正则表达式直接包含在一对斜杆之间。
正则表达式是描述字符模式的对象。
正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。
语法：
var patt=new RegExp(pattern,modifiers);
或者更简单的方式:
var patt=/pattern/modifiers;
如：
var re1 = new RegExp("^1[3589]\\d{9}$");
var re2 = /^1[3589]\d{9}$/;
修饰符
修饰符用于执行区分大小写和全局匹配:
| 修饰符 | 描述 |
|---|---|
| i | 执行对大小写不敏感的匹配。 |
| g | 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 |
| m | 执行多行匹配。 |
方括号
方括号用于查找某个范围内的字符：
| 表达式 | 描述 |
|---|---|
| [abc] | 查找方括号之间的任何字符。 |
| [^abc] | 查找任何不在方括号之间的字符。 |
| [0-9] | 查找任何从 0 至 9 的数字。 |
| [a-z] | 查找任何从小写 a 到小写 z 的字符。 |
| [A-Z] | 查找任何从大写 A 到大写 Z 的字符。 |
| [A-z] | 查找任何从大写 A 到小写 z 的字符。 |
| (red|blue|green) | 查找任何指定的选项。 |
元字符
元字符（Metacharacter）是拥有特殊含义的字符：
| 元字符 | 描述 |
|---|---|
| . | 查找单个字符，除了换行和行结束符。 |
| \w | 查找单词字符。[a-zA-Z0-9_] |
| \W | 查找非单词字符。 |
| \d | 查找数字。[0-9] |
| \D | 查找非数字字符。 |
| \s | 查找空白字符。 |
| \S | 查找非空白字符。 |
| \b | 匹配单词边界。 |
量词
| 量词 | 描述 |
|---|---|
| n+ | 匹配任何包含至少一个 n 的字符串。例如，/a+/ 匹配 “candy” 中的 “a”，“caaaaaaandy” 中所有的 “a”。 |
| n* | 匹配任何包含零个或多个 n 的字符串。例如，/bo*/ 匹配 “A ghost booooed” 中的 “boooo”，“A bird warbled” 中的 “b”，但是不匹配 “A goat grunted”。 |
| n? | 匹配任何包含零个或一个 n 的字符串。例如，/e?le?/ 匹配 “angel” 中的 “el”，“angle” 中的 “le”。 |
| n{X} | 匹配包含 X 个 n 的序列的字符串。例如，/a{2}/ 不匹配 “candy,” 中的 “a”，但是匹配 “caandy,” 中的两个 “a”，且匹配 “caaandy.” 中的前两个 “a”。 |
| n{X,} | X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如，/a{2,}/ 不匹配 “candy” 中的 “a”，但是匹配 “caandy” 和 “caaaaaaandy.” 中所有的 “a”。 |
| n{X,Y} | X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。例如，/a{1,3}/ 不匹配 “cndy”，匹配 “candy,” 中的 “a”，“caandy,” 中的两个 “a”，匹配 “caaaaaaandy” 中的前面三个 “a”。注意，当匹配 “caaaaaaandy” 时，即使原始字符串拥有更多的 “a”，匹配项也是 “aaa”。 |
| n$ | 匹配任何结尾为 n 的字符串。 |
| ^n | 匹配任何开头为 n 的字符串。 |
RegExp 对象方法
| 方法 | 描述 | FF | IE |
|---|---|---|---|
| exec | 检索字符串中指定的值。返回找到的值，并确定其位置。 | 1 | 4 |
| test | 检索字符串中指定的值。返回 true 或 false。 | 1 | 4 |
支持正则表达式的 String 对象的方法
| 方法 | 描述 | FF | IE |
|---|---|---|---|
| match | 找到一个或多个正则表达式的匹配。 | 1 | 4 |
| replace | 替换与正则表达式匹配的子串。 | 1 | 4 |
| split | 把字符串分割为字符串数组。 | 1 | 4 |
正则表达式的使用
test()方法：
test()方法搜索字符串指定的值，根据结果并返回真或假。
var patt1=new RegExp("^1[3589]\\d{9}$");
document.write(patt1.test("13688889999"));//true
exec() 方法：
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
var reg=/java/ig;
var str="hello java,java是最好的编程语言，我爱Java";
var s=null;
while(s=reg.exec(str)){
document.write(s);
document.write("
")
}
字符串match()方法
var reg=/java/ig;
var str="hello java,java是最后的语言，我爱Java";
var arr=str.match(reg);
for(var i=0;i<arr.length;i++){
document.write(arr[i]+"
");
}
字符串replace()方法
var reg=/java/ig;
var str="hello java,java是最后的语言，我爱Java";
var str2=str.replace(reg,"JAVA");
document.write(str2+"
");
字符串split()方法
var str="hello world,java best language";
var arr=str.split(/[ ,]/);
for(var i=0;i<arr.length;i++){
document.write(arr[i]+"
");
}