-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
3385 lines (2199 loc) · 384 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html class="theme-next muse use-motion" lang="">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />
<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />
<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4">
<link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">
<meta name="keywords" content="Hexo, NexT" />
<meta name="description" content="web前端开发，移动端开发是一个很好的工种，希望你能和我携手共进前端职业发展">
<meta property="og:type" content="website">
<meta property="og:title" content="一个学徒的世界">
<meta property="og:url" content="http://biedongda.com/index.html">
<meta property="og:site_name" content="一个学徒的世界">
<meta property="og:description" content="web前端开发，移动端开发是一个很好的工种，希望你能和我携手共进前端职业发展">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="一个学徒的世界">
<meta name="twitter:description" content="web前端开发，移动端开发是一个很好的工种，希望你能和我携手共进前端职业发展">
<script type="text/javascript" id="hexo.configurations">
var NexT = window.NexT || {};
var CONFIG = {
root: '/',
scheme: 'Muse',
version: '5.1.4',
sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
fancybox: true,
tabs: true,
motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
duoshuo: {
userId: '0',
author: 'Author'
},
algolia: {
applicationID: '',
apiKey: '',
indexName: '',
hits: {"per_page":10},
labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
}
};
</script>
<link rel="canonical" href="http://biedongda.com/"/>
<title>一个学徒的世界</title>
</head>
<body itemscope itemtype="http://schema.org/WebPage" lang="">
<div class="container sidebar-position-left
page-home">
<div class="headband"></div>
<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
<div class="header-inner"><div class="site-brand-wrapper">
<div class="site-meta ">
<div class="custom-logo-site-title">
<a href="/" class="brand" rel="start">
<span class="logo-line-before"><i></i></span>
<span class="site-title">一个学徒的世界</span>
<span class="logo-line-after"><i></i></span>
</a>
</div>
<p class="site-subtitle">不敢面对的永远受其折磨</p>
</div>
<div class="site-nav-toggle">
<button>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
</button>
</div>
</div>
<nav class="site-nav">
<ul id="menu" class="menu">
<li class="menu-item menu-item-home">
<a href="/" rel="section">
<i class="menu-item-icon fa fa-fw fa-home"></i> <br />
Startseite
</a>
</li>
<li class="menu-item menu-item-archives">
<a href="/archives/" rel="section">
<i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
Archiv
</a>
</li>
</ul>
</nav>
</div>
</header>
<main id="main" class="main">
<div class="main-inner">
<div class="content-wrap">
<div id="content" class="content">
<section id="posts" class="posts-expand">
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://biedongda.com/2018/06/17/html-css-笔记整理/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="前端学徒">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/avatar.gif">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="一个学徒的世界">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/06/17/html-css-笔记整理/" itemprop="url">html/css-笔记整理</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">Veröffentlicht am</span>
<time title="Post created" itemprop="dateCreated datePublished" datetime="2018-06-17T23:48:07+08:00">
2018-06-17
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="html标签"><a href="#html标签" class="headerlink" title="html标签"></a>html标签</h2><h3 id="表格"><a href="#表格" class="headerlink" title="表格"></a>表格</h3><!--�93-->
<!--noindex-->
<div class="post-button text-center">
<a class="btn" href="/2018/06/17/html-css-笔记整理/#more" rel="contents">
Weiterlesen »
</a>
</div>
<!--/noindex-->
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://biedongda.com/2018/03/29/如何成为一名优秀的web前端工程师/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="前端学徒">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/avatar.gif">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="一个学徒的世界">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/03/29/如何成为一名优秀的web前端工程师/" itemprop="url">如何成为一名优秀的web前端工程师</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">Veröffentlicht am</span>
<time title="Post created" itemprop="dateCreated datePublished" datetime="2018-03-29T21:07:24+08:00">
2018-03-29
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h1 id="如何成为一名优秀的web前端工程师（前端攻城师）？"><a href="#如何成为一名优秀的web前端工程师（前端攻城师）？" class="headerlink" title="如何成为一名优秀的web前端工程师（前端攻城师）？"></a>如何成为一名优秀的web前端工程师（前端攻城师）？</h1><p> </p>
<blockquote>
<p>我所遇到的前端程序员分两种：<br>第一种一直在问：如何学习前端？<br>第二种总说：前端很简单，就那么一点东西。<br>我从没有听到有人问：如何做一名优秀、甚至卓越的WEB前端工程师。</p>
</blockquote>
<h2 id="何为：前端工程师？"><a href="#何为：前端工程师？" class="headerlink" title="何为：前端工程师？"></a>何为：前端工程师？</h2><p> 前端工程师，也叫Web前端开发工程师。他是随着web发展，细分出来的行业。</p>
<p>Web前端开发技术主要包括三个要素：HTML、CSS和JavaScript！<br> 它要求前端开发工程师不仅要掌握基本的Web前端开发技术，<strong>网站性能优化</strong>、<strong>SEO和服务器端的基础知识</strong>，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。<br> 随着近两三年来RIA（Rich Internet Applications的缩写，中文含义为：丰富的因特网应用程序）的流行和普及带来的诸如：Flash/Flex，Silverlight、XML和 服务器端语言（PHP、ASP.NET，JSP、Python）等语言，前端开发工程师也需要掌握。<br> 前端开发的入门门槛其实很低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。<br> HTML 甚至不是一门语言，他仅仅是简单的标记语言！<br> CSS 只是无类型的样式修饰语言。当然可以勉强算作弱类型语言。<br>Javascript 的基础部分相对来说不难，入手还算快。<br>也正因为如此，前端开发领域有很多自学成“才”的同行，但大多数人都停留在会用的阶段，因为后面的学习曲线越来越陡峭，每前进一步都很难。<br> Web前端技术有一些江湖气，知识点过于琐碎，技术价值观的博弈也难分伯仲，即全局的系统的知识结构并未成体系，这些因素也客观上影响了“正统“前端技术的沉淀！而且各种“奇技淫巧”被滥用，前端技术知识的传承也过于泛泛，新人难看清时局把握主次。因此，前端技术领域，为自己觅得一个靠谱的师兄，重要性要盖过项目、团队、公司、甚至薪水。<br> 另一方面，正如前面所说，前端开发是个非常新的职业，对一些规范和最佳实践的研究都处于探索阶段。<br> 总有新的灵感和技术不时闪现出来，例如CSS sprite、负边距布局、栅格布局等；<br> 各种JavaScript框架层出不穷，为整个前端开发领域注入了巨大的活力；<br> 浏览器大战也越来越白热化，跨浏览器兼容方案依然是五花八门。<br> 为了满足“高可维护性”的需要，需要更深入、更系统地去掌握前端知识，这样才可能创建一个好的前端架构，保证代码的质量。<br> 随着手持设备的迅猛发展，带动了HTML5行业标准的快速发展。web领域的技术，大概有10年都没有大的更新了！<br><strong>现在市场很需要优秀的、高级的前端工程师。</strong><br> 一方面是因为这是一个比较新的细分行业，而且前端程序员大都自学一部分，知识结构不系统；另一方面，大学里面没有这种课程，最最重要的是：北大青鸟这类培训机构也没有专门的前端工程师的培训课程！！<br> 吴亮在《JavaScript 王者归来》第一张的序里面说：大多数程序员认为 Javascript 过于简陋，只适合一些网页上面花哨的表现，所以不愿花费精力去学习，或者以为不学习就能掌握。<br> 实际上，一门语言是否脚本语言，往往是她的设计目标决定，简单与复杂并不是区分脚本语言和非脚本语言的标准。<br> 事实上，在脚本语言里面，Javascript 属于相当复杂的一门语言，他的复杂度即使放在非脚本语言中来衡量，也是一门相当复杂的语言！<br>Javascript 的复杂度不逊色于 Perl 和 Python！</p>
<h2 id="如何学习前端知识？"><a href="#如何学习前端知识？" class="headerlink" title="如何学习前端知识？"></a>如何学习前端知识？</h2><p><strong>我们生活在一个充满规则的宇宙里面。社会秩序按照规则运行，计算机语言几乎全部是规则的集合。计算机前辈们定义规则，规则约束我们，我们用规则控制数据。大部分时候，对数据的合理控制，来自于你对规则的掌握。</strong><br>学习 HTML，CSS 应该先跟着书仔细、扎实的学一遍。然后就需要做大量的练习，做各种常规的、奇怪的、大量的布局练习来巩固、理解自己的知识。<br> 而学习 Javascript 首先要知道这门语言可以做什么，不能做什么，擅长做什么，不擅长做什么！<br> 如果你只想当一个普通的前端程序员，你只需要记住大部分 Javascript 函数，做一些练习就可以了。<br> 如果你想当深入了解Javascript，你需要了解 Javascript 的原理，机制。需要知道他们的本源，需要深刻了解 Javascript 基于对象的本质。<br> 还需要深刻了解浏览器宿主下的Javascript的行为、特性。<br> 因为历史原因，Javascript一直不被重视，有点像被收养的一般！ 所以他有很多缺点，各个宿主环境下的行为不统一、内存溢出问题、执行效率低下等问题。<br> 作为一个优秀的前端工程师还需要深入了解、以及学会处理 Javascript 的这些缺陷。</p>
<h2 id="那么一名优秀的、甚至卓越的-前端开发工程师的具备什么条件？"><a href="#那么一名优秀的、甚至卓越的-前端开发工程师的具备什么条件？" class="headerlink" title="那么一名优秀的、甚至卓越的 前端开发工程师的具备什么条件？"></a>那么一名优秀的、甚至卓越的 前端开发工程师的具备什么条件？</h2><p> <strong>首先，优秀的Web前端开发工程师要在知识体系上既要有广度和深度！</strong> 做到这两点，其实很难。所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。技术非黑即白，只有对和错，而技巧则见仁见智。<br> 在以前，会一点Photoshop和Dreamweaver的操作，就可以制作网页。<br> 现在，只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。<br>Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好。<br>Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。<br> 其次，优秀的Web前端开发工程师应该具备快速学习能力。Web发展的很快，甚至可以说这些技术几乎每天都在变化！如果没有快速学习能力，就跟不上 Web发展的步伐。前端工程师必须不断提升自己，不断学习新技术、新模式；仅仅依靠今天的知识无法适应未来。Web的明天与今天必将有天壤之别，而前端工程师的工作就是要搞清楚如何通过自己的Web应用程序来体现这种翻天覆地的变化。<br> 说到这里，我想起了一个大师说过的一句话：对于新手来说，新技术就是新技术。<br> 对于一个高手来说，新技术不过是旧技术的延伸。<br> 再者，优秀的前端工程师需要具备良好的沟通能力，因为前端工程师至少都要满足四类客户的需求。<br> 1、产品经理。这些是负责策划应用程序的一群人。他们会想出很多新鲜的、奇怪的、甚至是不可能实现的应用。一般来说，产品经理都追求丰富的功能。<br> 2、UI设计师。这些人负责应用程序的视觉设计和交互模拟。他们关心的是用户对什么敏感、交互的一贯性以及整体的好用性。一般来说，UI设计师侯倾向于流畅靓丽、但并不容易实现的用户界面，而且他们经常不满前端工程师造成 1px 的误差。<br> 3、项目经理。这些人负责实际地运行和维护应用程序。项目管理的主要关注点，无外乎正常运行时间、应用程序始终正常可用的时间、性能和截止日期。项目经理追求的目标往往是尽量保持事情的简单化，以及不在升级更新时引入新问题。<br> 4、最终用户。指的是应用程序的主要消费者。尽管前端工程师不会经常与最终用户打交道，但他们的反馈意见至关重要。最终用户要求最多的就是对个人有用的功能，以及竞争性产品所具备的功能。<br>Yahoo 公司 ，YUI 的开发工程师 Nicholas C. Zakas 认为：<br> 前端工程师是计算机科学职业领域中最复杂的一个工种。绝大多数传统的编程思想已经不适用了，为了在多种平台中使用，多种技术都借鉴了大量软科学的知识和 理念。成为优秀前端工程师所要具备的专业技术，涉及到广阔而复杂的领域，这些领域又会因为你最终必须服务的各方的介入而变得更加复杂。专业技术可能会引领你进入成为前端工程师的大门，但只有运用该技术创造的应用程序以及你跟他人并肩协同的能力，才会真正让你变得优秀。<br> ————————————<br>关于书籍：<br> HTML、CSS 类别书籍，都是大同小异，在当当网、卓越网搜索一下很多推荐。如果感觉学的差不多了，可以关注一下《CSS禅意花园》，这个很有影响力。<br> Javascript 的书籍推荐看老外写的，国内很多 Javascript 书籍的作者对 Javascript 语言了解的都不是很透彻。<br> 这里推荐几本 Javascript 书籍：<br><strong>初级读物：</strong><br>《JavaScript高级程序设计》：一本非常完整的经典入门书籍，被誉为JavaScript圣经之一，详解的非常详细，最新版第三版已经发布了，建议购买。<br>《JavaScript王者归来》百度的一个Web开发项目经理写的，作为初学者准备的入门级教程也不错。<br><strong>中级读物：</strong><br>《JavaScript权威指南》：另外一本JavaScript圣经，讲解的也非常详细，属于中级读物，建议购买。<br>《JavaScript.The.Good.Parts》：Yahoo大牛，JavaScript精神领袖Douglas Crockford的大作，虽然才100多页，但是字字珠玑啊！强烈建议阅读。<br>《高性能JavaScript》：《JavaScript高级程序设计》作者Nicholas C. Zakas的又一大作。<br>《Eloquent JavaScript》：这本书才200多页，非常短小，通过几个非常经典的例子（艾米丽姨妈的猫、悲惨的隐士、模拟生态圈、推箱子游戏等等）来介绍JavaScript方方面面的知识和应用方法。<br><strong>高级读物：</strong><br>《JavaScript Patterns 》：书中介绍到了各种经典的模式，如构造函数、单例、工厂等等，值得学习。<br>《Pro.JavaScript.Design.Patterns》：Apress出版社讲解JavaScript设计模式的书，非常不错。<br>《Developing JavaScript Web Applications》：构建富应用的好书，针对MVC模式有较为深入的讲解，同时也对一些流程的库进行了讲解。<br>《Developing Large Web Applications》：不仅有JavaScript方面的介绍，还有CSS、HTML方面的介绍，但是介绍的内容却都非常不错，真正考虑到了一个大型的Web程序下，如何进行JavaScript架构设计，值得一读。<br> 要做优秀的前端工程师，还需要继续努力：《高性能网站建设指南》、《Yahoo工程师的网站性能优化的建议》、“YSLOW”性能优化建议、《网站重构》、《Web开发敏捷之道》、“ jQuery 库”、“前端框架”、“HTML5”、“CSS3”。。。 这些都要深入研究！<br>万事开头难！如果你能到这个境界，剩下的路自己就可以走下去了。<br>人们常说：不想当裁缝的司机，不是个好厨师。<br>如果单纯只是学习前端编程语言、而不懂后端编程语言（PHP、ASP.NET，JSP、Python），也不能算作是优秀的前端工程师。<br>在成为一个优秀的前端工程师的道路上，充满了汗水和辛劳。<br> —— 王子墨 写于 Hong Kong, Kowloon<br> 2012年10月28日 20:18</p>
<p><a href="https://kb.cnblogs.com/page/165309/" target="_blank" rel="external">转载链接:博客园</a></p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://biedongda.com/2018/03/17/JS面试题02/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="前端学徒">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/avatar.gif">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="一个学徒的世界">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/03/17/JS面试题02/" itemprop="url">JS面试题02</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">Veröffentlicht am</span>
<time title="Post created" itemprop="dateCreated datePublished" datetime="2018-03-17T20:15:16+08:00">
2018-03-17
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h1 id="题目"><a href="#题目" class="headerlink" title="题目"></a>题目</h1><ol>
<li>如何理解json</li>
</ol>
<h2 id="知识点"><a href="#知识点" class="headerlink" title="知识点"></a>知识点</h2><ol>
<li>对<code>json</code>的理解<figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// json 没什么特殊的，就是个js对象而已，json对象的属性必须要用双引号包裹</span></div><div class="line"></div><div class="line"><span class="comment">// 涉及到json 常用的两个方法：</span></div><div class="line"><span class="built_in">JSON</span>.stringify({<span class="string">"name"</span>:<span class="string">"li"</span>,<span class="string">"age"</span>:<span class="number">18</span>}); <span class="comment">// json对象 --> json字符串</span></div><div class="line"><span class="built_in">JSON</span>.parse(<span class="string">'{"name":"li","age":18}'</span>);<span class="comment">// json字符串 --> json对象</span></div></pre></td></tr></table></figure>
</li>
</ol>
<h1 id="存储"><a href="#存储" class="headerlink" title="存储"></a>存储</h1><h2 id="题目-1"><a href="#题目-1" class="headerlink" title="题目"></a>题目</h2><ol>
<li>请描述下<code>cookie</code>,<code>sessionStorage</code>和<code>localStorage</code>的区别<figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line">cookie ：本身用于客户端和服务端通讯，但它有本地存储的功能，于是就被借用了，使用<span class="built_in">document</span>.cookie=。。。获取修改即可</div><div class="line">缺点：</div><div class="line"> <span class="number">1.</span> 存储了太小<span class="number">4</span>kb；</div><div class="line"> <span class="number">2.</span> 所有http请求都带着，影响获取资源效率；</div><div class="line"> <span class="number">3.</span> API简单，需要封装才能用<span class="built_in">document</span>.cookie...；</div><div class="line"></div><div class="line">sessionStorage</div><div class="line"> 浏览器关了会清<span class="number">0</span></div><div class="line"> HTML5专门为存储而设计，最大容量<span class="number">5</span>M；API简单易用；</div><div class="line"> sessionStorage.setItem(key,value);</div><div class="line"> sessionStorage.getItem(key);</div><div class="line"></div><div class="line">localStorage</div><div class="line"> HTML5专门为存储而设计，最大容量<span class="number">5</span>M；API简单易用；</div><div class="line"> localStorage.setItem(key,value);</div><div class="line"> localStorage.getItem(key);</div><div class="line">ios safari隐藏模式下，localstorage.getItem会报错，建议统一使用<span class="keyword">try</span> <span class="keyword">catch</span>封装</div></pre></td></tr></table></figure>
</li>
</ol>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://biedongda.com/2018/03/13/JS面试题01/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="前端学徒">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/avatar.gif">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="一个学徒的世界">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/03/13/JS面试题01/" itemprop="url">JS面试题01</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">Veröffentlicht am</span>
<time title="Post created" itemprop="dateCreated datePublished" datetime="2018-03-13T09:55:55+08:00">
2018-03-13
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h1 id="变量类型和计算"><a href="#变量类型和计算" class="headerlink" title="变量类型和计算"></a>变量类型和计算</h1><h2 id="题目："><a href="#题目：" class="headerlink" title="题目："></a>题目：</h2><ol>
<li>js中使用<code>typeof</code>能得到的类型有哪些</li>
<li>何时使用<code>===</code>何时使用<code>==</code></li>
<li>js中有哪些内置函数</li>
<li>js变量按照存储方式分为哪些类型，并描述其特点</li>
<li>数组的常用api有哪些</li>
</ol>
<h2 id="知识点："><a href="#知识点：" class="headerlink" title="知识点："></a>知识点：</h2><ol>
<li><p><code>typeof</code>的返回值</p>
<!--�13-->
</li>
<li><p><code>===</code> 和 <code>==</code>的区别</p>
<!--�14-->
</li>
<li><p>内置函数</p>
<!--�15-->
</li>
<li><p>数据类型：值类型与引用类型</p>
<!--�16-->
</li>
<li><p>数组常用api</p>
<!--�17-->
</li>
</ol>
<!--noindex-->
<div class="post-button text-center">
<a class="btn" href="/2018/03/13/JS面试题01/#more" rel="contents">
Weiterlesen »
</a>
</div>
<!--/noindex-->
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="http://biedongda.com/2018/03/09/http服务与ajax编程/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="前端学徒">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/avatar.gif">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="一个学徒的世界">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/03/09/http服务与ajax编程/" itemprop="url">http服务与ajax编程</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">Veröffentlicht am</span>
<time title="Post created" itemprop="dateCreated datePublished" datetime="2018-03-09T11:03:54+08:00">
2018-03-09
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h1 id="服务器"><a href="#服务器" class="headerlink" title="服务器"></a>服务器</h1><blockquote>
<p>前言：通俗的讲，能够提供某种服务的机器（计算机）称为服务器</p>
</blockquote>
<h2 id="服务器软件"><a href="#服务器软件" class="headerlink" title="服务器软件"></a>服务器软件</h2><blockquote>
<p>使计算机具备提供某种服务能力的应用软件，称为服务器软件，<br>通过安装相应的服务软件，然后进行配置后就可以使计算具备了提供某种服务的能力。</p>
</blockquote>
<p>常见的服务器软件有：</p>
<ol>
<li>文件服务器：Server-U、FileZilla、VsFTP等（FTP是File Transfer Protocol文件传输协议）；</li>
<li>数据库服务器：oracle、mysql、SQL server、DB2、ACCESS等；</li>
<li>邮件服务器：Postfix、Sendmail等；</li>
<li><strong>HTTP服务器</strong>：Apache、Nginx、IIS、Tomcat、NodeJS等；</li>
</ol>
<h2 id="服务器类型"><a href="#服务器类型" class="headerlink" title="服务器类型"></a>服务器类型</h2><ol>
<li>按<strong>服务类型</strong>可分为：文件服务器、数据库服务器、邮件服务器、Web服务器等；</li>
<li>按<strong>操作系统</strong>可分为：Linux服务器、Windows服务器等；</li>
<li>按<strong>应用软件</strong>可分为 Apache服务器、Nginx 服务器、IIS服务器、Tomcat服务器、weblogic服务器、WebSphere服务器、boss服务器、 Node服务器等；</li>
</ol>
<h2 id="HTTP服务器"><a href="#HTTP服务器" class="headerlink" title="HTTP服务器"></a>HTTP服务器</h2><p>即网站服务器，主要提供文档(文本、图片、视频、音频)浏览服务，一般安装Apache、Nginx服务器软件。</p>
<p>HTTP服务器可以结合某一编程语言处理业务逻辑，由此进行的开发，通常称之为<strong>服务端开发</strong>。 </p>
<p>常见的运行在服务端的编程语言包括 php、java、.net、Python、Ruby、Perl等。 </p>
<h2 id="服务器总结"><a href="#服务器总结" class="headerlink" title="服务器总结"></a>服务器总结</h2><ol>
<li>服务器说白了就是计算机，通过安装了某些软件，就可以提供某些特定的服务器。</li>
<li>根据服务器软件的功能，名称，安装的系统这些不同的标准，可以对服务器划分成不同的类型。</li>
<li>HTTP服务器主要提供网站浏览服务，通常需要结合某种编程语言进行开发，我们通常称之为服务器开发。</li>
<li>专业的服务器与计算机的区别<ol>
<li>稳定性：服务器要求7*24不间断运行。</li>
<li>性能：服务器能够同时响应更多客户端的请求。</li>
<li>价格：服务器价格通常比普通计算机贵很多。</li>
</ol>
</li>
</ol>
<p><strong>台式服务器</strong></p>
<p><img src="/2018/03/09/http服务与ajax编程/images/01.jpg" alt=""></p>
<p><strong>机架服务器</strong></p>
<p><img src="/2018/03/09/http服务与ajax编程/images/02.jpg" alt=""></p>
<p><strong>机房</strong></p>
<p><img src="/2018/03/09/http服务与ajax编程/images/03.jpg" alt=""></p>
<p><strong>服务器的结构</strong><br><img src="/2018/03/09/http服务与ajax编程/images/server1.png" alt=""></p>
<h1 id="客户端"><a href="#客户端" class="headerlink" title="客户端"></a>客户端</h1><blockquote>
<p>具有向服务器<strong>索取服务</strong>能力的终端，叫做客户端。</p>
</blockquote>
<ul>
<li>客户端：电脑、平板、手机安装了客户端软件，就可以称为客户端</li>
<li>客户端：安装客户端软件，<strong>索取服务</strong>的一方</li>
<li>服务器：安装服务器软件，<strong>提供服务</strong>的一方</li>
</ul>
<h2 id="客户端软件"><a href="#客户端软件" class="headerlink" title="客户端软件"></a>客户端软件</h2><p>浏览器===>索取<strong>网站服务浏览</strong>的软件</p>
<p>迅雷===>索取文件下载服务的软件</p>
<p>铁路12306====>索取火车票订购服务</p>
<p>今日头条====>索取新闻头条服务</p>
<p>对于前端工程师而言，主要接触到的客户端软件就是<strong>浏览器</strong>，当然也可能会涉及大一些app开发。</p>
<p>以浏览器为宿主环境，结合 HTML、CSS、Javascript等技术，而进行的一系列开发，通常称之为<strong>前端开发</strong>。</p>
<h2 id="服务器与客户端的关系"><a href="#服务器与客户端的关系" class="headerlink" title="服务器与客户端的关系"></a>服务器与客户端的关系</h2><p><img src="/2018/03/09/http服务与ajax编程/images/04.png" alt=""></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//1. QQ聊天中服务器与客户端的交互过程</span></div><div class="line"><span class="comment">//2. QQ能够与微信进行聊天吗？为什么？</span></div></pre></td></tr></table></figure>
<p>后端开发和前端开发</p>
<p>前端开发主要说的是利用html、css、js等技术完成页面的搭建，数据的传递</p>
<p>前台开发和后台开发主要看到是网页性质，我们现在目前写的页面基本都是前台页面，如果是后台管理系统类似的页面开发叫做后台开发，但是后台管理系统也有界面，也需要通过html、css、js等技术来实现</p>
<p>后端开发主要说的是在服务器上进行开发，也就是说后端写的代码是在服务器上运行的，而我们目前学到html、css、js等都是运行在客户端的</p>
<p>常见的服务端语言有 PHP ASP （.net） JSP（java） Ruby nodeJs</p>
<h1 id="软件架构"><a href="#软件架构" class="headerlink" title="软件架构"></a>软件架构</h1><blockquote>
<p>软件架构可以分为BS架构与CS架构</p>
</blockquote>
<h2 id="CS架构"><a href="#CS架构" class="headerlink" title="CS架构"></a>CS架构</h2><p>Client/Server架构，即客户端/服务器架构。是大家所熟悉的软件体系结构。需要安装对应的客户端软件，才能获取响应的服务。</p>
<p>常见的CS架构：</p>
<p> QQ、LOL、微信等</p>
<p>特点：</p>
<ul>
<li>需要安装才是使用</li>
<li>性能高效，使用更加稳定和流畅</li>
<li>开发和维护难度更大。</li>
<li>需要更新</li>
<li>需要兼容操作系统。</li>
</ul>
<h2 id="BS架构"><a href="#BS架构" class="headerlink" title="BS架构"></a>BS架构</h2><p>Broswer/Server架构，即浏览器/服务器架构。随着Internet的兴起，对CS结构的一种变化的结构。用户只需要安装浏览器即可。</p>
<ul>
<li>不需要安装，只需要浏览器即可。</li>
<li>相比BS架构，性能相对较差，没有那么流畅和稳定。</li>
<li>开发维护方便。</li>
<li>不需要更新</li>
<li>不用兼容操作系统。但是需要兼容浏览器。</li>
</ul>
<h1 id="网络基础"><a href="#网络基础" class="headerlink" title="网络基础"></a>网络基础</h1><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//思考：我写的代码，放到服务器后，同学们是如何访问到我的页面的？</span></div></pre></td></tr></table></figure>
<h2 id="ip地址"><a href="#ip地址" class="headerlink" title="ip地址"></a>ip地址</h2><p>所谓IP地址就是给每个连接在互联网上的主机分配的一个32位地址。(就像每部手机能正常通话需要一个号码一样)</p>
<p>通过ip就可以找到具体的某一台计算机。</p>
<p>例 <code>192.168.1.110</code></p>
<p>查看本机IP地址 <code>ping</code>、<code>ipconfig</code>、<code>ifconfig</code>（linux）</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">ping <span class="number">192.168</span><span class="number">.1</span><span class="number">.110</span> <span class="comment">//查看和某个同学的电脑是否连通</span></div></pre></td></tr></table></figure>
<p>两种特殊的IP地址：</p>
<p><code>127.0.0.1</code> 作为本地测试的IP地址。本机测试时，客户端与服务器都安装在本地计算机上，数据无需任何网络传输。<br><code>192.168</code> 开头为局域网的地址。</p>
<h2 id="域名"><a href="#域名" class="headerlink" title="域名"></a>域名</h2><p>由于IP地址基于数字，不方便记忆，于是便用域名来代替IP地址，域名是一个IP地址的“面具”</p>
<p>查看域名对应的IP地址 <code>ping</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">ping jd.com <span class="comment">//可以获取到京东的ip</span></div></pre></td></tr></table></figure>
<p>特殊的域名:<br><code>localhost</code>，意思为本地主机。这是一个保留域名，主要用于本地测试，对应IP地址为127.0.0.1。</p>
<h2 id="DNS服务器"><a href="#DNS服务器" class="headerlink" title="DNS服务器"></a>DNS服务器</h2><p>DNS（Domain Name System）因特网上作为域名和IP地址相互映射的一个分布式数据库， 能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。</p>
<p>简单的说就是记录IP地址和域名之间对应关系的服务。</p>
<p>查找优先级 本机hosts文件、DNS服务器</p>
<p>ipconfig /flushdns 刷新DNS</p>
<p><img src="/2018/03/09/http服务与ajax编程/images/05.png" alt=""></p>
<h2 id="端口"><a href="#端口" class="headerlink" title="端口"></a>端口</h2><p>端口号是计算机与外界通讯交流的出口，每个端口对应不同的服务。<br>现实生活中，银行不同的窗口办理不同的业务。<br>查看端口占用情况 <code>netstat -an</code><br>常见端口号 80、8080、3306、21、22</p>
<h2 id="本地hosts"><a href="#本地hosts" class="headerlink" title="本地hosts"></a>本地hosts</h2><blockquote>
<p>Hosts是一个没有扩展名的系统文件，可以用记事本等工具打开，其作用就是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”，当用户在浏览器中输入一个需要登录的网址时，系统会<strong>首先自动从Hosts文件中寻找对应的IP地址</strong>，一旦找到，系统会立即打开对应网页，如果没有找到，则系统会再将网址提交DNS域名解析服务器进行IP地址的解析。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//hosts文件的地址：C:\Windows\System32\drivers\etc</span></div><div class="line"><span class="comment">//在浏览器中输入www.taobao.com的执行过程。</span></div></pre></td></tr></table></figure>
<p><img src="/2018/03/09/http服务与ajax编程/images/06.png" alt=""></p>
<h1 id="搭建HTTP服务器"><a href="#搭建HTTP服务器" class="headerlink" title="搭建HTTP服务器"></a>搭建HTTP服务器</h1><h2 id="phpStudy介绍"><a href="#phpStudy介绍" class="headerlink" title="phpStudy介绍"></a>phpStudy介绍</h2><blockquote>
<p>phpStudy是一个PHP调试环境的程序集成包。<br>该程序包集成最新的Apache+PHP+MySQL+phpMyAdmin,安装非常的简单<br>退出该软件，并不能完全退出程序，如果在去启动其他类似wrap的集成软件，会启动不成功。</p>
</blockquote>
<p><img src="/2018/03/09/http服务与ajax编程/./images/phpstudy.png" alt=""></p>
<h2 id="phpStudy的安装"><a href="#phpStudy的安装" class="headerlink" title="phpStudy的安装"></a>phpStudy的安装</h2><p>安装phpStudy，解压双击安装(<strong>非中文路径</strong>)，其它默认安装。</p>
<p><strong>推荐就安装在默认的目录下，一定不能有中文，否则肯定启动不起来。</strong></p>
<p><img src="/2018/03/09/http服务与ajax编程/images/install.png" alt=""></p>
<h2 id="phpStudy的错误解决"><a href="#phpStudy的错误解决" class="headerlink" title="phpStudy的错误解决"></a>phpStudy的错误解决</h2><p>如果phpStudy启动发生错误，参数下列几点。</p>
<h3 id="关闭iis服务器"><a href="#关闭iis服务器" class="headerlink" title="关闭iis服务器"></a>关闭iis服务器</h3><p>如果发现服务器启动不成功，很大原因是端口被占用了，因为windows默认会有一个iis服务器，只需要把iis服务器给禁用了即可。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//控制面板-->程序-->程序与功能-->启用或关闭windows功能</span></div></pre></td></tr></table></figure>
<p><img src="/2018/03/09/http服务与ajax编程/images/iis.png" alt=""></p>
<h3 id="提示缺少vc9-库文件"><a href="#提示缺少vc9-库文件" class="headerlink" title="提示缺少vc9 库文件"></a>提示缺少vc9 库文件</h3><p>在提供的ajax资料库中找到<strong>phpStudy运行库</strong>， 根据自己电脑操作系统的位数安装对应的vc9运行库即可。</p>
<p><img src="/2018/03/09/http服务与ajax编程/images/vc9.png" alt=""></p>
<h3 id="关闭防火墙"><a href="#关闭防火墙" class="headerlink" title="关闭防火墙"></a>关闭防火墙</h3><p>如果希望自己的服务器能够被别人访问。需要关闭防火墙。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//控制面板--->系统和安全--->Windows 防火墙--->启动或者关闭windows防火墙</span></div></pre></td></tr></table></figure>
<p><img src="/2018/03/09/http服务与ajax编程/images/fhq.png" alt=""></p>
<p>为了减少出错安装路径不得有汉字，如有防火墙开启，会提示是否信任httpd、mysqld运行，请选择全部允许。 </p>
<h2 id="phpStudy的配置"><a href="#phpStudy的配置" class="headerlink" title="phpStudy的配置"></a>phpStudy的配置</h2><h3 id="修改网站目录与默认首页"><a href="#修改网站目录与默认首页" class="headerlink" title="修改网站目录与默认首页"></a>修改网站目录与默认首页</h3><p><img src="/2018/03/09/http服务与ajax编程/images/index.png" alt=""></p>
<ul>
<li>默认首页一般不用修改，业界规范就是index.html作为默认的首页。</li>
<li>修改网站目录时，网站目录一定不能中文，不然apache启动会失败。</li>
</ul>
<h3 id="虚拟主机配置"><a href="#虚拟主机配置" class="headerlink" title="虚拟主机配置"></a>虚拟主机配置</h3><p>在一台web服务器上，我们可以通过配置虚拟主机，然后分别设定根目录，实现对多个网站的管理。</p>
<p>具体步骤如下：</p>
<p><strong>1.找到httpd.conf文件</strong><br>在‘其他选项菜单’ –> ‘打开配置文件’ –> 选择’httpd-conf’<br>找到470行，去掉<code>#</code>号注释</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"># Virtual hosts</div><div class="line">Include conf/extra/httpd-vhosts.conf</div></pre></td></tr></table></figure>
<p><strong>2.找到<code>httpd-vhosts.conf</code>文件</strong></p>
<p>在phpStudy安装目录下找到:\phpStudy\Apache\conf\extra下找到httpd-vhosts.conf文件</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div></pre></td><td class="code"><pre><div class="line"># 默认的虚拟主机</div><div class="line"><VirtualHost _default_:<span class="number">80</span>></div><div class="line"> DocumentRoot <span class="string">"E:\cursor\13-SH11"</span></div><div class="line"> <Directory <span class="string">"E:\cursor\13-SH11"</span>></div><div class="line"> Options +Indexes +FollowSymLinks +ExecCGI</div><div class="line"> AllowOverride All</div><div class="line"> Order allow,deny</div><div class="line"> Allow <span class="keyword">from</span> all</div><div class="line"> Require all granted</div><div class="line"> <<span class="regexp">/Directory></span></div><div class="line"><span class="regexp"></</span>VirtualHost></div><div class="line"></div><div class="line"># Add any other Virtual Hosts below</div><div class="line"><VirtualHost *:<span class="number">80</span>></div><div class="line"> ServerAdmin [email protected]</div><div class="line"> #根目录</div><div class="line"> DocumentRoot <span class="string">"D:\www\jdm"</span></div><div class="line"> #域名</div><div class="line"> ServerName jdm.com</div><div class="line"> #完整域名</div><div class="line"> ServerAlias www.jdm.com</div><div class="line"> ErrorLog <span class="string">"logs/dummy-host.example.com-error.log"</span></div><div class="line"> CustomLog <span class="string">"logs/dummy-host.example.com-access.log"</span> common</div><div class="line"><<span class="regexp">/VirtualHost></span></div><div class="line"><span class="regexp"></span></div><div class="line"><span class="regexp"><VirtualHost *:80></span></div><div class="line"><span class="regexp"> ServerAdmin [email protected]</span></div><div class="line"><span class="regexp"> DocumentRoot "D:\www\wjs"</span></div><div class="line"><span class="regexp"> ServerName wjs.com</span></div><div class="line"><span class="regexp"> ServerAlias www.wjs.com</span></div><div class="line"><span class="regexp"> ErrorLog "logs/</span>dummy-host.example.com-error.log<span class="string">"</span></div><div class="line"><span class="string"> CustomLog "</span>logs/dummy-host.example.com-access.log<span class="string">" common</span></div><div class="line"><span class="string"></VirtualHost></span></div><div class="line"><span class="string"></span></div><div class="line"><span class="string"><VirtualHost *:80></span></div><div class="line"><span class="string"> ServerAdmin [email protected]</span></div><div class="line"><span class="string"> DocumentRoot "</span>D:\www\suning<span class="string">"</span></div><div class="line"><span class="string"> ServerName suning.com</span></div><div class="line"><span class="string"> ServerAlias www.suning.com</span></div><div class="line"><span class="string"> ErrorLog "</span>logs/dummy-host.example.com-error.log<span class="string">"</span></div><div class="line"><span class="string"> CustomLog "</span>logs/dummy-host.example.com-access.log<span class="string">" common</span></div><div class="line"><span class="string"></VirtualHost></span></div></pre></td></tr></table></figure>
<h1 id="PHP基础"><a href="#PHP基础" class="headerlink" title="PHP基础"></a>PHP基础</h1><p>PHP简介</p>
<ul>
<li>开源（open source）软件，跨平台，常用操作系统稳定执行。Windows / Linux。做WEB开发的经典组合 WAMP,LAMP基本都是开源软件。</li>
<li>入门简单,用户只需要关注应用，开发成本低。</li>
<li>支持的大多数主流数据库。MySQL，oracle,Redis等</li>
</ul>
<blockquote>
<p>文件以.php后缀结尾，所有程序包含在<code><?php 这里是代码 ?></code><br><strong>避免使用中文目录和中文文件名</strong>(否则会读取文件失败)<br><strong>php页面无法直接打开, 需要运行在服务器环境当中</strong></p>
</blockquote>
<p><strong><em>注意：学习php的目的是辅助学习ajax，因为我们需要了解一点后台的知识，千万不要本末倒置的跑去学习php语法。</em></strong> </p>
<h2 id="php初体验"><a href="#php初体验" class="headerlink" title="php初体验"></a>php初体验</h2><blockquote>
<p>webstorm对于php的支持并不友好，没有高亮显示，但是也支持代码提示，功能比较微弱，如果需要专业的提示和高亮，建议使用phpstorm或者是vscode。</p>
</blockquote>
<p><a href="http://www.jetbrains.com/phpstorm/" target="_blank" rel="external">phpstrorm下载地址</a><br><a href="https://code.visualstudio.com/" target="_blank" rel="external">vsCode下载地址</a></p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="meta"><?php</span></div><div class="line"> <span class="comment">//echo 相当于document.write</span></div><div class="line"> <span class="keyword">echo</span> <span class="string">"hello world"</span>;</div><div class="line"><span class="meta">?></span></div></pre></td></tr></table></figure>
<p>输入中文乱码问题：如果使用echo输出中文，会乱码。</p>
<p><strong><em>在php的语法中，每行末尾必须加分号，不然就报错了（最后一行可以不加分号）</em></strong></p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="meta"><?php</span></div><div class="line"> <span class="comment">//content-Type:text/html;返回内容是一个HTML文档，这样设置后，就能识别HTML标签了。</span></div><div class="line"> <span class="comment">//charset=utf-8 设置编码集</span></div><div class="line"> header(<span class="string">"content-Type:text/html;charset=utf-8"</span>);</div><div class="line"> <span class="keyword">echo</span> <span class="string">"hello world"</span>;</div><div class="line"> <span class="keyword">echo</span> <span class="string">"<br/>"</span>;</div><div class="line"> <span class="keyword">echo</span> <span class="string">"大家好，我是胡聪聪"</span>;</div><div class="line"><span class="meta">?></span></div></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//思考：浏览器访问html文件与访问php文件时，过程是怎么样的？</span></div></pre></td></tr></table></figure>
<h2 id="变量"><a href="#变量" class="headerlink" title="变量"></a>变量</h2><blockquote>
<p>php是一门弱类型语法，变量的类型可以随意改变。<br>变量其实就是存储数据的容器</p>
</blockquote>
<p><strong>变量的命名规则</strong></p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//1. 不需要关键字进行声明，变量在第一次赋值的时候被创建。</span></div><div class="line"><span class="comment">//2. 必须以$符号开始</span></div><div class="line"><span class="comment">//3. $后面的命名规则与js的变量命名规则一致。</span></div><div class="line">$name = <span class="string">"胡聪聪"</span>;</div><div class="line"><span class="keyword">echo</span> $name;</div></pre></td></tr></table></figure>
<h3 id="变量操作"><a href="#变量操作" class="headerlink" title="变量操作"></a>变量操作</h3><p><strong>删除变量</strong></p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// 销毁指定的变量</span></div><div class="line"><span class="keyword">unset</span>($var);</div></pre></td></tr></table></figure>
<p><strong>判断变量是否设置值</strong></p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// 检测变量是否设置，并且不是 NULL。</span></div><div class="line"><span class="comment">// 变量未设置或者设置为null,返回false（认为变量没有设置）。其余情况全部为true。一般用来判断变量是否设置，因为变量未设置，无法直接使用。(变量先赋值，在使用！） </span></div><div class="line"><span class="keyword">isset</span>($var) <span class="comment">// 返回布尔类型</span></div></pre></td></tr></table></figure>
<p><strong>判断变量是否为空</strong></p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// 判断变量是否为空。PHP中认为变量的值为：""、0、"0"、NULL、FALSE、[]时，变量虽然赋值了，但是无实际的意义。为空。</span></div><div class="line"><span class="keyword">empty</span>($var) <span class="comment">// 返回布尔类型</span></div></pre></td></tr></table></figure>
<h2 id="数据类型"><a href="#数据类型" class="headerlink" title="数据类型"></a>数据类型</h2><h3 id="简单数据类型"><a href="#简单数据类型" class="headerlink" title="简单数据类型"></a>简单数据类型</h3><p><strong>字符串</strong> </p>
<figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">$str = <span class="string">"胡聪聪"</span>;</div><div class="line"><span class="keyword">echo</span> $str;</div></pre></td></tr></table></figure>
<p><strong>整数</strong> </p>