Script基础-2

<a href="#one">1.程序的流程控制结构 </a>##

<a href="#two">2.选择结构之【if语句】</a>

<a href="#three">3.选择结构之【switch语句】</a>

<a href="#four">4.循环语句之【while、for】</a>

<a href="#five">5.break和continue关键字</a>

<a href="#six">6.函数</a>

<a href="#seven">7.变量的作用域</a>

<a href="#eight">8.HTML DOM（文档对象模型）</a>

<a href="#nine">9:事件三要素</a>

<h2 id="one"> 1.程序的流程控制结构 </h2>

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

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

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

<h2 id="two">2.选择结构语句【if语句】</h2>

第一种格式

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

<h2 id="three">3.选择结构语句【switch语句】</h2>

格式：

switch(条件表达式)

{
case 整数：
语句;
break；
case 整数：
语句;
break；
default:
语句;
break;
}

示例

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

<h2 id="four">4.循环结构语句【while循环do while】</h2>

格式：

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

示例

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

for循环【重点掌握】

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

 {
            循环体
}

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

<h2 id="five"> 5.break和continue关键字</h2>

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

定义：函数是一段具备特定功能的代码段。
格式：function关键字，加上函数名称，加上小括号，加上大括号

function 函数名称( )

{

要执行的代码；

}
函数的种类：
- 无参无返回值
- 无参有返回值
- 有参无返回值
- 有参有返回值
函数的第二种格式：

var 变量名称 = function( ){语句...}

调用: 变量名称( );
递归函数：
- 定义:自己搞自己（自己调用自己）
- 练习：第一个人的年龄为10岁，以后的依次比之前的人大2岁，求第5个人的年龄
注意：
- 必须要有结束条件，否则形成死循环
- 有性能问题

<h2 id="seven">7.变量的作用域</h2>
<h3>变量分为：全局变量和局部变量</h3>
<h4>全局变量</h4>

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

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

<h2 id="eight">8.HTML DOM（文档对象模型）</h2>

当网页被加载时，浏览器会创建页面的【文档对象模型】（Document Object Model）。
HTML DOM 模型被构造为【对象的树】。
HTML DOM 树
总结：可以理解为网页在加载的时候，会把所有html中的标签都【长在DOM这棵树上】；这棵树引申为【DOM对象】；
什么是对象？
<h4>具有特定功能的功能组【功能组就是函数】。</h4>
<h4>这些函数不能直接被使用，需要对象.函数名称，函数才能被调用</h4>
举例：要想在js中获取一个标签
- 1.先拿到DOM对象（在js中引申为document一词）
- 2.通过对应的功能，（.函数名称的方式来【调用、执行】对象里面的一个功能。）
- 3.比如，通过【标签的id】来获取对应的标签；
  - var box = document.getElementById("id");

案例

1.js控制样式【通过js设置一个标签的背景颜色、圆角、左边距、宽高......】
2.js控制结构【通过js修改、设置一个标签的内容（图片或者文字）或者给一个标签内部在添加一个标签】

<h2 id="nine">9:事件三要素</h2>

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

案例

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