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 그래픽을 그린다.
- MDN 캔버스 튜토리얼 [ 캔버스 튜토리얼 | MDN ]
- hsl 색상값을 얻을 수 있는 사이트 [ Mother-effing hsl() | Paul ]
JS30 Day9 : 14 Must Know Dev Tools Tricks
1. DOM 변경 중단점 - Attribute modifications
[ DOM 변경 중단점 | Google Developers ]
DOM 노드 또는 그 하위 요소를 변경하는 코드에서 일시 중지하고 싶을 때 DOM 변경 중단점을 사용한다.
- DOM 변경 중단점을 설정하려면 다음을 수행한다.
- Elements 탭을 클릭한다.
- 중단점을 설정하고 싶은 요소로 이동한다.
- 요소를 오른쪽 클릭한다.
- 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.shiftKey 와 KeyboardEvent.shiftKey 는 읽기전용 프로퍼티로, 마우스 이벤트 / 키보드 이벤트가 일어났을 때 shift 키가 눌린 상태인지를 탐지한다. shift 키가 눌린 경우에는 true, 그렇지 않다면 false 를 반환한다.
2. element.checked
[ HTML | DOM Input Checkbox checked Property | GeeksforGeeks ]
checkbox 속성을 띈 input 엘리먼트가 체크되었는지 여부를 탐지하거나 설정한다. 체크되었다면 true, 그렇지 않다면 false를 반환한다.
