JavaScript课堂笔记
Posted teayear
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript课堂笔记相关的知识，希望对你有一定的参考价值。
前置任务：
配套视频：https://www.bilibili.com/video/BV15v411K7qe/
第一章：基本语法
第一节：javascript的来源
1.网景公司（Netscape）:
当时就职于Netscape公司的布兰登·[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W4T3LkTk-1672665841084)(assets/bulandeng.gif)] 计划1995年2月发布的LiveScript在浏览器和服务器中使用 ，为了赶在发布日期前完成LiveScript的开发，Netscape与Sun公司成立了一个开发联盟。而此时，Netscape为了搭上媒体热炒Java的顺风车，临时把LiveScript改名为JavaScript，所以从本质上来说JavaScript和Java没什么关系 。
1996年03月 网景公司发表了支持JavaScript的网景导航者2.0。
1996年08月 由于JavaScript作为网页的客户面脚本语言非常成功，微软将之引入了Internet Explorer3.0，取名JScript。
2.ECMAScript
1996年11月 网景公司将JavaScript提交给欧洲计算机制造商协会(ECMA)进行标准化。
1997年06月 ECMA-262的第一个版本被欧洲计算机制造商协会采纳。并将 ECMA-262 标准取名为 ECMAScript。ES6.
3.javascript
JavaScript 和 JScript 与 ECMAScript 相容，但包含超出 ECMAScript 的功能
第二节：为什么要学习javascript
客户端表单验证
页面动态效果
动态改变页面内容
Ajax效果：
第三节：什么是程序
程序一词来自生活，通常指完成某些事务的一种既定方式和过程
在日常生活中，可以将程序看成对一系列动作的执行过程的描述
1、生活中的程序：
西红柿炒鸡蛋：
正确的程序：
1、番茄3个，洗净切块放入盘中待炒------2、取鸡蛋两枚，磕破放于碗中------3、切葱花少许，盐少许一起搅打至混匀起泡------4、取油少许放入炒锅，加热至8成------5、倒入蛋糊，待稍凝固后翻炒并加入番茄------6、翻炒至番茄6成熟再加盐少许，翻匀盛于盘中。
2、计算机中的程序
为了让计算机执行某些操作或解决某个问题而编写的一系列有序指令的集合
3、语言的发展史
人工操作[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OPqios5S-1672665841086)(assets/计算机人工操作.png)]
纸带穿孔[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z0i231Vp-1672665841086)(assets/程序打孔纸带.png)]
汇编语言
汇编语言程序依赖于计算机硬件，其可读性和可移植性都很差[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DBmhJf74-1672665841087)(assets/汇编.png)]
高级语言
1954年，第一个完全脱离机器硬件的高级语言–FORTRAN问世了，60 多年来，共有几百种高级语言出现，有重要意义的有几十种，影响较大、使用较普遍的有FORTRAN、BASIC、Pascal、C、C++、VC、VB、PB、JAVA等。
第四节：JavaScript语言基本结构
-
示例 <html> <head> <title>脚本的基本结构</title> <script type="text/javascript"> var count=0; document.write("京东欢迎您！"); for(i=0;i<5;i++) document.write("<h2>AAA欢迎您！</h2>"); </script> </head> <body> <h1> body部分的内容</h1> </body> </html>
1、javascript三个组成部分：
ECMAScript核心语法
浏览器对象模型（BOM）
文档对象模型（DOM）
2、内存如何存放数据
内存就像旅馆一样，有各种房间类型；房间有名称，变量也有名称；房间有入住的客人，变量中存储某个值。变量是存储数据的一个基本单元。
3、变量的声明和赋值
var count; //告诉计算机要开一个房间，名字叫count
count=9;//让客人9入住到count房间
document.write(count);//在页面上输出count的值
console.log(count);//在控制台输出count的值
注意：var是关键字，表明后面跟的是变量，count是变量名，是可以任意取名的
也可以一次声明多个变量并赋值，中间用逗号间隔开
let money=900,count=5,name='欧阳锋',time;
在JavaScript中要注意大小写是严格区分的：count 和Count是不一样的两个变量;
let声明的是局部变量；var声明的是全局变量，提倡使用let声明变量。
4、变量之间赋值
示例2：A学员的热干面是6.5元/碗，B学员与A学员相同，输出B学员热干面价格
let a=6.5;
let b=a;
document.write("B学员的热干面价格是："+b+"元");
document.write("A学员的热干面价格是："+a+"元");
从这个示例可以看出，当a把自己的值赋值给b时，仅仅是把自己的值复制了一份给了b，自己仍然保留了原来的值。
5、变量命名规则
变量名= “$” 或 “_” 或 英文字母开头 + 英文字母或数字
name,money,img1,$time,_count
如果用两个单词来表示一个变量，单词中间不能有空格，后面一个单词的首字母要大写。
关键字不能用来做变量名：
var, int, for,while, if, do…
6、JavaScript的基本数据类型：
JavaScript提供了5种基本的数据类型：
Number,String,boolean,Null,Undefined
7.类型判断
1.判断某个变量是某种数据类型要用关键词：type of alert(type of name);
最大的问题是判断数组和null等数据类型时，无法获得预期的结果
2.instanceof
用于判断引用类型的继承关系，如：判断Function是否继承于object
最大的问题是不支持基本类型判断
3.Object.prototype.toString.call()
类型判断的最佳实践，使用Object原型上的toString方法，这种方法可以精确的判断各种数据类型。
8. 转义字符
转义字符 \\b 退格字符 \\f 换页符 \\n 换行字符 \\r 回车字符 \\t 制表符 '单引号 "双引号 \\ 反斜线 \\xNN 其中NN是一个十六进制数，表示Latin-1字符集中的编号来表示一个字
第五节：运算符
运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值
运算符可分为以下类别：
算术运算符 ： +、-、 * 、 / 、%、++、- -、-(求反)
比较运算符 ： ==、!=、>、>=、<、<=
逻辑运算符 ： &&、||、！
1、算术运算符
示例3：以下是几个同学一起吃热干面的数据，求每个同学均摊多少钱？
| 品名 | 数量 | 价格 |
|---|---|---|
| 大碗 | 4 | 8 |
| 小碗 | 3 | 6 |
| 小菜 | 2 | 9 |
var bigCount=4,littleCount=3,bigPrice=8,littlePrice=6,avg;
var xiaocai=2,caiPrice=9;
document.write("大碗和小碗的价格相差："+(bigPrice-littlePrice)+")";
avg=(bigCount*bigPrice+littleCount*littlePrice+xiaocai*caiPrice)/7;
document.write("平均每人："+avg+"元");
2、比较运算符
关系运算符是为了比较两个数的大小，两个数据在进行值的比较时，其结果不是成立就是不成立
其中成立为“真”，不成立为“假”。
关系运算的结果仅产生两个值：true表示“真”，false表示“假”。
| 运算符 | 说明 | 示例 |
|---|---|---|
| < | 小于运算符 。 | a<4 |
| <= | 小于等于运算符。 | 3<=5 |
| > | 大于运算符。 | x>y |
| >= | 大于等于运算符。 | x>=0 |
| == | 等于运算符。 | 如a= =b。 |
| != | 不等于运算符。 | y!=1 |
示例4：请比较热干面大碗和小碗的价格
var bigPrice=8,litterPrice=6,result;
result= (bigPrice==litterPrice);
document.write(" (bigPrice==litterPrice)的比较结果是： "+result);
result= (bigPrice != litterPrice);
document.write(" (bigPrice!=litterPrice)的比较结果是： "+ result);
result= (bigPrice > litterPrice);
document.write(" (bigPrice!=litterPrice)比较结果是："+result);
3、逻辑运算符
逻辑运算表示两个数据或表达式之间的逻辑关系是真还是假。
逻辑运算符有三种：逻辑与运算符“&&”、逻辑或运算符“||”、逻辑非运算符“!” 。
示例5：判断学生是否是男的并且满18岁？
var sex="男";
var age=19;
alert(sex=="男"&&age>18);//弹出满足两个条件的结果
alert(sex=="男"||age>18);//弹出满足一个条件的结果
查看下面的结果：
alert((4>3)&&(5>1));
alert((4<3)&&(5>1));
alert((4>3)||(5<1));
alert((4<3)||(5<1));
alert(!(4>3));
alert(!(4<3));
4、自增运算符和自减运算符
自增运算符“++”用于给一个变量加1
自减运算符“–”用于给变量减1，
如a++和++a 运算结果都等价于a=a+1，
而a- -和- -a，都等价于a=a-1。
观察下面自增、自减的结果
var nNum1,nNum2;
nNum1=nNum2 = 5;
alert("num1++="+nNum1++);
alert("++num2="+(++nNum2));
alert( "num1--="+nNum1--);
alert( "--num2="+(--nNum2));
第六节：类型转换
不同的数据之间需要转换后才能正确使用，
示例6：将两个字符串的数字进行加法运算
let a="12";
let b="20";
alert（a+b）；//结果是：1220
结果是两个字符串首尾相连拼接在一起了，所以需要对变量a,b进行类型转换，转换函数有：
parseInt (String) 将字符串转换为整型数字
如: parseInt (“86”)将字符串“86”转换为整型值86
parseFloat(String) 将字符串转换为浮点型数字
如: parseFloat (“34.45”)将字符串“34.45”转换为浮点值34.45
Number(Object) 将任何类型转换为数字
如: Number(“34.45”)==34.45
Number(true)==1
总结：
程序
变量
赋值
基本数据类型
类型转换
运算符
作业：（10分钟）
求几个同学一起聚餐，AA制均摊的钱数。
第二章：分支语句
回顾
javaScript语言有哪些数据类型？
标识符的命名规范？
javaScript语言提供了哪些运算符
自增自减运算符
怎样将字符串转换为数值？
本章内容
了解程序的三种结构
熟悉顺序结构的程序执行过程
能根据问题熟练绘制流程图
熟练使用if语句实现分支的条件判断
熟练使用switch语句进行多重分支判断
第一节：程序流程
1、程序结构
顺序结构
一段程序按照出现的顺序依次执行
分支结构
根据条件判断的结果不同，执行不同的功能
循环结构
重复执行一段代码
第二节：分支结构—if条件
示例1：如果令狐冲的C语言考试成绩大于90分，师父就奖励他一本武功秘笈，否则就去思过崖面壁
var score=88;
if(score>90)
alert("奖励《独孤九剑》");
else
alert("思过崖面壁");
示例2：令狐冲Java成绩大于90分并且音乐成绩大于80分，师父奖励他；或者Java成绩等于100分并且音乐成绩大于70分，师父也可以奖励他；否则思过崖面壁
var java= prompt("请输入令狐冲的Java语言成绩","0"); //令狐冲的java成绩
var music= prompt("请输入令狐冲的音乐成绩","0"); //令狐冲的音乐成绩
if ( (java> 90 && music>80) || (java== 100 && music> 70) )
alert("师父说:不错，给你《独孤九剑》剑谱");
else
alert("思过崖面壁");
当不知道运算符哪个优先级高的时候，多使用小括号( )控制优先级；
课堂练习：
1、如果发烧，就要检测是否得了“新冠”，得了“新冠”就要隔离，否则就回家吃药
2、 两个数a、b，如果a能被b整除或a加b大于1000，则输出a，否则输出b
3、如果你是男的，就该挣钱，否则就该花钱
第二节：使用多重if结构
示例3：对学员的结业考试成绩评测
成绩>=90 ：优秀
成绩>=80 ：良好
成绩>=60 ：中等
成绩<60 ：差
int score = 70; //考试成绩
if ( score >= 90 )
alert("优秀");
else if (score >= 80 )
alert("良好");
else if (score >= 60 )
alert("中等");
else
alert("差");
第三节：switch结构
switch的语法结构：
switch (表达式)
case 常量1:
语句;
break;
case 常量2:
语句;
break;
default:
语句;
示例4：令狐冲参加比武大会
如果获得第一名，将出任武林盟主
如果获得第二名，将出任武当掌门
如果获得第三名，将出任峨嵋掌门
否则，将被逐出师门
var mingCi = 1;
switch (mingCi)
case 1:
alert("出任武林盟主");
break;
case 2:
alert("出任武当掌门");
break;
case 3:
alert("出任峨嵋掌门");
break;
default:
alert("被逐出师门");
注意：每一个条件块中必须有break，否则会将之后所有的case都执行。
示例5：制作一个根据年月返回天数的程序
var year=2015,month=2,num; //要输入的年月和返回的天数
switch(month)
case 1:
case 3:
case 5:
......
num=31; break;
case 4:
case 6:
......
num=30; break;
case 2:
if(year%4==0&&year%100!=0||year%400==0)
num=29;
else num=28;
default:
alert("输入错误！"); break;
alert("该月的天数为： “+num);
练习：使用switch结构对学员的结业考试成绩评测 ，需要对学生成绩进行加工，然后才能用switch结构。
成绩>=90 ：优秀
成绩>=80 ：良好
成绩>=60 ：中等
成绩<60 ：差
总结：
程序的三种结构是什么？
分支中if的结构
switch的结构
switch能判断的类型有哪些？
作业：从输入的年月中判断输入的年月是多少天（10分钟）
第三章：循 环 结 构1
本章目标
理解循环的含义
会使用while循环结构
会使用do-while循环结构
为什么要使用循环
举例说明生活中的循环，
程序中的循环
循环结构的特点：
循环进行的条件
循环执行的任务
第一节：while循环结构
一、语法：
while ( 循环条件 )
循环操作
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dleSvHRE-1672665841089)(assets\\1545030068313.png)]
先判断后循环，和if结构类似，但只要循环条件成立就会继续执行循环，而if判断只执行一次。
二、示例1：
循环输出1000遍“我是最棒的！";
let i = 1;
while(i <= 1000)
document.write("我是最棒的！");
i ++;
三、示例2：
给一个数，判断该数有几位
当这个数某位数除以10为小数的时候，也就是到了该数的最大位
判断条件是每次除10的结果大于1
执行的操作是将该数字除10并记录次数
var i = parseInt(prompt('请输入一个整数'));
var num=0;
while(i >= 1)
i=i/10;
num++;
console.log(num);
四、示例3：
输入一组学生成绩，求平均成绩，每次输入完成后都要提问是否继续输入，如果输入结果为"否"，则停止输入。
判断条件为输入的内容不为“否”
循环的内容为加和输入的成绩
var ans="是";
let i=0,sum=0;
while(ans!="否")
i++;
let score=Number(prompt("请输入第"+i+"个学生的成绩","0"));
sum+=score;
ans=prompt("是否继续输入学生成绩","是");
document.write(i+"个学生的平均成绩为："+sum/i);
while循环注意事项
while语句中的表达式一般是关系表达式或逻辑表达式，只要表达式的值为真（true）即可继续循环。
循环体如包括一个以上的语句，则必须用｛｝括起来，组成复合语句。
应注意循环条件的选择以避免死循环
第二节：do_while循环结构
语法：
do
循环操作
while ( 循环条件 );
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bAdjOWIN-1672665841090)(assets\\1545031292030.png)]
特点：先执行，再判断
示例3：苦练半年，眼看大赛在即，盈盈提议：彩排一次，如果很令人满意，以后就不用彩排了，否则每天都要彩排，直到现场表现让她满意为止！
var pass;
do
document.write("令狐冲跳街舞！\\n");
document.write("令狐冲弹琵琶！\\n");
document.write("令狐冲问盈盈：满意么？");
answer = prompt(“累死我了，盈盈还满意吧”，“不满意”);
while(pass!="满意");
document.write("彩排满意！");
Math类的常用方法
| 方法 | 描述 |
|---|---|
| ceil(x) | 对数进行上舍入，即向上取整。 |
| floor(x) | 对 x 进行下舍入，即向下取整。 |
| round(x) | 四舍五入。 |
| abs() | 返回传入参数的绝对值 |
| pow() | 用于计算一个数的指定幂pow(n,m)n为底数，m为幂 |
| random() | 返回 0 ~ 1 之间的随机数，包含 0 不包含 1。 |
示例：
输出0~100之间的随机数
let num=Math.floor(Math.random()*100);
console.log(num);
示例：猜数游戏
由随机数函数产生0~100之间的随机数，由测试者猜，共有6次机会，每次输出猜数的结果。
let num=Math.floor(Math.random()*100);
console.log(num);
let i=0;
let input;
do
input=parseInt(prompt("请输入你猜的数：",""));
if(input>num)
alert("猜大了");
if(input<num)
alert("猜小了");
i++;
if(i<7)
continue;
else
break;
while(num!=input);
if(i==7)
alert("你好笨啊");
else
alert("恭喜你猜对了");
课堂练习：
1、使用do-while实现：输出摄氏温度与华氏温度的对照表，要求它从摄氏温度0度到250度，每隔20度为一项，对照表中的条目不超过10条。
转换关系：华氏温度 = 摄氏温度 * 9 / 5.0 + 32
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ViDsr0az-1672665841091)(assets\\1545032310515.png)]
2、给一个数使用do-while循环判断它是不是水仙花数（数字每个位置上的数字的立方和等于数字本身：153）
总结：
while和do—while循环都是用来解决循环次数不确定的场合问题。
比较while和do-while
语法不同[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z7wJ7a7A-1672665841091)(assets/1545031787759.png)]
初始情况不满足循环条件时
while循环一次都不会执行
do-while循环不管任何情况都至少执行一次
作业：
猜数游戏，计算学生平均成绩（15分钟）
第四章：循环结构2
本章内容：
学会使用for循环结构
学会在程序中使用break和continue
会使用调试解决简单的程序错误
第一节：for循环
1、语法结构：
for(表达式1 ; 表达式2 ; 表达式3)
循环操作
表达式1：自变量初始化
表达式2：循环条件
表达式3：自变量变化
示例1：循环录入某学员S1的5门课成绩，计算平均分
let sum=0;
for(let i = 0; i < 5; i++) //循环5次录入5门课成绩
score=Number(prompt("请输入5门功课中第" + (i+1) + "门课的成绩： "));
sum += score;
avg = sum / 5; //计算平均分
document.write( "平均分是：" + avg);
示例2：再看从1累加到100
var sum=0;
for(let i=1;i<=100;i++)
sum+=i;
document.write("计算结果是："+sum);
示例3：输入一个数，输出如图所示加法表
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wUQewAc0-1672665841093)(assets\\1545037973389.png)]
思路分析：
1、循环初始化：i = 0；j = 输入值
2、循环条件：i<=输入值
3、循环操作：计算i+j
4、循环变量的改变：i++，j--
let val=parseInt(prompt("请输入一个个位整数","0"))
for( var i = 0, j = val; i<=val; i++, j-- )
document.write(j+"+"+j+”=”+(i+j));
注意：for循环结构中三个表达式都可以省略，但小括号中的两个分号不能省略，其中中间的表达式2如果省略，则表示没有条件，即死循环
2、练习：
求1~100之间不能被3整除的数之和
第二节：break和continue的使用
1、break
在switch中已经使用过break；意思是跳出switch结构，循环里的break也是跳出循环。循环中，break后面无论有多少语句都不再执行，直接跳到循环后面。
示例4：循环录入王重阳5门课的成绩并计算平均分，如果某分数录入为负，停止录入并提示录入错误
var sum=0;
for( var i = 1; i < 6; i++) //循环5次录入5门课成绩
var score=prompt("请输入5门功课中第"+i+"门课的成绩： ",0);
if(score < 0)
alert("录入错误，循环退出");
break; //退出循环
sum = sum + parseFloat(score);
alert("总成绩是："+sum);
alert("王重阳的平均成绩是："+sum/(i-1));
示例5：1~10之间的整数相加，得到累加值大于20的当前数
var sum=0;
for(var i=1;i<=10;i++)
sum=sum+i;
if( sum > 20 )
document.write("当前数是:"+i);
break;
document.write("当前的累加值："+sum);
2、continue
不跳出循环，而是继续执行下一次循环任务，本次循环中continue后面的语句不再执行。
示例6：循环录入Java课的学生成绩，统计分数大于等于 80分的学生比例
1、通过循环，获得分数大于等于80分的学生人数num，初始值为0，每有一个大于80分的学生num++
2、判断：如果成绩<80，不执行num++，直接进入下一次循环
var num=0,score;
for( var i = 1; i < =6; i++)
score=prompt("请输入第"+i+"名学生的成绩： ","0");
if(score < 80)
continue;
num++; //大于等于80分的人数
alert("80分以上的学生所占的比例为："+ num/6*100+”%”);
示例7：利用continue求1~100之间能被3整除的数的和
let sum=0;
for(let i=1;i<101;i++)
if(i%3!=0)
continue;
document.write(i+" ")
sum+=i;
document.write("1~100之间能被3整除的数的和是："+sum);
练习：
1、循环输出1~100之间的非明七暗七，例如：不能有7,14,17,21,27,28
2、循环输出刚刚超过1000的斐波那契数列（1,1,2,3,5,8,13,21,34…）,某一位数是前两位数之和。也叫兔子生崽数列/
3、求1000以内的水仙花数（数字每个位置上的数字的立方和等于数字本身：153）
4、求3位数以上5位数以内的回文数（121,5885）（选做）
第三节：程序调试
如果程序代码中出现错误，可以在浏览器中点击F12——找到控制台，在错误的右边有超链接，点击后就可以直接进入到代码错误的那一行。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jPpPLq4c-1672665841094)(assets\\1545043536062.png)]
如果没有语法错误，只是结果有偏差，可以浏览器中点击F12，找到调试器
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jwDcMiWa-1672665841094)(assets\\1545043233222.png)]
选中要观察的变量——右键——添加监视表达式，就可以在右边的监视表达式中观察该变量的值；
点击跨越箭头图标，或按F10可以让程序向下执行一行，过程中观察变量的变化
总结：
for循环结构比较紧凑，对已知数量的循环操作方便
break和continue的区别是什么？
作业：（15分钟）
循环输出1~100之间的非明七暗七，例如：不能有7,14,17,21,27,28
循环输出刚刚超过1000的斐波那契数列（1,1,2,3,5,8,13,21,34…）,某一位数是前两位数之和。也叫兔子生崽数列
求1000以内的水仙花数（数字每个位置上的数字的立方和等于数字本身：153）
第五章：函数和事件：
第一节：什么是函数
就像一台榨汁机一样你不必去关心它怎么工作的，只需要把水果放入，按下功能键，
1.函数的含义：
函数是一组可以随时随地运行的语句块，可以完成一个具体的功能，并且可以在不同的地方重复调用。函数是 ECMAScript 的核心
2、函数的分类
库函数
是编程环境提供给用户的已经定义好的函数，这些函数不需要用户编写代码，如：alert() prompt() write() open()等
自定义函数
是由用户按需要自己编写的函数，
对于用户自定义函数，不仅要在程序中定义函数体，而且在主调函数或其他函数中，还必须对该函数进行调用。
3、自定义函数：
语法：
创建函数：
function 函数名(参数) 函数体
使用函数：
函数调用一般和表单元素的事件一起使用，调用格式为： 事件名＝“函数名” ;
示例：
在一个文本框中填入一个人的姓名，点击按钮后弹出提示框向这个人问好
<input type=“text” id=“username”>
<input type="button" value="显示" οnclick="showHello( )">
<script language=“javascript”>
function showHello( )
var username=document.getElementById("username").value ; //getElementById(id)是按照id找到指定的文本框
alert("你好"+username);//alert为警告框
</script>
示例2：编写如下图所示，具有能对两个操作数进行加、减、乘、除运算的简易计算器。
function calPlus()
var n1=document.getElementById("num1").value;
var n2=document.getElementById("num2").value;
document.getElementById("result").value=parseInt(n1)+parseInt(n2);
<input type="button" value="+" οnclick="calPlus()">
定义有参函数
4个按钮调用的函数的代码很类似，怎么优化代码？
<script language="javascript" >
function compute(op)
var num1,num2;
num1=parseFloat(document.myform.txtNum1.value);
num2=parseFloat(document.myform.txtNum2.value);
var result=0;
if (op=="+") result=num1+num2 ;
if (op=="-") result=num1- num2 ;
if (op=="*") result=num1* num2 ;
if (op=="/" && num2!=0) result=num1/ num2 ;
document.getelementById("txtResult").value=result ;
</script>
......
<input type="button" value="+" οnclick="calPlus('+')">
<input type="button" value="+" οnclick="calPlus('-')">
<input type="button" value="+" οnclick="calPlus('*')">
<input type="button" value="+" οnclick="calPlus('/')">
第二节：事件概念
当文档、浏览器、元素或与之相关的对象发生某些事情时，web浏览器就会产生事件（event）。例如，浏览器加载完文档，鼠标指针移动到超链接上面、鼠标点击按钮、敲击键盘时web浏览器都会产生事件，当这些事件发生时要进行相应的处理就可以注册当这些事件发生时调用的函数。
事件类型(event.type)：就是事件名称。例如：mousemove，鼠标移动；keydown，按下 键盘的某个键；click，鼠标单击等。
事件目标(event.target)：是发生的事件或与之相关的对象，一般我们讲事件时，必须同时指明类型和目标。例如：文本框的keydown，button的click，window的load等；window，Document，Element对象都是最常见的事件目标。
当事件发生时，可以注册一个函数来响应这个事件，这个函数就是对这个事件发生要完成的任务。
获取事件对象的两种方式：
1）通过window对象的属性event获得，这一般是IE浏览器的方式
2）通过事件函数的第一个参数获得，除IE以外的其它浏览器的方式
但现在的浏览器兼容性都比较强了，两种方式大部分情况下都能通用。
1、点击事件
这是最常见的事件，在页面任何地方都可以发生单击事件
示例1：事件源
测试你点击了哪个按钮:event.srcElement或event.target
<input type="button" value="提交"/>
<input type="button" value="充值"/>
<input type="button" value="删除"/>
<input type="button" value="登录"/>
<script>
function showEventSrc(e)
e=e||window.event;
alert(e.srcElement.value);
document.οnclick=showEventSrc;
</script>
2、键盘事件
keydown事件： 键盘按一下事件（如果按着不放会连续触发此事件）
keypress事件：键盘按一下事件（如果按着不放会连续触发此事件）
如果两个事件都给了，那么当绑定元素聚焦后按一下键盘，两个方法都会触发
如果按着不放，那么这两个事件会连续不断的触发keydown -> keypress
如果按下按的键是Ctrl、Alt、Shift和Meta等，那么keypress不会被触发，只有keydown会不断的触发
keyup事件：键盘松开事件
如果用户一直不松开键盘，键盘事件就会按照这样的顺序连续触发：keydown -> keypress -> keydown-> keypress -> … （松开键盘后）-> keyup。
获取当前按下的按键值
基本演示
当用户在按下键盘的过程中（keydown事件和keyup事件）可以通过事件对象的keyCode属性获取当前键盘的值，返回的值是一个数字。可以根据获取的数字做出判断来完成特定的事件函数。
键盘各键对应的数字值
示例2:获取键盘的ASCII码
event.keyCode
<script language="javascript">
function showKeyCode(e)
var ev=e||window.event;
var code=ev.keyCode||ev.which; //获得键盘的ASCII码
document.getElementById("txt").value=code;
document.οnkeydοwn=showKeyCode;
</script>
示例：用键盘控制人物在页面游走
<img src="4.gif" id="img" style="left:0px;top:0px;position:absolute;">
<script>
var img = document.getElementById('img');
var x = 0;
var y = 0;
document.onkeydown = move;
function move(e)
e=e||window.event;
var k = e.keyCode;
switch(k)
case 37: x = x - 5; break;
case 38: y = y - 5; break;
case 39: x = x + 5; break;
case 40: y = y + 5; break;
img.style.left = x + 'px';
img.style.top = y + 'px';
</script>
这里需要注意，在给img.style.left赋值时，一定要加上像素单位“px”
总结：
在JavaScript中，如何定义一个函数？
怎样给函数添加参数？
常用的事件有哪些？
常用的事件属性有哪些？
怎样获得键盘的ASCII码？
作业
1、计算器；2、键盘控制图片移动（15分钟）
第六章：BOM编程
内容回顾
你所知道的事件有哪些
怎样找到页面中指定的元素
本章目标
理解浏览器对象模型
熟练掌握window对象的常用属性和方法
第一节：BOM对象
浏览器对象模型（BOM）以 window 对象为依托，表示浏览器窗口以及页面可见区域。同时， window 对象还是 ECMAScript 中的 Global 对象，因而所有全局变量和函数都是它的属性，且所有原生的构造 函数及其他函数也都存在于它的命名空间下
1、window对象常用属性
| 名称 | 描述 |
|---|---|
| history | 包含了用户已浏览的 URL 的信息 |
| location | 包含关于当前 URL 的信息 |
| document | 代表给定浏览器窗口中的 HTML 文档 |
| event | 代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状态 |
示例1：location和history
分别定义4个页面，代码基本相同，每个页面中下拉框中默认选中的就是当前页面的地址选项
<h1>4</h1>
<select id="loc" onchange="forward()">
<option value="history1.html">history1</option>
<option value="history2.html">history2</option>
<option value="history3.html">history3</option>
<option value="history4.html" selected="true">history4</option>
</select>
a <a href="javascript:history.go(1)">前进</a>
a <a href="javascript:history.go(-1)">后退</a><!--使用这种方式调用js函数-->
<hr >
<img src="img/girls/zly4.png" >
<script type="text/javascript" src="js/myjs.js"></script>
另外定义一个js文件，使用<script type="text/javascript" src="js/myjs.js"></script>引入
function forward()
let loc=document.getElementById("loc");
console.log(loc.value);
window.location=loc.value; //使用location来重新设定访问地址信息
2、window常用函数
| 名称 | 描述 |
|---|---|
| alert | 显示自定义消息的对话框 |
| confirm | 显示确认对话框 |
| prompt | 显示输入对话框 |
| setTimeout | 经过指定毫秒值后计算表达式，并返回该事件对象 |
| setInterval | 每过一定时间间隔调用一次指定函数 |
| close | 关闭当前浏览器窗口 |
示例2：确认对话框
<input type="button" value="测试" οnclick="test()">
<script>
function test()
var bool=confirm("比豹子跑得快么");
if(bool)
alert("你比禽兽还禽兽");
else
alert("你禽兽不如");
</script>
示例3：动画播放
<input type="button" value="测试" οnclick="show()">
<img src="eat/eat_0.jpg" id="img">
<script>
let i=0;
function show()
let img=document.getElementById("img");
img.src="eat/eat_"+(i++)+".jpg";
if(i>39)
i=0;
clearTimeout(exe);
let exe=setTimeout("show()",80);//指定的时间之后只执行一次函数
//var ext=setInterval("show()",100);//每隔指定的时间执行一次函数
</script>
示例4：倒计时
<input type="button" value="测试" οnclick="showTime()">
剩余时间：<h1 id="show"></h1>
<script>
let time=3;
let residue=time*60*60;
function showTime()
let hour=parseInt(residue/60/60);
let minute=parseInt((residue-(hour*60*60))/60);
let second=residue%60;
residue--;
if(residue<=0)
clearTimeout(exe);
document.getElementById("show").innerHTML=hour+"小时 "+minute+"分钟 "+second+"秒";
let exe=setTimeout("showTime()",100);
</script>
示例5：鼠标事件，让图片移动到鼠标点击的位置（扩展）
注意要让图片绝对定位
鼠标可视区域坐标：
e.clientX , e.clientY
图片在父容器的位置：
img.offsetLeft , img。offsetTop
let mx,my,imgx,imgy,duty;
function startmove(e)
clearInterval(duty);
mx=e.clientX;//获得鼠标点击的坐标位置
my=e.clientY;
duty=setInterval("move()",5);
show();//启动吃鸡动画
let i=0;
function show()
let img=document.getElementById("img");
img.src="imgs/eat/eat_"+(i++)+".jpg";
if(i>39)
i=0;
clearTimeout(exe);
let exe=setTimeout("show()",80);//指定的时间之后只执行一次函数
function move()
let img=document.getElementById("img");
imgx=img.offsetLeft;//获得图片在父容器中的坐标位置
imgy=img.offsetTop;
if(imgx<mx)imgx++
if(imgx>mx)imgx--
if(imgy<my)imgy++
if(imgy>my)imgy--
img.style.left=imgx+"px";
img.style.top=imgy+"px";
if(mx==imgx&&my==imgy)
clearInterval(duty);//当二者坐标重合后停止移动任务
document.οnclick=startmove;
</script>
<img id="img" src="imgs/eat/eat_1.jpg" width="200px" style="position:absolute;left:200px;top:150px">
总结：
window的属性：
window的函数：
作业：控制文本框只能输入数字、小数点、并能删除内容；使用setTimeout或setInterval实现动画。（15分钟）
第七章：数组对象及其应用
内容回顾
event.srcElement是什么
confirm()的返回值是什么？
每隔一定时间重复执行某个任务的函数是？
本章内容
数组的概念
一维数组的定义和遍历
一维数组的应用
第一节：创建和使用数组
一、 什么是数组
数组是用于储存多个相同类型数据的集合。
二、 为什么要使用数组
在许多场合，使用数组可以缩短和简化程序，因为可以利用索引值设计一个循环，高效处理多种情况
例如：一次Java内部测试结束后，老师给令狐冲分配了一项任务，计算全班（60人）的平均分，这样就需要有60个成绩变量，声明和使用起来太麻烦，使用数组就简单的多。
生活案例：快递柜
类比储物柜：我们可以把数据集体存放
数组是一个变量，存储一组数据
创建数组：
Array是JavaScript的内置对象，创建数组有以下几种方式：
var array=new Array(); //创建一个空数组
var array=new Array(3);//创建有3个空间的数组
var array=new Array(10,30,25);//创建已经放置了三个数的数组
var array=['令狐冲',23,new Date()];//用直接赋值的方式创建数组
访问数组元素
array[0]=9;
array[1]=3;
array.push("王重阳");
document.write(array[2]);
遍历数组：
数组的重要属性：length
示例1：循环输出数组中每一个元素
let array=[1,2,3,4,5,6,7,8,9];
for(let i=0;i<array.length;i++)
document.write(array[i]+" ");
示例2：求一组学生成绩的平均成绩
let scores=[85,89,65,69,90,88,52,78,66,100,87,55,98,99,88];
let sum=0;
for(let i=0;i<scores.length;i++)
sum+=scores[i];
alert("这组学生的平均成绩是："+sum/scores.length);
示例3：求一组成绩中的最大值
打擂台的思路，让数组中的第一个元素先上到擂台上，用之后的每一个元素跟擂台上的元素进行比较，如果比擂台上的元素大，就将后来的元素放到擂台上。
<input type="button" value="测试" οnclick="showMax()"><br>
最高成绩：<input type="text" id="max">
<script>
function showMax()
let scores=[56,77,98,77,88,56,84];
let max=scores[0];//将第一个值放到擂台上
for(let i=1;i<scores.length;i++)
if(scores[i]>max)//将每一个后面的元素和擂主比较
max=scores[i];
document.getElementById("max").value=max;
</script>
课堂练习：继续求该组成绩的最低成绩和平均成绩
示例4：将上述示例改为成绩是由6个文本框输入的成绩
成绩1：<input type="text" name="score"><br>
成绩2：<input type="text" name="score"><br>
成绩3：<input type="text" name="score"><br>
成绩4：<input type="text" name="score"><br>
成绩5：<input type="text" name="score"><br>
成绩6：<input type="text" name="score"><br>
<input type="button" value="打擂台" οnclick="showMax()"><br>
最高成绩：<input type="text" id="max">
<script>
function showMax() //计算成绩最大值
var inputScores=document.getElementsByName("score");
let scores=[];
for(let i=0;i<inputScores.length;i++)
scores.push(Number(inputScores[i].value));
//先将文本框中的成绩转入到一个成绩数组中
var max=scores[0];//将第一个值放到擂台上
for(var i=1;i<scores.length;i++)
if(max<scores[i])//将每一个后面的元素和擂主比较
max=scores[i];
document.getElementById("max").value=max;
//将最后结果赋值给文本框
;
</script>
第二种：
function showMax()
let inputs=document.getElementsByName("score");
let max=Number(inputs[0].value);
for(let i=1;i<inputs.length;i++)
if(Number(inputs[i].value)>max)
max=Number(inputs[i].value);
document.getElementById("max").value=max;
第二节：查找、插入、删除数组
1、数组查找
示例5：查找学生张无忌的成绩在成绩数组的位置
<input type="button" value="查成绩" οnclick="showIndex()"><br>
<script>
function showIndex() //计算成绩最大值
var arr=[68,75,60,95,55];
var i,index=-1,score; //此处将index标注一个数组中不可能的位置(<0)
var score=prompt("请输入查询的成绩：","");
score=Number(score);
for(i=0;i<arr.length;i++) /*查找该数需要放的位置*/
if(score == arr[i])
index=i;//跳出循环时i的值就是该成绩的位置
break;
if(index >= 0)
alert("查找到成绩: "+score+"在数组中的位置为第"+(i+1)+"个元素。");
else
alert("很遗憾没有查询到你要找的成绩。");
;
</script>
抽取方法：
function indexOf(arr,sc)
let index=-1;
for(i=0;i<arr.length;i++)
if(arr[i]==sc)
index=i;
break;
return index;
function findIndex()
let scores=[88,67,89,90,94,76,65];
let sc=Number(prompt("请输入要查找的成绩：","0"));
alert(indexOf(scores,sc));
示例6：删除数组中指定的元素—令狐冲被逐出师门，将他的成绩删除
思路：找到要删除的元素的位置，然后将后面的元素依次前移：arr[i]=arr[i+1],直到数组的最后一个元素，最后将数组的length减一。
<input type="button" value="数组删除" οnclick="delete()"><br>
<script>
function indexOf(arr,sc)
let index=-1;
for(i=0;i<arr.length;i++)
if(arr[i]==sc)
index=i;
break;
return index;
function delete()
let scores=[88,67,89,90,94,76,65];
let sc=Number(prompt("请输入要删除的成绩：","0"));
let index=indexOf(scores,sc);
if(index==-1)
alert("没有找到要删除的成绩");
else
for(let i=index;i<scores.length-1;i++)
scores[i]=scores[i+1];
scores.pop();
console.log("scores.length=",scores.length);
console.log(scores);
</script>以上是关于JavaScript课堂笔记的主要内容，如果未能解决你的问题，请参考以下文章