2017年年终总结

回头望望,2017年算是结束啦。感觉时间过的太快啦,时间匆匆,如流水。今年也就是在读大二了,年龄不偏不倚刚刚好。

回望

这一年发生了什么

关于学习

三月

接触到前端,开始学习HTML与CSS样式表,在这一个过程之中也是遇到了非常多的不容易的地方,慢慢的撞墙。在撞墙之中学会成长。感谢极客江南的网络课程带入门。

这一段时间学习的效率很低,一直持续到了五月底。在此的原因是并没有理想状态中的注意力去做这件事。

在这段时间内,使用CSS与HTML写出了网易注册邮箱的静态界面,写完之后,成就感是有,但是并不是太开心。原因呢,我知道,哈哈。我想做的并不是这样,因为还想要做的更好

五月

持续到了快放假的时候吧,把HTML和CSS的课程学习完毕。但是很有趣的是,编程是一种很注重实践的技能。它并不是你看懂了你就掌握了。说到这里啊,想到了心理学中关于学习的理论。

人们学习的过程一一般是有三个过程。首先是知识,知识呢,就是前人总结的历史经验。知识是容易掌握的(是相对于后续来说o(^▽^)o),知识我觉得就是你懂得了。而技能呢,就是在知识上知识上过程上进行大量的实践而来,技能掌握的窍门就是进行大量的刻意重复(不和没说一样嘛~)。而能力就是技能的升华啦。高屋见顶,云上而起。想起来武林高手拿起小木棍,一棍起,竹林风声萧萧,哈哈。关于学习与掌握技能的书籍推荐一本《刻意练习》

然后就是又模仿着写了几个静态网页,但是效果并不理想,因为遇到了很多问题。紧接着就是放假啦

假期

开始学习JavaScript,知道JavaScript是在网上进行搜索前端开发学习路线的时候,知道的。就在我写下这篇文章的时候,对JavaScript已经有一个整体的了解,而且正在一块块攻克,已经写了一些小小的脚本(不是很多,但是也不少~)。每天没多少时间去学习这个,当时看了一遍《JavaScript入门级经典》,并且把书上的代码都在电脑上敲了一遍。当时糊糊涂涂啊,但是有点清晰的脉络,只是不太明显~。期间又学习了一些CSS3的知识,而且跟着江哥把努比亚的网站给模仿出来啦,写到了一些动画还有很有趣的交互。

假期的时候感觉到非常迷茫与无助,这这一阶段根本不知道要学习久这个东西,JSON到底有什么用,小饼干到底是要怎么用啊?到底要怎么学习?还好当时算清醒,知道这个时候绝对不能有任何怀疑。没关系,我头硬啊,接着撞墙就是了。所以呢,每天就是投入一点一点时间,每天写两行代码。好在有Java的基础,所以也算是苦中作乐吧

学期开学

老实说,这学期开了 网页制作,网页制作使用的是DW,我喜欢有了点子之后使用代码区实现,而不是去画一些表格什么的。所以网页制作这门课我是不喜欢的,一直没去听过课。有趣的是在结课报告上,我把自己写的网站给老师提交上去的时候,老师并不相信这是我写出来的,而且是态度非常坚定。没办法,只有当着老师面把一些部分再给重新实现一遍。算是相信了。看得出来老师是有一点震惊。

开学到现在看起来很久,其实呢,算一算。从十月到一月。有三个月的时间吧,在这三个月的时间里,我开始使用之前学习到的知识进行练习,学习构建一些静态页面。在这一段过程中感觉到了设计的重要性。技术也许只是一个方面。前面的知识再进行练习的过程中,也掌握啦,但是在做一些东西的时候还是会遇到一些问题,但是已经可以自己排查解决啦。重心还是放在JavaScript上面~。在前一个多月里,分别看了avaScript高级程序设计JavaScript DOM编程艺术。老实说,高级程序设计看是看懂了,可是不知道怎么用,根本是零转化啊。DOM编程艺术全本书都看懂啦,代码也会写。写到相册的时候好激动啊。哈哈。还记得使用的那几个可爱的图片,全是小动物,有橙色的小鹿还有还有~~

还有啊,接触了freecodecamp社区,加入了freecodecamp郑州,10号的时候也参加了互联网大会,可惜是关于大数据的,听不太懂。在freecodecamp上已经陆陆续续写了三百多道题啦。也提交了一些自己的项目~。

在十月的时候,做出来了自己的这个博客网站。起初是在一月的时候,曾经尝试过,但是失败了。十月假期再来一次。

到现在为止,感觉已经找到了状态。学习起来很Happy。

2018伊始

学习

  • 前端页面达到可完整还原设计的水平,并力求完美
  • JS代码编写水平达到中级web开发的水平
  • 移动端开发,达到可以实际应用的水平
  • 学习算法与数据结构
  • 学习两个框架,提高效率。[现阶段重点是原生JS的学习]
  • 学习数据库并可以在日常中使用lunux与服务器。
  • 如果有可能,学习一下设计方面的知识
  • 学习使用github与git等惯常使用的开发工具
  • 拿下PAT的证书
  • 拿下FCC的前端认证开发证书
  • ES6的学习

    生活

  • 多运动运动,和吃饭一样的习惯。
  • 拿下驾照,虽然不喜欢开车

查找碱基对

DNA Pairing

DNA 链缺少配对的碱基。依据每一个碱基,为其找到配对的碱基,然后将结果作为第二个数组返回。

Base pairs(碱基对) 是一对 AT 和 CG,为给定的字母匹配缺失的碱基。

在每一个数组中将给定的字母作为第一个碱基返回。

例如,对于输入的 GCG,相应地返回 [[“G”, “C”], [“C”,”G”],[“G”, “C”]]

字母和与之配对的字母在一个数组内,然后所有数组再被组织起来封装进一个数组。

分析:这道题其实就是两个数组, [[‘A’,’T’],[‘G’,’C’]];。如果输入数组里的一个元素,就返回另一个元素,然后添加到返回的数组里就好了。

解法一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// var a ='hello world';
// alert(a.split(''));//把字符串分割为数组
function pair(str) {
// var arr=str.split('');//已经成为了数组
// alert( str[0]);
// corr(str[0]);
// corr('T');
// corr(str[0]);
var arr = [];
for(var i =0;i<str.length;i++){
corr(str[i],arr);
}
return arr ;//值并未发生改变
}
function corr(letter,returnArr){
var corrLetter = [['A','T'],['G','C']];
var loArr =null;
// alert(corrLetter.length)
for(var i=0;i<corrLetter.length;i++){
for(var j=0;j<corrLetter[i].length;j++){
if(letter == corrLetter[i][j]){
// alert(typeof letter);
// alert(corrLetter[i][j]);
// if(j==0){
letter+=corrLetter[i][Math.abs(j-1)];
// }
// else{
// letter+=corrLetter[i][0];
// }
loArr = letter.split('');
// loArr.push(letter);
// alert(loArr);
returnArr.push(loArr);
// alert(letter);
}
}
}
}
pair("GCG");

pigLatin

pigLatin

把指定的字符串翻译成 pig latin。
?
Pig Latin 把一个英文单词的第一个辅音或辅音丛(consonant cluster)移到词尾,然后加上后缀 “ay”。

如果单词以元音开始,你只需要在词尾添加 “way” 就可以了。

如果你被难住了,记得使用 Read-Search-Ask尝试与他人结伴编程、编写你自己的代码。

解法一:
function translate(str) {

var temp=[];

var answer;

temp=str.split('');//将str分解为单个字符存入数组

var i=0;

while(temp[i]!='a'&&temp[i]!='o'&&temp[i]!='i'&&temp[i]!='e'&&temp[i]!='u'){

  i++;//如果不是元音i++,如果是元音推出循环

}

answer=str.substr(i);//将str不是元音的部分提出

answer+=str.substr(0,i);//将str的元音部分加在answer之后

if(i==0){

  answer+="way";//首字母为元音加 way

}else{

  answer+="ay";//不是加 ay

}

return answer;

}
translate(“consonant”);

搜索和替换

搜索和替换

搜索和替换
使用给定的参数对句子执行一次查找和替换,然后返回新句子。

第一个参数是将要对其执行查找和替换的句子。

第二个参数是将被替换掉的单词(替换前的单词)。

第三个参数用于替换第二个参数(替换后的单词)。

注意:替换时保持原单词的大小写。例如,如果你想用单词 “dog” 替换单词 “Book” ,你应该替换成 “Dog”。

如果你被难住了,记得使用 Read-Search-Ask尝试与他人结伴编程、编写你自己的代码。

分析:这道题想了半天,把这道题想的太困难了.具体来说就是假设首字母全是大写的.如果不是大写直接跳过.

解法一

1
2
3
4
5
6
7
8
9
function myReplace(str, before, after) {
if(before[0] == before[0].toUpperCase()){//如果对比之后是大写,就把after进行转换
after = after[0].toUpperCase() + after.slice(1);
}
str = str.replace(before,after);//执行替换
return str;
}
myReplace("A quick brown fox jumped over the lazy dog", "jumped", "leaped");

你在哪里

Where art thou

  • 原题链接

    写一个 function,它遍历一个对象数组(第一个参数)并返回一个包含相匹配的属性-值对(第二个参数)的所有对象的数组。如果返回的数组中包含 source 对象的属性-值对,那么此对象的每一个属性-值对都必须存在于 collection 的对象中。

    例如,如果第一个参数是 [{ first: “Romeo”, last: “Montague” }, { first: “Mercutio”, last: null }, { first: “Tybalt”, last: “Capulet” }],第二个参数是 { last: “Capulet” },那么你必须从数组(第一个参数)返回其中的第三个对象,因为它包含了作为第二个参数传递的属性-值对。

分析:先使用keys方法找到所有的属性,然后分别与collection对象数组里的对象进行比较.

解法一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function where(collection, source) {
var arr = [];
var key = Object.keys(source);//表示给定队友所有可枚举的字符串数组
arr = collection. filter(function(item){//过滤
for(var i =0;i<key.length;i++){
if(!item.hasOwnProperty(key[i]) || item[key[i]]!= source[key[i]]){ //需要注意符号的优先级
return false;
}
}
return true;//filter返回结果为true 的元素
});
// What's in a name?
return arr;
}
where([{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }], { last: "Capulet" });

数字转换为罗马数字

数字转换为罗马数字

  • 原题链接
    >
    将给定的数字转换成罗马数字。
    >
    所有返回的 罗马数字 都应该是大写形式。
    >
    如果你被难住了,记得使用 Read-Search-Ask尝试与他人结伴编程、编写你自己的代码。

  • 关于罗马数字的规律与介绍:点击

分析:这道题没有写出来,是在网络上看到的代码,然后进行分析领悟到的.
首先用户输入的数字,然后想到需要进行向前加向后加,混乱了.用户输入一个数字,然后代码输出相对应的罗马数字.所以只要找到规律,然后对应数组.OKOK!

解法一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function convert(num) {
var nums = [1000,900,500,400,100,90,50,40,10,9,5,4,1];
var romans =["m","cm","d","cd","c","xc","l","xl","x","ix","v","iv","i"];
var str = '';
//这里注意的是item和index是同步的.这也是能设立两个数组的重要之处
nums.forEach(function(item,index,array){
while (num>=item){
str+=romans[index];
num = num-item;
}
});
return str.toUpperCase();
}
convert(4);

CSS中的尺寸单位

在CSS中的尺寸单位最常用的有三种.分别是px,em和%.这三种单位中.em和%是相对单位.而px是像素的意思,是一个固定的值

px:为像素单位。它是显示屏上显示的每一个小点,为显示的最小单位。它是一个绝对尺寸单位;

em:它是描述相对于应用在当前元素的字体尺寸,所以它也是相对长度单位。一般浏览器字体大小默认为16px,则2em == 32px;

%: 百分比,它是一个更纯粹的相对长度单位。它描述的是相对于父元素的百分比值。如50%,则为父元素的一半。

充实文档的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>充实文档的内容</title>
<style>
body{
font-size: 18px;
}
abbr{
text-decoration: none;
boder:0px;
font-style: normal;
}
a{
color: #ccc;
tecccxt-decoration: none;
}
</style>
<script src="addLoadEvent.js"></script>
</head>
<body>
<h1>What is the Document Object Model?</h1>
<p>
The <abbr title="World Wide Web Consortium">W3C</abbr> defines<!--ABBR是一个缩写-->
the <abbr title="Document Object Model">DOM</abbr> as:
</p>
<blockquote cite="http://www.w3.org/DOM/"><!--块级引用-->
<p>
A platform- and language-neutral interface that will allow programs
and scripts to dynamically access and update the
content, structure and style of documents.
</p>
<span style="font-weight: bold">source quote:</span>
</blockquote>
<p>
It is an <abbr title="Application Programming Interface">API</abbr>
that can be used to navigate <abbr title="HyperText Markup Language">
HTML</abbr> and <abbr title="eXtensible Markup Language">XML
</abbr> documents.
</p>
<ul>
<li><a href="#" accesskey="1">HOME</a></li>
<li><a href="#" accesskey="4">SEARCH</a></li>
<li><a href="#" accesskey="0">CONTENT</a></li>
</ul>
<script>
/*检测兼容性与显示缩略语列表*/
function displayAbbreviations(){
if(!document.getElementsByTagName){
return false;
}else if(!document.getElementById){
return false;
}else if(!document.createTextNode){
return false;
}
var abbreviations = document.getElementsByTagName('abbr');
if(abbreviations.length<1){
return false;
}
/*获得abbr的元素与title*/
var defs = [];
for(var i = 0;i<abbreviations.length;i++){
var current_abbr = abbreviations[i];
if(current_abbr.childNodes.length<1){
continue;
}
// definition 收集的是元素的title
var definition = abbreviations[i].getAttribute('title');
// key表示的是元素的值
var key = abbreviations[i].lastChild.nodeValue;
defs[key] = definition;
// defs.push(definition);
}
/*
* key表示的是元素的值.definition表示元素的title.
* */
var dlist = document.createElement('dl');
for(key in defs){
var definition = defs[key];
var dtitle = document.createElement('dt');
var dtitle_text = document.createTextNode(key);
dtitle.appendChild(dtitle_text);
var ddesc = document.createElement('dd');
var ddesc_text = document.createTextNode(definition);
ddesc.appendChild(ddesc_text);
/*循环一次,增加一个元素*/
dlist.appendChild(dtitle);
dlist.appendChild(ddesc);
}
var header = document.createElement('h2');
var header_text = document.createTextNode('Abbreviations');
header.appendChild(header_text);
var body = document.getElementsByTagName('body')[0];
body.appendChild(header);
body.appendChild(dlist);
}
function displayCitations(){
var quotes = document.getElementsByTagName('blockquote');
for(var i = 0;i<quotes.length;i++){
//预防
if(!quotes[i].getAttribute('cite')){
continue;
}
var url = quotes[i].getAttribute('cite');
//获取当前blockquote元素.即是quotes[i] 所包含的全体元素节点.
var quoteElements = quotes[i].getElementsByTagName('*');
if(quoteElements.length<1){
continue; //不再执行下面的循环
}
//elem表示的是blockquote的最后一个元素节点
var elem = quoteElements[quoteElements.length-1];
}
var link = document.createElement('a');
var link_text = document.createTextNode('source');
link.appendChild(link_text);
link.setAttribute('href',url);
elem.appendChild(link);
}
function displayAccesskeys(){
/*取得文档中的所有链接*/
if(!document.getElementsByTagName){
return false;
}else if(!document.getElementById){
return false;
}else if(!document.createTextNode){
return false;
}
var links = document.getElementsBy]TagName('a');
var akeys = [];
for(var i =0;i<links.length;i++){
var current_link = links[i];
if(!current_link.getAttribute('accesskey')){
continue;
}
var key = current_link.getAttribute('accesskey');
var text = current_link.lastChild.nodeValue;
akeys[key] = text;
}
var list = document.createElement('ul');
for(key in akeys){
var text = akeys[key];
var str = key + ':'+text;
var item = document.createElement('li');
var item_text = document.createTextNode(str);
item.appendChild(item_text);
list.appendChild(item);
}
var header = document.createElement('h3');
var header_text = document.createTextNode('Accesskey');
header.appendChild(header_text);
var body = document.getElementsByTagName('body')[0];
body.appendChild(header);
body.appendChild(list);
}
addLoadEvent(displayAbbreviations);
addLoadEvent(displayCitations);
addLoadEvent(displayAccesskeys);
</script>
</body>
</html>

使用函数

  • document.write();
  • innerHTML();
  • createElement();
  • document.createTextNode()
  • appendChild()
  • insertBefore

Diff Two Arrays

Diff Two Arrays

比较两个数组,然后返回一个新数组,该数组的元素为两个给定数组中所有独有的数组元素。换言之,返回两个数组的差异。
举个例子就是[1, 2, 3, 5], [1, 2, 3, 4, 5] 应该返回 [4]。就是你有我没有的那个元素

分析:首先合并arr1与arr2,生成arr3.然后找出arr3中不存在于arr1和arr2中的元素

解法一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function diff(arr1, arr2) {
var newArr = [];
var arr3=arr1.concat(arr2);//将arr1和arr2合并为arr3
function isContain(value){//value是arr3其中的一个元素.
//找出arr3中不存在于arr1和arr2中的元素
// == -1的意思是表示没有找到
return arr1.indexOf(value)==-1||arr2.indexOf(value)==-1;
}
newArr = arr3.filter(isContain);
return newArr;
}

图片库

来自于DOM编程艺术例子.用于个人备忘

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片库完整版</title>
<style>
body{
font-family: 宋体;
color: #333;
background-color: #cccccc;
margin: 1em 10%;
}
h1{
color: #333;
background-color: transparent;/*元素的背景色是透明的*/
}
li{
list-style: none;
float: left;
font-size: 15px;
padding: 1em;/*成功分割开了距离*/
}
ul{
padding: 0px;
}
#imagegallery{
list-style: none;
}
#imagegallery li{
display: inline;
}
#imagegallery>li>a>img{
border: 0 ;
width: 80px;
height: 80px;
border: 1px solid gold;
}
</style>
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li><a href="a1.jpg" title="小牛"><img src="a1.jpg" alt="1"></a></li>
<li><a href="a2.jpg" title="一只野猪"><img src="a2.jpg" alt="2" ></a></li>
<li><a href="a3.jpg" title="威风的牛"><img src="a3.jpg" alt="3"></a></li>
<li><a href="a4.jpg" title="酷酷的狗"><img src="a4.jpg" alt="4"></a></li>
</ul>
<script>
function addLoadEvent(func){
var ondonload = window.onload;//把现有的window.onlod事件存入变量oldonload
if(typeof window.onload != 'function'){//如果没有任何函数就把新函数添加给他
window.onload = func;
}else{//如果存在的话,就把新函数添加到末尾.
window.onload = function(){
ondonload();
func();
}
}
}
function insertAfter(newElement,targetElement){
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling)
}
}
function preparePlaceholder(){
if(!document.createElement){
return false;
}
if(!document.createTextNode){
return false;
}
if(!document.getElementById){
return false;
}
if(!document.getElementById('imagegallery')){
return false;
}
//创建img元素
var placeholder = document.createElement('img');
placeholder.setAttribute('src','a4.jpg');
placeholder.setAttribute('id','placeholder');
placeholder.setAttribute('alt','my image gallery');
//创建p元素
var description = document.createElement('p');
description.setAttribute('id','descript');
var desctext = document.createTextNode('Chose an image');
description.appendChild(desctext);
var gallery = document.getElementById('imagegallery');
insertAfter(placeholder,gallery);
insertAfter(description,placeholder);
}
function prepareGallery(){
if(!document.getElementById){
return false;
}else if (!document.getElementsByTagName){
return false;
}else if(!document.getElementById('imagegallery')){
return false;
}
var gallery = document.getElementById('imagegallery');
var links = gallery.getElementsByTagName('a');
for(var i=0;i<links.length;i++){
links[i].onclick = function(){
return showPic(this)?false:true;
}
}
}
function showPic(that){
if(!document.getElementById('placeholder')){
return false;
}
var source = that.getAttribute('href');
var placeholder = document.getElementById('placeholder');
placeholder.setAttribute('src',source);
if(document.getElementById('descript')){
var text = that.getAttribute('title')?that.getAttribute('title'):'';
var descript = document.getElementById('descript');
descript.firstChild.nodeValue = text;
}
return true;
}
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);
//window.onload = prepareGallery;//这里使用的是引用,而不是执行.引用也就是添加.而
</script>
</body>
</html>

使用函数

  • getElementById()
  • getElementsByTagName
  • setAttribute
  • getAttribute
  • createElement
  • createTextNode
  • appendChild
  • insertBefore