JavaScript(JS)是一种广泛使用的编程语言,允许在网页中添加交互性和动态效果。在HTML中,<script>标签用于引入和执行JavaScript代码。
JS代码
js1.html \\js三种使用方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="alert('你好');">元素绑定事件</button>
<script>
alert("这是内嵌方式的弹窗");
</script>
<script src="js2.js"></script>
</body>
</html>
js2.js \\js外部脚本文件
alert("这是外链方式的弹窗")
js3.js \\三种输出方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
alert('弹窗输出');
console.log("控制台输出")
document.write("页面输出")
</script>
</body>
</html>
JS三种使用方式
1. 元素绑定事件
<button οnclick="alert('你好');">元素绑定事件</button>
在这个例子中,<button>标签使用了一个内联事件处理器 onclick。当用户点击这个按钮时,浏览器会执行 onclick 属性中的JavaScript代码。代码调用了 `alert` 函数,显示一个包含消息“你好”的警告框。
2. 内嵌脚本
<script>
alert("这是内嵌方式的弹窗");
</script>
这个 <script> 标签包含了一个内嵌的JavaScript代码块。当浏览器解析到这个标签时,会执行标签内的代码。在案例中,代码块中的 alert 函数会在页面加载时被调用,弹出一个包含消息“这是内嵌方式的弹窗”的警告框。
3. 外部脚本文件
<script src="js2.js"></script>
这个 <script>标签用于引入一个外部的JavaScript文件,即 `js2.js`。这个文件包含了JavaScript代码,与内嵌不同,它是存储在一个单独的文件中。这种方法有助于保持HTML代码的清晰和整洁。
js2.js 文件的内容如下:
alert("这是外链方式的弹窗");
当浏览器加载HTML页面时,会加载并执行 `js2.js` 文件中的代码,将弹出一个包含消息“这是外链方式的弹窗”的警告框。
JavaScript三种输出方式
1. 弹窗输出:使用 alert() 函数在浏览器中弹出一个警告框,显示传递的字符串。
alert('弹窗输出');
2. 控制台输出:使用 console.log() 函数将信息输出到浏览器的控制台。进入控制台查看和调试代码的执行结果,而不会干扰页面的正常显示。
console.log("控制台输出"); //f12或者ctrl+shift+j打开浏览器控制台
3. 页面输出:使用 document.write() 函数将字符串输出到当前文档的输出流中。会在页面上直接显示文本,在页面加载后使用 document.write(),会覆盖页面的当前内容。
document.write("页面输出");
JavaScript注释
在 <script> 标签内,有两种注释方式:
1. 单行注释:使用 // 进行注释,注释内容会一直持续到行尾。可以使用快捷键 Ctrl + /(在大多数代码编辑器中)快速添加或删除单行注释。
// Ctrl + ? 单行注释
2. 多行注释:使用 /* 开始,*/ 结束,可以跨越多行。可以使用快捷键 Alt + Shift + A(在大多数代码编辑器中)添加或删除多行注释。
/*
alt + shift + A 多行注释
*/