Web-Lesson06-JS的运算符和循环
一、JS的数据类型
js六大数据类型 number——数字 在js里面的小数和整数统一都是数字 -2^53 -- 2^53 超出范围之后精度就会不准确 string——字符串 boolean——布尔值 true false function——函数 undefined——未定义 一个变量声明之后没有赋值就是undefined object——对象 在js里面null属于对象类型，但是它不具有很多对象的共性，所以很多资料将它归为单独一类数据类型null<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
div{
background: yellow;
width: 100px;
height: 50px;
line-height: 50px;
margin: 10px auto;
text-align: center;
}
</style>
</head>
<body>
<div id = "test1">test1</div>
<div id = "test2">test2</div>
<div id = "test3">test3</div>
<div id = "test4">test4</div>
<div id = "test5">test5</div>
<div id = "test6">test6</div>
<div id = "test7">test7</div>
<div id = "test8">test8</div>
<div id = "test9">test9</div>
<script>
var a = 128;
var b = "hello world";
var c = true;
var d = function () {
alert(1);
};
var e;
var f = document.getElementById("text6");
var g = [1,2,3];
var h = {};
var i = null;
var oDiv1 = document.getElementById("test1");
var oDiv2 = document.getElementById("test2");
var oDiv3 = document.getElementById("test3");
var oDiv4 = document.getElementById("test4");
var oDiv5 = document.getElementById("test5");
var oDiv6 = document.getElementById("test6");
var oDiv7 = document.getElementById("test7");
var oDiv8 = document.getElementById("test8");
var oDiv9 = document.getElementById("test9");
oDiv1.innerHTML = typeof a;
oDiv2.innerHTML = typeof b;
oDiv3.innerHTML = typeof c;
oDiv4.innerHTML = typeof d;
oDiv5.innerHTML = typeof e;
oDiv6.innerHTML = typeof f;
oDiv7.innerHTML = typeof g;
oDiv8.innerHTML = typeof h;
oDiv9.innerHTML = typeof i;
</script>
</body>
</html>
var a = 128;
var b = "hello world";
var c = true;
var d = function () {
alert(1);
};
var e;
var f = document.getElementById("text6");
var g = [1,2,3];
var h = {};
var i = null;
这9个变量的类型打印出来分别为：![]()
二、JS的运算符
1.算数运算符
算数运算符（基础数字运算）+ - * / %(求余数）
当不是数字之间的运算的时候，“+”号两边一旦有字符串（引号引起来的一坨），那么“+”号就不再是数学运算了,而是拼接，最终结果是字符串。
- * / % 尽量将字符串转换成数字（隐式类型转换）
2.赋值运算符
+= -= *= /= %= ++ -- 两个都存在隐式类型转换，会全部转换为数字 
3.逻辑运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
div{
background: yellow;
width: 100px;
height: 50px;
line-height: 50px;
margin: 10px auto;
text-align: center;
}
</style>
</head>
<body>
<div id = "test1">test1</div>
<div id = "test2">test2</div>
<div id = "test3">test3</div>
<div id = "test4">test4</div>
<div id = "test5">test5</div>
<div id = "test6">test6</div>
<script>
var a = true && true;
var b = false || false;
var c = !false;
var d = 5 && 0 && 3;
var e = false || 0 || 0 || 2;
var f = !"5";
var oDiv1 = document.getElementById("test1");
var oDiv2 = document.getElementById("test2");
var oDiv3 = document.getElementById("test3");
var oDiv4 = document.getElementById("test4");
var oDiv5 = document.getElementById("test5");
var oDiv6 = document.getElementById("test6");
oDiv1.innerHTML = "a = " + a;
oDiv2.innerHTML = "b = " + b;
oDiv3.innerHTML = "c = " + c;
oDiv4.innerHTML = "d = " + d;
oDiv5.innerHTML = "e = " + e;
oDiv6.innerHTML = "f = " + f;
</script>
</body>
</html>
var a = true && true;
var b = false || false;
var c = !false;
var d = 5 && 0 && 3;
var e = false || 0 || 0 || 2;
var f = !"5";
几个参数的打印结果
三、条件语句：if
if ==> 布尔值
判断符
> < >= <= == != !== ===
== 只判断值是否一样
=== 不仅仅判断值，还判断类型是否一样
当if的条件 运算完后不是布尔值的时候 会被强制性的转换为布尔值
哪些值，在转换为布尔值的时候为false
0 number
false boolean
"" string 注：只有""转换布尔值时候为false，" "双引号里有空格或者其他字符串，则为true；
null object/null
undefined undefined
NaN number
NaN :Not a Number number类型
一般在非法运算的时候才会 出现NaN
isNaN(参数) 非常讨厌数字,首先尽量把参数转换成数字,然后当参数是数字，返回 false;当参数不是数字，返回 true。
在if里面，能用布尔值做条件判断的时候，不要用其他的来代替，因为强制数据类型的转换需要耗费时间，在两个值比较的时候，能用三等判断的时候，就用三等判断
三目运算：条件?条件为真则执行:条件为假则执行。例子：a>b?x=5:x=2; a大于b则x=5，否则x=2;
四、switch语句
请使用 switch 语句来选择要执行的多个代码块之一。
switch(n) { case 1: 执行代码块 1 break; case 2: 执行代码块 2 break; default: //n 与 case 1 和 case 2 不同时执行的代码,使用 default 关键词来规定匹配不存在时做的事情 }
五、循环语句
1.for循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
div{
min-width: 700px;
}
span{
background: yellow;
width: 60px;
height: 30px;
font-size: 12px;
display: inline-block;
padding-left: 10px;
line-height: 30px;
margin: 5px;
border: 1px solid skyblue;
}
</style>
</head>
<body>
<div id="box">
</div>
<script>
var oBox = document.getElementById("box");
for(var i = 1; i < 10; i++){
for(var j = 1; j <= i; j++){
oBox.innerHTML += "<span>" + j + "×" + i + " = " + j*i + "</span>";
}
oBox.innerHTML += "<br/>";
}
</script>
</body>
</html>
for循环制作99乘法表：
2.while；do while
只要指定条件为 true,循环就可以一直执行代码，当条件为false，跳出循环。
console.log(i);
浙公网安备 33010602011771号