JavaScript 01 (JS引入/变量/数据类型/类型转换/Math方法)

JS的引入及调试,常量,字面量,变量,JS中的数据类型,JS的运算符,JS的运算符之隐式类型转换,强制类型转换,Math的相关方法,parseInt()和parseFloat()

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

欢迎大家去我的个人技术博客看看，点赞收藏注册的都是好人哦~

https://xiaowu.xyz

前言--

JavaScript诞生于1995年。起初它的主要目的是处理以前由服务器端负责的一些表单验证。在那个绝大多数用户都在使用调制解调器上网的时代，用户填写完一个表单点击提交，需要等待几十秒，完了服务器反馈给你说某个地方填错了......在当时如果能在客户端完成一些基本的验证绝对是令人兴奋的。当时走在技术革新最前沿的Netscape（网景）公司，决定着手开发一种客户端（浏览器）语言，用来处理这种装简单的验证。

**言简意赅的讲**：由于网速的原因，做一个简单的表单验证，需要很长时间，这时页面会出现空白现象。所以Netscape想开发一种语言，在浏览器端进行验证。（LiveScript）

当时就职于Netscape公司的布兰登·艾奇开始着手计划将1995年2月发布的LiveScript同时在浏览器和服务器中使用。为了赶在发布日期前完成LiveScript的开发，Netscape与Sun公司成立了一个开发联盟。而此时，Netscape为了搭上媒体热炒Java的顺风车，临时把LiveScript改名为JavaScript，所以从本质上来说JavaScript和Java没什么关系。（为了推广语言）

JavaScript 是运行在客户端(浏览器)的编程语言

JavaScript是一种运行在客户端 的脚本语言 (解释型语言)

JavaScript的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

目录：

一、JS的引入及调试

二、常量，字面量 ，变量

三、JS中的数据类型

四、JS的算数运算符

五、JS的运算符之隐式类型转换

六、强制类型转换

七、Math的相关方法 

八、parseInt()和parseFloat()

一、JS的引入及调试

首先，JavaScript，以下我们简称JS/js，我们需要知道三个问题（吾日三省吾身），js有什么用？js是由什么组成？js代码应该写在什么地方？

1.1、js的作用

JavaScript是一种专为与网页交互而设计的客户端脚本语言。

最初是为了实现表单验证

JavaScript能完成的功能多得去了？

用户交互（表单验证）

网页特效（漂浮的广告）

用户记住账户名密码

网页游戏(围住神经猫)

……

1.2、js的组成

1.3、js的书写位置

好了，我知道js是啥了，那么js的代码我们应该写在哪里？

首先，js代码有两种写法，

第一种可以直接把js代码写在标签里

例如：

第二种可以在script标签中加上src的属性，里面填上外部的js文件，在外部js文件中书写js代码

注意：这个时候，script双标签里面的代码是不会生效的。

然后我们看看script标签应该写在什么地方

1.3.1、在页头（也就是head中）

1.3.2、在页尾

（body最后或者body闭合标签之外（html闭合标签之内））

tip:或者放在和

1.3.3、元素事件中（写在标签属性中）

2、关于js的调试方法

js有一个问题，如果前面的代码出现问题，后面的代码都不会执行，我们就需要借助一些方法/函数，来测试代码段是否出现问题。

2.1、document.write("world world");

document.write()  在文档中输入一段内容  document.write()  在()写你想输出的内容

2.2、console.log("world world");

console.log("world world");  //   在控制台输出一段内容  

2.3、alert();

alert();   弹出框   alert("hello world"); //  弹出框输出一段内容

2.4、他们之间的区别和优缺点

1、document.write()  会在html的文档中输出内容，会影响到原本的html页面的结构，根据代码的位置不同，会在不同位置输出内容，不太可控。

而且由于闭合的文档流使用document.write()会覆盖文档流，所以，在事件和异步的操作中，document.write会重置掉全部页面中的文档流，并用write()中的内容来替换body中的内容。不推荐使用。

2、alert() 会在浏览器窗口中弹出一个弹出框，alert()会阻塞js，如果alert()放在html标签之前，alert()会导致后面的html页面阻塞加载，而且alert()数量过多也会造成一定的阅读困难。请少量使用。

3、console.log() 会在控制台输入内容 ，不会影响页面结构，不会阻塞页面，也不会造成任何困扰，强烈推荐使用。

二、常量/字面量 ，变量

1、常量/直接量( 字面量 literal)

所有直接量(字面量)，就是程序中直接显示出来的数据    

  100;    //数字    的字面量

  "我是文本"        //字符串  的字面量

   true  false      //布尔    的字面量   

2、变量

变量 (存储数据的容器)

2.1、变量的定义

变量定义：

var age; //var 是关键字，age是变量名

赋值：

      age = 20;

定义的同时赋值：

      var age=20；

可以一次定义多个变量：

      var name=“tianyufei", age=18，weight=108;

注意：变量在声明后但没有赋值的时候，系统都会给变量一个默认值，为undefined，类型为undefined。

2.2变量的命名规范

JS的标识符：

标识符是指JS中定义的符号，例如：变量名、函数名等。

标识符可以由任意的大小写字母、数字、下划线(_)和美元符($)组成，但是不能以数字开头，不能是js中的保留字和关键字。

标识符区分大小写，如：age和Age是不同的变量。但强烈不建议，用同一个单词的大小写区分两个变量

什么是JS的关键字和保留字？

关键字指JS语法中已经使用过了的单词，它们有自己本身的特殊含义。

保留字指的是JS保留下来不允许用户使用的单词，这些单词尽管JS目前没有使用，但是有可能会在之后的版本升级中用上，所以提前保留下来，而我们的代码也可能会运行很多年，如果使用了这些保留字，就有可能在某一次JS语法更新的时候出现bug。

三、JS中的数据类型

String：字符串；

Number：数字（整数，浮点数float）

Array：数组

Object：对象

布尔类型：Boolean  a==b

特殊类型 Null、Undefined、NaN(NaN其实是属于Number类型的一个特殊值)

      如果alert(abc)一个不存在的变量，会直接报错，而不是undefined，可见undefined和真正的未定义还是有些区别的。因为它是一种特殊类型。

null也是一种值，但逻辑含义是没有值，它是对象Object类型

获取变量类型的方法：

typeof 变量名;  返回的是一个对应数据类型的字符串("number","string")

例如： 

var a= 100;

console.log(typeof a);

JS的number类型的特殊值 NaN(非数字) Infinity (无限大/无穷大)

四、JS的算数运算符

算术运算符 (+,-,/,*,%);

整数的加，减，乘，除，和取余就不说了，这个小学的数学老师会教。

还有一个优先级的问题，小学老师应该也教了，先乘除取余，后加减。

注意：%取余后的余数一定小于除数。

    //小数计算 会失精度

    0.1 + 0.2   // 0.30000000000000004   小数计算 会失精度

    0.1 + 0.7   // 0.7999999999999999

// 解决办法 toFixed(n)

var result = (0.1 + 0.7).toFixed(4);

console.log(result);

//toFixed(n) 数字的一个方法 保留n位小数 得到一个数字的字符串

五、js算数运算符之隐式类型转换

在Js中，各个数据类型在遇到算数运算符后，都会进行隐式的类型转换，这种转换我们是看不到的， 我们只能看到转换后的结果。

字符串 遇到 "+" 会 拼接 形成新的字符串(无论字符串在前还是在后)

    // var a = "100"; // string 

    // var b = 3;

    // var c = a + b;  // "1003"  => 拼接之后会得到字符串

    // var c = b + a;  // "3100"

    // console.log(c);

    // console.log("100" + true); // 100true

    // console.log("100" + undefined); // 100undefined

    // console.log("100" + null); //100null

    // console.log("100" + NaN); //100NaN

字符串 遇到 "-,*,/,%" 会 隐式的转化为数字("100","123") 并进行相应的计算，如果不是“数字”字符串("a","abc","blog","123a")，就会转换为NaN

boolean 值 遇到 算术运算符（+,-,*,/,%） 也会 隐式的转化为 数字  true => 1 ; false =>0

null 遇到 算术运算符（+,-,*,/,%）  也会 隐式的转化为  0

undefined不会隐式的转化为数字，会转换为 NaN

    var a = "100";

    var b = 3;

    var c = a % b;

    // console.log(c);    //  1

    console.log("100" * true); // 100*1  =>100

    console.log("100" * undefined); // NaN    undefined不会隐式的转化为数字

    console.log("100" * null); // 100 * 0  => 0

    console.log("100" * NaN); //NaN

六、强制类型转换

String() 强制把其他类型转化为 string ( 函数执行之后得到 一个对应的字符串 )

Number() 强制把其他类型转化为 number 类型

//所有的非数字转化为数字 都是NaN(boolean,null,"", => 0);

Boolean() 强制把其他类型转化为 boolean 类型

(0,NaN,"",undefined,null) 转化为boolean值 为false，凡是有内容的转换为boolean都会是true

注意：空格字符串(" ")和空字符串("")不同，空格字符串转换为布尔类型为true；

    var a = 1; // true

    var a = 2;  // true

    var a = Infinity; // true

    // var a = 0;  //false

    // var a = NaN; //false

    var a = "100a"; //true

    var a = " ";  //true  空格字符串

    var a = "";  //false  空字符串

    var a = undefined; //false;

    var a = null; //false;

    var b = Boolean(a);

    console.log(b)

七、Math的相关方法 

Math.random() 随机一个0-1的随机数 [0,1) 注意 取不到 1

var num = Math.random();

Math.ceil(); 向上取整 只要包含小数就向上进1     (ceil单词的意思 天花板)

var a = Math.ceil(num);

Math.floor() 向下取整 只要包含小数舍去 (floor单词的意思 地板)

 var b = Math.floor(num);

Math.round() 四舍五入 >=0.5 进 1 , <0.5 就舍去

var b = Math.round(num);

Math.min(num1,num2,num3,num4); 最小值

var min = Math.min(9, 5, 4, 3, 1, 12, 21);

Math.max(num1,num2,num3,num4); 最大值

var max = Math.max(9, 5, 4, 3, 1, 12, 21);

Math.abs(); 取绝对值

var abs = Math.abs(-10);

Math.pow(m,n) m^n m的n次幂(次方)

var num = Math.pow(2, 10);

Math.PI 3.141592653589793

console.log(Math.PI);

以上的代码都不会显示结果，需要用console.log输出结果。

八、parseInt()和parseFloat()

parseInt() 把其他类型转化为整型(整数) 把数据中 第一个非数字 之前的数提取出来 转化为 整数

parseFloat() 把其他类型转化为浮点型(小数) 把数据中 第一个非数字 之前的数提取出来 转化为 number (保留小数)

"300px" * 1 => NaN

 "300px"  =>  300

parseInt() 

    var a = "300px"; //300

    var a = "3a00px"; //3

    var a = "b3a00px";//NaN

    var a = "300.5px"; // 300

     var b = parseInt(a);

    console.log(b);

parseFloat()

var a = "300.5px";  //300.5

var b = parseFloat(a);

console.log(b);

parseInt也可以用来取整，可以将一个number类型的数字进行取整，舍弃到后面的小数位，用法和Math.floor()相同