Skip to content

Commit e8760c8

Browse files
anbanganbang
committed
MODI
1 parent 1d7b174 commit e8760c8

2 files changed

Lines changed: 179 additions & 58 deletions

File tree

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

Lines changed: 111 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,37 @@
1+
编辑器的选择，
2+
3+
推荐顺序是：webstorm/IDEA > sublime text > atom
4+
5+
不要使用Dreamweaver，那个写代码的效率太低了， 是网页设计用的，对于前端来说，真的不适合了；如果你用sublime，有一个插件zen coding必须要装的，可以快速编写HTML/CSS代码的
6+
7+
输入a，然后按tab，生成
8+
9+
<a href=""></a>
10+
11+
并且自动定位到href的位置(注意href是Hypertext Reference是缩写，并不念"贺儿夫"，就是英文的 h r e f ；和别人交流的时候注意下）
12+
13+
href：Hypertext Reference的缩写。意思是超文本引用。href 属性的值可以是任何有效文档的相对或绝对URL，包括片段标识符和JavaScript代码段。
14+
15+
输入下面的代码
16+
17+
div.test>ul>li*5>a
18+
19+
按tab，直接生成下面的HTML
20+
21+
<div class="test">
22+
<ul>
23+
<li><a href=""></a></li>
24+
<li><a href=""></a></li>
25+
<li><a href=""></a></li>
26+
<li><a href=""></a></li>
27+
<li><a href=""></a></li>
28+
</ul>
29+
</div>
30+
31+
webStorm 和IDEA 是 分别针对WEB开发和JAVA开发的，（IDEA是包括webstorm的，如果您以前是做JAVA的，可以不用换编辑器）；
32+
33+
webstorm 是很多组件的集合，向上面说的zen coding是在webstorm里内置的，JS,node,css等代码的智能提示也是内置的；省的你去配插件浪费时间了，把精力都放在写代码上；
34+
135
<a name="zero"></a>
236
# 知识点：
337
##### 一、[编程语言是干什么的？](#one)
@@ -6,7 +40,32 @@
640
##### 四、[变量初识](#four)
741
##### 五、[面试题](#footer)
842

9-
基础：前端编程，除了ECMAScript6章节专门介绍ES6外，其他都是基于ES5标准来介绍的；javascript的发展历史就不叙述了；
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+
68+
1069
***
1170
<a name="one"></a>
1271
## 一、编程语言是干什么的？用来做哪些事？
@@ -18,10 +77,15 @@
1877
- 核心(ECMAScript)：提供核心语言功能；
1978
- 文档对象模型(document object model 简称DOM)：提供访问和操作网页内容的方法和接口；
2079
- 浏览器对象模型(broser object model 简称 BOM)：提供与浏览器交互的方法和接口；
80+
81+
2182
##### 1、核心部分：
83+
2284
WEB浏览器只是ECMA的宿主环境之一，也可以不依赖浏览器，比如宿主环境可能还包括Node和Adobe Flash；
2385
ECMAScript规定了Javascript这门语言的组成部分；主要规定了语法、类型、语句、关键字、保留字、操作符、对象；
86+
2487
##### 2、DOM部分
88+
2589
文档对象 模型把整浏览器页面映射为一个多层节点结构，页面中每个组成部分都是某种类型的节点，这些节点又包含了不同类型的数据；
2690
```
2791
<!DOCTYPE html>
@@ -68,7 +132,7 @@ DOM的几个级别的介绍；DOM目前分为三个级别；DOM1级，DOM2级，
68132
- DOM3级：引入了以统一方式加载和保存文档的方法（在DOM加载和保存模块中定义）；新增了验证文档的方法（在DOM验证模块中定义）；DOM3级也对DOM核心进行了扩展，开始支持XML1.0，涉及XML infoset，Xpath和XML Base。
69133

70134
##### 3、BOM部分；
71-
BOM最蛋疼的部分是没有统一的标准；从根本上酱BOM只处理浏览器窗口和框架；主要有
135+
BOM最蛋疼的部分是没有统一的标准；从根本上讲BOM只处理浏览器窗口和框架；主要有
72136
- 弹出新浏览器窗口的功能；
73137
- 移动、缩放和关闭浏览器窗口的功能；
74138
- 提供浏览器详细信息的navigator对象；
@@ -78,6 +142,10 @@ BOM最蛋疼的部分是没有统一的标准；从根本上酱BOM只处理浏
78142
- 像XMLHttpRequest和IE的ActiveXObject这样的自定义对象；
79143
- 有了HTML5后，DOM实现的细节有望朝着兼容性越来越高的方向发展；
80144

145+
146+
JavaScript中我们学的所有的知识点其实都是基于浏览器内置类实现的，这也说明了js是由一个个类组成的，而我们要学习的就是类、实例的关系和类上面的私有或者公有的属性或者方法---这就是我们经常听到的面向对象编程
147+
148+
81149
**[↑ 返回目录](#zero)**
82150

83151
<a name="three"></a>
@@ -104,11 +172,10 @@ BOM最蛋疼的部分是没有统一的标准；从根本上酱BOM只处理浏
104172
<title>Document</title>
105173
</head>
106174
<body>
107-
<div id="div1">
108-
<a href="javascript:;">链接ZAB</a>
109-
<a href="javascript:;" onclick="zab()">有弹窗的链接</a>
110-
</div>
111-
175+
<div id="div1">
176+
<a href="javascript:;">链接ZAB</a>
177+
<a href="javascript:;" onclick="alert('这是一段测试代码')">有弹窗的链接</a>
178+
</div>
112179
<script>
113180
function zab(){
114181
alert("这是一段测试代码")
@@ -121,29 +188,35 @@ BOM最蛋疼的部分是没有统一的标准；从根本上酱BOM只处理浏
121188
##### 2、嵌入式是直接写在HTML页面中的；
122189
下面的，绑定事件的，就是嵌入式的写法；
123190

124-
<!doctype html>
125-
<html>
126-
<head>
127-
<meta charset="UTF-8">
128-
<title>Document</title>
129-
</head>
130-
<body>
131-
<div id="div1">
132-
<a href="javascript:;">链接ZAB</a>
133-
<a href="javascript:;">有弹窗的链接</a>
134-
</div>
135191

136-
<script>
137-
var oDiv=document.getElementById("div1");
138-
oDiv.onclick=function(){
139-
zab();
140-
};
141-
function zab(){
142-
alert("这是一段测试代码")
143-
}
144-
</script>
145-
</body>
146-
</html>
192+
<!doctype html>
193+
<html>
194+
<head>
195+
<meta charset="UTF-8">
196+
<title>Document</title>
197+
</head>
198+
<body>
199+
200+
<div id="div1">
201+
<a href="javascript:;" onclick="zab()">222</a>
202+
</div>
203+
<div id="div2">
204+
<a href="javascript:;">链接ZAB</a>
205+
<a href="javascript:;">有弹窗的链接</a>
206+
</div>
207+
208+
<script>
209+
var oDiv=document.getElementById("div2");
210+
oDiv.onclick=function(){
211+
zab();
212+
};
213+
function zab(){
214+
alert("这是一段测试代码")
215+
}
216+
</script>
217+
</body>
218+
</html>
219+
147220
##### 3、外联式；
148221
通过script的src属性引用一个文件；关于script的标签位置，按照传统的做法，是写在head元素中；这种做法的目地是把所有外部文件(CSS,JS)的引用都放在相同的地方；可是如果放在顶部；HTML加载的时候，是从上到下依次解析的；页面加载很多HTL的时候，就会堵塞后面的DOM节点加载；导致页面呈现的内容出现延迟，而延迟七剑浏览器窗口将是空白的；为了避免这个问题，现在的WEB一般是全部javascript都放在</body>之前；
149222
还有一点需要注意的，如果放在head中，直接获取元素的时候，是获取不到的;比如获取ID，就是获取不到的；需要做延迟加载才好
@@ -174,10 +247,17 @@ BOM最蛋疼的部分是没有统一的标准；从根本上酱BOM只处理浏
174247
< script src="./jquery.js"></script>
175248
< /html>
176249

250+
##### 关于行业写JS；
251+
252+
项目中，很少会遇到行内写JS的，工作中我只在给wifi组做技术支撑的时候见到过这么写的；当时他们的wifi管理页面，用luci lua 一个开源项目修改的，页面的HTML CSS,JS是直接渲染出来的，里面的CSS,JS大都是行内写的，维护起来真的太坑了；我在写JS的时候，把需要我写的JS代码和模块，全部外链式引导页面，把CSS，JS和他们lua代码分开；不和他们的代码掺合在一起，否则以后维护起来就太蛋疼了；
253+
177254
##### 嵌入式与外链式的区别？
178255
在HTML中嵌入javascript代码虽然没有问题，但是一般认为最好的做法还是尽可能使用外部文件来包含javascript代码，不过，并不存在必须使用外链式的规定；但外链式的优点如下
179256
- 维护性好：JS代码和HTML代码混在一起，维护的时候需要改动HTML页面，而现在为了专注和分工明确，基本都是前后端分离的做法；页面输入都是后端的页面；如果是外链式的，只需要维护自己的JS文件即可，不需要接触HTML文件；
180-
- 可缓存：浏览器能够具体的设置缓存连接的所有javascript文件，也就是说如果两个页面都使用同一个文件，那么这个文件只需要下载一次，最终结果就是能够加快页面加载的速度；
257+
- 可缓存：浏览器能够具体的设置缓存连接的所有javascript文件，也就是说如果两个页面都使用同一个文件，那么这个文件只需要下载一次，最终结果就是能够加快页面加载的速度（每次上新的时候，修改时间戳即可，）；
258+
259+
a.xxx.com/project/test.js?t=2016101301 （?t=2016101301 就是时间戳）
260+
181261
- 适用未来：XHTML和HTML文件会出现javascript代码解析方面的差异；因为外链式不需要接触XHTML/HTML所以不存在这些问题；
182262
注意，在使用嵌入式写法的时候，不要标签内任何地方都不要出现< script >的字符串；即使是alert，console.log这些输出；如果需要用，请使用转移字符"/"来解决；
183263

@@ -211,6 +291,7 @@ BOM最蛋疼的部分是没有统一的标准；从根本上酱BOM只处理浏
211291
> 渐进增强，是以技术支持最低的浏览器为准，假设以IE6为准，写的代码在IE6中没问题后，在补充一些高级浏览器支持的效果；
212292
213293
##### script标签的属性：
294+
214295
script是属性有async，defer，charset，languge，src，type六个；一般常用的就是src，type；而且type是属于可忽略的属性，推荐不写；
215296

216297
##### javascript的文档模式，

‎test-file.html‎

Lines changed: 68 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -3,44 +3,84 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>Document</title>
6+
<style>
7+
html,body{
8+
width:100% ;
9+
height: 100%;
10+
position: relative;
11+
}
12+
.diy-window{
13+
position: fixed;
14+
width: 500px;
15+
height: 150px;
16+
border: 1px dashed darkcyan;
17+
/*opacity: 0.2;*/
18+
}
19+
.window-title{
20+
padding: 10px 15px;
21+
background-color: #f4f4f4;
22+
position: relative;
23+
}
24+
.window-title .close-window{
25+
display: inline-block;
26+
position: absolute;
27+
right: 20px;
28+
cursor: pointer;
29+
}
30+
.diy-window .window-body{
31+
position: absolute;
32+
right: 50px;
33+
bottom: 30px;
34+
}
35+
</style>
636
</head>
737
<body>
838

39+
<a href="javascript:;">点击我吧</a>
940

41+
<div class="diy-window">
42+
<div class="window-title">
43+
<span>的感觉如何</span>
44+
<span class="close-window" id="close-window">X</span>
45+
</div>
46+
<div class="window-body">
47+
<input type="button" class="select-btn" id="input-one" name="islike" value="我喜欢"/>
48+
<input type="button" class="select-btn" id="input-two" name="islike" value="不喜欢"/>
49+
</div>
50+
</div>
1051

11-
<fieldset class="cbi-section" id="cbi-system-system">
12-
<legend>Reboots</legend>
13-
<span class="panel-title">Reboots the operating system of your device</span>
14-
<fieldset class="cbi-section-node">
15-
<div class="cbi-value">
16-
<label class="cbi-value-title">Reboot </label>
17-
<div class="cbi-value-field">
18-
<div>
19-
<a href="/cgi-bin/luci/;stok=b1bf433a70ef977c412861b6fee905fa/admin/system/reboot" class="cbi-input-reboot">Reboot System</a>
20-
</div>
21-
</div>
22-
</div>
23-
</fieldset>
24-
<br>
25-
</fieldset>
52+
<script>
53+
//todo 获取需要的元素
54+
var inoputOne=document.getElementById("input-one");
55+
var inoputTwo=document.getElementById("input-two");
56+
var closeWindow=document.getElementById("close-window");
2657

58+
//todo input-two的mouse事件
59+
inoputTwo.onmouseover=function(){
60+
inoputTwo.value="我喜欢";
61+
inoputOne.value="不喜欢";
62+
};
63+
inoputTwo.onmouseout=function(){
64+
defaultValue();
65+
};
2766

28-
<a href="javascript:;" id="btn">cbi-input-invalid j-cbi-input-wpakey </a>
29-
<script src="index.js"></script>
30-
<script>
31-
var person={
32-
name:"person name",
33-
age:23
67+
inoputOne.onmouseover=function(){
68+
defaultValue()
3469
};
35-
console.log(Object.isExtensible(person));//true
36-
console.log(Object.isSealed(person));//false
37-
console.log(Object.isFrozen(person));//false
70+
inoputOne.onmouseout=function(){
71+
defaultValue();
72+
};
73+
74+
//todo 点击关闭
75+
closeWindow.onclick=function(){
3876

39-
Object.freeze(person);
40-
console.log(Object.isExtensible(person));//false
41-
console.log(Object.isSealed(person));//true
42-
console.log(Object.isFrozen(person));//true
77+
};
4378

79+
//默认的value值
80+
function defaultValue(){
81+
inoputOne.value="我喜欢";
82+
inoputTwo.value="不喜欢";
83+
}
4484
</script>
4585
</body>
4686
</html>

0 commit comments

Comments
 (0)