JavaScript 的条件判断语句
- if (条件1){
如果条件为TRUE 时执行的代码
}
- else if (条件2) {
条件 1 为 false 而条件 2 为 true 时执行的代码块
}
- else {
条件 1 和条件 2 同时为 false 时执行的代码块
}
-- if(条件){}最好只用这一个, 不要后面带else if (条件)这些
可以让代码更优雅;
- swith (表达式) {
case n :
代码块;
break;
case n :
代码块;
break;
default :
默认代码块;
}
-- 一般不使用这种方式, 显得代码书写水平很LOW
<script type="text/javascript">
// if条件语句, 不要过多使用 else if 和else, 会影响代码的可读性和美观
var age = 35;
if (age>65) {
console.log('你年龄太大了, 什么都不能玩儿!')
} else{
if (age<5) {
console.log('你的年龄太小了,不能玩儿丛林飞鼠!')
}
if (age<12) {
console.log('你不到12岁, 不能玩儿唐僧帽!')
}
if (age<16) {
console.log('你不到16岁, 不能玩儿过山车!')
}
}
</script> 2. JavaScript的循环语句
- for 循环语句的嵌套最好不要超过两层,
会占用大量系统资源, 会产生效率问题;
- while 循环语句,先做判断,再执行循环体,
在循环体中需要更改条件判断语句的值,
以免造成死循环;
- do while 循环语句与while语句大致相同,
只是先执行一遍循环体后再判断条件;
一定要注意循环语句中的条件判断, 不要造成死循环
<script type="text/javascript">
// for循环的使用
// 计算从零到n的累加值
function totalize(n) {
// 循环语句
var res =0;
for (var i=0;i<=n;i++){
res += i;
}
return res;
}
var target = 10;
var total100 = totalize(target);
console.log(`从1加到${target}的值是:`,total100); // 从1加到10的值是: 55
// while循环的使用
// 计算n!
function factorial(n) {
var res = 1;
var i = 1;
// while循环
while (i<=n){
res *=i;
i++; // 一定不能少, 一定不能少, 一定不能少
}
return res;
}
var factorial100 = factorial(target);
console.log(`${target}!=`,factorial100); // 10!= 3628800
// do while 循环的使用
var numList = [1,2,3,4,5,6,7,8,9,10];
var i= 0;
do{
console.log(`打印 [${numList}] 数组中的每一个元素`,numList[i]);
i++; // 一定不能少, 一定不能少, 一定不能少
}while (i<numList.length);
</script>3. JavaScript 常用事件
1) onclick事件, 当被点击时触发
2) onchange事件, 经常与输入字段验证结合使用
3) onmouseover事件, 当鼠标移至元素上时触发
4) onmousout事件, 当鼠标移出元素时触发
5) onmousmove事件, 当鼠标移动到元素上触发,然后不再响应鼠标移动事件
6) onmousedown事件, 当鼠标按下时触发
7) onmouseup事件, 当鼠标按键释放时触发 , 不能和onclick事件一起, 将会被onclick事件覆盖
<body>
<!-- onchange事件-->
<label for="username">用户名:</label>
<input type="text" id="username" name="username" onchange="userNameCheck()" placeholder="username">
<br><hr>
<label for="sex">性别</label>
<select name="sex" id="sex" onchange="changSex()">
<option value="1">男</option>
<option value="2">女</option>
</select>
<br><hr>
<!-- onclick事件-->
<div id="div1" style="width: 100px;height: 30px;background-color: red;" onclick="mClick()">
点我
</div>
<br><hr>
<!-- onmouseover事件与onmouseout事件-->
<div onmouseover="mOver(this)" onmouseout="mOut(this)"
style="width: 150px;height: 30px;background-color: red; color: white;font-size: 1.2em;">
请把鼠标移上来
</div>
<br><hr>
<!-- onmousemove事件将覆盖onmouseover和onmousout事件,仅onmousemove事件被触发且不再变化-->
<div onmouseover="mOver(this)" onmousemove="mMove(this)"
style="width: 150px;height: 30px;background-color: green; color: white;font-size: 1.2em;">
请把鼠标移上来
</div>
<br><hr>
<!-- onmousedown事件, onmouseup事件-->
<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="text-align: center; width: 150px;height: 30px;
background-color: green; border: red 1px solid; font-size: 1.2em;">
开灯控制
</div>
</body>
<script type="text/javascript">
// onchange事件触发
function changSex(){
alert('性别被改变!');
}
function userNameCheck() {
alert('请检查用户名输入是否正确!')
}
// onmouseover事件, 当鼠标移动到元素上时触发
function mOver(obj) {
obj.innerHTML = '欢迎到来!';
obj.style.color= 'blue';
}
// onmouseout事件, 当鼠标从元素上移去时触发
function mOut(obj) {
obj.innerHTML = '再见!';
obj.style.color = 'white';
}
// onmousemove事件, 当鼠标在元素上移动时触发, 在同一元素上会覆盖掉over和out事件
function mMove(obj) {
obj.innerHTML = '移动!';
obj.style.color = 'white';
}
// onmousedown事件, 当鼠标按键按下时触发
function mDown(obj) {
obj.innerHTML = '灯开了';
obj.style.backgroundColor = 'white';
obj.style.color = 'black';
}
// onmouseup事件, 当鼠标按钮被释放时触发
function mUp(obj) {
obj.innerHTML = '灯关了';
obj.style.backgroundColor = 'black';
obj.style.color = 'white';
}
// onclick事件, 当鼠标被点击时触发, 会覆盖掉onmouseup事件
function mClick() {
alert('我被点击了!');
}
</script>