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>