코딩 공부 코딩 공부

mouseout과 mouseleave 차이 공통점: 해당 영역에 마우스가 올라가 있는 상태에서 벗어난 것을 감지한다. mouseleave:사용자가 마우스를 해당 element 안에서 바깥으로 옮겼을 때 발생합니다. 버블링이 발생하지 않습니다. mouseout:사용자가 마우스를 해당 element 안에서 바깥으로 옮겼을 때 발생합니다. mouseout / mouseleave : 현재 element 영역만 발생 (자식 요소 포함X) 마우스가 이벤트로 on 메서드를 통해 사용할 수도 있다. 요소에 내부로 들어왔을 때 실행된다. 차이점: mouseleave 자식영역에 들어가도 요소를 빠져나갔다고 감지하지 않는다. mouseout 자식영역에 들어가면 요소를 빠져나갔다고 감지한다.

마우스오버 이벤트와 마우스엔터 이벤트의 차이점에 대해 알아봅니다. mouseover / mouseenter : element에 마우스를 올려둘 때 -> 현재 element 영역 및 element에 속한 자식 요소 포함 mouseover 와 mouseenter의 차이점은 이벤트 버블링에 있습니다. 다음의 소스뷰를 살펴보도록 합니다. css는 쓰다가.. 귀찮음을 이기지 못해 아래가 정리가 안 된 상태라 코드를 남기겠습니다. body { width: 500px; margin: 30px auto; } .outer { width: 200px; height: 200px; background: Orange; padding: 50px; margin: 10px; } .inner { width: 100%; height: ..

sort() 함수 Javascript에서 배열을 정렬하기 위해서는 sort() 함수를 사용합니다. arr.sort([compareFunction]) 파라미터 compareFunction 정렬 순서를 정의하는 함수. 이 값이 생략되면, 배열의 element들은 문자열로 취급되어, 유니코드 값 순서대로 정렬됩니다. 이 함수는 두 개의 배열 element를 파라미터로 입력 받습니다. 이 함수가 a, b 두개의 element를 파라미터로 입력받을 경우, 이 함수가 리턴하는 값이 0보다 작을 경우, a가 b보다 앞에 오도록 정렬하고, 이 함수가 리턴하는 값이 0보다 클 경우, b가 a보다 앞에 오도록 정렬합니다. 만약 0을 리턴하면, a와 b의 순서를 변경하지 않습니다. 리턴값 compareFunction 규칙에..

splice() 자바스크립트의 배열(Array) 객체에서 함수인 splice를 이용하면 원하는 위치에 요소를 추가하거나 삭제할 수 있습니다. 먼저 splice 함수를 사용해 원하는 위치에 요소를 추가하는 것을 정리해보겠습니다. 예를 들어, 먼저 a라는 배열 객체가 다음과 같은 상태라고 하겠습니다. 이 상태에서 다음 코드를 실행하면 다음의 상태가 됩니다. a.splice(2, 0, "7"); 그럼 다시 a의 처음 상태로 돌아가 다음 코드를 실행하면 다음의 상태가 됩니다. a.splice(0, 0, "7"); 이제 다시 a의 처음 상태로 돌아가 다음 코드를 실행하면 다음의 상태가 됩니다. a.splice(5, 0, "7"); 참고로 위의 코드에서 인덱스 5 대신 5이상의 값을 사용해도 결과는 동일합니다. 이..

템플렛 리터럴(Template literals) 템플렛 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다.템플릿 리터럴은 표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공합니다. ES2015 사양명세서에서는 template strings라고 불렸습니다. 템플릿 리터럴은 런타임 시점에 일반 자바스크립트 문자열로 처리/변환됩니다. 프론트엔드에서는 HTML을 데이터와 결합해서 DOM을 다시 그려야 하는 일이 빈번하기 때문에, 템플릿을 좀 더 쉽게 편집하고 작성해야 할 필요가 있어서, 이러한 기능이 추가되었습니다.(자바스크립트 자체적으로 지원하기 전에도 라이브러리로 존재했습니다.) 표현식 삽입법과 비교 템플릿 리터럴은 작은따옴표(')나 큰따옴표(") 대신 백틱(`)(..

문법정리 Groups and ranges Chracter 뜻 | 또는 () 그룹 [] 문자셋, 괄호안의 어떤 문자든 [^] 부정 문자셋, 괄호안의 어떤 문가 아닐때 (?:) 찾지만 기억하지는 않음 Quantifiers Chracter 뜻 ? 없거나 있거나 (zero or one) * 없거나 있거나 많거나 (zero or more) + 하나 또는 많이 (one or more) {n} n번 반복 {min,} 최소 {min,max} 최소, 그리고 최대 Boundary-type Chracter 뜻 \b 단어 경계 \B 단어 경계가 아님 ^ 문장의 시작 $ 문장의 끝 Character classes Chracter 뜻 \ 특수 문자가 아닌 문자 . 어떤 글자 (줄바꿈 문자 제외) \d digit 숫자 \D dig..

배열 메서드 reduce() 기본형태 배열.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값); 초깃값 설정에 따른 각 매개변수의 출력 let arrNum = [5, 6, 7, 8, 9]; document.write("****reduce()메서드 안, 초깃값 설정 안함****") let arrNumReduce1 = arrNum.reduce((p,c,i) => { document.write("p c i: ") document.write(p +" "); document.write(c +" "); document.write(i +" "); return i; }); let arrNum = [5, 6, 7, 8, 9]; document.write("****reduce()메서드..

자바스크립트의 반복 메소드 기본 동작 배열 내 모든 요소들을 순회하면서 특정 작업을 수행하거나 특정 조건을 만족하는 요소를 가져오는 등 반복적인 작업에 사용한다. 첫번째 인수로 콜백함수를 받는다. 콜백 함수는 일반적으로 다음과 같이 3개의 인수를 사용한다. function(element, index, array) forEach() 배열 내 각 요소를 순서대로 처리한다. 예제 forEach() 특징 반환 값이 없다. 원본 배열을 변경시킬 수 있다. map() 배열 내 각 요소를 순서대로 변환 처리후, 처리 결과를 새 배열로 반환한다. 예제 map() 특징 배열 내 각 요소별로 처리하되, 새로운 결과 배열을 반환한다. 새 배열을 출력하면서 같은 크기를 유지하지만 개별 요소의 내용은 변경 가능 forEach(..