jennet1 님의 블로그

value와 innerText 를 다뤄보자 각 속성의 차이와 언제 사용하는지 알아보자1. value 어디에 사용?: 주로 input,textarea,select 와 같은 폼 요소에 사용됩니다.역할: 사용자가 입력한 값 또는 프로그램matically 설정한 값을 다룹니다.input 값을 변경하려면 value 사용해야함 값 자체는 value 속성에 저장되기 때문이다. 2. innerText어디에 사용?: 주로 div,span,p 와 같은 일반 HTML 요소에 사용됩니다.역할: 해당 태그 내의 텍스트 내용을 다룹니다. 이 속성은 태그 안에 있는 순수 텍스트를 변경하거나 가져올 때 사용됩니다.기본 텍스트 input,textarea 같은 태그는 value 를 사용하고div나 span 의 텍스를 수정하고 싶은 경우..

- Event Listener : 사용자 상호작용을 처리하는 중요한 요소이다. 클릭,입력,마우스 움직임 등다양한 이벤트가 발생할 때 특정 작업을 수행할 수 있게 한다. Event Listener 구조는 다음과 같다.element.addEventListener(event, function, useCapture);element : 이벤트를 동작할 HTML 요소event : 발생할 이벤트 종류 ("click"."keydown")function : 이벤트가 발생했을 때 실행될 함수자주 사용하는 이벤트 click: 요소가 클릭되었을 때 발생mouseover: 마우스가 요소 위로 올려졌을 때 발생keydown: 키보드에서 키가 눌렸을 때 발생submit: 폼이 제출되었을 때 발생input: 사용자가 입력 필드에 텍..

1. rand 함수란?- 임의의 정수를 반환하는 함수, 주어진 범위 내에서 무작위 값을 생성한다.Math.random() 함수 : 0 과 1 사이의 소수 값을 반환한다.let randomValue = Math.random();console.log(randomValue); // 예: 0.123456789정수로 출력하기 위해 추가적인 작업이 필요하다 1~10 사이의 정수 생성let randomValue = Math.floor(Math.random() * 10) + 1;console.log(randomValue); // 1부터 10까지의 정수 출력 Math.floor() : 소수점 아래를 버리고 Math.random() * 10은 0부터 9.9999..까지의 값을 반환해서1부터 10까지의 랜덤값을 얻을 수 있..

children ? childrenNodes ?- DOM 에서 부모 요소의 자식 요소를 가져올 때 사용한다. 둘다 반환하는 값이나 활용하는 상황이 다르니 차이점을 이해해 보자1. children 부모 요소의 자식 요소들 중 HTML 요소만 반환한다.태그 요소들만 가져옴 , 텍스트나 노드 주석은 다 무시한다.반환 값은 HTMLCollection 입니다. foreach 문을 사용할 수 없지만 for(basic) 가능하다. Text div 두번째 Text div 세번째 Text 2. childNodes부모 요소의 모든 자식 노드를 가져온다.HTML 요소뿐만 아니라 노드,공백,주석 등 모든 노드를 반환한다.NodeList 배열이 아니지만, 대부분 forEach 문 사용이 가능 ..

InnerHTML, innerText, textContent HTML * 요소의 내용을 가져오거나 수정하는 방식인 3가지 방법에 대해 알아보자 1. InnerHTML 기능 : 요소의 HTML 코드를 포함한 내용을 가져오거나 수정할 떄 사용한다.HTML 태그와 태그 안에 내용을 모두 포함한다.HTML을 추가할 때 문자열로 작성된 HTML 태그가 그대로 랜더링 된다.보안에 주의해야한다. 사용자 입력을 InnerHTML 로 삽입하면 XSS 공격의 위험이 있다// 안녕하세요!const exampleDiv = document.getElementById('example');// innerHTML을 사용해 HTML 태그와 내용을 모두 가져옴console.log(exampleDiv.innerHTML); // "안녕하..

1. DOM 개념 소개DOM이란: HTML 문서의 구조를 계층적으로 표현한 모델입니다. 문서를 트리 구조로 표현하여, 각 요소(태그)를 객체로 다룰 수 있게 합니다.DOM과 JavaScript: JavaScript를 이용해 DOM을 조작하면 웹 페이지의 동적인 변화를 실시간으로 구현할 수 있습니다.2. DOM 접근 방법document.getElementById(): ID로 요소를 찾는 방법.document.querySelector()와 querySelectorAll(): CSS 선택자를 사용해 요소를 선택하는 방법.document.getElementsByClassName()와 document.getElementsByTagName(): 클래스명과 태그명을 통해 여러 요소를 선택하는 방법. Text..

1. 함수란?- 특정 작업을 수행하는 코드 블록이며 코드를 재사용 하고 모듈화 하는데 유용함.function 키워드를 사용하여 선언하고 함수 호출 시 필요한 매개변수를 전달하여 다양한 상황에 맞게 사용가능function sumResult(n) { // function (함수의 이름)(전달받는 값) // 없으면 공백 let sum = 0; for(let i = 0; i 함수에 전달할 값이 없고 함수에서도 리턴값이 없으면 다음과 같이 함수를 사용할 수 있다.function voidStr() { console.log("출력");}voidStr();2. 화살표 함수란?ES6에서 도입된 함수 표현식의 짧은 문법이다.일반 함수보다 짧고 간결하게 사용이 가능하다.화살표 함수를 써야 하는 이유코드가 짧아지고 가..

선언한 배열의 공간의 값을 추가,삭제,검사 하는 메소드를 활용해보자 Push : 요소추가 (마지막에 추가됨)let days = ["M","T","W","T","F","S"];days.push("X");console.log(days);/*[ 'M', 'T', 'W', 'T', 'F', 'S', 'X' Unshift : 맨 앞에 요소 추가let days = ["M","T","W","T","F","S"];days.unshift("A");console.log(days);/*[ 'A', 'M', 'T', 'W', 'T', 'F', 'S', 'X']*/Shift : 맨앞에 요소 삭제days.shift();console.log("days.shift A : days", days);/*[ 'M', 'T', ..