JavaScript基础篇（1）

1 javascript的由来

1994年，网景公司（Netscape）发布了Navigator浏览器0.9版。这个版本的浏览器只能用来浏览，不具备与访问者互动的能力。……网景公司急需一种网页脚本语言，使得浏览器可以与网页互动。

网页脚本语言到底是什么语言？网景公司当时有两个选择：一个是采用现有的语言，比如Perl、Python、Tcl、Scheme等等，允许它们直接嵌入网页；另一个是发明一种全新的语言。

这两个选择各有利弊。第一个选择，有利于充分利用现有代码和程序员资源，推广起来比较容易；第二个选择，有利于开发出完全适用的语言，实现起来比较容易。

到底采用哪一个选择，网景公司内部争执不下，管理层一时难以下定决心。

就在这时，发生了另外一件大事：1995年Sun公司将Oak语言改名为Java，正式向市场推出。

Sun公司大肆宣传，许诺这种语言可以”一次编写，到处运行”（Write Once, Run Anywhere），它看上去很可能成为未来的主宰。

网景公司动了心，决定与Sun公司结成联盟。它不仅允许Java程序以applet（小程序）的形式，直接在浏览器中运行；甚至还考虑直接将Java作为脚本语言嵌入网页，只是因为这样会使HTML网页过于复杂，后来才不得不放弃。

发明者：

Brendan Eich。1995年4月，网景公司录用了他。

Brendan Eich的主要方向和兴趣是函数式编程，网景公司招聘他的目的，是研究将Scheme语言作为网页脚本语言的可能性。

仅仅一个月之后，1995年5月，网景公司做出决策，未来的网页脚本语言必须”看上去与Java足够相似”，但是比Java简单，使得非专业的网页作者也能很快上手。这个决策实际上将Perl、Python、Tcl、Scheme等非面向对象编程的语言都排除在外了。

Brendan Eich被指定为这种”简化版Java语言”的设计师。

但是，他对Java一点兴趣也没有。为了应付公司安排的任务，他只用10天时间就把Javascript设计出来了。

由于设计时间太短，语言的一些细节考虑得不够严谨，导致后来很长一段时间，Javascript写出来的程序混乱不堪。如果Brendan Eich预见到，未来这种语言会成为互联网第一大语言，全世界有几百万学习者，他会不会多花一点时间呢？

总的来说，他的设计思路是这样的：

（1）借鉴C语言的基本语法；
（2）借鉴Java语言的数据类型和内存管理；
（3）借鉴Scheme语言，将函数提升到"第一等公民"（first class）的地位；
（4）借鉴Self语言，使用基于原型（prototype）的继承机制。

所以，Javascript语言实际上是两种语言风格的混合产物—-（简化的）函数式编程+（简化的）面向对象编程。这是由Brendan Eich（函数式编程）与网景公司（面向对象编程）共同决定的。

总之，当时的形势就是，网景公司的整个管理层，都是Java语言的信徒，Sun公司完全介入网页脚本语言的决策。因此，Javascript后来就是网景和Sun两家公司一起携手推向市场的，这种语言被命名为”Java+script”并不是偶然的。

2 JavaScript 的组成部分

BOM：浏览器对象模型

DOM：文档对象模型

ECMAScript：核心，定义 js 的语法规则和书写规范

BOM 和 DOM：是WebAPI ，通过 ES 操作 BOM 和 DOM 完成交互功能

3 JavaScript 的书写位置

• 行内式：不推荐使用

a标签：

<a href="javascript: alert('HelloWorld!')">点我一下</a>

非a标签：

<div class="btn" onclick="alert('你好,世界!')">点我一下</div>

• 内嵌式：把代码书写在一个 script 标签对内

<script>
    alert("Hello World!");
</script>

• 外链式：推荐

<script src="./外部的js.js"></script>

注意：

引入时，使用的是 script 标签中的 src 属性

外部的 JavaScript 文件的扩展文件名是 .js

4 JavaScript 的注释

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

// 这是一个弹框
/* 
这是多行注释
这是多行注释
这是多行注释
这是多行注释
*/

5 变量

程序在运行过程中，可以改变的量叫变量（可以保存一个中间值）

5.1 变量的定义

使用关键字 var

语法：var 变量名 = 变量值

var num = 100;
var name = "张三";

注意： = 和数学上的等号不同，这里的 = 代表赋值，具有方向性，是把右边的值赋给左边的变量。因此，等号左边必须是变量。

5.2 变量的命名规范

• 变量只能由数字、字母、下划线和 $ 组成，不能以数字开头
• 变量名应该见名知义，例如：name、age、address…
• 变量名采取小驼峰命名规范，第一个单词全小写，后面每个单词的首字母大写。eg: firstName，currentDate…
• 不能使用关键字。
• 变量名严格区分大小写

6 输入与输出

// alert 弹框
var name = "张三";
alert(name);
// 输出到控制台
var age = 25;
console.log("age=", age);
console.error("1+2=3");
// 输出到页面
var line = "<h3>过了今天,就是明天!</h3>";
document.write(line);

7 数据类型

7.1基本数据类型

又称简单数据类型。在存储时变量中存储的是值本身，因此又叫做值类型。是存放在栈里面，里面直接开辟一个空间存放的是值。分别是 number,string,boolean,undefind,null, 还有ES6 中新增的 Symbol 和 ES10 中新增的 BigInt 类型

// 1. 数字类型 number,可以是正数，也可以是负数，还可以小数。十进制，八进制，十六进制，二进制
var age = 12;
var height = 1.73;
// 2. 字符串类型,使用双引号或单引号括起来
var name = "张三";
var gender = '男';
var address = "";
// 3. boolean 值:true,false
var isExist = true;
// 4. undefind,定义了但是没有赋值
var w;
// 5. null,返回的是一个空的对象 object
var h = null;

7.2 引用数据类型

又称复杂数据类型。首先在栈里面存放地址，用十六进制表示，然后在这个地址指向堆里面的数据。包括object对象，array数组，function函数，date日期，正则表达式，特殊的基本数据类型（string，boolean，number）以及math等。

栈：由操作系统自动释放函数的参数值、局部变量的值等，其操作方式类似于数据结构中的栈，简单数据类型是存储在栈里面的
堆(操作系统)：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。复杂数据类型存放到堆里面

8 数据类型检测

使用方法：typeof 检测的数据（具体的值或变量）。typeof 运算符不是变量。它属于运算符。运算符（比如 + - * /）没有数据类型。但是，typeof 始终会返回字符串（包含运算数的类型）。

	    var name = "100";
        var type =  typeof name;
        console.log("'100'的类型为:",type); // '100'的类型为: string

        var result = name - 0; // 隐式类型转换
        type =  typeof result;
        console.log("result的类型为:",type); // result的类型为: number

        var isExist = true;
        type =  typeof isExist;
        console.log("true的类型为:",type); // true的类型为: boolean

        var obj = undefined;
        type =  typeof obj;
        console.log("undefind的类型为:",type); // undefind的类型为: undefined

        var noResult = null;
        type =  typeof noResult;
        console.log("null的类型为:",type); // null的类型为: object

9 运算符

9.1 算术运算符

• +运算符：

		// 1、当+两边都是数字或boolean类型时，进行加法运算 
        var num1 = 1;
        var num2 = 2;
        var sum = num1 + num2;
        console.log('sum:', sum);

        var sum2 = true + false;
        console.log('sum2:',sum2);

        // 2、当+两边，有一边为字符串时，进行的是字符串的拼接
        var name = "张";
        var num3 = 3;
        var res = name + num3;
        console.log('res:',res);
        // 使用+进行数字向字符串的转换操作
        var str = 100 + ""; // "100"

• -运算符

		// 带有输入框的弹框
        var num4 = window.prompt("请输入第一个数字。。。");
        var num5 = window.prompt("请输入第二个数字。。。");

        console.log(num4 + "-" + num5 + "=" + (num4 - num5));

        // 使用- 可以进行字符串向数字的转换
        var num6 = "100" - 0;
        console.log(typeof num6);

• *乘法运算符
• / 除法运算符

        var num7 = num1 * num2;	// 2
        var num8 = 9 / 4;  // 2.25
        console.log(num7, num8);

• % 取模运算符

   		var num9 = 9 % 4;
        console.log("9%4=", num9); // 1

• ++自增运算符和 --自减运算符

        var num10 = 100;
        // num10++;// num10 = num10+1;
        var num11 = ++num10; 
        console.log(num11);	// 101
		var num14 = num10++; 
        console.log(num14);	// 101 先赋值再自增
        
        var num12 = 100;
        // num12--; // num12 = num12-1;
        var num13 = --num12; 
        console.log(num13); // 99
		var num13 = --num12; 
        console.log(num13);	// 98 先赋值再自减

9.2 赋值运算符

赋值运算符有：=，+=，-=，*=，/=，%=

var name = "张三";
var age = 18;
var a = 10;
a+=5; // a+=5 等价于 a=a+5;
// 赋值运算符与算术运算符联合起来，衍生出了其它的赋值语句,其它的类似：+=,-=,*=,/=,%=

9.3 比较运算符

• 大于 >

5 > 10; // true

• 小于 <

10 < 8; // false

• == 和 ===

var num1 = 10;
var num3 = "10";
// == 只判断值是否一样
console.log(num1 == num3); // true
// === 严格等于，先判断类型，再判断值 
console.log(num1 === num3); // false

• 不等于 !=，!===

var a = "10";
console.log(a != 10); // false
console.log(a !== 10); // true

• 大于等于 >=
• 小于等于 <=

var num1 = 10;
var num2 = 20;
console.log(num1 > num2); // false
console.log(num1 < num2); // true
console.log(num1 >= num2); // false
console.log(num1 <= num2); // true
console.log(num1 == num2); // false
console.log(num1 != num2); // true

9.4 逻辑运算符

逻辑运算符的结果是 Boolean 类型。

• && 与运算：表达式1 && 表达式2

结果：当两个表达式结果都为 true 的时候，最终的结果才是 true，只要有一个为 false，则结果就为false。

console.log(true && false); // false
var a = 10;
var b = 20;
var c = 30;
console.log(a < 10 && b < c); // false

• || 或运算：表达式1 || 表达式2

结果：当两个表达式结果都为 false 的时候，最终的结果才是 false。只要有一个为 true，结果就为 true。

console.log(true || false); // true
console.log(a < 10 || b < c); // true

• ! 非运算：！表达式

结果：表达式的值为 true则结果为false；表达式的值为false则结果为true

console.log(!false); // true
console(!(b < c));	// false
var num = 20;
console.log(!!num);	// true

10 程序的三种结构

10.1 顺序结构

按照缩写的顺序从上到下依次执行。

10.2 分支结构

分支结构又分为 if 和 switch结构，if分支又分为单分支，双分支，多分支。

1> 单分支： if 语句

语法： 
if(执行的条件){
    
          
    语句块。
 }
如果执行条件是真的，就执行语句块。否则就跳过

2>双分支结构：if …else … 语句

if(执行的条件){
    
    
语句块1
} else {
    
    
语句块2
}

if (num === "a") {
    
    
    // 语句块
    var n1 = 10;
    var n2 = 20;
    console.log("轮到我了");
    console.log(n1 + n2);
} else {
    
    
    console.log("运气真差^_^");
}

3>多分支结构：if…else if… else if…else

 if(执行的条件1){
    
    
 语句块1
 } else if(执行的条件2) {
    
    
 语句块2
 } else if(执行的条件3){
    
    
 语句块3
 }.........
 else {
    
    
 语句块n;
 }

var sc = score - 0;
// 判断分数的等级,  
// sc >= 90 && sc <= 100 相当于数学中的 90=<score<=100
if (sc >= 90 && sc <= 100) {
    
    
console.log("A");
} else if (sc >= 80) {
    
    
console.log("B");
} else if (sc >= 60) {
    
    
console.log("C");
} else {
    
    
console.log("D");
}

4> if分支语句的嵌套

var score = window.prompt("请先输入分数");
    if (score == null) {
    
    
        console.log("没有输入分数");
    } else {
    
    
        // 将分数转换成数字
        var sc = score - 0;
        // 判断分数的等级,
       if (sc >= 90 && sc <= 100) {
    
    
           console.log("A");
       } else if (sc >= 80) {
    
    
           console.log("B");
       } else if (sc >= 60) {
    
    
           console.log("C");
       } else {
    
    
           console.log("D");
    }
}

在分支语句中嵌套分支语句时，必须嵌套一个完整的分支语句。

5>多分支结构：switch语句

根据已知条件找到一个完全匹配的选项，执行对应的代码。

switch(已知条件){
    
    
  case  选项1：
	 ...... 
  case 选项2:
 	.......
}

注意点：

• 使用case 来定义 选项， 如果需要在case匹配成功，执行对应的代码后跳出switch语句，那么就需要在每个case中加上break关键字。
• 如果没有匹配任何选项，就会执行default中的语句。
• 如果不同的选项对应相同的内容，可以进行内容的合并

10.3 循环结构

在程序中，将代码重复的执行多次。

1> while循环

当怎么样的时候，干什么事情

// 语法
`循环变量的初始状态`;
while(`循环条件`){
    
    
  重复执行的语句;
   `更新循环变量 `
}

var num = 0; // 记录打印的条数
while(num<100){
    
    
  // 语句块;
  console.log("Hello World!");
  num++;
}

练习1：求 1+2+3+…+99的和

var sum = 0; // 用来保存和
var i = 1; // 用来记录数
while (i <= 99) {
    
     // 循环条件
	// 循环语句
	sum = sum + i;
	// 更新循环变量
	i++;
}
console.log("1+2+3+...+99="+ sum);

练习2：求10! = 10*9*8*7*…*1

var nums = 1;//保存积
var item = 10;
while (item >= 1) {
    
    
	nums *= item;
	item--;
}

2>do…while 循环

// 语法
do {
    
    
    
// 循环语句
    
} while(循环条件)

while和do-while的区别:

• while是先判断后执行，循环语句执行的次数 0或多次
• do-while是先指行后判断，循环语句执行的次数为最少有1次

3> for 循环

// 语法
for(初始化循环变量; 判断条件; 更新循环变量){
    
    
    循环语句；
}

var sum = 0;
for (var i = 1; i <= 100; i++) {
    
    
	// 循环语句 
    // 判断是否是偶数 i%2==0，如果是，进行相加
    if (i % 2 == 0) {
    
    
        sum += i;
     }
}

4>三种循环结构的区别：

	while	do-while	for
执行的次数	0或多次	1次或多次	0次或多次
应用的场景	次数不确定的情况	次数不确定的情况	多数应用在次数确定的情况
语法	while(条件判断){ 循环语句}	do {循环语句}while(条件判断);	for(循环变量的初始化;条件判断;更新循环变量){循环语句}