이다닷

입력 요소 값 읽기 , 처럼 사용자로부터 입력을 받는데에 사용 되는 요소들이 있다. 여기에서 사용자가 입력한 값을 읽어들일 때에는 요소의 value 속성에 접근하자. 차이점 요소의 텍스트에 접근하고 싶을때 : textContent 또는 innerText 사용자가 요소에 입력한 값에 접근하고 싶을때 : value 입력 요소의 value 값에 접근하여 할 수 있는 일! console.log(target.value) // 대상 요소의 사용자 입력값을 읽어 콘솔에 출력하기 // 읽기 target.value = "변경값" // 대상 요소의 사용자 입력값을 "변경값"으로 바꾸기 // 쓰기 오늘의 실습 const form = document.querySelector("form") form.addEventListene..

document.createElement document의 createElement 메소드는 지정된 이름의 HTML 요소를 만들어 반환해 준다. 사용법 document.createElement('div') 하지만! HTML 요소가 만들어지고 또 반환 되었다고 해서, 해당 요소가 곧장 웹 브라우저 화면에 추가되는 것은 아니다. 그럴때 사용방법! appendChild 메소드는 DOM 내 개별요소('노드'라고도 함)에 자식 요소를 추가할 때 사용하는 메소드이다. 사용법 target.appendChild(자식으로_추가할_요소) appendChild .vs append appendChile 메소드와 비슷한 역할을 하는 append 메소드도 있다. 타겟 요소에 자식 요소를 추가한다는 점에서 같으나, 차이점도 존재한..

addEventListener onclick, onkeydown 과 같은 이벤트 속성을 통해 이벤트 핸들러를 등록하는 것보다 현대적인 방법은, addEventListener 메소드를 활용하는 것이다. ex ) 클릭 이벤트 핸들러를 등록하는 경우의 예 target.addEventListener('click', function(){}) addEventListener 함수의 이점 이전에 추가한 이벤트 핸들러를 제거할 수 있는 대응 메소드가 존재한다. 같은 리스너에 대해 다수의 핸들러를 등록할 수 있다. 추가적인 옵션 사항들이 제공된다. 이벤트 객체 이벤트 객체란 '추가적인 기능과 정보를 제공하기 위해 이벤트 핸들러에 자동으로 전달되는 데이터'이다. 이를 활용하기 위해서는 이벤트 핸들러 함수에 매개변수를 추가하..

이벤트 이벤트란 '사용 중이거나 프로그래밍 중인 시스템 내에서 일어나는 사건'을 뜻한다. 웹에서도 이벤트가 발생한다. 웹에서 발생하는 이벤트의 예 웹페이지 사용자가 버튼을 클릭했다 -> 클릭 이벤트! 웹페이지 사용자가 키보드를 눌렀다 -> 키다운 이벤트! 웹페이지 사용자가 입력 폼의 내용을 제출했다 -> 제출 이벤트! 등등 이벤트 핸들러 이벤트 핸들러란 '이벤트가 발생되면 실행될 코드 블록'을 뜻하며, 주로 함수가 이 역할을 담당한다. 이벤트 핸들러 역할을 수행할 함수를 정의하는 것은 이벤트 핸들러 등록이라고 한다. => event handler register : 이벤트가 발생하면, 이 함수를 호출해라! ex) 웹 사용자가 버튼 요소를 클릭했을 때, 경고 다이얼로그 박스를 띄워 환영의 메시지를 보여주고..

함수 함수란 '호출될 수 있는 코드 조각'이다. 변수를 선언하고 데이터를 대입하면 변수의 이름을 데이터 대신 사용할 수 있는 것처럼, 함수를 선언하면 함수의 이름을 코드 조각 대신 사용할 수 있다. 📌변수와 비슷한 정의로 데이터 대신 코드에 이름을 붙여주는 것! 함수 선언식 function 함수명() { // 함수의 기능을 표현한 구문 } => 위와 같은 선언 이후, 함수명은 중괄호 안의 기능 대신 사용될 수 있다! 함수 표현식 const 함수명 = function() { // 함수의 기능을 표현한 구문 } => 마찬가지로 선언이후, 함수명은 중괄호 안의 기능 대신 사용될 수 있다! 함수 사용 함수를 만들고 나면 함수를 사용해야 한다. 위의 두가지 방식으로 함수를 만들고, 함수를 사용하기 위해서는 함수를..

for문 for문은 구문 작성시 반복을 위해 필요한 세 가지 요소를 한 곳에 모아 작성함으로써 보다 명시적으로 반복 횟수를 표현할 수 있는 직관적인 구문이다. for(초기식; 조건식; 반복식){ //조건이 true인 경우 반복 수행할 코드 } => 초기식 : 반복 조건의 초기화 작업 ex) x=0 => 반복식 : 반복이 한 번 끝날 때마다 실행될 작업 ex) x++ 오늘의 실습 for(let i = 1; i

자바스크립트에서 비교란? 자바스크립트는 주어진 두 항을 비교할 수 있는 '비교 연산자'를 제공한다. 다음 두 가지 유형의 비교를 할 수 있다. 대소 비교 (크다, 작다) 등가 비교 (같다, 다르다) 📌무언가를 비교하는 작업 또한 '연산'의 일종으로 취급한다! 비교 연산의 특징 비교 연산식은 언제나 boolean 데이터를 반환한다. 크냐 작냐를비교하는 대소 비교, 같냐 다르냐를 비교하는 등가 비교는 모두 하나의 질문이며, 질문에 대한 답이 참(True) 또는 거짓(False)인 것이다. 대소 비교 대소 비교는 다음 네 가지 연산자를 사용해 처리할 수 있다. 의미 연산자 사용 형태 크다 > A > B 작다 = A >= B 작거나 같다

window.document window.document은 현재 브라우저에 렌더링되고 있는 문서를 의미하며, 이 속성을 이용하면 해당 문서에 접근할 수 있다. 즉, DOM에 대한 진입점 역할을 하는 프로그래밍 인터페이스이다! 이를 이용하면 페이지의 정보를 얻거나 웹 요소를 생성 및 조작할 수 있다. 속성과 메소드를 제공 document는 문서(HTML, XML, SVG 등)에 대한 공통의 속성과 메소드를 제공한다. 즉, 다양한 API를 제공한다. 📌관련 문서 링크 Document - Web API | MDN (mozilla.org) Document - Web API | MDN Document 인터페이스는 브라우저가 불러온 웹 페이지를 나타내며, 페이지 콘텐츠(DOM 트리)의 진입점 역할을 수행합니다. D..

DOM을 알아보기 전에 웹브라우저는 HTML 문서를 해석하고, 화면을 통해 해석된 결과를 보여준다. 해석한 HTML 코드를 화면을 통해 보여주는 과정을 '렌더링'이라고 한다. 렌더링의 세부 과정 브라우저는 HTML 코드를 해석해서 요소들을 트리 형태로 구조화해 표현하는 문서를 생성한다. 이를 DOM이라고 하며, 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링한다. 아래에 있는 사진처럼 트리 형태를 띄우게 된다. DOM의 존재 목적 DOM은 자바스크립트를 사용해서 웹 콘텐츠를 추가, 수정, 삭제하거나 마우스 클릭, 키보드 타이핑 등 이벤트에 대한 처리를 정의할 수 있도록 제공되는 프로그래밍 인터페이스이다.

연산 연산이란 '식이 나타낸 일정한 규칙에 따라 계산함'을 뜻한다. 사용자는 자바 스크립트 코드를 통해 연산을 처리하는 식을 만들 수 있고, 여기에 사용하는 기호를 '연산자'라 한다! 산술 연산 산술 연산은 더하기, 빼기 등 수를 이용한 계산이다. 두 개의 숫자 데이터를 피연산자로 받아서 하나의 숫자 데이터를 결과로 반환한다. 의미 연산자 예제 더하기 + 2 + 2 -> 4를 반환 빼기 - 5 - 2 -> 3을 반환 곱하기 * 3 * 2 -> 6을 반환 나누기 / 1 / 2 -> 0.5를 반환 나머지 % 12 % 5 -> 2를 반환 결과의 반환 산술 연산을 처리하는 식을 사용하면, 해당 식은 연산 결과를 반환한다. 즉, 식이 데이터로 대체된다! 📌실제 코드가 바뀌는 게 아닌, 실행 시에 결과가 반영된다는..