给产品经理讲技术:产品经理需要了解的Web前端技术
2024-03-23 20:22:33 0 举报
AI智能生成
登录查看完整内容
给产品经理讲技术:产品经理需要了解的Web前端技术
作者其他创作
大纲/内容
异步JavaScript和XML
能力:主要解决的就是不用刷 新网页,就能和后台交互获取数据,并应用于当前网页的问题
发起网络请求的能力由浏览器的内置能力提 供,所有的浏览器都提供了XmlHttpRequest对象,它可以由网页调用, 用来连接一个特定的地址
发起网络请求
DOM(Document Object Model,文档对象模型)
DOM相当于 骨骼,定义了一个网页的结构,以下代码对应了一个最简单的网页的骨 骼和框架。
JavaScript就是为操作DOM而存在的,可以动态地操作整个网 页。
无须刷新,可动态操作网页
如何实现
总结:AJAX是一项用于异步拉取数据并展示在当前页面的技术, 这对需要延迟加载数据和触发式加载数据的页面有很大益处
经典产品:百度地图搜索
AJAX技术的妙用
DOM(文档对象模型)是Web前端里最基础、最常用的一个模 型。
浏览器在解析HTML文档时,会把每个标签 抽象成代码里的对象,按照这种层次分明的结构组织,这就是DOM
数据结构里典型的“树”结构
数
DOM树
DOM是什么
静态网页和动态网页都是网页。
静态网页不需要后台程序干预处理,直接由服务器返回。实 现为静态网页后,一般不需要维护,因为数据不需要更新。
动态网页一般需要由程序来处理(ASP、JSP、PHP、 Python、Ruby等),并由数据库提供数据支撑。
不要以URL的形式来判断一个网页是静态的还是动态的,而 应该看页面的属性(产品经理最好具备一些调试技巧和经验)。
动态网页更灵活。
静态网页与动态网页
一个标准的 URL 地址由protocol、hostname、port、path、 parameters、query 几部分组成
指 http://部分,是协议 的意思
协议就是一套规则,定义了数据的 封装、打包、拆包和解释的规则,http://即表示只能通过HTTP这套规则 访问这个页面资源。
protocol
hostname称为主机名
hostname
port
hostname后面的一长串全部称为 path,是“路径”的意思,即最终文件所在的路径和文件名,只不过此地 址的文件存储在腾讯的服务器上,即news.qq.com这个域名下的若干台 机器上。
path
参数(parameters),也叫查询 。它 的目的是在URL中带上一些本地的信息传给服务器
parameters
http:
协议
news.qq.com
8080
/a/20160209/012154.htm
?a=1&b=2&c=3
经典案例:http://news.qq.com:8080/a/20160209/012154.htm? a=1&b=2&c=3#p=1
分析URL的结构
表单在很早的 HTML 版本中就已经存在,它是用户输入和网页之 间数据交互的一个界面,在HTML中用<form>标签标记。
表单为用户和网页 的数据交互提供了一个友好的界面。
表单中还可以承载很多类型的元素,例如RadioBox和 CheckBox,用来丰富用户输入类型和减少交互成本
标识了这是一个表单
form
标识了所有的数据内容将向引号内的地址提交
action
标识为提交到网站的方法(一般为GET或POST)
method
标识为一个输入框
input
标识为文本输入(user是其参数的名字)
type
input的type为submit:标识一个按钮的类型为“提交”类型
经典案例:<html lang=\"en\"> <form name=\"input\" action=\"http://www.***.com/index.html\"method=\"GET\"> <input type=\"text\" name=\"user\"/> <input type=\"submit\" value=\"Submit\"/> </form> </html>
表单是用户和服务器数据交互的用户界面,一切向服务器提交的数据都是由其中的几个简单的标签组成的。
总结
网页基础知识:表单
Application Cache
应用程序缓存
Application Cache技术通过缓存资源到本地,避免了每次打开网页 都会从服务器拉取大量数据的过程,取而代之的只是一个轻量级的更新 检查请求,这样,开发者的服务器带宽就被大大地释放出来。
由于网页的资源都是通过本地资源读取的,用户再次打开同一页面时,内 容展示时间会大大缩短,甚至达到Native应用的水平,从而进一步优化 用户体验。如果页面的所有资源都被缓存到了本地,那么页面就可以在 离线的情况下被完整地加载了。
经典案例:12306购票、百度地图
H5应用程序缓存简介
开发者在引用一个第三方库时,在页 面里写上它的散列值,如果第三方库被劫持,计算出的散列值与开发者 写在页面里的不匹配,浏览器便不会执行它
另一种方案,就是使 用HTTPS链接,这样可以解决大部分劫持问题。
预防方法
JS DDoS攻击的原理与防御
“UA”是“UserAgent”(用户代理)的简写,一般用来区分不同的浏 览器。
UA的故事
真正的 网络世界对输入语言的要求是非常苛刻的,可以说是专属于英文字符 的
URL编码
HTML、CSS、JavaScript共同构建了读者看到的所有网页展示和交 互。
HTML(HyperText Markup Language)是超文本标记语言 。
CSS(Cascading Style Sheets)是级联样式表 。
CSS就是起装修作用的,要和HTML一起配合使用。
JavaScript 是一种脚本语言 ,主要用于前端页面的DOM处理。
JavaScript 是一种脚本语言,它在网页中的作用是控制 HTML 中的 每一个元素,有时要删除元素,有时要添加新元素。读者可能遇到过这 样的场景:单击网页上的一个按钮,会有一个网页上从没有过的元素显 示出来,这就是利用 JavaScript 实现的
定义这个房子有多长、多宽
每一块面积如何 规划,例如哪里是卫生间、哪里是饭厅、哪里是卧室
HTML
装修,例如给客厅贴壁纸、给卧室铺地板
CSS
一个有生活情趣的住户时常要买些新家具,或者把茶几换个位置
移动、添加、减少物件
JavaScript
经典案例:房子
简单理解HTML、CSS和JavaScript
Cookie 是浏览器每次向网站服务器请求数据时携带的一些额外信 息,这些信息一般非常少(最多4KB),主要就是为了解决服务器“记 性不好”的问题。
每个网站都会有很多这样的 Cookie,但它们是隔离开的。也就 是说,百度只能访问到百度存储在浏览器的 Cookie,微博只能访问到微 博存储在浏览器的 Cookie,百度无法得到微博的Cookie,这一点由浏览 器保证。
引申为广告联盟
浏览器根据用户信息,进行定性推送
Cookie和广告联盟
HTTP 协议的 Header 是一块数据区域,分为请求头和响应头两种类 型,客户端向服务区发送请求时带的是请求头,而服务器响应客户端数 据时带的是响应头
HTTP Header是什么
给产品经理讲技术:产品经理需要了解的Web前端技术
0 条评论
回复 删除
下一页