概述
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
功能：
（1）是一种解释性脚本语言（代码不进行预编译）。
（2）主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
（3）可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
（4）跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
（5）Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。
一、javascript 使用方法
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。通常的做法是把函数放入 head 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
语法
（1）内部js
<script>
alert("我的第一个 JavaScript");
</script>
（2）引用外部js文件
<script src="myjs.js"> </script>
那些老旧的实例可能会在 <script> 标签中使用 type=“text/javascript”。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
二、基础知识
（1）输出显示
（2）基础语法
（3）事件
（4）正则表达式
（5）异常处理
（6）调试工具
（7）this
（8）json
三、使用示例详解
3.1 输出显示
在javascript中，没有输出函数提供良好的用户交互，当想知道程序的运行结果的时候，javascript提供了以下四种方法：（1）弹框alert：
<script>
window.alert(“我是一个弹框”);
alert(“我也是一个弹框”);
</script>
（2）document.write() 方法将内容写到 HTML 文档中
/* 在HTML标准流文档中加入新的元素 */
<h1>这是一个 h1标题</h1>
<p>这是一个段落。</p>
<script>
document.write("新写入的页面信息");
</script>
注意：若当页面加载完毕的时候再执行document.write()方法，此时的HTML元素将被写入的内容所替代，例如，点击按钮
<h1>在点击按钮之前，这是一个 h1标题</h1>
<p>在点击按钮之前，这是一个段落。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
document.write("点击按钮之后，页面显示的信息覆盖之前的内容");
}
</script>
点击前：
点击之后：
（3）innerHTML 写入到 HTML 元素。
/* 通过id值获取到页面元素，然后通过innerHTML修改元素显示的内容*/
<p id="demo">修改之前</p>
<script>
document.getElementById("demo").innerHTML="段落已修改。";
</script>
（4） console.log() 写入到浏览器开发工具的控制台
<script>
console.log("在控制台打印的内容");
</script>
3.2 基础语法
javascript的语法跟java语法类似。 注意：javascript严格区分大小写。3.2.1 语句
（1）每条语句以 ; 结尾
a = 1;
a = 1 + 2;
c = "hello，javascript";
（2）语句块包含在 { } 中 ，{...}中包含多条javascript语句，每条语句以分号结尾，代码块内的代码应该进行缩进。
if (a>5){
a=a+c;
c=c+1;
}
3.2.2 注释
（1）单行注释使用： //
（2）多行注释：/* xxxxx */
3.2.3 变量
提示：一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明。
（1）变量声明：使用var关键字声明变量
var a
（2）变量赋值：
//声明和赋值分开
var a;
a = 1
//声明的时候进行赋值
var a = 1;
//多变量声明
var a=1,b=2,c=3;
var a=1,
b=2,
c=3;
3.2.4 数据类型
（1）字符串：String ，字符串是以单引号或双引号括起来的任意文本
//声明赋值
var x = new String("hello，world"); //不建议
var x = "hello，world";
//获取字符串长度
len = x.length
//转义字符
var x = "中国是我的家， china 与\"China（中国）\"同名。"
//换行，当字符串太长需要换行时使用 +
var x = "hello +
world";
//返回字符串中指定文本首次出现的索引（位置），找不到返回-1
var pos = x.indexOf("hello");
//返回指定文本在字符串中最后一次出现的索引,找不到返回-1
var pos =x.lastIndexOf("world");
//搜索特定值的字符串，并返回匹配的位置
var pos = x.search("hello")
//提取字符串的某个部分并在新字符串中返回被提取的部分
//该方法设置两个参数：起始索引（开始位置），终止索引（结束位置）
//某个参数为负，则从字符串的结尾开始计数,substring()方法不支持负数
//省略第二个参数，则该方法将裁剪字符串的剩余部分
var res = x.slice(2,5);
var res = x.substring(2,5);
//用另一个值替换在字符串中指定的值：将 world 替换为 china
var n = x.replace("world", "china");
//把字符串转换为大写
var x2 = x.toUpperCase();
//把字符串转换为小写
x3 = x.toLowerCase();
//删除字符串两端的空白符
var str = " Hello World! ";
str = str.trim();
//字符串拼接
var x = "hello" + "world";
// 将字符串转换为数组
var txt = "a,b,c,d,e"; // 字符串
txt.split(","); // 用逗号分隔
txt.split(" "); // 用空格分隔
txt.split("|"); // 用竖线分隔
（2）数字类型：Number ，JavaScript不区分整数和浮点数，统一用Number表示。JavaScript 不会定义不同类型的数，比如整数、短的、长的、浮点的等等。JavaScript 数值始终以双精度浮点数来存储
整数（不使用指数或科学计数法）会被精确到 15 位。
小数的最大数是 17 位，但是浮点的算数并不总是 100% 精准
var new Number(123) //不建议
var x = 123; // 整数123
var x = 0.456; // 浮点数0.456
var x = 1.2345e3; // 科学计数法表示1.2345x1000，等同于1234.5
var x = -99; // 负数
var x = NaN; // NaN表示Not a Number，当无法计算结果时用NaN表示
var x = Infinity; // Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity
// 进行运算时只有当两个都是数字类型才能计算，否则会被当做字符串进行拼接
//确定某个值是否是数
var x = 100 / "Apple";
isNaN(x); // 返回 true，因为 x 不是数
//Number()把 JavaScript 变量转换为数值：
x = "10"
Number(x); // 返回 10
NaN 属于 JavaScript 保留字，指示数字并非合法的数字
（3）布尔值：Boolean
// 布尔（逻辑）只能有两个值：true 或 false。
var x=true;
var y=false;
（4）null和undefined：
1）null表示一个“空”的值，它和0以及空字符串’‘不同，0是一个数值，’'表示长度为0的字符串，而null表示“空
2）而undefined表示值未定义。大多数情况下，我们都应该用null。undefined仅仅在判断函数参数是否传递的情况下有用。
（5）数组：Array：数组是一组按顺序排列的集合，集合的每个值称为元素。JavaScript的数组可以包括任意数据类型。（类型为Object）
var x = new Array(1, 2, 3.14, 'Hello', null, true); //不建议
var x = [1, 2, 3.14, 'Hello', null, true];
//访问数组元素
var y = x[0];
//修改数组元素
x[0] = 0;
//获取数组长度
len = x.length;
//访问完整数组
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars; //Audi,BMW,porsche
//遍历数组元素
for (i = 0; i <x.length; i++) {
console.log(x[i]);
}
//向数组中添加元素
//方法1
x.push("ceshi");
//方法2
x[x.length] = "ceshi";
//把数组转换为（逗号分隔）的字符串
x.toString();
//把数组转换为（任意符号分隔）的字符串
x.join(" * ") // 以 * 分隔
//从数组中删除最后一个元素
x.pop()
var y=x.pop() //获取删除的元素
//（在数组结尾处）向数组添加一个新的元素
x.push();
//splice()方法，第一个参数（2）定义了应添加新元素的位置（拼接）
//第二个参数（0）定义应删除多少元素。
//其余参数（“abc”，“efg”）定义要添加的新元素
x.splice(2, 2, "Lemon", "Kiwi");
//通过合并（连接）现有数组来创建一个新数组
var y = [1,2,3,4,5,6]
var z = x.concat(y)
var m = x.concat(y,z)
//数组切片，从开始参数选取元素，直到结束参数（不包括）为止
var y=x.slice(1, 3) //返回原数组中1,2位置的值
//以字母顺序对数组进行排序，首字母的ASCII码
x.sort();
//反转数组中的元素
x.reverse();
（5）对象：Object，对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔
var person={
firstname : "John",
lastname : "Doe",
id : 5566
};
var person = {
name: 'Bob',
age: 20,
tags: ['js', 'web', 'mobile'],
city: 'Beijing',
hasCar: true,
zipcode: null
};
//属性的访问
person.name;
person["name"];
//遍历对象的属性
for (i in person){
console.log(x[i]);
}
//从对象中删除属性,将会同时删除属性名和属性值
delete person.age
3.2.5 函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。当调用该函数时，会执行函数内的代码。可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。
语法
function functionname(参数1, 参数 2, 参数 3) {
要执行的代码
}
var x = myFunction(4, 3); // 调用函数，返回值被赋值给 x
function myFunction(a, b) {
return a * b; // 函数返回 a 和 b 的乘积
}
3.2.6 运算符
（1）算数运算符
当 y = 5
（2）赋值运算符
（3）比较运算符
当x=5
（4）逻辑运算符
（5）条件运算
variablename=(condition)?value1:value2
//满足条件voteable=“年龄太小”，反之voteable=“年龄已达到”
voteable=(age<18)?"年龄太小":"年龄已达到";
3.2.7 控制语句
（1）条件语句：
//if 语句
if (time<20){
x="Good day";
}
// if else语句
if (time<20){
x="Good day";
}
else{
x="Good evening";
}
//if else if else语句
if (time<10){
x = "早上好";
}
else if (time>=10 && time<18){
x = "下午好";
}
else{
x = "晚上好";
}
（2）switch语句：
// 变量d与switch中的case后的数字进行比较，匹配则执行后面的语句，并且使用break退出循环
var d=new Date().getDay();
switch (d)
{
case 0:x="今天是星期日";
break;
case 1:x="今天是星期一";
break;
case 2:x="今天是星期二";
break;
case 3:x="今天是星期三";
break;
case 4:x="今天是星期四";
break;
case 5:x="今天是星期五";
break;
case 6:x="今天是星期六";
break;
}
//若匹配不到则会执行default后面的代码
var d=new Date().getDay();
switch (d)
{
case 6:x="今天是星期六";
break;
case 0:x="今天是星期日";
break;
default: x="期待周末";
}
（3）for循环语句
var cars=["BMW","audi","benc"]
for (var i=0;i<cars.length;i++){
document.write(cars[i] + "<br>");
}
//for in 循环，用于遍历对象
var person={fname:"John",lname:"Doe",age:25};
for (x in person) // x 为属性名
{
txt=txt + person[x];
}
（4）while循环
var x=15,i=3;
while (i<5){
x=x+i ;
i++;
}
//即使条件不满足，也会执行一次do语句
var i = 3 , x = 20;
do{
x=x + i;
i++;
}
while (i<5);
（5）break与continue
break：跳出整个循环，剩下的循环不会被执行
continue：跳出当前循环，进入到下一循环。
3.2.8 类型转换
（1）typeof：获取变量的类型
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof NaN // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object
typeof new Date() // 返回 object
typeof function () {} // 返回 function
typeof myCar // 返回 undefined (如果 myCar 没有声明)
typeof null // 返回 object
（2） String() ：将数字转化为字符串
String(x) // 将变量 x 转换为字符串并返回
String(123) // 将数字 123 转换为字符串并返回
String(100 + 23) // 将数字表达式转换为字符串并返回
（3） Number()：将字符串转换为数字
Number("3.14") // 返回 3.14
Number(" ") // 返回 0
Number("") // 返回 0
Number("99 88") // 返回 NaN
3.3 事件
HTML 事件可以是浏览器行为，也可以是用户行为。以下是 HTML 事件的实例：HTML 页面完成加载、HTML input 字段改变时、HTML 按钮被点击
3.4 正则表达式
正则表达式是由一个字符序列形成的搜索模式。当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。3.4.1 语法
/正则表达式主体/修饰符(可选)
//runoob 是一个正则表达式主体 (用于检索)。
//i 是一个修饰符 (搜索不区分大小写)。
var patt = /runoob/i
3.4.2 字符串方法
（1）search()： 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置
//在str中寻找 Runoob 串，并返回成功匹配的起始位置
//方法1：
var str = "Visit Runoob!";
var n = str.search(/Runoob/i); //6
//方法2：将正则表达式写成字符串的形式，字符串参数会转换为正则表达式
var n = str.search("Runoob");
（2）replace()
//使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 Runoob
var txt = str.replace(/microsoft/i,"Runoob");
var txt = str.replace("Microsoft","Runoob");
（3）匹配模式
（4）test()：test() 方法是一个正则表达式方法。test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
//搜索字符串中是否存在字符 "e"
var patt = /e/;
patt.test("The best things in life are free!");
（5）exec()： 用于检索字符串中的正则表达式的匹配。该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null
/e/.exec("The best things in life are free!");
（6）验证表单实例
/*是否带有小数*/
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=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
return reg.test(str);
}
3.5 异常处理
当 JavaScript 引擎执行 JavaScript 代码时，会发生各种错误。 可能是语法错误，通常是程序员造成的编码错误或错别字。可能是拼写错误或语言中缺少的功能（可能由于浏览器差异）。可能是由于来自服务器或用户的错误输出而导致的错误当错误发生时，当事情出问题时，JavaScript 引擎通常会停止，并生成一个错误消息。
3.5.1 语法
try {
... //异常的抛出
} catch(e) {
... //异常的捕获与处理
} finally {
... //结束处理
}
（1）try：存放我们正常的代码逻辑。
//正常代码
try{
var msg = "这是一条消息";
alert(msg);
}
（2）catch：若上述代码在运行中出现错误，则执行本语句下的代码，若无错误，不执行。
//此时不小心将 alert（）方法名写错了
try{
var msg = "这是一条消息";
alerts(msg);
}
//捕获上述的代码错误err 以及其错误信息err.message
//执行该段代码
catch(err) {
var txt+="错误描述：" + err.message + "\n\n";
alert(txt);
}
（3）finally： 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。
finally {
document.getElementById("demo").value = "test";
}
3.6 调试工具
代码编写过程中可能包含语法错误，逻辑错误，如果没有调试工具，这些错误比较难于发现。通常，如果 JavaScript 出现错误，是不会有提示信息，这样你就无法找到代码错误的位置，所以需要用到调试工具。
浏览器启用调试工具一般是按下 F12 键，并在调试菜单中选择 “Console” 。
可以使用console.log() 方法在调试窗口上打印 JavaScript 值
a = 5;
b = 6;
c = a + b;
console.log(c);
设置断点：
debugger 关键字用于停止执行 JavaScript，并调用调试函数。
这个关键字与在调试工具中设置断点的效果是一样的。
如果没有调试可用，debugger 语句将无法工作。
开启 debugger ，代码在第三行前停止执行。
var x = 15 * 5;
debugger;
document.getElementbyId("demo").innerHTML = x;
3.8 this关键字
面向对象语言中 this 表示当前对象的一个引用。在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。
（1）在方法中，this 表示该方法所属的对象。
（2）如果单独使用，this 表示全局对象。
（3）在函数中，this 表示全局对象。
（4）在函数中，在严格模式下，this 是未定义的(undefined)。
（5）在事件中，this 表示接收事件的元素。
（6）类似 call() 和 apply() 方法可以将 this 引用到任何对象。
3.8.1 对象方法中的this
//this表示当前的person对象，可以通过this访问对象的属性，类似于python类中的self
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
3.8.2 函数中的this和单独this
指向全局对象globe，例如在浏览器中指向window对象
3.9 json
JSON 是用于存储和传输数据的格式。JSON 通常用于服务端向网页传递数据 。
//使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象
var text = '{ "name" : "joke", "age" : 12 }';
var obj = JSON.parse(text);
javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值
<a href="javascript:void(0)">单击此处什么也不会发生</a>
href="#"与href="javascript:void(0)的区别
默认的锚是#top 也就是网页的上端。
而javascript:void(0), 仅仅表示一个死链接。
在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。
如果你要定义一个死链接请使用 javascript:void(0) 。
<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>
<br>
...
<br>
<p id="pos">尾部定位点</p>
命名规则
一般很多代码语言的命名规则都是类似的，例如:
变量和函数为小驼峰法标识, 即除第一个单词之外，其他单词首字母大写（ lowerCamelCase）
全局变量为大写 (UPPERCASE )
常量 (如 PI) 为大写 (UPPERCASE )
扫一扫
1503
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
