前端程序员的入门知识

‘壹’ 程序员入门：如何自学编程

首要之首：不要急于选择一种语言 新手们有一个常见的错误就是犹豫于判断哪种编程语言是做好的、最该先学的。 我们有很多的选择，但你不能说那种语言“最好”。 我们应该理解：说到底，什么语言并不重要。 重要的是理解数据结构、控制逻辑和设计模式。 任何一种语言—甚至一种简单的脚本语言—都会具有所有编程语言都共有的各种特征，也就是说各种语言是贯通的。 我正在攻读我的计算机学学位，我编程使用Pascal，汇编，和C语言，事实上我从来没有把它当成职业以求获得回报。 我一直在自学编程，工作上用不到它，我使用现有的知识，参考各种文档和书本，学习它们的用法。 因此，不要急于选择何种编程语言。 找出你想要开发的东西，使用一种能够完成这项任务的语言，这就可以了。 根据各种开发平台的不同，有很多不同的软件开发形式可供你选择：从网站应用到桌面软件到智能手机软件到命令行脚本工具。 这篇文章里，我将重点介绍一些很受欢迎的入门教程和资源，它们能帮助你学会如何在各种主流的平台上编程开发。 我先假设你是一个悟性很强的读者，但对于新手，当我谈论程序代码时还是要按照入门级的水平。 因为即使是你自己看一篇编程入门手册，如果发现都能理解时，心情自然会很高兴，这样利于你进一步学习。 桌面脚本 想要动手在Windows里或苹果系统里编程，最简单的方法是从一种脚本语言或宏语言开始，例如AutoHotkey(Windows) 或Automator(苹果系统)。 如今一些硬件程序员冲着他们的屏幕大喊大叫，说AHK和AppleScript并不是“真正”的编程语言。 也许他们说的是对的—技术上，这些种类的语言只能做一些上层的编程。 但是对于那些只是想来脱盲、想在他们的电脑里实现一些能自动运行的程序的新手来说，这些语言会是一个绝妙的入门入口—而且你会吃惊于它们丰富的功能。 例如，大家都喜爱的Texter就是Adam使用AutoHotkey开发的能独立运行的Windows应用程序，所以说这种脚本语言远不是只能开发小规模脚本软件。 如果你想从AutoHotkey入手，可以参考Adam的指导：how to turn any action into a keyboard shortcut using AutoHotkey（然后，你可以下载Texter源代码看看这个功能齐全的使用AHK开发的Windows应用程序的内部结构)。 Web开发 HTML 和 CSS：开发网站，你第一件要知道的事情就是HTML(网页就是由它组成的)和CSS(一种让外观更好看的样式标记)。 HTML 和 CSS 并不是编程语言—它们只是页面的结构和样式信息。 然而，在开始开发web应用程序之前你必须要学会如何手工的编写简单的HTML和CSS，web页面是任何webapp的前端显示部分。 这个HTML 指导是你入手的好地方。 javaScript:当你可以通过HTML和CSS构建一个静态页面后，事情就开始变得有趣了—因为到了该学JavaScript的时候了。 JavaScript是一种web浏览器上的编程语言，它的魔力就是能在页面里制造一些动态效果。 JavaScript可以做bookmarklets,Greasemonkey脚本, 和Ajax, 所以它是web上各种好东西的关于因素。学习JavaScript从这里开。 服务器端脚本：一旦你学会了网页里的知识，你就要开始对它添加一些动态服务器操作—为了实现这些，你需要把目光转移到服务器端脚本语言，例如php, Python, Perl, 或 Ruby。 举个例子，如果想要制作一个网页形式的联系方式表单，根据用户的输入发送邮件，你就需要使用服务器端脚本来实现。 像PHP这样的脚本语言可以让你跟web服务器上的数据库进行沟通，所以如果你想搭建一个用户可以登录注册的网站，这样的语言正是你需要的。Webmonkey是一个优秀的web开发资源网站，里面有大量的各种web编程语言的指导手册。 阅读一下他们的PHP 初学者指南。 当你感觉差不多了的时候，看看WebMonkey’s PHP and MySQL tutorial学习如何使用PHP跟数据库交互。 网上最好的要数PHP语言官方的在线文档和函数参考了。 每个知识点上 (例如strlen function这个)都在后面列出来用户的评论注释，这些对于文档的本身是非常有价值的。 （我很喜欢PHP，但还有很多其他种服务器端的脚本语言你们都可以选择。) Web框架：过去数年里，web开发人员在开发动态网站的过程中不得不一遍又一遍的针对重复遇到的问题写出重复的代码。 为了避免这种每次开发一些新网站都会重复劳动一次的问题，一些程序员动手搭建了一些框架，让框架替我们完成重复性的工作。 非常流行的Ruby on Rails框架，作为一个例子，它利用Ruby编程语言，为我们提供了一个专门面向web的架构，普通的web应用程序都能使用它来完成。 事实上，Adam使用Rails开发了他的第一个正式的（而且是叹为观止的！）web应用程序，MixTape.me。这就是他的如何在没有任何经验的情况下搭建一个网站。还有一些其他的web开发框架包括CakePHP(针对 PHP 编程者),Django(针对 Python 编程中), 以及jQuery(针对 JavaScript). Web APIs:API (应用层序编程接口)是指不同的软件之间相互交换的程序途径。 例如，如果你想在你的网站上放一个动态的地图，你可以使用Google Map，而不需要开发自己的地图。The Google Maps API可以轻松的让你通过JavaScript在程序中引入一个地图到你的页面上。 几乎所有的现代的你所知道的和喜爱的web服务都提供了API，通过这些API你可以获取到他们的数据和小工具，在你的应用程序里就可以使用这些交互过来的东西了，例如Twitter, Facebook, Google Docs, Google Maps, 这个列表远不止这些。 通过API把其他web应用集成到你的web应用里是现在富web开发的前沿地带。 每个优秀的主流的web服务API都附带有完整的文档和一些快速入手的指导(例如，这个就是Twitter的)。 疯狂吧。 命令行脚本 如果你想开发一个程序，让它读取文字或文件、输入输出一些有用的东西，那么，命令行脚本语言将是个不错的选择。 然而它并不像web应用程序和桌面应用程序那样有吸引力和好看的外观，但是作为快速开发的脚本语言，你却不能忽视它们。 很多的在linux平台上运行的web脚本同样能以命令行模式运行，例如Perl，Python和PHP，所以如果你学会了使用它们，你将能在两种环境中使用它们。 我的学习道路一直没离开Perl太远，我自学Python使用的是这本优秀的在线免费书Dive into Python。 如果成为一个Unix高手也是你学习的目标，那么你绝对要精通bash这个脚本语言。 Bash是Unix和Linux环境下的一种命令行脚本语言，它能够为你做所以的事情：从自动备份数据库脚本到功能齐全的用户交互程序。 起初我没有任何使用bash脚本的经验，但最终我用bash开发了一个全功能的个人代办任务管理器：Todo.txt CLI。 插件（Add-ons） 如今的web应用程序和浏览器都可以通过一些扩展软件来丰富自己的功能。 由于一些现有的软件，例如Firefox、WordPress越来越受到开发人员的关注，插件的开发也日益流行，人们都在说“But if only it could do THIS…” 只要你掌握了HTML，JavaScript和CSS，你就可以在任何的浏览器里开发你想要的很多东西。 Bookmarklets,Greasemonkeyuser scripts, 和Stylishuser styles这些软件都是用的更普通页面一样的语言写成的, 这几个东西都值得你去研究一些。 更高级的浏览器扩展程序，例如Firefox的扩展，它们可以帮助你很多。 开发Firefox的扩展，举个例子，需要你精通JavaScript和XML（一种标记语言，类似HTML，但具有更严格的格式）。 早在2007年我就写下来how to build a Firefox extension, 这是我在笨手笨脚的研究网上的一些学习资料后获得的成果。 很多免费的、受欢迎的web应用程序都提供了扩展框架，例如WordPress 和 MediaWiki。 这些应用程序都是用PHP写成的，所以只有对PHP熟悉你才能做这些事情。 这个就是如何编写WordPress插件。 而想驾驭Google Wave前沿技术的开发人员可以从使用HTML, JavaScript, Java, 和 Python 写小组件和小工具开始。 我写的第一个Wave bot是跟着这个一个下午时间的快速入门指导开始的。 开发桌面上的Web应用程序 学习编程最好的结果是你在一个环境下学的东西可以应用到另外的环境中。 先学习开发web应用程序的好处就是我们有一些方法可以让web应用程序直接在桌面上运行。 例如，Adobe AIR是一个跨平台的即时运行平台，它能让你编写的程序运行在任何装有AIR的操作系统的桌面上。 AIR应用程序都是由HTML, Flash, 或 Flex 写成的，所以它能让你的web程序在桌面环境中运行。 AIR是开发部署桌面应用程序的一个优秀的选择，就像我们提到过的10个让你值得去安装AIR的应用程序。 移动应用开发 能在iPhone或者Android智能手机上运行的手机应用程序的开发如今正呈现井喷之势，所以你也可以梦想一下如何在iTunes应用商店里通过你的天才程序大赚一笔。 但是，作为一个编码新手，直接奔向移动开发所经历的学习曲线可能会很陡，因为它需要你熟悉高级的编程语言，例如Java和Objective C。 然而，你当然应该看看iPhone 和 Android 编程究竟是什么样子的。 阅读这个简单的iPhone应用开发例子可以初步认识一下iPhone程序的开发过程。 Android 程序都是由Java写成的，这有一个简单的视频教程教你如何开发第一个”Hello Android“程序（注：可能需要代理才能看这个视频）。 耐心，刻苦，尝试，失败 好的程序员都有一个不达目的誓不罢休的品质，他们会惊喜于通过长期推敲和失败换来的一点成绩。 学会编程会有很好的回报的，但是学习的过程可能会是饱受挫折和孤独的。 如果有可能，最好找个伴一起陪你做这件事。 想精通编程，这和其他事情一样，需要坚持，反复尝试，获得更多的经验。

‘贰’ 前端开发主要要学什么

web前端开发在目前的尘悔IT行业是一个比较重要的岗位，web前端开发是直接与用户接触，前端体验的好坏，以及美观程度是非常重要的，毕竟现在是一个看脸的时代。
web前端开发中需要掌握的技术：
1、学习HTML，这是最简单，最基本的是要掌握div，formtable、Ulli、P、跨度、字体这些标签，这些都是最常用的，尤其是DIV和表格，DIV，表也可以用于布局，但不灵活，和用于基本表处理数据。
2、学习CSS，CSS这里说的不包括CSS3 Web前端开发工程师里面我们看到的，一个可以使用HTML或CSS + CSS+DIV的界面布局，所以CSS是用来协助HTML布局和显示，我们称之为“CSS样式”，为什么说DIV+CSS？因为我说div是HTML主要用于布局的，所以div是这个东西的核心！CSS必须配合部。CSS必须掌握浮、位置、宽度和高度，以及最大值和最小值，以100%，溢出，边缘、填充亏租等。这些都是与布局相关的样式。
3、JS。你觉得还过的去，看看JS是可怕的，事实上，JS入门很简单，不需要很多东西，只要根据ID或名称DOM或”风格，或价值，然后以一个ID或名称元标签，或额外的数据，在HTML，这是对数据的操作有关系，那么数据逻辑的影响，无非是一个跳跃，弹框，隐藏什么，这一切都是结合其他应用，代码一点都不难，将这些基本的JS。网络其他好。然后多看一些，不是什么问题。销兄兆
4、学习jQuery，相当于封装一组JS插件的JS。其目的是操作更方便，编写更少的代码，jQuery条目也非常简单。这些都是切入点，要学会像JS，只是改变了JQ代码。剩下的就跟网络一样。
5、最好是指出背景语言，如java，php，为什么？因为我们是前台接口数据，从后台到点，如果后台代码，你知道如何与后台数据交互是最好的，它节省了时间，也可以使前端代码更加规范。否则，可能是因为你回来了，无法忍受的数据，然后前端代码再次重写，这将是可怕的。
6、研究CSS3 + HTML5，为什么放在最后呢？呵呵，因为我不会，毕竟是专门做IT的，虽然这很流行，但是我没有用它来结束，在工作中，只有在自己的网站需要改变风格，或者朋友网站风格问题的时候，我才会去临时学习。但是，如果你准备从事专业战线，最好是学习。
以上的回答希望对你有所帮助

‘叁’ 前端程序员怎么自学

自学方法：

1、作为一个初学者，你必须明确系统的学习方案，我建议一定有一个指导的人，全靠自己学，放弃的几率非常大，在你对于web前端还没有任何概念的时候，需要一个人领进门，之后就都靠自己钻研，第一步就是确定web前端都需要哪些内容，并且在多少时间内学完，建议时间6个月保底。

2、视频为主，书为辅。很多初学者在学习前端的时候非常喜欢去买书，但是最后的结果是什么？看来看去什么都不会写，所以在这里给大家提醒，书可以看，但是是在建立于你已经对于某个知识点有了具体操作的执行后，在用书去巩固概念，这样更加利于你对于知识的理解。

3、对于学习技术来讲，掌握一个学习方法是非常重要的，其实对于学习web前端来讲，学习方法确实很多都是相通的，一旦学习方法不对，可能就会造成“方法不对，努力白费”。其实关于这方面还是很多的，我就简单说个例子，有的人边听课边跟着敲代码，这样就不对，听课的时候就专心听，做题的时候就专心做题，这都是过来人的经验，一定要听。根据每个人的不同，可能学习方法也会有所出路，找到适合你自己的学习法方法是学习的前提。

4、不建议自己一个人瞎学，在我了解学习编程的这些人来看，从零基础开始学并且最后成功做这份工作的其实并没有几个，我觉得大部分原因就是因为他们都不了解web前端是干什么的，学什么的，就盲目的买书看，到处找视频看，最后看着看着就放弃了，所以我建议初学者在没有具体概念之前，还是找有经验的人请教一下，聊过之后你就会知道web前端具体是干什么的，该怎么学，这是我个人的小建议，可以不采纳。

自学路线：

第1阶段：前端页面重构(4周)

内容包含了：(PC端网站布局项目、HTML5+CSS3基础项目、WebApp页面布局项目)

第2阶段：JavaScript高级程序设计(5周)

内容包含：(原生JavaScript交互功能开发项目、面向对象进阶与ES5/ES6应用项目、JavaScript工具库自主研发项目)

第3阶段：PC端全栈项目开发(3周)

内容包含：(jQuery经典交互特效开发、HTTP协议、Ajax进阶与PHP/JAVA开发项目、前端工程化与模块化应用项目、PC端网站开发项目、PC端管理信息系统前端开发项目)

第4阶段：移动端项目开发(6周)

内容包含：(Touch端项目、微信场景项目、应用Angular+Ionic开发WebApp项目、应用Vue.js开发WebApp项目、应用React.js开发WebApp项目)

第5阶段：混合(Hybrid,ReactNative)开发(1周)

内容包含：(微信小程序开发、ReactNative、各类混合应用开发)

第6阶段：NodeJS全栈开发(1周)

内容包括：(WebApp后端系统开发、一、NodeJS基础与NodeJS核心模块二、Express三、noSQL数据库)

基础书籍：

1、《Head First HTML与CSS(第2版)》，入门真的是经典书籍，手把手教学，丰富的案例让你从 0 开始学前端。

2、《CSS权威指南(第三版)》，这本书作为 CSS 的经典着作，把原理讲得非常的通透，除了 w3c 标准，算最权威的一本了，毕竟权威指南。

3、《CSS揭秘》神书，47 个 css 技巧让你在面对各种 css 问题的时候游刃有余。是 css 书籍中评分最高的了，css 进阶必备。

4、《javascript语言精粹》，这本书可以在入门之前了解一下基本语法，以及在学习之前可以了解下 JS 里面的精粹以及糟粕，虽然这本书很薄很薄，但是值得反复去读的一本书。

5、《JavaScript DOM编程艺术(第2版)》，本书在简洁明快地讲述JavaScript和DOM的基本知识之后，通过几个实例演示了专业水准的网页开发技术，透彻阐述了平稳退化等一批至关重要的 JavaScript编程原则和最佳实践。

6、《JavaScript权威指南》：犀牛书是每个FE都绕不过的一本书，可以先大致通读几遍，也可以把其当作工具书，时时翻阅。

视频教程:

网页链接

‘肆’ 前端程序员需要会什么

前台化工作。包括HTML页面可以用表格或div都可以。然后页面上的js代码。flash。前台要明白一些编程，以便后台技术人员加代码的时候能够顺利衔接。
后台就是内部的程序架构。他要懂一些html好知道往哪加代码。
后台就是保证前台所有功能实现所进行的编码。

‘伍’ 如果要学习web前端开发,需要学习什么

从各大招聘平台可以看到，Web前端行业招聘需求量巨大，一直呈现出供不应求的趋势，但是由于高等院校很少有开设相关的课程，导致每年新增的前端开发人员远远不够，所以现在的Web前端主要还是用过自学和参加培训为主，由于自学难度大，大部分人都选择去找相对的Web培训班学习，接下来就为大家介绍一下优就业的Web前端的学习内容。

优就业的Web前端一共分为六个阶段

第一阶段Html5+CSS3：主要学习HTML5基础、CSS基础、HTML5进阶、CSS3进阶、Less

第二阶段JS交互设计：主要学习JavaScript核心语法、DOM和BOM、JavaScript高级进阶、面向对象编程、Touch、jQuery、Zepto

第三阶段Node开发：主要学习JavaScript
ES6、Node、Express、MySQL、Webpack+Gulp+模块化、WebSocket+Koa2

第四阶段前端框架：主要学习Vue基础、Vue进阶、TypeScript、React

第五阶段小程序+数据可视化：主要学习小程序基础、云开发、uni-app基础、数据可视化

第六阶段就业指导+项目提升：就业指导、企业面试复盘

想要了解更多关于WEB前端的学习内容，可以看看优就业哟~

‘陆’ 做前端开发主要学些什么

要学前端开发，首先要熟悉几种最基础的程序语言。宴雹前端需要用到的是：HTML、CSS，JavaScript，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位蠢唯，再通过JavaScript实现相应的效果和交互。这些基础语言，必须在熟练掌握之后，结合不同的开发工具，开发出高质量的页面。

最开始用到的开发工具主要有如下几个：

1，Dreamweaver：，集网页制作和管理网站于一身的所见即所得网页代码编辑器。晌档帆

2，Sublime，全称Sublime Text ，是一个主要功能包括拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口的代码编辑器

3，HBuilder：是DCloud,推出的一款支持HTML5的Web开发IDE。

当然，并不局限于这些工具，如果要开发出更好的作品，要用到的肯定是更广泛的工具，工作中不同工具的灵活运用也是一种能力的体现，比如可以将图标 web 字体放到自己的项目中的FontelloFontello、能够自动实施安全相关的 header 规则的Secureheaders、针对于编写现代 web 和云应用的跨平台编辑器的Visual Studio CodeVisual Studio Code。

前端开发要学习的知识很广泛，不过最重要的，就是要打好基础，熟练掌握三种基础技能，无论什么网页的制作都不在话下。

‘柒’ 前端程序员必须了解的几个CSS使用技巧

1、元素的margin的top、bottom及padding的top、bottom使用百分比作为单位时，其是相对父元素的宽度width的而不是我们想象的高度height;其实出现这种现象，我们可以巧用margin/padding的百分比值实现高度自适应。当然该元素高度上的百分比是相对其父元素高度的百分比的，min-height及max-height也适用这条规律。

2、含有定位属性的元素，其top、bottom单位为百分比时，该百分比是相对于父元素的高度的。同理，left、right则是相对于父元素的宽度的。

3、边框宽度不允许使用百分比值。这点就不解释了。

4、width：100%，当父容器里有绝对定位的子元素时，子元素设置width:100%实际上指的是相对于父容器的padding+content的宽度。当子元素是非绝对定位的元素时width:100%才是指子元素的 content ，其等于父元素的 content宽度。

5、line-height。你知道line-height:150%和line-height:1.5的区别吗? line-height有单位时，子元素是继承父元素的line-height的，无单位时，其line-height等于无单位的数值乘以子元素本身的字体大小。显然为了不出现意外，还是建议首选无单位的。

6、ex和 ch单位。ex：取当前作用效果的字体的x的高度，在无法确定x高度的情况下以0.5em计算;ch:以节点所使用字体中的“0”字符为基准，找不到时为0.5em。

ex和 ch单位，类似于 em和 rem,依赖于当前的字体和字体大小。但是，不同的是，这两货是基于字体的度量单位，依赖于设定的字体。7、使用calc时运算符之间要有空格 ，否则可能无效。

以上这7个知识点你们掌握了吗?更多的内容资讯，小编会及时发布在本平台，请及时关注哦!

‘捌’ 前端主要学什么

前端学什么？
第一阶段：HTML+CSS+JS基础
（1） HTML+CSS:

HTML进阶、 CSS进阶、DIV+CSS布局、HTML+CSS整站开发、

（2） JavaScript基础：

Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。

（3） JS基本特效：

常见特效雀余、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。

程序猿的生活：前端只需要掌握这些，你也能拿8K！（（附简历模板102份）最顷局滚完整面试题含答案）
23 赞同 · 2 评论文章
（4）JS高级特征：

正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、

（5） JQuery：基础使用

悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。

第二阶段：HTML5和移动Web开发
（1）HTML5：

HTML5新语义标签、HTML5表单、音频和视频、离线和本腊凯地存储、SVG、Web Socket、Canvas.

（2）CSS3:

CSS3新选择器、伪元素、脸色表示法、边框、阴影、flex布局、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。

（3）Bootstrap:

响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。

（4） 移动Web开发：

跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、手机聚划算页面、手机滚屏。

第三阶段：HTTP服务和AJAX编程
（1）WEB服务器基础：

服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍。

（2） AJAX上篇：

Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍方法、兼容性处理方法、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用、会处理简单的GET或者POST请求、

（3） AJAX下篇：

JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。

‘玖’ Web前端新手应该了解的Cookie知识！

今天小编要跟大家分享的文章是关于Web前端新手应该了解的Cookie知识。正准备学习Web前端知识和准备从事Web
前端工作的小伙伴怎么能散孙不了解Cookie。今天小编就为大家带来了这篇文章，让我们一起来看一看Web前端新手应该了解的Cookie知识。

一、Cookie的出现


浏览器和服务器之间的通信少不了HTTP协议，但是因为HTTP协议是无状态的，所以服务器并不知道上一次浏览器做了什么样的操作，这样严重阻碍了交互式Web
应用程序的实现。


针对上述的问题，网景公司的程序员创造了Cookie。


二、Cookie的传输


服务器端在实现Cookie标准的过程中，需要对任意HTTP请求发送Set-CookieHTTP头作为响应的一部分：


1.Set-Cookie:name=value;expires=Tue,03-Sep-201914:10:21GMT;path=/;
domain=.#;


浏览器端会存储这样的Cookie，并且为之后的每个请求添加CookieHTTP请求头发送回服务器：


1.Cookie:name=value


服务器通过验证Cookie值，来判断浏览器发送请求属于哪一个用户。


三、浏览器中的Cookie


浏览器中的Cookie主要由以下几部分组成：


·名称：Cookie唯一的名称，必须经过URL编码处理。(同名会出现覆盖的情况)


·值：必须经过URL编码处理。


·域(domain)：默认情况下cookie在当前域下有效，你也可以设置该值来确保对其子域是否有效。


·路径(path)：指定Cookie在哪些路径下有效，默认是当前路径下。


·
失效时间(expires)：默认情况下，浏览器会话结束时会自动删除Cookie;也可以设置一个GMT格式的日期，指冲扒链定具体的删除日期;如果设置的日期为以前的日期，那么Cookie会立即删除。


·安全标志(secure)：指定之后只允许Cookie发送给https协议。


浏览器在发送请求时，只会将名称与值添加到请求头的Cookie字段中，发送给服务端。


浏览器提供了一个非常蹩脚的API来操作Cookie：


1.document.cookie


通过上述方法可以对该Cookie进行写操作此耐，每一次只能写入一条Cookie字符串：


1.document.cookie='a=1;secure;path=/'


通过该方法还可以进行Cookie的读操作：


1.document.cookie//"a=1"


由于上述方法操作Cookie非常的不直观，一般都会写一些函数来简化Cookie读取、设置和删除操作。


对于Cookie的设置操作中，需要以下几点：


对于名称和值进行URL编码处理，也就是采用JavaScript中的encodeURIComponent()方法;
expires要求传入GMT格式的日期，需要处理为更易书写的方式，比如：设置秒数的方式;注意只有的属性名的secure;


每一段信息需要采用分号加空格。1.functionsetCookie(key,value,attributes){

2.if(typeofdocument==='undefined'){

3.return

4.}

5.attributes=Object.assign({},{

6.path:'/'

7.},attributes)

8.

9.let{domain,path,expires,secure}=attributes

10.

11.if(typeofexpires==='number'){

12.expires=newDate(Date.now()+expires*1000)

13.}

14.if(expiresinstanceofDate){

15.expires=expires.toUTCString()

16.}else{

17.expires=''

18.}

19.

20.key=encodeURIComponent(key)

21.value=encodeURIComponent(value)

22.

23.letcookieStr=`${key}=${value}`

24.

25.if(domain){

26.cookieStr+=`;domain=${domain}`

27.}

28.

29.if(path){

30.cookieStr+=`;path=${path}`

31.}

32.

33.if(expires){

34.cookieStr+=`;expires=${expires}`

35.}

36.

37.if(secure){

38.cookieStr+=`;secure`

39.}

40.

41.return(document.cookie=cookieStr)

42.}

Cookie的读操作需要注意的是将名称与值进行URL解码处理，也就是调用JavaScript中的decodeURIComponent()方法：1.functiongetCookie(name){

2.if(typeofdocument==='undefined'){

3.return

4.}

5.letcookies=[]

6.letjar={}

7.document.cookie&&(cookies=document.cookie.split(''))

8.

9.for(leti=0,max=cookies.length;i
10.let[key,value]=cookies[i].split('=')

11.key=decodeURIComponent(key)

12.value=decodeURIComponent(value)

13.jar[key]=value

14.if(key===name){

15.break

16.}

17.}

18.

19.returnname?jar[name]:jar

20.}

最后一个清除的方法就更加简单了，只要将失效日期(expires)设置为过去的日期即可：1.functionremoveCookie(key){

2.setCookie(key,'',{expires:-1})

3.}

介绍Cookie基本操作的封装之后，还需要了解浏览器为了限制Cookie不会被恶意使用，规定了Cookie所占磁盘空间的大小以及每个域名下Cookie的个数。


四、服务端的Cookie


相比较浏览器端，服务端执行Cookie的写操作时，是将拼接好的Cookie字符串放入响应头的Set-Cookie字段中;执行Cookie的读操作时，则是解析HTTP请求头字段Cookie中的键值对。


与浏览器最大的不同，在于服务端对于Cookie的安全性操碎了心


signed


当设置signed=true时，服务端会对该条Cookie字符串生成两个Set-Cookie响应头字段：


1.Set-Cookie:lastTime=2019-03-05T14:31:05.543Z;path=/;httponly


2.Set-Cookie:lastTime.sig=URXREOYTtMnGm0b7qCYFJ2Db400;path=/;
httponly


这里通过再发送一条以.sig为后缀的名称以及对值进行加密的Cookie，来验证该条Cookie是否在传输的过程中被篡改。


httpOnly


服务端Set-Cookie字段中新增httpOnly属性，当服务端在返回的Cookie信息中含有httpOnly字段时，开发者是不能通过JavaScript来操纵该条Cookie字符串的。


这样做的好处主要在于面对XSS(Cross-sitescripting)攻击时，黑客无法拿到设置httpOnly字段的Cookie信息。


此时，你会发现localStorage相比较Cookie，在XSS攻击的防御上就略逊一筹了。sameSite


在介绍这个新属性之前，首先你需要明白：当用户从#发起#的请求也会携带上Cookie，而从#携带过来的Cookie称为第三方Cookie。


虽然第三方Cookie有一些好处，但是给CSRF(Cross-siterequestforgrey)攻击的机会。


为了从根源上解决CSRF攻击，sameSite属性便闪亮登场了，它的取值有以下几种：


·
strict：浏览器在任何跨域请求中都不会携带Cookie，这样可以有效的防御CSRF攻击，但是对于有多个子域名的网站采用主域名存储用户登录信息的场景，每个子域名都需要用户重新登录，造成用户体验非常的差。


·lax：相比较strict，它允许从三方网站跳转过来的时候使用Cookie。


为了方便大家理解sameSite的实际效果，可以看这个例子：1.//#服务端会在访问页面时返回如下Cookie

2.cookies.set('foo','aaaaa')

3.cookies.set('bar','bbbbb')

4.cookies.set('name','cccccc')

5.

6.//#服务端会在访问页面时返回如下Cookie

7.cookies.set('foo','a',{sameSite:'strict'})

8.cookies.set('bar','b',{sameSite:'lax'})

9.cookies.set('baz','c')

如何现在用户在#中点击链接跳转到#，它的请求头是这样的：1.RequestHeaders

2.

3.Cookie:bar=b;baz=c

五、网站性能优化


Cookie在服务端和浏览器的通信中，主要依靠HTTP的响应头和请求头传输的，所以Cookie会占据一定的带宽。


前面提到浏览器会为每一次HTPP请求自动携带上Cookie信息，但是对于同站内的静态资源，服务器并不需要处理其携带的Cookie，这无形中便浪费了带宽。


在最佳实践中，一般都会将静态资源部署到独立的域名上，从而可以避免无效Cookie的影响。


以上就是小编今天为大家分享的关于Web前端新手应该了解的Cookie知识，希望本篇文章能够对正在从事Web前端工作和准备从事Web
前端学习的小伙伴们有所帮助。想要了解更多Web前端相关知识记得关注北大青鸟Web培训官网！


作者|descire


来源|#/article/286535


*声明：内容与图片均来源于网络(部分内容有修改)，版权归原作者所有，如来源信息有误或侵犯权益，请联系我们删除或授权事宜

‘拾’ 学习web前端需要学数据库吗

前端程序员也是程序员，数据库知识是程序员必备技能，无论从事的是什么岗位，前端、后端、运维甚至数据分析师、运营都应该掌握。如果是计算机专业的，数据库是必修课程。如果是其它专业或者培训班出生，也会或多或少的接触数据库相关知识。前端程序员可能会很少用到数据库，但是基础的数据库知识和操作必须要掌握。基本的select、insert、update操作要会。熟悉数据库知识，前端程序员在与后端程序员协作的过程中，就可以更好的理解后端的数据库模型，也能更好的理解后端的API接口。而且，在遇到一些数据统计的需求的时候，自己也可以去数据库统计，不用找后端程序员去帮忙统计。【点击测试我适不适合学设计】
如果您想要学习IT知识，来千锋教育。作为拥有IT基因和数字技术能力的教育机构，千锋十分注重联手高校和企业协同培养数字化人才，建立数字技能人才培育机制和行业标准，引领新时代职业教育实现高质量发展。展望未来，千锋将在高校、企业、学员和各方合作伙伴支持下，努力成为一个有情怀、有良心、有品质的一流教育机构，为国家培养更多高质量数字技能人才，助力职业教育提质培优，助推国家数字经济蓬勃发展。