Skip to content

Commit d509427

Browse files
committed
增加一些基础的说明
1 parent e8760c8 commit d509427

5 files changed

Lines changed: 453 additions & 67 deletions

File tree

JavaScript-基础/1.编程语言是什么.md

Lines changed: 145 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -37,34 +37,9 @@ webstorm 是很多组件的集合,向上面说的zen coding是在webstorm里
3737
##### 一、[编程语言是干什么的?](#one)
3838
##### 二、[javascript由哪些部分组成?](#two)
3939
##### 三、[HTML中怎么使用javascript?](#three)
40-
##### 四、[变量初识](#four)
40+
##### 四、[变量的定义和储存值的类型判断](#four)
4141
##### 五、[面试题](#footer)
4242

43-
基础:前端编程,除了ECMAScript6章节专门介绍ES6外,其他都是基于ES5标准来介绍的;javascript的发展历史就不叙述了;你只需要知道Javascript现在已经发展的越来越成熟了,而且在WEB端已经是霸主地位了,如果你要做WEB开发,可以有两个方向选择;
44-
45-
- 一条是走CSS3的路线,深入研究CSS,JS方面会用jqeury / zepto这类的类库即可,会修改网上找到的JS代码;(CSS现在也越来越强大了,CSS也是有编程的了,做简单交互没有问题,比如写选项卡之类的,偏表现),因为移动端的崛起,CSS3配合HTML5也有很多的应用场景;
46-
- 一条是走JS路线,控制交互的,偏交互,CSS3会写常用效果即可,会修改网上找到的样式;
47-
48-
推荐走JS方向;主要是从各个语言在实际场景下的应用来分析的;(脱离业务和场景谈技术,就是空谈了);
49-
50-
- HTML 超文本标记语言,
51-
- CSS 层叠样式表
52-
- Javascript 简称JS
53-
54-
HTML 是一个网页文档的骨架;相当于房间的架构,无论你走JS方向还是CSS方向,这个必须会的,入手难度低;(HTML5的本地储存,canvas也很强大)
55-
56-
CSS 是一个网页的表现层,相当于房间的装修
57-
58-
JS 是一个网页的控制层,相当于电灯,空调之类的智能设备;
59-
60-
之所以推荐走JS,是因为CSS和JS大多数场景用来做静态页面的,简单的交互CSS还可以写,比如选项卡之类的,但是实际业务中不可能把交互和逻辑代码用CSS来实现的,JS就是为了处理业务逻辑而生的;
61-
62-
JS最初的应用场景是,上个世纪的网页注册相关的验证;
63-
64-
用户在某个网站上注册账号的时候,注册信息填写了,用户名,密码,邮箱,等等的信息,写完后点提交,抽了半根烟以后,终于有响应了(那时候上网环境非常差,响应很慢的,电脑硬件也非常低),如果确认密码忘记输了,或者输入的不规范,提示注册错误,请重新填写;然后把刚才填的信息再一条一条的输入,再去提交,周而覆辙,这种的体验非常差的;
65-
66-
JS要做的就是提交前的验证,假如某条信息不按照规范填写,当你写完某条信息的时候,网页直接提示你哪里不规范,应该按照什么规则写;这样一次提交后就成功,体验就好很多了;
67-
6843

6944
***
7045
<a name="one"></a>
@@ -247,11 +222,15 @@ JavaScript中我们学的所有的知识点其实都是基于浏览器内置类
247222
< script src="./jquery.js"></script>
248223
< /html>
249224

250-
##### 关于行业写JS;
225+
所有的javascript会按照它在页面中的顺序来依次解析;一般写在页面内容的后面,推荐放在</body>前,因为放在body前可以通过W3C的校验,如果不为W3C校验,放在</html>后面也是没问题的;
226+
227+
228+
##### 关于行内写JS;
251229

252230
项目中,很少会遇到行内写JS的,工作中我只在给wifi组做技术支撑的时候见到过这么写的;当时他们的wifi管理页面,用luci lua 一个开源项目修改的,页面的HTML CSS,JS是直接渲染出来的,里面的CSS,JS大都是行内写的,维护起来真的太坑了;我在写JS的时候,把需要我写的JS代码和模块,全部外链式引导页面,把CSS,JS和他们lua代码分开;不和他们的代码掺合在一起,否则以后维护起来就太蛋疼了;
253231

254232
##### 嵌入式与外链式的区别?
233+
255234
在HTML中嵌入javascript代码虽然没有问题,但是一般认为最好的做法还是尽可能使用外部文件来包含javascript代码,不过,并不存在必须使用外链式的规定;但外链式的优点如下
256235
- 维护性好:JS代码和HTML代码混在一起,维护的时候需要改动HTML页面,而现在为了专注和分工明确,基本都是前后端分离的做法;页面输入都是后端的页面;如果是外链式的,只需要维护自己的JS文件即可,不需要接触HTML文件;
257236
- 可缓存:浏览器能够具体的设置缓存连接的所有javascript文件,也就是说如果两个页面都使用同一个文件,那么这个文件只需要下载一次,最终结果就是能够加快页面加载的速度(每次上新的时候,修改时间戳即可,);
@@ -261,8 +240,39 @@ JavaScript中我们学的所有的知识点其实都是基于浏览器内置类
261240
- 适用未来:XHTML和HTML文件会出现javascript代码解析方面的差异;因为外链式不需要接触XHTML/HTML所以不存在这些问题;
262241
注意,在使用嵌入式写法的时候,不要标签内任何地方都不要出现< script >的字符串;即使是alert,console.log这些输出;如果需要用,请使用转移字符"/"来解决;
263242

243+
244+
##### HTML外部资源引入
245+
246+
- href: hypertext reference
247+
- src: source
248+
249+
href 用于标示资源和文档关系,src 用于替换标签内容
250+
251+
<img src="xxx.jpg"/>
252+
<script type="text/javascript" src="xxx.js"></script>
253+
254+
<a href="http://www.baidu.com">百度</a>
255+
256+
** 为什么 style不用src**
257+
258+
至于说为什么当初就决定外部样式表用link href来链接,而不是用style src来载入,可能是因为第一批互联网人认为样式表更符合外部链接资源的特征,它更接近附属的资源,而不是内嵌的内容。比如考虑alternate stylesheets,在同一时间只需要链接一组样式表,而不是载入所有。当然你可以简单的归结为历史遗留(也就是当初某个浏览器开发者的一个偶然决定导致)。这是一个扯淡的问题,制作标准的人不是中国人,是老外;
259+
260+
** 其它的一些意外**
261+
262+
有些名词是中国第一批程序员,翻译的问题;最明显的一个名次[上下文],就是代码所在的执行环境,英文
263+
264+
context,这个应该翻译成[代码运行环境] 才更符合语义,但是第一批互联网人翻译成中文书,都这么写,然后我们这些小辈们为了统一,也都这么叫了;
265+
266+
在HTTP协议的知识里,有一个叫HTTP Referer的;属于请求头(header)的一部分,当浏览器向web服务器发送请求的时候,一般会带上Referer,告诉服务器我是从哪个页面链接过来的,服务器籍此可以获得一些信息用于处理。
267+
268+
比如从我的博客链接到一个朋友那里,他的服务器就能够从HTTP Referer中统计出每天有多少用户点击我主页上。链接访问他的网站,以前自己倒腾过网站的朋友,在百度统计,55LA统计之类的,会有这方面的统计信息供查看;
269+
270+
这里的Referer其实应该是英文单词referrer,也不知道是拼错的人太多了导致标准跟着拼错,还是编写标准的人拼错了,开发者讲错纠错,反正现在的情况就都写成HTTP Referer了,只能将错就错的写了。历史遗留问题,无解的;
271+
264272
##### noscript的思路;
265273

274+
> 从noscript标签引深出的两种编程思想(优雅降级、渐进增强)
275+
266276
在一些页面不支持javascript或者javascript被禁用的时候;script标签内的内容是失效的,这个时候会显示noscript;
267277

268278
<!doctype html>
@@ -288,13 +298,64 @@ JavaScript中我们学的所有的知识点其实都是基于浏览器内置类
288298

289299
> 优雅降低,就是按照支持度最高的浏览器标准来写代码,一般是以chrome为准,对于技术支持较旧的浏览器,只要不影响使用都可以不处理(比如圆角效果),如果有功能方面在低版本无法正常,就做低版本的兼容,比如兼容到IE6;我自己走的路线是优雅降级;
290300
291-
> 渐进增强,是以技术支持最低的浏览器为准,假设以IE6为准,写的代码在IE6中没问题后,在补充一些高级浏览器支持的效果;
301+
> 渐进增强,是以技术支持最低的浏览器为准,假设以IE6为准(如果兼容到IE8,就以IE8为准),写的代码在IE6/8中没问题后,在补充一些高级浏览器支持的效果;
302+
303+
广义来说,其实要定义一个基准线,在此之上的增强叫做渐进增强,在此之下的兼容叫优雅降级。这个基准线对于我,是允许使用javascript、cookie和css的IE8浏览器。不过狭义而言,渐进增强一般说的是使用CSS3技术,在不影响老浏览器的正常显示与使用情形下来增强体验,而优雅降级则是体现html标签的语义,以便在js/css的加载失败/被禁用时,也不影响用户的相应功能。
304+
305+
#####CSS3中的方案
306+
307+
.transition { /*渐进增强写法*/
308+
-webkit-transition: all .5s;
309+
-moz-transition: all .5s;
310+
-o-transition: all .5s;
311+
transition: all .5s;
312+
}
313+
.transition { /*优雅降级写法*/
314+
transition: all .5s;
315+
-o-transition: all .5s;
316+
-moz-transition: all .5s;
317+
-webkit-transition: all .5s;
318+
}
319+
320+
推荐第一种写法[渐进增强];写transition可能看不出两种写法的区别;看下多个属性的时候的border-radius
321+
322+
.test-one {
323+
width: 500px;
324+
height: 300px;
325+
background-color: #37C7D4;
326+
border-radius: 30px 10px;
327+
-webkit-border-radius: 30px 10px;
328+
}
329+
.test-two {
330+
width: 500px;
331+
height: 300px;
332+
background-color: #d46c4d;
333+
-webkit-border-radius: 30px 10px;
334+
border-radius: 30px 10px;
335+
}
336+
上面是在chrome测试的两种不同写法;
337+
338+
我想要的是让box左上和右下角为30像素圆弧,左下角和右上是10像素圆弧。
339+
340+
![](http://i.imgur.com/xRaa5Uf.png)
341+
342+
CSS3 前缀 o webkit moz ms 分别对应不同的内核;
343+
344+
- -moz-对应 Firefox,
345+
- -webkit-对应 Safari and Chrome
346+
- -o- for Opera(记忆中,在一篇国外的文档上看到,欧朋是没有明确用 -o 这个前缀的,把他写上是为了向后兼容,适应未来;现在一时翻不到那篇文章了,感兴趣的可以多了解下)
347+
- -ms- for Internet Explorer
348+
349+
CSS不是我研究的重点,所以就不多提了;
350+
351+
- 在写CSS3的时候,推荐渐进增强;
352+
- 在写JS的时候,推荐优雅降级;
292353

293354
##### script标签的属性:
294355

295356
script是属性有async,defer,charset,languge,src,type六个;一般常用的就是src,type;而且type是属于可忽略的属性,推荐不写;
296357

297-
##### javascript的文档模式
358+
##### javascript的文档模式
298359

299360
分为普通模式和严格模式,正常的都是普通模式,严格模式是解决javascript本身的语法问题;
300361

@@ -303,33 +364,81 @@ script是属性有async,defer,charset,languge,src,type六个;一般
303364
- 提高编译器效率,增加运行速度;
304365
- 为未来新版本的Javascript做好铺垫。
305366

306-
进入严格模式的方式,就是 "use strict";字符串就可以了;在js文件全局放,就是全部严格模式;在function内放,就是当前的方法是严格模式;一般我们都是用普通模式;
367+
进入严格模式的方式,加入"use strict";字符串就可以了;在js文件全局放,就是全部严格模式;在function内放,就是当前的方法是严格模式;一般我们都是用普通模式;
368+
369+
##### ES6
370+
371+
ECMAScript 是JavaScript语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言,解决了一些ES5中代码不严谨的规则;
372+
373+
但是遗憾的是现在即时你写ES6,也需要babel之类的转码器转成ES5,否则浏览器会报错;
374+
375+
要学习Javascript,ES5是必须会的,如果ES5的基础打的好,ES6一个礼拜就熟练入手了,因为他是ES6是基于ES5的改变,你知道其中的原理后,很容易过渡,现在浏览器也没有全面支持,你有大把的时间研究ES5,ES5才是根基,等ES6,ES7全面普及了,你可以分分钟上手新版本的;
307376

308377
**[↑ 返回目录](#zero)**
309378
<a name="four"></a>
310-
## 四、变量:
379+
## 四、变量的定义和储存值的类型判断:
380+
381+
> 英文全称是variable,定义变量是关键字就是var;
382+
383+
JavaScript中变量是数据的名字,是数据的代名词(类似于别名);
384+
385+
var a=5;
386+
var b="hello word";
387+
var c=true;
311388

312-
> 英文全称是variable
313-
JavaScript中变量是数据的名字,是数据的代名词;
314389
变量类型是由分配数据时候决定的(赋值后才决定的),所谓的变量类型,其实就是数据类型;
315390

391+
先了解下JS中的数据类型:
392+
393+
- 基本数据类型
394+
  > number、string、boolean、null、undefined
395+
396+
- 引用数据类型
397+
  > object : {}、[]、/^$/、Date
398+
特殊的Function
399+
316400
数据和数据类型是学编程的第一件事;JavaScript的数据类型相比别的语言比较简单;
317401

318-
一种编程语言里面的数据分为多少种类似,是由这种语言的作用决定的,最直接的就是这种语言需要解决什么问题?(sql和java等语言的数据类型就比js的复杂些;他们是很多应用场景在于银行和财产方便,偏底层的;所以更精确一些;而JS的应用场景主要是在浏览器/通过nodeJs也可以应用在服务端)
402+
一种编程语言里面的数据分为多少种类似,是由这种语言的作用决定的,最直接的就是这种语言需要解决什么问题?
403+
404+
(sql和java等语言的数据类型就比js的复杂些;他们是很多应用场景在于银行和财产方便,偏底层的;所以更精确一些;而JS的应用场景主要是在浏览器/通过nodeJs也可以应用在服务端)
405+
406+
最简单的检测数据类型的方式是通过typeof的方式来检测;
407+
typeof 后面加所需要判断的数据或者变量即可;
408+
409+
Javascript中,变量名代表的值是可以随便修改的;
410+
411+
var aaa=2;
412+
console.log(typeof aaa);//number
413+
aaa="222";
414+
console.log(typeof aaa);//string
415+
aaa=true;
416+
console.log(typeof aaa);//boolean
417+
aaa=null;
418+
console.log(typeof aaa);//object
419+
aaa=function(){};
420+
console.log(typeof aaa);//function
421+
aaa={"name":"test"};
422+
console.log(typeof aaa);//object
423+
424+
319425

320426
##### 强类型和弱类型语言的区别;
321427

322428
- 强类型是数据定义时候就确定数据类型的,以后是不可以修改的,而且变量在计算机中分配的储存空间是固定的;比如a为数字1;后面就不可以修改成abc这种字符串类型;
323-
- 若类型的语言,比如js是可以任意修改的;是先占一个位置,但是不分配数据类型的大小,赋值数据的时候再用,不事先准备,只准备凳子,胖的就挤一挤,瘦子就多占点;占位置和做位置分开的;变量的声明和变量的赋值是分开的;JS中的变量只是准备的不充分,但是也有准备的;就牵扯到预解释,在预解释那章会详细介绍;
429+
- 弱类型的语言,比如js是可以任意修改的;是先占一个位置,但是不分配数据类型的大小,赋值数据的时候再用,不事先准备,只准备凳子,胖的就挤一挤,瘦子就多占点;占位置和做位置分开的;变量的声明和变量的赋值是分开的;JS中的变量只是准备的不充分,但是也有准备的;就牵扯到预解释,在预解释那章会详细介绍;
324430

325431
##### 小结:
432+
326433
- 强类型语言,在变量创建的时候,就强制要求声明类型;而弱类型语言就显得很随意;
327434
- 强类型的语言中,变量类型是事先指定的;
328435
- 弱类型的语言中,变量的类型是赋值后根据值来决定的,赋什么样的值,就决定了变量是什么类型;
329436

330437
##### 什么是面向对象编程
331438

332-
平时经常会听到面向对象编程;
439+
编程语言是处理数据或按照某种逻辑来处理数据的,而数据是程序里最基本的“生产生活资料”,比如1,2,3,“abscd”,true,false,[],Function等,数据是任何编程语言的基础;无论什么编程语言,最先学习的就是数据类型和数据;
440+
441+
**平时经常会听到面向对象编程**
333442

334443
其实这个属于很广泛和宏观的观点;我个人认为面向对象编程是以世界作为基点;自然界中万物皆对象,对象又分为很多类,我们生存的自然界中存在人类、动物类、植物类等很多类,而人又属于人类中的一个个体,人与人共同组成了人这个”类”,每个人都继承了人类这个特征;但是每个人所拥有的特征都是不相同的,好比我们每个人都继承了人类这个类所拥有的一个鼻子两只手的属性,但是我的两只手虽然和你的双手都是继承同一个类,但并不能说我的手就是你的手,这牵扯到继承,多态,封装等概念;
335444

@@ -348,17 +457,6 @@ Javascript代码初识;认识下javascript的代码风格;
348457
console.log(fn);//->把整个函数的定义部分(函数本身)在控制台输出
349458
console.log(fn());//->把当前函数执行的返回结果(return后面写的是啥,返回值就是啥,如果没有return,默认返回值是undefined)
350459

351-
先了解下JS中的数据类型:
352-
353-
- 基本数据类型
354-
  > number、string、boolean、null、undefined
355-
356-
- 引用数据类型
357-
  > object : {}、[]、/^$/、Date
358-
Function
359-
360-
最简单的检测数据类型的方式是通过typeof的方式来检测;
361-
typeof 后面加所需要判断的数据或者变量即可;
362460

363461
总结:
364462
1、js由3部分组成;
Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
编辑器的选择
2+
3+
- WebStorm或IDEA,内置支持zen coding 、nodejs、拿来即用的,遇到gulp、git、markdown文件会智能提示对应的插件等,前端开发的神器,因为需要建立索引,启动时间比较长,占用内存大
4+
- sublime text 启动快,短小精悍型的,配合插件,可实现强大功能,适合喜欢捣腾的,不建议初学者使用
5+
- Editplus 、 Notepad 、 Dreamweaver 这些都不推荐前端开发者使用;不建议初学者使用,很多老开发者还在使用,一是因为习惯,再就是配置了相关的插件,懒得折腾了,所以一直在用,毕竟干活效率才是最重要的;但是对于初学者,还是建议选择合适的;
6+
7+
- 如果您会VIM,编辑器可以随意选择了,主流的编辑器都有VIM语法插件;VIM+webStorm/sublime 等等所有都比较顺手的,推荐使用webStorm,把精力放在研究代码上,不要在编辑器上浪费过多时间;
8+
9+
- webStorm,官网下载,或者这里下载:http://pan.baidu.com/s/1eR3z1Km 密码: 3ret
10+
11+
12+
##### 推荐顺序是:webstorm/IDEA > sublime text > atom
13+
14+
不要使用Dreamweaver,那个写代码的效率太低了, 是网页设计用的,对于前端来说,真的不适合了;如果你用sublime,有一个插件zen coding必须要装的,可以快速编写HTML/CSS代码的
15+
16+
输入a,然后按tab,生成
17+
18+
<a href=""></a>
19+
20+
并且自动定位到href的位置(注意href是Hypertext Reference是缩写,并不念"贺儿夫",就是英文的 h r e f ;和别人交流的时候注意下)
21+
22+
href:Hypertext Reference的缩写。意思是超文本引用。href 属性的值可以是任何有效文档的相对或绝对URL,包括片段标识符和JavaScript代码段。
23+
24+
输入下面的代码
25+
26+
div.test>ul>li*5>a
27+
28+
按tab,直接生成下面的HTML
29+
30+
<div class="test">
31+
<ul>
32+
<li><a href=""></a></li>
33+
<li><a href=""></a></li>
34+
<li><a href=""></a></li>
35+
<li><a href=""></a></li>
36+
<li><a href=""></a></li>
37+
</ul>
38+
</div>
39+
40+
webStorm 和IDEA 是 分别针对WEB开发和JAVA开发的,(IDEA是包括webstorm的,如果您以前是做JAVA的,可以不用换编辑器);
41+
42+
webstorm 是很多组件的集合,向上面说的zen coding是在webstorm里内置的,JS,node,css等代码的智能提示也是内置的;省的你去配插件浪费时间了,把精力都放在写代码上;
43+
44+
45+
46+

0 commit comments

Comments
 (0)