在介绍JavaScript语法前，我们需要知道，学习语法必须要多利用手敲代码来巩固记忆。因此，由于JavaScript的特性，它不能像C++和Java一样独立地编译及运行，我们需要在调试运行JavaScript前创建好它的HTML载体。本文主要介绍了使用vs code搭建网页开发环境的一些简单操作、HTML文档模板标签的部分作用和网页开发时的一些注意事项，有基础的同学可以跳过。

　　事实上，我们可以用任何的文本编辑器来编写代码，甚至是一个记事本。编写JavaScript代码的方式有很多，可以直接在HTML文档中添加<script></script>标签并嵌套JavaScript语句，也可以新建一个.js后缀的文件，并用<script src="(这个js文件的文件名).js"进行引用。在编写多个网页后我们会发现，将内容（HTML）、设计（CSS）和交互（JavaScript）分离是一个思路非常清晰的做法。由于visual studio code对JavaScript以及前端开发的极力支持，本文以visual studio code来举例。我们登陆visual studio code官网（https://code.visualstudio.com/Download）下载安装好了以后，打开vs code，这时我们的编辑器是英文版的，通过选择左侧这个矩形图标的扩展按钮，它是vs code进行众多开发配置的关键，通过安装各类扩展，vs code可以完成许多工作，我们搜索“Chinese”并安装，重启vs code以后就完成了简单的中文版开发环境的搭建。

完成安装后，打开并选定文件目录，新建一个后缀为.html的文件，输入一个英文感叹号“!”，按Tab，vs code就会自动帮你生成一段html模板代码，现在我们来解析一下这段模板每句话的意思：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

 </head>

 <body>

 </body>

 </html>

　　首先， <!DOCTYPE html> 表示该文档是一个HTML5文档，相应地，如果你想要创建其他标记语言文档，例如XML1.1、HTML4.01 Strict等等，就要改变这句话里面的“html”为其他内容，可以自行上网查找。

　　其次，<html></html>标签规定了整一个文档的开始与结束，它有一个lang属性，意思是这个文档内容的语言类型，例如这里的值是“en”，表示是英文的；如果值是“zh-CN”，它表示该文档内容语言是中国大陆的中文。这个属性的作用在于帮助浏览器检测语言类型并且启动翻译操作。例如我在中文操作系统下运行Google Chrome，当检测到我的文档中lang属性的值是en时，浏览器就会在右上角提醒我：

　　接下来，<head></head>标签中又默认嵌套了<meta><title>等标签。<meta>标签中指定类似浏览器编码、初始化该网页时浏览器的大小、该网页的关键字（这一点主要是针对搜索引擎对你页面信息的爬取效率）等等的属性，这一些内容我们称之为这个网页的元信息（meta的中文翻译就是元，不是人民币的元，是最小单位的概念）。而<title></title>中则可以填入这个页面的标题，我们可以通过标签的名字非常直观地读懂它们的用途。我们编写程序时为变量取名，也要尽量做到见名知意。

　　最后，<body></body>中嵌套你希望在文本中加入的内容，后续在编写HTML文档时我们会继续介绍。

　　快捷打开网页的方法：下载“View In Browser”插件，安装，在vs code界面左侧的资源管理器中右键点击我们刚刚创建的HTML文件，选择“View In Browser”，直接在浏览器打开这个HTML文档。

　　JavaScript调试方法：在网页中点击F12，会弹出浏览器调试窗口，点击“Console（控制台）”，可以看到我们输出的内容或者编写想要添加进去的JavaScript代码，在调试时，我们通常希望输出一个中间值看错误是不是在这里发生，这时候我们一般会用到这些语句： console.log(someElement); 或者 alert(someElement); 通过读这些函数的名字我们就可以猜到它们的作用。

　　最后的最后，在同目录下新建一个demo.js文件，并在<body>标签的末尾处添加一句：

<script src="./demo.js"></script>

　　我们就可以将JavaScript代码嵌入到HTML文档中了。如果要添加CSS文件，则在<head>标签中嵌套一句：

<link href="./demo.css">

　　<script>标签其实也可以写在<head>标签中，只是浏览器会按顺序加载页面，写在<body>末尾意味着浏览器会先把HTML的内容加载好并最先呈现给用户，而最后再加载其他的交互功能，也包括操作DOM的语句。这样就避免了类似

var element = document.getElementById("aElement");

　　这样的语句获取不到这个元素而不能正常执行。

林大妈的JavaScript基础知识（二）：编写JavaScript代码前的一些简单工作的更多相关文章

  1. 林大妈的JavaScript基础知识（三）：JavaScript编程（2）函数

    JavaScript是一门函数式的面向对象编程语言.了解函数将会是了解对象创建和操作.原型及原型方法.模块化编程等的重要基础.函数包含一组语句,它的主要功能是代码复用.隐藏信息和组合调用.我们编程就是 ...

  2. js基础知识温习：Javascript中如何模拟私有方法

    本文涉及的主题虽然很基础,在很多人眼里属于小伎俩,但在JavaScript基础知识中属于一个综合性的话题.这里会涉及到对象属性的封装.原型.构造函数.闭包以及立即执行表达式等知识. 公有方法 公有方法 ...

  3. JavaScript基础笔记二

    一.函数返回值1.什么是函数返回值    函数的执行结果2. 可以没有return // 没有return或者return后面为空则会返回undefined3.一个函数应该只返回一种类型的值 二.可变 ...

  4. 学习javascript基础知识系列第二节 - this用法

    通过一段代码学习javascript基础知识系列 第二节 - this用法 this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascr ...

  5. 学习javascript基础知识系列第三节 - ()()用法

    总目录:通过一段代码学习javascript基础知识系列 注意: 为了便于执行和演示,建议使用chrome浏览器,按F12,然后按Esc(或手动选择)打开console,在console进行执行和演示 ...

  6. JavaScript 基础知识 - BOM篇

    前言 本篇文章是JavaScript基础知识的BOM篇,如果前面的<JavaScript基础知识-DOM篇>看完了,现在就可以学习BOM了. 注意: 所有的案例都在这里链接: 提取密码密码 ...

  7. Javascript基础知识总结一

    Javascript基础知识总结一 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  8. java 基础知识二 基本类型与运算符

    java  基础知识二 基本类型与运算符 1.标识符 定义:为类.方法.变量起的名称 由大小写字母.数字.下划线(_)和美元符号($)组成,同时不能以数字开头 2.关键字 java语言保留特殊含义或者 ...

  9. JavaScript基础知识（概念、常量和变量）

    1.JavaScript概念 JavaScript是脚本语言; 编写之后,可以直接运行(缺失了编译的过程) 2.JavaScript发展 LiveScript    =>    JavaScri ...

随机推荐

  1. PWN菜鸡入门之栈溢出（1）

    栈溢出 一.基本概念: 函数调用栈情况见链接 基本准备: bss段可执行检测: ​ gef➤ b main Breakpoint at . gef➤ r Starting program: /mnt/ ...

  2. memecached存放session数据

    memcached存放session 1.session数据需要频繁调用. 2.session数据不需要永久性的保存在服务端. 3.在集群中,可以将session存放在memcached中或者是在数据 ...

  3. 长春理工大学第十四届程序设计竞赛（重现赛）H

    H .Arithmetic Sequence 题目链接:https://ac.nowcoder.com/acm/contest/912/H 题目 数竞选手小r最喜欢做的题型是数列大题,并且每一道都能得 ...

  4. spring源码深度解析— IOC 之 开启 bean 的加载

    概述 前面我们已经分析了spring对于xml配置文件的解析,将分析的信息组装成 BeanDefinition,并将其保存注册到相应的 BeanDefinitionRegistry 中.至此,Spri ...

  5. mount -o remount,rw /命令什么意思

    1.关于如何改变linux中,对只有Read-only filesystem的文件,如何改为为可写.可读权限? I.可以执行 mount -o remount,rw /II.执行完毕后,会出现以下字样 ...

  6. 关于java中构造方法、实例初始化、静态初始化执行顺序

    在Java笔试中,构造方法.实例初始化.静态初始化执行顺序,是一个经常被考察的知识点. 像下面的这道题(刚刚刷题做到,虽然做对了,但是还是想整理一下) 运行下面的代码,输出的结果是... class ...

  7. leadcode的Hot100系列--78. 子集--位运算

    看一个数组的子集有多少,其实就是排列组合, 比如:[0,1] 对应的子集有:[] [0] [1] [1,1] 这四种. 一般对应有两种方法:位运算 和 回溯. 这里先使用位运算来做. 位运算 一个长度 ...

  8. 个人博客小案例（纯Django搭建）

    在看这篇文章的时候,必须有django基础,如果没有点击访问 一.环境配置 新建项目并做配置项目创建,创建APP并注册 创建模板并配置相应的路径,点击下载模板,配置方法点击访问 创建静态文件并配置,点 ...

  9. Codeforces Gym100623J：Just Too Lucky（数位DP）

    http://codeforces.com/gym/100623/attachments 题意:问1到n里面有多少个数满足:本身被其各个数位加起来的和整除.例如120 % 3 == 0,111 % 3 ...

  10. Linux soft lockup 和 hard lockup

    一. 整体介绍 soft lockup:检测调度异常, 一般是驱动禁止调度或者阻塞比如while(1), 导致无法调度其他线程, 需要注意的是, 应用程序while(1)不会影响其调度, 只要有更高的 ...