JS第二天
目录
前言
day17-js第二天
一、运算符
- 运算符 用于连接表达式中的操作数，并对操作数执行运算
- 例如：表达式num1+num2,操作数就是num1和num2,运算符是加号(+)
- 常见的运算符有以下几类：
- 算术运算符、比较运算符、逻辑运算符、赋值运算符、三目运算符、位运算符
1.1算术运算符
- + - * / 普通的四则运算符
- % 取余 求模
- 自增自减运算符
- ++ 自增，变量的值自动加1
- --自减，变量的值自动减1
- 口诀：符号在前，先变化，再使用；符号在后，先使用，再变化
- 变化: 自增 或者 自减
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>算术运算符</title> </head> <body> <script> //1.测试取余 求模 % console.log(25%10)//商为2，余数为5 console.log(7%3)//商为2，余数为1 console.log(3%7)//商为0，余数为3 var a = 8 console.log(a%2)//对2取余，余数为0，可以判断为偶数 //2.测试自增自减运算符 //自增 给变量的值加1 var a = 2 a++ console.log(a)//3 ++a console.log(a)//4 var b = 3 var c = b++//符号在后，先把b的值3赋给c,b再自增成4 console.log(b,c)//4,3 var d = 3 var e = ++d//符号在前，d先自增成4，再将自增后的值赋值给e console.log(d,e)//4,4 //练习：查看以下程序的运行结果 var m1 = 7 var m2 = m1-- var m3 = --m1 console.log(m1,m2,m3)//5,7,5 //3.隐式转换 console.log('7a'%'3')//NaN console.log(Number('7a'))//NaN var n = '3' n++ console.log(n)//4 //加减号还有正负号的功能,也会隐式转换为数字 console.log(2+-'5'+ +true)//2+(-5)+(+1)=-2 </script> </body> </html>
1.2比较运算符
- >、<、>=、<=、== 、!=、===、!==
- == 等于，比较两个值是否相同
- === 全等于，不仅比较两个值是否相同，还会比较类型是否相同
- != 不等于，比较两个值是否不相同
- !== 不全等于，比较的是两个值不相同或者类型不相同
- 数字和字符串比较，字符串转为数字
- 字符串之间的比较，比较的是字符串的编码
- NaN和任何值比较(> < >= <= == ===)结果都是false,如：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>比较运算符</title> </head> <body> <script> console.log(2=='2')//true,只比较值，都是2 console.log(2==='2')//false,比较值和类型，类型不同 console.log(1==true)//true,只比较值，都是1 console.log(1===true)//false,比较值和类型，类型不同 console.log(null===undefined)//false,类型不同 console.log(null==undefined)//true,设计者认为两者都是空，所以true console.log(1!=2)//true 值不同 console.log(1!==2)//true 值不同 console.log('1'!==2)//true 值不同类型也不同 //数字和字符串比较，字符串转为数字 console.log(3>'10')//false //如果两个都是字符串，就不转了，比较编码 console.log('3'>'10')//true console.log('3'.charCodeAt())//51 console.log('10'.charCodeAt())//49 //字符串之间比较的是编码值 console.log('新'>'铭')//false console.log('新'.charCodeAt())//26032 console.log('铭'.charCodeAt())//38125 //Number('10a')的结果是NaN //NaN比较特殊，与任何值，结果都是false console.log(3>'10a')//false console.log(3<'10a')//false console.log(3=='10a')//false console.log(NaN==NaN)//false </script> </body> </html>
1.3逻辑运算符
- && 逻辑与，只要关联的两个表达式结果都为true,最终结果就是true
- || 逻辑或，只要关联的两个表达式其中任意一个的结果为true,最终结果就是true
- ！逻辑非，取反
- 短路
表达式1 && 表达式2 当表达式1为false时，最终结果就是false,不会执行表达式2
表达式1 || 表达式2 当表达式1为true时，最终结果就是true,不会执行表达式2
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>逻辑运算符</title> </head> <body> <script> console.log('测试逻辑与&&') //全真才真 console.log(true && true) //true console.log(true && false) //false console.log(false && true) //false console.log(false && false) //false console.log('测试逻辑或||') //全假才假 console.log(true || true) //true console.log(true || false) //true console.log(false || true) //true console.log(false || false) //false //练习：声明两个变量，分别保存用户输入的用户名和密码 //如果用户名是admin并且密码是123456，打印true,否则打印false var user = 'xiaoxin' var pwd = '123456' console.log(user==='admin' && pwd==='123456') //练习：判断一个人的年龄是否在60以上或者12以下，满足条件打印true var age = 35 console.log(age>60 || age<12) //练习：声明变量保存用户的值，如果用户名是xin88 //或者邮箱是xin@163.com,或者手机号是18812345678，打印true,否则false var input = '18812348888' console.log(input==='xin88' || input==='xin@163.com' || input==='18812345678') //练习:判断一个人的工资，是否在8000~10000之间 var salary = 12000 console.log(salary>=8000 && salary<=10000) //执行顺序：先比较第一组8000<=salary //再将第一组的结果(true/false)与10000比较 // console.log(8000<=salary<=10000) //思考：以下哪句代码会报错？ var n = 5 //n>3 && a//会报错，表达式1结果为true,会执行表达式2，而a没定义，报错 n<8 || a//不会报错，表达式1结果为true,会短路，不会执行表达式2 //逻辑非，取反 console.log(!true)//false console.log(!false)//true </script> </body> </html>
1.4赋值运算符
= 赋值符号 等号右边赋值给等号左边
- 运算赋值：+= -= *= /= %= …
执行顺序：先执行运算再执行赋值，如：a+=5等价于a=a+5
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>赋值运算符</title> </head> <body> <script> //赋值 var a = 1 //a++ a += 1 //运算赋值 //a = a + 1 console.log(a) //练习：声明变量保存商品的价格，对商品的价格打8折，最后打印价格 var price = 1000 //price = price * 0.8 price *= 0.8 console.log(price) </script> </body> </html>
1.5三目(元)运算符
一目运算符：由一个运算符连接了一个表达式 ++
- 二目运算符：由一个运算符连接了两个表达式
三目运算符：由两个运算符连接了三个表达式
格式：表达式条件 ? 表达式1 : 表达式2
当表达式条件结果为true时，执行表达式1
当表达式条件结果为false时，执行表达式2
口诀：1?2:3 1真取2 1假取3
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>三目运算符</title> </head> <body> <script> // 格式：表达式条件 ? 表达式1 : 表达式2 // 定义变量，保存年龄，判断是否是成年人 //如果>18输出'成年人',否则输出'未成年人' var age = 2 console.log(age>=18 ? '成年人' : '未成年人') //声明两个变量，比较这两个变量的大小，把最大值输出 var a = 5 var b = 10 var max = a>b ? a : b console.log(max) //练习：声明变量分别保存用户输入的用户名和密码 //如果用户名是admin并且密码是666666，打印'登录成功'，否则打印'登录失败' var user = 'admin' var pwd = '666666' console.log(user==='admin' && pwd==='666666' ? '登录成功':'登录失败') </script> </body> </html>
二、操作网页元素
2.1操作网页元素的步骤
- 查找网页元素
- 给按钮绑定点击事件，监听用户操作
弹出警示框
- 修改标签之间的内容(修改HTML)
- 修改标签的CSS样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS操作网页元素</title> </head> <body> 用户<input type="text" id="user"/><br> 密码<input type="password" id="pwd"/><br> <button id="btn">登录</button> <!-- JS代码要写在最后，确保网页中的元素都加载完毕了 --> <script> //我们可以通过html元素的id值来操作html元素 //console.log(user) //onclick表示点击事件 //function(){} 点击按钮后要执行的操作 btn.onclick = function(){ //console.log('用户点击按钮啦~') //获取用户名输入框的值 console.log(user.value) //获取密码输入框的值 console.log(pwd.value) //弹出警示框 //alert('哈哈哈哈我是一个警示框') //如果用户名是admin,并且密码是123456 //警示框弹出登录成功，否则弹出登录失败 var u = user.value var p = pwd.value alert(u==='admin' && p==='123456' ? '登录成功':'登录失败') } </script> </body> </html>
2.2实现简单计算器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>计算器</title> </head> <body> 第1个数字<input type="text" id="num1"><br> 第2个数字<input type="text" id="num2"><br> <button id="btn">=</button><br> 两个数字相加的和:<span id="sum"></span> <!-- 需求：获取用户输入的两个数字，把相加的结果在警示框中弹出 --> <script> //给按钮绑定点击事件 btn.onclick = function(){ //分别获取两个数字 var n1 = num1.value var n2 = num2.value //获取到的用户输入的值是string类型，不能直接相加 console.log(typeof n1,typeof n2)//string //将获取到的两个值相加，并弹出结果 //alert(Number(n1)+Number(n2))//用Number()转为数值再相加 //修改标签中的内容 sum.innerHTML = Number(n1)+Number(n2) } </script> </body> </html>
2.3其他事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>其他事件</title> <style> div { width: 300px; height: 100px; background-color: #0aa1ed; border-radius: 7px; display: none; } </style> </head> <body> <input type="text" id="uname"> <div id="box">123</div> <script> //给输入框绑定获取焦点事件 uname.onfocus = function(){ console.log('获得了光标') //JS控制CSS box.style.display = 'block' box.style.fontSize = '20px' } // input.onblur = function(){ } (输入框)失去焦点(光标)事件 //需求：当输入框失去焦点，在控制输出"失去了光标"，并且让box消失 uname.onblur = function(){ console.log('失去了光标') //隐藏box box.style.display = 'none' } </script> </body> </html>
2.4练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>练习</title> <style> div { width: 300px; height: 200px; background-color: lightyellow; } </style> </head> <body> <div id="box"></div> <button id="btn1">红色</button> <button id="btn2">绿色</button> <button id="btn3">蓝色</button> <script> btn1.onclick = function(){ box.style.backgroundColor = 'red' } btn2.onclick = function(){ box.style.backgroundColor = 'green' } btn3.onclick = function(){ box.style.backgroundColor = 'blue' } </script> </body> </html>
2.5作业练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JSday02作业答案</title> </head> <body> <script> //求闰年：能被4整除，并且不能被100整除，或者能被400整除 var year = 2000 // console.log(year%4===0 && year%100!==0 || year%400===0) //&&的优先级要高于|| 优先级控制推荐还是使用小括号 console.log(year%400===0 || year%4===0 && year%100!==0)//true </script> </body> </html>完成如下效果：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JSday02作业答案2</title> <style> p { width: 500px; background-color: lightgreen; font-size: 20px; } </style> </head> <body> <p id="box">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium dolorem, facilis dolorum dignissimos possimus illo similique a minima eos totam quis amet aperiam laboriosam recusandae provident est dolores voluptas blanditiis?</p> <button id="btn1">变大</button> <button id="btn2">变小</button> <script> //声明一个变量用来保存文字的大小 var a = 20 //给按钮1绑定点击事件 btn1.onclick = function(){ //变量a自动加1，每点击一次按钮执行一次 a++ //把变量a的值赋值给p标签的font-size,注意拼接单位 box.style.fontSize = a+'px' } //给按钮2绑定点击事件 btn2.onclick = function(){ //变量a自动减1，每点击一次按钮执行一次 a-- box.style.fontSize = a+'px' } </script> </body> </html>
总结
js第二天学习结束
扫一扫
350
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
