在介绍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模板代码，现在我们来解析一下这段模板每句话的意思：

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.      <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.      <title>Document</title>
  8.  </head>
  9.  <body>
  10.  
  11.  </body>
  12.  </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. ZooKeeper学习之路（五）—— ACL权限控制

    一.前言 为了避免存储在Zookeeper上的数据被其他程序或者人为误修改,Zookeeper提供了ACL(Access Control Lists)进行权限控制.只有拥有对应权限的用户才可以对节点进 ...

  2. CSS清除默认样式代码

    html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, s ...

  3. ubuntu16.04基本设置

    1. ubuntu16.04开启ssh https://jingyan.baidu.com/article/f54ae2fc6f9eef1e93b8497a.html 2. windows 远程桌面连 ...

  4. python学习 -女神或者男神把微信消息撤回后好慌，有了这个妈妈再也不担心你看不到女神或者男神撤回的消息了（超详解）

    简介 有时候在忙工作,女朋友发了一个消息,就撤回了,但是人天生的都有一颗好奇心,而且在当今这个时代找个女朋友不容易,一个程序猿找一个女朋友更是不容易的.人家好不容易跟你,你还不得把人家当老佛爷侍候着, ...

  5. c++学习书籍推荐《C++编程思想第一卷》下载

    百度云及其他网盘下载地址:点我 编辑推荐 <C++编程思想>(第1卷)(第2版)第1版荣获"软件开发"杂志评选的1996年度 图书震撼大奖,中文版自2000年推出以来, ...

  6. Spring MVC中使用FastJson自定义注解

    最近在做.net转译成Java.其中遇到一个很蛋疼的问题.以前.net属性名都是首字母大写.造成返回给客户端的JSON字符串属性名称都是首字母大写.为了和前端对接我们以前都是如下图所示做法 publi ...

  7. Spring Boot + Elasticsearch实现大批量数据集下中文的精确匹配-案例剖析

    缘由 数据存储在MYSQ库中,数据基本维持不变,但数据量又较大(几千万)放在MYSQL中查询效率上较慢,寻求一种简单有效的方式提高查询效率,MYSQL并不擅长大规模数据量下的数据查询. 技术方案 考虑 ...

  8. Spring Boot 2.0 迁移指南

    ![img](https://mmbiz.qpic.cn/mmbiz_jpg/1flHOHZw6Rs7yEJ6ItV43JZMS7AJWoMSZtxicnG0iaE0AvpUHI8oM7lxz1rRs ...

  9. Redis HyperLogLog用法简介

    (1)HyperLogLog简介 在Redis 在 2.8.9 版本才添加了 HyperLogLog,HyperLogLog算法是用于基数统计的算法,每个 HyperLogLog 键只需要花费 12 ...

  10. Python入门基础(7)

    这一篇来介绍一下函数里面的一些东西 函数的参数 必须参数:必须参数必须以正确的顺序传入函数.调用时的数据必须和声明时的一样 如果根据参数名来传入参数值,则无须遵守定义形参的顺序,这种方式被称为关键字( ...