전체 글(223)
-
[ JavaScript ] 모듈을 더욱 효율적으로 (this 사용) - 같은 틀을 여러 번 반복해서 사용하기
환경 : Visual Studio Code [ 주요 코드 ] 아래의 코드를 이해하기 위해선 자바스크립트의 DOM 탐색 명령을 알아야 한다. - DOM 탐색 명령(위치 찾는 명령) 뒤 nextElementSibling 앞 previousElementSibling 상 parentElement 하 children (여러 개일 수 있음) (+) var count = this.nextElementSibling.children[0]; // 현재 선택된 editor의 div 태그(nextElementSibling) 아래의 첫 번째(children[0]) 태그 [ 전체 코드 ] 자기소개서 (Q) 질문 테스트 1번 0 / 1000 (Q) 질문 테스트 2번 0 / 1000 (Q) 질문 테스트 3번 0 / 1000 개인 공..
2024.05.21 -
[ JavaScript ] 모듈을 더욱 효율적으로 (this 사용) - 폰트 크기 바꾸기
환경 : Visual Studio Code [ 살펴 볼 주요 코드 ] (+) 증가 / 감소 버튼 두 개만 있으므로 굳이 for문을 사용할 필요가 없다. (+) 각각의 함수에서 사이즈 조절을 해주고, 그 사이즈를 적용시켜주는 함수(changeFontSize())를 호출해준 코드다 (중요) 폰트의 크기를 코드 안에 가지고 있다면? var size = 16; changeFontSize(size); - 텍스트를 화면에 출력되어있거나, 페이지가 가지고 있는 폰트 사이즈를 가지고 오는 것이 아니라 애초에 내장을 하게 된다면, 아무나 쉽게 접근할 수 없게 된다. 즉, 보안 강화에 좋다. - 단, 이렇게 된다면 처음 페이지에 접속하면 사용자에게 보여지는 '현재 폰트 크기' 정보가 빈 부분이 된다. 따라서 이 폰트를 찍..
2024.05.20 -
[ JavaScript ] 모듈을 더욱 효율적으로 (this 사용) - 이미지 크기 바꾸기
환경 : Visual Studio Code [ 주요 코드 ] 작게 보통 크게 (+) dataset을 통해 사이즈의 값을 가져오게끔 해줄 수 있다. = 커스텀 속성 작성 (+) 단, 원래 있던 속성과의 구분을 위해 data- 로 시작! (+) 각각의 태그에 설정해준 동일한 이름(data-size)의 값을 다르게 하여, 이 값만 불러오도록 설정 (+) dataset의 값을 스트링으로 가져온다! [ 전체 코드 ] 이미지 크기 조절 작게 보통 크게 개인 공부 기록용입니다:)
2024.05.19 -
[ JavaScript ] 모듈을 더욱 효율적으로 (this 사용) - 폰트 색상 바꾸기
환경 : Visual Studio Code [ 주요 코드 ] 모듈형으로 색상 변경 Hello Javascript! coral purple lightBlue lightGray orange (+) 버튼의 클래스 명(btn-color)을 동일하게 주어 이후 버튼을 추가해도, 안의 텍스트만 색상과 동일하게 지정해준다면 확장성을 높이며, 코드의 간결성도 챙길 수 있는 방법이다 (+) 버튼을 배열로 가져와, 그 안에 있는 텍스트를 읽어와, 그 텍스트를 글씨체의 색상으로 적용해주는 코드이다. (this 사용) [ 전체 코드 ] 모듈형으로 색상 변경 Hello Javascript! coral purple lightBlue lightGray orange 개인 공부 기록용입니다:)
2024.05.17 -
[ JavaScript ] 체크박스 제어
환경 : Visual Studio Code [ 주요 코드 ] (+) target이 checkbox일 경우 checked라는 속성이 존재 - true일 경우 체크된 상태이고, false일 경우 체크해제된 상태 (+) targetList.checked = true; //말 안되는 코드 targetList[0].checked = true; //말 되는 코드 (+) var targetList = document.querySelectorAll(".item"); // item 클래스를 가진 모든 태그를 가져오게 됨(배열!) [ 전체 코드 ] 체크박스 다루기 테스트 항목 전체선택 항목1 항목2 항목3 항목4 항목5 개인 공부 기록용입니다:)
2024.05.16 -
[ JavaScript ] 모듈형 자바스크립트
환경 : Visual Studio Code [ 주요 코드 ] (+) window.onload로 함수를 불러오게 되면, window의 로드가 완료되면 특정 함수를 실행하도록 설정한 것이다. (+) button.addEventListener("click", function(){ alert("클릭!"); }); addEventListener()를 사용하여 함수를 호출!!! 이게 더 좋다고 한다.. [ 전체 코드 ] 독립모듈형 자바스크립트 click 개인 공부 기록용입니다:)
2024.05.15