jowunseopjowunseop

마우스 이벤트 만나보기 JavaScript에서 마우스를 다루는 주된 방법은 이벤트를 이용하는 것입니다. 마우스를 다루는 많은 이벤트가 있지만 여기서 모두 살펴보지는 않을 것입니다. 대신 다음과 같은 자주 사용하는 항목에만 초점을 맞출 겁니다. click dblclick mouseover mouseout mouseenter mouseleave mousedown mouseup mousemove contextmenu mousewheel and DOMMouseScroll 마우스 이벤트의 이름은 이벤트가 수행하는 작업에 대한 좋은 힌트를 제공해서 대충 무슨 작동을 하는지 유추 할 수 있습니다. 다음 섹션에서 이러한 각 이벤트를 좀 더 자세히 살펴보겠습니다. 한번 클릭, 두 번 클릭 마우스 이벤트 중에서 가장 많이..

콜백함수(Callback Function) 란? 파라미터로 함수를 전달하는 함수 콜백함수(Callback Function)란 파라미터로 함수를 전달받아, 함수의 내부에서 실행하는 함수이다. let number = [1, 2, 3, 4, 5]; number.forEach(x => { console.log(x * 2); }); 2 4 6 8 10 콜백함수는 이미 우리의 코드 속에서 자주 사용되고 있다. 예를 들어, forEach 함수의 경우 함수 안에 익명의 함수를 넣어서 forEach 문을 동작시킨다. 콜백함수(Callback Function) 사용 원칙 익명의 함수 사용 let number = [1, 2, 3, 4, 5]; number.forEach(function(x) { console.log(x * ..

innerHTML, innerText, textContent 위 메서드들은 텍스트 값을 읽어오고 설정할 수 있다는 점에서 서로 비슷하다. 하지만 각자 차이점이 존재하므로 이를 정리하고자 한다. 예시 안녕하세요. 테스트 입니다. 숨겨진 글 const test = document.getElementById("test"); console.log(test.innerHTML) console.log(test.innerText) console.log(test.textContent) 1. Element.innerHTML 안녕하세요. 테스트 입니다. 숨겨진 글 innerHTML은 해당 요소에 포함된 HTML, XML의 전체 내용을 읽어오거나 설정할 수 있다. 결과를 보면 HTML 코드 내의 공백까지도 출력된 것을 볼 수..

addEventListener()는 document의 특정요소(Id,class,tag 등등..) event(ex - click하면 함수를 실행하라, 마우스를 올리면 함수를 실행하라 등등.. )를 등록할 때 사용합니다. 예시로 살펴보겠습니다 #예시 버튼을 누르면 버튼에 적힌 값이 alert창으로 뜨는 스크립트입니다. #html A B C Copied! #js var cols = document.querySelectorAll("#cols .btn"); for (var i = 0; i < cols.length; i++) { cols[i].addEventListener("click", click); } cols[1].style.color = "red"; function click(e) { window.alert..

.querySelector() .querySelector()는 CSS 선택자로 요소를 선택하게 해줍니다. 주의할 점은 선택자에 해당하는 첫번째 요소만 선택한다는 것입니다. 문법 document.querySelector( 'selector' ) 예를 들어 document.querySelector( '.xyz' ) 는 클래스 값이 xyz인 첫번째 요소에 접근합니다. 예제 1 클래스 값으로 abc를 갖는 요소 중 첫 번째 요소의 색을 빨간색으로 만듭니다. Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor 예제 2 div의 하위 요소 중 클래스 값으로 abc를 갖는 첫 번째 요소를 빨간색으로 만듭니다. Lorem Ipsum Dolor Lorem Ipsum Dolor..

1. 함수(function)란? - 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록 - javascript에서 코드 집합을 나타내는 자료형) - 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차 - 함수도 일반 객체처럼 값으로 취급된다. 즉 하나의 데이터 타입 이다. 이러한 특징때문에 자바스크립트의 함수는 일급 객체라고 하며, 변수에도 할당 가능하다. ※ 참고할 용어 ◎ 일급시민(First-Class Citizen) : 다음을 충족하는 값 1) 변수(variable)에 담을 수 있다. 2) 함수의 인자(parameter)로 전달할 수 있다. 3) 함수의 반환값(return value)으로 전달할 수 있다. ◎ 일급객체(First-Class-Object) : 일급시민의 조건을 충족하는..

1. for문 이용해서 1부터 100까지 출력하는 함수를 작성해주세요. { for(let i=1; i

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