JS |
您所在的位置：网站首页 › 编写html网页的三种方法 › JS |
JS
|
JS-01-在HTML中嵌入JavaScript代码的三种方式
1.JavaScript概述
Web的组成有HTML、CSS还有即将要学习的JavaScript(简称JS)。 CSS和JS主要是服务于HTML，前者让HTML更加美观，后者能够让HTML动起来。 如果把HTML比作一只光秃秃的鸟的话，那么CSS就是鸟的羽毛，JS就是让鸟能够飞起来的肌肉。
JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。 在JS中有很多事件，其中有一个事件就叫做：鼠标单击，click。并且任何事件都会对应一个事件句柄，onclick。 注意：事件和事件句柄的区别是：事件句柄是在事件单词前面加一个on，且事件句柄是以HTML标签的属性存在的。 第一种方式：以事件句柄的方式。 2.1通过事件句柄的方式嵌入JS代码下面编写程序，实现一个按钮，当点击时，弹出一个对话框，显示“Hello JS!” 在JS中有一个内置的对象叫做window，全部小写，可以直接拿来使用。【window代表的是浏览器对象】 window对象有一个函数叫做alert，可以实现弹窗，用法是：window.alert("message"); 在HTML中嵌入JavaScript的第一种方式
思考：onclick="JS代码"，执行原理是什么？ 当页面打开时，js代码不会执行执行，只是把这段JS代码注册到按钮的click事件上去了，当这个按钮发生click事件后，注册在onclick后面的JS代码会被浏览器自动调用。注意：JS中的一条语句结束之后可以使用分号“；”，也可以不使用。 2.2可以在一个事件句柄中写多条JS语句 在HTML中嵌入JavaScript的第一种方式
类似于CSS中的内部样式表，JavaScript也可以在HTML代码中编写脚本代码块。 嵌入JS的第二种方式 window.alert("Hello World") window.alert("Hello JS")
另外，javascript的脚本块在一个页面中可以出现多次，且出现位置也没有要求。 window.alert("顶部脚本块") 嵌入JS的第二种方式 window.alert("头部脚本块") window.alert("Hello World") window.alert("Hello JS") window.alert("脚部脚本块")
alert函数会阻塞整个HTML页面的加载，直到点击确定。
JS的注释书写格式与java一样。 //单行注释 /* 多行注释 */ window.alert("Hello World") window.alert("Hello JS")而java有独特的javadoc注释。 这里的注释信息会被javadoc.exe工具解析提取生成帮助文档。 /** * * @return 返回值 */ public static int dosome(){ return 3; } 4.在HTML中嵌入JavaScript代码的第三种方式类似于CSS的外部样式表，我们也可以将JavaScript的代码放到一个外部的后缀名为.js的文件中去。 这种方式也是推荐使用的。 4.1通过引入外部js文件的方式嵌入JS代码js文件： alert("Hello JS") alert("Hello World")html文件: 嵌入JS的第三种方式引入外部独立的js文件时，js文件中的代码会遵循自上而下的顺序逐行执行：
但实际开发中这种需求很少。 4.3引入js文件时，能否在script标签内再编写js代码，会执行吗？ 嵌入JS的第三种方式 alert("内部代码块")
由结果来看，不会执行。 4.4引入js文件后，能否再编写另外的js脚本块呢？ 嵌入JS的第三种方式 alert("内部代码块2")
由结果来看，可以。 |
【本文地址】