javaScript 基础语法详解 I

01.javaScript基础语法

Js的发展历史

NetScape网景

Js的概念

Js是基于面向对象的脚本语言，依赖于html才能运行。

Js的书写位置

Js在html中以标签（<script></script>）的形式出现，可以放在网页任何一个地方，建议放在body结束之后

Js的注释

// 单行注释

/*

多行注释

*/

Js的输出

1. 以弹窗形式输出

alert()

1. 以文本形式输出

document.write()

1. 控制台输出

console.log()

1. 带提示内容的弹窗

confirm()

1. 可输入的弹窗

prompt()

变量

变量的概念

变量存储数据的容器，存在内存中

变量名的规则：由字母、数字、下划线组成，但是不能用数字开头（$也可以开头）

定义变量

显示定义

var 变量名;

var 变量名 = 值;

var 变量1,变量2;

var 变量1=值1,变量2=值2;

隐式定义

变量名=值;

变量的数据类型

数字类型：number

包含整数、小数、正数、负数

强制转换为数字类型：Number()

强制转换成整数：parseInt()

强制转换成小数：parseFloat()

字符串类型：string

任意多个任意字符组合在一起使用引号引起来就是字符串，空格是字符，引号也是字符

强转转成字符串类型：String()

功能比较多的工具：数据.toString()

布尔类型：boolean

表示事物的两面性，只有两个值：true和false

True转成数字是1，false转成数字是0

未定义型：undefined

定义过变量，但没有赋值，就是未定义型

对象类型：object

运算

数学运算

符号： + - * / %(求余数/取模)

赋值运算

= 赋值符 在编程中，”=”不代表两边相等，意义在于将右边的值赋值给左边的变量

+= -= *= /= %=

var a = 1;

a += 2; // a = a + 2

关系运算/比较运算

符号： > < >= <= ==(等于) ===(全等于)

!=(不等于) !==(不全等于)

比较运算的结果是布尔值， == ===的区别

逻辑运算

&& 并且

|| 或者

！ 非

运算符	意义	比较运算1	比较运算2	整体结果
&&	并且	真	假	假
		假	真	假
		假	假	假
		真	真	真
||	或者	真	假	真
		假	真	真
		真	真	真
		假	假	假
！	非/取反	真		假
		假		真

自增自减运算

自增：++

自减：--

var a = 3;

var b = a-- - --a + --a;

// 3 - 1 + 0

console.log(b); // 2

自增自减自己增减的时候，符号放在前面和后面是没有区别的，但是当碰到赋值、运算、输出的时候，符号在前面就先进行自增自减运算，符号在后面就后进行自增自减运算。

02.javaScript分支语句结构

分支结构

做判断

单分支

If(条件){ // 比较运算，逻辑运算，布尔值，能转换成布尔值的

条件结果是true的时候执行的代码段/块

}

双分支

If(条件){

条件结果是true执行的代码段

}else{

条件结果是false的时候执行的代码段

}

多分支

If(条件){

}else if(条件){

}else if(条件){

}

...

}else{

上面的条件都为false

}

Switch多路判断

实现的效果和if多分支是一样的

Switch(变量){

Case 值:

执行的代码段

Break;

Case 值:

执行的代码段

Break;

Default:

执行的代码段

}

特点：

1. 只能判断是否相等，并且使用 === 来判断，不能判断范围/区间
2. Switch分支大于3个的时候效率比if高
3. 省略break的时候，穿透写法

03.javaScript循环结构

循环结构

执行重复代码

While循环

While(条件){

// 条件成立的时候执行代码段

}

例：

var i=1;

while(i<=10){

document.write(“我爱你”);

i++;

}

最开始是不知道循环多少次

For循环

For(初始值;条件;变换){

条件成立的时候执行的代码段

}

例：

For(var i=0;i<10;i++){

Document.write(“我爱你”);

}

For循环在使用的时候已经知道要循环多少次了

While循环能实现的效果，for循环也能实现，这两个可以换着用

Do while循环

do{

// 执行的代码段

}while(条件);

不管条件是否成立，先执行一次，然后再判断条件，就和while的执行流程一样了

循环中的关键字

Break continue

Break 结束整个循环的 - 电梯坏了，到4层就停了，后面的不执行了

Continue 跳过当前这一次循环，继续执行下一次的循环 -- 没有4层，其他的都能执行

循环的嵌套

先执行小循环 - 一个人跑了5圈

外面的循环 - 5个人在跑

        9*9乘法表

for(var i=1;i<=9;i++){

   for(var j=1;j<=9;j++){

        document.write(j+"*"+i+"="+i*j+"&nbsp;");

   }

    document.write("<br>");

}

        例：

for(var i=1;i<=9;i++){

    for(var j=1;j<=9;j++){

        document.write(j+"*"+i+"="+i*j+"&nbsp;");

        if(i==j){

            break; // 只能结束掉小循环，不能结束大循环

        }
    
    }

    document.write("<br>");

}

04.javaScript函数

函数

函数就是一个工具。

语法：

Function 函数名(){

代码段

}

函数写好以后，不会自动执行，需要调用才能执行

调用：

函数名()

带参数：

定义的时候

Function 函数名(参数列表){} // 形参

调用的时候，需要给形参赋值 - 实参

实参要和形参对应，数量和类型保持一致

函数返回值关键字

Return 关键字

有两个作用：

1. 将函数的结果返回
2. 结束函数的运行

变量的提升

Js引擎在执行代码之前，会预解析，预解析就是在代码中找var和function，找到后将变量的定义和函数的定义提升到代码的最前面

在script中可以提升，在函数内部也可以提升，提升到函数内部的最前面

函数名和变量名同名，提升的时候函数名会覆盖变量名

匿名函数不能提升

js代码的预解析，只能在当前这个script标签中

作用域

能起到作用的区域就叫做作用域。定义在不同区域的变量，他的作用域是不一样的。

不在任何一个函数中定义的变量叫全局变量。他的作用域是定义之后的所有文档区域。

变量在输出时，首先考虑当前作用域，当前作用域中就会输出当前作用域中的变量，如果当前作用域中没有，才会考虑外面的全局。

作用域链

函数是写在全局中，也就是说，局部作用域是被嵌套全局作用域中的。函数中也是可以定义函数的，也就是局部作用域中可以再有局部作用域，这样就形成了作用域的嵌套，我们将这个链式结构叫做作用域链。

作用域链有助于我们分析变量的使用以及赋值规则，规则如下：

1. 当使用变量(将变量当做值赋值，输出变量，使用变量计算)的时候，先在当前作用域中找是否定义过变量，如果定义过，就使用；如果没有定义过，就去上一级作用域中找是否定义过，定义过就使用，没有定义就继续去上级作用域中找，......直到找到全局，全局中如果定义过，使用的就是全局中的变量；**如果全局中没有定义过，报错：XXX is not defined**
2. 当给一个变量赋值的时候，先在当前作用域中找是否定义过这个变量，如果定义过，就给这个变量赋值；如果没有定义过，就去上级作用域中找是否定义过，找到就赋值，没找到就继续去上级作用域中找，......直到找到全局，全局中定义过，就给这个全局变量赋值，如果全局没有定义过，就在全局定义这个变量并赋值

练习：

function fn() {
    console.log(num)
    return
    var num = 100
}
fn()

var num = 10;
fn1();
function fn1() {
    console.log(num);
    var num = 20;
}

var a = 18;
fn2();
function fn2() {
    var b = 9;
    console.log(a);
    console.log(b);
}

fn3();
console.log(c);
console.log(b);
console.log(a);
function fn3() {
    var a = b = c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}

var a = 4;
console.log(a);
a = 6;
console.log(a);
function a() {
    console.log('哈');
}
a();
a = 10;
console.log(a);

function fn(a) {
    console.log('我是 fn 函数')
    a()
    function a() {
        console.log('我是函数 a')
    }
}
fn(10)

结论：

1. 全局中有预解析，局部中也有预解析，局部的预解析，只能在局部中进行，不会将变量提升到全局
2. 使用连等的方式定义变量并赋值，只有第一个有定义过程，其余的都是直接赋值
3. 函数定义好以后，函数名就跟变量名一样，可以使用函数名修改这个空间中的值
4. 局部的预解析会在形参赋值之后，预解析中的函数会覆盖掉形参赋的值

递归函数

        递归函数就是在函数中调用自己。

// 求10的阶和，即：10+9+8+...+1
function facSum(num){
    if(num == 1){
        return 1;
    }
    return num + facSum(num-1);
}
var res = facSum(10);
console.log(res); // 55

05.javaScript事件 - 鼠标、键盘、浏览器

js中的事件指的是用户在网页中的行为，例如：鼠标点击、鼠标移动、。。。。。。

事件通常由3个要素组成：

1. 事件源：触发事件的标签元素，例如，点击的是div、还是button 。。。
2. 事件类型：行为的类型，是单击还是双击，还是右击。。。
3. 事件处理程序：事件触发后要做的事情 - 函数

例：

<button id="btn">按钮</button>
<script type="text/javascript">
    btn.onclick = function(){
        alert("点击了按钮！");
    }
<script>

事件类型

| 事件        | 备注                             |
| ----------- | -------------------------------- |
| onclick     | 当鼠标左键单击                   |
| ondblclick  | 当鼠标左键双击                   |
| onmouseover | 当光标在指定的内容上面           |
| onmouseout  | 当光标离开指定的内容             |
| onkeydown   | 当键盘按下的那一刻               |
| onkeyup     | 当键盘抬起的那一刻               |
| onfocus     | 当输入框得到焦点                 |
| onblur      | 当输入框失去焦点                 |
| onchange    | 当指定的标签里面内容有变化的时候 |
| onsubmit    | 提交事件                         |
| onload      | 当整个网页加载完成后             |

事件的其他写法：

// 给事件赋值函数名称
btn.onclick = fn
function fn(){
    console.log('点击了按钮')
}
// 给事件赋值变量名 - 值是函数
var fn = function(){
    console.log('点击了按钮')
}

注意：如果给事件赋值函数名，千万不能加小括号调用

事件还可以写在行内，一般不用：

<!-- 直接在行内写js代码 -->
<button onclick="console.log('点击了按钮')">按钮</button>
<!-- 可以在行内调用函数 -->
<button onclick="fn()">按钮</button>
<script>
    function fn(){
        console.log('点击了按钮')
    }
</script>

注意：在行内的事件中调用函数一定要加小括号调用才行

js可以像css一样有3种写法：

- 行内写法：事件
- 内联写法：平常写的代码
- 外联写法：项目中要将js代码放在一个文件中，在html中引入js文件

 <script src="js文件路径"></script>