web前端知识集合——javascript基础篇之javascript背景历史和运行环境（一）

前言：温故而知新，可以为长也！万变不离其宗，无论是现在web前端技术衍生出多么优秀，好用的框架，插件，都离不开这门语言的基础知识。掌握各种优秀的框架，插件，只是“善用工具的人”，深刻领悟语言的基础，会成为“创造优秀工具的人”。自勉，谨记！

一、十个步骤学会一门IT语言基础——javascript学习的十步。

（1）了解这门语言的背景知识：历史，现状，趋势，特点，应用领域。

（2）搭建一个开发环境：能输出 Hello World表示搭建成功。

（3）变量和常量：

（4）数据类型：

（5）运算符：

（6）逻辑结构：

（7）通用小程序：99乘法表，质数，猴子吃桃等小应用。

（8）函数和对象：

（9）第三方组件，库，框架：

（10）实用小项目：

二、安装十个步骤开始梳理javascript基础知识。

1. 简单了解javascript这门语言的背景历史：工欲善其事必先利其器，学习一门语言的开始，就是先了解这门语言的背景历史。

1.1 定义： js是运行在JS解释器/引擎（即运行环境）中的解释型轻量级的弱脚本语言（编程语言分2中，解释型（如c++等）和编译型（如python,javascript等）），可在所有的现代浏览器执行。

1.2 使用： JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

1.3 发展史： 1992年诞生->1995年改名javascript->1996年微软克隆javascript为Jscript。

1.4 浏览器的内核包括：

（1）内容的排版引擎——解析HTML和CSS。不同浏览器内核不一样。

（2）脚本解释引擎——解释JS。

浏览器内容名字	开发者	类型	浏览器	特点
trident	微软	排版引擎	Trident内核的常见浏览器有：　IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）；360安全浏览器（1.0-5.0为Trident，6.0为Trident+Webkit，7.0为Trident+Blink）猎豹极轻浏览器，360极速浏览器（7.5之前为Trident+Webkit，7.5为Trident+Blink）猎豹安全浏览器（1.0-4.2版本为Trident+Webkit，4.3及以后版本为Trident+Blink）猎豹极轻浏览器，傲游浏览器（傲游1.x、2.x为IE内核，3.x为IE与Webkit双核）、百度浏览器（早期版本）、世界之窗浏览器（最初为IE内核，2013年采用Chrome+IE内核）、2345浏览器、腾讯TT、淘宝浏览器、采编读浏览器、搜狗高速浏览器（1.x为Trident，2.0及以后版本为Trident+Webkit）、阿云浏览器（早期版本）、瑞星安全浏览器、Slim Browser、 GreenBrowser、爱帆浏览器（12 之前版本）、115浏览器、155浏览器、闪游浏览器、N氧化碳浏览器、糖果浏览器、彩虹浏览器、瑞影浏览器、勇者无疆浏览器、114浏览器、蚂蚁浏览器、飞腾浏览器、速达浏览器、佐罗浏览器、海豚浏览器（iPhone/iPad/Android）、UC浏览器（Webkit内核+Trident内核）等。	仅限window系统，不能跨平台。
Gecko	即Firefox内核	排版引起	Gecko内核常见的浏览器：Mozilla Firefox、Mozilla SeaMonkey、waterfox（Firefox的64位开源版）、Iceweasel、Epiphany（早期版本）、Flock（早期版本）、K-Meleon。	可跨平台
Presto	Opera(已废弃)		使用Presto的除开Opera以外，只剩下NDSBrowser、Wii Internet Channle、Nokia 770网络浏览器。	已废弃
Webkit	苹果公司自的Safari内核（Chrome内核原型）	Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎	WebKit内核常见的浏览器：傲游浏览器3、Apple Safari （Win/Mac/iPhone/iPad）、Symbian手机浏览器、Android 默认浏览器。现在一般将苹果的浏览器、chrome浏览器、移动端的一些浏览器都成为webkit内核不做细分。
Chromium	chrome谷歌		chrome的内核确切的说是Chromium引擎，它是使用苹果公司的WebKit作为浏览器内核原型，是WebKit内核的一个分支。

1.5 javascript编译器：常用的编译器有HBuilder，Visual Studio Code，文本文档，Editplus，DW，sublime text，WebStorm等，根据个人喜好，网上都有汉化破解版的。

Editplus编译器压缩包网盘链接：https://pan.baidu.com/s/1kernHC6vUyqlq9sOa4SpQg ，提取码：duo4 。

WebStorm编译器压缩包网盘链接：https://pan.baidu.com/s/1EUt2fLkOMLZ477_w0ovg2g 提取码：z7pm 。

HBuilder编译器压缩包网盘链接：https://pan.baidu.com/s/1c5Tiwb1KDElRc0_MvEavOQ 提取码：t566 。

Visual Studio Code编译器汉化版网盘链接：https://pan.baidu.com/s/1Fm37qpQKIIH6ODQ1BtOxWQ 提取码：vh9x。

2. 搭建javascript运行环境：即能输出 Hello World表示搭建成功。

2.1 独立安装js解释器（Nodejs），脱离浏览器存在：如安装完成nodejs之后，在cmd打开的shell命令窗口中输入node回车，即进入js运行环境，再输入console.log('Hello World')，即可输入js代码。

备注：nodejs的安装：node官网https://nodejs.org下载电脑匹配的node版本和window型号到电脑某盘保存；程序->cmd->node-v；查看node的版本及是否下载成功；

2.2 使用浏览器内核的js解释器：

（1）在浏览器中按f12建，进入浏览器控制台，console里面，即可输入js代码。

（2）将js嵌入到html脚本中，如

<script>console.log('Hello World')//1.这里是嵌入html中的js代码
</script><!--2.或者在script里面引入外部js文件-->
<script src="./Ace.js"></script>

2.3 js语法规划：

（1）JS的语句严格区分大小写，HTML不区分大小写。

（2）每条语句最终以英文分号（;）结尾。

（3）每条语句单独成一行，保证美观和可读性。

（4）所有的符号都是英文的（除单双引号里面的符号外）。

（5）js是用Unicode字符集编写的，Unicode是ASCII和Latin-1的超集，几乎支持地球上所有语言。

2.4 js的注释：

（1）单行注释：//这里是被注释的语句。

（2）多行注释：/* 这里是被注释的语句*/。

2.5 jS代码错误调试：如果一块（即一个<script></script>表示一块）代码有问题，就终止本块的代码执行，但不影响后续代码的执行。可以通过浏览器页面F12中console找出代码是否错误，也可通过js代码中debugger断点调试错误。注意：在某些时候用debugger调试得到的某个值，比console.log()打印的某个值更精确，所有在代码中推荐使用debugger或者debugger和console.log()配合使用。

拓展：在vue的移动端真机上，可以通过vconsole插件实现调试。

//1.安装
npm install vconsole
//2.在main.js引入,然后在真机上就可以看到一个调试按钮，相当于浏览器的f12控制台功能
import Vconsole from 'vconsole';
new Vconsole();

web前端知识集合——javascript基础篇之javascript背景历史和运行环境（一）

web前端知识集合——javascript基础篇之常量和变量（二）

web前端知识集合——javascript基础篇之数据类型（三）

web前端知识集合——javascript基础篇之运算符（四）

web前端知识集合——javascript基础篇之逻辑结构和通用小程序（五）

web前端知识集合——javascript基础篇之函数和对象（六）

web前端知识集合——javascript基础篇之javascript背景历史和运行环境（一）相关推荐

web前端知识集合——javascript基础篇之常量和变量（二）
3. 变量和常量: 1.1 变量的声明: js三种方式声明变量,声明不赋值时,默认值为underfined. (1)var声明:var name='Ace',同时声明多个变量var a=1,b=2,c ...
【树莓派不吃灰】基础篇④ Raspberry Pi上搭建NodeJS运行环境
目录 1. 前言 2. 安装NodeJS环境 2.1 安装npm 2.2 安装nodejs 2.3 配置NPM国内镜像源 3. 总结 ❤️ 博客主页单片机菜鸟哥,一个野生非专业硬件IOT爱好者 ❤️ ...
零基础该如何学习Web前端知识?
想要跳槽到IT行业人在近几年越来越多,大部分都是想要学习web前端技术,但是这其中有很多都是零基础学员,大家都想知道零基础该如何学习Web前端知识?我们来看看下面的详细介绍. 零基础该如何学习Web前 ...
Javascript基础篇小结
Javascript基础篇小结随手翻阅以前的学习笔记,顺便整理一下放在这里,方便自己复习,也希望你有也有帮助吧第一课时入门基础知识点: 操作系统就是个应用程序只要是应用程序都要占用物理内存 ...
web前端知识体系大全
1. 前言大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...
Web前端知识体系精简
Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知 ...
Web 前端知识体系精简
Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知 ...
如何学习Web前端知识转型？
现在的互联网工作者都比较向往高薪,所以有一些运营或者设计岗也会想要转行去技术岗.今天就以设计师转型学习Web为例,一起来看看如何学习Web前端知识转型? 1.HTML/CSS学习第一阶段,你要从最基 ...
好程序员分享Web前端知识之HTML
今天好程序员分享Web前端知识之HTML.Web前端技术由HTML.CSS和Javascript三大部分构成,而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者 ...

web前端知识集合——javascript基础篇之javascript背景历史和运行环境（一）

web前端知识集合——javascript基础篇之javascript背景历史和运行环境（一）相关推荐

最新文章

热门文章