JavaScript 30

[ JavaScript 30 Day3 + Day5 | 윤슬기 ]
이번 주도 자바스크립트를 학습 코스 JavaScript 30을 계속했다. 배운 점 일부를 이용해 만든 결과물은 위의 글에, 나머지는 여기에 정리한다.

JS30 Day6 : Ajex Type Ahead

1. String.prototype.match()

[ String.prototype.match() | MDN ]
match() 메서드는 문자열이 정규식과 매치되는 부분을 검색한다.

다음 예제는 글로벌(g) 및 대/소문자 무시(i) 플래그를 사용하여 match()를 사용하는 방법을 보여준다. A부터 E 까지의 모든 문자와 a부터 e 까지의 모든 문자가 배열의 각 원소를 구성하는 형태로 반환된다.

const str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
const regexp = /[A-E]/gi;
const matches_array = str.match(regexp);

console.log(matches_array);
// ['A', 'B', 'C', 'D', 'E', 'a', 'b', 'c', 'd', 'e']

2. String.prototype.replace()

[ String.prototype.replace() | MDN ]
replace() 메서드는 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환한다. 그 패턴은 문자열이나 정규식(RegExp)이 될 수 있으며, 교체 문자열은 문자열이나 모든 매치에 대해서 호출된 함수일 수 있다.

const str = 'Twas the night before Xmas...';
const newstr = str.replace(/xmas/i, 'Christmas');
console.log(newstr);  // Twas the night before Christmas...

JS30 Day8 : Fun with HTML5 Canvas

1. Canvas API

[ Canvas API | MDN ]
Canvas API는 JavaScript와 HTML<canvas> 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공한다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용된다.

Canvas API는 주로 2D 그래픽에 중점을 두고 있다. WebGL API 또한 <canvas> 엘리먼트를 사용하며, 하드웨어 가속 2D 및 3D 그래픽을 그린다.

JS30 Day9 : 14 Must Know Dev Tools Tricks

1. DOM 변경 중단점 - Attribute modifications

[ DOM 변경 중단점 | Google Developers ]
DOM 노드 또는 그 하위 요소를 변경하는 코드에서 일시 중지하고 싶을 때 DOM 변경 중단점을 사용한다.

  • DOM 변경 중단점을 설정하려면 다음을 수행한다.
    1. Elements 탭을 클릭한다.
    2. 중단점을 설정하고 싶은 요소로 이동한다.
    3. 요소를 오른쪽 클릭한다.
    4. Break on으로 마우스를 가져간 다음 Subtree modifications, Attribute modifications, 또는 Node removal을 선택한다.
  • DOM 변경 중단점의 유형
    • Subtree modifications. 현재 선택한 노드의 하위 요소가 삭제 또는 추가되거나 하위 요소의 콘텐츠가 변경될 때 트리거된다. 하위 요소 노드의 속성이 변경되거나 현재 선택한 노드가 변경될 때는 트리거되지 않는다.
    • Attributes modifications: 현재 선택한 노드에 속성을 추가 또는 삭제하거나 속성 값이 변경될 때 트리거된다.
    • Node Removal: 현재 선택된 노드가 삭제될 때 트리거된다.

2. 개발자 도구 console 객체의 여러가지 메서드를 이용하기

JS30 Day10 : Hold Shift to Check Multiple Checkboxes

1. MouseEvent.shiftKey / KeyboardEvent.shiftKey

[ MouseEvent.shiftKey | MDN ]
[ KeyboardEvent.shiftKey | MDN ]
MouseEvent.shiftKeyKeyboardEvent.shiftKey 는 읽기전용 프로퍼티로, 마우스 이벤트 / 키보드 이벤트가 일어났을 때 shift 키가 눌린 상태인지를 탐지한다. shift 키가 눌린 경우에는 true, 그렇지 않다면 false 를 반환한다.

2. element.checked

[ HTML | DOM Input Checkbox checked Property | GeeksforGeeks ]
checkbox 속성을 띈 input 엘리먼트가 체크되었는지 여부를 탐지하거나 설정한다. 체크되었다면 true, 그렇지 않다면 false를 반환한다.