1. JavaScript简介
1.1. 什么是JavaScript？
- javaScript 是互联网上最流行的脚本语言。（解释型语言都叫脚本语言）
- JavaScript 是一种轻量级的编程语言。(java是重量级的编程语言)
- JavaScript 是可插入 HTML 页面的编程代码。
1.2. JavaScript与Java区别？
- JS是Netscape公司的产品，前身是LiveScript;Java是Sun公司的产品，现在是Oracle公司的产品。
- JS只需解释就可以执行不需要编译。由浏览器去解释。Java需要先编译成字节码文件，再执行。
- JS是弱类型；Java 是强类型。
1.3 JavaScript的作用？
- JavaScript：直接写入 HTML 输出流
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");- JavaScript：对事件的反应
<button type="button" onclick="alert('欢迎!')">点我!</button>- JavaScript：改变 HTML 内容
x=document.getElementById("demo") //查找元素 x.innerHTML="Hello JavaScript"; //改变内容- JavaScript：改变 HTML 图像
<script> function changeImage() { element=document.getElementById('myimage') if (element.src.match("bulbon")) { element.src="/images/pic_bulboff.gif"; } else { element.src="/images/pic_bulbon.gif"; } } </script>- JavaScript：改变 HTML 样式
x=document.getElementById("demo") //找到元素 x.style.color="#ff0000"; //改变样式- JavaScript：验证输入
<script> function myFunction() { var x=document.getElementById("demo").value; if(x==""||isNaN(x)) { alert("不是数字"); } } </script>2. JavaScript语法
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。 脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。 通常我们会将此标签写在<head></head>，做到html代码和js代码相分离。对代码行进行折行:
document.write("你好 \ 世界!");js中的注释和java一样
2.1 外部的 Java
如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件： <script src="myScript.js"></script>myScript.js 文件代码如下：
----外部脚本不能包含 <script> 标签。 function myFunction() { document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数"; }2.2 JavaScript 输出
JavaScript 没有任何打印或者输出的函数,可以通过不同的方式来输出数据：
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
如需从 JavaScript 访问某个 HTML 元素，可以使用 document.getElementById(id) 方法。 请使用 "id" 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容： document.getElementById("demo").innerHTML = "段落已修改。";- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。
2.3 数据类型与变量
JavaScript 字面量(固定值)
数字（Number）字面量 ：可以是整数或者是小数，或者是科学计数(e)。
字符串（String）字面量 可以使用单引号或双引号:
数组（Array）字面量 定义一个数组：
JavaScript 变量
JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值。
JavaScript 数据类型
回顾java的数据类型：
整数：int short long
小数：float double
字符：char
布尔：boolean
字节：byte
字符串：String
JavaScript的数据类型：
数字(Number)（整数和实数） 不区分整数和小数。
字符串（String）（用”“号或”括起来的字符或数值）包含了字符串和字符。
布尔(Boolean)（使True或False表示）
数组(Array)、对象(Object)、空（Null）、未定义（Undefined）。回顾java定义变量
数据类型变量名；
数据类型变量名 = 初始值；
JavaScript定义变量：
var 变量名=初始值；
var 变量名；2.4 运算符
2.4.1算数运算符
JavaScript中的算术运算符有单目运算符和双目运算符。
双目运算符：
+（加）、-（减）、 *（乘）、 /（除）、 %（取模）
单目运算符：
++（递加1）、- -（递减1）。
注意：
1、基本的算术运算和java一样。
2、整数除不尽，会自动转成小数，反正在js中都是number。
3、字符串在加上一个整数的时候会进行拼接，最终转成一个字符串。
4、如果字符串用于其它运算（非加法）的话，返回NaN（not a number）。2.4.2 赋值运算符
java赋值运算符号： = ,+= -= *= /= %=
js 赋值运算符：= ,+= -= *= /= %=
如果保留N位小数
语法：
变量名.toFixed(N)2.4.3 关系运算符
js有８个比较运算符:
<(小于)、>(大于)、<=(小于等于)、>=(大于等于)、==(等于)、!=(不等于)。
注意：
1、== 只判断里面的值是否相同
2、=== （表示全等：要求数值相同的同时，类型也要相同）2.4.4 逻辑运算符
&&（与）、 ||（或）、！（非）
与Java一样，会出现逻辑短路（当左边的表达配合逻辑运算符已经能够确定出来结果，右边的表达式为了节省效率就不执行了）
注意：
返回结果与java（要求两边是逻辑值）有不同。
&& ：当左边真，返回右侧表达式的值。
当左边假，返回左侧表达式的值，右侧不执行（短路）
|| ：当左边真，返回表达式左边的值，右侧不执行（短路）
当左边假，返回表达式右侧的值。
切记：
在js中非0非空非错就是真, 0、null、”“、”、undefined NaN 都是假
所以js逻辑运算符不再返回true false这样的布尔值，而是具体值2.4.5 位运算符
& 与：二进制比较，两个都是1返回1，否则是0； | 或：二进制比较：一个是1返回1，否则是0； ^ 异或：两个都相同返回0，否则1； ~ 取反： 1取0，0取1； >> 右移：高位补符号位" 这里右移一位表示除2 << 左移：左移一位表示乘2，二位就表示4，就是2的n次方 ">>> 无符号右移,高位补0"；与>>类似2.4.6 三元运算符
JavaScript中的三元运算符：表达式1 ？表达式2 : 表达式3；
表达式1的结果可以不是布尔型，0、null、”“、”、undefined NaN 都是假2.5 数组
回顾java的数据类型：
数据类型[] 变量名 = new 数据类型[长度]；
数据类型[] 变量名 = {初始值};
int[] arr = new int[5];
javascript中数组定义的方式：- js数组第一种定义方式：var 数组名 = [初始值，初始值，初始值]
- 注意： 1、通过角标可以得到数组中，某个位置的值。 2、通过数组的length属性得到数组的长度。(可以通过该属性遍历数组) 3、数组不固定类型。可以存放任何类型的数据。 4、数组的长度是可变的。
var arr = [10,20.5,"abc"];- js数组第二种定义方式
- var 数组名 = new Array（长度）； var 数组名 = new Array（初始值） 数组中的函数介绍：  ##### 2.6 JavaScript 函数 回顾Java中函数的定义： 修饰符返回类型方法名（数据类型变量名，多个）｛ 方法体； ｝ JS函数定义方式：
- 第一种方式（推荐） function 函数名（参数列表）｛ 函数体; ｝ 注意： 1、函数必须在调用之后才会执行,参数列表不需要类型。 2、如果函数有返回值，在函数体中直接使用return 返回的数据即可，JS中的函数没有返回值类型这个限制。 3、如果函数要接收参数，这时直接写变量名，不能有var关键字。 4、在JS中函数没有重载的概念，如果在js中出现了多个同名的函数后面会把前面的函数覆盖掉，即使参数不一样。 5、在JS中如果函数需要接受参数，但是没有传递，这时变量全部是undefined 6、JS中函数不管接不接收参数，我们调用的时候，都可以给其传递参数。 7、在JS中的函数中有一个内置的数组（arguments）参数接收传递的所有数据，使用arguments，这个参数其实它本身是一个数组对象。 注意：后期如果使用JS中的函数，需要接受参数，就在函数上定义变量，如果不需要就不定义，很少使用arguments数组操作。
- 第二种方式 写法：var 函数名 = new Function(“参数列表”,”函数体”); 第一个参数代表参数列表 第二个参数代表函数体。 参数列表和函数体都是字符串的方式去定义的。
- 第三种方式 写法：var 函数名 = function（参数列表）｛ 函数体； ｝; JS函数的调用： 普通调用：通过直接书写函数名称，传递相应参数进行调用。 超链接调用函数： 语法：
<a href="javascript:函数名称;">链接文字</a><标签名事件属性名="函数名（参数）；" />
##### 2.6 JavaScript 类型转换 ###### 2.6.1 JavaScript 的数据类型 Number() 转换为数字， String() 转换为字符串， Boolean() 转化为布尔值。事件 事件 当。。。。时发生 onabort 用户终止页面加载。 onblurt 用户离开对象。（失去焦点） onchange 用户改变对象的值。 onclick 用户点击对象。。 ondblclick 用户双击对象 onfocus 用户激活对象。（获得焦点） onkeydown 按下键盘。 onkeypress 按下键盘。 onkeydown 按压键盘。 onkeyup 松开键盘。 onload 页面完成加载。 onload 页面完成加载。 onload 页面完成加载。 onmousedown 用户按鼠标按钮。 onmousemove 鼠标指针在对象上移动。 onmouseover 鼠标指针移动到对象上。 onmouseout 鼠标指针移出对象。 onmouseup 用户释放鼠标按钮。 onreset 用户重置表单。 onselect 用户选取页面上的内容。 onsubmit 用户提交表单。 onunload 用户关闭页面。 - 在 JavaScript 中有 5 种不同的数据类型：
string、number、boolean、object、function
- 3 种对象类型：
Object、Date、Array
- 2 个不包含任何值的数据类型：
null、undefined
2.6.2 typeof 操作符
可以使用 typeof 操作符来查看 JavaScript 变量的数据类型。
注意
- NaN 的数据类型是 number
- 数组(Array)的数据类型是 object
- 日期(Date)的数据类型为 object
- null 的数据类型是 object
- 未定义变量的数据类型为 undefined
2.6.3 constructor 属性
constructor 属性返回所有 JavaScript 变量的构造函数
"John".constructor // 返回函数 String() { [native code] } (3.14).constructor // 返回函数 Number() { [native code] } false.constructor // 返回函数 Boolean() { [native code] } [1,2,3,4].constructor // 返回函数 Array() { [native code] } {name:'John', age:34}.constructor // 返回函数 Object() { [native code] } new Date().constructor // 返回函数 Date() { [native code] } function () {}.constructor // 返回函数 Function(){ [native code] }2.6.4 JavaScript 类型转换
将数字转换为字符串 String(x);String(123) ;String(100 + 23) 或者(123).toString() 将布尔值转换为字符串 String(false) 或者false.toString() 将日期转换为字符串 Date() 或者String(new Date()) 将字符串转换为数字 Number(“3.14”) ；Number(“”) 2.7JavaScript 正则表达式
2.7.1 语法
/正则表达式主体/修饰符(可选)例子：
var patt = /runoob/i实例解析：
/runoob/i 是一个正则表达式。
runoob 是一个正则表达式主体 (用于检索)。
i 是一个修饰符 (搜索不区分大小写)。2.7.2 使用字符串方法
在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。
- search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
-
var str = "Visit Runoob!"; var n = str.search(/Runoob/i);返回6
- replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
-
2.7.3 正则表达式修饰符
修饰符 描述 i 执行对大小写不敏感的匹配。 g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 m 执行多行匹配。 2.7.4 正则表达式模式
方括号用于查找某个范围内的字符：
表达式 描述 { } 当前的规则可以出现的次数 [abc] 查找方括号之间的任何字符。 [0-9] 查找任何从 0 至 9 的数字。 (x|y) 查找任何以 | 分隔的选项。 元字符是拥有特殊含义的字符：
元字符 描述 ^ 行开始。 \d 查找数字。 \s 查找空白字符。 \b 匹配单词边界。 \uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。 $ 行结尾。 量词:
量词 描述 . 当前可以是任意字符 n+ 匹配任何包含至少一个 n 的字符串。 n* 匹配任何包含零个或多个 n 的字符串。 n? 匹配任何包含零个或一个 n 的字符串。 2.7.5 使用 test()
test() 方法是一个正则表达式方法。
test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
以下实例用于搜索字符串中的字符 “e”：var patt = /e/; patt.test("The best things in life are free!");字符串中含有 “e”，所以该实例输出为：true
2.7.6 使用 exec()
exec() 方法是一个正则表达式方法。
exec() 方法用于检索字符串中的正则表达式的匹配。
该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
以下实例用于搜索字符串中的字母 “e”:/e/.exec("The best things in life are free!");字符串中含有 “e”，所以该实例输出为:e
2.7.7 应用
正则表达式表单验证实例：
/*是否带有小数*/ function isDecimal(strValue ) { var objRegExp= /^\d+\.\d+$/; return objRegExp.test(strValue); } /*校验是否中文名称组成 */ function ischina(str) { var reg=/^[\u4E00-\u9FA5]{2,4}$/; /*定义验证表达式*/ return reg.test(str); /*进行验证*/ } /*校验是否全由8位数字组成 */ function isStudentNo(str) { var reg=/^[0-9]{8}$/; /*定义验证表达式*/ return reg.test(str); /*进行验证*/ } /*校验电话码格式 */ function isTelCode(str) { var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/; return reg.test(str); } /*校验邮件地址是否合法 */ function IsEmail(str) { var reg=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+$/; return reg.test(str); }2.8JavaScript 使用误区
2.8.1赋值运算符应用错误
在 JavaScript 程序中如果你在 if 条件语句中使用赋值运算符的等号 (=) 将会产生一个错误结果, 正确的方法是使用比较运算符的两个等号 (==)。
if 条件语句返回 false (是我们预期的)因为 x 不等于 10:var x = 0; if (x == 10)if 条件语句返回 true (不是我们预期的)因为条件语句执行为 x 赋值 10，10 为 true:
var x = 0; if (x = 10)if 条件语句返回 false (不是我们预期的)因为条件语句执行为 x 赋值 0，0 为 false:
var x = 0; if (x = 0)2.8.2 比较运算符常见错误
在常规的比较中，数据类型是被忽略的，以下 if 条件语句返回 true：
var x = 10; var y = "10"; if (x == y)在严格的比较运算中，=== 为恒等计算符，同时检查表达式的值与类型，以下 if 条件语句返回 false：
var x = 10; var y = "10"; if (x === y)2.8.3 加法与连接注意事项
加法是两个数字相加。
连接是两个字符串连接。
JavaScript 的加法和连接都使用 + 运算符。var x = 10 + 5; // x 的结果为 15 var x = 10 + "5"; // x 的结果为 "105"2.8.4 浮点型数据使用注意事项
JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。
所有的编程语言，包括 JavaScript，对浮点型数据的精确度都很难确定：var x = 0.1; var y = 0.2; var z = x + y // z 的结果为 0.3 if (z == 0.3) // 返回 false2.8.5 Return 语句使用注意事项
JavaScript 默认是在代码的最后一行自动结束。
以下两个实例返回结果是一样的(一个有分号一个没有):function myFunction(a) { var power = 10 return a * power }JavaScript 也可以使用多行来结束一个语句。
以下实例返回相同的结果:function myFunction(a) { var power = 10; return a * power; }function myFunction(a) { var power = 10; return a * power; }但是，以下实例结果会返回 undefined：
function myFunction(a) { var power = 10; return a * power; }为什么会有这样的结果呢？因为在 JavaScript 中，上面的代码与下面的代码一致：
function myFunction(a) { var power = 10; return; // 分号结束，返回 undefined a * power; }2.9 JavaScript 表单
2.9.1 JavaScript 表单验证
HTML 表单验证可以通过 JavaScript 来完成。
以下实例代码用于判断表单字段(fname)值是否存在，如果存在，则弹出信息，否则阻止表单提交：
JavaScript 实例：function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == null || x == "") { alert("需要输入名字。"); return false; } }HTML 表单实例：
<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post"> 名字: <input type="text" name="fname"> <input type="submit" value="提交"> </form>2.9.2 JavaScript 验证输入的数字
JavaScript 实例：
function myFunction() { var x, text; // 获取 id="numb" 的值 x = document.getElementById("numb").value; // 如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示错误 Not a Number or less than one or greater than 10 if (isNaN(x) || x < 1 || x > 10) { text = "输入错误"; } else { text = "输入正确"; } document.getElementById("demo").innerHTML = text; }HTML 表单实例：
<p>请输入 1 到 10 之间的数字：</p> <input id="numb"> <button type="button" onclick="myFunction()">提交</button> <p id="demo"></p>2.9.3 HTML 表单自动验证
HTML 表单验证也可以通过浏览器来自动完成。
如果表单字段 (fname) 的值为空, required 属性会阻止表单提交：<form action="demo_form.php" method="post"> <input type="text" name="fname" required="required"> <input type="submit" value="提交"> </form>2.9.4 数据验证
数据验证用于确保用户输入的数据是有效的。
典型的数据验证有：
必需字段是否有输入?
用户是否输入了合法的数据?
在数字字段是否输入了文本?
服务端数据验证是在数据提交到服务器上后再验证。
客户端数据验证 side validation是在数据发送到服务器前，在浏览器上完成验证。2.9.5 HTML 约束验证
约束验证是表单被提交时浏览器用来实现验证的一种算法。
HTML 约束验证基于：
- HTML 输入属性
-
属性 描述 disabled 规定输入的元素不可用 max 规定输入元素的最大值 min 规定输入元素的最小值 pattern 规定输入元素值的模式 required 规定输入元素字段是必需的 type 规定输入元素的类型 - CSS 伪类选择器
-
属性 描述 :disabled 选取属性为 “disabled” 属性的 input 元素 :invalid 选择没有”required”属性的 input 元素 :optional 规定输入元素的最小值 :required 选择有”required”属性的 input 元素 :valid 选取有效值的 input 元素 - DOM 属性和方法
441
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
