上一节我们讲了JS编码的基本约束,本节我们将进入实操环节,详细讲解JS如何在VScode上进行编码。

众所周知,JS可以通过在.txt文档上编码 ,然后更改文件名为.html实现在浏览器上运行。可是由于在文本上编码不能实现自动补齐以及查错,所以严格杜绝使用这种原始的方式进行编码!今天,我们可以使用VScode进行编码,以提升我们的JS学习效率。

如果大家还没有VScode编辑器,我们可以前往《编译器教程》进行VScode的下载和学习。

为了能够舒适地进行JS编码,我们至少要下载3个插件:1. chinese插件(切合中文使用习惯)。2. open in borwser(方便快捷键‘alt+B’查看渲染效果)。3. EasyLess(可选,主要是提高CSS书写效率)。

VScode的使用小技巧

下载完成后,我们可以新建.html书写JS代码:

代码讲解:通过按钮点击事件执行函数f(),f()函数是将选中的标签h1进行内容追加’<br>Hello, JS!‘。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>欢迎来到Dotcpp的JavaScript(JS)教程</h1>
    <button onclick="f()">更新局部标签内容</button>
</body>
<script>
   function f(){
        document.querySelector('h1').innerHTML+='<br>Hello, JS!'
    }
</script>
</html>

VScode展示JS编码区域

快捷键'alt+B'跳转浏览器查看效果:

JS修改标签内容

读者即使不理解代码也没关系,这里的内容是为了让读者有一个JS书写的基本流程,后续我们会详细讲解各个部分。读者只需要知道如何使用VScode来编写JS就好了。

总结:通过VScode,我们就不用原始地在.txt文本上书写JS代码了,读者需要学会习惯这个编码方式。

点赞(88)

C语言网提供由在职研发工程师或ACM蓝桥杯竞赛优秀选手录制的视频教程,并配有习题和答疑,点击了解:

一点编程也不会写的:零基础C语言学练课程

解决困扰你多年的C语言疑难杂症特性的C语言进阶课程

从零到写出一个爬虫的Python编程课程

只会语法写不出代码?手把手带你写100个编程真题的编程百练课程

信息学奥赛或C++选手的 必学C++课程

蓝桥杯ACM、信息学奥赛的必学课程:算法竞赛课入门课程

手把手讲解近五年真题的蓝桥杯辅导课程

Dotcpp在线编译      (登录可减少运行等待时间)