创建简单的脚本-JavaScript入门基础(003)

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

 

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>

 

多行注释:

 

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

 

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

 

​​​​​​​

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

 

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

 

 


 

 

 

图片

已标记关键词 清除标记
相关推荐
课程简介: 历经半个多月的时间,Debug亲自撸的 “企业员工角色权限管理平台” 终于完成了。正如字面意思,本课程讲解的是一个真正意义上的、企业级的项目实战,主要介绍了企业级应用系统中后端应用权限的管理,其中主要涵盖了六大核心业务模块、十几张数据库表。 其中的核心业务模块主要包括用户模块、部门模块、岗位模块、角色模块、菜单模块和系统日志模块;与此同时,Debug还亲自撸了额外的附属模块,包括字典管理模块、商品分类模块以及考勤管理模块等等,主要是为了更好地巩固相应的技术栈以及企业应用系统业务模块的开发流程! 核心技术栈列表: 值得介绍的是,本课程在技术栈层面涵盖了前端和后端的大部分常用技术,包括Spring Boot、Spring MVC、Mybatis、Mybatis-Plus、Shiro(身份认证与资源授权跟会话等等)、Spring AOP、防止XSS攻击、防止SQL注入攻击、过滤器Filter、验证码Kaptcha、热部署插件Devtools、POI、Vue、LayUI、ElementUI、JQuery、HTML、Bootstrap、Freemarker、一键打包部署运行工具Wagon等等,如下图所示: 课程内容与收益: 总的来说,本课程是一门具有很强实践性质的“项目实战”课程,即“企业应用员工角色权限管理平台”,主要介绍了当前企业级应用系统中员工、部门、岗位、角色、权限、菜单以及其他实体模块的管理;其中,还重点讲解了如何基于Shiro的资源授权实现员工-角色-操作权限、员工-角色-数据权限的管理;在课程的最后,还介绍了如何实现一键打包上传部署运行项目等等。如下图所示为本权限管理平台的数据库设计图: 以下为项目整体的运行效果截图: 值得一提的是,在本课程中,Debug也向各位小伙伴介绍了如何在企业级应用系统业务模块的开发中,前端到后端再到数据库,最后再到服务器的上线部署运行等流程,如下图所示:
©️2020 CSDN 皮肤主题: 撸撸猫 设计师:C马雯娟 返回首页