一、引入
1.计算机语言
2.编程语言和标记语言的区别
3.数据存储单位
二.JavaScript简介
1.JS参考文献
W3school：JavaScript 参考手册
MDN：JavaScript 参考 - JavaScript | MDN
现代JavaScript教程：现代 JavaScript 教程
2.JS是什么？
JS的标准命名为ECMAScript，但实际上JavaScript的含义更大一些。JavaScript包括ECMAScript、DOM（文档对象模型，通过JS操作网页）、BOM（浏览器文档对象模型，通过JS操作浏览器）
3.JS的作用
JS的出现主要用于处理网页中的前端验证（在浏览器中检查用户输入的内容是否符合一定的规则，如：用户名的长度，密码的长度，邮箱的格式）
4.浏览器执行JS的过程
5.JS的组成 （jsapi）
ECMA 欧洲计算机联盟
Web APIs 包括 DOM(控制标签，对页面元素进行移动、大小、添加、删除等操作)，BOM(操作浏览器，比如页面弹窗、检测窗口宽度、存储数据到浏览器)
6.JS三种书写位置
（1）行内(内联)样式，写在标签的属性中
点击按钮或超链接时，js代码才会执行
<button onclick="alert('点击后弹出的')">点击按钮</button>
<a href="javascript:alert('点击后弹出的')">点击超链接</a>script可以写到标签内部
<div class="box">
<script>
document.write(`你好`)
</script>
</div>（2）内部(内嵌)样式，写在head的标签script中
<script type="text/javascript">alert("内嵌式的JS")</script>（3）外部(外链)样式，head中连接，一个html文件可以连接多个js文件
<script src="JS.js"></script>注意：不要在标签中写代码，会不生效
7. Unicode编码
可查询Unicode编码对照表
三、注释
1.// 单行注释(ctrl+/)
2./* */ 多行注释(ctrl+shift+/ 或 shift+alt+A)
四、调试
断点调试
把 变量、表达式、条件判断 添加至监视表达式，然后刷新，一步一步执行（注意：点两次执行该语句或到下一句才执行）
第1个图标：跳过下一个函数调用，不进入函数内部；
第2个图标：进入下一个函数调用，会一步一步执行；
五、输入输出语句
1.输入语句
prompt(); 输入框
prompt("请输入你的年龄");2.输出语句
（1）alert(); 弹出警告框
（2）document.write(); 向body中添加一个内容，可在页面中输出
//不仅可以输出文字，还可以解析输出标签
document.wwrite('<h1>名字</h1>')（3）console.log(); 向控制台输出一个内容，返回值是标签字符串
（4）console.dir(); 返回的是键值对(对象)
（5）confirm()； 确认框
注意：
- 结束符为英文分号，可写可不写 ;
- document.write、console.log 输出多个变量用英文逗号隔开，alert 不能一次输出多个变量；
六.变量
1.变量的概念
变量就是一个容器，是内存里的一块空间，用于存储数据（为什么需要变量?）。方便以后使用里面的数据。
2.声明变量
let / var / const 都可以声明变量
- let 不能多次声明同一个变量；var 可以重复声明，第二次声明会覆盖第一次声明的值；
-
let name = '比方' let name = '粉笔' 此写法错误
let / var / const 三者的区别：
- var属于window；let不属于window；
- var可重复定义赋值；let不可重复定义赋值;
- var定义的变量不具有块级作用域(即，在块级外也可使用)；let定义的变量具有块级作用域；
- const定义的变量必须有初始化的值；const定义的变量不允许改值(重新赋值)；把固定不变的值设置为常量；const定义的变量具有块级作用域
var a; let b; const c=123;
3.变量的初始化
声明变量 变量名=变量值； 例：var age=18;
声明的同时赋值称为变量的初始化
4.变量语法扩展
（1）更新变量
一个变量被重新赋值后，它原来的值就会被覆盖，变量值将以最后一次赋的值为准。
（2）同时声明多个变量
只需写一个var，多个变量名之间用英文逗号隔开
var name="旗木卡卡西",sex='女',age="30";5.变量命名规范
JS中可以由自己命名的称为标识符。如，变量名，函数名，属性名
（1）由字母、数字、下划线(-)、美元符号($)组成（注:命名的单词间不能有空格）;
（2）不能以数字开头;
（3）不能是关键字、保留字，（注:在有些浏览器中name是有含义的，所以尽量不用name，可以用myName）;
（4）严格区分大小写。var age和var Age是两个变量;
（5）遵守驼峰命名法。首字母小写，后面单词的首字母大写(小驼峰)，如，myFirstName
6.交换变量案例
1.交换变量
var a=1,b=3;
var t=a; //t为临时变量
var a=b;
var b=t;
console.log(a,b); //a=3,b=12.输入并弹出用户名
var a=prompt("请输入你的名字");
alert("欢迎"+a);七、数据类型
根据数据所占空间不同，分成了不同的数据类型。（充分利用存储空间）
JS是一种弱类型语言，变量的数据类型是可以变化的。
简单类型和复杂类型：
- 简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型；
- 简单类型：string ，number，boolean，undefined，null ；
- 复杂类型：通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date
- 简单类型在存储时变量中存储的是值本身； 引用类型在存储时变量中存储的仅仅是地址；
- 简单类型的数据直接存放在栈中；引用类型在栈里存放的是地址，真正的对象实例存放在堆中
1.number
（1）进制
JS进行浮点运算可能不精确，因为计算机是二进制
（2）特殊值
Number.MAX_VALUE 表示最大数值；
Number.MIN_VALUE 表示大于0的最小值；
Infinity 表示正无穷；
-Infinity 表示负无穷；
NaN 是一个特殊的数字，表示not a number；
（3）isNaN() 用来判断一个变量是否为非数字的类型
2.string
使用表单、prompt 获取过来的数据默认是字符串类型的
（1）引号的使用（内双外单，外单内双）
1）用 '' (单引号) / ""(双引号) / ``(反引号) 包裹的都是字符串
2）在JS中字符串需要使用引号（双引号或单引号都可以，但不要混着用）引起来，不加引号会被认为成变量；
3）引号不能嵌套。双引号里不能放双引号，单引号里不能放单引号（就近原则），但双引号里能放单引号，单引号里能放双引号；
（2）转义符（都是以\开头的）
\” 表示 双引号“
\’ 表示 单引号 ’
\n 表示 换行 注：要放在引号里使用 '\n' 反引号内不用加引号 \n只能console.log中起作用
\t 表示 Tab键
\b 表示 空格
\\ 表示 一个斜杠 \
\\\\ 表示 两个斜杠 \\
（3）检测获取字符串长度（length ）
var s="来庄里吧！";
console.log(s.length); /*length=5*/（4）字符串的拼接
方法一：加号（+）
只要有字符串和其他类型相拼接，最终的结果是字符串类型（拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串）
console.log("河北"+"石家庄"); /* 河北石家庄 */
console.log("SHY"+24); /* SHY24 */
console.log("12"+12); /* 1212 */
console.log("河北"+true); /* 河北true */字符串和变量的拼接（因为变量可以很方便地修改里面的值）
var name="旗木卡卡西",age="25";
console.log('你好，我叫'+name+'，今年'+age+'岁了！')用户输入并反馈给用户
var age=prompt('请输入您的年龄：');
alert('您今年'+age+'岁啦！');方法二：模板字符串（反引号与${}）
- 模板字符串使拼接字符串更简便；
- 用 反引号 包含数据，用 ${变量名} 来使用变量；
let name="旗木卡卡西",age="25";
document.write(`我是${name}，今年${age}了！`)（5） 将字符串转成数组
变量.split('') 括号里遇到什么就隔开，可以用正则，''表示将每个字符都隔开3.boolean
布尔型有两个值：true(真)和false(假)；
布尔型与数字型相加时，true的值为1，false的值为0；
console.log(true+3); //1+3=4
console.log(false+3); //0+3=34.null(空值)和undefined(未定义)
（1）null表示一个为空的对象;
使用typeof检查一个null值时，会返回object；
（2）当声明一个变量，但不赋值时，它的值就是undefined；
使用typeof检查一个undefined时，会返回undefined；
console.log(null+2); //0+2=2
console.log(undefined+3); //NaN
console.log(null+'SHY'); //null+SHY
console.log(undefined+'SHY'); //undefinedSHY5.获取变量数据类型(typeof)
形式：typeof+变量名
注：null值返回的是object；prompt返回的是字符型(string).
var name="旗木卡卡西"; //string
var a=null; //object
var b; //unundefined
document.write(typeof name,a,b);
var age=prompt('请输入您的年龄：');
document.write(typeof age); //string6.数据类型转换
（1）转换成字符串类型
1）方式一 tostring()方法不会影响到原变量，它会将转换的结果返回，但null和undefined这两个值没有tostring()方法，如果调用他们的方法会报错。
| num.toString() | // 数字17转成string类型 let A = (17).toString() // 结果为 17，类型为 string |
| num.toString(进制数) | // 17转16进制 let A = (17).toString(16) // 结果为 11，类型为 string |
2）方式二 调用 string(数据) 函数，并将被转换的数据作为参数传递给函数;使用string（）函数做强制类型转换时，对null和undefined及其它所有类型都起作用（将null转换为”null” 将undefined转换为” undefined”）。
3）方式三 隐式转换的形式：变量+' ' 如，alert(unm+' ');
（2）转换成数值型
1）parseInt()可以将一个以数字开头的字符串中的有效的整数（遇到出数字以外的内容就结束）内容取出来
如：123.45px经ParseInt()转换成123
12a3.45px经ParseInt()转换成12
123px456经ParseInt()转换成123
abc12.35经ParseInt()转换成NaN
true 经ParseInt()转换成 NaN
false 经ParseInt()转换成 NaN
'null' 经ParseInt()转换成 NaN
null 经ParseInt()转换成 0
2）parseFloat()可以获得以数字开头的非纯数字字符串中有效的小数
如：123.456px经ParseInt()转换成123.456
123.456.789px经ParseInt()转换成123.456
3）number()函数
4）隐式转换（- * /）
+数据 +作为正号，其他数据类型可以转为数字类型（input和prompt输入的都是字符串类型）
let A = +prompt('输入工资') // A为数字类型
+的作用：连接符、运算符、正号将字符型12转换成数值型12，再进行运算
console.log('12'-0) //12
console.log('123'-'120') //3
console.log('12'*1) //12
console.log('12'/1) //125）三个案例
1.计算年龄案例
var year=prompt('请输入您的出生年份：');
var nowyear=2021;
var age=nowyear-year; //year为字符串型，这里用的减法，有隐式转换
alert('今年您'+age+'岁啦！');2.简单加法器案例
var num1=prompt('请输入第一个值：');
var num2=prompt('请输入第二个值：');
var sum=Number(num1)+Number(num2);
var minus=num1-num2;
var mul=num1*num2;
var into=num1/num2;
alert('两个值之和为：'+sum);
alert('两个值相减为：'+minus);
alert('两个值相乘为：'+mul);
alert('两个值相除为：'+into);3.依次询问并获取用户的姓名、年龄、性别，并打印用户信息（\n要放在引号里）
var myname=prompt('姓名'),age=prompt('年龄'),sex=prompt('性别');
alert('姓名:'+myname+'\n'+'年龄:'+age+'\n'+'性别:'+sex);（3）转换成布尔型（boolean()函数）
代表空、否定的值（ ' '、0、NaN、null、undefined）会被转换为false
!!'23' 转成布尔值
八、运算符
1.算数运算符(+ - * / %)
注：
(1)浮点数值得最高精度是17位小数，但在进行算数计算时其精确度远远不如整数。所以，不要直接判断两个浮点数是否相等（var a=0.1+0.2；console.log(a==0.3);）
(2)如果对两个字符串进行加法运算，则会做拼串(连接符)。即，任何的值和字符串做加法运算，都会先转换为字符串，然后再和字符串做拼串
1+2+”3”=33
“1”+2+3=123
100-“2”=98
2*“8“=16
2*null=0
// 小数与大数的余数为小数本身
2 % 7 = 2
(10-2) % 12 =8
2 % 7 - 9 / 3 = -1
任何值n取余，值为 0，1，2，... n-1
例：0，1，2，3，4，5，6 与3的余数
0 1 2 0 1 2 0 0-2 2.自增(++)和自减(--)运算符
注：
- 一元运算符包括 正负号、自增自减号；
- 自增和自减运算符必须和变量配合使用，常用于计数。
++a —> a=a+1 a++ —> a=a+1
（1）前置自增(++a) 先自加后返回值
（2）后置自增(a++) 先返回原值后加1
++a,--a (在使用a之前，先使a的值加/减1)
a++,a-- (在使用a之后，使a的值加/减1)
var num1=10; console.log(++num1 +10); /*21*/
var num2=10; console.log(num2++ +10); /*20*/
// 后置自增(减)到了运算符的另一边完成自增(减)
var d=20; var result=d++ + ++d + d ; /*20+22+22=64*/
let a=3; let result=++a + a++ + a++ + ++a /* 4+4+5+7=20 */3.比较运算符
1.==判等号(判断两边的值是否相等)
console.log(18=='18'); /* true */
console.log(1 == 'pink') /* false 值根本不相等 */
2.===全等(两侧的值和数据类型完全一致才可以)
console.log(18==='18') /*false*/
console.log(1 == 'pink') /*false*/
3.！== 不全等(两边数据类型和值，只要有一个不等，就是true)
console.log(18!==18) /*false*/
console.log(18!=='18') /*true,类型不等*/
console.log(25!==18) /*true，值不等*/
4. > < <= >= 不同类型的比较会默认转换成number类型再比较(把字符串型的数据转换成数字型)(1)比较运算符的返回值为true、false
(2)任何值和NaN做任何比较都是false
10<="hello" //false true>false //true NaN===NaN //false
(3)不要做小数运算，会有精度问题
0.1+0.2！=0.3
(0.1*10+0.2*10)/10=0.3 因为整数没有精度问题(4)两个字符串比较：（比较字符对应的ASCII码）
4.逻辑运算符(&& || !)
（1）真假判断
与(&&) 两个都为真，返回值为真(true)；其中一个为假，返回值就为假(false)；
或(||) 其中一个为真，返回值就为真(true)；两个都为假，返回值才为假(false)；
非(!) 取反，真为假，假为真；
（2）短路运算(逻辑中断)
短路运算原理：当有多个表达式(非布尔进行与或运算)时，左边的表达式可以确定结果时(与&&遇假确定结果，或||遇真确定结果)，就不再继续运算右边的表达式的值。
总结：与(&&)返回第一个为false的值；或(||)返回第一个为真的值。
1）逻辑与
语法：表达式1 && 表达式2
如果第一个表达式的值为true，则返回表达式2；如果两个值都为true，则返回后边的；
如果第一个表达式的值为false，则返回表达式1；如果两个值都为false，则返回前边的；
注意：返回的值不是true/false，因为与、或、非没有能力将两侧的值转为true、false，只是判断值为真还是假
console.log(123 && 456); /*456*/
console.log(123 && 456 && 1+2); /*3*/
//左边如果是 0 '' undefin null NaN 则返回自身
console.log(0 && 456); /*0*/
console.log(null && 456); /*null*/
console.log(0 && 456 && 1+2); /*0*/2）逻辑或
语法：表达式1 || 表达式2
如果第一个表达式的值为真，则返回表达式1；
如果第一个表达式的值为假，则返回表达式2.
console.log(123 || 456); /*123*/
console.log(0 || 456 || 1+2); /*456*/
例：
var num=0;
console.log(123 || num++); /*中断运算*/
console.log(num); /*0*/5.赋值运算符
例：num += 3 —> num=num+3
6.运算符优先级
九、流程控制(顺序结构、分支结构、循环结构)
1.顺序流程控制
顺序结构是程序中最简单、最基本的流程控制，程序会按照代码的先后顺序，依次执行。
2.分支流程控制
- 根据不同的条件，执行不同的路径代码(多选一)，从而得到不同的结果。
- 如果条件不是布尔类型，会隐式转换为布尔类型，如，if (a) {alert('监督局')}
（1）if 语句
1.if-else 双分支
if (条件)
{语句1;}
else
{语句2;}
2.if-else if 多分支(检查多重条件，可以处理范围)
if (条件1)
{语句1;}
else if (条件2)
{语句2;}
else if (条件3)
{语句3;}
else
{语句4;}判断是否能进入网吧
var age=+prompt("请输入您的年龄：");
if (age>=18) {
alert('允许进入网吧!');
} else{
alert('抱歉,您还未成年!');
}
判断闰平年（能被4整除且不能整除100的年份为闰年或者能够被400整除的就是闰年）
var year=+prompt("请输入年份：");
if (year%4==0&&year%100!=0||year%400==0) {
alert(`${year}为闰年`);
} else{
alert(`${year}为平年`);
}（2）三元表达式
条件表达式 ？表达式1 ：表达式2；
如果条件表达式为真，则返回表达式1；如果条件表达式为假，则返回表达式2。(简化版的if-else，一般用于赋值，比如最大值比较，将最大值赋给变量)
补0操作，可用于倒计时（小于10的数补零，大于10的数不补零）
方法一：
var num=prompt("请输入一个数字：");
num<10 ? alert('0'+num+' 补零') : alert(num+' 不补零');
方法二
var num=prompt("请输入一个数字：");
var result= num<10 ? '0'+num+' 补零' : num+' 不补零';
alert (result);（3）switch-case
一般用于等值判断，不适合于区间判断
switch (表达式/变量){
case 值1:语句1;
break; //break 跳出
case 值2:语句2;
break;
...
default:
break;
}注：
1）case后面必须是一个整数，或是结果为整数的表达式，但不能包含任何变量
2）若某一条case后没有紧跟的语句，则不用带分号和break
3）表达式/变量的值和case里的值匹配时，得是全等关系(值和数据类型都得相同)
4）如果当前的case里没有break，则不会退出，会继续执行下一个case
5）若没有default，并且和任何case值不匹配时，则跳出switch，什么都不执行
1. 查询水果价格
var fruit=prompt("请输入一种水果：");
switch (fruit){
case '苹果':alert("苹果 0.8/斤"); //水果名称要加引号，因为要全等匹配
break;
case '香蕉':alert("香蕉 1.5/斤");
break;
case '草莓':alert("草莓 2/斤");
break;
default:alert("无此种水果");
break;
}
2. 用户输入2个数字3.循环流程控制
在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句。
循环的目的：重复的执行某些代码。
（1）for循环及双重for循环
for (初始化变量 ; 条件表达式 ; 操作表达式) {循环体}
for (var i=1,j=0 ; i<=10 ; i=i+2) {循环体}
(1)注意是var，不是int
(2)当有多个初始化变量时，要用“,”隔开
(3)for循环的变量(int i)是个局部变量，只在for循环体里有效for循环可以嵌套if语句
for (var i=1;i<=20;i++) {
if (i==1){
console.log('1岁了，出生年！');
}
else if (i==18) {
console.log('18岁，成年了！');
}
else {console.log('今年'+i+'岁了');}
}
1-100的总和、平均值、奇数、偶数、能被3整除的数字的和
var sum=0,odd=0,even=0,result=0;
for (var i=1;i<=100;i++) {
sum+=i; //总和
if (i%2!=0) { //奇数
odd+=i;
}
else {even+=i;} //偶数
if (i%3==0){ //能被3整除的
result+=i;
}
}
document.write('和为：'+sum,'平均数为：'+sum/100,'奇数
最低0.47元/天 解锁文章
228
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
