본문 바로가기

JavaScript

 (60)
노드 쿼리 메서드 DOM 요소에 접근하는 방법에는 다양한 방법이 있습니다. 단, 요소 노드에 대해서만 쿼리 할 수 있습니다. document.body // 요소 노드를 선택합니다. document.head // 요소 노드를 선택합니다. document.documentElement // 요소 노드를 선택합니다. 쿼리 메서드 특수한 프로퍼티로 문서의 일부를 선택합니다. document.querySelector( CSS 선택자 ); 모든 CSS 선택자(class, id 등)를 사용하여 DOM에서 처음 일치하는 요소를 반환합니다. id의 경우 () 안에 #id명을, class의 경우 안에 .class명을 입력해주시면 됩니다. 만약 일치하는 요소를 찾을 수 없는 경우에는 null을 반환합니다. Document.querySelect..
노드(Node)와 요소(Element) 노드(Node) 노드는 DOM을 구성하는 객체이며 DOM은 모두 노드로 이루어져있습니다. 노드는 요소 노드, 텍스트 노드, 주석 노드 등 다양한 유형이 있습니다. HTML태그 (, , 등)는 요소라고도 부를 수 있지만 정확히는 요소 노드입니다. 요소(Element) 앞서 말했듯 요소는 요소 노드와 같습니다. 즉 요소란 렌더링된 HTML의 태그에서 생성된 노드이며 내부에는 텍스트가 없습니다. 노드는 요소의 상위개념인 것입니다. 쉽게 이야기하면 요소는 HTML 문서에서 , 등 과 같은 태그를 사용해 작성된 노드라고 할 수 있습니다. HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN 이 페이지는 태그를 사용해 만들 수 있는 모든 HTML 요소의 목록을 제공합니다. d..
Call Back 함수 정의 JavaScript에서 콜백 함수란 무언가에 의해 불러와지는 함수를 의미합니다. 콜백 함수라고 해서 특별한 문법적 특징을 가지지는 않습니다. JavaScript에서 함수는 객체입니다. 따라서 함수는 다른 함수의 인자로 사용될 수도 있고, 다른 함수에 의해 반환될 수도 있습니다. 따라서 콜백 함수는 다른 함수의 인자로 전달되는 함수가 될수도, 다른 함수 안에서 실행되기 위해서 호출될 수도, 반환될 수도 있습니다. 대표적인 예로 addEventListener(JavaScript의 내장 함수)의 인자로 함수를 받는 것이 있습니다. 아래의 간단한 코드를 통해 정리를 해보겠습니다. function exampleCallBack(a) { a(); } function callBack() { console.log(..
스프레드 연산자(Spread Operator)와 REST 매개변수 스프레드 연산자는 '...'을 사용하는 연산자로 배열, 객체, 함수를 다루는데 편리함을 제공해줍니다. 전개 구문 - JavaScript | MDN 전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시 developer.mozilla.org Spread 연산자의 기본 사용형태 ... 복사하려는 변수(참조하려는 변수) { // 함수 본문 }; 상수명(인자 값 1, 인자 값 2, 인자 값 3, 인자 값 4); 함수의 호출할 때 받은 인자 값을 Rest 매개변수로 넘겨주게 되는 이때 받는 인자 값들을 모아 배열에 넣게 되고 만들어진 배열을 함수 본문에서 사용하게 됩니다. ..
함수의 매개변수 JavaScript는 다른 프로그래밍 언어랑 비교했을 때 꽤 관대한 언어입니다. 이런 부분은 함수의 매개변수에도 적용되는 부분입니다. 기본값 매개변수 - JavaScript | MDN 기본값 함수 매개변수 (default function parameter)를 사용하면 값이 없거나 undefined가 전달될 경우 이름붙은 매개변수를 기본값으로 초기화할 수 있습니다. developer.mozilla.org 아래 코드로 예시를 들어보겠습니다. const getSum = (a, b) => a + b; const sumValue = getSum(1, 5); console.log(sumValue); // 6 출력 함수의 선언에서 2개의 매개변수를 사용했다면, 해당 함수를 호출할 때 2개의 인자를 받아 호출하는 것이..
함수 작성 방법(익명함수, 화살표 함수) 플레이어와 상대 컴퓨터의 가위, 바위, 보 대결을 하는 코드의 일부를 이용하여 몇 가지의 함수 작성 예시를 살펴보겠습니다. 아래는 코드는 기본적으로 사용하는 함수 작성 방법입니다. 가위, 바위, 보 대결 코드 일부 const ROCK = "ROCK"; const PAPER = "PAPER"; const SCISSORS = "SCISSORS"; const RESULT_DRAW = "DRAW"; const RESULT_PLAYER_WINS = "PLAYER_WINS"; const RESULT_COMPUTER_WINS = "COMPUTER_WINS"; function getWinner(computerChoice, playerChoice) { if (computerChoice === playerChoice) {..
for - of / for - in 반복문 반복문이라고 하면 가장 먼저 떠오르는 반복문은 다양한 프로그래밍 언어에서 사용되고 있는 for 반복문과 while 반복문일 것입니다. 저 또한 그랬고 많은 분들이 for - of 반복문과 for - in 반복문은 많이 생소하실 것입니다. 이번 게시글에서는 JavaScript loop인 for - of 반복문과 for - in 반복문을 정리해보겠습니다. 루프와 반복 - JavaScript | MDN 루프는 어떤 것을 반복적으로 시행할때 빠르고 간편한 방법을 제공합니다. JavaScript Guide의 이 항목은 JavaScript 에서 사용이 가능한 서로 다른 여러가지 반복문을 소개합니다. developer.mozilla.org for - of 반복문 for - of 반복문을 사용하면 배열의 모든 요소에 ..
swich - case swich - case 문은 충족된 조건에 따라 여러 다른 코드를 실행하고자 할 경우 사용되며, 특히 동치 확인이 필요한 경우 아주 유용하게 사용됩니다. 물론 동치를 확인하지 않는 조건들에 swich - case문을 사용할 수는 있지만, 코드의 길이가 그다지 짧아지지도 않으며 보통은 가독성이 떨어지는 경우가 많습니다. 따라서 동치를 확인해야하는 경우 swich - case문을 사용하여 다수의 상이한 값을 확인할 때 사용한다면 if, else if 문을 대체하여 효과적으로 코드를 작성할 수 있습니다. 제어 흐름과 오류 처리 - JavaScript | MDN JavaScript는 애플리케이션에 다양한 상호작용을 추가하기 위한 일련의 명령문, 특히 제어 흐름 명령문을 지원합니다. 이번 장에서는 이 명령문들을 ..

티스토리툴바