通过一个找人的程序来了解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 | <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、/是根目录