File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change 77
88![ 仿即时搜索诗句效果] ( https://cl.ly/0b360y270s0f/Screen%20recording%202016-12-31%20at%2010.05.23%20PM.gif )
99
10- 在输入框中输入一个词,迅速匹配,展示含有这个词的诗句,诗句的来源 json 数据是加载页面时从网络中异步获得。(原课程中选的内容是英文城市名,我将其换成了唐诗,地址可在我的页面中获取) [ 在线效果请查看。] ( http://soyaine.cn/JavaScript30/06%20-%20Type%20Ahead/index-SOYAINE.html )
10+ 在输入框中输入一个词,迅速匹配,展示含有这个词的诗句,诗句的来源 json 数据是加载页面时从网络中异步获得。[ 在线效果请查看。] ( http://soyaine.cn/JavaScript30/06%20-%20Type%20Ahead/index-SOYAINE.html )
1111
1212初始文档中提供了 HTML 和 CSS,我们需要补全 JS 代码。这个挑战是 Ajax 的预热练习,在异步方面用到了一些目前还未被完全支持的新特性,但很好用。
1313
14+ 原文档中选的内容是英文城市名,我将其换成了唐诗,构造了一个含有 70 多首唐诗的 JSON 数据,访问地址是 https://gist.githubusercontent.com/soyaine/81399bb2b24ca1bb5313e1985533c640/raw/bdf7df2cbcf70706c4a5e51a7dfb8c933ed78878/TangPoetry.json,请自由取用。
15+
1416## 涉及特性
1517
1618- Promise
Original file line number Diff line number Diff line change 1717< script >
1818// const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
1919
20- const endpoint = 'https://raw .githubusercontent.com/soyaine/FE-Practice/f438d3bdf099461f88322b1b1f20c9d58f66f1ec/TangPoetryCut .json' ;
20+ const endpoint = 'https://gist .githubusercontent.com/soyaine/81399bb2b24ca1bb5313e1985533c640/raw/bdf7df2cbcf70706c4a5e51a7dfb8c933ed78878/TangPoetry .json' ;
2121
2222
2323 const poetrys = [ ] ;
Original file line number Diff line number Diff line change 77
88这一部分是[ 挑战 04 ] ( https://github.com/soyaine/JavaScript30/blob/master/04%20-%20Array%20Cardio%20Day%201/README.md ) 的后续,继续熟悉 Array 的一些基本方法,包括 ` some() ` 、` every() ` 、` find() ` 、` splice() ` 、` slice() ` 。这篇比较简单,但如果没有看过上一篇文章,建议回去温习一下。(毕竟上一篇更酷 :)
99
10- 文档提供了用于操作的 people 和 comments 数组,模拟的是人员信息及评论数据,基于这两个数组可以练习一下上面提及的各个方法,请打开 HTML 后在 Console 面板中查看输出结果。
10+ 文档提供了用于操作的 people 和 comments 数组,模拟的是人员信息及评论数据,基于这两个数组可以练习一下上面提及的各个方法,[ 请打开 HTML] ( http://soyaine.github.io/JavaScript30/07%20-%20Array%20Cardio%20Day%202/index-SOYAINE.html ) 后在 Console 面板中查看输出结果。
1111
1212## 过程指南
1313
Original file line number Diff line number Diff line change @@ -48,7 +48,7 @@ JavaScirpt30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30
48485 . [x] [ Flex Panel Gallery 指南] ( https://github.com/soyaine/JavaScript30/blob/master/05%20-%20Flex%20Panel%20Gallery/README.md ) | [ 可伸缩的图片墙在线效果] ( http://soyaine.cn/JavaScript30/05%20-%20Flex%20Panel%20Gallery/index-SOYAINE2.html )
49496 . [x] [ Type Ahead 指南] ( https://github.com/soyaine/JavaScript30/blob/master/06%20-%20Type%20Ahead/README.md ) | [ 根据关键词快速匹配诗句在线效果] ( http://soyaine.cn/JavaScript30/06%20-%20Type%20Ahead/index-SOYAINE.html )
50507 . [x] [ Array Cardio, Day 2 指南] ( https://github.com/soyaine/JavaScript30/tree/master/07%20-%20Array%20Cardio%20Day%202 ) | [ 数组基本操作方法示例二] ( http://soyaine.github.io/JavaScript30/07%20-%20Array%20Cardio%20Day%202/index-SOYAINE.html )
51- 8 . [ ] Fun with HTML5 Canvas
51+ 8 . [ ] Fun with HTML5 Canvas 指南
52529 . [ ] Dev Tools Domination
535310 . [ ] Hold Shift and Check Checkboxes
545411 . [ ] Custom Video Player
You can’t perform that action at this time.
0 commit comments