JS的引入及调试,常量,字面量,变量,JS中的数据类型,JS的运算符,JS的运算符之隐式类型转换,强制类型转换,Math的相关方法,parseInt()和parseFloat()
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
前言--
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></script>标签里
例如：
<script>alert("我在script标签中哦")</script>
第二种可以在script标签中加上src的属性，里面填上外部的js文件，在外部js文件中书写js代码
<script src="js/index.js"></script>
注意：这个时候，script双标签里面的代码是不会生效的。
然后我们看看script标签应该写在什么地方
1.3.1、在页头（也就是head中）
1.3.2、在页尾
（body最后或者body闭合标签之外（html闭合标签之内））
tip:或者放在</body>和</html之间>
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()相同
网友评论