前端-进击的巨人-青铜篇

从事前端有4年多了，经历了不少坑，也摸索了一些经验。既然是随笔，那就随便写写了。

按照农药的等级，依次是青铜、白银、黄金、铂金、钻石、星耀、王者。

以我现在的能力也就是黄金到铂金。那么写到哪算哪把。

既然这篇是青铜篇，那就是前端基础中的基础——HTML、CSS、JavaScript。

这应该算是前端入门必须的条件了。当然，如果只写静态页面，然后交给jsp、php。那么HTML、CSS基本就够了。

HTML是什么呢。官方说是超级文本标记语言(HyperText Markup Language)。用人话说，就是可以被浏览器读出来的编程语言。

如果你没有编程基础的话，打开这个连接http://www.w3school.com.cn/html/index.asp，从<head>、<title>、<body>这些基础标签学起。
当然，还有HTML5规范的新标签。比如<section>、<header>、<footer>等等

其实，HTML是个很容易入门的语言，HTML是骨架、CSS是皮肤、JavaScript是大脑。

 1 <html>
 2
 3 <head>
 4 <title>我的第一个 HTML 页面</title>
 5 </head>
 6
 7 <body>
 8 <p>body 元素的内容会显示在浏览器中。</p>
 9 <p>title 元素的内容会显示在浏览器的标题栏中。</p>
10 </body>
11
12 </html>

这个就是骨架，上面代码来自http://www.w3school.com.cn/tiy/t.asp?f=html_basic

接着、再说说皮肤的CSS吧。

打开这个连接http://www.w3school.com.cn/css/index.asp开始学习吧。

CSS官方名称是层叠样式表（Cascading Style Sheets）

我的理解是，CSS是“静态化”的属性设置。为什么这么说呢。其实就是，对一个元素（比如一个div标签）的各种属性设置，通过一系列键对值（比如设置背景色属性为黄：background-color: yellow），让浏览器读这个设置，从而让这个元素（比如一个div标签）“渲染”（render）成这个元素对应的属性设置的样子。我为什么把“渲染”（render）这个词单拎出来呢。render这个单词会出现在现今所有的框架中，render就代表着把元素变成我们设置的那样。

前面说了，如果只编写静态页面的话，HTML、CSS基本就够了。如果涉及到交互（比如点击、按键等等操作）了，用什么捕捉或者说这些操作怎么和页面结合呢。

对，用的就是JavaScript。教程看这里http://www.w3school.com.cn/js/

如果有点编程基础的人看到这个名字，会猜想是不是和Java类似呢。答案是 X。JavaScript这个名字是跟风的，不明白的百度一下。

比如一个页面我们有个按钮要点击，点击后要有反馈。怎么实现呢。

来源于这里http://www.w3school.com.cn/jsref/event_onclick.asp

 1 <html>
 2 <body>
 3
 4 Field1: <input type="text" id="field1" value="Hello World!">
 5 <br />
 6 Field2: <input type="text" id="field2">
 7 <br /><br />
 8 点击下面的按钮，把 Field1 的内容拷贝到 Field2 中：
 9 <br />
10 <button onclick="document.getElementById('field2').value=
11 document.getElementById('field1').value">Copy Text</button>
12
13 </body>
14 </html>

这段代码的意思是，通过一个按钮点击后，把第一个input标签中的值Hello World! 复制到第二个input标签里面。

onclick这个属性就是连接页面操作者（就是你）和页面的一个属性。

另外，有个名词需要注意，表单（form），对就是这个词，对新手来说，这个词是啥啊。

用人话讲，页面操作者（就是你），需要把你想要告诉服务器的数据，这些数据所对应的页面元素的集合。

举个栗子，来自于http://www.w3school.com.cn/js/js_form_validation.asp

1 <body>
2 <form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
3 Email: <input type="text" name="email" size="30">
4 <input type="submit" value="Submit">
5 </form>
6 </body>

这段代码中的 <input type="text" name="email" size="30">元素就是表单，你想告诉服务器的数据就是<input>标签里你输入的数据。

<input type="submit" value="Submit"> 这个是提交按钮，可以算是表单的一部分，也可以不算。因为某些场景，可能不是一个按钮提交数据，可能是个按键、拖拽等等。

青铜篇的最后，隆重推出一个万恶之源，什么东西呢，是的，jQuery插件。

解释为什么是万恶之源之前，先简要说明一下jQuery插件是什么。

教程看这里http://www.w3school.com.cn/jquery/

jQuery是一个优化的JavaScript的库，肯定有人问，库是什么？库就是根据原始编程语言，经过代码转化，变成一种易读、操作简化的原始编程语言进化版。

比如，原始JavaScript中，通过id获得对应元素的话需要

var x=document.getElementById("myHeader")

来源于http://www.w3school.com.cn/jsref/met_doc_getelementbyid.asp

但是同样的操作，用jQuery就变成了

var x=$("#myHeader")

是不是感觉又好懂，有简便呢。jQuery的优势就是对DOM的操作，什么是DOM呢？简单理解为嵌套的一个个元素标签。

下面，就说明为什么是万恶之源了，

从开始接触jQuery后，就会深深的爱上它。因为它几乎可以让我们做的我们想做的一切。

可为什么是几乎呢，因为代码复用的问题，对，也就是组件化开发。

代码量少的时候，或者说，业务流程唯一的时候。没有做同样事情的操作，自然jQuery就做到了我们想要的。

可是，可是，可是

如果有代码相同的业务流程呢。仅仅是多了几个新参数的时候。jQuery就会显得非常臃肿。尤其是涉及到DOM操作的时候，还需要看到底操作了什么，两个相同的业务流程有哪些区别。

比如，我有个页面有两个栏目，

第一个栏目中，先需要下拉列表选择省、市、区，然后点击确定，出现对应列表，列表的操作还会反选下拉列表省、市、区中的数据。

第二个栏目中，先需要下拉列表选择省、市、区、学校，学校还要选择有无分校的，然后再点击确定，出现对应列表，列表的操作还会反选下拉列表省、市、区、学校中的数据。

看，这两个业务流程有相同的部分，下拉列表选择省、市、区，这部分如果做成组件的话，这个组件可以输出省、市、区三个数据；

同样，把省、市、区三个数据输入到这个组件，下拉列表显示对应的省、市、区。

因为涉及到DOM操作，所以没有组件化的操作，就需要把数据和下拉列表元素对应起来。数据不能传错。而且代码冗长。

对的，每次需要把数据放在下拉列表元素中，都需要单独写一段单独的代码。你要修改这块，就需要通读整篇代码，把对应的代码都改才行。维护困难啊。这就是代码耦合性。

所以，组件化开发是成熟的编程方式。

对于JavaScript来说，

面向对象编程

就是这种成熟的编程方式。

面向对象技术：http://www.w3school.com.cn/js/pro_js_object_oriented.asp

面向对象编程：https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499763408e24c210985d34edcabbca944b4239e20000

也是白银篇的开始。

转载于:https://www.cnblogs.com/lt666/p/9403825.html

前端-进击的巨人-青铜篇相关推荐

前端进击的巨人（四）：略知函数式编程
系列更文前三篇文章,围绕了一个重要的知识点:"函数". 函数调用栈.函数执行上下文.函数作用域到闭包.可见不理解函数式编程,代码都撸不好. 函数是一等公民函数与其它数据类型一样, ...
前端进击的巨人（二）：栈、堆、队列、内存空间
面试经常遇到的深浅拷贝,事件轮询,函数调用栈,闭包等容易出错的题目,究其原因,都是跟JavaScript基础知识不牢固有关,下层地基没打好,上层就是豆腐渣工程,新人小白,踏实踩土才是关键. 打地基第二 ...
ie9无法获取未定义或 null 引用的属性“indexof”_前端JS基础篇（二）JS基本数据类型和引用数据类型及检测数据类型方法...
JS中的数据类型 (一).基本数据类型(值类型) 1.number:数字 -12.12.5.-12.5 0这些数字都是number: js中增加了一个number类型的数据:'NaN' typeof ...
前端总结·基础篇·CSS（二）视觉
前端总结系列前端总结·基础篇·CSS(一)布局前端总结·基础篇·CSS(二)视觉前端总结·基础篇·CSS(三)补充前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
前端工具--less篇
前端工具–less篇 less 中文网http://www.bootcss.com/p/lesscss/ 常见错误及解决: sublime text 3 安装less2css保存less出现错误未安 ...
前端总结·基础篇·CSS
前端总结·基础篇·CSS 1 常用重置+重置插件(Normalize.css,IE8+) * {box-sizing:border-box;} /* IE8+ */body {margin:0;} ...
web前端研发工具篇
web前端研发工具篇一.常见前端开发IDE 1.Visual Studio Code 2.hbuilder 3.sublime text3 4.WebStorm 5.Atom 6.Dreamweav ...
前端进击的巨人（六）：知否知否，须知this
常见this的误解指向函数自身(源于this英文意思的误解) 指向函数的词法作用域(部分情况) this的应用环境 1. 全局环境无论是否在严格模式下,全局执行环境中(任何函数体外部)this都指 ...
前端进击的巨人（三）：从作用域走进闭包
进击的巨人第三篇,本篇就作用域.作用域链.闭包等知识点,一一击破. 作用域作用域:负责收集并维护由所有声明的标识符(变量)组成的一系列查询,并实施一套非常严格的规则,确定当前执行的代码对这些标识符( ...

前端-进击的巨人-青铜篇

面向对象编程

前端-进击的巨人-青铜篇相关推荐

最新文章

热门文章