JavaScript用法

<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('今天是个好天气')
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 9,721评论 0 13
  • JavaScript 资源大全中文版很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的...
    wwmin_阅读 8,912评论 1 91
  • 传说,人死之后灵魂会飘荡,会飘很久很久,具体有多久没人知道,因为死人说的话活着的人是听不到的,而死去的世界,时间无...
    青只阅读 2,540评论 0 2
  • "这是一件不可能完成的事情!" "你的能量超乎你的想象!" "我相信!" "相信相信的力量!" 早九点,晚无点。紧...
    毛十八321阅读 2,875评论 0 0
  • 关注全球妈妈育儿指南 每天学习全球妈妈育儿干货 对孩子的能力抱有现实的期望,对于孩子的健康成长至关重要。例如,如果...
    全球妈妈育儿指南阅读 2,548评论 0 0

友情链接更多精彩内容