前端基础:JavaScript介绍

时间:2022-09-24 07:59:57

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):描述与浏览器进行交互的方法和接口

前端基础:JavaScript介绍

简单地说,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语言中代表特定含义的词称为保留字,不允许程序再定义为标识符;

关键字:

前端基础: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代码块中始终会被执行。
}