1、JavaScript的组成部分
BOM:浏览器对象模型
DOM:文档对象模型
ECMAScript:核心,定义js的语法规则与书写规范
BOM和DOM 是WebAPI,通过es操作BOM和DOM完成交互功能。
2、JavaScript的书写位置
行内式:(不推荐使用)
a标签
<a href="javascript: alert('HelloWorld!')">
点我一下
</a>
非a标签
<div class="btn" onclick="alert('你好,世界!')">点我一下</div>
内嵌式:把代码书写在一个 script 标签对内
<script>
alert("Hello World2!");
</script>
外链式:(推荐)
<script src="./外部的js.js"></script>
注意:
- 引入时,使用的是script标签的src属性
- 外部的javascript文件的扩展文件名为.js
3、JavaScript的注释
单行注释: // 注释内容
多行注释:/* 注释内容*/
// 这是一个弹框
/*
这是多行注释
这是多行注释
这是多行注释
这是多行注释
*/
4、变量
程序在运行过程中,可以改变的量叫变量(可以保存一个中间值)。
1>变量的定义
使用关键子 var
格式: var 变量名 = 变量值
var num = 100;
var name = "张三";
注意: = 和数学上的等号不同,这里=代表赋值,是具有方向性,是把右边的值赋给左边的变量。因此,等号的左边必须是变量。
2>变量的命名规范
- 变量名只能由数字、字母、下划线和$组成,不能以数字开头
- 变量名应该见名知义 , eg: name,age, address…
- 变量名采取小驼峰命名规范,第一个单词全小写,后面每个单词的首字母大写。eg: firstName,currentDate…
- 不能使用关键字。
- 变量名严格区分大小写
5、输出
// alert 弹框
var name = "张三";
alert(name);
// 输出到控制台
var age = 25;
console.log("age=", age);
console.error("1+2=3");
// 输出到页面
var line = "<h3>过了今天,就是明天!</h3>";
document.write(line);
6、数据类型
7、数据类型的检测 typeof
使用方法: typeof 检测的数据(具体的值或变量),返回值为string
var name = "100";
var type = typeof name;
console.log("'100'的类型为:",type);
var result = name - 0; // 隐式类型转换
type = typeof result;
console.log("result的类型为:",type);
var isExist = true;
type = typeof isExist;
console.log("true的类型为:",type);
var obj = undefined;
type = typeof obj;
console.log("undefind的类型为:",type);
var noResult = null;
type = typeof noResult;
console.log("null的类型为:",type);
8、运算符
1>算术运算符
- +运算符:
// + 1、当+两边都是数字或boolean类型时,进行加法运算
var num1 = 1;
var num2 = 2;
var sum = num1 + num2;
console.log('sum:', sum);
var sum2 = true + false;
console.log('sum2:',sum2);
// 2、当+两边,有一边为字符串时,进行的时字符串的拼接
var name = "张";
var num3 = 3;
var res = name + num3;
console.log('res:',res);
// 使用+进行数字向字符串的转换操作
var str = 100 + ""; // "100"
-
-运算符,就是用来做减法运算
// 带有输入框的弹框 var num4 = window.prompt("请输入第一个数字。。。"); var num5 = window.prompt("请输入第二个数字。。。"); console.log(num4 + "-" + num5 + "=" + (num4 - num5)); // 使用- 可以进行字符串向数字的转换 var num6 = "100" - 0; console.log(typeof num6);
-
* 乘法运算符
-
/ 除法运算符
var num7 = num1 * num2; var num8 = 9 / 4; // 2.25 console.log(num7, num8);
结果:
2 2.25
-
% 取模运算符
var num9 = 9 % 4; console.log("9%4=", num9); // 1
-
++ 自增运算符和–自减运算符,只有一个操作数
var num10 = 100;
// num10++;// num10 = num10+1;
var num11 = ++num10;
console.log(num11);
var num12 = 100;
// num12--; // num12 = num12-1;
var num13 = --num12;
console.log(num13);
2>赋值运算符 =
var name = "张三";
var age = 18;
// 赋值运算符与算术运算符联合起来,衍生出了其它的赋值语句
var a = 10;
a+=5; // a+=5 等价于 a=a+5;
// 其它的类似:+=,-=,*=,/=,%=
3>比较运算符, 结果为boolean类型,成立时结果为true,不成立结果为false
大于 >
5 > 10; // true
小于<
10 < 8; // false
等于 ,=
var num1 = 10; var num3 = "10"; // == 只判断值是否一样 console.log(num1 == num3); // true // === 严格等于,先判断类型,再判断值 console.log(num1 === num3); // false
不等于 !=,!==
var a = "10"; console.log(a != 10); // false console.log(a !== 10); // true
大于等于 >=
小于等于 <=
<script>
var num1 = 10;
var num2 = 20;
console.log(num1 > num2); // false
console.log(num1 < num2); // true
console.log(num1 >= num2); // false
console.log(num1 <= num2); // true
console.log(num1 == num2); // false
console.log(num1 != num2); // true
</script>
4> 逻辑运算符, 结果为boolean类型
&& 与运算
使用方式: 表达式1 && 表达式2,
结果: 表达式1和表达式2的值都为true时,最终的结果才为true,只要有一个为false,结果就为false
console.log(true && false); // false var a = 10; var b = 20; var c = 30; console.log(a < 10 && b < c); // false
|| 或运算
使用方式: 表达式1 || 表达式2,
结果: 表达式1和表达式2的值都为false时,最终的结果才为false,只要有一个为true,结果就为true
console.log(true || false); // true console.log(a < 10 || b < c); // true
! 非运算
使用 !表达式
表达式的值为true,结果就为false,表达式的值为false,结果就为true
console.log(!false); // true console(!(b < c)); var num = 20; console.log(!!num);
9、程序的三种结构
1、顺序结构: 按照所写的顺序从上到下,依次执行。
选择(分支)结构:
1>if
语法:
if(执行的条件){
语句块。
}
如果执行条件是真的,就执行语句块。否则就跳过
2> if–else
if(执行的条件){
语句块1
} else {
语句块2
}
if (num === "a") {
// 语句块
var n1 = 10;
var n2 = 20;
console.log("轮到我了");
console.log(n1 + n2);
} else {
console.log("运气真差^_^");
}
3>多条件分支结构 if–else if—else if —else
if(执行的条件1){
语句块1
} else if(执行的条件2) {
语句块2
} else if(执行的条件3){
语句块3
}.........
else {
语句块n;
}
var sc = score - 0;
// 判断分数的等级,
// sc >= 90 && sc <= 100 相当于数学中的 90=<score<=100
if (sc >= 90 && sc <= 100) {
console.log("A");
} else if (sc >= 80) {
console.log("B");
} else if (sc >= 60) {
console.log("C");
} else {
console.log("D");
}
4>分支语句的嵌套
var score = window.prompt("请先输入分数");
if (score == null) {
console.log("没有输入分数");
} else {
// 将分数转换成数字
var sc = score - 0;
// 判断分数的等级,
if (sc >= 90 && sc <= 100) {
console.log("A");
} else if (sc >= 80) {
console.log("B");
} else if (sc >= 60) {
console.log("C");
} else {
console.log("D");
}
}
在分支语句中嵌套分支语句时,必须嵌套一个完整的分支语句。
5>条件分支语句
根据已知条件找到一个 完全匹配 的选项, 执行对应的代码
语法:
switch(已知条件){
case 选项1:
…
case 选项2:
…
}
switch (foot) {
case "37":
console.log("小脚");
break;
case "38":
console.log("小脚");
break;
case "39":
console.log("小脚");
break;
case "40":
console.log("中等");
break;
case "41":
console.log("中等");
break;
case "42":
console.log("中等");
break;
case "43":
console.log("大的跟船一样");
break;
default:
console.log("没有对应的尺码");
}
注意点:
1> 使用case 来定义 选项, 如果需要在case匹配成功,执行对应的代码后跳出switch语句,那么就需要在每个case中加上break关键字。
2>如果没有匹配任何选项,就会执行default中的语句。
3>如果不同的选项对应相同的内容,可以进行内容的合并
switch (foot) {
case "37":
case "38":
case "39":
console.log("小脚");
break;
case "40":
case "41":
case "42":
console.log("中等");
break;
case "43":
console.log("大的跟船一样");
break;
default:
console.log("没有对应的尺码");
}
2、循环结构:
在程序中,将代码块重复的执行多次。
1> while循环------- > 当 怎么样
的时候 ,干 什么事情
循环变量的初始状态
; <1>
while(循环条件
){ <2>
重复执行的语句;
更新循环变量 <3>
}
var num = 0; // 记录打印的条数
while(num<100){
// 语句块;
console.log("Hello World!");
num++;
}
练习:求1+2+3+…+99的和
var sum = 0; // 用来保存和
var i = 1; // 用来记录数
while (i <= 99) { // 循环条件
// 循环语句
sum = sum + i;
// 更新循环变量
i++;
}
console.log("1+2+3+...+99="+ sum);
求10!。 10*9*8*7*…*1
var nums = 1;//保存积
var item = 10;
while (item >= 1) {
nums *= item;
item--;
}
2>do–while循环
do {
// 循环语句
}while(循环条件)
while和do-while的区别:
while是先判断后执行,循环语句执行的次数 0或多次
do-while是先指行后判断,循环语句执行的次数为1次或多次
3> for循环
for(初始化循环变量;判断条件;更新循环变量){
循环语句
}
var sum = 0;
for (var i = 1; i <= 100; i++) {
// 循环语句
// 判断是否是偶数 i%2==0,如果是,进行相加
if (i % 2 == 0) {
sum += i;
}
}
三种循环的区别:
while | do-while | for | |
---|---|---|---|
执行的次数 | 0或多次 | 1次或多次 | 0次或多次 |
应用的场景 | 次数不确定的情况 | 次数不确定的情况 | 多数应用在次数确定的情况 |
语法 | while(条件判断){ 循环语句} | do {循环语句}while(条件判断); | for(循环变量的初始化;条件判断;更新循环变量){循环语句} |
练习:
/*
* * * * *
* * * * *
* * * * *
* * * * *
* * * * *
*/
for (var j = 1; j <= 5; j++) { // 循环嵌套
var str = ""; // 作用:用于拼接*
for (var i = 1; i <= 5; i++) {
str += "* ";;
}
console.log(j + "行:" + str);
}
打印三角*
/*
- - - * 1---1 2*row-1 -的数量= 4 -row
- - * * * 2 --3
- * * * * * 3---5
* * * * * * * 4---7
*/
for (var i = 1; i <= 4; i++) { // 外层循环,定义打印多少行
var str = ""; // 作用:用于拼接*
// 先打印空格
for(var k=1;k<=4 -i;k++){
str +=" ";
}
for (var j = 1; j <= 2 * i - 1; j++) { // 内层循环,定义每一行是如何打印的
str += "* ";
}
console.log(i + "行:" + str);
}
打印九九乘法表
for (var i = 1; i <= 9; i++) { // 控制行数
var str = "";
for (var j = 1; j <= i; j++) {
str += i + " * " + j + "=" + i * j + " ";
}
console.log(str);
}
break的作用: 用来 终止循环
//1 准备两个变量,保存这两个数
var num1 = window.prompt("请输入第一个数") - 0;
var num2 = window.prompt("请输入第二个数") - 0;
// 2 最大公约数 <= min(num1,num2)
// 假设最大公约数等于num1和num2中较小的那一个
var result = num1;
if (num2 < num1) {
result = num2;
}
//3 找到两个数的公约数
for (var i = result; i >= 1; i--) {
if (num1 % i == 0 && num2 % i == 0) {
// 第一次找到的i,就是最大的公约数
console.log("最大的公约数:" + i);
// 让循环结束
break;
}
}
10、判断一个年份为闰年
<script>
/*
判断任意年份是否为闰年,需要满足以下条件中的任意一个:
1 该年份能被 4 整除并且不能被 100 整除;yearNum%4===0 && yearNum%100!==0
2 该年份能被400整除。 yearNum%400===0
*/
var year = window.prompt('请输入一个年份'); // 返回的是字符串类型,当没有输入内容时,直接确定,year的值为""
if (year === null) { // 点取消时,返回的是null
console.log("你还没有输入年份!!!");
} else {
var yearNum = year - 0; //如果year为字符串,在进行-*/时,会先将字符串类型转换为number,然后再进行计算。
// 判断yearNum是否为number类型
if (typeof yearNum === 'number') {
// 判断是否是闰年
if ((yearNum % 4 === 0 && yearNum % 100 !== 0) || (yearNum % 400 === 0)) {
console.log(year + "是闰年");
} else {
console.log(year + "是平年");
}
} else {
console.log("输入的年份有误!!!");
}
}
</script>
备注: NaN not a number(不是一个数字)。 但是 typeof NaN的结果为 “number”
11、函数
函数的作用: 完成一个功能的代码块。
1>定义函数
function 函数名(){
功能 代码块;
}
注意: 函数名要见名知义,采取小驼峰式命名规则。get…,set…,select,query…,update…,del…
2> 函数的调用
语法: 函数名();
注意: 哪里使用哪里调用,可以多次调用
3>函数之间可以调用.但是不能嵌套
4> 函数的返回值
return 返回的内容.
注意: 如果函数需要有返回值,需要通过return返回,如果函数没有返回值,就不写.
5> 接收函数的返回值
var 变量 = 函数名();
6>函数的参数
function 函数名(形参1,形参2,形参3…){
代码块
}
7> 在调用时,针对有参函数传递具体的值
函数名(实参1,实参2…);
<script>
// 10! 10*9*8*7*....*1
var a = 10;
var result1 = factorial(a);
var result2 = factorial(5);
console.log('10!=', result1, '5!=', result2);
// 函数声明
function factorial(n) {
var result = 1;
//使用for循环
for (var i = n; i >= 1; i--) {
result = result * i;
}
return result;
}
// 函数表达式: 一定要在使用之前定义.
var func = function () {
console.log("Hello World");
}
</script>
8> var声明的变量自动会进行作用域的提升
9>匿名函数–没有名字的函数
// 匿名函数--没有名字的函数
setInterval(function () {
console.log(new Date().getUTCSeconds());
}, 1000);
10> 递归函数
<1>在函数中自己调用自己.
<2> 将一个大的问题转换为比原问题小的同一问题.
function fib(n){
// 递归到底的情况
if(n==1 || n==2){
return 1;
}
// 第n-2项+ 第n-1项
return fib(n-2)+fib(n-1);
}
<1> 递归终止的条件 <2> 递归操作
猴子吃桃问题: 猴子第一天摘下若干个桃子,当即吃了一半,还不过瘾,又多吃了一个。第二天早上又将第一天剩下的桃子吃掉一半,有多吃了一个。以后每天早上都吃了前一天剩下的一半零一个。到第 10 天早上想再吃时,发现只剩下一个桃子了
function eatApple(day) {
// 递归到底的情况
if (day == 1) {
return 1;
}
return (eatApple(day - 1) + 1) * 2;
}
12、对象
1> 对象就是一个键值对的集合。
键值对: key:value eg------> age:18
2> 对象的定义
var obj = { "name": "张三", "age": 15, "gender": "女" };
2> 对象的操作
//向对象中添加元素 1 使用.操作符 2 使用[]
obj.address = "陕西汉中";
obj.tel = "15748754785";
obj["hobby"] = "写代码";
console.log(obj);
// 获取对象的内容1 使用.操作符 2 使用[]
console.log(obj.name);
console.log(obj.hobby);
console.log(obj["name"]);
console.log(obj["hobby"]);
console.log(obj.a)
// 修改对象内容
obj.name = "李四";
obj["hobby"] = "酷爱写代码";
console.log(obj);
// 删除对象中的内容
delete obj.name;
console.log(obj);
// 获取对象中所有的内容, 遍历对象 for--in
for (var key in obj) {
console.log(key, "------", obj[key]);
}
3> 获取对象 中元素的个数
Object.keys(obj).length
4> 数组数据类型
数组: 存放一组有序数据的集合
<1>定义数组
// 自变量的方式
var arr = [];
var arr2 = ["apple", "orange", "watermelon"];
<2> 获取数组的长度
数组名.length
console.log(arr.length);
console.log(arr2.length);
<3>数组的操作: 通过索引进行操作
数组的索引是从0开始,最大的索引 arr.length -1.
稀疏数组: 在定义数组是,数组中有一些元素没有内容(undefined)。最常见的定义稀疏数组的方式 var arr=[]; arr[20]= 100;
// 向数组中添加元素,通过索引进行添加。数组的索引从0开始,数组的索引最大的 数组名.length -1
arr[0] = 20;
arr[1] = 30;
arr[20] = 30;
// 稀疏数组
// 获取数组中指定位置的元素, 通过索引: 数组名[索引]
// 获取数组arr中索引为1的元素
console.log(arr[1]);
console.log(arr[5]);
console.log(arr2[10]);
// 修改 数组名[修改的索引]=值
arr[0] = 100;
console.log(arr[0]);
// 删除
delete arr[1]
console.log(arr[1]);
console.log(arr);
<4> 数组的遍历
// 遍历数组 for--in
for (var key in arr) {
console.log(key); // 这里的key对应索引
}
// for循环
for (var i = 0; i < arr.length; i++) {
if (arr[i] !== undefined) {
console.log(arr[i]);
}
}
<5> 对象数组
数组中元素是对象
// 对象数组
var objArr = [{ 'name': "中国" }, { 'name': '美国' }, { 'name': '英国' }];
for (var i = 0; i < objArr.length; i++) {
var name = objArr[i].name
console.log(name);
}
var obj = { fruits: ["apple", "orange"], toies: ["train", "gun", "plane"] }
for (var key in obj) {
console.log("----", key + "-------");
var value = obj[key];
for (var i = 0; i < value.length; i++) {
console.log(value[i])
}
}
<6>传值调用 和传引用调用
// 交换的方法
function swap(num1, num2) {
console.log(num1, num2); // 10 20
var temp = num1;
num1 = num2;
num2 = temp;
// 交换的只是num1,num2
console.log(num1, num2); // 20 10
}
// 交换的方法
// arr 交换的数组 i j 交换的索引
function swap(arr, i, j) {
//arr [1,2,3,4] i=0;j=2
console.log(arr[i], arr[j]); // 1 3
var temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
// 交换的只是num1,num2
console.log(arr[i], arr[j]); // 3 1
}
<1>传值调用
向函数中传递具体的值(基本数据类型),形参的改变不会影响实参
<2>传引用调用
向函数中传递的是对象(引用数据类型),形参的改变会影响实参
13、数组中常用的方法
-
concat 拼接数组,返回一个新的数组
var arr1 = [1, 2, 3]; var arr2 = [4, 5, 6]; var newArr = arr1.concat(arr2); console.log(arr1, arr2, newArr);
var arr1 = [1, 2, 3]; var arr2 = [4, 5, [6, 7]]; var newArr = arr1.concat(arr2); console.log(arr1, arr2, newArr);
-
join()将数组元素连接起来以构建一个字符串
var fruits = ["a", "b","c","d"];
var result = fruits.join("-");
-
length属性
获取数组的长度
-
push 向array尾部添加的值,可以是一个或多个。会改变原数组
var fruits = ["a", "b","c","d"]; var result = fruits.join("-"); console.log(result); // 向fruits的尾部添加两个值,分别为"x","y" fruits.push("x","y"); console.log(fruits);
-
pop() 将删除array的最后一个元素,把数组长度减1,并且返回它删除的元素的值。如果数组已经为空,则pop()不改变数组
fruits.pop();
console.log(fruits);
-
unshift(value,…) 向数组的头部添加一个或多个值
fruits.unshift("p", "q", "m", "f"); console.log(fruits);
-
shift() 把array的第—个元素移出数组,返回那个元素的值,并且将余下的所有元素前移一位,以填补数组头部的空缺。如果数组是空的,shift()将不进行任何操作,返回undefined。注意,该方法不创建新数组,而是直接修改原有的数组。
-
reverse() 翻转数组
fruits.reverse();
-
排序
// 排序方法, 改变原数组 // 按照字母顺序的排序 fruits.sort(); // 自定义排序规则 var nums = [12, 23, 8, 1]; nums.sort(function (a, b) { return a - b; }); console.log(nums);
-
slice() 从源数组中分隔出一个子数组[start,end),不改变源数组,返回一个新数组
var arr3 = nums.slice(0,3); console.log(nums,arr3); var arr4 = nums.slice(3); // [1] var arr5 = nums.slice(1,-1);// [12,8]
-
splice(start,delCount,value…) 插入、删除或替换数组的元素
start : 开始位置 delCount: 删除的个数 value: 添加或替换的元素
15、数字常用的方法
-
isNaN() 用来判断是否是非数字
isNaN("abc") // true
-
toFixed() 用来保留几位小数
没有参数: 保留整数位
参数: number 保留小数的位数
var num = 14758.82145; console.log(num.toFixed()); console.log(num.toFixed(1)); console.log(num.toFixed(2));
-
toString() 将数字转换成字符串
var str = num.toString(); console.log(typeof str, str);
-
valueOf() 显示num的原始值
var numStr = 1e+2; console.log( numStr.valueOf()); // 100
16、日期常用的方法
创建日期:
var curTime = new Date();
console.log(curTime);
var oldTime = new Date(2022,11,24,8,24,51);
console.log(oldTime);
获取年月日时分秒
// 获取到年份
var year = curTime.getFullYear();
// 获取到月份
var month = curTime.getMonth(); // 使用数字0~11表示1~12月
// 获取到日期
var date = curTime.getDate();
// 获取到小时
var hour = curTime.getHours();
// 获取到分钟
var minutes = curTime.getMinutes();
// 获取秒
var seconds = curTime.getSeconds();
// 获取到一个时间戳
var time = curTime.getTime();
时间戳:时间点与格林威治时间相差的毫秒数。
17、数学中常用的方法
-
Math.abs(number) 求绝对值
var num = window.prompt("请输入一个数字")-0; alert(Math.abs(num));
-
Math.floor(number) 求小于number的最大整数
-
Math.ceil(number) 求大于number的最小整数(天花板)
var num = 157.68; console.log(Math.floor(num)); // 求大于number的最小整数(天花板) console.log(Math.ceil(num));
-
求最大值
var max = Math.max(15,27,9); console.log(max);
-
pow(x,y) x的y次幂
var result = Math.pow(3,2);
console.log(result);
-
random() 返回一个0.0 和 1.0之间的一个伪随机数。
// 返回1~10之间的随机数 var num2 = Math.round(Math.random() * 9)+1;
-
round() 四舍五入取整