前端小尨猫的学习记录
目录
1、初识JavaScript
JavaScript的历史：
在95年以前，就有很多上网的用户了，当时的带宽只有28.8kb/s，用户要进行表单的验证时，点击提交按钮，直接就将数据发送到服务器了，受限于带宽的关系，浏览器和服务器的通信很慢，大概一次通信需要30s的时间。
这样，问题就出现了，我们平常注册一个用户，需要填写很多信息，当我们将所有信息填写好，点击提交按钮后，等待30s以后，提示我们用户名被占用了，修改，提交，等待30s，提示用户名不符合规范，修改，提交，等待30s，密码不符合规范，修改，等待。。。这样的用户体验感很差，给网民造成很大的烦恼。随着上网的用户越来越多，问题越来越严重。
这时候，网景公司（Netscape ，这是一家浏览器公司）下定决心要解决这个问题，并将这个问题交给布兰登·艾奇（Brendan Eich，1964年～，当时在网景公司工作的一个程序员）来解决，他用了10个工作日的时间，设计了一个门语言，叫做LiveScript，专门用来解决客户端上的问题。网景公司和Sun公司合作，在发布的时候，改名为Javascript，目的是为了利用 Java 这个因特网时髦词汇。JavaScript 从此变成了因特网的必备组件。
因为 JavaScript 1.0 如此成功，微软推出了JScript脚本语言，后来陆续有好几家公司都创建了自己的客户端脚本语言。
此时，JavaScript 并没有一个标准来统一其语法或特性，随着互联网的发展，分久必合的趋势越来越有必要，最终，1997年，ECMA（欧洲计算机制造商协会）邀请了Netscape、Sun、微软、Borland等公司的一些程序员组成了TC39，定义了标准，名为ECMAScript。
ECMAScript是一个标准，而javascript是语言
JavaScript的概念：
概念：支持面向对象的跨平台脚本语言。
理解：
1、脚本语言：依赖别的语言才能运行
html必须在浏览器中才能运行，js嵌套在html中才能运行
2、跨平台：可以在不同的平台上运行
windows、linux、安卓。。。
3、支持面向对象
使用面向对象的思想编程
应用场景：
表单验证：规范用户输入数据，和后台数据进行交互
网页特效：给页面内容加行为，让页面动起来
游戏开发：飞机大战、打砖块
js和h5的关系：
h5，是html的下一个版本，很强大，就目前而言，我们知道的h5只是一些标签，并不能完美的展示出他的强大之处，加入js后，才能激活这些标签深层次的功能。
随着h5应用越来越多，js的使用方式和各种框架及插件也越来越多，甚至已经从前端语言可以实现后台服务器的功能。js的发展已经成为一种潮流。(JavaScript简称js)
js的组成：
ECMAScript：基础语法
BOM：浏览器对象模型，提供操作浏览器对象的方法
DOM：文档对象模型，核心内容，提供操作文档对象的方法
2、书写js代码
js代码创建有三种形式
1、行内式
<a href="javascript:alert('行内式js');"></a>2、内部
可以在当前HTML文件中任意位置创建
<script> alert('Hello World!'); </script>3、外部
引入外部js文件
<script src="main.js"></script>注意：
js文件建议放在body标签的下面，html，css，js的加载顺序问题
内部和外部js不能用同一个标签
js的注释
1、单行注释
// js的单行注释是双斜杠2、多行注释
/* js的多行注释： 开头是斜杠星号 结尾是星号斜杠 */
3、js的输出方式
1、alert()
以弹窗的形式，用于提醒和警告
alert(11)
2、document.write()
在浏览器显示区域显示文本，不仅能显示文本，还可以识别标签
document.write('<b>学习js</b>')
3、console.log()
在浏览器调试工具中输出
console.log(123)
4、confirm()
可判断弹窗
confirm(12345)
5、prompt()
可输入内容的交互弹窗
prompt('请输入密码')
4、js的变量
1、变量的概念：
可变的量，是内存中的一个空间，用来存放数据
变量示意：
2、变量的命名规则
以字母、下划线开头，后面跟数字、字母、下划线
不用中文 特殊符号 纯数字
html+css出现的属性、属性值、标签名不用
尽量语义化
关键字和保留字 不用
计算机已经用 或可能会用
区分大小写
3、声明变量
var 空格 变量名
// 声明变量 var x // 在内存中开辟了一个空间，给这个空间起名叫x，里面没有放内容 var a,b // 一次性声名多个变量 // 声明变量并赋值 var y = 10 // 在内存中开辟了一个空间，这个空间的名字叫y，把10存了进去 var a=1,b=2; // 一次性声明多个变量并赋值说明：
变量名区分大小写，也就是说小写a变量和大写A变量是两个不同的变量。
可以一次性声名多个变量，使用一个var关键字，变量名用逗号隔开。
变量声名省略掉var关键字也是可以的。叫做隐式声明，有var关键字的就叫做显式声明。
不能使用关键字作为变量名，关键字就是系统已经占用的名字。
5、js的数据类型
| 类型 | 示例 | 备注 |
|---|---|---|
| 数字型（number） | 1 -2 3.14 300 | 包括整数、小数、负数 |
| 字符串型（string） | "你好吗？" '今天嫁给我' | 用引号引起来的一串字符，单引号和双引号都行 |
| 布尔型（boolean） | true false | 代表事物的两面性，真和假 |
| 未定义型（undefined） | var a | 代表定义过未赋值的变量 |
| 对象（object） | null [1,2,3]数组 {name:张三}对象 | 代表一个集合 |
使用typeof(被检测的内容)可以得出一个内容的类型。
console.log(typeof(-123456)); // 数字型
console.log(typeof("明天会更好")); // 字符串型
console.log(typeof(true)); // 布尔型
console.log(typeof(x)); // 布尔型
console.log(typeof([1,2,3])); // 对象
console.log(typeof({name:"张三",age:12})); // 对象
console.log(typeof(null)); // 对象1、数字类型
var a = 010; // 8进制 var b = 0xA; // 16进制 var c = 0xb; // 小写字母和大写字母都可以 console.log(a); // 8 console.log(b); // 10 console.log(c); // 11NaN: not a number, 表示一个非数字 但是属于数字类型
NaN的注意事项：
NaN的类型是number类型的，表示一个非数字
NaN不等于任何值，包括NaN本身
通过isNaN()可以判断是否是一个数字，返回false的时候，表示是一个数字。
小数
科学计数法
//当一次数字很大的时候，可以用科学计数法来表示 var num = 5e+5; //5乘以10的5次方 var num = 3e-3;//3乘以10的-3次方浮点数精度丢失问题
//在进行浮点数运算的时候，可能会出现精度丢失的问题 0.1 + 0.2 = 0.30000000000000004; 0.2 + 0.2 = 0.4; //尽量少用浮点数进行运算，不要让浮点数进行比较。 解决办法 : 根据小数点后面的位数量 乘以对应的整数; 0.1 + 0.2 ==> (0.1*10+0.2*10) / 10 = 0.3 0.01 + 0.02 呢?数值范围
最小值：Number.MIN_VALUE，这个值为： 5e-324
最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
无穷大：Infinity 即：1/0
无穷小：-Infinity2、字符串类型
我们说，字符串其实就是很多字符的集合，用引号引起来，但是单引号和双引号也是字符，如果作为字符串的字符？
分析：
引号可以嵌套，但是不能嵌套自己，需要交叉嵌套（单引号嵌套双引号或者双引号嵌套单引号）。
使用转义符
console.log('大家好,我姓"熏",我叫孙悟空'); console.log('选择"好看"的外表，还\\是\'有趣\'的灵魂');一些带有特殊含义的字符需要进行转义，例：
符号 意义 \n 换行 \t 制表符 \b 空格 \ 斜杠 ' 单引号 " 双引号 3、布尔类型
布尔（逻辑）只能有两个值：true 或 false。常使用在条件测试中。
4、undefined未定义
undefined是全局对象的一个属性。也就是说，它是全局作用域的一个变量。undefined的最初值就是原始数据类型undefined5、对象类型
在浏览器的结果中使用object来代表对象类型。
在JavaScript中，几乎所有的对象都是
Object类型的实例，它们都会从Object.prototype继承属性和方法。Object构造函数为给定值创建一个对象包装器。Object构造函数，会根据给定的参数创建对象，具体有以下情况：
- 如果给定值是
null或undefined，将会创建并返回一个空对象- 如果传进去的是一个基本类型的值，则会构造其包装类型的对象
- 如果传进去的是引用类型的值，仍然会返回这个值，经他们复制的变量保有和源对象相同的引用地址
当以非构造函数形式被调用时，
Object的行为等同于new Object()。
6、数据类型转换
1、其他转数字
Number(转换的数据)
parseInt(转换的数据) 被转换的数据会向下取整
parseFloat(转换的数据) 会保留小数
Math.round(转换的数据) 将数据转换为数字类型，并四舍五入(只看小数点后一位)
注意：
- 数字字符串能够转换成对应的数据，其他字符串会转为NaN
- 布尔类型转数字时：Number() 和Math.round() 可以转成0/1；parseInt 和parseFloat 会转成NaN
- undefined转数字为NaN
- null 转数字时：Number() 和Math.round 转成0；parseInt 和parseFloat 会转成NaN
2、其他转字符串
String(转换的数据)
转换的数据.toString()
注意：
- 布尔类型转字符串就是true 和false
- undefined 转字符串时：String() 会转成字符串undefined；toString() 会报错
- null 转字符串时：String() 会转为字符串null；toString 会报错
3、其他转布尔
Boolean(转换的数据)
注意：
- 数字转布尔时：0转为false ，非0数字转为true
- 字符串转布尔：空字符串转为false，非空字符串转为true
- undefined转布尔为 false
- null转布尔为 false
转为布尔值时为false的情况： 0 '' NaN undefined null；其他都为true
7、运算符
1、数学运算符
+ - * / %
运算符 描述 例子 y 值 x 值 + 加法 x = y + 2 y = 5 x = 7 - 减法 x = y - 2 y = 5 x = 3 * 乘法 x = y * 2 y = 5 x = 10 / 除法 x = y / 2 y = 5 x = 2.5 % 余数 x = y % 2 y = 5 x = 1 数学运算只针对数字类型，非数字类型：
+ 字符串拼接
字符串 + 字符串 ——> 字符串
字符串 + 数字 ——> 字符串
undefined + null ——> NaN
2、赋值运算符
= += -= /= *= %=
运算符 例子 实例 x 值 = x = y x = y x = 5 += x += y x = x + y x = 15 -= x -= y x = x - y x = 5 *= x *= y x = x * y x = 50 /= x /= y x = x / y x = 2 %= x %= y x = x % y x = 0 3、比较运算符
运算符 描述 比较 结果 == 等于 x == 8 false x == 5 true === 值及类型均相等（恒等于） x === "5" false x === 5 true != 不等于 x != 8 true !== 值与类型均不等（不恒等于） x !== "5" true x !== 5 false > 大于 x > 8 false < 小于 x < 8 true >= 大于或等于 x >= 8 false <= 小于或等于 x <= 8 true 4、逻辑运算符
运算符 描述 例子 && 和 (x < 10 && y > 1) 为 true || 或 (x == 5 || y == 5) 为 false ! 非 !(x == y) 为 true 5、自增自减运算符(一元运算符)
运算符 描述 例子 y 值 x 值 ++ 自增 x = ++y y = 6 x = 6 x = y++ y = 6 x = 5 -- 自减 x = --y y = 4 x = 4 x = y-- y = 4 x = 5
扫一扫
2999
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
