Script基础-2

1.程序的流程控制结构 ##

2.选择结构之【if语句】

3.选择结构之【switch语句】

4.循环语句之【while、for】

5.break和continue关键字

6.函数

7.变量的作用域

8.HTML DOM（文档对象模型）

9:事件三要素

1.程序的流程控制结构

• 默认情况下，程序的运行流程是【从上至下】的每一行代码来执行，但是这并不能满足我们所有的开发需求，所以有了流程控制结构【顺序、选择、循环】
  

  顺序结构

• 默认的流程结构，从上至下的顺序来执行
• 

选择结构

• 对给定的条件进行判断，在根据判断的结果来决定执行【哪一段】代码。

• 

循环结构

• 在给定条件成立的情况下，【反复】的执行某一段代码。
• 

2.选择结构语句【if语句】

第一种格式

• if(条件表达式){};
  • 只要if后面条件表达式为true，那么就会执行后面{}中的语句
  • 

第二种格式

• if(条件表达式){}else{};
  • 只要if后面条件表达式为true，那么就会执行后面{}中的语句,如果条件表达式为flase那么则执行else后面{}中的语句。

第三种格式

• if(条件表达式1){}else if(条件表达式2){}else if(条件表达式3){}...else{};
  • 条件表达式1为true，那么执行第一个{}并且跳出if语句。
  • 条件表达式2为true，那么执行第二个{}并且跳出if语句。
  • 条件表达式3为true，那么执行第三个{}并且跳出if语句。
  • 如果条件都不满足，那么执行else中的{}。
  • 总结：if(){}else if(){}else if(){}中只能有一个语句被执行

示例

示例

第四种格式

• if(条件语句)
  
  语句...
• 如果省略if后面的大括号，作用范围只管【if后面的第一行】，也就是说，如果条件为true则执行第一行，条件为false不执行第一行。而后面的第二行、第三行不受影响，继续执行

第五种格式

• if是可以嵌套的【if里面还有if】

image.png

3.选择结构语句【switch语句】

• 格式：
  
  switch(条件表达式)
  
  
  {
  case 整数：
  语句;
  break；
  case 整数：
  语句;
  break；
  default:
  语句;
  break;
  }

示例

• 
• 原理：
  • 当执行switch语句时，会先拿到条件表达式的返回值，然后和case后面的整数相比较，如果相等，那么则执行【该case】后面的语句，遇到break结束switch语句。如果条件表达式的返回值和所有的case都不相等，那么会执行default和面的语句，遇到break则结束switch语句。
• 注意点：穿透现象，如果不写break关键字，那么如果有一个case和条件表达式的值相同，那么从该case一直到下面的语句都会被执行，知道遇到break或者switch的大括号才结束switch语句.

4.循环结构语句【while循环do while】

• 
• 格式：
  
  while(条件表达式)
  {
  语句...
  }

示例

• 原理：对条件表达式进行判断，如果条件满足，就会执行while后面大括号中的内容，执行完毕之后，会再次判断条件表达式，如果条件满足，那么再次执行while后面大括号中的内容，直到条件表达式不满足为止，【才结束循环】
• 术语：while后面{}中的内容被称之为【循环体】
• do while循环作为了解

for循环【重点掌握】

• 格式：
• for(表达式1;表达式2;表达式3)

 {
            循环体
}

• 
• 原理：
• 先执行表达式1，在执行表达式2（一般是条件表达式），如果成立，那么就执行循环体中的语句，执行完循环体中的语句，在执行【表达式3】（一般是增量表达式）；在执行【表达式2】，判断表达式2是否成立，如果成立，那么就执行循环体中的语句....

5.break和continue关键字

• continue;用于跳出本次循环【注意：循环还会从下一次开始】
• break;到遇到break那么立即停止循环【也就是循环体中后面的代码不会在执行】整个循环体也结束。

6.函数

• 定义：函数是一段具备特定功能的代码段。
• 格式：function关键字，加上函数名称，加上小括号，加上大括号
  
  function 函数名称( )
  
  {
  
  要执行的代码；
  
  }
  
• 函数的种类：
  • 无参无返回值
  • 无参有返回值
  • 有参无返回值
  • 有参有返回值
• 函数的第二种格式：
  
  var 变量名称 = function( ){语句...}
  
  调用: 变量名称( );
• 递归函数：
  • 定义:自己搞自己（自己调用自己）
  • 练习：第一个人的年龄为10岁，以后的依次比之前的人大2岁，求第5个人的年龄
  • 
• 注意：
  • 必须要有结束条件，否则形成死循环
  • 有性能问题

7.变量的作用域

变量分为：全局变量和局部变量

全局变量

• 定义：在函数外部声明的变量称为全局变量。
• 特点：网页上所有的脚本和函数都能访问它。
• 生命周期
  • 开始：从它被声明的地方开始
  • 死亡：页面关闭后被删除。

局部变量

• 定义:声明在函数内部的变量和函数的参数称之为局部变量
• 特点：只有函数内部能访问它。
• 声明周期：
  • 开始：从它被声明的地方开始
  • 死亡：只要函数调用完毕，局部变量就会被删除。
• 注意点：变量的提升：
  • 没有用var 修饰的局部变量，会提升为全局变量

8.HTML DOM（文档对象模型）

• 当网页被加载时，浏览器会创建页面的【文档对象模型】（Document Object Model）。

• HTML DOM 模型被构造为【对象的树】。

• HTML DOM 树

  
  
  

• 总结：可以理解为网页在加载的时候，会把所有html中的标签都【长在DOM这棵树上】；这棵树引申为【DOM对象】；

• 什么是对象？

• 具有特定功能的功能组【功能组就是函数】。

• 这些函数不能直接被使用，需要对象.函数名称，函数才能被调用

• 举例：要想在js中获取一个标签

  • 1.先拿到DOM对象（在js中引申为document一词）
  • 2.通过对应的功能，（.函数名称的方式来【调用、执行】对象里面的一个功能。）
  • 3.比如，通过【标签的id】来获取对应的标签；
    • var box = document.getElementById("id");

案例

• 1.js控制样式【通过js设置一个标签的背景颜色、圆角、左边距、宽高......】

• 2.js控制结构【通过js修改、设置一个标签的内容（图片或者文字）或者给一个标签内部在添加一个标签】
  

  ---

9:事件三要素

• 事件源（事件的发起者、事件的源头）
• 事件（一般是动词：【单击鼠标、双加鼠标、鼠标移动到某个位置、鼠标移除某个位置......】）
• 事件处理程序：【就是要实现的逻辑（就是函数）】
• 常见的时间有：
  • onclick 鼠标单击
  • ondblclick 鼠标双击
  • onchange 文本内容或下拉菜单中的选项发生改变
  • onfocus 获得焦点，表示文本框等获得鼠标光标。
  • onblur 失去焦点，表示文本框等失去鼠标光标。
  • onmouseover 鼠标悬停，即鼠标停留在图片等的上方
  • onmouseout 鼠标移出，即离开图片等所在的区域
  • onload 网页文档加载事件
  • onunload 关闭网页时
• 总结：事件源.事件名称 = 事件处理程序【函数】
  • 比如 box.onclick = function(){要执行的代码}、

案例

• 1.【点击事件的练习】：点击按钮、更改下面div的背景颜色、圆角等等....
• 2.【鼠标移上、移出事件的练习】：更换img的图片
• 3.【简单的换肤】：更换body的背景图片
• 4.【商品的选取】：display的应用
• 5.【商品竞价】：完整的业务逻辑练习
• 6.【简答搜索框的制作】：
• 7.换肤代码的抽取
  • 【第一次接触封装思想，可能有点蒙，需要时间的积累】
    

    ---