一、引入
1.计算机语言![](https://i-blog.csdnimg.cn/blog_migrate/2d73c8cfeb5e6682aa98ddb66771c9b5.jpeg)
2.编程语言和标记语言的区别![](https://i-blog.csdnimg.cn/blog_migrate/d8d55044ebed74b3a6c042eef51d99c3.jpeg)
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的过程![](https://i-blog.csdnimg.cn/blog_migrate/d83cc4f41a68a4d8d69e6addc2b49b20.jpeg)
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=1
2.输入并弹出用户名
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=3
4.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'); //undefinedSHY
5.获取变量数据类型(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); //string
6.数据类型转换
(1)转换成字符串类型![](https://i-blog.csdnimg.cn/blog_migrate/b5c4ca5f67c031ee898ea5f0b001d806.jpeg)
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) //12
5)三个案例
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,'奇数