Javascript基础知识（二）

1.if语句

###1.基本语法：

	if(条件表达式){
		条件为真的时候做的事情
	}else{
		条件为假的时候做的事情5	}

例：

<script type="text/javascript">
	var a = 10;	//设置变量
	if(a > 5){
		console.log("你好");
	}else{
		console.log("你好吗");
	}
</script>//你好

###2.多分支的if语句和跳楼现象
基本语法：

	if(条件表达式1){
		条件1为真的时候做的时候
	}else if(条件表达式2){
		条件1不满足，条件2满足的时候做的事情
	}else if(条件表达式3){
		条件1、2不满足，条件3满足的时候做的事情
	}else{
		全都不满足的时候做的事情9	}

程序是由上到下一步一步执行。跳楼现象，揭示多分支if语句的本质，就是下一个楼层已经暗含之上的楼层都不满足。如果上一个满足条件，后面的条件不会执行，直接输出了结果。
###3.if语句的嵌套
在if语句里面还可以写if语句。
例：
一个加油站为了鼓励车主多加油，所以加的多有优惠。
92号汽油，每升6元；如果大于等于20升，那么每升5.9；
97号汽油，每升7元；如果大于等于30升，那么每升6.95
编写JS程序，用户输入自己的汽油编号，然后输入自己加多少升，弹出价格。

			//第一步，输入
			var bianhao = parseInt(prompt("你想加什么油？填写92或者97"));
			var sheng = parseFloat(prompt("你想加多少升？"));
	
			//第二步，判断
			if(bianhao == 92){
				//编号是92的时候做的事情
				if(sheng >= 20){
					var price = sheng * 5.9;
				}else{
					var price = sheng * 6;
				}
			}else if(bianhao == 97){
				//编号是97的时候做的事情
				if(sheng >= 30){
					var price = sheng * 6.95;
				}else{
					var price = sheng * 7;
				}
			}else{
				alert("对不起，没有这个编号的汽油！");
			}
	
			alert("价格是" + price);

注意：

• else部分可以省略。如果条件表达式不满足了，那么就什么都不做。

<script type="text/javascript">
	var a = 10;
	if(a > 20){
		alert("这个数字大于20");
	}
</script>

• 如果要做的事情，只有一句话，那么可以省略大括号（初学者尽量不要这样，一定要把大括号写完整）：

<script type="text/javascript">
	var a = 2;
	if(a > 5) alert("这个数字大于5");
</script>

##2.for循环语句
###1.什么使for循环
循环语句，就是执行一些类似的代码，让这些代码的编写变得简化。

基本语法：

for(var i = 1 ; i <= 100 ; i++){
	console.log(i);3	
}

i++//i=i+1

###2.准确遍历for循环

<script type="text/javascript">
	for(var i = 1 ; i < 13 ; i = i + 4){
		console.log(i);
	}
</script>

遍历上面的代码：
程序一运行，将执行var i = 1;这条语句， 所以i的值是1。 然后程序会验证一下i < 13是否满足，1<13是真，所以执行一次循环体（就是大括号里面的语句）。执行完循环体之后，会执行i=i+4这条语句，所以i的值，是5。
程序会会验证一下i < 13是否满足，5<13是真，所以执行一次循环体（就是大括号里面的语句）。执行完循环体之后，会执行i=i+4这条语句，所以i的值，是9。
程序会会验证一下i < 13是否满足，9<13是真，所以执行一次循环体（就是大括号里面的语句）。执行完循环体之后，会执行i=i+4这条语句，所以i的值，是13。
程序会会验证一下i < 13是否满足，13<13是假，所以不执行循环体了，将退出循环。

##3.函数
###1.什么是函数
函数，是一种封装。就是将一些语句，封装到函数里面。通过调用的形式，执行这些语句。
函数的使用，是两个步骤。
第一步，函数的定义：

function 函数名字(){
}

function就是英语“函数”、“功能”的意思。顾名思义，将一些功能封装到函数里面。它是一个关键字，和var、typeof一样，都是关键字，后面要加空格小括号是放参数用的，

• 注意：函数名字的命名规定，和变量的命名规定一样。只能是字母、数字、下划线、美元符号，不能以数字开头。

第二步，函数的调用。

语法：

函数名字();

console.log("你好");
sayHello();	//调用函数

//定义函数：
function sayHello(){
	console.log("欢迎");
	console.log("welcome");
}

函数的功能、好处：
1） 将会被大量重复的语句写在函数里面，这样以后需要这些语句的时候，直接调用函数，不用重写那些语句。
2） 简化编程，让编程变的模块化。

###2.函数的参数

定义函数的时候给的是变量，是形参。
调用函数时候，给的是定量，是实参。
###3.函数的返回值
定义：一个函数实际上就是一个计算过程，计算完成之后的结果就是返回值。
一个函数只有一个返回值。
定义函数的返回值：
在函数内部用return来设置返回值，一个函数只能有一个返回值。同时，终止代码的执行，后面的代码不再执行。所有的自定义函数默认没有返回值；Return 后面不要换行。
基本语法：

<script type="text/javascript">
//调用函数，return表示此时这个“函数调用的表达式”，值是a+b。
	console.log(qiuhe(3,4));
	
//定义函数， 并返回a + b
	function qiuhe(a,b){
	return a + b;
}
</script>

● 函数里面可以没有return，如果有，只能有一个。不能有多个return；
● 函数里面，return后面不允许书写程序了；
##4.事件

###1.获取对象
Js 怎么来控制样式和结构呢？找准对象。

• 获取ID名

getElementById("demo")

获取 id 名字为 demo的元素。
因为这个div 是在 文档中，文档中很多个div其中的一个。所以我们
先限定在document里面。

document.getElementById("demo").style.width = "200px";

这句代码的含义是：文档中ID名为demo的盒子的样式里面的宽等于“200px”。

• 获取标签

getElementsByTagName()  获取某类标签

getElementsByTagName(); 很多个所以是复数 ，有很多个，得到的是一个伪数组。

###2.事件三要素
事件有三个要素：事件源、事件、事件处理程序。

• 事件源：被触发者
• 事件 ：怎么出发事件源

onclick	        鼠标单击
ondblclick	    鼠标双击
onkeyup	        按下并释放键盘上的一个键时触发 
onchange 	    文本内容或下拉菜单中的选项发生改变
onfocus 	    获得焦点，表示文本框等获得鼠标光标。
onblur 	        失去焦点，表示文本框等失去鼠标光标。
onmouseover 	鼠标悬停，即鼠标停留在图片等的上方
onmouseout 	    鼠标移出，即离开图片等所在的区域
onload	        网页文档加载事件
onunload	    关闭网页时
onsubmit	    表单提交事件
onreset	        重置表单时

• 事件处理程序

=  function(){  } 

基本语法：

事件源.事件 = function(){  事件处理函数 }

例：
点击按钮，改变盒子的宽度

事件源： 按钮
事件 点击
事件处理程序： 盒子的宽度改变 400
代码：

<script>
 /*要操作先找人*/
   var demo = document.getElementById("demo");  //获得id为demo的div盒子给demo
   var btn = document.getElementById("btn"); // 获得按钮
    /*事件三要素*/
    /*事件源.事件 = fucntion(){}*/
   btn.onclick = function(){
      demo.style.width = "400px";
   }
</script>

• 注意：当script放在head里面时，要写上入口函数：

 window.onload = function(){ 
     内部放js
  }

示例：

点击图片给网页换背景。
<script>
    window.onload = function(){
        var pic1 = document.getElementById("pic1");
        var pic2 = document.getElementById("pic2");
        var pic3 = document.getElementById("pic3");
        pic1.onclick = function(){
            document.body.style.backgroundImage = "url(images/1.jpg)";
        }
        pic2.onclick = function(){
            document.body.style.backgroundImage = "url(images/2.jpg)";
        }
        pic3.onclick = function(){
            document.body.style.backgroundImage = "url(images/3.jpg)";
        }
    }
</script>