Javascript入门（一）历史、特点、编写、数据类型及数据类型的转换

认识Javascript

JavaScript web 开发人员必须学习的 3 门语言中的一门：

• HTML 定义了网页的内容
• CSS 描述了网页的布局
• JavaScript 网页的行为
• JavaScript的作用是给浏览器指令（命令），负责和浏览器进行沟通的

Javascript的历史

在上个世纪的1995年，当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司。
由于网景公司希望能在静态HTML页面上添加一些动态效果，于是叫Brendan Eich这哥们在两周之内设计出了JavaScript语言。你没看错，这哥们只用了10天时间。

ECMAScript

ECMAScript是JavaScript的标准，描述了该语言的语法和基本对象。
JavaScript是ECMAScript的实现，除了基本实现之外，还包括DOM操作和BOM操作

Javascript的特点

高级语言按照其运行的方式, 又可以分为:

• 编译型语言：代码需要先编译，再运行

• 解释型语言：一行行读取，一行行执行
  代表性语言有哪些?

• 编译型语言: C/C++/Objective-C/Swift等等

• 解释型语言: Python/JavaScript/MATLAB等等
  解释性语言

• 读取一行 解释一行, 执行一行

• 另外一种, 编译性语言
  动态类型语言

• 在运行阶段可以动态修改变量的类型

• var name = “why”;

• name = 123;

JavaScript目前可以做哪些工作？

1. 网页的交互
2. 服务端开发(Node.js)
3. 命令行工具(Node.js)
4. 桌面程序，VSCode使用TypeScript开发的
5. App(React Native)
6. 游戏开发(cocos2d-js)
7. 小程序开发: HTML(WXML)+CSS(WXSS)+JavaScript

Javascript编写位置

位置一：HTML内编写(不推荐)

<a href="javascript:alert('百度一下')" onclick="alert('又百度一下')">百度一下</a>

位置二：script标签中不推荐

<a class="google" href="#">google一下</a>
     <script>
        document.querySelector(".google").onclick = function() {
            alert("google一下")
        }
    </script>

位置三: 外部引入js文件

注意点

1、script标签不能写成单标签：
在外联式引用js文件时，script标签中不可以写JavaScript代码，并且script标签不能写成单标签，即不能写成<script src="index.js"/>
2、省略type属性：
在以前的代码中，<script>标签中会使用type="text/javascript"。现在可不写这个代码了，因为JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
3、加载顺序：
作为HTML文档内容的一部分，JavaScript默认遵循HTML文档的加载顺序，即自上而下的加载顺序，推荐将JavaScript代码和编写位置放在body子元素的最后一行。
4、JavaScript代码严格区分大小写
HTML元素和CSS属性不区分大小写，但是在JavaScript中严格区分大小写。

Javascript注释使用

和浏览器如何交互

弹出弹窗显示内容

// 交互方式一：浏览器弹出弹框
        alert("弹一下");

在控制台打印（使用最多）

// 交互方式二：控制台打印
        console.log("hello world");

将内容输入到界面显示

// 交互方式三：DOM操作时（了解）
        document.write("<h1>hello world</h1>");

接收用户输入的内容

// 交互方式四：接受用户输入的一个内容
       var message = prompt("请输入您的年龄");
       alert(message);

如何定义变量

在JavaScript中如何命名一个变量呢？

变量的声明：在JavaScript中声明一个变量使用var关键字（后续学习ES6还有let、const声明方式）
变量的赋值：使用=给变量进行赋值；

变量的命名规则和规范

变量命名规则：必须遵守
第一个字符必须是一个字母、下划线（ _ ）或一个美元符号（ $ ）
其他字符可以是字母、下划线、美元符号或数字。
不能使用关键字和保留字命名

变量命名规范：建议遵守
多个单词使用驼峰标识
赋值=两边都加上一个空格
一条语句结束后加上分号;

基础数据类型

查看数据类型

//查看数据类型：typeof
        console.log(typeof "Hello World");//string
        console.log(typeof 123);//number
        var name = "job";
        console.log(typeof name);//string

基本数据类型

• Number
• String
• Boolean
• Undefined
• Null

number

数字表示的范围：

• 最小值：Number.MIN_VALUE，这个值为： 5e-324
• 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308

NaN，即非数值（Not a Number）是一个特殊的数值，JS中当对数值进行计算时没有结果返回，则返回NaN。
isNaN，用于判断是否不是一个数字。不是数字返回true，是数字返回false。
Infinity，Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity。

String

• 字符串的表示可以使用单引号也可以使用双引号。
• 转义字符：掌握 \’ ， \” ，\t ， \n四个的用法
• 获取字符串的长度：length属性

Boolean

布尔值和布尔代数的表示完全一致，一个布尔值只有true、false两种值。

比较运算符

JavaScript允许对任意数据类型做比较：

false == 0; // true
false === 0; // false

要特别注意相等运算符==。JavaScript在设计时，有两种比较运算符：

第一种是==比较，它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果；
第二种是===比较，它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。
由于JavaScript这个设计缺陷，不要使用==比较，始终坚持使用===比较。
另一个例外是NaN这个特殊的Number与所有其他值都不相等，包括它自己：

NaN === NaN; // false

唯一能判断NaN的方法是通过**isNaN()**函数：

isNaN(NaN); // true

最后要注意浮点数的相等比较：

1 / 3 === (1 - 2 / 3); // false

这不是JavaScript的设计缺陷。浮点数在运算过程中会产生误差，因为计算机无法精确表示无限循环小数。要比较两个浮点数是否相等，只能计算它们之差的绝对值，看是否小于某个阈值：

Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true

null和undefined

null表示一个“空”的值，它和0以及空字符串’ ‘不同，0是一个数值，’ '表示长度为0的字符串，而null表示“空”。
在其他语言中，也有类似JavaScript的null的表示，例如Java也用null，Swift 用nil，Python用None表示。
但是，在JavaScript中，还有一个和null类似的undefined，它表示“未定义”。
JavaScript的设计者希望用null表示一个空的值，而undefined表示值未定义。事实证明，这并没有什么卵用，区分两者的意义不大。大多数情况下，我们都应该用null。undefined仅仅在判断函数参数是否传递的情况下有用。
Undefined 类型只有一个值：undefined
在使用 var 声明变量但未对其加以初始化时，这个变量的值就是 undefined
typeof对没有初始化和没有声明的变量都会返回undefined
Null类型也是只有一个值：null
通常当一个对象（Object类型）不再使用时，可以赋值为null

Null和Undefined的关系：
undefined值实际上是由null值衍生出来的，所以如果比较undefined和null是否相等，会返回true，但是转化成数字时，undefined为NaN，null为0。

变量存储的本质

编写的代码放在硬盘中，在运行的时候，加载到浏览器，本质就是加载到内存中。内存分为栈空间和堆空间。定义变量时，在栈空间中申请一块区域，然后打印kobe。基本数据类型保存在栈空间。但是在对象类型时，在堆空间分配空间，而栈空间中保存其在堆空间中的内存地址。

数据类型的转换

转换成数字类型一

在开发中，我们可能需要类型之间相互转换，比如将一个字符串”123”转成数字123
其他类型转成数值类型的时候，存在有两种可能的值：

• 转换成功，获取到对应的数字
• 转换失败，结果为NaN

将其他类型转成数字类型的方法：

• Number(any)函数：将任意类型转成数字

<script>
        //1.将message转换成数据类型
        //1.1。将字符串转换成数据类型
        var message1 = "123";
        console.log(typeof message1);
        var num1 = Number(message1);
        console.log(num1 , typeof num1);//123 number
        var message2 = "abc";
        console.log(typeof message2);
        var num2 = Number(message2);
        console.log(num2 , typeof num2);//NaN number
        //NaN:not a number
        //1.2.将Boolean转换成数据类型
        //true: 1
        //false: 0
        console.log(Number(true));
        console.log(Number(false));

        //1.3. undefined转成数据类型
        console.log(Number(undefined));//NaN
        //1.4. Null 转成数据类型
        console.log(Number(null));
    </script>

转换成数字类型二

parseInt(string, radix)函数：将字符串转换成整数类型，radix表示基数，这里可以理解成进制

• 如果第一个字符是数字或运算符号，那么就开始解析，直到遇到非数字字符，停止解析并得到解析结果；
• 如果第一个字符是非数字且非运算符号，则不解析并得到结果 NaN。

parseFloat(string)函数：将字符串转换成浮点类型(小数类型)
如果第一个字符是数字或运算符号，那么就开始解析，直到遇到非数字字符，停止解析并得到解析结果；
如果第一个字符是非数字且非运算符号，则不解析并得到结果 NaN。

<script>
        var str1 = "123";
        //Number(null);
        var num1 = parseInt(str1);
        console.log(num1 ,typeof num1);// 123 number

        var str2 = "123.45";
        var num2 = parseInt(str2);
        console.log(num2 ,typeof num2);// 123 number

        var str3 = "abc";
        var num3 = parseInt(str3);
        console.log(num3 ,typeof num3);//NaN number 

        var str4 = "abc123";
        var num4 = parseInt(str4);
        console.log(num4 ,typeof num4);//NaN number
         
        var str5 = "123abc";
        var num5 = parseInt(str5);
        console.log(num5 ,typeof num5);//123 number

        var str6 = "123.45";
        var num6 = parseFloat(str6);
        console.log(num6 ,typeof num6);//123.45 number
        
        //parseInt
        var str = "111";
        console.log(parseInt(str,2));  //7
        //表示二进制

    </script>
        

转换成字符串类型

方式一: 调用toString()方法

方式二: String(内容)

注意:
toString()方法只能将数值类型和布尔类型转换成字符串类型，不能将Undefined和Null类型转成字符串类型；
String()函数能将所有基本类型转成字符串类型；

方式三:字符串拼接

 <script>
        var num = 123;
        var obj = null;
        var message = undefined;
        var flag = true;

        //方式一: 调用toString()方法 变量.toString();

        console.log(num.toString());
        //console.log(obj.toString()); // null 不适用
        //console.log(message.toString()); //undefined 不适用
        console.log(flag.toString());

        //方式二: String(内容)
        console.log(String(num));
        console.log(String(obj));
        console.log(String(message));
        console.log(String(flag));

        //方式三:字符串拼接: 变量 + ""
        //隐式转换：其他的数据类型在和字符串进行+运算符进行拼接时，会自动转换成字符串
        console.log(num + "");
        console.log(obj + "");
        console.log(message + "");
        console.log(flag + "");


    </script>

转换成布尔类型

通常使用Boolean()函数将其他类型转成布尔类型:

• 转换成false的五种特殊值：""（空字符串）、0（包括 0、-0）、undefined、null、NaN；
• 如果某个值为 “”（空字符串）、0（包括 0、-0）、undefined、null、NaN时，那么这个值转换成布尔类型之后的值为false，否则，其值为 true。（记住五种特殊值）

<script>
        //转换成Boolean 为false的情况
        console.log(Boolean(""));
        console.log(Boolean(0));
        console.log(Boolean(null));
        console.log(Boolean(NaN));
        console.log(Boolean(undefined));

        //转换成Boolean 为true的情况
        console.log(Boolean("123"));
    </script>