这是一篇全面介绍JavaScript的教程，从编程语言的基础概念开始，深入讲解计算机语言、编程语言和翻译器的区别。接着，它介绍了JavaScript的起源、作用及与HTML/CSS的关系，阐述了浏览器如何执行JavaScript。教程详细探讨了JavaScript的数据类型，包括Number、String、Boolean、Undefined和Null，以及数据类型的转换。此外，还涵盖了变量的声明、赋值、命名规范以及运算符的使用。流程控制部分涵盖if/else、switch、for、while和do...while循环，以及break和continue语句。数组的概念、创建和操作也被详细讲解，包括遍历、添加元素和一些实用案例。函数的声明、参数、返回值、作用域和预解析也得到阐述。最后，教程还涉及到了对象、内置对象如Math和Date的使用，以及DOM和BOM的基本操作，包括事件处理、节点操作和定时器等网页特效知识。
JavaScript
- 1、编程语言
- 2、计算机基础
- 3、初识JavaScript
- 4、变量
- 5、数据类型
- 6、运算符
- 7、流程控制
- 8、数组
- 9、函数
- 10、作用域
- 11、预解析
- 12、对象
- 13、内置对象
- 14、简单类型和复杂类型
- 15、Web APIs
-
- 15.1 Web APIS
- 15.2 DOM 基础
- 15.3 DOM 重点核心
- 15.4 DOM 高级
- 15.5 BOM
- 16、网页特效
1、编程语言
1.1 编程
1.2 计算机语言
1.3 编程语言
1.4 翻译器
1.5 编程语言和标记语言区别
1.6 总结
2、计算机基础
2.1 计算机组成
2.2 数据存储
2.3 数据存储单位
2.4 程序运行
3、初识JavaScript
3.1 JavaScript 历史
3.2 JavaScript 是什么
3.3 JavaScript 的作用
3.4 HTML/CSS/JS 的关系
3.5 浏览器执行JS简介
3.6 JS 的组成
3.6.1 ECMAScript
3.6.2 DOM ---- 文档对象模型
3.6.2 BOM ---- 浏览器对象模型
3.7 JS 初体验
3.7.1 行内式JS
3.7.2 内嵌式JS
3.7.3 外部JS文件
3.8 JS 注释
3.9 JS 输入输出语句
3.10 命名规范
3.10.1 标识符命名规范
3.10.2 操作符规范
3.10.3 单行注释规范
3.10.4 其他规范
4、变量
4.1 什么是变量
4.2 变量在内存中的存储
4.3 变量的使用
4.3.1 声明变量
- var a = b =c = 9 《----------》只有a用var声明了，b和c 没有被var声明
- var a = 9,b = 9,c = 9 《---------------》a、b、c均被var声明
4.3.2 赋值
4.3.3 变量的初始化
<script>
// 1、声明变量
var age;
// 2、赋值 把值存入这个变量
age = 18;
// 3、在控制台上输出结果
console.log(age);
// 变量初始化
var myName = "John";
console.log(myName);
// 用户输入姓名
var myName = prompt('请输入您的名字');
// 输出姓名
alert('myName');
</script>
4.3.4 变量的语法扩展
4.3.4.1 更新变量
4.3.4.2 声明多个变量
4.3.4.3 声明变量特殊情况
- 变量名：name；在js中有特殊含义的，只声明name未赋值，不会报错，所以尽量不要直接使用name作为变量名
4.4 变量命名规范
4.5 小结
5、数据类型
5.1 为什么需要数据类型
5.2 变量的数据类型
5.3 数据类型的分类
5.3.1 简单数据类型（基本数据类型）
5.3.1.1 数字型 Number
5.3.1.1.1 数字型进制
5.3.1.1.2 数字型范围
5.3.1.1.3 数字型三种特殊值
5.3.1.1.4 isNaN()
5.3.1.2 字符串型 String
5.3.1.2.1 字符串引号嵌套
5.3.1.2.2 字符串转义符
5.3.1.2.2 字符串长度
5.3.1.2.3 字符串拼接
5.3.1.2.4 字符串拼接加强
5.3.1.3 布尔型 Boolean
5.3.1.4 Undefined 和 Null
<script>
//undefined
var str;
console.log(str); //undefined
var variable = undefined;
console.log(variable + 'AA');//undefinedAA 任何类型+字符串类型=字符串类型
console.log(variable + 1);//NaN undefined不能确定是什么类型的，和数字相加，结果为NaN
//null 空值
var space = null;
console.log(space + 'AA'); //nullAA
console.log(space + 1); //1
</script>
5.3.2 复杂数据类型
5.3.3 获取变量数据类型
5.3.3.1 获取检测变量的数据类型
5.3.3.2 字面量
5.3.4 数据类型转换
5.3.4.1 什么是数据类型转换
5.3.4.2 转换为字符串类型
<script>
var num = 10;
var str = num.toString();
console.log(typeof str);
console.log(typeof String(num));
console.log(typeof(num + ''));
</script>
5.3.4.3 转换为数字类型
<script>
// 其他类型转换为数字型
// parseInt 把字符型转换为数字型 结果为整数
console.log(parseInt('3.14')); //3
console.log(parseInt('3.94')); //3
console.log(parseInt('120px')); //120
console.log(parseInt('rem120pxabc')); //NaN
// parseFloat 把字符型转换为数字型 结果为小数
console.log(parseFloat('3.14')); //3.14
console.log(parseFloat('120px')); //120
console.log(parseFloat('rem120px')); //NaN
// Number(变量)
var str = '123';
console.log(Number(str)); //123
// 利用算术运算 - * / 隐式转换为数字型
console.log('12' - 0); //12
console.log('120' - '118'); //2
console.log('12' / 1); //12
</script>
5.3.4.4 转换为布尔型
5.4 解释型语言和编译型语言
5.4.1 概述
5.4.2 执行过程
5.5 标识符、关键字、保留字
5.5.1 标识符
5.5.2 关键字
5.5.3 保留字
6、运算符
6.1 算术运算符
6.1.1 算术运算符概述
6.1.2 浮点数的精度问题
<script>
//浮点数在运算时会有问题
console.log(0.1 + 0.2); //0.30000000000000004
console.log(0.07 * 100); //7.000000000000001
// 不能直接拿浮点数进行比较
var num = 0.1 + 0.2;
console.log(num == 0.3); //false
</script>
6.1.3 表达式和返回值
6.2 递增和递减运算符
6.2.1 递增和递减运算符概述
6.2.1.1 前置递增（递减）运算符
6.2.1.2 后置递增（递减）运算符
<script>
// 递增运算符
var e = 10;
var f = e++ + ++e;
console.log(f); //22
</script>
6.2.2 前置递增（递减）和 后置递增（递减）小结
6.3 比较运算符
6.3.1 比较运算符概述
6.3.2 = 小结
<script>
// 比较运算符
// == 类型会隐式转换，只要求值相等即可
console.log(18 == '18'); //true
// === 全等 一模一样:要求数值和类型完全一致
console.log(18 === 18); //true
console.log(18 === '18'); //false
</script>
6.4 逻辑运算符
6.4.1 逻辑运算符概述
6.4.2 逻辑与 &&
6.4.3 逻辑或 ||
6.4.4 逻辑非 ！
6.4.5 短路运算（逻辑中断）
6.4.5.1 逻辑与
6.4.5.2 逻辑或
<script>
// 逻辑与短路运算
//表达式1为真，返回表达式2
console.log(123 && 456); //456
//表达式1为假，返回表达式1
console.log(0 && 456); //0
console.log(0 && 1 + 2 && 456 * 567); //0
// 逻辑或短路运算
// 表达式1为真，返回表达式1
console.log(123 || 345); //123
// 表达式1为假，返回表达式2
console.log(0 || 456 || 456 + 123); //456
// 逻辑中断很重要，直接影响着程序运行的结果
var num = 0;
console.log(123 || num++); //123
console.log(num); //0
</script>
6.5 赋值运算符
6.6 运算符优先级
7、流程控制
7.1 顺序结构
7.2 分支结构
7.2.1 if 语句（单分支语句）
7.2.1.1 语法结构
7.2.1.2 执行流程
7.2.2 if else 语句（双分支语句）
7.2.2.1 语法结构
7.2.2.2 执行流程
7.2.3 if else if 语句（多分支语句）
7.2.3.1 语法结构
7.2.3.2 执行流程
7.2.4 三元表达式
7.2.5 switch 语句
7.2.5.1 语法结构
7.2.5.2 switch语句和if else if 语句的区别
7.3 循环结构
- 在实际问题中，有许多具有规律性的重复操作，一次在程序中要完成这类操作就需要重复执行某些语句
7.3.1 for 循环
7.3.1.1 for 单循环
7.3.1.1.1 语法结构
7.3.1.1.2 断点调试
7.3.1.1.3 for 循环重复相同的代码
7.3.1.1.4 for 循环重复不相同的代码
7.3.1.1.5 for 循环重复某些相同的操作
7.3.1.2 双重 for 循环
7.3.1.3 for 循环小结
7.3.2 while 循环
7.3.3 do…while 循环
7.3.4 循环小结
7.3.5 continue break
7.3.5.1 continue
7.3.5.2 break
8、数组
8.1 数组的概念
8.2 创建数组
8.2.1 利用 new 创建数组
8.2.2 利用数组字面量创建数组
<script>
// 利用new创建数组
var arr = new Array(); //创建一个空的数组
// 利用字面量创建数组
var arr = []; // 创建一个空的数组
// 数组里面的数据一定逗号分隔，数组里面的数据，称为数组元素
var arr1 = [1, 2, 'AAA', true];
console.log(arr1);
</script>
8.3 获取数组元素
8.3.1 数组的索引
- 如果没有这个数组元素，输出的结果是 undefined
8.4 遍历数组
- 数组的长度：数组名.length
- 求数组 [2, 6, 1, 77, 52, 25, 7] 中的最大值
<script>
var arr = [2, 6, 1, 77, 52, 25, 7];
var max = arr[0];
for (var i = 1; i < arr.length; i++) {
if (arr[i] > max) {
max = arr[i];
}
}
console.log('该数组里面的最大值是：' + max);
</script>
- 数组 [‘red’, ‘green’, ‘blue’, ‘pink’] 转换为字符串
<script>
var arr = ['red', 'green', 'blue', 'pink'];
var str = '';
// 把变化的数值抽取成变量sep，这样 for 循环里的代码块就不需要改动了
var sep = '|';
for (var i = 0; i < arr.length; i++) {
str += arr[i] + sep;
}
console.log(str);
</script>
8.5 数组中新增元素
- 可以通过修改length长度以及索引号增加数组元素
8.5.1 通过修改 length 长度新增数组元素
8.5.2 通过修改数组索引新增数组元素
<script>
var arr = ['red', 'green', 'blue'];
console.log(arr.length);
// 修改数组的长度
arr.length = 5;
console.log(arr.length);
console.log(arr[3]); // undefined
console.log(arr[4]); // undefined
// 新增数组元素 修改索引号
var arr1 = ['red', 'green', 'blue'];
// 如果没有元素，就追加数组元素
arr1[3] = 'pink';
console.log(arr1);
arr1[4] = 'hotpink';
console.log(arr1);
// 有元素，就替换数组元素
arr1[0] = 'yellow';
console.log(arr1);
// 不要直接给数组名赋值 否则会覆盖掉之前的数据
arr1 = '有点意思';
console.log(arr1);
</script>
- 将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于10的元素选出来，放入新数组
//方法一：
<script>
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
// 声明新数组
var newArr = [];
var j = 0;
//遍历数组
for (var i = 0; i < arr.length; i++) {
if (arr[i] >= 10) {
// 新数组每次应该从0开始 依次递增，切记不能直接把元素赋值给数组名，否则会覆盖数组的数据
newArr[j] = arr[i];
j++;
}
}
console.log(newArr);
</script>
//方法二：
<script>
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
// 声明新数组
var newArr = [];
//遍历数组
for (var i = 0; i < arr.length; i++) {
if (arr[i] >= 10) {
// newArr.length:新数组的长度，数组能自动检测长度
newArr[newArr.length] = arr[i];
}
}
console.log(newArr);
</script>
8.6 数组案例
- 冒泡排序
<script>
// 冒泡排序
var arr = [5,4,3,2,1];
//遍历数组
for (var i = 0; i <= arr.length - 1; i++) {
for (var j = 0; j <= arr.length - i - 1; j++) {
// 外层循环管交换轮数
if (arr[j] > arr[j + 1]) {
// 内层循环在每轮中管元素交换次数
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);
</script>
8.7 伪数组
- 1、伪数组并不是真正意义的数组
- 2、具有数组的 length 的属性
- 3、按照数组索引的方式存储的
- 4、没有真正数组的一些方法 pop()、push() 等等
9、函数
9.1 函数的概念
9.2 函数的使用
9.2.1 函数有两种声明方式
9.2.1.1 函数关键字声明函数（命名函数）
9.2.1.2 函数表达式声明函数（匿名函数）
var 变量名 = function() {};
<script>
// 函数表达式声明函数（匿名函数）
// 1、fun 是变量名 不是函数名
// 2、函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值，而函数表达式里面存的是函数
// 3、函数表达式也可以传递参数
var fun = function() {
console.log('我是匿名函数');
}
fun();
var fun1 = function(aru) {
console.log('我是匿名函数');
console.log(aru);
}
fun1('您好呀');
</script>
9.2.2 调用函数
9.2.3 函数封装
9.3 函数的参数
9.3.1 形参和实参
<script>
// 求任意两个数的和
function getSum(num1, num2) {
console.log(num1 + num2);
}
getSum(1, 3);
getSum(3, 8);
// 求任意两个数之间的和
function getSums(start, end) {
var sum = 0;
for (var i = start; i <= end; i++) {
sum += i;
}
console.log(sum);
}
getSums(1, 100);
getSums(1, 20);
// 注意点
// 1、多个参数之间用逗号隔开
// 2、形参可以看做是不用声明的变量
</script>
9.3.2 函数形参和实参个数不匹配问题
<script>
// 函数形参实参个数不匹配
function getSum(num1, num2) {
console.log(num1 + num2);
}
// 如果实参的个数多于形参的个数，会取到形参的个数
getSum(1, 2, 3); // getSum的结果为3
// 如果实参的个数小于形参的个数
// 形参可以看做是不用声明的变量 num2 是一个变量 但是没有接受值 结果就是undefined
getSum(1); // getSum的结果为NaN
</script>
9.3.3 小结
9.4 函数的返回值
9.4.1 return 语句
<script>
// 求两个数的最大值
function getMax(num1, num2) {
// 方法一：
// if (num1 > num2) {
// return num1; // return 终止函数，后面的代码是不会执行的
// }
// return num2;
// 方法二：
return (num1 > num2) ? num1 : num2; // 三元运算符
}
console.log('两个数的最大值：' + getMax(11, 111));
// 求数组中元素的最大值
function getArrMax(arr) {
// 假定arr[0]为最大值，然后通过遍历数组，判断出数组元素中的最大值
var max = arr[0];
for (var i = 0; i < arr.length; i++) {
if (arr[i] > max) {
max = arr[i];
}
}
return max;
}
// 在开发中，常用变量接收函数的返回值
var result = getArrMax([5, 2, 99, 101, 67, 77]);
console.log('数组中元素的最大值：' + result);
</script>
9.4.2 return 终止函数
- return 后面的代码是不会执行的
- return 只能返回一个值
<script>
// return 终止函数
function getSum(num1, num2) {
return num1 + num2; // return 后面的代码不会被执行
alert("return 后面的代码是不会执行的！");
}
console.log(getSum(1, 2));
// return 只能返回一个值
function fn(num1, num2) {
return num1, num2; // 返回的结果是最后一个值
}
console.log(fn(1, 2)); // 2
// 求任意两个数 的 + - * / 的结果
function getResult(num1, num2) {
return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];
}
var result = getResult(1, 2);
console.log(result); // [3, -1, 2, 0.5]
</script>
9.4.3 函数没有return 返回 undefined
<script>
// 函数有return，返回return 后面的值，如果没有return ，则返回undefined
function fun() {
}
console.log(fun); // undefined
</script>
9.4.4 break,continue,return 的区别
9.5 通过榨汁机看透函数
9.6 arguments的使用
<script>
// arguments 的使用,只有函数才有 arguments 对象
function fn() {
console.log(arguments); // arguments 里面存储了所有传递过来的实参，得到的结果是伪数组
console.log(arguments.length); // 3
console.log(arguments[2]); // 获取索引为2的元素：3
// 遍历数组
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
fn(1, 2, 3);
// 求任意个数的最大值
function getMax() {
var max = arguments[0];
for (var i = 1; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
}
console.log(getMax(11, 2, 3));
console.log(getMax(1, 2, 3, 4, 5, 6));
</script>
9.7 函数相互调用
- 每个函数都是独立的代码块，由于完成特殊任务，因此经常会用到函数相互调用的情况
<script>
// 函数的相互调用
function fn1() {
console.log(11);
fn2(); // 在函数fn1中调用函数fn2
}
fn1();
function fn2() {
console.log(22);
}
</script>
9.8 函数案例
<script>
// 翻转任意数组
function reverse(arr) {
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i];
}
return newArr;
}
var reverseArr = reverse([4, 1, 2, 7]);
console.log(reverseArr);
// 冒泡排序
function sort(arr) {
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0; j < arr.length - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
return arr;
}
var sortArr = sort([11, 2, 1, 34, 2]);
console.log(sortArr);
// 判断闰年
function isRunYear(year) {
// 闰年为true，否则返回false
var flag = false;
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
flag = true;
}
return flag;
}
console.log(isRunYear(2000));
// 用户输入年份，输出当前年份2月份的天数；
// 如果是闰年，2月份是29天，如果是平年，则2月份是28天
function backDay() {
var year = prompt('请您输入年份：');
if (isRunYear(year)) {
// if的条件表达式调用了isRunYear函数
alert('当前年份是闰年，2月份的天数是29天');
} else {
alert('当前年份是平年，2月份的天数是28天');
}
}
backDay();
</script>
10、作用域
10.1 作用域概述
10.2 变量的作用域
10.2.1 全局变量
10.2.2 局部变量
10.2.3 全局变量和局部变量的区别
10.3 块级作用域
<script>
if (3 < 5) {
var num = 10;
}
console.log(num); //10,是由于块级作用域的原因，可访问块级作用域中的变量
</script>
10.4 作用域链
- 就近原则
11、预解析
<script>
console.log(num); // undefined
var num = 10;
/*
通过预解析相当于执行了以下的代码：
（变量提升）
var num;
console.log(num);
num = 10;
*/
fn(); // 打印的结果为11
function fn() {
console.log(11);
}
/*
通过预解析相当于执行了以下的代码：
（函数提升）
function fn() {
console.log(11);
}
fn();
*/
fun(); // fun is not a function
var fun = function() {
console.log(22);
}
/*
通过预解析相当于执行了以下的代码：
（变量提升）
var fun;
fun(); // fun函数未定义,所以会报错
fun = function() {
console.log(22);
}
*/
// 预解析案例
var num = 10;
fun();
function fun() {
console.log(num);
var num = 20;
}
/* {
通过预解析相当于执行了以下的代码：
var num;
function fun() {
var num;
console.log(num);
num = 20;
}
fun();
*/
// 预解析案例
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
var a = b = c = 9;
console.log(a);
console.log(b);
console.log(c);
}
/* {
通过预解析相当于执行了以下的代码：
var b;
var c;
function f1() {
var a;
a = 9;
b = 9;
c = 9;
console.log(a);
console.log(b);
console.log(c);
}
f1();
console.log(c);
console.log(b);
console.log(a);
*/
</script>
12、对象
12.1 什么是对象
12.2 为什么需要对象
12.3 创建对象的三种方式
12.3.1 字面量创建对象
<script>
// 利用对象字面量创建对象 {}
var obj = {
uname: '张三丰',
age: 18,
sex: '男',
sayHi: function() {
console.log('hi~');
}
}
// 1）属性和方法是以键值对的形式呈现
// 2）多个属性和方法是以逗号结束的
// 3）方法冒号后面跟的是匿名函数
// 使用对象有两种方式
// 1）对象名.属性名
// 2）对象名['属性名']
console.log(obj.age);
console.log(obj['uname']);
// 调用对象的方法: 对象名.方法名
obj.sayHi();
</script>
- 变量、属性、函数、方法的区别
12.3.2 new Object 创建对象
<script>
// 利用new Object()创建对象
// 1) 等号 = 赋值的方法 添加对象的属性和方法
// 2）属性和方法是以分号结束的
var obj = new Object(); // 创建了一个空的对象
obj.uname = '张三丰';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function() {
console.log('hi~');
}
console.log(obj.uname);
console.log(obj['age']);
obj.sayHi();
</script>
12.3.2.1 new 关键字
12.3.3 构造函数创建对象
<script>
// 利用构造函数创建对象
// 前两种方式一次只能创建一个对象
// 利用构造函数把一些相同代码封装起来，这也是优于前两种创建对象的方式。封装的表示普通代码，而是对象
// 构造函数的名字首字母要大写
// 属性和方法前面必须添加this
function Star(uname, age, sex) {
this.uname = uname;
this.age = age;
this.sex = sex;
this.sing = function(sang) {
console.log(sang);
}
}
// new 调用构造函数
// 构造函数不需要return也能返回结果
// new 关键字执行过程
// 1）new 构造函数可以在内存中创建了一个空的对象
// 2）this 就会指向刚才创建的空对象
// 3）执行构造函数里面的代码 给这个空对象添加属性和方法
// 4）返回这个对象
var ldh = new Star('刘德华',18,'男'); // 返回对象
console.log(typeof ldh); // object
console.log(ldh.uname);
console.log(ldh['age']);
ldh.sing('冰雨');
var jacky = new Star('张学友',19,'男');
console.log(jacky); // Star {uname: "张学友", age: 19, sex: "男"}
console.log(jacky.uname);
console.log(jacky['sex']);
jacky.sing('李春兰');
</script>
12.3.3.1 构造函数和对象
12.4 遍历对象
<script>
// 遍历对象
var obj = {
name: 'pink对象',
age: 18,
sex: '男',
fn: function(){
}
}
// for in 遍历对象
// for (变量 in 对象){}
for (var k in obj) {
console.log(k); // 获取属性名
console.log(obj[k]); // 获取属性值
}
</script>
12.5 小结
13、内置对象
13.1 Math 对象
<script>
console.log(Math.max(1,20,'AA')); // NaN
console.log(Math.max()); // -Infinity
console.log(Math.abs('-1')); // 1 隐式转换，会把字符串型 -1 转换为数字型
console.log(Math.abs('pink')); // NaN
console.log(Math.floor(1.9)); // 1 向下取整
console.log(Math.ceil(1.1)); // 2 向上取整
console.log(Math.round(-1.5)); // -1 对于四舍五入，取大值
</script>
- 随机数方法 random()
<script>
// 随机数方法 random()
console.log(Math.random()); // 0~1的随机小数
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
