<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
<script>
alert("我的第一个 JavaScript");
</script>
JavaScript有三种书写格式, 分别是"行内式"、"页内式"、"外链式"
行内式
将script代码直接写在元素内部
<button onclick="alert('今天天气很好!');">今天天气很好!</button>
页内式
脚本可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中。
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</body>
</html>
如果把 JavaScript 代码放入函数中,就可以在事件发生时调用该函数;
否则直接按照代码顺序执行
一般先写HTML,然后再写JavaScript。
外链式格式
把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
使用
<script type="text/javascript" src="01-js书写格式.js"></script>
外链式注意点
- 外链式的script代码块中不能编写js代码, 即便写了也不会执行
<script type="text/javascript" src="index.js">
alert("今天天气很好!"); // 不会被执行
</script>
- 由于每次加载外链式的js文件都会发送一次请求, 这样非常消耗性能, 所以在企业开发中推荐将多个JS文件打包成为一个JS文件,以提升网页的性能和加载速度。
/***html代码***/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>javascript 语法规范</title>
<style media="screen">
</style>
<script type="text/javascript">
// 页内式 写在前面最好添加window.onload = function(),也可以不添加,建议添加
window.onload = function(){
alert('今天天气很好!');
}
</script>
</head>
<body>
<button onclick="alert('今天天气很好!');">行内式</button>
<!-- 页内式 建议写在最后,按钮现创建 -->
<script type="text/javascript">
window.onload = function(){
alert('今天天气很好!');
}
</script>
<!-- 外链式格式 -->
<script src="js/index.js">
<!-- 中间不要写任何js代码,写了也不会执行 -->
alert('今天天气很好!');
</script>
</body>
</html>
/***.js文件中代码***/
alert('今天是个好天气')