简介

image

JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script 是脚本的意思）
脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行
现在也可以基于 Node.js 技术进行服务器端编程

JavaScript的作用

表单动态校验（密码强度检测）（ JS 产生最初的目的）
网页特效
服务端开发(Node.js)
桌面程序(Electron)
App(Cordova)
控制硬件-物联网(Ruff)
游戏开发(cocos2d-js)

浏览器执行 JS 简介

image

浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行。

JS 的组成

image

ECMAScript

ECMAScript 是由ECMA 国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。

image

ECMAScript：规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

DOM——文档对象模型

文档对象模型（DocumentObject Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）

BOM——浏览器对象模型

浏览器对象模型(Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

JS 初体验

JS 有3种书写位置，分别为行内、内嵌和外部。
1、行内式

<input type="button" value="点我啊" onclick="alert('点我干哈')">

可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick
注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
可读性差，在html中编写JS大量代码时，不方便阅读；
引号易错，引号多层嵌套匹配时，非常容易弄混；
特殊情况下使用
2、内嵌式

  <script>
        // alert('欢迎来到王者峡谷')
        console.log('你在哪里')
    </script>

可以将多行JS代码写到 script 标签中
内嵌 JS 是学习时常用的方式

3.外部JS文件

<script src="../../js/my.js"></script>

利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用
引用外部 JS文件的 script 标签中间不可以写代码
适合于JS 代码量比较大的情况

JavaScript注释

单行注释

//
/* adada*/

JavaScript输入输出语句

image

变量的使用

变量的声明
变量的赋值

//  声明变量  
var age; //  声明一个 名称为age 的变量

var 是一个 JS关键字，用来声明变量( variable 变量的意思 )。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管
age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间
赋值

age = 10;
var age  = 18;  // 声明变量同时赋值为 18

同时声明多个变量

var name = 'zhansan', age=18, sex = 1;

变量命名规范

由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
严格区分大小写。var app; 和 var App; 是两个变量
不能以数字开头。 18age 是错误的
不能是关键字、保留字。例如：var、for、while
变量名必须有意义。 MMD BBD nl → age
守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName

数据类型的分类

JS 把数据类型分为两类：

简单数据类型（Number,String,Boolean,Undefined,Null）
复杂数据类型（object)

image

交换变量和判断数字

  <script>
        var name1 = '张三';
        var name2 = '李四';
        var temp;
        temp = name1;
        name1 = name2;
        name2 = temp;
        console.log(name1);
        console.log(name2)
        // 判断 一个变量 非数字 是数字false  不是true
        console.log(isNaN(12))
        console.log(isNaN('老师真帅'))
    </script>

字符串长度和字符串拼接、布尔型Boolean

 <script>
        var str = '李济帅吗';
        alert(str.length);
        var str2 = '真的吗';
        alert(str+str2);
        alert(true + 1);
        alert(false + 1);
    </script>

Undefined和 Null
一个声明后没有被赋值的变量会有一个默认值undefined ( 如果进行相连或者相加时，注意结果）
一个声明变量给 null 值，里面存的值为空（学习对象时，我们继续研究null)

var  varible;
console.log(varible)
console.log('nihao' +varible);
console.log(12 + varible);
console.log(true +varible);
var vari = null;
console.log(vari)
console.log('nihao' +vari);
console.log(12 + vari);
console.log(true +vari);

image

获取变量数据类型

typeof 可用来获取检测变量的数据类型

<script>
        var num = 10
        console.log(typeof num) // number
        var str = 'hehe'
        console.log(typeof str) // string
        var flag = true
        console.log(typeof flag) // boolean
        var vari = undefined
        console.log(typeof vari) // undefined
        var vari2 = null
        console.log(typeof vari2) // object

        var age = prompt('请输入您的年龄');
        console.log(age)
        console.log(typeof age)

    </script>

转化为字符型

 <script>
        var num = 1000
        // 1
        var str = num.toString()
        console.log(str)
        console.log(typeof str)
        // 2
        console.log(typeof String(num))
        // 3
        str =  num + ''
        console.log(typeof  str)
    </script>

转化为数字型

 <script>
        var num = '3.64';
        var res = parseInt(num) // 取整
       console.log(res)
       console.log(typeof res)
       console.log(parseInt('120px')) // 120
       console.log(parseInt('rem120px')) // nan
       console.log(parseFloat('2.23')) // nan
        var haha = Number('121')
       console.log(typeof  haha) 
    </script>

image

运算符（操作符）

算数运算符
递增和递减运算符
比较运算符
逻辑运算符
赋值运算符

算数运算符

image

递增和递减运算符

前置递增运算符
++num 前置递增，先自加，后返回值
后置递增运算符, 先返回原值，后自加

比较运算符

image

逻辑运算符
逻辑运算符概述
概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断

image

赋值运算符

image

运算符优先级

image

流程控制

if else语句（双分支语句）

// 条件成立  执行 if 里面代码，否则执行else 里面的代码
if (条件表达式) {
    // [如果] 条件成立执行的代码
} else {
    // [否则] 执行的代码
}

if else if 语句(多分支语句)

// 适合于检查多重条件。
if (条件表达式1) {
    语句1；
} else if (条件表达式2)  {
    语句2；
} else if (条件表达式3)  {
   语句3；
 ....
} else {
    // 上述条件都不成立执行此处代码
}

三元表达式

表达式1 ? 表达式2 : 表达式3;

如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值

 <script>
        var age = prompt("请输入你的年龄")
        if (age >= 18 && age <100){
            alert("可以和我去网吧里偷耳机了")
        } else if(age< 18 && age >0){
            alert("消停学习吧")
        } else {
           alert("输入有误")
        }
    </script>

switch分支流程控制

语法结构
switch 语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用 switch。

 <script>

        switch (3) {
            case 1:
                console.log('这是1');
                break;
            case 2:
                console.log('这是2');
                break;
            case 3:
                console.log('这是3');
                break;
            default:
                console.log('没有匹配结果');

        }
    </script>

循环

for循环

for(初始化变量; 条件表达式; 操作表达式 ){
    //循环体
}

双重 for 循环语法

for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
    for (内循环的初始; 内循环的条件; 内循环的操作表达式) {  
       需执行的代码;
   }
}

<script>
        var str = '';
        for (var i = 1; i <= 9; i++) { // 外层循环控制行数
            for (var j = 1; j <= i ; j++) {
                str += j + 'x' + i + '=' + j*i + '\t';
            }
            // 换行
            str += '\n';
        }
        console.log(str)

    </script>

while循环

while (条件表达式) {
    // 循环体代码 
}

do-while循环

do {
    // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);

  <script>
        // while循环案例
        // 1\. 打印人的一生，从1岁到100岁
        var i = 1;
        while (i <= 100) {
            console.log('这个人今年' + i + '岁了');
            i++;
        }

        // // 3\. 弹出一个提示框， 你爱我吗？  如果输入我爱你，就提示结束，否则，一直询问。
        // var message = prompt('你爱我吗?');
        // while (message !== '我爱你') {
        //     message = prompt('你爱我吗?');
        // }
        // alert('我也爱你啊！');
    </script>

continue、break

continue 跳出本次循环，执行下一次循环
break 跳出本层循环

数组

<script>
        //  new 数组
        var arr = new Array();
        //
        var arr1 = [];
        //
        var arr2 = [1, 22, 'haha', true];
        console.log(arr)
        console.log(arr1)
        console.log(arr2)
        console.log(arr2[2])

    </script>

image

数组的遍历

 <script>
        var arr = ['red', 'yellow', 'green']
        for (var i = 0; i < arr.length ; i++) {
            console.log(arr[i])
        }

    </script>

求数组中最大的值

<script>
        var arr = [21, 34, 343, 433, 434,7676];
        var max = arr[0]
        for (var i = 0; i < arr.length ; i++) {
            if(arr[i]> max){
                max = arr[i]
            }
        }
        console.log(max)
    </script>

javaScript_day01

javaScript_day01

简介

JavaScript的作用

浏览器执行 JS 简介

JS 的组成

ECMAScript

DOM——文档对象模型

BOM——浏览器对象模型

JS 初体验

3.外部JS文件

JavaScript注释

变量的使用

变量命名规范

数据类型的分类

交换变量和判断数字

获取变量数据类型

转化为字符型

转化为数字型

运算符（操作符）

算数运算符

递增和递减运算符

比较运算符

流程控制

switch分支流程控制

循环

while循环

do-while循环

continue、break

数组

数组的遍历

求数组中最大的值