2022年的三月末,我参与了一个项目的开发并负责前端开发,使用的技术栈有HTML\CSS\JS,项目采用VUE框架,其中涉及到百度地图API 的使用。在这个过程中我对于js这门语言有了更近一步的了解,在此写一些我认为js中重要的特性或规则,希望有一定编程基础的同学看到后能有所帮助。
一、JS的引入
我认为不管是学习一门怎么样的语言,最先要搞清楚的事情应该是在怎样的环境下这门语言能够发挥它的作用。对于一般的编程语言来说,就是要配置好相应的编译环境。对于javascript这样一个应用于前端的语言来说,就是要告诉浏览器识别它。
这里暂且把javascript的引入分为两种,第一种是 内部引入, 第二种是外部引入
- 内部引入
内部引入是指在页面内通过标签<script></script>直接写入脚本,<script>标签会告诉编译器,接下来的部分请使用javascipt的标准来识别和编译。它一般会被放置在<head>或<body>中,大概结构如下:
<html>
<head>
xxxxxx
<script>
XXXXX
</script>
</head>
<body>
<script>
XXXXXXX
</script>
</body>
</html>
- 外部引入
外部引入是指js中的内容单独写在一个后缀为xxx.js的文件中,然后在页面中通过 <script src="xxx.js的路径"></script>将其引入到页面中。通过这种方式可以分离js和html,使得编写程序时文档具有更高的可读性。
这里我想提到一点,当你需要一份网上的开源的js脚本时
你可以通过
<script src="https://xxxx/xxx/myScript1.js"></script>
的方式引入js文件并为自己所用。
或者可以将其下载到本地然后在<script src="xxx.js的路径"></script>填入相应的本低路径。
二、输出
说完了这一部分,我们再来介绍一下javascript中能够产生输出的语句。这是在我初学时感到比较有趣的一部分。实际上js产生输出只有以下四种情况:
- 使用
window.alert()
写入弹出框 - 使用
document.write()
写入 HTML - 使用
innerHTML
写入 HTML 元素 - 使用
console.log()
写入浏览器控制台
其中console.log()的输出要在浏览器的控制台查看:
在浏览器右键点击空白
点击 检查 就可以进入开发者界面啦
console.log()是调试程序的过程中非常好用的语句。
三、变量的作用域
说到这里就不得不提一下ES5、ES6是些什么了。ES是ECMAScript的简称,它是javascript的语言标准,就是说javascript这门语言也是有版本的,是不断地被更新和修正以更好地使用的,现在很多情况下ES6泛指ES2015及之后的新增特性,虽然之后的版本应当称为ES7、ES8等。
切入正题,自ES6之后,之前的
var x =1;
这样的命名方式被取缔了,如果你在ES6的编译环境下这样写是会报错的,ES6只支持以下两种声明的方式
//用let声明
let x ;
let y=1;
//用const声明
const x;
const y=1;
let和const声明的变量具有块作用域,