一、基础
- 注释
-
//单行注释
-
/* 多行注释 */
||/** 多行注释 */
- JS的书写
-
行内式写法
-
a标签 =>
<a href="javascript:js代码;"></a>
-
非a标签 =>
<button onclick="js代码"></button>
-
-
内嵌式写法
- 在网页当中写一对script的双标签,js代码写在script的双标签里面,打开网页之后,js代码会直接运行
-
外链式写法
-
创建一个
js
文件夹 -
写一个
*.js
文件 -
在
*.js
文件里面写js
代码 -
在网页当中,使用
script
双标签里面的src属性引入外部的js
文件
-
- 变量
-
var
=> 声明变量的关键字 -
变量名
-
变量的命名规定=>(必须要遵守,不遵守就报错)
-
以数字,字母,下划线,$组成
-
不能以数字开头
-
不能使用关键字
-
-
变量的命名规则=>(建议遵守,但是可以不遵守)
-
驼峰命名法
-
小驼峰 => 当变量名由多个单词组成,那么第一个单词首字母小写,后面的每一个单词首字母大写
-
大驼峰 => 当变量名由多个单词组成,每一个单词的首字母大写
-
-
下划线连接
- 当变量名由多个单词组成,多个单词之间使用下划线连接起来
-
-
-
变量值
-
数据类型
- number,boolean,string,null,undefined
-
数据类型的转换
-
其他数据类型转换成Number =>
parseInt,parseFloat,Number,+
-
其他数据类型转换成String =>
String(变量或者变量的值),变量.toString(),拼接
-
其他数据类型转换成Boolean =>
Boolean(变量或者变量的值)
-
+号
-
单独使用的时候,那么就会进行数据类型的转哈UN
-
两边但凡有一边是字符串,那么就是拼接
-
两边都没有字符串,那么结果就是相加
-
-
-
typeof
=> null检测的时候回触发隐式类型的转换-
typeof 变量或者变量的值
-
typeof (变量或者变量的值)
-
-
- 运算符
-
算术运算符 =>
+,-,*,/,%
-
赋值运算符 =>
=,+=,-=,*=,/=,%=
-
比较运算符 =>
>,>=,<,<=,==,===,!=,!==
-
逻辑运算符 =>
&&,||,!
-
三元运算符 =>
boolean?代码1:代码2
|var res = boolean?结果1:结果2
- 三种输出语句
-
alert => 弹出
-
console.log => 控制台打印
-
document.write => 页面直接输出
- 三种弹出框
共同点: 三种弹出框都会阻止代码往后面运行
-
alert => 弹出,没有返回值
-
confirm => 确认框,点击确认返回true,点击取消返回false
-
prompt => 输入框,点击确认返回输入的内容,点击取消返回null
知识点
1. 一元运算符(自增自减)
-
如果运算符在前面,那么先运算,后赋值,如果运算符在后,那么先赋值,后运算
-
如果是++,那么就+1,如果是--,那么就是-1
比如
var a = 10;
var b = a++;//注意: 运算符在后面,那么就先把a的值赋值给b,然后a再自增+1
console.log(a,b);//a=11,b=10
Copy to clipboardErrorCopied
案例
var k = 10;
// var a = k++ -> a=10,k=11
// var b = ++k -> k=12,b=12
// var c = k++ -> c=12,13
console.log(k++ + ++k + k + k++) // 结果是多少
// 10 12 12 12
Copy to clipboardErrorCopied
二、分支语句
A. if分支
if语句
语法
if(boolean){
//当boolean为true的时候,那么就执行boolean后面大括号里面的内容
}
Copy to clipboardErrorCopied
比如
var age = 17;
// if后面的大括号里面的条件成立(为true),就执行if后面大括号里面的内容,否则不执行大括号里面的内容
// 比较运算符得到的结果一定是一个boolean
if(age>=18){
console.log("可以去网吧");
}
console.log("程序结束!");
Copy to clipboardErrorCopied
if_else分支
语法
//当if后面小括号里面的内容成立,那么就执行if后面大括号里面内容,否则就执行else后面大括号里面的内容
if(boolean){
}else{
}
Copy to clipboardErrorCopied
比如
/*
ifelse分支
当if后面的条件成立(true),那么就执行if后面大括号里面内容,
当if后面的条件不成立(false),那么就执行else后面大括号里面内容
*/
var age = 17;
if (age >= 18) {
console.log("可以去网吧");
} else {
console.log("不可以去网吧");
}
console.log("if_else_程序结束!");
Copy to clipboardErrorCopied
拓展: 隐式类型的转换
隐式类型的转换 => 看目的
比如
//+号,当好的两都没有字符串的时候,那么结果一定是相加
console.log(1+true);//目的是相加,那么JS就会自动的把true转换成数字进行相加
Copy to clipboardErrorCopied
比如
// 分析:
// if() => ()里面要求写一定是一个boolean类型的值
// 那么结果 => 在if后面的大括号里面如果不是boolean的值,那么他就会自动的转换成boolean的类型
var a = 0;
if(a++){
console.log("上面的内容",a);
}else{
console.log("下面的内容",a);
}
Copy to clipboardErrorCopied
拓展: 逻辑运算符
-
当
&&
符号的左边为false了之后,那么计算机为了提高代码的运行效率,那么右边的内容将不再执行 -
当
||
符号的左边为true了之后,那么计算机为了提高代码的运行效率,那么右边的内容将不再执行 -
当
||
符号存在着返回值之后,那么如果左边为true,那么就左边的内容交给返回值,如果左边为false,那么就将右边交给返回值
案例一
var a = 0;
/*
var b = a++ //b = 0; a = 1;
true && true => true
true && false => false
false && true => false
false && false => false
只有一种情况, 当 && 的左边与右边都为true的时候,那么结果就为true,其他的都为false
分析:
a++ => 结果0,a=1;运算出来的结果通过隐式类型的转换 false,
注意: 当 && 符号的左边为false了之后,右边无论为false还是true,那么结果都是false
所以计算机为了提高代码的运行效率,在&&符号的左边为false了之后,那么右边将不再执行
*/
if(a++ && ++a){
console.log("上面的",a);
}else{
console.log("下面的",a);
}
Copy to clipboardErrorCopied
案例二
/*
分支 ||
true || true => true
true || false => true
false || true => true
false || false => false
分析:
当 || 运算符的左边为true之后,右边无论为true还是false,最终的结果都为true
所有计算机也了提高代码的运行效率,当||运算符的左边为true了之后,那么右边将不再执行
var c = ++b ; b = 1;c = 1;
*/
var b = 0;
if(++b || b++){
console.log("上面的",b);
}else{
console.log("上面的",b);
}
Copy to clipboardErrorCopied
案例三
// 当逻辑 || 存在着返回值的时候,如果左变为true,那么就将左边的内容交给返回值,
// 如果左边为false,那么就将右边的内容交给返回值
var a = 1;
var res = a - 1 || false
console.log(res);
Copy to clipboardErrorCopied
多重if语句
语法
if(bool1){
//当bool1条件成立的时候,那么就执行这里面的代码
}else if(bool2){
//当bool2条件成立的时候,那么就执行这里面的代码
}else if(bool3){
//当bool3条件成立的时候,那么就执行这里面的代码
}else{
//当上面的所有if条件都不成立的时候,那么就执行这里目的代码
}
Copy to clipboardErrorCopied
案例
/*
案例
小明参考考试
考试100分,奖励一个 一套试卷
考试90~100分,奖励一个 两套试卷
考试80~90分,奖励一个 三套试卷
考试70~80分,奖励一个 四套试卷
考试60~70分,奖励一个 一顿打
不及格,奖励 一顿打+穿一个背带裤
*/
var score = prompt("请输入你要考试的分数");
if(score == 100){
console.log("奖励一个 一套试卷");
}else if(score >= 90){/* score >= 90 && score != 100 else if后面包含了一个隐式的条件,这个条件与上一个if语句相反 */
console.log("奖励一个 两套试卷");
}else if(score >= 80){/* 隐式的条件 => (score >= 80 && score < 90) */
console.log("奖励一个 三套试卷");
}else if(score >= 70){
console.log("奖励一个 四套试卷");
}else if(score >= 60){
console.log("奖励一个 一顿打");
}else{
console.log("一顿打+穿一个背带裤");
}
Copy to clipboardErrorCopied
B. switch分支
语法
switch(变量){
case 值1:
//当变量的值等于值1的时候,那么就执行这里面
break;
case 值2:
//当比变量的值等于值2的时候,那么就执行这里
break;
case 值3:
//当比变量的值等于值3的时候,那么就执行这里
break;
default:
//当变量与上面的值都不一样的时候,那么就执行这里面
break;
}
Copy to clipboardErrorCopied
案例
/*
星期一 => 敲代码
星期二 => 敲键盘
星期三 => 敲代码
星期四 => 敲作业
星期五 => 敲电脑
星期末 => 睡懒觉
*/
var week = prompt("请输入星期几?")
//prompt得到的结果是一个字符串类型
if(week >= 1 && week <= 7){
switch (week) {
case '1':
console.log("敲代码");
break;
case '2':
console.log("敲键盘");
break;
case '3':
console.log("敲代码");
break;
case '4':
console.log("敲作业");
break;
case '5':
console.log("敲电脑");
break;
default:
console.log("睡懒觉");
break;
}
}else{
alert("没有这个星期")
}
Copy to clipboardErrorCopied
分析
//case和default可以任意调换位置
//break在switch里面作用是阻止代码往后面运行的
/*
思路:
1. switch分支中代码是从上面往下面走的,和case的顺序没有关系
2. switch分支中default的顺序也可以任意调换
3. break在switch分支当中,作用:阻止代码往后面执行
*/
var week = prompt("请输入星期几?")
switch (week) {
case '4':
console.log("敲作业");
break;
case '2':
console.log("敲键盘");
break;
case '1':
case '3':
console.log("敲代码");
break;
case '5':
console.log("敲电脑");
break;
default:
console.log("睡懒觉");
break;
}
Copy to clipboardErrorCopied
C. NaN
NaN => not a number
-
使用typeof检测时候是一个number类型
-
NaN 做算术运算的结果 NaN
-
比较运算 得到的结果出来 !=,!==是true,其他的都是false
比如
var a = NaN;
//算术运算 => NaN 做算术运算的结果 NaN
console.log(a+1);
console.log(a-1);
console.log(a*1);
console.log(a/1);
console.log(a%1);
//比较运算 得到的结果出来 !=,!==是true,其他的都是false
console.log(a>1);
console.log(a<1);
console.log(a!=1);
console.log(a!==1);
console.log(a>=1);
console.log(a===1);
console.log(a==1);
Copy to clipboardErrorCopied
isNaN => is not a number
-
判断不是一个数字
-
得到的结果是 boolean,如果是一个数字,那么得到的结果是false,如果不是一个数字,那么得到的结果就是true
语法
isNaN(变量或者变量的值)
Copy to clipboardErrorCopied
案例
// isNaN => 如果是一个数字,结果false,如果不是一个数字,那么结果true
console.log(isNaN("123456789"));
// isNaN => 判断的不是一个数字
var age = prompt("请输入一个数字") //当用户点击确认按钮,prompt得到的结果一定是一个字符串类型
// isNaN(变量或者变量的值)
if(isNaN(age)){
alert("请输入一个数字")
}else{
if (age >= 18) {
console.log("可以去网吧");
} else {
console.log("不可以去网吧");
}
}
3
-
循环: 循环就是将重复的,有规律的事情可以用循环来简化代码
-
循环有四个要素
-
初始化条件 => 循环的开始那一次
-
循环条件 => 循环的从开始到结束的条件,是一个boolean类型
-
迭代条件 => 记录每循环一次递增(递减)
-
循环体 => 就是有规律的重复代码,当循环条件(boolean)为true时候,就执行循环体,当boolean为false的时候,那么就停止循环
-
A. while循环
语法
//定义一个初始化条件
var i = 1;//循环的初始化次数为1
while(循环条件){
// 循环体
//每循环一次,让i++,那么就记录了这个循环的次数
}
Copy to clipboardErrorCopied
比如
//从第一圈开始跑
var i = 1;
while(i<=4){//循环条件 => 当循环条件满足的时候,那么就执行循环体,当循环条件不满足的时候,那么就停止循环
//循环体
console.log("康哥跑了第"+i+"圈");
//迭代条件
i++;
}
Copy to clipboardErrorCopied
案例
/*
初始化条件 => var i = 1;
循环条件 => i <= 20;
循环体 => sum = sum + i;
迭代体 => i++
*/
/*
求和:
我们需要定义一个变量 var sum = 0;
将每一个循环的内容都要累加到sum里面去
*/
var i = 1;
var sum = 0;//sum 就是用来求和
while(i <= 20){
//循环条件
// console.log(i);
sum = sum + i;
//迭代体
i++;
}
console.log(sum);
Copy to clipboardErrorCopied
B. debug调试代码
有时候,当我们看不动别人的代码写的是什么意思的时候,当我们的代码有错误(异常)的时候,我们需要分析这个异常,或者这个 错误,那么我们就需要使用到debug
-
写代码(有的电脑如果使用了多行注释,那么debug无法调试,删除多行注释,或者将多行注释修改成单行注释)
-
打开网页
-
按F12或者是右键检查
-
找到 Sources(源代码),并点击
-
点击这个网页的名字
-
找到你需要分析(调试)代码
-
断点(点击代码前面的行数)
-
刷新页面
-
按
step into next function call .....
C. doWhile
语法
//初始化条件
var i = 1;
do{
//循环体
//迭代器
}while(循环条件);
Copy to clipboardErrorCopied
比如
/*
初始化条件
var i = 0;
do{
//循环体
//迭代体
}while(循环条件);
*/
//初始化条件
var i = 1;
do{
//循环体
console.log("康哥跑了第"+i+"圈");
//迭代体
i++
}while(i<=10)
Copy to clipboardErrorCopied
- 注意:
-
do_while先执行一次循环体,然后再执行循环条件
-
while循环,先执行循环条件,然后再执行循环体
比如
//while循环,先执行循环条件,然后再执行循环体
var i = 0;
while(i>3){
//循环体
console.log("你好吗?");
//迭代器
i++;
}
console.log("while_程序结束");
//do_while循环先执行一次循环体,然后再执行循环条件
var i = 0;
do{
//循环体
console.log("我很好!");
//迭代体
i++;
}while(i>3)
console.log("do_while循环结束");
Copy to clipboardErrorCopied
D. 死循环
- 循环到死机为止,当循环条件为true时候,那么就会永远的循环下去
while循环的死循环
//死循环 => 当循环条件永远为true,那么就永远的循环下去....
// //初始化条件
var i = 0;
//while循环
while (true) {
//循环体
console.log("一日不见,如隔三秋...");
//迭代体
i++
}
//do_while循环
var i = 0;
do{
console.log("阿珍爱上了阿强");
i++;
}while(true)
3.for循环
1. for循环
语法
//注意: 一定是 ; 隔开
for(初始化条件;循环条件;迭代体){
//循环体
}
Copy to clipboardErrorCopied
比如
//跑圈子
for(var i = 1; i < 4 ; i++){
console.log("康哥跑了第"+i+"圈");
}
Copy to clipboardErrorCopied
案例
/*
思路:
1. 将1,3,5,7,9,....遍历出来
2. 求所有的数字和
定义一个变量 sum 用于求和
*/
//方式一
var sum = 0;//没有求和之前,这个和为0
for(var i = 1 ; i <= 100 ; i=i+2){
// console.log(i);
sum = sum + i;
}
console.log("和为:",sum);
//方式二
var sum = 0;
for (var i = 1; i <= 100; i++) {
// console.log(i);
// 1,3,5,7,9
if(i % 2 == 1){
// console.log(i);
sum = sum + i;
}
}
console.log(sum);
Copy to clipboardErrorCopied
2. 嵌套循环
在循环里面再写一个循环
// for (var i = 1; i <= 4; i++) {
// console.log("把烦恼痛了吞了认了算了" + i + "遍");
// }
// for (var i = 1; i <= 4; i++) {
// console.log("把烦恼痛了吞了认了算了" + i + "遍");
// }
// for (var i = 1; i <= 4; i++) {
// console.log("把烦恼痛了吞了认了算了" + i + "遍");
// }
// for (var i = 1; i <= 4; i++) {
// console.log("把烦恼痛了吞了认了算了" + i + "遍");
// }
// for (var i = 1; i <= 4; i++) {
// console.log("把烦恼痛了吞了认了算了" + i + "遍");
// }
for (var j = 1; j <= 5; j++) {
//有规律的重复代码
for (var i = 1; i <= 4; i++) {
console.log("把烦恼痛了吞了认了算了" + i + "遍");
}
}
Copy to clipboardErrorCopied
嵌套循环输出星
/*
总结:
嵌套循环
外循环控制的是 => 行
内循环控制的是 => 列
*/
for (var j = 1; j <= 5; j++) {
//有规律的重复代码,我们要每4个星之后,就换一行
//里面的这个for循环,每循环一次就打印4个星
for (var i = 1; i <= 4; i++) {
document.write("*")
}
//每循环完毕4个星之后,我们就换一行
document.write("<br>")
}
Copy to clipboardErrorCopied
输出一个九行九列的星
/*
九九乘法表
应该是九行九列
外循环应该要循环9次
内循环应该要循环9次
*/
//外循环需要循环9次,输出9行
for(var j = 1 ; j <= 9; j++){
//内循环也需要循环9次,输出九列
for(var i = 1 ; i <= 9 ; i++){
document.write("*");
}
//内循环循环完毕之后,我们需要换行
document.write("<br>")
}
Copy to clipboardErrorCopied
打印一个九九乘法表的星
/*
分析九九乘法表
第一行 => 有第一列
第二行 => 有第一列,有第二列
第三行 => 有第一列,有第二列,有第三列
第四行 => 有第一列,有第二列,有第三列,有第四列
... ..
总结:
1. 列不能大于行
2. 外循环控制的行 => j
3. 内循环控制的列 => i
4. 九九乘法表的列不能大于行
*/
//外循环需要循环9次,输出9行
for(var j = 1 ; j <= 9; j++){
//内循环也需要循环9次,输出九列
for(var i = 1 ; i <= j ; i++){//内循环的列数不能大于外循环的循环的行数, i <= j
document.write("*");
}
//内循环循环完毕之后,我们需要换行
document.write("<br>")
}
Copy to clipboardErrorCopied
九九乘法表
//外循环需要循环9次,输出9行
for(var j = 1 ; j <= 9; j++){
//内循环也需要循环9次,输出九列
for(var i = 1 ; i <= j ; i++){//内循环的列数不能大于外循环的循环的行数, i <= j
document.write(i+"x"+j+"="+(i*j)+" ");
}
//内循环循环完毕之后,我们需要换行
document.write("<br>")
}
Copy to clipboardErrorCopied
边框九九乘法表
document.write("<table>");
document.write("<tbody>");
//外循环,循环一次就有一个tr
for(var j = 1 ; j <= 9; j++){
document.write("<tr>")
for(var i = 1 ; i <= j ; i++){
//内循环循环一次就有一个td
document.write("<td style='border:1px solid;background:pink'>")
document.write(i+"x"+j+"="+(i*j)+" ")
document.write("</td>")
}
document.write("</tr>")
}
document.write("</tbody>");
document.write("</table>");
Copy to clipboardErrorCopied
3. 终止循环
- break在循环当中可以终止当前循环
比如
//求1~100之间的和,如果和超过了1000,那么就停止循环
var sum = 0;
//将1~100之间的每一个数字都累加起来,如果和超过了1000,那么就停止循环
for (var i = 1; i <= 100; i++) {
// console.log(i);
// sum = sum + i;
sum += i;
// console.log(i,sum);
//如果和超过了1000,那么就停止循环
if(sum > 1000){
//在循环当中代码碰到break,那么就可以终止循环
break;
}
}
console.log(sum);
Copy to clipboardErrorCopied
- continue停止本次循环,继续下一次循环
比如
//输出1~100之间所有的3的倍数
for(var i = 1 ; i <= 100 ; i++){
if(i % 3 == 0){
console.log(i);
}
}
for(var i = 1 ; i <= 100 ; i++){
//如果不是3的倍数,那么就停止本次循环,继续下一次循环
if(i % 3 != 0){
// console.log(i);
continue;
}
console.log(i);
}
Copy to clipboardErrorCopied
- 看代码说结果
/*
1,1,2,4,4
*/
for (var i = 0; i < 5; i++) {
while (i % 3 == 0) {
i++;
console.log(i);
break;
}
console.log(i);
}
//看代码说结果 => 案例二
/*
1,2,2,2,2,2,2,2,2,2,2,2,2,2
*/
for (var i = 0; i < 5; i++) {
while (i || i++) {
console.log(i);
continue;
console.log(i * i);
}
console.log(i);
}
Copy to clipboardErrorCopied
4. 函数
A. 什么是函数
函数: 一次书写,多次调用
- 函数的基础语法
语法
/*
function => 声明一个函数的关键字
login => 函数的名
() => 参数,如果()里面有内容,表示有参,如果()里面没有内容,表示无参
{} => 函数体
*/
//定义一个函数,函数名为login
function login() {
console.log("我是一个登录功能");
}
//执行function login(){} 这个函数
login();
Copy to clipboardErrorCopied
B. 函数的分类
具名函数(有名字的函数)
-
无参无返
-
无参有反
-
有参无反
-
有参有反
比如
/*
function => 声明函数的关键字
fn => 函数的名字
() => 函数的参数,如果()里面有内容,那么就是有参数的函数,如果括号里面没有内容,那么就没有参数的函数
{} => 函数体
return => 返回值,如果函数里面有return,表有返回值的函数,如果函数里面没有return,表示没有返回值的函数
function fn(a,b){
return 'xxx'
}
*/
//无参无反
function fn1(){
console.log("我是一个无参无返回值的函数");
}
fn1();//调用名字叫做 fn1 的这个函数,那么就会执行fn1这个函数里面函数体
//无参有反 => 返回值的作用就是给调用者接收
function fn2(){
console.log("我是fn2,我被调用了");
return "我是小小的石头"
}
var res = fn2();
console.log(res);
//有参无反 => 当()里面有内容的时候,那么就是一个有参数的函数
function fn3(a,b){
console.log("a和b的和为",a+b);
}
fn3(1,2);
//有参有反 => 当()里面有内容的时候,有返回值在函数体中有return存在
function fn4(a,b,c){
console.log("我是一个有参有返回值的函数");
return a+b+c;
}
var res = fn4(1,2,3);
console.log(res);
Copy to clipboardErrorCopied
匿名函数(没有名字的函数)
-
无参无反
-
无参有反
-
有参无反
-
有参有反
比如
//定义一个没有名字的函数,将函数存储到一个变量当中
//1. 无参无返
var fn1 = function(){
console.log("我是一个无参无返的函数");
}
fn1();
//2. 无参有反
var fn2 = function(){
return '我是一个无参有反的函数'
}
var res = fn2();
console.log(res);
//3. 有参无反
var fn3 = function(a,b){
console.log("我是一个有参无反的函数",a,b,a+b);
}
fn3(1,2);
//4. 有参有反
var fn4 = function(a,b){
return '我是一个有参有返回值的函数'+a+b+(a+b)
}
var res = fn4(1,2);
console.log(res);
Copy to clipboardErrorCopied
分析函数
比如
/*
function => 声明函数的关键字
fn => 函数的名
() =>
形参 => 形式上的参数
实参 => 实实在在的参数
{} => 函数体
return
1. 在函数体当中如果没有写return,无返回值的函数,调用一个无返回值的函数,用一个变量接收,那么这个变量的值就是undefined
2. return 返回值返回的内容,只能返回一个数据
arguments =>
当我们传递了实参给函数的时候,那么实参可以通过一个arguments伪数组来进行接收
伪数组(有长度,有下标)
*/
function fn(a,b,c){//a,b,c可以存储任何值,那么相当形式上的内容 => 形参
return a+b+c;
}
fn(1,2,3)//1,2,3具体的,实实在在有的值 => 实参
Copy to clipboardErrorCopied
5. 伪数组
/*
伪数组 =>
特点1 => 有长度
特点2 => 有下标
*/
function fn(){
//可以通过arguments来接收实参,伪数组,有下标,有长度
//获取元素 => arguments[下标]
//获取长度 => argumnets.length
// console.log(arguments);
/*
获取下标为0这个内容 arguments[0]
获取下标为1这个内容 arguments[1]
获取下标为2这个内容 arguments[2]
获取下标为3这个内容 arguments[3]
获取下标为4这个内容 arguments[4]
获取下标为5这个内容 arguments[5]
*/
// console.log(arguments[0]);
// console.log(arguments[1]);
// console.log(arguments[2]);
// console.log(arguments[3]);
// console.log(arguments.length);
for(var i = 0 ; i < arguments.length ; i++){
console.log(arguments[i]);
}
}
//传过去的内容 有 1,2,3,4,5,6,7,8,9
fn("张三","李四","王五","赵六")