1）JavaScript基础入门

概述

• JS是一种有函数优先的轻量级，解释型或即时变异型的编程脚本语言
• 脚本语言的特征：可以嵌套在网页中，给网页添加一些动态的效果
• 1992年创建

用途

• 给网页添加动态效果
• 后期课程学习node平台，开发服务器。利用的就是js
• 后期课程学习React、Vue框架。他们的底层也是JS实现的

JS组成

问题：你知道前端分基层呢？

• HTML（结构层） --- 利用语义化标签搭建网页
• CSS（样式层） ---- 利用样式进行美化网页、进行网页布局
• JavaScript（行为层） ---- 可以给网页加动态效果

问题：JavaScript是哪部分组成的？

• ECMAScript ---欧洲计算机协会，大概每年六月中，定制语法规范
• DOM --- document object model 文档对象模型
• BOM ---browser object model 浏览器对象模型

书写规范

• 需要放在双闭合标签script内部
• 可以放在任何地方，但一般放程序最下方
• script标签内部，只能放JS语法，标签不能放
• script标签有一个type属性，属性值为text/javascript，代表书写JS语法

内置函数

• alert是JS内置的函数，主要作用是在浏览器上方弹出提示窗 如： alert("床前明月光"); ---括号内单双引号，分号结尾
• prompt可以在浏览器正上方弹出一个提示框，用法和上面的警告框几乎是一样

<script type="text/javascript">    

prompt("我是祖国的花朵");

</script>

控制台使用

• 在js当中，我们可以通过console对象的log方法在控制台中输出一些内容
• 语法格式：console.log();
• 可以进行一些数学的运算

字面量

在JS世界 当中，书写不能瞎写，这是由于JS中的数据是有数据类型划分，字面量说白了就是某个类型的固定的值，当你看到这个固定的数值的时候，我们就知道他是属于那种类型的数据。

JS数据类型有六种：五种基本数据类型、一个引用类型

• String ---字符串类型
• Number ---数字类型
• BOOlean ---布尔类型
• Undefined ---未定义类型
• Null ---空对象类型

引用类型

• Object ---引用类型（函数、数组、正则、DOM、BOM等等）

数据类型

无非就整数和浮点数

整数&浮点数

• 整数就是正数和负数
• 数字在控制台中答应的时候是蓝色的
• 浮点数 = 小数 可以0-1之间的浮点数可以省略0，比如console.log(.123），数值不用引号加引号就是字符串了
• console.log(0.1+0.2); 0.1+0.2是等于0.3吗？ 如下所示并不是，因为我们计算机底层运算是以二进制进行的，二进制无法整除，所以会保留小数点后17位
• IEEE754浮点数算数标准

科学计数法

• 科学计数法也是表示数字的一种形式，代表的是某个数字与10的N次幂的乘积
• 英文e是可以小写和大写都行

特殊值

Infinity

• JS当中，数字其实是有范围的。
• -2^53 ~ 2^53如果开发中书写数字超出 这个范围，可以用特殊值Infinity表示
• Infinity无穷大的意思，也有正负之分
• 控制台中打印的数字切记是蓝色，如果数值超出了JS数字范围，就是以Infinity表示

NaN

• 英文全程 Not A Number，它是Number（数字类型）中的一种特殊值
• 这个数字一般是属性计算不出结果的时候返回
• 比如在数学中，数字零不能作为分母的。如果出现这种现象，别的语言可能会崩掉
• 如果在JS中，如果出现不会崩掉，会返回一个NaN
• 如果分子和分母同时为0，则认为计算不出结果，只能返回一个数字特殊值NaN
• 如果分子不为0，分母是0，则认为分母是趋于0的数字，只能返回一个无穷大Infinity

字符串类型的字面量

• 字符串（string）数据外层加上双引号或单引号来标识 “我不是李白”
• 控制台答应的时候是黑色的，可以是汉字、英文、数字、特殊符号都可以是字符串
• 可以是空字符串“” ‘’

变量*

• varibale，是计算机语言中的一个术语，
• 变量可以理解为一个容易，可以装载任意的字面数量值，或者装载数学计算完的结果
• 声明、赋值、使用
• JS中的声明，需要关键字var进行声明

变量使用

• 如果一个变量仅声明但没有被赋值，改变量就是undefined
• 可以进行多次赋值，以最后一次赋值为准，后赋值会覆盖之前赋值
• 使用之前必须进行声明
• 变量名字不需要加双引号，加双引号边字符串了

命名标识符规范

变量、函数命名的实施，需要遵守一下规则

• 可以是数字、英文字母、下划线、美元符号 var @_@
• 不能以数字开头 var 2b
• 不能是关键字或保留字 var class

变量声明的提升

• 各大浏览器的产商都有属于自己的解析器，翻译代码的时候，将声明部分，提升到当前的作用域最上方，就是把声明最先执行。
• 解析器：将你的代码翻译给浏览器，让浏览器知道你写的是什么
• 作用域：书写代码的范围

<script type="text/javascript">
     console.log(a)
     var a; 
     a = 1;
     console.log(a)
</script>

<script type="text/javascript">
     console.log(a)
     var a = 1;
     console.log(a)
</script>

数据类型的判断

• typeof主要作用是检测任意类型的字面量或者变量存储的
• 注意null控制台打印出来的是object，但是他是基本数据类型中的NULL
• JS代码中，console.log(typeof 变量) 其中变量和typeof需要空格

<script type="text/javascript">
     var a = 1;
     console.log(typeof a) 
</script>

数据类型的转换

+号

• 数字类型的数据转字符串类型的数据。字符串类型转数字类型
• JS中通过连接字符+将数字类型的数据转换为字符串
• 切记：在JS中这个+比较特殊
• 如果语句当中没有出现字符串，这个+就是数字运算
• 如果语句中出现字符串，这个+就是连字符

parseInt和parseFolat

• 驼峰命名方式
• 通过这两个函数将字符串转换成为数字
• parseInt将字符串中的数字形式的字符转换为数字，精确到整数
• parseFloat将字符串中的数字形式的字符转换为数字，精确到浮点数

• 转换的实施，从左到右转换，如果遇见非数字形式的字符，后面的数据就不进行转换
• 如果第一个字符不是数字形式则返回的是NaN

• parseFloat用法基本一样，不同的是浮点数可以精确到小数点的

提示框的注意事项

prompt

• 提示框主要作用，在浏览器的正上方弹出一个提示框
• 有输入框，可以对输入框进行输入
• 我们可以接受用户传输的数据，通过定义变量来接收，注意：接受的是字符串

<script type="text/javascript">
     var a = prompt("兄弟你多大了？")
     console.log(typeof a)
     console.log(a) 
</script>

数学对象

• JS当中给我们提供了一个内置的数学对象（Math），这个对象拥有很多的属性和方法提供给我使用
• JS当中，我们经常将引用类型的数据称为对象
• 带 f 的称为方法
• 没有带 f 的为属性

• 属性

• 方法
• abs()绝对值
• pow(a，b) --- a^b
• random() 随机一个0-1的小数

数学运算符

• 数学运算符（数学操作符）
• + - * /
• 取余数 %

作业：

<script type="text/javascript">
     console.log((324*(23+214))/(568-129)- 11*(235-24)) 
</script>

<script type="text/javascript">
     var salary = prompt("请输入税前工资：")
     var salary = parseInt(salary);
     console.log("您的住房公积金是："+ salary*0.1*2) 
</script>

<script type="text/javascript">
     var result = Math.pow((23 + Math.pow(5, 7))/45, 2)
     alert (result); 
</script>

<script type="text/javascript">
     var radius = prompt("请输入圆锥底面半径：");
     var height = prompt("请输入圆锥高度：");
     prompt("圆锥的体积是：" + 1/3*(Math.PI*(Math.pow(radius, 2))*height)); 
</script>

<script type="text/javascript">
     var str = prompt("请输入数字：");
     console.log(str);
     var arr = str.split("");
     var count =  parseInt(arr[0]) + parseInt(arr[1]) + parseInt(arr[2]);
     alert("结果是：" + count); 
</script>