JS笔记
先know how 再know why
1、逻辑运算最后一个式子的值可以赋给某个变量；
关系运算的结果只有0或1；
1 <script type="text/javascript"> 2 var a = 3; 3 var b = 2; 4 var c = b || a++; 5 var d = b && ++a; 6 var e = b && a++ && 5; 7 alert(c); //2 8 alert(d); //3 9 alert(e);//5 10 //逻辑运算会取最后一个式子的值 11 </script>
2、循环显示3张图片，并输入显示次数
<script type="text/javascript">
var num = window.prompt("please input a number:");
var num = parseInt(num);
var num1 =parseInt(num / 3);
var num2 = num % 3; for(var i=1; i <= num1; i++){ for(var j =1; j <=3; j++){ document.write("<img src='" + j + ".jpg'>"); } } for(var i=1; i <= num2; i++){ document.write("<img src='" + i + ".jpg'>"); } </script>
3、局部变量
<script type="text/javascript">
//显示定义全局变量
var a = 2;
var b = 3;
function sayHello(){
//显示定义局部变量
var c =4;
//隐式定义全局变量，不推荐使用，会覆盖函数外的b
b = 6;
d = 5;
window.alert("b in fuction：" + b);
window.alert("d in fuction：" + d);
}
sayHello();
window.alert("b out of fuction：" + b);
window.alert("d out of fuction：" + d);
</script>
4、基本数据类型 是值传递，数组是引用传递（与C语言不同的是，数组中的元素可以不用一样）
<script type="text/javascript">
//基本数据类型值传递 var a = 2; var b = a; b = 0; window.alert("a=" + a); window.alert("b=" + b); //数组是引用传递 var a = [20, 56]; var b = a; var c = a; b[0] = 30; //此时的c是一个整型变量，与a数组无关 c = 10;
window.alert("a[0]=" + a[0]); window.alert("b[0]=" + b[0]); window.alert("c=" + c); </script>
5、字符串
1 <script type="text/javascript"> 2 //在js中中文和英文的字符数是一样的 3 var str = "hello, 世界!"; 4 var str1 = str.substr(7,2);//世界 5 var str2 = str.substr(-3,2);//世界 6 var str3 = str.substr(-3); //世界！ 7 8 //从起点到（终点-1） 9 var str4 = str.substring(7,9); //世界！ 10 var str5 = str.substring(0,1); //h 11 12 window.alert(str5); 13 14 </script>
6、通过按钮改变颜色 注意：没有函数时，js会从上至下执行
<style type="text/css"> #div1, #div2, #div3{ width: 34px; height: 34px; background-color: red; } </style> <script type="text/javascript"> function changeColor1(obj){ var div_obj = document.getElementById("div1"); //div_obj是div1的对象 if(obj.value == "red"){ //value是input标签中的value值 div_obj.style.backgroundColor = "red"; } if(obj.value == "black"){ div_obj.style.backgroundColor = "black"; } } function changeColor2(){ var div_obj = document.getElementById("div2"); //div_obj是div2的对象 if(div_obj.style.backgroundColor == "red"){ div_obj.style.backgroundColor = "black"; }else{ div_obj.style.backgroundColor = "red"; } } function changeColor3(color){ var div_obj = document.getElementById("div3"); //div_obj是div2的对象 div_obj.style.backgroundColor = color; } </script> <body> <div id="div1"></div> <div> <input type="button" value="red" name="REDBUTTON" onclick="changeColor1(this)"> <input type="button" value="black" name="BLACKBUTTON" onclick="changeColor1(this)"> </div> <hr> <div id="div2"></div> <div> <input type="button" value="red" name="REDBUTTON" onclick="changeColor2()"> <input type="button" value="black" name="BLACKBUTTON" onclick="changeColor2()"> </div> <hr> <div id="div3"></div> <div> <input type="button" value="red" name="REDBUTTON" onclick="changeColor3('black')"> <input type="button" value="black" name="BLACKBUTTON" onclick="changeColor3('red')"> </div> </body>
