JS学习指南(1)-原创手记-慕课网

JavaScript学习指南
本文可以比较快速地学一下Js 建议学完后系统地看一遍其他教程

JavaScript标准库 || W3c JavaScript参考手册 || ES6入门文档

JS是由ES(ECMAScript)、DOM(浏览器文档对象)、BOM(浏览器对象模型)组成。

其中Node.Js就只有ES，目前浏览器比较流行的版本就是ES6(ES2015)，老浏览器的版本基本上都是ES5。

零、环境搭建
Node.js下载 || Chrome(百度软件中心) || VSCode编辑器

Node.js可以在命令行、服务端运行Js。
Chrome则运行在浏览器。
VScode是比较轻的一个编辑器。

1.在node使用

创建文件 demo1.js
输入内容 (不怎么需要HTML基础)
命令行到该目录 (如果不会命令行可以去看cmd命令)
node demo 或 node ./demo.js

2.在浏览器使用

创建文件 demo.html demo.js
输入内容(这里可能需要HTML基础)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <-- 在script标签引入  src属性写地址-->
    <script src="./demo.js"></script>

    <-- 也可以在script标签写-->
    <script>
        //内容
    </script>
</body>
</html>

一、输出

console.log("Hello World!");    //输出在控制台
alert('Hello World!');    //输出弹窗
document.write("Hello World!");    //输出在网页

因为Node没有dom和bom所以alert和document不能在Node运行

console 在F12控制台可以查看
alert 在浏览器中会弹窗
输出的字符需要使用双引号、单引号还有反引号括起来
数值则不用

这里 字符串 和数值就属于 数据类型

二、变量

var box = 10;    //数值
let box = "String";    //字符串
const box = true;     //布尔值

数值就是数字，可以包含整数、小数、二进制、八进制等数值
字符串就是字符、文本，其中字符需要使用括号引起来
布尔值 的意思就是真(true)或假(false) 其中数值的0 和空 字符串 为false

这里的var let const可能有些看不懂，其实意思就是声明变量，在Js里面有一个东西叫做作用域。
var 是 函数级 作用域并且可以重复声明
let 是块级作用域不能重复声明
const 是块级作用域不能重复声明不能进行运算
这里有一点需要注意就是 let 和 const 不支持老浏览器，
但是可以使用babel转化成为ES5(因为这是ES6新版本)。

三、运算符

1+1    //2 数值相加 
1+"1"    //11 数值和字符串相加
1-1    //0 数值相减
1*1    //1 数值相乘
1/1    //1 数值相除
1%1    //数值取余

box = 1    //赋值
box += 10    //加并赋值(box = box-10)，还有-=、*=...

四、函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
函数也是变量的一种

function main(){     //声明函数
    //函数里面的内容
    console.log("调用函数");    
}

var main = function(){    //变量式声明函数
    //函数里面的内容
    console.log("调用函数");
}

var main = ()=>{    //箭头函数
    //函数内容
}

/*同时函数有传参数功能*/
function main(num1, num2){
       //打印传进来的两个参的和
    console.log(num1 + num2);
}
/*返回值*/
function sum(num1, num2){
    return num1+num2;
}
var a = 10;    //返回值a为10
var b = a;     //把a赋值给b
var c = sum(5,5); //把sum函数赋值给c c等于10

五、数组和对象
数组和变量也是变量的一种。
数组就是一些数据类型的集合。

//数组
var array = [123,"String",true];
console.log(array[0]);    //数组的调用 数组是从0开始数

//对象
var Obj = {
    name: 'Jack',
    age: '35',
    getName: function(){    //对象里的函数写法1
        //这里的this指向的就是Obj 即对象本身
        return this.name;
    },    
    getAge(){     //对象里的函数写法2 ES6写法
        return this.age;
    },
    setName(name){
        //设置名字
        this.name = name;
    }
};
console.log(Obj.name);    //Jack
console.log(Obj.age);    //35
console.log(Obj.getAge);    //35
Obj.setName('Tom');    //Obj的name变成了Tom
console.log(Obj.getName());    //Tom

在Js里面每一个变量都是对象

比如字符串:

console.log("Hello World".search("W"));    //6 W在字符串里是第6位

比如数组

[123, "String", true].map(function(item){
    console.log(item); 
    //123
    //String
    //true
});    //遍历数组
console.log([123, "String", true].length);    //3 数组长度

还有很多这样的对象没有一一列举

六、循环语句、条件语句

1.if语句
条件语句用于基于不同的条件来执行不同的动作。

/*
一个花括号就是一个块 {}
如果没有使用块 只能执行一行
*/

//能执行一块
if(true){  //条件 需要为true 例如非0 或者非空字符串
    //括号里的参数是true的情况下就执行
    console.log("这是true的");
}else{
    //括号里的参数是false的情况下就执行
    console.log("这是false的");
}
if(true) console.log("True");    //只能执行一行

2.switch语句
switch 语句用于基于不同的条件来执行不同的动作。

/*
switch(变量){
    case 变量的值:
        //内容
    break;    //中断
    default:    //如果没有值相同
}
*/
var a = 10;
switch(a){
    case 10:
        console.log("a的值是" + a);
    break;    //中断
    default:    //如果没有值相同
        console.log("a的值是" + a);
    break;
}

3.for语句
循环可以将代码块执行指定的次数。

//for语句 for(先执行的; 执行条件; 语句执行后执行的)
for(let i = 0; i < 10; i++){
      console.log("for语句");    //打印十次
}
console.log(i);    //报错 上面let 是在一个块级 出了{}以后就不能获取

for(i in [1,2,3]){        //遍历值赋给i 随后打印i
    console.log(i);    //1 2 3
}

4.while
只要指定条件为 true，循环就可以一直执行代码块。
这个方法要主要不要写成死循环

/*
while(true){    //条件
    //内容
}
do{
    //内容
}while(true)    //条件
*/

do...while是先运行一遍然后判断条件如果成立就再执行

var i = 0;
while(i < 5){
    console.log("while");    //循环5次
    i++;
}

do{
    console.log("do...while");
    i++;
}while(i < 5)    //条件