day045JavaScript的介绍、数据类型

本节内容：

1、JavaScript概述
2、JavaScript引入方式
3、JavaScript语言基础
4、JavaScript的数据类型

一、JavaScript概述

1、JavaScript的由来

js的作者只用10天就开发这个语言，写的并不是很完善，而且基本不报错。

JavaScript 是脚本语言。
JavaScript 是一种轻量级的编程语言。

后来出现了node.js，可以作为后端语言来开发项目，js是一个既能做前端又能做后端的语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易学习。

2、由JavaScript到ECMAscript，什么是ECMAscript

1996年11月，JavaScript的创造者--Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这门语言能够成为国际标准。

次年，ECMA发布262号标准文件（ECMA-262）的第一版，
规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。

该标准一开始就是针对JavaScript语言制定的，但是没有称其为JavaScript，

有两个方面的原因：

一是商标，JavaScript本身已被Netscape注册为商标。
二是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开发性和中立性。

因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。

3、一个完成的JavaScript的由3个不同部分组成

ECMAScript只是一个重要标准，描述了JavaScript语言本身的相关内容；
但它并不是JavaScript唯一的部分，也不是唯一被标准化的部分

由以下3部分组成，一个完整的JavaScript：
1、核心（ECMAScript）

2、文档对象模型（DOM）Document object model(整合js,css,html)

3、浏览器对象模型（BOM）Broswer object model(整合js和浏览器）

二、JavaScript的两种引入方式

1、在html的script标签内写代码

在head标签里面可以写，在body标签里面也可以写，
放到head标签里面和放到body标签里面到底有什么区别，（后面有详解）
放在head中的JS代码会在页面加载完成之前就读取，
而放在body中的JS代码，会在整个页面加载完成之后读取。

fe1:代码示例

<script>
  // 在这里写你的JS代码
　//console.log('骑士计划！') #f12建打开浏览器的调试窗口，然后在console这个调试台就能看到这个内容了
  //alert('骑士计划！')  #这个是浏览器窗口一打开咱们这个文件，就弹出一个窗口
</script>

HTML

Copy

2、引入额外的JS文件

写在在html的head里引入

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

HTML

Copy

三、JavaScript语言基础

1、注释和结束符

JavaScript中的语句要以分号（;）为结束符。也就是说和缩进没关系了

// 这是单行注释

/*
这是
多行注释
*/

JavaScript

Copy

2、变量声明（就通过浏览器自带的那个调试台来写吧）

1、JavaScript变量命名规则

1、变量名由下划线、数字、字母、$组成，不能以数字开头。
2、声明变量必须使用 var 变量名; 这样的格式来进行声明

var name = "Alex";
//也可以分两步，声明变量var name;然后name='Alex'，但是通常我们都是一步写完
var age = 18;

JavaScript

Copy

2、变量名的推荐写法

1、变量名是区分大小写的。
2、推荐使用驼峰式命名规则。首字母大写
3、保留字（就是内置使用的名字）不能用做变量名。

3、常量

ES6新增const用来声明常量。
一旦声明，其值就不能改变。
这个东西就是为了定义一个固定的常量，供大家使用，这个常量不会改变

const PI = 3.1415;
PI // 3.1415

PI = 3
// TypeError: "PI" is read-only

JavaScript

Copy

四、JavaScript的数据类型

JavaScript拥有动态类型（python也是动态的）

var x;
// 此时x是undefined
// 静态语言比如c：创建变量的时候，要指定变量的类型，
// python3.6也出现了类型注解的新特性def func(x:int,y:int) --> int: return x + y，
// 意思是参数是int类型，返回值也是int类型的，就是个注释的作用

var x = 1;  // 此时x是数字

var x = "Alex"  // 此时x是字符串

JavaScript

Copy

1、Number(数值类型)

JavaScript不区分整型和浮点型，就只有一种数字类型和NaN类型

1、数字类型

var a = 12.34;
var b = 20;
var c = 123e5;  // 12300000
var d = 123e-5;  // 0.00123

JavaScript

Copy

2、NaN类型（非数字值的特殊值）

相当于python可以int一个字符串。
NaN表示不是一个数字（Not a Number），也就是说是一个值，但不是数字。

fe1:常用的方法

parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456")  // 返回123.456

JavaScript

Copy

2、String(字符串)

跟python中的字符串类似

var a = "Hello"  // 创建字符串a
var b = "world;  // 创建字符串b
var c = a + b;   // 拼接字符串a、b,用变量c来接收
console.log(c);  // 类似于python中的print, 输出Helloworld

JavaScript

Copy

1、常用方法

2、ES6中引入了模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识，ESC键下面那个键就是反引号。
它可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
你使用chorme浏览器就行，chorme浏览器支持ES6

fe:模板字符串示例

// 普通字符串
`这是普通字符串！`
// 多行文本
`这是多行的
文本`
// 字符串中嵌入变量
var name = "q1mi", time = "today";
`Hello ${name}, how are you ${time}?`

// 按着shift+回车来进行换行，就能够不执行代码直接换行了~~~

// 注意：
//    如果模板字符串中需要使用反引号，则在其前面要用反斜杠转义。
//    JSHint启用ES6语法支持:/* jshint esversion: 6 */

JavaScript

Copy

2、Boolean(布尔值)

true和false都是小写，注意与python区分

var a = true;
var b = false;
// ""(空字符串)、0、null、undefined、NaN都是false。

JavaScript

Copy

3、null和undefined的区别

null表示值是空，它是有自己的数据类型的
underfined仅仅是声明一个变量但未初始化，该变量默认值、数据类型是underfined。

4、Object(对象)

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。

JavaScript 提供多个内建对象，比如 String、Date、Array 等等。

对象只是带有属性和方法的特殊数据类型。

1、数组

数组对象的作用是：使用单独的变量名来存储一系列的值。
类似于Python中的列表。

var a = [123, "ABC"];
console.log(a[1]);  // 输出"ABC"

JavaScript

Copy

2、数组的常用方法

3、关于sort()函数需要注意的问题

如果调用该方法时没有使用参数，是按照字符编码的顺序进行排序。

fe:使用函数获取我们想要的排序，示例

若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。

function sortNumber(a,b){
    return a - b
}
var arr1 = [11, 100, 22, 55, 33, 44]
arr1.sort(sortNumber)

JavaScript

Copy

4、关于遍历数组中的元素，可以使用下面的方式：

var a = [10, 20, 30, 40];
for (var i=0;i<a.length;i++) {
  console.log(a[i]);
}

JavaScript

Copy

5、splice()删除元素，并且可以插入新元素

语法：
splice(index,howmany,item1,.....,itemX)

参数解释：
index：必须，规定从何处（按索引号）删除/添加元素，必须是数字。
howmany：必须，规定删除多少个数字，必须是数字。
item1/x：可选，要添加到数组的新元素。

6、自定义对象

7、类型查询

对变量或值调用 typeof 运算符将返回下列值之一：

undefined - 如果变量是 Undefined 类型的
boolean - 如果变量是 Boolean 类型的
number - 如果变量是 Number 类型的
string - 如果变量是 String 类型的
object - 如果变量是一种引用类型或 Null 类型的

typeof "abc"  // "string"
typeof null  // "object"
typeof true  // "boolean"
typeof 123  typeof NAN // "number"
typeof undefined  //undefined

JavaScript

Copy

5、运算符

1、算数运算符

+ - * / % ++ --  i++,是i自加1，i--是i自减1

2、比较运算符

> >= < <= !=(弱不等于) ==(弱等于) ===(强等于) !==(强不等于)

fe:代码示例，以后尽量用强等于和强不等于

1 == “1”  // true  #弱等于，将1转换为字符串'1',在=号两个数据类型不同的时候，
// 会自动给你变成相同的，具体怎么一个变换规则，先不用理他，
// 因为这种比较不好，因为以后咱们就尽量用===。

1 === "1"  // false #强等于，比较类型也比较值

JavaScript

Copy

2、逻辑运算符(与、或、非)

&& || !  #and，or，非（取反）!null返回true

3、赋值运算符（同py）

= += -= *= /=  #n += 1其实就是n = n + 1

6、流程控制

1、if-else(单条件)

var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}

JavaScript

Copy

2、if-else if-else(多条件)

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

JavaScript

Copy

3、switch（切换）

switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。

var day = new Date().getDay(); //示例化一个今天的日期对象，getDay()是获取天数的编号，0表示星期日
switch (day) {  //这里day这个参数必须是一个值或者是一个能够得到一个值的算式才行，这个值和后面写的case后面的值逐个比较，满足其中一个就执行case对应的下面的语句，然后break，如果没有加break，还会继续往下判断
  case 0: //如果day是0
  console.log("Sunday"); //执行它
  break; //然后break跳出
  case 1:
  console.log("Monday");
  break;
default:  //如果没有任何满足条件的，就执行它
  console.log("...")
}

JavaScript

Copy

4、for(循环)

for (var i=0;i<10;i++) {  //就这么个写法，声明一个变量，变量小于10，变量每次循环自增1，
// for(;;){console.log(i)}；这种写法就是个死循环，会一直循环，直到你的浏览器崩了，就不工作了，回头可以拿别人的电脑试试~~
  console.log(i);
}

JavaScript

Copy

5、while(循环)

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

JavaScript

Copy

6、三元运算（也叫三目运算）

var a = 1;
var b = 2;
var c = a > b ? a : b //如果a>b这个条件成立，就把冒号前面的值给c，否则把冒号后面的值给c

 //python中的：a = x if x>y else y