JavaScript介绍
一、JavaScript简介
- 1.在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现二层,因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名JavaScript。但实际上它的语法风格与Self及Scheme较为接近;
- 2.为了取得技术优势,微软推出了JScript,CEnvi退出ScriptEase,与JavaScript同样可以在浏览器上运行,为了统一规格,因为JavaScript兼容于ECMA标准,因此也称为ECMAScript;
二、JavaScript基本特点
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果,通常JavaScript脚本是通过嵌入在HTML中来实现自身功能的。
- 1.是一种解释性脚本语言(代码不进行预编译);
- 2.主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为;
- 3.可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离;
- 4.跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如:windows、Linux、Mac、Android、iOS等);
JavaScript脚本语言同其他语言一样,有它自身的基本数据类型,表达式和算数运算符及程序的基本流程框架。JavaScript提供了四种基本的数据类型和两种特殊数据类型来处理数据和文字。而变量提供存放信息的地方,表达式则可以完成较复杂的信息处理。
三、JavaScript组成部分
- ECMAScript:描述了该语言的语法和基本对象;
- 文档对象模型(DOM):描述处理网页内容的方法和接口;
- 浏览器对象模型(BOM):描述与浏览器进行交互的方法和接口
简单地说,ECMAScript描述了以下内容:
- 语法;
- 类型;
- 语句;
- 关键字;
- 保留字;
- 运算符;
- 对象,基于面向对象的语言;
四、JavaScript基础
1.JS的引入方式
# 直接编写:js代码可以放在head标签中,也可以放在body标签中,推荐放在body标签内的最下面
<script>
alert("hello world!")
</script>
# 文件导入
<script src="hello.js"></script>
2.JS的变量
- 变量分为全局变量和局部变量,声明变量时不用声明变量类型,局部变量使用var关键字,如果没有var关键字,则为全局变量;
var a;
<br>a=3;
- 一行可以声明多个变量,并且可以是不同类型;
var name="eric", age=10,job="lecture";
- 变量命名:首字符只能是字母、下划线和$三选一,其余字符可以是下划线、$或任意字母数字,且区分大小写,x与X是两个变量;
Camel 标记法
首字母是小写的,接下来的单词都以大写字符开头。例如:
var myTestValue = 0, mySecondValue = "hi";
Pascal 标记法
首字母是大写的,接下来的单词都以大写字符开头。例如:
Var MyTestValue = 0, MySecondValue = "hi";
匈牙利类型标记法
在以 Pascal 标记法命名的变量前附加一个小写字母(或小写字母序列),说明该变量的类型。例如,i 表示整数,s 表示字符串,如下所示“
Var iMyTestValue = 0, sMySecondValue = "hi";
3.常量和标识符
常量:直接在程序中出现的数据值;
标识符:
- 由不以数字开头的字母、数字、下划线(_)、美元符号($)组成;
- 常用于表示函数、变量等的名称;
- 例如:_abc,$abc,abc,abc123是标识符,而1abc不是;
- JavaScript语言中代表特定含义的词称为保留字,不允许程序再定义为标识符;
关键字:
4.JS的数据类型
数据类型:
Number 数字值
Boolean 布尔值
String 字符串
Undefined undefined
null null
数字类型(number):不区分整型数值和浮点型数值;
var num1 = 10; // 表示整数10
var num2 = 1.1; // 表示浮点数1.1
var num3 = 10.0; // 整数,解析成10
var num4 = 10.; // 小数点后面没有数字,解析成10
var num5 = 3.124e7; // 等于32140000,科学记数法
字符串类型(string):是由Unicode字符、数字、标点符号组成的序列;字符串常量首尾由单引号或双引号括起;JavaScript中没有字符类型;常用特数字符在字符串中的表达;字符串种特殊字符必须加上反斜杠();常用的转义字符"\n":换行;"'":单引号;""":双引号;"\":反斜杠;
布尔类型(boolean):Boolean类型仅有两个值,true和false,也代表1和0。实际运算中true=1,false=0。布尔值也可以看作on/off、yes/no、1/0;Boolean值主要用于JavaScript的条件控制语句:
if (x==1){
y=y+1;
}else{
y=y-1;
}
undefinedl:undefined类型只有之一个值,即undefined。当声明的变量未初始化时,该变量的默认值是undefined,当函数无明确返回值时,返回的也是undefined。
null:null类型也只有一个值,即专用的null,就是它的字面值。undefined实际上是从null派生而来的,因此ECMAScript将它们定义为相等的。尽管这两个值相等,但是它们的含义不同。undefined是声明了变量但未对其初始化(变量未赋值),null则用于表示未存在的对象。如果函数或方法要返回的是对象,那么找不到该对象时,通常返回的是null。
5.运算符
运算符分类
算术运算符:
+ - * / % ++ --
比较运算符:
> >= < <= != ==(值相等) ===(值相等,类型相同) !==
逻辑运算符:
&& || !
赋值运算符:
= += -= *= /=
字符串运算符:
+ 连接,两边操作数有一个或两个是字符串就做连接运算
算术运算符:自增、自减
i++:先赋值后计算;
++i:先计算后赋值;
假设x=2,那么x++表达式执行后的值为3,x--表达式执行后的值为1;i++相当于i=i+1,i--相当于i=i-1;
注意:NaN
var d="property";
d=+d;
alert(d); //NaN:属于Number类型的一个特殊值,当遇到将字符串转成数字无效时,就会得到一个NaN数据
alert(typeof(d)); //Number
//NaN特点:
var n=NaN;
alert(n>3);
alert(n<3);
alert(n==3);
alert(n==NaN);
alert(n!=NaN); //NaN参与的所有的运算都是false,除了!=
比较运算符
> >= < <= != == === !==
console.log(2==2); //true
console.log(2=='2'); //true 因为js是弱类型的,所以返回true
console.log(2==='2'); //false (===判断的是类型,类型不一样就为false了)
console.log(2!=='2'); //true !==和===是相反的
注意:
var bResult = "Blue" < "alpha";
alert(bResult); //输出 true
在上面的例子中,字符串 "Blue" 小于 "alpha",因为字母 B 的字符代码是 66,字母 a 的字符代码是 97。
比较数字和字符串
另一种棘手的状况发生在比较两个字符串形式的数字时,比如:
var bResult = "25" < "3";
alert(bResult); //输出 "true"
上面这段代码比较的是字符串 "25" 和 "3"。两个运算数都是字符串,所以比较的是它们的字符代码("2" 的字符代码是 50,"3" 的字符代码是 51)。
不过,如果把某个运算数该为数字,那么结果就有趣了:
var bResult = "25" < 3;
alert(bResult); //输出 "false"
这里,字符串 "25" 将被转换成数字 25,然后与数字 3 进行比较,结果不出所料。
总结:
比较运算符两侧如果一个是数字类型,一个是其他类型,会将其类型转换成数字类型.
比较运算符两侧如果都是字符串类型,比较的是最高位的ascii码,如果最高位相等,继续取第二位比较.
逻辑运算符
console.log(1&&3); //3 两个为真才为真(0为假,其他的数字都代表真)
console.log(0&&3); //0 只要有一个为假则为假
console.log(0||3); //3
console.log(2||3); //2
五、流程控制
- 顺序结构(从上往下顺序执行)
- 分支结构
- 循环结构
分支结构
1.if ... else结构:
if (表达式1) {
语句1;
}else if (表达式2){
语句2;
}else if (表达式3){
语句3;
} else{
语句4;
}
2.switch-case结构:
switch基本格式
switch (表达式) {
case 值1:语句1;break;
case 值2:语句2;break;
case 值3:语句3;break;
default:语句4;
}
实例:
switch(x){
case 1:y="星期一"; break;
case 2:y="星期二"; break;
case 3:y="星期三"; break;
case 4:y="星期四"; break;
case 5:y="星期五"; break;
case 6:y="星期六"; break;
case 7:y="星期日"; break;
default: y="未定义";
}
switch-case结构比if...else if... else结构更加清晰,程序更具可读性
循环结构
1.for循环:(推荐使用)
语法规则:
for(初始表达式; 条件表达式; 自增或自减)
{
执行语句
……
}
for循环另一种形式:
for( 变量 in 数组或对象)
{
执行语句
……
}
2.while循环:
语法规则:
while (条件){
语句1;
...
}
六、异常处理
try {
//这段代码从上往下运行,其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
// 如果try代码块中抛出了异常,catch代码块中的代码就会被执行。
//e是一个局部变量,用来指向Error对象或者其他抛出的对象
}
finally {
//无论try中代码是否有异常抛出(甚至是try代码块中有return语句),finally代码块中始终会被执行。
}