728x90 300x250 SMALL javaScript545 클래스 제어, 토글, 조건문 버튼 클릭 시 클래스 토글(활성화 상태 표시) 다음 jQuery를 Vanilla JS로 변경해 보자토글 버튼 Vanilla JS토글 버튼 토글 버튼">토글 버튼 1. document.querySelector(".btn3")html에서 .btn3클래스가 붙은 첫 번째 요소를 선택 2. .addEventListener("click", function*(){...})해당 버튼을 클릭했을때 실행할 함수 (이벤트 핸들러)를 지정 3. this.classList.toggle("active")this.는 현재 클릭한 요소 자신을 의미함classList는 해당 요소에 적용된 클래스 목록을 관리할 수 있는 DOM 객체toggle("active")는active 클래스가 없으면 추가 있으면 제거 2025. 4. 18. Vanilla JS 기초 연습 - 버튼 클릭하면 alert 띄우기 다음의 jQuery 예시를 Vanilla JS로 변경해 보자클릭하세요! 클릭하세요!">클릭하세요! Vanilla JS - 버튼 클릭하면 alert 띄우기클릭하세요! 클릭하세요!">클릭하세요! - Document.querySeector() - 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환, 일치하는 요소가 없으면 null을 반환document.querySelector(selectors); ※선택자를 만족하는 모든 요소의 목록이 필요하다면 querySelectorAll()을 대신 사용한다. - EventTarget,addEventListener() - 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정한다.addEventListener(type, li.. 2025. 4. 17. 타입스크립트 컴파일러 설치하기 TypeScript와 ts-node를 전역(global)로 설치npm i -g typescript ts-node npm i -g typescript ts-node가 하는 일(1) typescript 패키지 설치typescript 패키지는 타입스크립트 컴파일러(tsc)를 포함하고 있다.tsc를 사용하면 .ts 파일을 .js로 변환할 수 있다.(2) ts-node 패키지 설치ts-node는 타입스크립트 파일을 바로 실행할 수 있게 해주는 도구이다.즉, tsc 없이도. ts파일을 실행할 수 있다.(3) -g 옵션을 사용하면 전역 설치가 된다.전역 설치하면, 어떤 폴더에서도 tsc와 ts-node를 사용할 수 있다. tsc -vts-node -v 이렇게 입력하면 설치된 버전이 나온다. 2025. 4. 3. 타입스크립트 초보자 가이드 - 기초 문법과 컴파일 방법 타입스크립트란?타입스크립트(TypeScript)는 JavaScript의 슈퍼셋으로, 정적 타입 시스템을 제공한다.이를 통해 개발 시 오류를 사전에 방지할 수 있어 유지보수성이 뛰어나다. 타입스크립트 설치 방법Node.js가 설치되어 있어야 함(node -v 확인)타입스크립트 전역 설치npm install -g typescript tsc -v로 설치 확인타입스크립트 코드 작서 예시 1.app.ts 파일 생성let message: string = "Hello, TypeScript!";console.log(message); message라는 변수를 선언: string -> message 변수는 반드시 문자열(string)이어야 한다. 2. 컴파일타입스크립트는 브라우저에서 직접 실행할 수 없고, 자바스크립트로 .. 2025. 4. 2. 이전 1 2 3 4 5 6 7 ··· 137 다음 728x90 반응형 LIST
