JavaScript 是世界上最流行的脚本语言。 JavaScript 是属于 web 的语言，它适用于 PC、笔记本电脑、平板电脑和移动电话。 JavaScript 被设计为向 HTML 页面增加交互性。 许多 HTML 开发者都不是程序员，但是 JavaScript 却拥有非常简单的语法。
JavaScript对大小写敏感。
1.1 JavaScript的用法
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
Ø <script> 标签
如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
<script> 和 </script> 之间的代码行包含了 JavaScript:
那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
Ø <body> 中的 JavaScript
在本例中，JavaScript 会在页面加载时向 HTML 的 <body> 写文本：
1.2 JavaScript 数据类型
JavaScript 有多种数据类型：数字，字符串，数组，对象等等：
在 JavaScript 中有 5 种不同的数据类型：
l string
l number
l boolean
l object
l function
3 种对象类型：
l Object
l Date
l Array
2 个不包含任何值的数据类型：
l null
l undefined
你可以使用 typeof 操作符来查看 JavaScript 变量的数据类型。
1.3 JavaScript函数
我们把一个 JavaScript 函数放置到 HTML 页面的 <head> 部分：
我们把一个 JavaScript 函数放置到 HTML 页面的 <body> 部分：
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：
1.4 JavaScript注释
双斜杠 // 后的内容将会被浏览器忽略。
1.5 JavaScript变量
在编程语言中，变量用于存储数据值。
JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值：
1.6 JavaScript操作符
1.7 JavaScript关键字
和其他任何编程语言一样，JavaScript 保留了一些标识符为自己所用。
JavaScript 保留了一些关键字，这些关键字在当前的语言版本中并没有使用，但在以后 JavaScript 扩展中会用到。
JavaScript 标识符必须以字母、下划线（_）或美元符（$）开始。
后续的字符可以是字母、数字、下划线或美元符（数字是不允许作为首字符出现的，以便 JavaScript 可以轻易区分开标识符和数字）。
以下是 JavaScript 中最重要的保留字（按字母顺序）：
1.8 JavaScript If...Else 语句
通常在写代码时，总是需要为不同的决定来执行不同的动作。可以在代码中使用条件语句来完成该任务。
在 JavaScript 中，我们可使用以下条件语句：
l if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
l if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
l JavaScript三目运算 - 当条件为true 时执行代码，当条件为 false 时执行其他代码
l if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
l switch 语句 - 使用该语句来选择多个代码块之一来执行
1.9 JavaScript for循环
JavaScript 支持不同类型的循环：
l for - 循环代码块一定的次数
l for/in - 循环遍历对象的属性
l while - 当指定的条件为 true 时循环指定的代码块
l do/while - 同样当指定的条件为 true 时循环指定的代码块
1.10 JavaScript JSON
JSON 是用于存储和传输数据的格式。
JSON 通常用于服务端向网页传递数据 。
什么是 JSON?
l JSON 英文全称 JavaScript Object Notation
l JSON 是一种轻量级的数据交换格式。
l JSON是独立的语言 *
l JSON 易于理解。
注：JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。文本可以被任何编程语言读取及作为数据格式传递。
以下 JSON 语法定义了 employees 对象: 3 条员工记录（对象）的数组:
{"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna","lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]}
JSON 语法规则:
l 数据为 键/值 对。
l 数据由逗号分隔。
l 大括号保存对象
l 方括号保存数组
JSON 字符串转换为 JavaScript 对象（两种方式）:
首先，创建 JavaScript 字符串，字符串为 JSON 格式的数据：
var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
l 使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:
var obj = JSON.parse(text);
l JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。
var obj = eval ("(" + txt + ")");
eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。必须把文本包围在小括号中，这样才能避免语法错误。
eval() 函数可编译并执行任何 JavaScript 代码。这隐藏了一个潜在的安全问题。
使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。JSON 解析器只能识别 JSON 文本，而不会编译脚本。而且 JSON 解析器的速度更快。
最后，在页面中使用新的 JavaScript 对象：
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
使用JSON.stringify方法Javascript对象转换为JSON字符串：
var str = {"name":"小牛学堂", "site":"http://www.edu360.cn"}
str_pretty1 = JSON.stringify(str)
alert(str_pretty1);
1.11 Javascript void
href="#"与href="javascript:void(0)"的区别：
l # 包含了一个位置信息，默认的锚是#top 也就是网页的上端。
l 而javascript:void(0), 仅仅表示一个死链接。
l 在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。
l 如果你要定义一个死链接请使用 javascript:void(0) 。
<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p id="pos">尾部定位点</p>
1.12 Javascript验证表单
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
表单数据经常需要使用 JavaScript 来验证其正确性：
l 验证表单数据是否为空？
l 验证输入是否是一个正确的email地址？
l 验证日期是否输入正确？
l 验证表单输入内容是否为数字型？
必填（或必选）项目
下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：
function validateForm()
{
var x=document.getElementById(“”).value;
if (x==null || x=="")
{
alert("姓名必须填写");
return false;
}
}
……
<form name="myForm" action="test.html" onsubmit="return validateForm()" method="post">
姓名: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
E-mail 验证：xxxx@asd.cc
下面的函数检查输入的数据是否符合电子邮件地址的基本语法。
意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：
function validateForm(){
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
alert("不是一个有效的 e-mail 地址");
return false;
}
}
……
<form name="myForm" action="test.html" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>
1.13 JavaScript正则表达式
正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
搜索模式可用于文本搜索和文本替换。
1) 什么是正则表达式？
正则表达式是由一个字符序列形成的搜索模式。
当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。
正则表达式可以是一个简单的字符，或一个更复杂的模式。
正则表达式可用于所有文本搜索和文本替换的操作。
2) 语法
/正则表达式主体/修饰符(可选)
3) 使用字符串方法
在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。
search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
function myFunction() {
var str = "My Test!";
// var n = str.search("Test");
var n = str.search(/test/i);
alert(n);
var str = "My Test";
var txt = str.replace(/test/i,"Javascript");
alert(txt);
}
4) 正则表达式修饰符
修饰符 可以在全局搜索中不区分大小写:
i执行对大小写不敏感的匹配。
g执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m执行多行匹配。
5) 正则表达式模式
l 方括号用于查找某个范围内的字符：
[abc]查找方括号之间的任何字符。
[0-9]查找任何从 0 至 9 的数字。
(x|y)查找任何以 | 分隔的选项。
l 元字符是拥有特殊含义的字符：
\d查找数字。
\s查找空白字符。
\uxxxx查找以十六进制数 xxxx 规定的 Unicode 字符。
l 量词:
n+匹配任何包含至少一个 n 的字符串。
n*匹配任何包含零个或多个 n 的字符串。
n?匹配任何包含零个或一个 n 的字符串。
6) 使用 RegExp 对象
在 JavaScript 中，RegExp 对象是一个预定义了属性和方法的正则表达式对象。
test() 方法是一个正则表达式方法。
test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
Eg:
/\d/.test(“123”) 返回true。
/^1\d{10}$/
/^0\d{2,3}-?\d{7,8}$/
验证邮箱的正则表达式：
function isEmail(str){
var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
return reg.test(str);
}
1.14 Javascript高级编程
1.14.1 Javascript对象
1) 创建 JavaScript 对象
通过 JavaScript，能够定义并创建自己的对象。
创建新对象有两种不同的方法：
l 定义并创建对象的实例
l 使用函数来定义对象，然后创建新的对象实例
var person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
p={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};
2) 使用对象构造器
使用函数来构造对象：
function person(firstname,lastname,age,eyecolor){
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
var myFather=new person("John","Doe",50,"blue");
alert(myFather.firstname + " is " + myFather.age + " years old.");
在JavaScript中，this通常指向的是我们正在执行的函数本身，或者是指向该函数所属的对象（运行时）。
1.14.2 Javascript Array(数组)对象
1) 什么是数组?
数组对象是使用单独的变量名来存储一系列的值。
2) 创建一个数组，
有三种方法, 下面代码定义了一个名为 myCars的数组对象：
1: 常规方式:
var myCars=new Array();
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";
2: 简洁方式:
var myCars=new Array("Saab","Volvo","BMW");
3: 字面:
var myCars=["Saab","Volvo","BMW"];
3) 访问数组
通过指定数组名以及索引号码，你可以访问某个特定的元素。
以下实例可以访问myCars数组的第一个值：
var name=myCars[0];
以下实例修改了数组 myCars 的第一个元素:
myCars[0]="Opel";
4) 在一个数组中你可以有不同的对象
所有的JavaScript变量都是对象。数组元素是对象。函数是对象。
因此，你可以在数组中有不同的变量类型。
可以在一个数组中包含对象元素、函数、数组：
myArray[0]=Date.now;
myArray[1]=myFunction;
myArray[2]=myCars;
数组方法和属性
使用数组对象预定义属性和方法：
var x=myCars.length // myCars 中元素的数量
var y=myCars.indexOf("Volvo") // "Volvo" 值的索引值
5) 数组常用方法
合并数组 - concat()
删除数组的最后一个元素 - pop()
数组的末尾添加新的元素 - push()
将一个数组中的元素的顺序反转排序 - reverse()
删除数组的第一个元素 - shift()
从一个数组中选择元素 - slice()
数组排序（按字母顺序升序）- sort()
数字排序（按数字顺序升序）- sort() eg:var arrs = [40,100,1,5,25,10]; arrs.sort(function(a,b){return a-b});
数字排序（按数字顺序降序）- sort() eg:var arrs = [40,100,1,5,25,10]; arrs.sort(function(a,b){return b-a});
转换数组到字符串 -toString()
声明：本站内容部分源于网络转载，出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。文章内容仅供参考，请咨询相关专业人士。
如果无意之中侵犯了您的版权，或有意见、反馈或投诉等情况, 请联系本站，[qq:]
Copyright ©2024 编程密语 All rights reserved 版权所有 鲁ICP备09004228号-12
鲁公网安备37020202000738号