본문 바로가기

CodeIt_Sprint87

(1)자바스크립트_모듈_node.js환경 셋팅, export/import ,named export/ default export ●이론_1_vscode로 node.js 설치 및 환경 셋팅 :https://kojammin.tistory.com/184 "LTS"버전으로 Download링크 : https://nodejs.org/en순서2_ 파일 설치 경로 : C드라이브 / Program Files 폴더 내 로지정순서3_ 추가 프로그램 설치 여부 체크 박스 : 체크 X, Next순서4_ c" data-og-host="kojammin.tistory.com" data-og-source-url="https://kojammin.tistory.com/184" data-og-url="https://kojammin.tistory.com/184" data-og-image="https://scrap.kakaocdn.net/dn/c0qI1L/hyXGD6k.. 2024. 12. 1.
(9)인터렉티브_자바스크립트_event객체프로퍼티메소드 preventDefault() 메소드를 이용하여, 실습 3개 해보기(작성중) ● Default 코드 , 출력 장면 :- index.html Link I Love Codeit! - 출력장면 ● 실습 1 : JavaScript 코드를 이용하여, link의 링크 접속시, 접속기능은 안되고, "꺼져"라는 경고창 출력 //href 속성삭제 X- 답 : const link = document.querySelector('#link'); link.addEventListener('click',function(event) { event.preventDefault(); alert('꺼져 병신아'); });● 실습 2 : checkBox 태그가 unchecked 되어있을 때, input 입력을 막고, "체크하고 입력해 병신아" 경고창 출력되도록.. 2024. 11. 29.
(8)인터렉티브_자바스크립트_이벤트 버블링 ● 개념1 : 이벤트 버블링○ 이벤트 버블링을 설명하기 위한 셋팅 예시- 각 모든 태그에 'click' event.type 에 대한, 자신의 영역이름 문자열을 출력하는 핸들러 등록된 상황- index.html content 오늘 할 일 list 자바스크립트 공부 유튜브 시청 저녁 약속 독서 일기 - 출력장면 :- 출력장면에 대한 설명 :item 항목을 'click'을 하면, "item Event" 가 출력되는데,. 같은 'click'으로 이벤트가 등록된 부모 요소인 list와 content도 최상위 관계까지 순으로 거슬러 올라오면서, list와 content에 'click'에 대한 핸들러도 발생한다.=> 이런 현상을 .. 2024. 11. 29.
(7)인터렉티브_자바스크립트_태그에 이벤트 핸들러 등록,제거하기, 이벤트객체 => 동작에 대하여, 어떤 event동작, 태그항목이 관련되어있는지의 정보 객체 ● 개념1 : 태그에 이벤트 핸들러 등록,제거하기 => addEventListener(),removeEventListener()○ 문법 :요소노드.addEventListener( 동작에 해당되는 event , 함수이름 || 직접 함수 작성 {...});Ex_const btn = document.getElementbyTagName('button');function btnClickPrint(){ console.log('버튼 누르면 출력됨');} //'click' 왼쪽 마우스 클릭 동작에 대한 event 명칭이다.btn.addEventListener('click',btnClickPrint); ○ 핸들러 등록 방법 2가지방법1_ 이벤트 핸들러를 제거할 필요가 없다면, => 매개인자 2번째 함수자리에 직접 함수 .. 2024. 11. 29.

티스토리툴바