前端三元素
- HTML：通过各种html元素搭建页面结构。
- CSS：负责页面样式：形状，大小，颜色，动画等。
- JavaScript：控制页面行为：部分动画效果、页面与用户的交互、页面功能。
JavaScript 简介
JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript主要有三大概念：
- ECMAScript标准:JS的基本的语法.
- DOM:文档对象建模，DOM提供一种操作HTML标签的API,每个页面视为一个文档，每个标签视为一个元素，标签下有标签，即元素下有元素，文档及文档中的所有的元素(标签)组成的一个树形结构图,叫树状图(DOM树)，由于万物皆为对象，隐藏文档即为对象，标签也为对象，JavaScript可以操作对象，进行页面的增删查改等。
- BOM:浏览器对象模型，提供了与浏览器窗口进行交互的API。
JavaScript 用法
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 和 <head> 部分中。
<script>
alert("我的第一个 JavaScript");
</script>
JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据：
- window.alert() 弹出警告框。
- document.write() 方法将内容写到 HTML 文档中。
- innerHTML 写入到 HTML 元素。
- console.log() 写入到浏览器的控制台。
JavaScript 字面量
在编程语言中，一般固定值称为字面量，如 3.14。
① 数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e)。
3.14
1001
123e5
② 字符串（String）字面量 可以使用单引号或双引号:
"John Doe"
'John Doe'
JavaScript 变量
在编程语言中，变量用于存储数据值。
JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值：
var age = 18; //这里表示声明了一个变量名为age并给它赋值为18
变量的命名规则和规范
- 规则 - 必须遵守的，不遵守会报错。
- 由字母、数字、下划线、$符号组成，不能以数字开头。
- 不能是关键字和保留字，例如：for、while。
- 规范 - 建议遵守的，不遵守不会报错。
- 变量名必须有意义，尽量做到"看其名知其意"。
- 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。例如：userName、userPassword。
JavaScript数据类型
| 数据类型 | 说明 |
|---|---|
| Boolean | true或false 2个值 |
| String | 字符串，必须用""或’'包起来 |
| Number | 包括整数和浮点数 |
| null | 空值 |
| Undefined | 未定义型 |
Number类型
数值字面量：数值的固定值的表示法
数值判断
NaN：not a number
NaN 与任何值都不相等，包括他本身
isNaN: is not a number
String类型
<script>
'abc' "abc"
//字符串字面量
'程序猿'，'程序媛', "程序猿NX"
</script>
转义符
| 代码 | 输出 |
|---|---|
| \’ | 单引号 |
| \" | 双引号 |
| \& | 和号 |
| \\ | 反斜杠 |
| \n | 换行符 |
| \t | 制表符 |
| \r | 回车符 |
| \b | 退格符 |
| \f | 换页符 |
字符串长度
length属性用来获取字符串的长度
<script>
var str = '程序猿 Hello World';
console.log(str.length);
</script>
字符串拼接
字符串拼接使用 + 连接
<script>
console.log(11 + 11); //22
console.log('hello' + ' world'); //helloworld
console.log('100' + '100'); //100100
console.log('11' + 11); //1111
console.log('male:' + true); //maletrue
</script>
1. 两边只要有一个是字符串，那+就是字符串拼接功能
2. 两边如果都是数字，那么就是算术功能。
Boolean类型
Boolean字面量： true和false，区分大小写
计算机内部存储：true为1，false为0
Undefined和Null
undefined表示一个声明了没有赋值的变量，变量只声明的时候值默认是undefined
null表示一个空，变量的值如果想为null，必须手动设置
获取变量的类型
typeof
<script>
var age = 18;
console.log(typeof age); // 'number'
</script>
数据类型转换
字符串的颜色是黑色的，数值类型是蓝色的，布尔类型也是蓝色的，undefined和null是灰色的
转换成字符串类型
toString()
<script>
var num = 5;
console.log(num.toString());
</script>
String()
String()函数存在的意义：有些值没有toString()，这个时候可以使用String()。比如：undefined和null
拼接字符串方式
num + “”，当 + 两边一个操作符是字符串类型，一个操作符是其它类型的时候，会先把其它类型转换成字符串再进行字符串拼接，返回字符串
转换成数值类型
Number()
Number()可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回NaN
parseInt()
<script>
var num1 = parseInt("12.3abc"); // 返回12，如果第一个字符是数字会解析知道遇到非数字结束
var num2 = parseInt("abc123"); // 返回NaN，如果第一个字符不是数字或者符号就返回NaN
</script>
parseFloat()
parseFloat()把字符串转换成浮点数。
parseFloat()和parseInt非常相似，不同之处在与parseFloat会解析第一个，遇到第二个或者非数字结束
+，-0等运算
<script>
var str = '500';
console.log(+str); // 取正
console.log(-str); // 取负
console.log(str - 0)
</script>
转换成布尔类型
Boolean()
0 ‘’(空字符串) null undefined NaN 会转换成false 其它都会转换成true。
运算符
| 运算符类型 | 内容 |
|---|---|
| 算数运算符 | +（加）、-（减）、*（乘)、/（除）、%（取余）、++（累加）、–（累减） |
| 赋值运算符 | =（赋值）、+=（加赋值）、-=（减赋值）、*=（乘赋值）、/=（除赋值）、%=（取余赋值） |
| 关系运算符 | >（大于）、<（小于）、= =（等于）、!=（不等于）、>=（大于等于）、<=（小于等于）、!= =（严格不等于，比较类型和值）、===（严格等于，比较类型和值） |
| 字符串运算符 | + |
| 逻辑运算符 | &&（与）、ll（或）、!（非） |
| 条件运算符 | ? : |
| 逗号运算符 | , |
| typeof运算符 | Typeof 判断某个变量的数据类型 |
| instanceof运算符 | 判断某个变量是否是指定类的实例 |
表达式和语句
表达式
一个表达式可以产生一个值，有可能是运算、函数调用、有可能是字面量。
表达式可以放在任何需要值的地方。
语句
语句可以理解为一个行为，循环语句和判断语句就是典型的语句。
一个程序有很多个语句组成，一般情况下;分割一个一个的语句。
流程控制
程序的三种基本结构
顺序结构
从上到下执行的代码就是顺序结构
程序默认就是由上到下顺序执行的
分支结构
根据不同的情况，执行对应代码
循环结构
循环结构：重复做一件事情
分支结构
if语句 语法结构
<script>
if (/* 条件表达式 */) {
// 执行语句
}
if (/* 条件表达式 */){
// 成立执行语句
} else {
// 否则执行语句
}
if (/* 条件1 */){
// 成立执行语句
} else if (/* 条件2 */){
// 成立执行语句
} else if (/* 条件3 */){
// 成立执行语句
} else {
// 最后默认执行语句
}
</script>
三元运算符
<script>
表达式1 ? 表达式2 : 表达式3
是对if……else语句的一种简化写法
</script>
switch语句 语法格式:
<script>
switch (expression) {
case 常量1:
语句;
break;
case 常量2:
语句;
break;
case 常量3:
语句;
break;
…
case 常量n:
语句;
break;
default:
语句;
(break;)
}
</script>
循环结构
在javascript中，循环语句有三种，while、do…while、for循环。
while语句 基本语法：
<script>
// 当循环条件为true时，执行循环体，
// 当循环条件为false时，结束循环。
while (循环条件) {
//循环体
}
</script>
<script>
// 计算1-100之间所有数的和
// 初始化变量
var i = 1;
var sum = 0;
while (i <= 100) { // 判断条件
// 循环体
sum += i;
// 自增
i++;
}
console.log(sum);
</script>
do…while语句
do…while循环和while循环非常像，二者经常可以相互替代，但是do…while
的特点是不管条件成不成立，都会执行一次。
基础语法：
<script>
do {
// 循环体;
} while (循环条件);
</script>
代码示例：
<script>
// 初始化变量
var i = 1;
var sum = 0;
do {
sum += i;//循环体
i++;//自增
} while (i <= 100);//循环条件
</script>
for语句
while和do…while一般用来解决无法确认次数的循环。
for循环一般在循环次数确定的时候比较方便
for循环语法：
<script>
// for循环的表达式之间用的是;号分隔的，千万不要写成,
for (初始化表达式1; 判断表达式2; 自增表达式3) {
// 循环体4
}
</script>
执行顺序：1243 ---- 243 -----243(直到循环条件变成false)
- 初始化表达式
- 判断表达式
- 自增表达式
- 循环体
continue和break
break:立即跳出整个循环，即循环结束，开始执行循环后面的内容（直接跳到大括号）
continue:立即跳出当前循环，继续下一次循环（跳到i++的地方）
let关键字
在ES6中，可以通过let关键字声明一个块级作用域（可以理解为{}之间的代码）的本地变量。
它与var关键字的区别是，let关键字在块级作用域内不能重复定义同名的变量，且该变量仅在块级作用范围内有效。
数组
数组的概念
所谓数组，就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合中，那么这个集合我们就称之为数组。
数组的定义
数组是一个有序的列表，可以在数组中存放任意的数据，并且数组的长度可以动态的调整。
通过数组字面量创建数组
<script>
// 创建一个空数组
var arr1 = [];
// 创建一个包含3个数值的数组，多个数组项以逗号隔开
var arr2 = [1, 3, 4];
// 创建一个包含2个字符串的数组
var arr3 = ['a', 'c'];
// 可以通过数组的length属性获取数组的长度
console.log(arr3.length);
// 可以设置length属性改变数组中元素的个数
arr3.length = 0;
</script>
获取数组元素
数组的取值
<script>
// 格式：数组名[下标] 下标又称索引
// 功能：获取数组对应下标的那个值，如果下标不存在，则返回undefined。
var arr = ['red',, 'green', 'blue'];
arr[0]; // red
arr[2]; // blue
arr[3]; // 这个数组的最大下标为2,因此返回undefined
</script>
遍历数组
遍历：遍及所有，对数组的每一个元素都访问一次就叫遍历。
数组遍历的基本语法：
<script>
for(var i = 0; i < arr.length; i++) {
// 数组遍历的固定结构
}
</script>
数组中新增元素
数组的赋值
<script>
// 格式：数组名[下标/索引] = 值;
// 如果下标有对应的值，会把原来的值覆盖，如果下标不存在，会给数组新增一个元素。
var arr = ["red", "green", "blue"];
// 把red替换成了yellow
arr[0] = "yellow";
// 给数组新增加了一个pink的值
arr[3] = "pink";
</script>
常见数组方法
| 方法 | 描述 |
|---|---|
| concat() | 连接两个或更多的数组，并返回结果。 |
| copyWithin() | 从数组的指定位置拷贝元素到数组的另一个指定位置中。 |
| entries() | 返回数组的可迭代对象。 |
| every() | 检测数值元素的每个元素是否都符合条件。 |
| fill() | 使用一个固定值来填充数组。 |
| filter() | 检测数值元素，并返回符合条件所有元素的数组。 |
| find() | 返回符合传入测试（函数）条件的数组元素。 |
| findIndex() | 返回符合传入测试（函数）条件的数组元素索引。 |
| forEach() | 数组每个元素都执行一次回调函数。 |
| from() | 通过给定的对象中创建一个数组。 |
| includes() | 判断一个数组是否包含一个指定的值。 |
| indexOf() | 搜索数组中的元素，并返回它所在的位置。 |
| isArray() | 判断对象是否为数组。 |
| join() | 把数组的所有元素放入一个字符串。 |
| keys() | 返回数组的可迭代对象，包含原始数组的键(key)。 |
| lastIndexOf() | 搜索数组中的元素，并返回它最后出现的位置。 |
| map() | 通过指定函数处理数组的每个元素，并返回处理后的数组。 |
| pop() | 删除数组的最后一个元素并返回删除的元素。 |
| push() | 向数组的末尾添加一个或更多元素，并返回新的长度。 |
| reduce() | 将数组元素计算为一个值（从左到右）。 |
| reduceRight() | 将数组元素计算为一个值（从右到左）。 |
| reverse() | 反转数组的元素顺序。 |
| shift() | 删除并返回数组的第一个元素。 |
| slice() | 选取数组的一部分，并返回一个新数组。 |
| some() | 检测数组元素中是否有元素符合指定条件。 |
| sort() | 对数组的元素进行排序。 |
| splice() | 从数组中添加或删除元素。 |
| toString() | 把数组转换为字符串，并返回结果。 |
| unshift() | 向数组的开头添加一个或更多元素，并返回新的长度。 |
| valueOf() | 返回数组对象的原始值。 |
6024
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
