JavaScript基础细讲
JavaScript基础细讲
JavaScript语言的前身叫作Livescript。自从Sun公司推出著名的Java语言之后，Netscape公司引进了Sun公司有关Java的程序概念，将自己原有的Livescript 重新进行设计，并改名为JavaScript。
JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，有了JavaScript，可使网页变得生动。使用它的目的是与HTML超文本标识语言、Java 脚本语言一起实现在一个网页中链接多个对象，与网络客户交互作用，从而可以开发客户端的应用程序。它是通过嵌入或调入在标准的HTML语言中实现的。
JavaScript优点
1.简单性
JavaScript是一种脚本编写语言，它采用小程序段的方式实现编程，像其它脚本语言一样，JavaScript同样已是一种解释性语言，它提供了一个简易的开发过程。它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。
2.动态性
JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页中执行了某种操作所产生的动作，就称为“事件”。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。
3.跨平台性
JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可以正确执行。
4.节省CGI的交互时间
随着WWW的迅速发展有许WWW服务器提供的服务要与浏览者进行交流，确浏览的身份、需服务的内等等，这项工作通常由CGI/PERL编写相应的接口程序与用户进行交互来完成。很显然，通过网络与用户的交互过程一方面增大了网络的通信量，另一方面影响了服务器的服务性能。服务器为一个用户运行一个CGI时，需要一个进程为它服务，它要占用服务器的资源(如CPU服务、内存耗费等)，如果用户填表出现错误，交互服务占用的时间就会相应增加。被访问的热点主机与用户交互越多，服务器的性能影响就越大。
JavaScript是一种基于客户端浏览器的语言，用户在浏览中填表、验证的交互过程只是通过浏览器对调入HTML文档中的JavaScript源代码进行解释执行来完成的，即使是必须调用CGI的部分，浏览器只将用户输入验证后的信息提交给远程的服务器，大大减少了服务器的开销。
编写JavaScript
1、JavaScript代码存在形式
<!-- 方式一 -->
<script type"text/javascript" src="JS文件"></script>
<!-- 方式二 -->
<script type"text/javascript">
Js代码内容
</script>
2、JavaScript代码存放位置
- HTML的head中
- HTML的body代码块底部(推荐)
由于Html代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面，如果放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。
<script src="https://www.gstatic.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script>
<script>
alert('123');
</script>
每个语言刚开始都是Hello World那咱们也来写一个吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
document.write("Hello World!!");
document.write("My name is 张岩林");
</script>
</body>
</html>
效果如下：
注意：每一行代码写完要写一个分号来分割开，谨记
JavaScript变量
JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量。
<script type="text/javascript">
// 全局变量
name = 'seven';
// 定义函数
function func(){
// 局部变量
var age = 18;
// 全局变量
gender = "男"
}
</script>
注：在JS中也有注释，//表示单行注释，/* ...注释内容... */表示多行注释，此注释仅在Script块中生效
数据类型
JavaScript 中的数据类型分为原始类型和对象类型：
- 原始类型
- 数字
- 字符串
- 布尔值
- 对象类型
- 数组
- “字典”
- ...
特别的，数字、布尔值、null、undefined、字符串是不可变。
null是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值”。
undefined是一个特殊值，表示变量未定义。
1、number数字类型
avaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。
转换：
- parseInt(..) 将某值转换成数字，不成功则NaN
- parseFloat(..) 将某值转换成浮点数，不成功则NaN
特殊值：
- NaN，非数字。可使用 isNaN(num) 来判断。
- Infinity，无穷大。可使用 isFinite(num) 来判断。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
Number 对数字的支持Number.MAX_VALUE 最大数值Number.MIN_VALUE 最小数值Number.NaN 特殊的非数字值Number.NEGATIVE_INFINITY 负无穷大Number.POSITIVE_INFINITY 正无穷大Number.toExponential( ) 用指数计数法格式化数字Number.toFixed( ) 采用定点计数法格式化数字Number.toLocaleString( ) 把数字转换成本地格式的字符串Number.toPrecision( ) 格式化数字的有效位Number.toString( ) 将—个数字转换成字符串Number.valueOf( ) 返回原始数值 |
|
1
2
3
4
5
6
7
8
9
|
<script> var a = 123; var b = '123'; var c = parseInt(b); console.log(c); var d = parseFloat(b); console.log(d); var e = "a234";</script> |
2、string字符串
字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
String 对字符串的支持String.charAt( ) 返回字符串中的第n个字符String.charCodeAt( ) 返回字符串中的第n个字符的代码String.concat( ) 连接字符串String.fromCharCode( ) 从字符编码创建—个字符串String.indexOf( ) 检索字符串String.lastIndexOf( ) 从后向前检索一个字符串String.length 字符串的长度String.localeCompare( ) 用本地特定的顺序来比较两个字符串String.match( ) 找到一个或多个正则表达式的匹配String.replace( ) 替换一个与正则表达式匹配的子串String.search( ) 检索与正则表达式相匹配的子串String.slice( ) 抽取一个子串String.split( ) 将字符串分割成字符串数组String.substr( ) 抽取一个子串String.substring( ) 返回字符串的一个子串String.toLocaleLowerCase( ) 把字符串转换小写String.toLocaleUpperCase( ) 将字符串转换成大写String.toLowerCase( ) 将字符串转换成小写String.toString( ) 返回字符串String.toUpperCase( ) 将字符串转换成大写String.valueOf( ) 返回字符串String.replace(regexp, replacement) 替换，正则中有g则替换所有，否则只替换第一个匹配项， $数字：匹配的第n个组内容； $&：当前匹配的内容； $`：位于匹配子串左侧的文本； $'：位于匹配子串右侧的文本 $$：直接量$符号 |
挨个练习一下吧
<script>
var a = "zhangyanlin";
document.write(a.charAt(5));
// 返回y
document.write(a.concat("haoshuai"));
// 返回zhangyanlinhaoshuai
document.write(a.indexOf("yan"));
// 返回5
document.write(a.length);
// 返回11
var b = "zhang7yan8lin";
document.write(b.split("7"));
//返回 ["zhang", "yan8lin"]
document.write(b.split(/\d/));
// 返回["zhang", "yan", "lin"]
document.write(b.slice(1,d1_text.length));
// 返回 hang7yan8lin
</script>
下面再写一个很有意思的案例，让字体滚动起来吧：
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id = num1 style="font-size: 50px;text-align: center;color: white;padding-left: 40px;padding-right: 40px">欢迎各位领导莅临检查,中华人民共和国万岁，我爱天安门，当初我们手拉着手！</div>
<script type="text/javascript">
setInterval(function () {
d1 = document.getElementById('num1');
d1_text = d1.innerText;
//字符串索引
first_char = d1_text[0];
//字符串切片
sub_char = d1_text.slice(1,d1_text.length);
//字符串拼接
new_str = sub_char + first_char;
d1.innerText = new_str;
},500);
</script>
</body>
</html>
3、Boolean布尔类型
布尔类型仅包含真假，与Python不同的是其首字母小写。
- == 比较值相等
- != 不等于
- === 比较值和类型相等
- !=== 不等于
- || 或
- && 且
4、Array数组
JavaScript中的数组和Python中的列表非常相似
数组提供的方法有
Array 对数组的内部支持 Array.concat( ) 连接数组 Array.join( ) 将数组元素连接起来以构建一个字符串 Array.length 数组的大小 Array.pop( ) 删除并返回数组的最后一个元素 Array.push( ) 给数组添加元素 Array.reverse( ) 颠倒数组中元素的顺序 Array.shift( ) 将元素移出数组 Array.slice( ) 返回数组的一部分 Array.sort( ) 对数组元素进行排序 Array.splice( ) 插入、删除或替换数组的元素Array.splice(n,0,val) 指定位置插入元素
Array.splice(n,1,val) 指定位置替换元素 Array.splice(n,1) 指定位置删除元素Array.toLocaleString( ) 把数组转换成局部字符串 Array.toString( ) 将数组转换成一个字符串 Array.unshift( ) 在数组头部插入一个元素
<script>
var a = ["zhang","yan","lin","aylin"];
var b = [1,2,3,4];
document.write(a.concat(b));
// 输出结果["zhang","yan","lin","aylin",1,2,3,4]
document.write(a.join("_"));
// 输出结果zhang_yan_lin_aylin
document.write(a.length);
// 输出结果4
var c = a.pop();
document.write(c);
// 输出aylin
a.splice(1,0,"索");
document.write(a);
// 输出 ["zhang","索","yan","lin","aylin"]
</script>
更多请参考http://www.shouce.ren/api/javascript/l_Object.html
条件判断
1、条件语句
JavaScript中支持两个中条件语句，分别是：if 和 switch
if判断
var a = 0 ;
if (a == 0){
document.write("您的值是正确的")
}else if(a < 0 ) {
document.write("您的值小于0")
}else {
document.write("您的值是错的")
}
switch语句
switch(name){
case '1':
age = 18;
break;
case '2':
age = 456;
break;
default :
age = 777;
}
2、循环语句
JavaScript中支持三种循环语句，分别是：
方式一
var names = ["zhang", "yan", "lin"];
for(var i=0;i<names.length;i++){
console.log(i);
console.log(names[i]);
}
方式二
var names = ["zhang", "yan", "lin"];
for(var index in names){
console.log(index);
console.log(names[index]);
}
方式三
i = 0;
while (i<10){
if (i == 7){
continue
}else {
document.write(i);
i++
}
}
3、异常处理
try {
//这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
// 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
//e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally {
//无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}
注：主动跑出异常 throw Error('xxxx')
函数
1、基本函数
JavaScript中函数基本上可以分为一下三类：
// 普通函数
function func() {
return "zhangyanlin"
}
// 匿名函数
var func = function(arg){
return "zhangyanlin";
};
// 自执行函数
(function(arg){
console.log(arg);
})('123')
注意：对于JavaScript中函数参数，实际参数的个数可能小于形式参数的个数，函数内的特殊值arguments中封装了所有实际参数。
实例：
<button onclick="myFunction('张岩林','CEO')">点击这里</button>
<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>
2、作用域
JavaScript中每个函数都有自己的作用域，当出现函数嵌套时，就出现了作用域链。当内层函数使用变量时，会根据作用域链从内到外一层层的循环，如果不存在，则异常。
切记：所有的作用域在创建函数且未执行时候就已经存在。
更多请参考http://www.cnblogs.com/wupeiqi/p/5649402.html
3、闭包
「闭包」，是指拥有多个变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
闭包是个函数，而它「记住了周围发生了什么」。表现为由「一个函数」体中定义了「另个函数」
由于作用域链只能从内向外找，默认外部无法获取函数内部变量。闭包，在外部获取函数内部的变量。
function f2(){
var arg= [11,22,33,44];
function f3(){
return arg;
}
return f3;
}
ret = f2();
ret();
4、面向对象
function Foo (name,age) {
this.Name = name;
this.Age = age;
this.Func = function(arg){
return this.Name + arg;
}
}
var obj = new Foo('张岩林', 18);
var ret = obj.Func("很帅");
console.log(ret);
对于上述代码需要注意：
- Foo充当的构造函数
- this代指对象
- 创建对象时需要使用 new
上述代码中每个对象中均保存了一个相同的Func函数，从而浪费内存。使用原型和可以解决该问题：
function Foo (name,age) {
this.Name = name;
this.Age = age;
}
Foo.prototype = {
GetInfo: function(){
return this.Name + this.Age
},
Func : function(arg){
return this.Name + arg;
}
}
