Week4(Javascript)

javascript30.com/

JavaScript 30

이번 주에는 JavaScript 30의 5강까지 공부하였다. 사실상 공부라기 보다는 영상을 보면서 부분 부분 따라서 실행시켜보았다. 확실히 이론을 공부하는 것과 실제로 사용해보는 것은 큰 차이가 있다. 개인적으로 이론도 어렵지만, 실제로 사용하는 것은 더 어렵다 ㅎ..... 하지만 확실히 내가 타이핑하는 코드들이 바로 화면에 반영되다보니 이론 공부보다는 훨씬 덜 지루하다.

 

이 강의의 제목은 자바스크립트이지만 자바스크립트 못지 않게 CSS 코드들도 많이 나온다. 화면에 무언가를 이쁘게 구현하기 위해서는 CSS 없이는 불가능하기 때문이다. (항상 느끼는거지만 CSS 만큼 어려운 것도 없는것 같다.) 그렇기에 CSS와 자바스크립트를 같이 공부하기에 정말 좋은 영상들인 것 같다. 또한, 영상 속에서 코드에 의해 반영되는 화면을 바로바로 확인할 수 있게 해주기 때문에 더 이해하기도 편하다.  

 

CSS와 자바스크립트를 공부하기 너무 좋은 사이트이지만 유일한 단점이라고 한다면 이메일 등록을 하면 그 이메일로는 한 달 뿐이 보지 못한다. 한 달 전에 무슨 내용의 강의인지 궁금해서 등록했다가 벌써 끝나버렸다. 그래도 다행인점은 다른 이메일로 또 등록하면 된다. 그렇기에 등록을 하고 빠르게 몰아본다음 또 시간이 지나 다시 복습해야겠다 싶을 때 다시 등록하여 또 몰아봐야겠다. 

 

keycode.info/

JavaScript Event KeyCodes

자바스크립트에 이런 기능이 있는지는 이번에 처음 알게 되었다. 

window.addEventListener("keydown", function (e) {
  console.log(e.keyCode);
});

이런 함수를 통해 keydown된 알파벳이 어떤 것인지 구분할 수 있다.

 

---

function handleUpdate(){
    console.log(this.value);
}

inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));

'change'의 경우는 마우스의 드래그가 끝나는 순간을 감지.
'mousemove'의 경우 마우스 드래그 전체를 감지.

---

console.table() 을 통해 콘솔 창에 테이블을 띄울 수도 있다. 

 

developer.mozilla.org/en-US/docs/Web/API/Console/table

Console.table()

크게 쓸 일이 있을까 싶다...