前端三元素
- 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() | 返回数组对象的原始值。 |