创建简单的脚本-JavaScript入门基础（003）

最新推荐文章于 2024-04-27 17:42:57 发布

虾米大王

最新推荐文章于 2024-04-27 17:42:57 发布

阅读量2.2k

点赞数 1

分类专栏： JavaScript 文章标签： css css3 javascript html html5

本文链接：https://blog.csdn.net/modern358/article/details/112253997

版权

JavaScript 专栏收录该内容

329 篇文章 0 订阅

订阅专栏

今天我们分享关于如何创建脚本的内容。

JavaScript代码是和页面一起发送给浏览器执行的，有两种方法可以把代码关联到HTML页面中。

第一种方法就是把JavaScript语句直接包含在HTML文件中，像这样：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <script>      .......代码
    </script></body></html>

第二种方法，是把JavaScript代码保存到单独的文件中，然后利用src属性，导入到HTML中，像这样：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="xxx.js"></script></head><body>
</body></html>

导入的js代码文件，路径可以是一个相对路径，也可以是一个绝对路径。把JavaScript代码保存到单独的文件中，有以下好处，

当JavaScript代码有更新时，我们只需要更新js文件即可，不影响页面文件和css样式文件；HTML页面的代码，可以保持简洁，提高维护性和可读性；提高性能，浏览器会把包含的文件进行缓存，提高加载速度。

坏习惯的示例代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <p>some content.......</p>    <script src="xxx.js"></script></body></html>

当把JavaScript代码放置在body区域时，页面加载过程中，遇到代码就会解释执行，如果代码中试图访问未定义的DOM元素，或者试图访问还未加载完成的DOM元素，容易造成错误。

一般情况下，我们在引入js文件时，都需要放置在head部分，如果需要在body部分放置代码，那么一定记住去访问已经生成了的DOM元素。

编写JavaScript语句：

JavaScript程序代码是由一些单独的指令组成的，这些指令称为语句。为了能够让浏览器正确的解释语句，一定要按照书写要求编写代码。

方式一：

语句1语句2语句3

方式二：

语句1；语句2；语句3；

在JavaScript代码中，语句按照行解释，分号结束不是必须的，所以如果你的语句没有分号结束，那么请按照一行独占的方法，写代码，如果有分号结束时，语句可以排列在一行中。

但是在实际开发中，我们都是需要按照一定规范编写代码的，需要符合人类的读写规范，最起码要让别人能够清晰的读懂你的代码，建议代码这样：

语句1；语句2；语句3；

不要嫌浪费空间，这点空间对于人类的识别来说，可以忽略的。哪怕就是声明一个变量，你也要独占一行。

代码注释：

代码的编写是为了让计算机执行，但是有些代码复杂度高，一定要编写注释，注释是给人读的，是为了能够让团队成员，或者其他程序要看懂的描述。

注释分为单行注释和多行注释。

单行注释，使用英文状态下的两个反斜杠表示， //；

语句1；//这是变量语句2； //这是表示式语句； //函数的作用是什么

很多教程中，都建议如此写注释，在比较短的语句后，标识一个注释，来解释说明前面的语句的作用。但是以我的经验来说，这样写的注释，虽然阅读起来比较方便，清晰，但是对于后期修改完善代码，不利于。

我建议大家这样写注释：

//这是变量 语句1；//这是表达式语句2；//函数的作用是什么语句3；

注释永远到在语句的上方，可以做出比较详细的解释，修改语句时，也不会影响注释。

示例代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script>                var a = 1;  // 加数1        var b = 2;  // 加数2        var c = a + b; //两数之和                        //车辆名称        var car = '车辆';        //是否可以开动        var isRun = true;        //是否进行维修        var isRepair = false;</script></head><body>
</body></html>

多行注释：

多行注释使用符号反斜杠和星号表示，开始符号是 /*，结束符号是 */。

对于解释文字比较多，需要注释的内容较多时，可以使用此种方式。

/*  此函数的作用是什么，有哪些参数，返回值是什么  函数的作者是谁  函数的编写日期是哪天  函数的版本是多少*/函数；

有了编写注释的好习惯，既有利于自己日后维护代码，也有利于团队成员之间的交流沟通，注释对于计算机执行来说是忽略的，所以不会占用计算机执行的算力。

虾米大王

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录