js找人案例01-js程序的顺序执行结构和外部文件调用

通过一个找人的程序来了解js的三种程序结构，顺序结构，if跳转结构和for循环结构。

程序结构：顺序结构、分支结构、循环结构
1.if语法
用法：if(条件){
语句
}
if(条件){}else{}
多分支语句语法：if(){}else if(){}else{}

switch结构只能用于单值比较，并且为全等比较
语法：switch(){
case 1:
break;
case 2:
break;
…
default:
break;
}
3.循环结构
for循环（循环变量初始化；循环条件；循环迭代）{循环体}
while循环
do…while

4.结束语句
break 结束循环，后边代码不执行
continue 结束本次循环，持续下一次循环

案例1，顺序结构。该段代码展示的是：点击按钮后依次执行并显示js代码中的内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<html>
<body>

<script>
function zhaoren(r){
var name=document.getElementById(r).innerHTML;//获取页面显示内容
alert('又见面了！'+name);//弹窗，字符串加变量
alert('想死你了，哥们儿');//弹窗，字符串
alert('最近挣了点小钱，走，请你吃饭');
alert('那啥，周末一起去玩');
document.getElementById(r).innerHTML= name+"已经不在学校";//输出内容到页面显示，字符串加变量。

}

</script>

<p id="ren">李CC</p><button type="button" onclick="zhaoren('ren')">走，去玩</button>

</body>
</html>

如果是要调用外部文件，则代码如下：

1
2
3
4
5
6

在上面这段代码中，对外部js文件进行了调用，注意，文件地址定义方式为src属性，而不是css中的href属性。此外，图片调用也是src属性。而超链接的a标签也是href属性。

简单的讲，就是将原来文件中script里面的代码剪切到js文件中。

对应的外部js文件的代码内容是：

1
2
3
4
5
6
7
8

function zhaoren(r){

var name=document.getElementById(r).innerHTML;
alert('又见面了！'+name);
alert('想死你了，哥们儿');
alert('最近挣了点小钱，走，请你吃饭');
alert('那啥，周末一起去玩');
}

对于引用文件地址的写法，如果调用文件html和被调用文件js在同一个位置，则有2种写法：

1，分别是直接写文件名，如src="zhaoren.js"

2，写上当前目录，src="./zhaoren.js"

已经测试，在本地硬盘，写根目录是行不通的。

1、./是当前目录

2、../是父级目录

3、/是根目录