JavaScript详细学习笔记1
1. 初识JavaScript
1.1 简单介绍
- 布兰登▪爱奇在1995年花费10天完成
- 是世界上最流行的语言之一，是一种运行在客户端的脚本语言（不需要编译，运行过程中由js解释器逐行来进行解释并执行）
- 实现业务逻辑和页面控制（决定功能），相当于人的各种动作
- 浏览器分成两部分，渲染引擎和js引擎
-
- 渲染引擎：用来解析HTML与CSS，俗称内核，比如Chrome浏览器的bink，老版本的webkit
- js引擎：也称为js解释器，用来读取网页中的JavaScript代码，对其处理后运行，比如Chrome浏览器的V8
1.2 js 的组成：
- ECMAScript:JavaScript语法，规定了js的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套js语法工业标准
- DOM：页面文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口，通过DOM提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）
- BOM：浏览器对象模型，提供了独立于内容的，可以与浏览器窗口进行互动的对象结构，通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等
1.3 JS有三种书写位置
- 行内式js：在HTML中使用双引号，js使用单引号。可将单行或少量js代码写在HTML标签的事件属性中（以on开头的属性），但可读性差，引号易错。
- 内嵌式js
- 外部式js：标签中间不可使用代码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-compatibla" content="ie=edge">
<title>Document</title>
<!-- 2、内嵌式的js-->
<script>
// alert('沙漠骆驼');
</script>
<!-- 3、外部式的js -->
<script src="js/my.js"></script>
</head>
<body>
<!-- 1、行内式的js,直接写到元素的内部 -->
<!-- <input type="button" value="唐伯虎" οnclick="alert('秋香姐')">-->
</body>
</html>
1.4 JavaScript输入输出语句
- alert(msg)：浏览器弹出警示框，归属于浏览器
- console.log(msg)：浏览器控制台打印输出信息，归属于浏览器
- prompt(info)：浏览器弹出输入框，用户可以输入，归属于浏览器
<script>
// 这是一个输入框
prompt('请输入你的年龄');
// alert 弹出警示框,输出的 展示给用户的
alert('计算的结果是');
// 控制台输出 给程序员测试使用
console.log('我是程序员能看到的')
</script>
1.5 JavaScript注释
// 1.单行注释
/*
2.多行注释
2.多行注释
*/
1.6 变量
1.6.1 什么是变量
白话：变量就是一个装东西的盒子
通俗：变量是用于存放数据的容器，我们通过变量名获取数据，甚至数据可以修改
本质：变量是程序在内存中申请的一块用来存放数据的空间
1.6.2 变量的使用
变量使用时分为两步：
-
声明变量：
-
赋值：
<script> // 声明一个age变量 var age; // 赋值：把值存入变量中 age=10; // 给age这个变量赋值10 // 输出结果 console.log(age); </script> -
变量的初始化：声明一个变量并赋值
var age=18; // 声明一个变量age并赋值为18
例子1：
<script>
var myname='旗木卡卡西';
var address='火影村';
var age=30;
var email='kakaxi@itcast.cn';
var gz=2000;
console.log(myname);
console.log(address);
console.log(age);
console.log(email);
console.log(gz);
</script>
例子2：弹出输入框输入姓名，在弹出一个对话框输出刚输入的姓名
<script>
// 用户输入姓名,存储到一个myname变量
var myname=prompt('请输入你的名字');
// 输出名字
alert(myname);
</script>
1.6.3 变量语法扩展
-
更新变量：一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋值为准
-
同时声明多个变量(以逗号隔开，分号结尾)
// 同时声明多个变量 var age=18, address='火影村', gz=20000; -
声明变量的特殊情况
// 声明变量的特殊情况 // 1.声明不赋值，结果是 undefined var sex; console.log(sex); // undefined // 2.不声明不赋值，直接使用 会报错 console.log(tel) // Uncaught ReferenceError: tel is not defined // 3.不声明直接赋值使用 可使用但不提倡 qq=120; console.log(qq) // 120
1.6.4 变量命名规范
- 由字母(a-z/A-Z)，数字(0-9)，下划线(_)，美元符号($)组成，如：usrAge,num01,__name
- 严格区分大小写
- 不能以数字开头
- 不能是关键字，保留字。例如：var,for,while,name
- 变量名必须有意义。MMD,BBD,nl->age
- 遵守驼峰命名法，首字母小写，后面单词首字母需要大写
例子：交换两个变量的值
// 交换两个变量的值
// 1.需要一个临时变量 temp
var apple1='青苹果';
var apple2='红苹果';
var temp;
temp=apple1;
apple1=apple2;
apple2=temp;
console.log(apple1,apple2); // 红苹果 青苹果
2. JavaScript的数据类型
2.1 数据类型的简介
-
为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型
-
数据类型就是数据的类别型号
-
变量的数据类型：JavaScript是一种弱类型或者说动态语言，不用提前声明变量的类型，在程序运行过程中，类型会根据等号右边的值来确定。
// var num; // 这里的num不确定属于那种数据类型 var num=10; // 这里的num是属于数字型的 -
js变量的数据类型是可变的
var x=10; // x是数字型 x='str'; // x是字符串型
2.2 数据类型分类：
2.2.1 简单数据类型:
1. Number :数字型，包含整型值和浮点型值，如21,0.21 默认值0
-
八进制数字序列范围
// 1、八进制 0~7 程序里面数字前面加0表示八进制 var num1=010; console.log(num1); // 010 八进制 转换为 十进制 8 // 2、十六进制 0~9 a~f #ffffff 数字的前面加0x 表示十六进制 var num2=0x9; console.log(num2); // 9 // 3、数字型的最大值 console.log(Number.MAX_VALUE); // 4、数字型的最小值 console.log(Number.MIN_VALUE); // 5、无穷大 console.log(Number.MAX_VALUE*2); // Infinity 无穷大 // 6、无穷小 console.log(-Number.MAX_VALUE*2); // -Infinity 无穷小 // 7、非数值 console.log('pink'-100); // NaN // idNaN() 用来判断非数值，并且返回一个值，如果是数字，返回的是false，如果不是数值返回的是true console.log(isNaN(12)); // false console.log(isNaN('str')); // true
-
Boolean:布尔值类型，如true,false ，等价于0和1 默认值 false
var flag=true; var flag1=false; console.log(flag+1); // 2 true参与加法运算当1来看 false参与加法运算当0来看 -
String:字符串类型，如"张三" ，注意js里面，字符串都带引号 默认值 “”
可以是引号中的任意文本，其语法是单引号和双引号
HTML中使用的是双引号，所以为了区别js中使用单引号
引号嵌套规则是外单内双，外双内单
- 字符串转义符：\n 换行 \ \ 斜杠\ \ ’ 单引号 \ t tab缩进 \ b 空格 \ " 双引号
案例：
alert('酷热难耐，火辣的太阳底下，我挺拔的身姿，成为了最为独特的风景。\n我审视四周，这里，是我的舞台，我就是天地间的王者。\n这一刻，我豪气冲天，终于大喊一声："收破烂啦~"');
-
字符串长度以及拼接
任何一个数据类型的值拼接一个字符串类型的值最后的结果都是字符串类型的
// 1、获取字符串的长度 var str='my name is andy'; console.log(str.length); // 15 // 2、字符串的拼接 + console.log('沙漠'+'骆驼'); // 字符串的 沙漠骆驼 console.log('zhiyu'+18); // 'zhiyu18' console.log('黄昏'+true); // '黄昏true' console.log('12'+12); // '1212' console.log(12+12); // 24 console.log('zhiyu'+18+'岁'); // 'zhiyu18岁' var age=18; console.log('zhiyu'+age+'岁'); // 'zhiyu18岁'
案例：
// 1、用户输入
var age=prompt('请输入你的年龄');
// 2、程序内部处理
var str='您今年已经'+age+'岁了';
// 3、输出结果
alert(str);
-
Undefined:var a; 声明了变量a，但没有赋值，此时a=undefined 默认值undefined
var variable=undefined; console.log(variable+'pink'); // undefinedpink console.log(variable+1); // NaN undefined和数字相加最后的结果是NaN -
Null:var a=null; 声明了变量a为空值 默认值null
// null值 var space=null; console.log(space+'pink'); // nullpink console.log(space+1); // 1
2.3 获取变量数据类型
2.3.1 typeof检测变量数据类型
// 检测变量数据类型
var num=10;
console.log(typeof num); // number
var str='pink';
console.log(typeof str); // string
var flag=true;
console.log(typeof flag); // boolean
var vari=undefined;
console.log(typeof vari); // undefined
var timer=null;
console.log(typeof timer); // object
// prompt 取过来的值是字符串型
var age=prompt('请输入你的年龄')
console.log(age);
console.log(typeof age); // string
2.3.2 字面量
字面量就是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。
- 数字字面量：8,9,10
- 字符串字面量：‘大数据’,‘大前端’
- 布尔字面量：true,false
2.4 数据类型转换
把一种数据类型的变量转换为另一种数据类型
2.4.1 转换为字符串
-
toString()
-
String()强制转换
-
加号拼接字符串 也称为隐式转换
// 1、把数字型转换为字符串型 变量.toString() var num=10; var str=num.toString(); console.log(typeof str); // string // 2、利用String()强制转换 String(变量) console.log(typeof String(num)); // string // 3、利用字符串拼接转换 console.log(typeof (num+'')); // string
2.4.2 转换为数字型
-
parselnt(String)函数，将string转换为整数数值型
-
parseFloat(string)函数，将string转换为浮点数数值型
-
Number()强制转换函数，将string类型转换为数值型
-
js隐式转换(- * /),利用算术隐式转换为数值型
// 1、parseInt(变量) 将字符串型转换为整数型 var age=prompt('请输入你的年龄'); console.log(typeof parseInt(age)); // number console.log(parseInt('3.14')); // 3 取整 console.log(parseInt('120px')); // 120 会去掉px单位 console.log(parseInt('rem120px')); // NaN // 2、PsrseFloat(变量) 将字符串型转换为浮点数型 console.log(parseFloat('3.14')); // 3.14 console.log(parseFloat('120px')); // 120 会去掉px单位 // 3、Number('变量') 强制转换 console.log(typeof Number('3.14')); // number // 4、隐式转换 console.log(typeof ('12'-0)); // number 12 console.log(typeof ('12'-'10')); // number 2 console.log(typeof ('12'*1)); // number
案例1：输入出生年份，输出你的年龄？
//案例:
var year=prompt('请输入你的出生年份');
var age=2021;
alert('你今年已经'+(age-parseInt(year))+'岁了');
案例2：简单加法器
// 案例2：简单加法器
var num1=prompt('请你输入第一个值：');
var num2=prompt('请你输入第二个值：');
var sum=parseFloat(num1)+parseFloat(num2);
alert('您的结果是：'+sum);
2.4.3 转换为布尔型
-
Boolean()函数，其他类型转换为布尔型
代表空，否定的值会被转换为false，
console.log(Boolean('')); // false console.log(Boolean(0)); // false console.log(Boolean(NaN)); // false console.log(Boolean(null)); // false console.log(Boolean(undefined)); // false console.log('--------------------'); console.log(Boolean('123')); // true console.log(Boolean('你好吗？')); // true
2.5 扩展
2.5.1 解释型语言和编译型语言
- 翻译器：程序语言被翻译成机器语言的过程
- 翻译器翻译的方式有两种，一是编译，另一个是解释，两种方式之间的区别在于翻译的时间点不同
- 编译器在代码执行之前进行编译，生成中间代码文件
- 解释器是在运行时及时解释，并立即执行
2.5.2 标识符 关键字 保留字
- 标识(zhi)符：就是指导开发人员为变量，属性，函数，参数取的名字（不能是关键字和保留字）
- 关键字：是指JS本身已经使用了的字，不能用他们充当变量名，方法名
- 保留字：实际上就是预留的“关键字”，意思是现在虽然不是关键字，但未来可能成为关键字，同样不能使用他们当变量名，方法名
3. JavaScript运算符
3.1 运算符分类
运算符：也称为操作符，用来实现赋值、比较和执行算数运算等功能的符号
3.1.1 算数运算符
- 加(+)、减(-)、乘(*)、除(/)、取余(%)
console.log(1 + 1); // 2
console.log(1 - 1); // 0
console.log(1 * 1); // 1
console.log(1 / 1); // 1
console.log(4 % 2); // 0 取余
console.log(5 % 3); // 2
console.log(0.1 + 0.2) // 0.30000000000000004 浮点数不能直接进行运算，有精度误差
- 表达式：是有数字、运算符、变量等以能求得数值的有意义排列方法所得的组合
- 返回值：表达式最终都会有一个结果，返回给我们，使之成为返回值
3.1.2 递增与递减运算符
- 前置递增(递减)：将++或–放在变量前面 先自加(减)1，后返回值
- 后置递增(递减)：将++或–放在变量后面 先返回原值，后自加(减)1
- 必须与变量配合使用
// 前置递增运算符
var age=10;
console.log(++age); // ++age --> age=age+1 11
var p=10;
console.log(++p + 10); // 先自加1，在返回值 21
// // 前置递减
console.log(--age); // --age --> age=age-1 11-1=10
// 后置递增符
var num=10;
num++; // num=num+1
console.log(num); // 11
// 如果前置递增与后置递增单独使用，效果是一样的
// 先返回原值，后自加1
var age=10;
console.log(age++ + 10); // 20
console.log(age); // 11
案例：
// 案例
var a=10;
++a; // ++a = 11 a=11
var b = ++a + 2; // a=12 ++a = 12
console.log(b); // b=14
var c=10;
c++; // c++=11 c=11
var d = c++ + 2; // c++ = 11 c=12
console.log(d); // 13
var e=10;
var f = e++ + ++e; // e++ = 10 e=11 e=12 ++e = 12
console.log(f); // 22
// 后置自增，先表达式返回原值，后面变量在自加1
// 前置自增，先变量自加1，后面表达式运算
3.1.3 比较运算符
< > = >= <= == !=(不等于) = = =(全等于，要求数值和类型完全一样) ! = =
== 有默认转换数字类型，会把字符串型的数据转换为数字型
3.1.3 逻辑运算符
逻辑运算符用来进行布尔值运算的运算符，其返回值也是布尔值，经常用于多个条件的判断
-
&& 逻辑与 and 一假具假
-
|| 逻辑或 or 一真具真
-
！ 逻辑非 not 取反
console.log(3>5 && 3>2) // false
console.log(3>5 || 3>2); // true
console.log(!(3>2)); // false
-
逻辑中断逻辑与
-
逻辑中断(短路运算)：当有多个表达式时，左边的表达式值可以确定结果时，就不在继续运算右边的表达式的值
-
逻辑与：
-
语法：表达式1 && 表达式2
-
如果表达式1为真，则返回表达式2；如果表达式1为假，则返回表达式1
console.log(123 && 456); // 456 除了0之外所有的数字都是真的 console.log(0 && 789); // 0 // 如果为空的或者否定的为假，其余的都为真 0 '' null undefined NaN
-
-
逻辑或
-
语法：表达式1 || 表达式2
-
如果表达式1为真，则返回表达式1；如果表达式1为假，则返回表达式2
console.log(123 || 456); // 123 console.log(0 || 789); // 789 var num=0; console.log(123 || num++); // num++ 没有运算 console.log(num); // 0
-
-
3.1.4 赋值运算符
- = 直接赋值
- += ，-= 加减一个数后再赋值
- *=，/=，%= 乘除取余后再赋值
var num=10;
console.log(num+=2); // 12 num=12
console.log(num-=2); // 10 num=10
console.log(num*=2); // 20 num=20
console.log(num/=2); // 10 num=10
console.log(num%=3); // 1 num=1
3.2 运算优先级
小括号()>一元运算符(++ – !)>算数运算符(先* / % 后+ -)>关系运算符(> >= < <=)>相等运算符(== != === != =)>逻辑运算符(先&&后||)>赋值运算符(=)>逗号运算符(,)
4. JavaScript流程控制
4.1 流程控制-分支
4.1.1 顺序流程控制
程序会按照代码的先后顺序，依次执行
4.1.2 分支流程控制
由上至下执行代码的过程中，根据不同的条件，执行不同的路径代码，从而得到不同的结果
-
if分支语句
// 1.if的语法结构 /*if(条件表达式){ // 执行语句 }*/ // 2. 执行思路，如果if语句里面的条件表达式结果为真，则执行大括号里面的执行语句，否则跳过执行下面的语句 // 3. 代码体验 if(3>5){ alert('沙漠骆驼'); }三元表达式：条件表达式 ? 表达式1：表达式2
如果条件表达式结果为真，则返回表达式1的值，如果条件表达式结果为假，则返回表达式2的值
// 三元表达式 var num=10; var res=num>5?'是的':'不是的'; console.log(res); // 是的案例：数字补0
// 用户输入数字，如果数字小于10，则在前面补0，如果数字大于10，则不需补 var num=prompt('请你请输入一个0-99的数字：'); var res=num<10?'0'+num:num; console.log(res); -
switch分支语句
针对变量设定的一系列特定的值
// 语法结构 switch 转换、开关 case 小例子或者选项的意思
switch(表达式){ // 表达式 经常为变量
case value1:
执行语句1;
break;
case value2:
执行语句2;
break;
......
default:
执行最后的语句;
}
// 2、switch注意事项
var num=3;
switch(num){
case 1: // num === 1 才能匹配
console.log(1);
break; // 必须写
case 3:
console.log(3);
break;
}
案例：查询水果
var fruit=prompt('请你输入查询的水果:');
switch(fruit){
case '苹果':
alert('苹果的价格是3.5/斤');
break;
case '榴莲':
alert('榴莲的价格是35/斤');
break;
default:
alert('没有此水果');
}
- if与switch的区别
- 一般情况下，两者可相互替换
- switch比较适合case比较确定的情况，而if…else常用于范围判断(大于，等于某个范围)
- switch语句进行条件判断后直接执行到程序的条件语句，效率更高，而if…else语句有几种条件，就得判断多少次。
- 当分支较少时，使用if…else语句的执行效率比switch语句高
- 当分支比较多，switch语句的执行效率比较高，而且结构更清晰
4.2 流程控制-循环
循环目的：可以重复执行某些代码。被重复执行的语句叫做循环体能否继续执行，取决于循环的终止条件
-
for循环
// 案例1： var sum=0; var average=0; for(var i=1;i<=100;i++){ sum+=i; } // 求1-100之间所有整数的累加和 console.log(sum); // 5050 // 求1-100之间所有整数的平均值 console.log(sum/100); // 50.5 // 求1-100之间所有偶数和奇数的和 var even=0; // 偶数 var odd=0; // 奇数 for(var i=1;i<=100;i++){ if(i%2==0){ even+=i; }else{ odd+=i; } } console.log(even,odd); // 2550 2500 // 求1-100之间所有能被3整除的数字的和 var sum3=0; for(i=1;i<=100;i++){ if(i%3==0){ sum3+=i; } } console.log(sum3); // 1683 // 案例2：求学生成绩 prompt输入的数据是字符串型的 var num=prompt('请输入班级总人数:'); var sum=0; // 统计总成绩 var score=0; // 保留成绩 var average=0; // 求平均值 for(var i=1;i<=num;i++){ score=prompt('请输入第'+i+'个学生的成绩：'); sum+=parseInt(score); } console.log(sum); average=sum/parseInt(num); console.log(average); // 双重for循环 // 案例1：打印五行五列星星 var str=''; for(var i=1;i<=5;i++){ // 打印五行 for(var j=1;j<=5;j++){ // 打印五列 str=str+'☆'; } // 如果一行打印五个星星 就要另起一行 加 \n str=str+'\n'; } console.log(str); // 案例2：打印n行n列的星星 var rows=prompt('请输入行数：'); var cols=prompt('请输入列数：'); var str=''; for(var i=1;i<=rows;i++){ // 打印n行 for(var j=1;j<=cols;j++){ // 打印n列 str=str+'☆'; } // 如果一行打印五个星星 就要另起一行 加 \n str=str+'\n'; } console.log(str); // 案例3：打印到三角形 var str=''; for(var i=0;i<=10;i++){ for(var j=i;j<10;j++){ str=str+'☆'; } str=str+'\n'; } console.log(str); // 案例：打印九九乘法表 var str=''; for(var i=1;i<=9;i++){ for(var j=1;j<=i;j++){ str+=j+'x'+i+'='+i*j+'\t'; } str=str+'\n'; } console.log(str); -
while循环
// while(条件表达式){ 如果条件表达式为真，则执行循环体，否则退出循环 // 循环体 // } // 案例1：打印人的一生 var i=1; while(i<=100){ console.log('这个人今年'+i+'岁了'); i++; } -
do…while循环
// do{ 先执行一次循环体，在判断条件，如果条件表达式结果为真，则继续执行循环体，否则退出循环
// 循环体;
// }(条件表达式);
// 案例1：打印人的一生
var i=1;
do{
console.log('这个人今年'+i+'岁了');
i++;
}while(i<=100);
// 案例2：弹出一个提示框，你爱我吗？如果输入我爱你，就提示结束，否则，一直询问
do{
var message=prompt('你爱我吗？');
}while(message !== '我爱你');
alert('我也爱你啊');
4.3 continue break
4.3.1 continue 关键字
用于立即跳出本次循环，继续下一次循环(本次循环体中continue之后的代码就会少执行一次)
for(var i=1;i<=5;i++){
if(i==3){
continue; // 只要遇到continue，就退出本次循环，直接跳到i++
}
console.log('我正在吃第'+i+'个包子'); // 吃到了1,2,4,5个包子
}
4.3.2 break 关键字
用于立即跳出整个循环(循环结束)
for(var i=1;i<=5;i++){
if(i==3){
break; // 退出整个循环
}
console.log('我正在吃第'+i+'个包子'); // 只吃到了1,2个包子
}
5. JavaScript命名规范以及语法格式
5.1 标识符命名规范
- 变量、函数的命名必须要有意义
- 变量的名称一般用名词
- 函数的名称一般用动词
5.2 操作符、单行注释规范
- 操作符的左右两侧各保留一个空格
- 单行注释前面注意有空格
6. 案例：简易ATM
<script>
var sum=100; // 开始存入100元钱
do{
var num=prompt('1. 存钱\n2. 取钱\n3. 显示余额\n4. 退出');
num=parseInt(num);
switch(num){
case 1:
var sum1=prompt('请输入存入的金额：');
sum1=parseFloat(sum1);
sum+=sum1;
alert('您现在的余额为: '+sum);
break;
case 2:
var sum2=prompt('请输入取款的金额：');
sum2=parseFloat(sum2);
sum-=sum2;
if(sum>=0){
alert('您现在的余额为: '+sum);
}else{
alert('你的余额不足，请重新输入取款金额');
}
break;
case 3:
alert('您现在的余额为: '+sum);
break;
default:
alert('您正在退出');
break;
}
}while(num!==4);
</script>
602
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
