JS30-Day04

今天的内容讲的是高阶函数!来得真的很及时,看过廖雪峰的博客,对于Map和Reduce还不是特别理解。这次练习中就有两个Reduce来练习。

题目和作者的题解戳这里(是一个压缩包,自己可以练手,今天C#上课之前想看一下这个视频的,但是发现这个平台已经被墙了)

我的解答戳这里(当然得开控制台啦)

今天学到的提两点吧 ,第一console.table()有点酷哦,第二就是练习了一下Reduce吧。

今天忘记刷月赛了,也少了让QQ小方当大哥的机会,不过也少了一次自闭(窃喜)。发现这个30天还是有点用处,再忙也还是想抽出一点时间来写这玩意儿。果然循序渐进每天学一点还是舒服呀。

就写到这儿吧,练习还是想做,但是文字真的懒得写了。

JS30-Day02

今天的任务更容易些,是用CSS和JS实现一个时钟。

CSS部分说好的不写CSS呢?,略微了解了transform 和 transition。

JS部分就比较简单了,用 document.querySelector 选择时针分针秒针对应的DOM,设置一个 Interval,每秒钟更新三根指针的transform属性就行。

但是还有一个小问题没有解决,从接近360回到0度,transform的过渡完全不自然,他是指针倒着凑一圈的动画,但这不是这节课的重点,我这么懒,也就懒得打补丁了呀。

就叫他半成品吧,链接

还有一个问题见下图,竟无语凝噎。

JS30-Day01

废话不多说,先放成品要键盘的,手机党劝退加了click 手机也可以点,就是效果不太理想,本来还想用一下mouseover的,但是太菜了问题太多了就先放一放吧)

热度第一天,视频挺短,这是一个只写JS的视频,CSS他都帮你写好了,真的很方便,自己要写的代码也不超过20行,但是带来了很多以前没有接触过的东西,看来ES6 for everyone这套视频也要再看看啦,不过在这之前还是先把廖雪峰的JS教程刷刷完吧。下面是这次写的代码。

  <script>
    function palySound(e) {
      // console.log(e); then you know keyCode is useful
      // 属性选择器attribute selector 和 字符串模板 template string
      // 区别这里的querySeletor 和 querySeletorAll
      const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
      const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
      if (!audio) return;
      audio.currentTime = 0; // 为了能够重复播放已经在播放的音频 回到开头
      audio.play();
      key.classList.add('playing');
      // add remove toggle
      // setTimeout(function(){   },0.07);  需要和CSS去同步
    }
    function removeTransition(e) {
      // console.log(e);
      if (e.propertyName !== 'transform') return;
      // 你可以用console.log(this) 来知道这里的this 到底是啥
      this.classList.remove('playing');
    }
    const keys = document.querySelectorAll('.key');
    // 使用 transition end event
    keys.forEach(key => key.addEventListener('transitionend', removeTransition));
    window.addEventListener('keydown', palySound);
  </script>

当然今天还没有结束,这篇文章就晚上再更新一下好了。至于代码高亮的话,再说。

ES6 for everyone Day01,快速地看了一下,就当再复习一下好了:

  • let 和 const 是块级作用域
  • let 重复定义一个变量的时候会报错(更具体的,大概是作用域里有同名的就会报错,比如var a=100; let a=100; // SyntaxError)
  • let的同名变量,作用域不同,互不影响,const的变量不能更新
  • 但const一个对象,对象的属性是可以更新的
const xiaoming={name:'xiaoming', age:28}
xiaoming.age=29 //OK
  • 如果你真的想冻结一个变量 Object.freeze(xiaoming),修改不会报错,但是并改不动
  • 又一个例子是和循环有关的,然后你敢信改成let就好了
for(var i = 0; i<10; i++){
    setTimeout(function(){
        console.log('The number is ' + i);
    },1000);
}
  • 最后就是推荐使用const 其次是let 如果需要重新绑定的话,var不应该在ES6中使用,当然有些还是推荐var 用在top-level 和全局,我现在就先不管吧= =,只求别坑。

吃了两个橘子我好饿,那么今天的JS就到此为止吧,Udacity启动!白了个白~

JavaScript挑战30天

虽然觉得自己应该坚持不了这么久(主要还是这个课程是免费的233),但还是想发一下这一篇文章,新服务器刚买,上线后总要刷一下存在感。

今天本来只是想看看chrome73开发者工具的新功能的,视频地址在这里,不得不感叹谷歌真的是chrome的亲爸爸,这些更新视频呀什么的做的真是好。紧接着发现国内的掘金平台也很棒,对应blog文章的译文,更新挺快,质量也挺好。顺手就下了一个他们家的插件作了浏览器的首页,效果如图:

讲回介绍chrome更新的文章,这就是罪恶的源泉,接下来给大家表演的是收藏星人的疯狂跳转日常!

看到New In DevTools文章里的链接木有——链接!点!

什么?又一个链接,看上去挺有趣还是推荐(其实就TM是个广告)

结果是ES6的课程,小哥慷慨激昂,不买先看看价格?

emmm,97刀看看就好了,反正也不买,内容确实挺多(21个模块77个视频,截图是部分),真的想看的自行B站或者BT请支持正版,反正我这个一个月的百度云黄金会员算是值回来了

扯了这么多,怎么好像跑偏了,30天的JS挑战呢?其实就是看这个视频的时候没字幕看不爽,随手搜索“es6 for everyone subtitle”,结果第一个就是GayHub仓库地址!紧接着出现的这个画面这也太罪恶了,看到链接先点一下是对这些优质资源的基本尊重对吧。

就是那么顺手得点到JavaScript30啦,不用框架不用库,就写纯的JS,这真的很对胃口,虽然我还是个菜鸡,CSS和JS两者都,都还写不端正,但是如果30天坚持下来还是会很有很大的进步吧。

参与方式很简单,给一个邮箱地址,他发你一封邮件,点击链接完成注册,在线观看视频就完了,还有字幕(虽然是英文的),但是吧,听不懂英语代码还看不懂嘛?

他说每个人有不一样的学习方法,主要可以分为以下三种:

  • 第一种是看完整个视频,然后自己去完成工作的人。
  • 第二种是看到目标,然后自己着手去做的人。
  • 第三种是边看视频,边跟着做的人

反正我就是个菜鸡,当然是第三种啦,希望有所进步吧,第一天是键盘爵士鼓,敲击键盘不同的键播放不同的音频文件,做出动画效果,结果怎么样,敬请期待吧。

如果你也心动了,那么一起参与吧,大家可以一起交流与学习,当然我不知道这些网站有没有被墙= =