在介绍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. js数字转成金额格式

    本文有以下三个段落 1.方法展示 2.方法说明 3.方法实例 1.方法展示 //将数字转换成金额显示 function toMoney(num){ num = num.toFixed(2); num ...

  2. http-get调用接口简单代码

    一.简单便捷的httpget调用接口,并且返回接口数据1.导入相应的jar包: 2.代码如下: HttpGet get=null; try {HttpClient httpClient = new D ...

  3. [UWP]从头开始创建并发布一个番茄钟

    1. 自己用的番茄钟自己做 在PC上我一直使用"小番茄"作为我的番茄钟软件,我把它打开后放在副显示器最大化,这样不仅可以让它尽到本分,而且还可以告诉我的同事"我正在专心工 ...

  4. Git的忽略、分支、分支与主线的合并、远程仓库的操作

    如果想了解 Git 以及一些基础命令的使用,请看我的另一篇博客: http://www.cnblogs.com/haojun/p/7797508.html 这篇博客会跟大家介绍一下怎么在提交的时候忽略 ...

  5. Codeforces Round #564 (Div. 2)A

    A. Nauuo and Votes 题目链接:http://codeforces.com/contest/1173/problem/A 题目 Nauuo is a girl who loves wr ...

  6. Ajax出现error常见情况（详细版）-火狐浏览器（Firefox）兼容性问题

    作为一个程序员,遇到兼容性问题真的很苦恼,尤其是对我这种前端小菜鸡来说遇到了甚是凄惨.一般来说兼容性问题出现率Chrome < IE < Firefox  (╯°Д°)╯︵┴┴ . 言归正 ...

  7. Python绘制语谱图+时域波形

    """Python绘制语谱图""" """Python绘制时域波形""" # 导 ...

  8. HihoCoder 1496：寻找最大值（思维DP）

    http://hihocoder.com/problemset/problem/1496 题意:中文. 思路:一开始做有一种想法,把所有的数都变成二进制后,最优的情况肯定是挑选所有数中最高位的1能同时 ...

  9. RedisCrawlSpider

    这个RedisCrawlSpider类爬虫继承了RedisCrawlSpider,能够支持分布式的抓取.因为采用的是crawlSpider,所以需要遵守Rule规则,以及callback不能写pars ...

  10. 图片懒加载，Selenium，PhantomJS

    引入 今日概要 图片懒加载 selenium phantomJs 谷歌无头浏览器 知识点回顾 验证码处理流程 今日详情 动态数据加载处理 一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材ht ...