JavaScript第一章

JavaScript是由网景公司发明的一种脚本语言，最早期仅用于对网页中的表单进行验证或动态特效。 自从NodeJS出现后，JavaScript也能够作为后端服务器程序的开发语言。JavaScript的核心为ECMAScript，ECMAScript在市面上有不同的版本，称为ECMAScript5和ECMAScript6，简称es5和es6；es5对大多数浏览器的兼容器更好。es6具有更多的新的特性，es6的语言和大多数编程语言更相似，很多新的框架都已经实现了对es6的支持。 前端框架是基于JavaScript来实现的。目前比较主流的前端框架有Anglar JS，React，Vue JS。要掌握前端框架，就必须要学习es6. es6的代码比es5更简洁。

要学习前端框架，就应该先去了解下NodeJS，NodeJs是运行在服务端的JavaScript平台，NodeJs基于谷歌浏览器的V8引擎实现，基于JavaScript编写程序。因此为了掌握前端框架以及Nodejs，JavaScript是必不可少的知识点。

JavaScript是一种基于事件驱动的、面向对象的脚本语言。脚本语言不需要编译后再运行，浏览器负责解释并执行js代码。

JavaScript特点

脚本语言：解释性语言，边执行边解释 基于对象：基于对象而不是纯粹面向对象的语言 简单：采用的是弱类型的类型声明方式 跨平台：依赖浏览器而不是操作系统 嵌入式：开发中需要操作HTML和CSS样式，因此需要在HTML中引入

JavaScript的核心组成

JavaScript的核心： ECMAScript:是js最核心的概念，提供了语言级的相关特性。 DOM: 文档对象模型，一个网页（一个html）理解为一个对象，一个网页就是一个文档对象，文档对象中的每个子标签，同样也是一个对象。 BOM:浏览器对象模型，提供了对浏览器相关特性的访问。

在网页中引入JavaScript

JavaScript目前运行在浏览器，nodejs的出现，能够使js运行在服务端。在网页中使用JavaScript，需要在网页中编写js的标签，在标签内编写js代码。

<!--在网页中直接编写js代码-->
<script type="text/javaScript">
  //编写js代码
</script>
​
<!--导入外部的js代码-->
<script type="text/javaScript" src="js文件的路径"></script>

JavaScript核心语法

JavaScript名字和java看起来是非常相似的，其核心语法和java也是非常相似，在java中具有数据类型，变量，流程控制，类和对象，方法，属性等特性，在js中同样也包含。

注释

被注释起来的代码，不会被浏览器去解释执行，只是起到一个备注的作用。为代码提供注释是一个非常好的习惯。对方法或者代码做注释后，能够最快速的，根据注释就能够理解代码的意图以及作用。 js中的单行注释： // js中的多行注释： /* */

  //单行注释
  /*
    多行注释
  */

vscode插件

Chinese (Simplified) (简体中文)
Live Server          网页服务器
vscode-icons         图标
Material Icon Theme  图标主题库
HTML CSS Support     css提示
CSS Peek             追踪css样式的位置

变量

/*
在java中声明变量的语法
数据类型 变量名;
数据类型 变量名 = 值;
​
在javascript中声明变量
var 变量名;
var 变量名 = 值;
    
输出变量;
使用变量;
*/
var name = '张三';  //声明了一个字符串
var age = 18;   //声明了整数
var height = 1.88; //小数
var arr = [1,2,3,4,5]; //数组
var obj = {"name":name,"age":age,"height":height}; //一个对象
var fn = function(){}; //一个函数
​
let i = 0;   //es6中声明变量的语法
const PI = 3.14; //es6中声明常量的语法

js是一种弱类型的语言，数据类型在程序运行过程中，根据变量的值来确定。java是一种强类型的编程语言，在声明变量时，就明确限制了变量的类型。

​
var str = 'abc'; // str是字符串，js中没有字符，字符串通过一对单引号或一对双引号表示。
str = false;  //布尔
str = 123;   //number
//不建议在编程中更改变量的类型

同时声明多个变量

var x,y,z;//声明变量没有赋值；他们的默认值为undefined
var x=1,y=2,z;

在声明变量时，如果没有给变量赋值，则变量的默认类型为undefined(未被定义);

null和undefined的区别

变量声明但是没有赋值，则其默认值为undefined。 null用于表示暂时为空，在将来可以修改其值。

undefined与null的区别：

• null代表暂时没有赋值，undefined值未定义。

• null分配内存空间，undefined不分配内存空间。

• null可以参与运算，undefined无法参与运算。

typeof关键字

通过typeof关键字检查变量的类型，返回一个字符串

var a,b=10086,c='hello',d=false;
var e = null;
var f = [1,2,3,4];
var g = {};
var h = function(){};
console.log(typeof a); //number

let和var的区别

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

{
    var a = 1;
    let b = 2;
}
console.log('a = ',a)  //可以访问到代码块内var声明的变量
console.log('b = ', b) //b is not defined  b没有被定义
​
for(var i = 0;i < 10;i++){ //在java中，i被限定在了for循环之内
​
}
console.log('i = ',i) // 10

var声明的变量存在作用域提升的问题。

类型转换

将字符串转换为数字

let num1 = '20.5'
​
let intNum = parseInt(num1)  //将num1字符串转换为整数类型
console.log('intNum的类型：',typeof intNum,'  转换后的值：',intNum)
​
let floatNum = parseFloat(num1)
console.log('floatNum的类型：',typeof floatNum,'  转换后的值：',floatNum)

运算符

• 算术运算符

• 关系运算符

var a = 10; //number
var b = 10;
var express = a > b;
express = a < b;
express = a >= b;
express = a <= b;
​
//严格等于
var c = '10'; //string
console.log('typeof(a):',typeof(a));
console.log('typeof(c):',typeof(c));
​
console.log('a == c',a == c);//a和c类型不同，js执行引擎首先统一a和c的类型后比较
console.log('a === b',a === b); // true, 因为a和b的类型相同
console.log('a === c',a === c);//严格等于：先比较a和c的类型，再比较值   false，a和c的类型不同
​
console.log('a != c',a != c); // true
console.log('a !== c',a !== c); // true

• 逻辑运算符

var express = true && true;  //true
express = true && false;    //false
express = false && false; //false
​
express = true || true;  //true
express = false || true; //true
express = false || false; //false
​
express = !false; //true
express = !true; //false

js中的逻辑控制

• 条件分支

• switch

• 循环操作

• 迭代器

条件分支

if(表达式){
    //代码块
}
​
if(表达式){
    //代码块1
} else {
    //代码块2
}
​
//多重if
if(条件1){
​
} else if(条件2){
​
} else if(条件3){
​
} else {
​
}

switch

switch(值){
    case 常量1:
    break;
    case 常量2:
    break;
    default:
        //相当于else
}

循环操作

循环具有三要素：

1. 循环变量

2. 循环条件

3. 循环变量值改变

//while循环
while(条件){
    //循环操作
    //循环变量值改变
}
​
//for循环
for(循环变量;循环条件;循环变量值改变){
​
}

for-in

for-in类似于java中的foreach迭代器，能够遍历对象，数组。

var stu = {
            "name":'张三',
            "age":19,
            "gender":'男',
            "phone":'13612345678',
            "stuNo":1001
        };
//直接输出对象
console.log(stu);
console.log(stu.name); //访问对象的属性
console.log(stu.age);
console.log(stu["gender"]); //类似于数组的用法
​
for(var key in stu){ //利用for-in遍历对象的属性
    //console.log(key);
    var value = stu[key]; //根据属性获取属性值
    console.log(key + " : " + value);
}
​
var arr = [888,666,777,999,555];
for(var index in arr){
    //console.log(index);
    console.log(arr[index]);
}

字符串和数字相互转换

字符串常用方法API：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/

数字在js中，通过typeof()检测后范围的是number，在js中，对于数字存在一个包装类Number。Number中提供了很多属性和方法用于处理数字。

var maxInteger = Number.MAX_SAFE_INTEGER;
var minInteger = Number.MIN_SAFE_INTEGER;
var maxValue = Number.MAX_VALUE;
var minValue = Number.MIN_VALUE;

将字符串转换为整数

var integer = Number.parseInt('3.14');

Array对象

js数组参考API：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

js中的数组类似于jav中的数组+集合；

var arr = new Array(5);//声明长度为5的数组
var foods = new Array("牛肉干","豆腐干","果冻");
var balls = ['篮球','足球','乒乓球','排球'];
​

js中的数组提供了一系列的方法，用于操作数组中的元素

函数

JavaScript中的函数和java中的方法的作用是相同的。

function fn_test(参数列表){
    //代码块
    [return]
}
​
function fn_test1(){ //无参数的函数
    var a = Math.random() * 100
    return a;
}
​
var ran = fn_test1(); //执行函数，并得到结果
​
var show = function(){ //声明一个函数对象，赋值给了show,show此时充当的是一个变量
    
}
show(); //执行show变量对应的函数
​

接收用户输，弹窗，确定取消

window.alert(); //弹框，在不同的浏览器中，效果不同。alert函数会阻塞alert之后的代码的运行，直到用户点击了确定按钮后，alert之后的js代码才能够得到执行
​
window.prompt('title');//在页面中接收用户的输入，返回字符串