var num1=prompt('请输入第一个值');
var num2=prompt('请输入第二个值');
var result=num1+num2;
alert('您的结果是'+result);
一、
建立网页特效，实现网页动态应用，脚本语言，嵌入页面
JAVASCRIPT
组成：
1.ECMAScript：核心，主要规定js基本语法
2.DOM：文档对象模型,用户可以根据dom接口控制页面中的元素
3.BOM：浏览器对象模型，独立于内容，可以直接和浏览器交互的对象结构
引入
1.行内式：写在标签属性中（单引号）
<input type='button' value='tbh' onclick="alert('qxj')">
2.内嵌式：通过<script>标签嵌入页面
<script>
alert('秋香姐');
</script>
3.外部连接式：(双标签)
a.创建独立的js文件
b.在页面中使用<script src="js文件名"></script>(结构和行为相分离）
document：文档对象，一个页面是一个document，通过该对象获得任何一个元素
1.通过id属性获取标签：getElementTbyid(id属性值)
2.变量：在程序运行过程中值会变化
var 变量名
画布：页面中用于绘图的工具
a.创建画布<canvas id="画布名称" width="宽度" height="高度"><canvas>
b.获取画布
var canvas =document.getElementById('画布名称')
c.准备画笔
var pen/context =画布名称.getContext('2d')
画一条直线
a.设置起始点context.moveTo（x，y）
设置线条宽度context.linewidth=''
b.设置端点：context.lineTo（x，y）
设置线条样式context.strokeStyle='颜色值'
c.描边:
context.stroke()
重置路径：beginPath()
关闭路径：clothpath（）
填充：context.fill()
绘制圆
arc（x,y,r,开始角，结束角，方向 x、y表示圆心在坐标轴中的位置，r表示半径）
js的开发工具
1.visual studio code（vscode)
2.websorm
javascript语法
语法规则：严格区分大小写，对空格换行缩进不敏感，一条语句可以分多行写，一条语句结束可以用分号结束或不用，
注释符号：
单行注释：以//开始，到所在行结束（ctrl+/）
多行注释：以/*开始，到*/结束 快捷键shift alt加a
输入输出语句(浏览器)：实现网页和用户的交互
1.输入语句
prompt（'info'）弹出输入框，用户可以通过输入框输入内容
2.输出语句
alert('msg') 弹出警示框 输出展示给用户的 console控制台输出，给程序员测试用的console.log('内容')
变量:内存中的一块存储区域，运行过程中值会发生改变的量
使用
1.声明变量：var 变量名;（age）2.变量赋值：age=10;
3.声明同时赋值 var age='10';（变量的初始化）
consloe.log(age);
var age='30';
var myname='旗木卡卡西'；
var address='火影村'；
var email='kakaxi@itcast.cn';
var gz='2000';
console.log(age)
console.log(myname)
console.log(address)
console.log(email)
console.log(gz)<script>
var myname=prompt('请输入您的名字'）;
alert(myname);
</script>变量的语法扩展
1.更新变量（后面的会覆盖前面的）
2.声明多个变量（用逗号隔开）
3.声明变量特殊情况（不赋值undefined，不声明不赋值报错，不声明）
变量的命名规则：
1.由字母数字下划线美元符号组成
2.不能以数字开头
3.严格区分大小写
4.不能是关键字document保留字var for while
5*.建议使用驼峰命名法：首字母小写，后面单词首字母大写 myFirstName
6.变量最好选择有意义的单词
交换两个变量的值（逻辑思路）
temp 临时变量
青苹果（apple1）红苹果（apple2）
//交换两个变量的值
var temp;
var apple1='青苹果';
var apple2='红平果';
temp=apple1;
apple1=apple2;
apple2=temp;
console.log(apple1);
console.log(apple2);
变量的数据类型
变量有名字和数据类型，数据类型决定了如何既那个代表这些值的位存储到计算机的内存中
强类型语言：c/c++ java 在声明变量时必须指定变量数据类型
弱类型语言：javascrip python 在声明变量时不用指定变量数据类型，在运行过程中会被自动确定，由等号右边变量的值的数据类型来判断。
var age=10；//这是一个数字型
var str='是的' //这是一个字符串
基本数据类型
boolean：布尔型/逻辑性 string：字符串（用单引号或双引号括起来的字符序列）
number：数字型（包括整数和小数）null：空值型 null和空值相加为原来的数字
undefined：未定义型
unfined和字符串拼接，形成新的字符串；和数字型拼接，显示为NaN
复合数据类型：object（对象）
数字型常用的数制
二进制：由0和1组成的数字序列 八进制：以0开头，0-7组成的数字序列，逢8进1
十六进制：以0x开头，由0-9和a-f组成的数字序列 十进制
数字型取值范围（最大值和最小值）
最大值：Number.MAX-VALUE 1.797693134862315e+308
最小值;Number.MIN-VALUE 5e-324
特殊的数字型
var t=123
var s='student'
console.log（isNaN(t))
console.log(isNaN(s））NaN:Not a Number
isNaN（x）：判断变量是否是数字类型，是数字返回false非数字返回true
字符串类型String：由单引号或双引号括起来的字符序列，外单内双，推荐单引号
单双引号不能交叉
var str='姓名"刘备"'
console.log(str)转义字符：以\开头，后跟一个字符，代表某个特殊含义
| \n | 换行 |
| \t Tab符号 | tab缩进 |
| \b | 空格 |
| \x(\u) | 十六进制数 \x61 |
| \\ | 表示一个反斜杠 |
字符串长度：字符串变量默认含有length属性，代表字符串长度（有效字符个数）
访问字符串中某个字符：字符串变量名[index],index取值是从0开始到字符串长度减一
console.log（str[0])
console.log(str[str.length-1])字符串的拼接：字符串+拼接 成为一个新的字符串，数值相加，字符相连
var age = prompt('请输入年龄')
console.log（'您今年'+age+'岁'）var age=prompt('请输入您的年龄');
var str='您今年已经'+age+'岁了';
alert('str');布尔型Boolean：当布尔型与数字相加时，参与加法运算，true转为1.false转为0
数据类型的检测：typeof prompt取过来的值是字符型
console.log(typeof 12)
console.log(typeof null)数据类型的转换
将其他数据类型转化为字符串：
1.加法连接符：+''(隐式转换) 2.通过toString（）函数转化 3.通过string类转化
var num=10;
var s1=num.toString();
console.log(String(num));
console.log(num+'');转化为数字型的几种方式
parseInt（string）将字符串转化为整数，或对数字取整/去单位
通过parseFloat（变量）将字符串转化为浮点型数据（小数）
通过number（）将字符串转化为数字型 通过算数进行隐式转换
隐式转换：通过算数运算的- * / 隐式转换
var num1=prompt('请输入第一个值');
var num2=prompt('请输入第二个值');
var result=num1+num2;
alert('您的结果是'+result);var year=prompt('请输入您的出生年份');
//用户输入：弹出输入框让用户输入出生年份
var age=2022-year;
//程序内部处理：把用户输入的值用变量保存起来，用今年的年份减去变量值，结果是现在的年龄
//取过来的year是字符串，但这里用减法隐式转换
alert('您今年已经'+age+'岁了');
//弹出警示框，输出结果
<script>
// 定义函数
function cal(){
// 1.获取用户输入的单价和数量
var p=document.getElementById('price').value
var c=document.getElementById('count').value
// 2.将单价和数量转化为数字型
var p1=parseFloat(p)
var c1=parseFloat(c)
// 3.计算总价
var t=p1*c1
// 将t的值放入'预计总价'的文本框中
document.getElementById('total').value=t
}
</script>转化为布尔型：boolean(变量)把空值、否定值转换为false，如空字符串''、0、NaN、null和undefined
其余转化为true
运算符
也称为操作符，用于实现赋值，比较，和执行算术运算等功能的符号
| 算术运算符 |
| 递增和递减运算符 |
| 比较运算符 |
| 逻辑运算符 |
| 赋值运算符 |
算术运算符
+ - * / %取余 浮点数运算会有问题（运算和比较）
注意事项：优先级：运算遵循先乘除后加减，有括号先算括号；
模(取余数)运算（%）：运算结果符号取决于%左边数据
<script>
var t=11
console.log(t%2)
</script>+、-既可以作为双目运算符（表示加减），也可以作为单目运算符（表示正号和负号，优先级高于双目运算符）
表达式，都会有一个返回值
表达式：由数字、运算符、变量等能求得数值的有意义排列方法所得到的组合（式子）
返回值=表达式计算结果；
递增和递减运算符
给数字变量增加或减去1 递增++ 递减-- 必须配合变量使用
自增（++)：运算对象自己给自己加1（后缀表达式）
a++后缀表达式 ++a前缀表达式 作为独立语句，前缀和后缀没有区别
混合运算表达式中，后缀先使用再自加，前缀先自加再使用
var a=5,b=6,c
c=a++*b
//后缀是先使用再自加
console.log('a',a)
console.log('c',c)
自减（--）后缀表达式，运算对象给自己减1，先使用后自减
比较（关系）运算符
对两个数据进行比较时使用的运算符 ，返回一个布尔值
1.运算结果：true false
2.运算符：< > ==（只比较值不比较类型） ===全等（先比较类型再比较值） !==全不等于（先比较类型再比较值） !=（只比较值，不比较类型）
逻辑运算符
| 逻辑运算符 | 说明 | 案例 |
| && | 逻辑与and | true&&false |
| || | 逻辑或or | true||false |
| ！ | 逻辑非not | ！true |
1.运算结果：是逻辑值 true false
2.逻辑与(&&) 表达式1&&表达式2 当两个表达式都为真结果为真 与运算的短路现象：
var a=5,b=15,c,d
var flag=false
c=(a!=5)&&(flag=(b%3===0))
//逻辑与运算，但表达式1为假时，不再运算表达式2
console.log('c=',c)
console.log('flag=',flag)
逻辑或运算：|| 两个表达式中有一个为真，结果为真
var a=5,b=15,c
c=(a=5)||(b%3===0)
console.log('c=',c)var a=5,b=15,c
var flag=false
c=(a>=5)||(flag=(b%3===0))
//或运算表达式1为真时，不再运算表达式2
console.log('c=',c)
console.log('flag=',flag)逻辑非：！取反，单目运算符，必须放在运算对象（表达式）左边
优先级：逻辑非！>逻辑与&&>逻辑或||（单目运算符优先级高）
赋值运算符：=
1.格式：变量=表达式
2.要求：左边是变量，不能是常量或表达式，优先级是最低的
3.复合赋值运算符：+= -= *= /=
| a+=5 | a=a+5 |
| a*=3+4 | a=a*（3+4） |
| a-=5 | a=a-5 |
| a/=5 | a=a/5 |
运算符优先级：
| 优先级 | 运算符 | 顺序 |
| 1 | 小括号 | （) |
| 2 | 一元运算符 | ++ -- ! |
| 3 | 算术运算符 | 先*/ 后+- |
| 4 | 关系运算符 | > >= <= < |
| 5 | 相等运算符 | == != === !== |
| 6 | 逻辑运算符 | 先&& 后|| |
| 7 | 赋值运算符 | = |
| 8 | 逗号运算符 | ， |
位运算符：对数据的二进制位进行运算
1.按位与（&）：a&b相对应的二进制位都为1，结果为1，否则为0
2.按位或（|）：a|b相对应的二进制位有一位为1，结果为1，都为0结果为0
var a=10,b=15 var a=10,b=15
a|b a&b
00001010 00001010
|00001111 &00001111
---------------- ---------------
00001111 00001010
3.按位异或（^)：a^b 相对应二进制位相同为0，不同为1
4.按位左移（<<) :运算对象<<位移位数 ，位移时高位移除的位舍弃，低位补零，对于正整数和无符号数左移n位等于让运算对象乘以2的n次方
5.按位右移（>>）高位补零，低位舍弃，对于正整数和无符号数，右移等于让运算位除以2的n次方
三目运算符（？：）（条件运算符）
表达式1？表达式2：表达式3
先运算表达式1，若为真，再运算表达式2，并把表达式2的值作为整个条件表达式运算的值
若表达式1的值为假，运算表达式3，，并把表达式3的值作为整个条件表达式的值
<script>
var n=prompt('请输入一个整数')
var pn=parseInt(n)
var str=(pn%2===0?'是偶数':'是奇数')
</script>流程控制
通过代码的执行顺序实现某种功能
1.顺序结构：按照代码的先后顺序执行
2.分支结构（选择结构）：根据条件决定某个分支代码执行
3.循环结构（重复结构）：根据条件决定是否执行某段代码
分支结构：if else语句
1.if语句
if（条件表达式）{执行语句}
执行思路：条件表达式结果为真，执行大括号里面的内容，为假，执行大括号后面的内容
//进入网吧
var age=prompt('请输入您的你年龄');
if(age>=18){
alert('我想带你去网吧偷耳机');
}2.if……else双分支语句
双选一
if（条件表达式）
{执行语句1}
else
{执行语句2}
执行思路如果条件表达式为真，执行if里面的语句，否则执行else里面的的语句
（1)else要和if结合使用，不能单独使用
（2）else后面不能带表达式
var age=prompt('请输入您的你年龄');
if(age>=18){
alert('我想带你去网吧偷耳机');
}
else{
alert('滚，回家做作业去');
}var n=prompt（'请输入一个数字'）
var pn=parseInt（n）
if(pn%2===0){alert('是偶数')}
else{alert('是奇数')}
例：判断年份是否是闰年
1.年份能被4整除，不能被100整除
2.年份能被400整除
var n=prompt('请输入一个年份')
var year =parseInt（n）
var msg=''
if(year%4===0&&year%100===0)||(year%400===0)
{msg=year+'是闰年'}
else{msg=year+'是平年'}
alert（'msg'）
//注意里面&& ||写法 取余%
//注意转化为整数型 隐式转换多分支语句:if else if语句
多选一
if(条件表达式1){执行语句1}
else if（条件表达式2）{执行语句2}
else if（条件表达式3）{执行语句3}
...
else{最后的语句}
执行思路：满足条件表达式1，执行语句1；不满足，判断是否满足条件表达式2，满足的话执行语句2；以此类推，都不满足执行最后的语句
最后只执行一个，else if中间有空格，else后面不加条件表达式
示例：输入成绩，判断成绩等级
var score=prompt('请输入一个成绩：')
var s=prasefloat(score)
var msg=''
if(s>=90)
{msg='A'}
else if (s>=80)
{msg='B'}
else if(s>=70)
{msg='C'}
else if(s>=60)
{msg='D'}
else
{msg='E'}
alert('msg')三元表达式
条件表达式？表达式1：表达式2
执行思路：条件表达式结果为真，返回表达式1的值，为假返回表达式2的值
var num=10; var result=num>5?'是的'：'不是'; //表达式是有返回值的 console.log(result);//数字补零 var time=prompt('请输入一个0-59间的数字'); var result=time<10?'0'+time:'time'; //把返回值赋给一个变量 alert(result);
if结构的嵌套
1.在if子句的嵌套
if（表达式1）{
if（表达式2）
{代码段1}
}
else{代码段2}
2.在else子句中嵌套
if（表达式）
{代码段}
else{
if(表达式){代码段}
else{代码段}
}
a.在没有大括号时，if/else控制范围(作用域)为后面第一条语句
b.在没有大括号时，else总是和离他最近的if匹配
练习：输入三个整数，输出最大值和最小值
if(a<=b){
max='b'
min='a'
}
else{
max='a'
min=b
}
if(max<=c){max='c'}
if(min>=c){min='c'}
console.log('最大值=',max)
console.log('最小值=',min)
max=a>=b?a:b
max=max>=c?max:c
min=a<=b?a:b
min=min<=c?min:c
var max=a
if(max>=b){
max='a',min='b'
}
if(max<=c){max=c}
if(min>=c){min=c}输入三个整数，按照从大到小顺序输出
<script>
var a=parseInt(prompt('输入第一个数')), b=parseInt(prompt('输入第二个数')),c=parseInt(prompt('输入第三个数'));
var str;
if(a<b)
{
var temp=a
a=b
b=temp
}
if(a<c){
var temp=a
a=c
c=temp
}
if(b<c)
{
var temp=b
b=c
c=temp
}
console.log(str=a+','+b+','+c)
</script>计算邮局汇款的汇费，如果汇款金额小于100元，汇费为1元，如果金额在100与500之间，按照1%收费，金额大于500元，汇费为50元
<script>
var m=parseFloat(prompt('请输入汇款金额'))
var s;
if(m<100){
s=1
}else if(m>=100&&m<500){
s=0.0*m
}
else if(m>500)
{s=50}
alert("汇费是："+s)
</script>多分支选择结构switch-case结构
switch（条件表达式）{
case 常量1：执行语句1；break（跳出switch结构)；
case 常量2：执行语句2;break；
...
case 常量n：执行语句n；break；
default:最后的语句；
}
多分支语句，实现多选一
执行思路：利用条件表达式的值和case后面的选项值匹配 如果匹配上，执行该case里面的语句，都没有匹配上，执行最后的语句
1.case后面加常量，常量类型和表达式运算结果类型一致（全等）
2.case后的常量不能重复
3.default表示所有case之外的情况
4.必须和break结合使用，否则起不到分支选择效果
-switch和if elseif语句的区别
switch case语句在case为比较确定的情况，而if else 语句更加灵活，常用于判断范围（大于等于某个范围）
switch语句进行条件判断后直接执行到程序的条件语句，效率更高，而if else语句有多种条件，就得判断多少次
分支较少时，if else效率更高
分支较多时，switch结构更清晰
练习：判断一个数是奇数还是偶数
<script>
var n=parseInt(prompt('请输入一个数'))
var str=''
switch(n%2){
case 0:str='是奇数';break;
case 1:str='是偶数';break;
}
alert('str')
</script>查询水果案例
var feuit=prompt('请输入一个水果');
switch(fruit){
case'苹果':alert('苹果的价格是3.5元/斤');break;
Case'榴莲':alert('榴莲的价格是35/斤');break;
default:alert('没有此水果');
}判断成绩等级
<script>
var n=parseFloat(prompt('输入成绩'))
var k=parseInt(n/10)
var msg=''
switch(k){
case 10:
case 9:msg='A';break;
case 8:msg='B';break;
case 7:msg='C';break;
case 6:msg='D';break;
default:mag='E';
}
alert(msg)
</script>综合练习：输入年月日
判断年份是闰年还是平年，月份是那个季节（3-5为春季 6-8为夏季 9-11为秋季 12-1为冬季）日期是该年的第几天
420
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
