前端之JavaScript基础

一什么是JavaScript

JavaScript是一门脚本语言，它用于HTML和web，更可广泛应用于服务器、PC、笔记本电脑等设备。有以下特点：

JavaScript是一门轻量级的编程语言
JavaScript是可插入HTML页面的编程语言
JavaScript插入HTML页面后，可由绝大部分浏览

JavaScript的组成：

核心（ECMAScript）：描述了语法、类型、语句、关键字、保留字、运算符、对象等内容
文档对象模型（DOM）：即Document object model，整合js，css，html
浏览器对象模型（BOM）：即Broswer object model，整合js和浏览器

JavaScript在开发中绝大多数情况是基于对象的，也是面向对象的。

二 JavaScript的引入方式

2.1 内部通过<script>标签引入

如需在HTML页面中插入JavaScript，需使用<script>标签，<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。

<script>
    alert("需要输出的内容");
</script>

2.2 外部通过<script>标签引入

我们可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件，需要在 <script> 标签的 "src" 属性中设置该 .js 文件：

<body>
　　 <script src="myScript.js"></script>
</body>

我们可以将脚本放置于 <head> 或者 <body>中，放在 <script> 标签中的脚本与外部引用的脚本运行效果完全一致。

注意：外部脚本不能包含<script标签>

三 JavaScript语句

JavaScript 语句是发给浏览器的命令，这些命令告诉浏览器需要做的事情。JavaScript区分大小写，每条语句以分号“;”结尾，用大括号”{}“表示作用域，而不是Python中的缩进，所以每条语句和变量之间可以有任意的空格、Tab或回车。

JavaScript用C/C++风格的表示注释：

单行注释：// 注释内容
多行注释：/* 注释内容 */

几个简单的示例如下：

<script>
    /* 下面3条语句均正确，意义相同 */
    document.getElementById("id1").innerHTML = "Hello World";
        document.getElementById("id1").innerHTML = "Hello World";
    {
    document.getElementById("id1").innerHTML =
            "Hello World";
    }
</script>

View Code

a = 1;
b = 2;
c = a +b;
//也可以如下写：
a = 1;b = 2;c = a+b;

View Code

补充说明--代码换行

我们可以在文本字符串中使用反斜杠对代码行进行换行。比如：

console.log("hello \
world!");

//错误方式
console.log \
("hello world!");

四变量、常量和标示符

4.1 变量

变量是用于存储信息的“容器”。就像数学中，我们用字母（比如a）来保存一个值（比如1）：

a = 1

在 JavaScript 中，这些字母被称为变量。

变量的特点：

变量是弱类型的
声明变量时不用声明变量类型，全都使用var关键字
一行可以声明多个变量（用逗号隔开），并且可以是不同类型
声明变量时可以不用var，如果不用var，那么它是全局变量
变量命名规则：首字符只能是字母、下划线、$美元符三选一，余下的字符可以是下划线、美元符号、任何字母或数字字符且区分大小写，x与X是两个变量

变量还应遵守以下某条著名的命名规则：

Camel 标记法
首字母是小写的，接下来的字母都以大写字符开头。例如：var myTestValue = 0;

Pascal 标记法
首字母是大写的，接下来的字母都以大写字符开头。例如：Var MyTestValue = 0;

匈牙利类型标记法
在以Pascal标记法命名的变量前附加一个小写字母（或小写字母序列），说明该变量的类型。例如：整数 i,字符串 s,数组 a,布尔 b等。例如：var iMyTestValue = 0；

View Code

4.2 常量和标示符

常量：直接在程序中出现的数据值

标示符：

由不以数字开头的字母、数字、下划线(_)、美元符号($)组成
常用于表示函数、变量等的名称
JavaScript语言中代表特定含义的词称为保留字（关键字），不允许程序再定义为标识符

关键字：

五数据类型

number     -----  数值
boolean    -----  布尔值
string     -----  字符串
undefined  -----  undefined
null       -----   null

5.1 数字类型(number)

数字类型为最基本的数据类型，它不区分整型数值和浮点型数值，所有数字都采用64位浮点格式存储，相当于Java和C语言中的double格式

整数

在JavaScript中10进制的整数由数字的序列组成
精确表达的范围是 -9007199254740992 (-253) 到 9007199254740992 (253)
超出范围的整数，精确度将受影响

浮点数

使用小数点记录数据，例如：1.2,1.3
使用指数记录数据，例如：1.2e2 = 1.2 x 10²

16进制和8进制数的表达

16进制数据前面加上0x，八进制前面加0
16进制数是由0-9，A-F等16个字符组成
8进制数由0-7等8个数字组成

进制间的转换

2进制: 1111 0111 0011 0001
16进制:0xF731
10进制:63281  
8进制: 0173461

5.2 字符串类型（string）

是由Unicode字符、数字、标点符号组成的序列；字符串常量首尾由单引号或双引号括起；JavaScript中没有字符类型；常用特殊字符在字符串中表达；

字符串中部分特殊字符必须加上右划线\；常用的转义字符 \n:换行 \':单引号 \":双引号 \\:右划线

字符串可以是引号中的任意文本。可以使用单引号或双引号：

var myName="joe";
var myName='JOE';

5.3 布尔型(boolean)

boolean类型仅有两个值：true和false，也代表1和0，实际运算中true=1，false=0

boolean值主要用于JavaScript的控制语句，例如：

if (a==1){
    b=a+1;
    }
else{
    b=a-1;
    }

5.4 null &undefined

undefined 类型

Undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。当函数无明确返回值时，返回的也是值 "undefined";

null 类型

另一种只有一个值的类型是null，它只有一个专用值null，即它的字面量。值undefined实际上是从值null派生来的，因此ECMAScript把它们定义为相等的。尽管这两个值相等，但它们的含义不同。undefined是声明了变量但未对其初始化时赋予该变量的值，null则用于表示尚未存在的对象。
如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。

5.5 数据类型的转换

JavaScript属于松散类型的程序语言
变量在声明的时候并不需要指定数据类型
变量只有在赋值的时候才会确定数据类型
表达式中包含不同类型数据则在计算过程中会强制进行类别转换

数字 + 字符串：数字转换为字符串
数字 + 布尔值：true转换为1，false转换为0
字符串 + 布尔值：布尔值转换为字符串true或false

强制数据类型转换

函数parseInt：   强制转换成整数   例如：parseInt("6.12")=6  ; parseInt(“12a")=12 ; parseInt(“a12")=NaN  ;parseInt(“1a2")=1

函数parseFloat： 强制转换成浮点数  例如：parseFloat("6.12")=6.12

函数eval：       将字符串强制转换为表达式并返回结果 例如：eval("1+1")=2 ; eval("1<2")=true

5.6 类型查询函数(typeof)

ECMAScript 提供了 typeof 运算符来判断一个值是否在某种类型的范围内。可以用这种运算符判断一个值是否表示一种原始类型。

如果它是原始类型，还可以判断它表示哪种原始类型。

函数typeof ：查询数值当前类型
 (string / number / boolean / object )

例如typeof("test"+3)      "string"
例如typeof(null)          "object "
例如typeof(true+1)        "number"
例如typeof(true-false)    "number"

六 JavaScript运算符

6.1 算术运算符

+   -    *    /    %    ++    --

注意1：自加自减

++i/--i：先计算后赋值
i++/i--：先赋值后计算

var i=10;
console.log(i++);       //10
console.log(i);         //11
console.log(++i);       //12
console.log(i);         //12
console.log(i--);       //12
console.log(--i);       //10

View Code

注意2: 单元运算符

- 除了可以表示减号还可以表示负号  例如：x=-y
+ 除了可以表示加法运算还可以用于字符串的连接  例如："abc"+"def"="abcdef"

补充：js不同于python，是一门弱类型语言

能够进行数据转换的叫做弱类型
console.log('1'==1)  //True
console.log('1'===1)  //False
  
强类型
print(1='1') //False

静态类型语言
一种在编译期间就确定数据类型的语言。大多数静态类型语言是通过要求在使用任一变量之前声明其数据类型来保证这一点的。Java 和 C 是静态类型语言。
动态类型语言
一种在运行期间才去确定数据类型的语言，与静态类型相反。VBScript 和 Python 是动态类型的，因为它们确定一个变量的类型是在您第一次给它赋值的时候。
强类型语言
一种总是强制类型定义的语言。Java 和 Python 是强制类型定义的。您有一个整数，如果不明确地进行转换 ，不能将把它当成一个字符串去应用。
弱类型语言
一种类型可以被忽略的语言，与强类型相反。JS 是弱类型的。在JS中，可以将字符串 '12' 和整数 3 进行连接得到字符串'123'，然后可以把它看成整数 123 ，所有这些都不需要任何的显示转换。
所以说 Python 既是动态类型语言 (因为它不使用显示数据类型声明)，又是强类型语言 (因为只要一个变量获得了一个数据类型，它实际上就一直是这个类型了)。

View Code

注意3: NaN

var d="joe";
    d=+d;
    alert(d);   //NaN：属于number类型的一个特殊值，当遇到将字符串转成数字无效时，就会得到一个NaN数据
    alert(typeof(d));  //number

//NaN特点:
var n=NaN;

alert(n>3);      //false
alert(n<3);      //false
alert(n==3);     //false
alert(n==NaN);   //false
alert(n!=3);     //true  NaN参与的所有的运算都是false，除了!=
alert(n!=NaN);   //true  NaN参与的所有的运算都是false，除了!=

6.2 逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。

给定 a=2 以及 b=4，下表解释了逻辑运算符：

逻辑 AND 运算符(&&)

逻辑 AND 运算的运算数可以是任何类型的，不止是 Boolean 值。

如果某个运算数不是原始的 Boolean 型值，逻辑 AND 运算并不一定返回 Boolean 值

如果某个运算数是 null，返回 null。
如果某个运算数是 NaN，返回 NaN。
如果某个运算数是 undefined，返回undefined。

逻辑 OR 运算符(||)

与逻辑 AND 运算符相似，如果某个运算数不是 Boolean 值，逻辑 OR 运算并不一定返回 Boolean 值

var a = parseInt("a12");
var b = 0;
console.log(a && b);  //NaN
var c;
var d = 0;
console.log(c && d);  //undefined

6.3 比较运算符

>   >=   <    <=    !=    ==    ===   !==

比较运算符在逻辑语句中使用，以测定变量或值是否相等。

给定a=5，下面的表格解释了比较运算符：

等性运算符，执行类型转换的规则如下：

如果一个运算数是 Boolean 值，在检查相等性之前，把它转换成数字值。false 转换成 0，true 为 1
如果一个运算数是字符串，另一个是数字，在检查相等性之前，要尝试把字符串转换成数字
如果一个运算数是对象，另一个是字符串，在检查相等性之前，要尝试把对象转换成字符串
如果一个运算数是对象，另一个是数字，在检查相等性之前，要尝试把对象转换成数字

在比较时，该运算符还遵守下列规则：

值 null 和 undefined 相等。
在检查相等性时，不能把 null 和 undefined 转换成其他值。
如果某个运算数是 NaN，等号将返回 false，非等号将返回 true。
如果两个运算数都是对象，那么比较的是它们的引用值。如果两个运算数指向同一对象，那么等号返回 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 进行比较，结果不出所料。

总结：
比较运算符两侧如果一个是数字类型,一个是其他类型,会将其类型转换成数字类型.
比较运算符两侧如果都是字符串类型,比较的是最高位的asc码,如果最高位相等,继续取第二位比较.

View Code

6.4 赋值运算符

假如a=10，b=5

用于字符串的+运算符

s1 = "hello ";
s2 = "world!";
s3 = s1 + s2;
console.log(s3);   //运行结果：hello world! 注意：要想在两个字符串之间增加空格，需要把空格插入一个字符串之中或者把空格插入表达式中。

对字符串和数字进行加法运算

两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串。

a = 1 + 1;
b = "1" + 1;
c = "hello" + 1;
console.log(a);   //2
console.log(b);   //11
console.log(c);   //hello1

三目运算

//条件 ？结果1:结果2
//判断条件是否成立，如果条件成立，执行结果1，不成立，执行结果2。
3>2? console.log("a"): console.log("b"); //a

七流程控制

顺序结构(从上向下顺序执行)
分支结构
循环结构

7.1 顺序结构

<script>
    console.log("星期一");
    console.log("星期二");
    console.log("星期三");
</script>

7.2 分支结构（判断语句）

7.2.1 if...else语句

1. if语句

只有当指定条件为true时，该语句才会执行代码。语句结构如下：

if (condition){
    当条件为 true 时执行的代码
}

if （1>2）
{
    console.log("执行该语句！")
}

View Code

2. if...else语句

在条件为 true 时执行代码，在条件为 false 时执行其他代码。语法结构如下：

if (condition){
    当条件为 true 时执行的代码
}
else{
    当条件不为 true 时执行的代码
}

var x = (new Date()).getDay();

if ( (x==6) || (x==0) )
{
    y="周末";
}
else
{
    y="工作日";
}

View Code

3. if...else if...else 语句

使用 if....else if...else 语句来选择多个代码块之一来执行。语法结构如下：

if (condition1)
{
    当条件 1 为 true 时执行的代码
}
else if (condition2)
{
    当条件 2 为 true 时执行的代码
}
...
else
{
  当所有条件都不为 true 时执行的代码
}

var x = (new Date()).getDay();

if (x == 0)
{
    console.log("星期天");
}
else if (x == 1)
{
    console.log("星期一");
}
else if (x == 2)
{
    console.log("星期二");
}
else if (x == 3)
{
    console.log("星期三");
}
else if (x == 4)
{
    console.log("星期四");
}
else if (x == 5)
{
    console.log("星期五");
}
else
{
    console.log("星期六");
}

View Code

7.2.2 switch语句

语法结构如下：

switch (表达式){
    case 值1:语句1;break;
    case 值2:语句2;break;
    case 值3:语句3;break;
    default:语句4;
}

工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行，不存在则执行default语句。

使用 break 来阻止代码自动地向下一个 case 运行。

var x = (new Date()).getDay();
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 0:y="星期日";    break;
default: y="未定义";
}
console.log(y)

View Code

switch比else if结构更加简洁清晰，使程序可读性更强，效率更高。

首先要看一个问题，if 语句适用范围比较广，只要是 boolean 表达式都可以用 if 判断；而 switch 只能对基本类型进行数值比较。两者的可比性就仅限在两个基本类型比较的范围内。
说到基本类型的数值比较，那当然要有两个数。然后重点来了——
if 语句每一句都是独立的，看下面的语句：
if (a == 1) ...
else if (a == 2) ...
这样 a 要被读入寄存器两次，1 和 2 分别被读入寄存器一次。于是你是否发现其实 a 读两次是有点多余的，在你全部比较完之前只需要一次读入寄存器就行了，其余都是额外开销。但是 if 语句必须每次都把里面的两个数从内存拿出来读到寄存器，它不知道你其实比较的是同一个 a。
于是 switch case 就出来了，把上面的改成 switch case 版本：
switch (a) {
        case 0:
                break;
        case 1:
}
总结:
1.switch用来根据一个整型值进行多路分支，并且编译器可以对多路分支进行优化
2.switch-case只将表达式计算一次,然后将表达式的值与每个case的值比较,进而选择执行哪一个case的语句块
3.if..else 的判断条件范围较广，每条语句基本上独立的，每次判断时都要条件加载一次。
所以在多路分支时用switch比if..else if .. else结构要效率高。

switch为什么效率高？

7.3 循环结构（循环语句）

7.3.1 for循环语句

语法结构如下：

for (初始化;条件;增量)
{
    语句1;
    ...
}

功能说明：实现条件循环，当条件成立时，执行语句1，否则跳出循环体

for(i=0;i<5;i++)
{
      console.log("hello" + i)
}

View Code

for/in

s = "abcdefg";     //该对象可以是数组等其他对象
for (var i in s)
{
    console.log(i);      //打印索引值
    console.log(s[i]);   //打印元素
}

View Code

7.3.2 while循环语句

语法结构如下：

while (条件)
{
　　语句1；
　　...
}

功能说明：运行功能和for类似，当条件成立循环执行语句花括号{}内的语句，否则跳出循环

i = 0;
while (i<5){
    console.log("hello" + i);
    i ++;
}

View Code

7.3.3 do/while循环语句

do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

语法结构如下：

do{
    语句
}
while (条件);

do{
    console.log(i);
    i++;
}
while (i<5);

View Code

7.4 Break/Continue

在switch()语句中我们有用到break语句，用于跳出循环。continue语句continue 用于跳过循环中的一个迭代，它会继续执行该循环之后的代码（如果有的话）

for (i=0;i<5;i++){
    if (i == 3){
        break;
    }
    console.log(i);    //结果：0，1，2
}

for (i=0;i<5;i++){
    if (i == 3){
        continue;
    }
    console.log(i);    //结果：0，1，2，4
}

八异常处理

try {
    //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
    // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
    //e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally {
     //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}

try {
    aler("error test!")
}catch (err){
    console.log(err)   //ReferenceError: aler is not defined
}

View Code

Throw 语句

throw 语句允许我们创建自定义错误。正确的技术术语是：创建或抛出异常（exception）。

如果把 throw 与 try 和 catch 一起使用，那么我们能够控制程序流，并生成自定义的错误消息。

语法结构如下：

throw exception   //异常可以是JavaScript字符串、数字、逻辑值或对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <p>请输入一个10到20的数字</p>
    <input type="text" class="c1">
    <button type="button" onclick="myfunc()">点击测试</button>
    <p id="msg"></p>

    <script>
        function myfunc() {
            var msg = document.getElementById("msg");
            msg.innerText = "";
            var a = document.getElementsByClassName("c1")[0].value;   //注意：通过getElementsByClassName获取到的为一个数组，需指定某一个索引值
            try{
                if(a == ""){
                    throw "值为空";
                }
                if(isNaN(a)){
                    throw "不是数字";
                }
                a = Number(a);
                if(a < 10){
                    throw "太小";
                }
                if(a > 20){
                    throw "太大";
                }
                if(a >= 10 && a <= 20){
                    throw "输入正确";
                }
            }catch(err){
                msg.innerText = err;
            }
        }
    </script>
</body>
</html>

View Code

posted @ 2018-09-10 21:23 Joe1991 阅读(97) 评论(0) 收藏举报

刷新页面返回顶部

Joe1991

前端之JavaScript基础

一 什么是JavaScript

二 JavaScript的引入方式

2.1 内部通过<script>标签引入

2.2 外部通过<script>标签引入

三 JavaScript语句

四 变量、常量和标示符

4.1 变量

4.2 常量和标示符

五 数据类型

5.1 数字类型(number)

5.2 字符串类型（string）

5.3 布尔型(boolean)

5.4 null &undefined

5.5 数据类型的转换

5.6 类型查询函数(typeof)

六 JavaScript运算符

6.1 算术运算符

6.2 逻辑运算符

6.3 比较运算符

6.4 赋值运算符

七 流程控制

7.1 顺序结构

7.2 分支结构（判断语句）

7.2.1 if...else语句

7.2.2 switch语句

7.3 循环结构（循环语句）

7.4 Break/Continue

八 异常处理

Throw 语句

公告

一什么是JavaScript

四变量、常量和标示符

五数据类型

七流程控制

八异常处理