尚硅谷前端基础 (1)

大家好，欢迎收看上硅谷的前端视频教程，我是讲师李立超，这是我们的第一节课，我们的课程简介，那么看到这个视频，我相信你是对我们的前端开发非常感兴趣，诶，也就是想去学习前端开发的，那我们前端开发到底是做什么呢？这节课我们就来对它做一个简单的介绍。首先我们都知道，呃，无论是我们的前端工程师也好，还是后台工程师也好，对这些我们的软件工程师，实际上他们的工作都是一样的，无非就是开Y发软件，所以不管你去学什么语言也好，诶学Java也好，学Python也好，诶，学PHP也好，学的这些语言我们最后都是用来做软件，这是毫无疑问的。那么软件我们分几种呢？我们大概给软件分成三类，第一类。

我们叫做系统软件啊，我们叫做系统软件，那所谓的系统软件也很好理解，像我们在电脑里用的对吧，我们用的什么Windows诶Linux诶，我们的Mac OS，那这些都属于是我们的这个操作系统，诶你买了电脑，或者说你自己组装了一下电脑，第一件事儿你就先激活，或者要先安装一个操作系统，诶那甚至包括我们像手机上的安卓。IOS，哎，包括可能华为最近整个特别火的那个叫鸿蒙，对吧，这些都属于操作系统，诶操作系统就好像是我们一个计算机的一个灵魂一样，只有拥有了操作系统，我们的计算机才可以正常的去运行啊这是我们说的系统软件，那除了作系统软件以后呢？诶我们以外，我们还有一些叫做应用软件，什么叫应用软件呢？诶其实我们在我们计算机上用的这些软件，诶基本上大部分都是应用软件，像我们写文字啊，做PPT，我们就可能要用到这个office，我们聊天可能要用到这个QQ，我要查毒，查一些木马，那我可能要用到这种。

360的安全卫士，那这些都属于应用软件，应用软件可以替我们完成某些的功能啊，某些功能还有一种就是我们最喜欢的了，这个叫做游戏软件，那通过这个游戏软件我们就可以去诶玩一些诶游戏，诶像可能比较火的是吧，像王者荣耀啊，像绝地求生诶这些都属于游戏软件，所以无论是什么系统软件也好，还是应用软件也好，还是游戏软件也好，他们统一就有一个名字，就叫什么呢？就叫做软件啊，他们这些东西都叫软件，换句话说，只要你打开电脑，你看见的所有东西都是软件，如果你的电脑里没有软件，你的计算机，你的电脑是没有办法正常去使用的，所以作为我们这些程序员，这些软件工程师来讲，我们的任务就是要去。

开发这些软件啊，开发这些软件，那我们的软件它是由什么组成的呢？通常情况下，我们现在的软件都由两部分组成，一部分我们叫做客户端，还有一部分我们叫做服务器，那什么叫客户端呢？简单来讲，客户端就是你能看见的那个部分，比如说我打开word word我们打开以后，它是不是会有一个编辑界面啊，哎，我们看到那个编辑界面就差的一个客户端，比如说我们使用QQ聊天，我们用QQ聊天，我是不是要先装一个QQ的软件啊，装完了以后，我聊天的时候在这儿可以有一个这个聊天窗口，那这个也属于客户端，诶简而言之，软件里边你能看见的就是客户端，而服务器呢？服务器是在我们的客户端的背后，来为我们软件提供一些核心的一些服务，来处理一些核心的业务逻辑的，比如说我通过QQ聊天。

我在这儿可能我打印一给我写一个是吧，诶小红小张你好，我写完了以后，我一点那个发送消息，这个消息去哪了？诶这个消息实际上是发送了腾讯的一个服务器上，腾讯服务器收到这个消息以后，再把这个消息转发给这个需要收到消息这个人，诶你是小红还是小张就直接转发过就行了，所以那像我们发消息的都这个东西是什么呀？是我们的客户端，而接收消息这部分叫什么呢？叫服务器，其实也很简单，客户端是在我们本地需要安装的，而服务器，诶没准在哪呢，他在远程为我们提供提供服务啊，所以服务器负责在远程处理业务，逻辑在这儿呢，我也截了一个简单的一个示意图，你像这个就是一个QQ对吧，QQ发送消息的时候，实际上就是把消息发送给谁呢？发送给啊服务器，服务器再根据你的请求给你返回一个响应，再去处理你那个请求，所以服务器跟客户端。

基本上就这么一个关系，那如果举一个现实生活中的例子的话，客户端有点像什么呢？有点像一个饭店里的那个服务员，你去一个饭店吃饭，一般接待你的都是都是服务员，那不会说我饭店里边这个大厨出来接待你很少，除非是一些小饭店，对吧？诶，厨师服务员是一个人，那可能是这种情况，但是一般情况下饭店都会有一个专门的服务员，诶服务员去接待你，呃，问你想吃什么，负责给你点菜，负责给你端菜，所以服务员就有点类似于我们的客户端。而我们的服务器是谁呢？诶，服务器就相当于我们的厨师，诶厨师在后厨给我们负责什么呀？负责业务逻辑，那饭店的业务逻辑呢，就是什么呀？就是炒菜嘛，哎，我给你炒菜是吧？诶，诶这个煎炒烹炸你炒完了，然后由服务员给你端上来，所以大厨在饭店里边来说，一直是一个很神秘的存在，反正你也不知道他这个菜是怎么做出来的，总之你只要点了他就能给你端上来，那服务器也是这么一个东西，我们看不见，但是它却真真正正在给我们提供提供服务，那如果你玩游戏可能会体会更明显，哎，因为我们的游戏的逻辑最终都在服务器去处理，所以你会发现当你的网络很卡的时候，你玩起游戏来也很不顺畅，那是为什么呢？就是因为你消息在发送给服务器的过程中，或者是服务器给你返回数据的过程当中，网络不太顺畅，所以就出现卡了，诶所以记住了服务器在远程，而我们的客户端在里。

啊，在本地，所以你看到我们这个软件一个结构啊，基本上你也知道一个程序员要干嘛啊，其实你的工作无非就两种，要么写客户端，要么就写服务器，当然还有一些其他相关的，在这儿我们就不讨论了，我们就说一些比较常见的，诶你要么就写客户端，要么写务器，那我们先来说谁呢？我们先来说服务器，那我们写服务器来讲的话，其实比较常见的像像Java呀，哎，像PP呀，像c sharp呀，像Python，包括我们GS里边的我们的note GS，这些都属于是服务器的语言，也就说你通过这些语言都可以去开发服务器，所以现在可能比较主流的服务器语言还主要是为我们这个万年不变的Java，哎，Java是基本上是一个高性能的商用的服务器的一个不二的选择，所以如果你对服务器感兴趣的话，那可能最好的选择就是扎我了，其其实我可能更感觉这个基本上是我们服务器的一个。

唯一选择，那其他的像PP啊，像c sharp，像Python啊，嗯，也会有人去拿他们作为服务器，但是相对来说比较小众，再说直接一点，可能工作没有那么好找，所以服务器来说主要还是Java，那为什么我把note GS这也标红了呢？Note GS它也是一门服务器的语言，为什么标红了，因为它是用我们前端的javascript去编写服务器啊，所以基本上你只要会前端note GS，掌握起来也是非常非常的一个容易的，所以note GS是我们作为前端工程师来说，首选的一个了解服务器的一个一个方式，一个语言，也是我们前端开发当中必备的这么一个这么一个东西，所以对于我们来说，如果你想做前端，你对前端感兴趣，那这个note GS是我们一个。

必须学诶，而且必须学好的这么一个这么一个东西，当然后边的课程我们还会去，还会去介绍，这里就不多说了，但是还是服务器语言的话，Java是numberone是第一个要学服务器一定要学Java，但是对于我们前端来说，Note GS应用也很广泛，但是它它不像Java一样，Java可能就是大范围的应用，而note GS可能就哎某一小块是吧，我用个note g s等于它是一个辅助的一个身份，而Java就是在前面这个哎，冲锋陷阵的一个啊，Not基S属于一个辅助，但是对于我们来说，对我们来说很重要啊。

好，服务器我们就不多说了，因为都知道嘛，前端前端肯定我们不是写服务器的，前端肯定在前边嘛，对吧，我们更多的是写那个哎，写那个服务员，写那个客户端的一个角色，所以这个时候我们来看一下我们的客户端，客户端我们存在的形式呢，常见的有三种，第一种呢，我们叫做文字形式的客户端啊，叫做一个文字形式客户端，那什么叫文字形式客端呀，你如果你用过的话，就是很古老了，是吧，现在可能在Linux，在unnux里边用的还挺多的，像Mac里边呀，都会用到很多，那但是我们一般用户用不到它就是一个。如果你看那些电影里边就是一个小黑屏幕，对吧，我通过键入一个一个命令，通过这个命令来使用软件，那比较典型的就是像我们这个，哎，DOS的命令行，像我们这个Linux的命令行，还有以后我们会学这个数据库，数据库也可以用命令行去操作，那这些都属于文字客户端，我通过命令的形式去使用软件，但是现在已经很少了，但是其实在在我小时候还需要通过这种形式，可能我要启动一些游戏还会用到，因为那个时候可能比较比较老的系统嘛，但是现在，呃，基本上除非你是专业的开发人员，这种东西已经很少用了啊，很少用了。然后第二一种比较常见的是我们的图形化界面，图形化界面就比这个文字要进步了，图形化界面，你就不用再去输入命令了，我们都是通过鼠标的什么单击啊双击啊，鼠标的拖动啊，哎什么输在这个手机上，可能就是手指手指的那个缩放拖动，哎，点击诶对吧，或者你摁住不放对吧，这些东西来操作我们这个软件。

这些叫做一个图形化界面，像我们在Windows里啊，在Mac中啊，在安卓，在iOS中，我们大部分应用都属于这种图形化界面啊，图形化界面就比这个文字客户端要好多了，你文字客户端我还需要记命令，而图形化界面基本上你只要认字，你只要能能点有手，哎，有手就能就能对这个软件进行进行操作啊，这是图形化界面。然后再说一个，其实我们这个叫做一个网页，网页它也属于是图形化界面，但是它跟图形化界面不同，网页嘛，网页我们是需要通过浏览器去访问的，也就是说我们拿一个网页来作为软件的一个客户端来使用这个东西，很简单，我们看到的所有网站它都属于是这个范畴，所以其实图形化界面的软件跟网页方式的软件本质上没有什么太大区别，但是一般我们称呼上呢，这种形式我们叫做一个CS架构C。

And s叫做一个server，叫做C架构，而这个网页的形式我们叫做一个BS的一个架构啊，BS架构也就是说，呃，其实本质上没什么区别，只不过一个是使用我们这个传统的图形化界面，还有一个是使用我们这个网页这种形式来使用软件的，那这是我们说的BS，那这里面其实我们要开发的话，作为我们前端，你看我给网页这我也给你标红了，所以你应该能猜到了，我们学习前端，我们主要开发的软件一定都是以网页作为客户端来使用软件的啊，都是以网页，像京东啊，像淘宝啊，像12306这些都属于这种叫做BS架构，那既然我们要写它，那我们就了解一下它有哪些优点，有哪些好处，我们为什么要使用网页来做客户端，那其实相较于我们传统的这种图形化界面软件，像word，像QQ对吧，像你给。

脑上的微信，像你在电脑上玩的一些游戏，对吧，这些都属于传统呢图形化基本的软件，那我们的网页跟他们比呢，有很多的优点啊，我们来说几个典型的，第一个我的网页不需要安装，哎，第一个不需要安装，什么意思，你想一下，我现在想要在我的电脑里用word，我第一件事我得先，哎，我得先下载office，现在office完了以后，我还得从这个微软上，我得购买什么这这这什么CDK啊，注册码这些东西，然后我才能去使用，也就是我要用它，我必须得先要去。

安装安装完了才能用，所以很麻烦对吧，尤其是有一些软件安装起来很麻烦，有的时候你装不完用不了，但是如果是一个我们的BS加购的软件，像比如说我们说的京东，你用京东，你在你的电脑上，你要使用京东，你要去京东买东西，你用不用安装个京东的客户端，哎不需要我们直接打开浏览器，你访问3.3，直接一敲回车，我们是不是直接就看到这个京东的网站了，诶所以它并不需要安装，你直接整完了，直接通过网址一访问，咔就来了，诶为什么？因为它是它是网页嘛，它并不需要你去安装啊，第二一个他也不需要什么呢，更新，呃，更新这个事儿可能拿QQ举例的比较明显，因为QQ有时候就是时不时的一高兴。

就给你弹出一个提示框是吧？诶你的QQ需要需要更新啊，请更新以后再再使用，有的时候呢，你不更新啊，你还能凑合用，但是有的时候呢，它强制你更新，你不更新，连你用都不让你用，那就这个时候就是软件更新的时候，你不仅服务器要更新，你的客户端也得更新，但是对于我们的BS架构来说，我们的网页来说，你需不需要更新，诶京东改版了，淘宝改版了，哎，淘宝改版了，马云会不会跟商量这事儿啊，他不会，他理都不理你，他直接改版，改版完了以后，你直接一通过浏览器访问，哎呦更新了，为什么呀，因为他直接在服务器上对网页进行更新，那么你每一次所访的网页一定都是一个最新的，所以我们网页网站来说，没有一个更新的问题，也就是说你客户端你该怎么用还怎么用，我只要服务器更新了，你客户端自动就跟着更新了啊没有这个问题，因为你都不需要安装嘛，所以其实这两点你可以。

变成是一点啊第三一个我们叫做跨平台，什么叫跨平台呢？也就是说我们的BS价格软件，哎，比如说我还是拿京东举例子，我京东这个网站我可以在我的电脑，在我的计算机上去访问，那我能不能在我的手机上访问，哎也可以，那我能不能在我的诶安卓手机上访问，我能不能在我的iOS上访问，诶都能访问，只要你的计算机里边有一个浏览器，那么它就可以访问到京东这个网站，那这就意味着我实际上这个网站我做了几个，诶我只需要做一个，可以让你在所有的设备上都能访问，诶我开发一次可以在处处去运行，这就是所谓的跨平台，它没有平台说不是说我这写一个网页只能在window上用，Linux上就不能用了，没有这个问题，这是我们说的一个，哎，这个BS架构，但是你要说回CS架构，那比如说我在Windows上开发了一个QQ，那这个时候你在你的。

Mac上你在你的安卓手机上能不能用，诶注意是不能用的，诶同学说了，老师不对呀，我手机上也有QQ，我这个Mac，我这苹果本上也有QQ，诶对，确实有，但是它是怎么回事，它实际上是在你的Windows上开发了一个版本，在你的Mac上开发了一个版本，然后又在你的安卓手机，在你的iOS手机上又开发一个版本，所以它本身能不能跨平台，它不能跨平台，要想跨平台这怎么办？OK，每一个平台开发一个不同的版本啊，所以它的跨平台性基本上是是没有的，所以相较于我们的这个。CES架构，我们的B架构总会存在这么一些优点，但是这些优点里边哪个是最重要的呢？哎，其实最重要就是跨平台，为什么跨平台的优点是最重要的，因为其实作为我们商业应用来讲，其实什么安不安装啊，客户麻不麻烦呀，他并不是，呃，广大的这个老板，他需要考量的一个东西，他主要考量的一个还是什么，还是他的一个开发成本问题，那跨平台什么意思，我只需要开发一个网页，那这样在我所有的软件平台，在我所有操作系统上都可以直接去使用，那这个时候我的成本是不是就会降的很低啊，但是你对比着来说，你像我们传统的这种CS架构软件，像iOS里的，像安卓里的CS架构，比如说我想开发一个安卓的APP，那这个时候你这个APP它在苹果的手机上，在iPhone上能不能运行，是不能运行的，你要想在iPhone上运行，OK，那你就得需要开发一个安卓的。

然后还得再开发一个iPhone的，这样才能在两个系统上同时使用，而且你要想开发这软件，那你至少你是不是得养两个团队啊，还不算你服务器的团队，你就光这个客户端你得两个，一个是安卓的，一个是iOS，成本很高，但是反过来说你想。

你做的是网页，你用的是我们前端的团队，那这个时候就很简单了，开发一个网页，安卓也能用。LS上也能用，PC上也能用，甚至说以后你有了什么华为的鸿蒙的系统，它也可以用，因为它就是一个网页，可以在任何有浏览器的系统中去使用，所以它的成本会非常非常低，所以像这种我们的前端什么时候开始火的起来的，其实就是随着我们那个呃，移动互联网的热潮起来以后，开始最早火的其实就是那个安卓呀，IOS最早火的就是他们，但是随着市场越来越成熟，越来越稳定，他会发现安卓、iOS的维护成本，开发成本确实嘛呀，确实太高了，所以转而推动了很多这种移动互联网的公司转而向走向了前端，因为它确实可以简化我们的开发流程，也可以降低我们的开发成本，那也就是哎，从移动互联网崛起开始，我们前端工程师开始正式的崛起啊，所以记住了我们前端工程师主要。

打交道的就是网页，还有我们的浏览器，那我们在整个网页中其实要使用的语言也比较简单，就三个，一个叫做HTML，一个叫做CSS，还有一个叫做javascript，这三个里边其实都比较简单吧，但是javascript会比较比较难一点，因为它涉及到东西会比较多，CSS呢，稍微的他也不难，就稍微的麻烦一点啊，麻烦一点，这些东西我们都要学习，所以你要想把这个前端学好，其实很简单，把这三个玩意儿学会了。就OK了，好，那这里呢，就是对我们整个一个这个软件的一个介绍，我希望通过这个介绍，你能大概对这个软件会有一个了解，如果前面你觉得太长，那你只需要借助一个结论，软件分成两种，一种我们叫做CS，一种我们叫做BSCS开发成本会比较高，使用起来也比较麻烦，而BS开发成本比较。

比较低，使用起来也比较简单，这里的B表示的是浏览器browser browser表示浏览器，而我们前端做的软件就是BS架构的，而我们主要是开发什么呢？开发B这块的S我们基本上不动，但是我们也需要懂一点，但是我们主要就是对浏览器去开发，也就是开发。网页的好，我们先停一下。