22_JavaScript基础
1. JavaScript基础
JavaScript：
* 概念： 一门客户端脚本语言 * 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎 * 脚本语言：不需要编译，直接就可以被浏览器解析执行了 *JavaScript_简介 JavaScript代码在哪里运行？ 浏览器： JavaScript代码需不需要编译？ 不需要，浏览器里面有js解析器， JavaScript的作用？ 控制html元素，让页面动起来！！！ * 功能： * 可以来增强用户和html页面的交互过程，可以来控制html元素(对html元素的属性和内容进行修改)，让页面有一些动态的效果，增强用户的体验。 * JavaScript发展史： 1. 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为 ： C-- ，后来更名为：ScriptEase 2. 1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript 3. 1996年，微软抄袭JavaScript开发出JScript语言 4. 1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。 * JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM) * ECMAScript：客户端脚本语言的标准 1. 基本语法： 1. 与html结合方式 1. 内部JS： * 定义<script>，标签体内容就是js代码 2. 外部JS： * 定义<script>，通过src属性引入外部的js文件 * 注意： 1. <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。 2. <script>可以定义多个。 2. 注释 1. 单行注释：//注释内容 2. 多行注释：/*注释内容*/ 3. 数据类型： 1. 原始数据类型(基本数据类型)： 1. number：数字。 整数/小数/NaN(not a number 一个不是数字的数字类型) 2. string：字符串。 字符串 "abc" "a" 'abc' 3. boolean: true和false 4. null：一个对象为空的占位符 5. undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined 2. 引用数据类型：对象 4. 变量 * 变量：一小块存储数据的内存空间 * Java语言是强类型语言，而JavaScript是弱类型语言。 * 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据 * 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。 * 语法： * var 变量名 = 初始化值; * typeof运算符：获取变量的类型。 * 注：null运算后得到的是object 5. 运算符 1. 一元运算符：只有一个运算数的运算符 ++，-- ， +(正号) * ++ --: 自增(自减) * ++(--) 在前，先自增(自减)，再运算 * ++(--) 在后，先运算，再自增(自减) * +(-)：正负号 * 注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换 * 其他类型转number： * string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字） * boolean转number：true转为1，false转为0 * null:0; * undefined:NaN; 2. 算数运算符 + - * / % ... 3. 赋值运算符 = += -+.... 4. 比较运算符 > < >= <= == ===(全等于) * 比较方式 1. 类型相同：直接比较 * 字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。 2. 类型不同：先进行类型转换，再比较 * ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false
5. 逻辑运算符
&& || !
* 其他类型转boolean：
1. number：0或NaN为假，其他为真
2. string：除了空字符串("")，其他都是true
3. null&undefined:都是false
4. 对象：所有对象都为true
6. 三元运算符
? : 表达式
var a = 3;
var b = 4;
var c = a > b ? 1:0;
* 语法：
* 表达式? 值1:值2;
* 判断表达式的值，如果是true则取值1，如果是false则取值2；
6. 流程控制语句：
1. if...else...
2. switch:
* 在java中，switch语句可以接受的数据类型： byte int short char,枚举(1.5) ,String(1.7)
* switch(变量):
case 值:
* 在JS中,switch语句可以接受任意的原始数据类型
3. while
4. do...while
5. for
7. JS特殊语法：
1. 语句以;结尾，如果一行只有一条语句则 ;可以省略 (不建议)
2. 变量的定义使用var关键字，也可以不使用
* 用： 定义的变量是局部变量
* 不用：定义的变量是全局变量(不建议)
8. 练习：99乘法表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>99乘法表</title>
<style>
td{
border: 1px solid;
}
</style>
<script>
document.write("<table align='center'>");
//1.完成基本的for循环嵌套，展示乘法表
for (var i = 1; i <= 9 ; i++) {
document.write("<tr>");
for (var j = 1; j <=i ; j++) {
document.write("<td>");
//输出 1 * 1 = 1
document.write(i + " * " + j + " = " + ( i*j) +" ");
document.write("</td>");
}
/*//输出换行
document.write("<br>");*/
document.write("</tr>");
}
//2.完成表格嵌套
document.write("</table>");
</script>
</head>
<body>
</body>
</html>
2. 基本对象：
1. Function：函数(方法)对象
1. 创建：
1. var fun = new Function(形式参数列表,方法体); //忘掉吧
2.
function 方法名称(形式参数列表){
方法体
}
3.
var 方法名 = function(形式参数列表){
方法体
}
2. 方法：
3. 属性：
length:代表形参的个数
4. 特点：
1. 方法定义是，形参的类型不用写,返回值类型也不写。
2. 方法是一个对象，如果定义名称相同的方法，会覆盖
3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关
4. 在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数
5. 调用：
方法名称(实际参数列表);
2. Array:数组对象
1. 创建：
1. var arr = new Array(元素列表);
2. var arr = new Array(默认长度);
3. var arr = [元素列表];
2. 方法
join(参数):将数组中的元素按照指定的分隔符拼接为字符串
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
3. 属性
length:数组的长度
4. 特点：
1. JS中，数组元素的类型可变的。
2. JS中，数组长度可变的。
3. Boolean
4. Date：日期对象
1. 创建：
var date = new Date();
2. 方法：
toLocaleString()：返回当前date对象对应的时间本地字符串格式
getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差
5. Math：数学对象
1. 创建：
* 特点：Math对象不用创建，直接使用。 Math.方法名();
2. 方法：
random():返回 0 ~ 1 之间的随机数。 含0不含1
ceil(x)：对数进行上舍入。
floor(x)：对数进行下舍入。
round(x)：把数四舍五入为最接近的整数。
3. 属性：
PI
6. Number
7. String
8. RegExp：正则表达式对象
1. 正则表达式：定义字符串的组成规则。
1. 单个字符:[]
如： [a] [ab] [a-zA-Z0-9_]
* 特殊符号代表特殊含义的单个字符:
\d:单个数字字符 [0-9]
\w:单个单词字符[a-zA-Z0-9_]
2. 量词符号：
?：表示出现0次或1次
*：表示出现0次或多次
+：出现1次或多次
{m,n}:表示 m<= 数量 <= n
* m如果缺省： {,n}:最多n次
* n如果缺省：{m,} 最少m次
3. 开始结束符号
* ^:开始
* $:结束
2. 正则对象：
1. 创建
1. var reg = new RegExp("正则表达式"); //添加转义符
var reg1 = new RegExp("^[A-Za-z0-9]\\w{5,11}\\d+$");//字母或数字开头，字母5-11为位，数字至少一位
2. var reg = /正则表达式/; //不要写成字符串形式
var reg2 = /^[A-Za-z0-9]\w{5,11}\d+$/;
2. 方法
1. test(参数):验证指定的字符串是否符合正则定义的规范
9. Global
1. 特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。 方法名();
2. 方法：
encodeURI():url编码
decodeURI():url解码
encodeURIComponent():url编码,编码的字符更多
decodeURIComponent():url解码
parseInt():将字符串转为数字
* 逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
isNaN():判断一个值是否是NaN
* NaN六亲不认，连自己都不认。NaN参与的==比较全部问false
eval():讲 JavaScript 字符串，并把它作为脚本代码来执行。
3. URL编码
软通国际 = %E8%BD%AF%E9%80%9A%E5%9B%BD%E9%99%85
* BOM
* DO
常用正则表达式：
只能输入数字："^[0-9]*$"。 只能输入n位的数字："^\d{n}$"。 只能输入至少n位的数字："^\d{n,}$"。 只能输入m~n位的数字：。"^\d{m,n}$" 只能输入零和非零开头的数字："^(0|[1-9][0-9]*)$"。 只能输入有两位小数的正实数："^[0-9]+(.[0-9]{2})?$"。 只能输入有1~3位小数的正实数："^[0-9]+(.[0-9]{1,3})?$"。 只能输入非零的正整数："^\+?[1-9][0-9]*$"。 只能输入非零的负整数："^\-[1-9][]0-9"*$。 只能输入长度为3的字符："^.{3}$"。 只能输入由26个英文字母组成的字符串："^[A-Za-z]+$"。 只能输入由26个大写英文字母组成的字符串："^[A-Z]+$"。 只能输入由26个小写英文字母组成的字符串："^[a-z]+$"。 只能输入由数字和26个英文字母组成的字符串："^[A-Za-z0-9]+$"。 只能输入由数字、26个英文字母或者下划线组成的字符串："^\w+$"。 验证用户密码："^[a-zA-Z]\w{5,17}$"正确格式为：以字母开头，长度在6~18之间，只能包含字符、数字和下划线。 验证是否含有^%&',;=?$\"等字符："[^%&',;=?$\x22]+"。 只能输入汉字："^[\u4e00-\u9fa5]{0,}$" 验证Email地址："^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"。 验证InternetURL："^http://%28[/\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$"。 验证电话号码："^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$"正确格式为："XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX"。 验证身份证号（15位或18位数字）："^\d{15}|\d{18}$"。 验证一年的12个月："^(0?[1-9]|1[0-2])$"正确格式为："01"～"09"和"1"～"12"。 验证一个月的31天："^((0?[1-9])|((1|2)[0-9])|30|31)$"正确格式为；"01"～"09"和"1"～"31"。 利用正则表达式限制网页表单里的文本框输入内容： 用正则表达式限制只能输入中文：onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))" 用正则表达式限制只能输入全角字符： onkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,''))" 用正则表达式限制只能输入数字：onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" 用正则表达式限制只能输入数字和英文：onkeyup="value=value.replace(/[\W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" 得用正则表达式从URL地址中提取文件名的javascript程序，如下结果为page1 s="http://www.jb51.net/about.htm" s=s.replace(/(.*\/){0,}([^\.]+).*/ig,"$2") alert(s) 匹配双字节字符(包括汉字在内)：[^\x00-\xff] 应用：计算字符串的长度（一个双字节字符长度计2，ASCII字符计1） String.prototype.len=function(){return this.replace([^\x00-\xff]/g,"aa").length;} 匹配空行的正则表达式：\n[\s| ]*\r 匹配HTML标记的正则表达式：/<(.*)>.*<\/\1>|<(.*) \/>/ 匹配首尾空格的正则表达式：(^\s*)|(\s*$) String.prototype.trim = function() { return this.replace(/(^\s*)|(\s*$)/g, ""); } 利用正则表达式分解和转换IP地址： 下面是利用正则表达式匹配IP地址，并将IP地址转换成对应数值的Javascript程序： function IP2V(ip) { re=/(\d+)\.(\d+)\.(\d+)\.(\d+)/g //匹配IP地址的正则表达式 if(re.test(ip)) { return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1 } else { throw new Error("Not a valid IP address!") } } 不过上面的程序如果不用正则表达式，而直接用split函数来分解可能更简单，程序如下： var ip="10.100.20.168" ip=ip.split(".") alert("IP值是："+(ip[0]*255*255*255+ip[1]*255*255+ip[2]*255+ip[3]*1)) 符号解释： 字符 描述 \ 将下一个字符标记为一个特殊字符、或一个原义字符、或一个 向后引用、或一个八进制转义符。例如，'n' 匹配字符 "n"。'\n' 匹配一个换行符。序列 '\\' 匹配 "\" 而 "\(" 则匹配 "("。 ^ 匹配输入字符串的开始位置。如果设置了 RegExp 对象的 Multiline 属性，^ 也匹配 '\n' 或 '\r' 之后的位置。 $ 匹配输入字符串的结束位置。如果设置了RegExp 对象的 Multiline 属性，$ 也匹配 '\n' 或 '\r' 之前的位置。 * 匹配前面的子表达式零次或多次。例如，zo* 能匹配 "z" 以及 "zoo"。* 等价于{0,}。 + 匹配前面的子表达式一次或多次。例如，'zo+' 能匹配 "zo" 以及 "zoo"，但不能匹配 "z"。+ 等价于 {1,}。 ? 匹配前面的子表达式零次或一次。例如，"do(es)?" 可以匹配 "do" 或 "does" 中的"do" 。? 等价于 {0,1}。 {n} n 是一个非负整数。匹配确定的 n 次。例如，'o{2}' 不能匹配 "Bob" 中的 'o'，但是能匹配 "food" 中的两个 o。 {n,} n 是一个非负整数。至少匹配n 次。例如，'o{2,}' 不能匹配 "Bob" 中的 'o'，但能匹配 "foooood" 中的所有 o。'o{1,}' 等价于 'o+'。'o{0,}' 则等价于 'o*'。 {n,m} m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。例如，"o{1,3}" 将匹配 "fooooood" 中的前三个 o。'o{0,1}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格。 ? 当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如，对于字符串 "oooo"，'o+?' 将匹配单个 "o"，而 'o+' 将匹配所有 'o'。 . 匹配除 "\n" 之外的任何单个字符。要匹配包括 '\n' 在内的任何字符，请使用象 '[.\n]' 的模式。 (pattern) 匹配 pattern 并获取这一匹配。所获取的匹配可以从产生的 Matches 集合得到，在VBScript 中使用 SubMatches 集合，在JScript 中则使用 $0…$9 属性。要匹配圆括号字符，请使用 '\(' 或 '\)'。 (?:pattern) 匹配 pattern 但不获取匹配结果，也就是说这是一个非获取匹配，不进行存储供以后使用。这在使用 "或" 字符 (|) 来组合一个模式的各个部分是很有用。例如， 'industr(?:y|ies) 就是一个比 'industry|industries' 更简略的表达式。 (?=pattern) 正向预查，在任何匹配 pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如，'Windows (?=95|98|NT|2000)' 能匹配 "Windows 2000" 中的 "Windows" ，但不能匹配 "Windows 3.1" 中的 "Windows"。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始。 (?!pattern) 负向预查，在任何不匹配 pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如'Windows (?!95|98|NT|2000)' 能匹配 "Windows 3.1" 中的 "Windows"，但不能匹配 "Windows 2000" 中的 "Windows"。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始 x|y 匹配 x 或 y。例如，'z|food' 能匹配 "z" 或 "food"。'(z|f)ood' 则匹配 "zood" 或 "food"。 [xyz] 字符集合。匹配所包含的任意一个字符。例如， '[abc]' 可以匹配 "plain" 中的 'a'。 [^xyz] 负值字符集合。匹配未包含的任意字符。例如， '[^abc]' 可以匹配 "plain" 中的'p'。 [a-z] 字符范围。匹配指定范围内的任意字符。例如，'[a-z]' 可以匹配 'a' 到 'z' 范围内的任意小写字母字符。 [^a-z] 负值字符范围。匹配任何不在指定范围内的任意字符。例如，'[^a-z]' 可以匹配任何不在 'a' 到 'z' 范围内的任意字符。 \b 匹配一个单词边界，也就是指单词和空格间的位置。例如， 'er\b' 可以匹配"never" 中的 'er'，但不能匹配 "verb" 中的 'er'。 \B 匹配非单词边界。'er\B' 能匹配 "verb" 中的 'er'，但不能匹配 "never" 中的 'er'。 \cx 匹配由 x 指明的控制字符。例如， \cM 匹配一个 Control-M 或回车符。x 的值必须为 A-Z 或 a-z 之一。否则，将 c 视为一个原义的 'c' 字符。 \d 匹配一个数字字符。等价于 [0-9]。 \D 匹配一个非数字字符。等价于 [^0-9]。 \f 匹配一个换页符。等价于 \x0c 和 \cL。 \n 匹配一个换行符。等价于 \x0a 和 \cJ。 \r 匹配一个回车符。等价于 \x0d 和 \cM。 \s 匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。 \S 匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。 \t 匹配一个制表符。等价于 \x09 和 \cI。 \v 匹配一个垂直制表符。等价于 \x0b 和 \cK。 \w 匹配包括下划线的任何单词字符。等价于'[A-Za-z0-9_]'。 \W 匹配任何非单词字符。等价于 '[^A-Za-z0-9_]'。 \xn 匹配 n，其中 n 为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如，'\x41' 匹配 "A"。'\x041' 则等价于 '\x04' & "1"。正则表达式中可以使用 ASCII 编码。. \num 匹配 num，其中 num 是一个正整数。对所获取的匹配的引用。例如，'(.)\1' 匹配两个连续的相同字符。 \n 标识一个八进制转义值或一个向后引用。如果 \n 之前至少 n 个获取的子表达式，则 n 为向后引用。否则，如果 n 为八进制数字 (0-7)，则 n 为一个八进制转义值。 \nm 标识一个八进制转义值或一个向后引用。如果 \nm 之前至少有 nm 个获得子表达式，则 nm 为向后引用。如果 \nm 之前至少有 n 个获取，则 n 为一个后跟文字 m 的向后引用。如果前面的条件都不满足，若 n 和 m 均为八进制数字 (0-7)，则 \nm 将匹配八进制转义值 nm。 \nml 如果 n 为八进制数字 (0-3)，且 m 和 l 均为八进制数字 (0-7)，则匹配八进制转义值 nml。 \un 匹配 n，其中 n 是一个用四个十六进制数字表示的 Unicode 字符。例如， \u00A9 匹配版权符号 (?)。 ^\\d+($|,\\d+)+$ 匹配以逗号分隔的数字，所分隔的数字可多位 ^\\d($|,\\d)+$ 匹配一串数字，每一个数字间都以逗号分隔
不经历风雨，怎能见彩虹？做一个快乐的程序员。
浙公网安备 33010602011771号