JS原型与原型链学习笔记

2017-02-11

这一周在慕课以及网上搜索，好好学习理解了一下JS的原型/原型链。在这里笔记一下自己觉得重要的东西，在这总结一下。

普通对象与函数：

JavaScript 中分为普通对象和函数对象。凡是通过 new Function() 创建的对象都是函数对象，其他的都是普通对象。

构造函数：

function Person(name, age, job) {
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayName = function() { alert(this.name) } 
}
var person1 = new Person('Zaxlct', 28, 'Software Engineer');
var person2 = new Person('Mick', 23, 'Doctor');

上面的例子中 person1 和 person2 都是 Person 的实例。这两个实例都有一个 constructor （构造函数）属性，该属性（是一个指针）指向 Person。
person1 和 person2 都是构造函数 Person 的实例

!!!实例的构造函数属性（constructor）指向构造函数。

more >>

展开全文 >>

在Github中演示前端demo

2017-02-08

在浏览他人Github时，经常能看到他们的前端项目的Readme.md中，放有在线演示Demo。自己也想实现这样的效果，在网上自己摸索。总结为下文=。=

需求：

一般情况，我们将自己写成的网页上传到github仓库，点进相应的html界面出来的是该文件的代码。他人看起来非常不直观。

因此，我们需要一个在线演示demo的平台。
more >>

展开全文 >>

过年这几天

2017-02-03

恍惚间，好久没在国内过年了。在日本的时候每逢除夕夜，
叫上几个中国同乡，一起热热闹闹聚一下。吃顿饺子或者去
池袋吃个火锅，好不热闹。你二天上班的上班，上学的上学。

今年总算在家过，比小时候的记忆少了一丝年味。除夕夜没有
了炮竹，爷爷摔了一跤的，缘由老爸晚上的在奶奶家照顾老人。
今年的除夕夜就和老妈两人。老妈说多亏我回来了。不然今年
过节就一个人。其实心里蛮难受的，大学以后一年一年和父母
生活的时间越来越少。过年期间，见了好几波朋友，吃吃喝喝
胖了快十斤。（不得不说还是国内吃的好吃），初一看了部韩

more >>

展开全文 >>

HTML/CSS代码快速编写---Emmet

2017-01-31

最近学习前端，一开始用sublime，现在转到vscode上。它们通过安装插件都支持Emmet的HTML语法规则。在这里，一边自己学习一边分享一下啊。

什么是Emment？

Emmet的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度。
eg：输入!,然后按Tab键：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

html:5 或!：用于HTML5文档类型
html:xt：用于XHTML过渡文档类型
html:4s：用于HTML4严格文档类型

Emmet支持的简写规则

E 代表HTML标签。
E#id 代表id属性。
E.class 代表class属性。
E[attr=foo] 代表某一个特定属性。
E{foo} 代表标签包含的内容是foo。
E>N 代表N是E的子元素。
E+N 代表N是E的同级元素。
E^N 代表N是E的上级元素。

more >>

展开全文 >>

VSCODE1.8下TypeScript（win10）

2017-01-31

TypeScript

TypeScript是微软开发的一个Js的超集，TypeScript兼容JavaScript，可以载入JavaScript代码然后运行。完全支持ES6规范。
TypeScript也是Google公司推出前端框架Angular2的开发语言。
(可以说是Google，微软强强联手吧。一直想学Angular框架自然的学学这TypeScript)

由于TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。首先就是搭建开发环境。

compier

编译器分两种一种是在线编译器，在百度搜索typescript，就可以找到：http://www.typescriptlang.org/play/index.html
可以将TS代码转化成JS代码。
另一种就是本地编译器。由于自己一直用vscode这一轻量级ide。网上资料不是很对。就来码一下自己的安装配置过程。
more >>

展开全文 >>

通过class名获取元素（解决IE8不兼容问题）

2017-01-16

Js中获取元素通常有三种方式通过ID（getElementById）,标签（getElementsByTagName）以及CLASS名（getElementsByClassName）。前两种方式最为常用，在Chrome，FireFox以及低版本IE8下都好使（win10自带的ie只支持模拟到IE8，再古老的版本直接忽略好了）。可是CLASS名获取元素时，在IE8下出现这样的问题：
对象不支持“getElementsByClassName”属性或方法

more >>

展开全文 >>

JavaScript知识点总结1

2017-01-15

近期学习js知识的总结，，还会有2，3，4····

事件：

onclick,onmouseover,onmouseout,onmouseup,onmousedown,onchange，onload

获取元素：

通过id获取元素：document.getElementById();

通过Tag获取元素： document.getElementsByTagName();

函数：

定义函数：function 函数名(){}

执行函数：谁调用了这个函数就在谁那里执行。

变量：

var 变量名=变量值

“.”:只能操作已存在的属性。

“[]”:可以接受一个变量，点能够操作的中括号都能操作。

循环：

for：

//初始值var i=0，
//条件i<6，
//自增i++ 代表每次加1
for(var i=0;i<6;i++){
    alert(i);
}

while:

//初始值
var i=0;
//条件
while(i<6){
    alert(i);
    //自增
    i++;
}

more >>

展开全文 >>

浅谈Responsive设计

2017-01-11

这两天一直在看CSS3相关的东西，提到CSS3有个很重要的特性就是Media Queries,说到Media Queries,到头来还是网页的响应式开发（Responsive设计简单的称为RWD）。

说到响应式开发，自己第一想到的就是这个带有‘栅格系统’的Bootstrap。它可以让你的网站在不同设备中展现不同的风格，版面不会因为屏幕大小变化而乱掉。说俗一点就是‘有求必应’。就这先前Bootstrap的使用经验，结合理论在这里笔记总结一下。

响应式设计需要满足以下三个条件：

网站必须建立灵活的网格基础；

引用到网站的图片必须是可伸缩的；

不同的显示风格，需要在Media Queries上写不同的样式。 more >>

展开全文 >>