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

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

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

  1. 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
<html>
<body>
<script src="zhaoren.js" ></script>
<p id="ren">李CC</p><button type="button" onclick="zhaoren('ren')">嗨聊</button>
</body>
</html>

在上面这段代码中,对外部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、/是根目录

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: