【第05话】三剑客（下）《烂俗前端》
夜晚11点，灯突然闪了两下就灭了，宿舍一片漆黑，大学11点便熄了灯并断了网络。一道刺眼的光闪起来，李学习打开了手机手电筒。
“我的台灯充好电了，开着咱们继续唠。”李学习还意犹未尽，要今天把该说的跟铁柱都说了，彷佛明天是铁柱出嫁的日子，老父亲依依不舍的跟女儿吩咐事情一般。
“喔~” 赵铁柱打了声悠长的哈欠，似乎在抗议李学习的“虐待”，但转念一想，李学习这是在用心帮他。“好的吧。”
“困了吗，那你放点音乐吧。我今天不睡那么快。”李学习鼓励赵铁柱。
道道道道道道道道道道道道道道道~
道可道非常道
赵铁柱手机响起了黄霑老师豪放的歌声，这歌声貌似真能驱除困意，顿时让铁柱精神了些。
“所谓三剑客，就是HTML、CSS、JavaScript。是网页开发的三门基本语言，搭配使用。很多人不明所以就屁颠屁颠的去看，不明白为什么要学这仨，学习效果并不如意。嗯，修车的，不知道各个零件的作用，能修好车吗？”
“嗯对”，铁柱有点麻木了。
“web，也就是网页，当你在浏览器输入地址并按了回车，到你最终看到网页这一过程。浏览器其实是非常繁忙的，先去请求得到一个‘文本’（HTTP响应体），就好像是个造房子的建筑设计稿，首先解析它大体的框架结构（HTML），再读取‘装修方案’（css）给他美化装饰一下，同时也在解析一些交互逻辑，比如按门铃就会响起来这样的逻辑等等（JavaScript）。”
“后面我相信你会需要更深入浏览器研究的，我就不多说了，再说我也不懂了。我解释的能听懂吗？”李学习问
“哒哒”，铁柱慢慢的拍手鼓掌，说：“懂，牛逼。”
“你的电脑连上你自己的热点，我来写点东西。”然后铁柱就照做了，并把位置让给了李学习。
李学习在windows桌面上右键新建了一个文本文件，并双击打开。
键盘一顿敲了几行代码：
<html>
<head>
<title>赵铁柱!</title>
<head>
<body>
<h1>Hello World</h1>
</body>
<html>
然后保存关闭，将这个文本重命名为helloWorld.html，双击打开。
“这就是一个最最最简单的网页，并且是存在你电脑上的，你在网上输入地址读取到的别人的网页实际上是通过网络访问别人的电脑上的网页。”李学习说，“我写的这个例子，你看到了，没有这个页面没有CSS和JavaScript。所以说HTML是网页最基本的组成。”
“另外，一般不是通过记事本这种去写代码的，真正项目会使用一些编辑器注1协助编写代码，它可以通过美化和补全等功能来帮助开发者的更舒服的工作。本质上，编辑器就是一个针对开发者的记事本，并且有很多中产品，你下载一个vscode。这是目前前端主流的编辑器，先下着。”
此时，赵铁柱开始犯困了。
“你眯个十分钟，我来帮你下载vscode，一会继续。”李学习看铁柱状态不佳，就稍微让他休息一会。李学习下载了vscode安装文件把他装到了D盘下的某个文件夹，因为他有不喜欢装东西在C盘的好习惯，除非迫不得已。
“柱儿！好了，来。”李学习喊起了趴在桌子的铁柱的。铁柱用手搓了搓脸准备继续学习。
“我在你D盘新建了三个叫www、app、doc的目录，www用于存放你的千克项目，哪怕是练习demo也要在里面建好个子文件夹起英文名放好，养成习惯。app是你所装的所有工具软件都放里面，doc是文档类的东西。这样硬盘盘就不会太乱了。装东西的时候注意尽量不要默认装在C盘。”
“噢，这个我知道。”铁柱回。
“好了，vscode我打开了。看好了哈，我在www里新建一个目录（文件夹）叫helloWorld，然后把它拖到vscode里面，就是打开了这个项目了。”
“然后在这块空白的地方右键，分别新建好几个文件。”
“喏，这就是一个最简单的项目组成结构，首页一般习惯上起名为index.html，实际上，这些所有文件你想怎么起名字都行。”李学习边指着屏幕边说。
接着李学习把index.html写上代码：
<html>
<head>
<title>赵铁柱!</title>
<!-- 这里是用相对路径引入刚才新建的static目录下的css -->
<link href="./static/style.css" rel="stylesheet" />
</head>
<body>
<script src="./static/main.js"></script>
<!-- 同理，这里引入javascript -->
<h1 class="text">Hello World</h1>
</body>
</html>
style.css写为：
/* 修改class="text"的html节点 */
.text{
/* 文字颜色为红色 */
color: red;
}
main.js写为：
//外面这层是等html元素加载完成,否则js获取不到元素节点
document.addEventListener('DOMContentLoaded', function () {
var text = document.getElementByClassName('text'); //获取到class name为text的节点
// 给获取到的第一个节点安排一个事,就是告诉它有人点击了就把这个节点里面的字改一下.
// js中这种行为成为绑定事件,右边的function就是事件触发后要处理的东西,可以称为事件回调函数
text[0].onclick = function () {
this.innerHTML = "我是赵铁柱!";
}
})
“我们回到文件管理界面，然后双击index.html，浏览器打开这个网页就算项目就跑起来了.”
李学习让铁柱亲自点击网页上文字。铁柱点了一下，出现了“我是赵铁柱！”几个字，就像看到一道光，一扇门在向自己敞开着，从此走向一个新的领域。
“点完，就算从我这毕业了。”李学习半开玩笑微笑着说，“好了，你继续琢磨一下这个项目注2，别看里面没啥东西，基本像个项目的样子，这是真实情况下代码稍微复杂而已。 我去睡了，我明早约好和莉莉要去图书馆自习。”莉莉是李学习的对象，两个学霸在一起最大的兴趣就是学习，李学习说完就去刷牙准备睡觉了。
“辛苦了，习。我再看看吧，我还要背面试题呢。”铁柱说。
“害，难得你说这种感谢的话。小意思。”
李学习停顿了一下，“祝你明天的‘试炼’顺利。”
未完待续，转载请注明出处
注1：早期前端使用DW、Notepad++然后是sublimeText，现在主要用vscode
注2：我把小说涉及到的源码会放到github，这里项目地址点这里
发表评论 (审核通过后显示评论)：