JavaScript简介
JavaScript如今已成为最受欢迎的编程语言之一,不管是电脑、手机、还是平板上运行的所有网页,背后的交互逻辑都是由JavaScript驱动的。而且自从2009年NodeJS诞生后,我们也能使用JavaScript编辑后端逻辑了,从此JavaScript便成为了全栈工程师必不可少的技能。
简单来说,JavaScript是一种运行在游览器中的解释型编程语言,在Web世界里,JavaScript是唯一的选择,只有它能跨平台、跨游览器驱动网页,与用户交互。也因为NodeJS的诞生,如今JavaScript也成为了全栈开发的必备技能。
JavaScript历史简介
了解过Java的朋友肯定很好奇JavaScript和Java的关系,以及现在经常提到的ECMAScript(ES)和JavaScript的关系,那我们接下来就简单了解下JavaScript的历史。
在1995年,网景公司凭借Navigator游览器成为Web时代最著名的第一代互联网公司。由于网景公司希望在静态HTML网页上添加一些动态效果,于是叫Brendan Eich设计出相关语言,这大神仅仅用了10天便设计出了JavaScript。
为什么取名叫JavaScript呢?其实JavaScript最早名叫Mocha,后面改名为LiveScript,最后才改为 JavaScript。当时网景公司和Sun公司(创建Java的公司)有过一段合作经历,为了借助Java的名气来推广JavaScript,才因此得名。
网景公司为了让JavaScript成为全球标准,联合ECMA(欧洲电脑制造商)组织制定了JavaScript语言标准,称之为ECMAScript标准,所以现在大家常常听到的ECMAScript 2018、ECMAScript 2019、等等便是每年不同的标准,虽然标准每年都会更新,给语言添加一些新的特性,但在此教程中学习到的基础语法是基本不变的。
HTML, CSS和JavaScript简介
了解完JavaScript在网页开发中的重要性和历史,我们接下来聊聊网页开发必备三大件HTML, CSS和JavaScript各自在网页中的作用。
在之后的教程中,我们虽然会经常提及HTML和CSS,但是这丝毫不影响我们学习JavaScript。HTML和CSS不是编程语言,非常易学,大家可以在学习完JavaScript后,再学习HTML和CSS也不迟。接下来我来简单介绍一下三门语言的功能,大家能理解就行。
HTML
每个网页都是由HTML组成的,大家如果使用Chrome打开任何一个网页,点击右键选择View Page Source就能看到网页的源代码了,大家会看到类似以下的内容:
<!DOCTYPE html>
<html>
</head>
...
</head>
<body>
...
</body>
</html>
其中第一行<!DOCTYPE html>指明此文件是HTML文件,然后网页内容就被包在<html>…</html>中,简单来说,HTML是网页的骨架,所有显示的文字和内容都是通过HTMl中的各种标签(tag: <head>…</head>, <body>…</body>)进行排列的。
大家可以在本地编辑一个涵盖以下内容的hello.html文件:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
使用游览器打开此文件,就能显示出以下的界面:
其中<h1>…</h1>标签指定了This is a Heading为标题,而<p>…</p>则定义了一个段落,所以标题This is a Heading会更大。
CSS
光光使用HTML制作网站,这个网站不会很好看,显得非常骨感,为了让网站有血有肉,我们可以使用CSS来添加额外的装饰。以下我们在html中的<head></head>使用<style>…</style>标签加入css的定义:
<!DOCTYPE html>
<html>
<head>
<style>
h1 { color: red; }
p { background-color: yellow; font-size: 50px;}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
使用游览器打开后,网页就会变成以下这样:
css代码很好理解:h1 { color: red; } 代表将标题This is Heading变为红色,p { background-color: yellow; font-size: 50px; } 将This is a paragraph的背景颜色和字体大小改变了。
简单来说,CSS可以改变网页中的颜色,字体,位置,给网页穿上衣服,使视觉效果丰富起来,变得更漂亮了。
JavaScript
光有HTML和CSS,我们的网页被设计成什么样,就是什么样,不会有任何改变。而JavaScript则能操作HTML和CSS,改变网页的内容和排版,使网页变得动态起来。
比如将HTML文件更新为以下的内容:
<!DOCTYPE html>
<html>
<head>
<script>
function showTime() {
var d = new Date();
document.querySelector("p").innerHTML = `${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`;
}
</script>
<style>
h1 { color: red; }
p { background-color: yellow; font-size: 20px;}
</style>
</head>
<body>
<h1 onclick="showTime()">This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
可以看到我们在<head></head>中加了一个<script></script>标签,其中定义了一个函数showTime,这个函数的作用就是将 p(段落)中的html换成当前的时间,然后我们又在<h1>中加入了一个onclick=”showTime()”,代表我们只要一点击This is a Heading,p中的内容就会变为当前的时间。大家打开更新后的html文件,点击This is a Heading,网页就会变成这样:
如果你再次点击This is a Heading,段落中的内容又会更新为最新的时间。很明显,通过JavaScript操作HTML和CSS,网站的交互性会更强,网页也变得动态起来了。总而言之,HTML是网页的骨架,CSS是衣服,JavaScript则为网页注入了灵魂和意识。
《JavaScript全栈入门教程》大纲
《JavaScript全栈入门教程》还是一样遵循我做入门视频的20/80原则,意味着用百分之20的时间掌握百分之80的重点内容,但和以往编程语言教学不同的是,这个系列不仅仅只教大家JavaScript的语法,其中还会涵盖网页开发的重要概念和技术,在此系列的最后,我还会教大家使用JavaScript的后端语言NodeJS,开发一个结合了全栈技术的网络爬虫项目。
内容涵盖内容如下:
- 数据类型, 运算符
- 条件判断和循环
- 函数,面对对象
- NodeJS
- JSON, AJAX, Restful API
- 全栈爬虫项目
希望在完成这个系列的学习后,大家不仅仅能掌握JavaScript这门语言,还能对网站开发有深入的了解,具备基本的全栈开发能力。