dairy-2015/12/21

沉思录

每当一个人的灵魂空虚的时候,就容易想得多。来了杭州一个月,身上没有什么变化。和当初来之前下的决心有很大的距离,之前是打算学点东西。但是这一个月下来,我发现自己除了玩得比较厉害,其他没什么不同。我很幸运,遇到的公司的基础设施非常的好,资源也非常滴丰厚,可自己并没有好好地利用。

走的时候,栋哥也是嘱咐我,不要忘记自己,要随时都要有一颗学习的心。不过回想这一个月以来干了什么?工作日上班,周日睡和吃(不过也不见长,有屁用!)。

思前想后,觉得这样下去,肯定是要出问题的,必须要纠正自己的道路。所以,在自己的博客当中认真的写下这篇日记,以做警惕。不要迷失自己,未来竞争会越来越大。

chrome扩展程序

自言自语

今天斗捣鼓了一下chrome,发现我之前看到的只是冰山一角。通过今天下午,自己对chrome的喜爱又增加了异步!

##what is the cre
什么是chrome扩展程序呢?
扩展程序是一些能够修改或增强Chrome浏览器功能的小程序。就是我们平时写的网页应用[html、css、javascript]等,如果你想自己开发需要到chrome://extensions/下打包扩展。

温馨提示:亲,必须是chrome浏览器哟!
但是,Google需要收$5的开发者费用意思意思。当然并不是生财之道,为了防止恶意程序。

开发教程:http://blog.jobbole.com/46608/

Read More

input表单类型

问题概述

今天在写页面的时候发现

<form action="test.html">
    <input type="image"/>
</form>

在页面上显示的有个“提交”,但是我并没有写什么内容,有点郁闷。为什么呢?难道它和“type=submit”的效果相同?经验证发现是这样的。点击它会跳转页面

问题发散

使用“type=image”实质创建了一个图片控件,在点击的过程中我发现它会记录鼠标点击图片的位置,即像素点相对图片的位置。

file:///C:/Users/Administor/Desktop/c.html?x=94&y=66

问题实质

由于有与“submit”类似的“提交”功能,所以我们应避免使用。这样的会造成页面的二次提交。

解决办法

1.不使用该标签,使用image标签代替

2.阻止事件的默认行为

<input type="image" src="../img/demo.jpg" onclick="operate();return false;">

===============update by 16/03/23===============

input标签学习

input作为表单元素之一,应该是与用户最为接近的标签了!

类型type

虽然h5落地很久了,但是在开发中用的次数不是很多。而且有的时候基本是使用常见的几个,但是在h5中新增的几个类型功能却很强大。type中的shadow dom中添加了很多自己的样式以及功能。

  • color 拾色器
  • date 控制输入日期(年,月,日)
  • datetime (废弃)
  • datetime-local (没有时区)
  • month 输入年,月,没有时区
  • time 输入时间 ,没有时区(zone)
  • week 包含年-周的数字
  • email(验证输入值在提交前为空或者是有效的邮件)
  • number 输入浮点数,不能输入其他字符
  • range 输入一个随机数
  • search 搜索框,同时带有删除输入值的效果
  • tel 输入电话号码,这需要自己限制输入的规则和最大长度来限制输入信息
  • url 输入值包含url

9月20日面试总结

概述

虽然有机会参加百度和腾讯的面试,但是结果并不是很理想。目前已经双双败下阵来。如果说很难也谈不上,就是一些常见的基础问题。其中腾讯在技术上更侧重于深度,而且特别喜欢问计算机网络的知识。而百度就是原生的js操作问题多一点。不过每一个问题还是特别有意思。

问题

1.Cookie与sessionID是怎么传送
Cookie是服务器在本地机器上存的一段文本。
Cookie对应字段Cookie:客户端传送
Set-cookie:服务器向客户端设置cookie
cookie的使用:是由浏览器按照一定的原则在后台自动发送给服务器,如果没有规定过期时间,就是浏览器会话期。这种一般存在内存中,而不是写在硬盘上。如果设置了过期时间,就写在硬盘上。

Read More

html5-draggable

概述

昨天去百度面试了,妥妥的接受了一波打击。再一次证明自己的基础是相当的不牢固,而且以前学习知识也有点浅尝辄止的感觉。学了新的东西就沾沾自喜,而现在一定要静下心来学习,多多发散思维。

定义

拖(drag)放(drop),我们就围绕这两个字扩展。

1.首先要允许拖元素。

<div draggable="true"></div>

2.允许传送数据

<div id="drag" draggable="true" ondragstart="drag(event)" ></div>

3.定义放置的位置

<div id="container"></div>

Read More

dairy-2015-09-13

日记一则

今天又来吹哈夸夸。

来了成都将近一个星期了。和“室友们”住在一起挺开心的。每天大家一起吃饭,睡觉(不要乱想哟!),看书。说实话,
大家的压力都挺大,都是带着满满的希望来到这个看着熟悉又陌生的城市渴望找到一个实习的机会。

来到这里,我现在比较遗憾的是有很长一段时间内没有写博客。而今天又和“室友们”一起和另外一波“工作小分队”聚了一下餐,其实是去蹭了一顿饭,在这里谢谢小伙伴的热情款待,我非常喜欢大家在一起的感觉,大家都谈了谈最近发生的事情,一起看火热的谍战片《伪装者》(其实我不是很爱好,比较费脑)。当然同时都抱怨了一下最近的笔试情况。虽然都不是很乐观,可大家心中都明白自己都要加把油。

下面,说说自己的情况吧!

还是和一个月前一样,复习知识,看看书。累了,听听音乐,说说段子。接下来,就是要面对美团的面试,我深深知道自己还没有准备好。但是我会尽自己最大的努力来补充自己的知识,毕竟还是以前欠下的帐,现在需要我自己来还,:(。ok,准备睡觉觉了!

前端网站及资源分享

##说点废话[凑字数]
最近是在忙着准备找工作,每天也感觉自己忙得够呛。有时候甚至很晚才睡,很早就起了(对于我来说,嘻嘻!)。看了javascript也有一段时间了,可是感觉自己还是有点迷糊糊的。之前有看了阮一峰老师的一篇文章,不过存在很大的争议(附:不过我看了之后,还是觉得很有意思。可能有些概念自己也不知道,就当学习了)。

所以我觉得学习好的东西是非常有必要的,这样可以让自己少走一点弯路。而自己这一段时间,也收藏了不少的文章和网站(估计是浏览器中分页太少了),我觉得需要总结一下。

##国外
首先还是说说歪果仁的!(毕竟这些玩意很多是人家的)

  • stackoverflow
    这应该是大家熟知的,社区非常活跃,里面的人们都很有分析的精神。
    Pi:上次我有个问题,就是在这个上面找到答案的!而且自己还到CSDN上装了一次逼!

Read More

html5新标签data-*与template

概述

首先这篇文章是由于看到 “script” 标签中引用了html内容,觉得甚是奇怪。在之前模模糊糊的印象中见过,但是但是也没有在意。不过今天在看微店[感觉又在打广告]的招聘网站的是否又看到了这个使用的方法,我觉得有必要学习一下。

####举个栗子

<script type="text/template"  id="test">
    <div class="title register">
        <h1>姓名:</h1>
        <h2>年龄:</h2>
    </div>
</script>

Read More

front-end-security-xss

概述

没想到这样一个问题,还把自己搞得有点昏了。不过在找寻答案的过程中,我知道自己是快乐的!虽然没有自己解答出这个问题,但是收获颇多。特别是看了人家一步一步思考问题的方式,感悟是大大的。

问题

xss作为web前端常用的注入漏洞,在现在的互联网业务中其危险性不亚于其他攻击方式,请编写过滤函数
1.通过异步请求拿到的json数据后,如何安全的使用innerHtml显示在页面上
2.浏览器地址栏直接获取的参数,如何安全地进行document.write
3.后台直接输出完整的html页面,如何保证页面渲染后,用户内容的< script >不被执行.

Read More

Web应用编程者在发布站点应该注意的细节

概述

翻译原文地址:戳这里

这里可能大多数在列表中你已经知道,但是可能有一两条你原来没有见过。不要完全理解,否则可能从来没有听说过。

接口和用户体验

  • 保证你的站点兼容主流浏览器. 如Gecko engine (Firefox), a WebKit engine (Safari和手机浏览器),Chrome, 你支持IE浏览器(最好兼容性VPC图像),和Opera. 在不同操作系统上浏览器如何渲染你的站点
  • 考虑用户可能不使用主流浏览器:如cell phones, screen readers and search engines和其他一些信息工具WAIandSection508, Mobile development:MobiForge
  • 阶段:怎样发布更新而不影响你的用户。有一个或多个测试或分段环境,可实现对体系结构、代码或扫描内容的更改,并确保它们可以被部署在一个没有破坏任何东西的控制方式中。有一个自动化的方式,然后部署到现场的现场现场。而最有效实现这些东西是使用控制版本系统(CVS、Subversion等)和自动构建工具(Ant, NAnt等).
  • 不要直接给用户展示不友好的错误
  • 不要在页面中展示用户的邮件地址不然他们会收到太多的垃圾邮件
  • 添加rel=”nofollow”属性让用户的链接避免垃圾留言
  • 在你的站点中建立精细的限制(同属于安全问题)
  • 学习怎么样渐进增强
  • 重定向一个post请求如果这个post请求成功来防止刷新再一次提交
  • 不要忘记可访问这个用户。在法律上这是必要的。WAI-ARIA和WCAG 2是这方面的好的资源
  • Don’t make me think

Read More