js登录案例01-顺序结构和文件调用以及javascript的事件响应和函数调用

很多事件是要通过js来响应,js现在也是越来越强大,打通前端后端。

js有三种位置,写在前面,后面或者独立成一个文件,然后引用。

js有三种简单的程序结构,顺序结构,if跳转结构和for循环结构。

先看事件,事件的函数响应和程序的顺序结构:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<body>
<p id="s">用户已登录</p>
<script language=javascript>
 
 function checkStu() {     //函数位置可以写在三个地方
 
 alert ("欢迎您,小狮子");//弹窗,最好的检查代码是否有误的方式。
 alert ("how are you going today");
 alert ("have a good day, see you");
 document.getElementById("s").innerHTML="用户小狮子已登录";  //向页面输出内容

 }
 
 </script>
 
 <input type="text" name="username">
 <input type="button" value="登录" onclick="checkStu()"> <!--onclick触发事件,checkStu()调用函数-->
 
 </form>

</body>
</html>

如果是要把js单独写在一个文件里,则在html文件里的代码是:

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<body>
<p id="s">用户已登录</p>

 <script src="login.js"></script>
 
 
 <input type="text" name="username">
 <input type="button" value="登录" onclick="checkStu()">
 

</body>
</html>

注意,原来script里面的内容没有了,转而变为对login.js的调用。

在login.js文件中的代码是:

1
2
3
4
5
6
 function checkStu() {     //函数位置可以写在三个地方
 alert ("欢迎您,小狮子");//弹窗,最好的检查代码是否有误的方式。
 alert ("how are you going today");
 alert ("have a good day, see you");
 document.getElementById("s").innerHTML="用户小狮子已登录";  //向页面输出内容
 }

发表评论

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