· FRONT-END/└ JS(47)
-
[ 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 -
[ JavaScript ] 내장 객체의 주요 속성 및 메서드 정리
자바스크립트의 내장 객체 중 `window`, `history`, `location`, `document` 객체에 대한 내용입니다 [1] window 객체: 전역 객체: 브라우저 창을 나타내는 객체로, 전역 변수와 함수를 포함합니다. 주요 속성 window.document 현재 문서에 대한 참조를 제공 window.location 현재 URL 정보를 다루는 객체 window.history 브라우저 이력을 다루는 객체 window.alert() 경고창을 띄우는 메서드 등 다양한 속성과 메서드를 포함 [2] history 객체: 브라우저 이력 관리: 사용자의 방문 이력을 추적하고, 페이지 이동을 다루는 객체입니다. 주요 메서드 history.back() 이전 페이지로 이동 history.forward() 다..
2024.05.14 -
[ JavaScript ] 내장 객체
환경 : Visual Studio Code [ 내장 객체 ] window : 자바스크립트 최상위 내장객체이며 창과 관련된 작업 처리 └ location : 주소, 이동과 관련된 작업을 처리 └ history : 방문 이력과 관련된 작업을 처리 └ document : 화면에 표시되는 문서에 대한 작업을 처리 코드량 감소를 위해 window는 생략 가능하다 [ location 객체를 콘솔 창에 찍었을 때 나오는 값에 대해 ... ] - 참고 : https://webzz.tistory.com/85, https://im-developer.tistory.com/219 location 객체 메서드 및 객체 속성 ancestroOrigins : 주어진 Location 객체와 연관된 document의 모든 조상 bro..
2024.05.14