이벤트 객체 웹 서핑시 특정 이미지나 카드를 클릭하거나 드래그 → 이렇게 클릭이나 드래그하는 일을 이벤트라 함 학습 목표 * 기초적인 event 이해와 event handler를 element에 적용하기 - onclick event - onclick 에 직접 할당하는 것과 addEventListener의 차이 - eventHandler 함수를 만들고, eventHandler의 첫 번째 인자 사용하는 법 이벤트 객체 ex) POS기 만들기 예제 화면에 아메리카노나 카페라떼를 클릭하는 각각의 버튼 존재(아메리카노/카페라떼 버튼) 두개의 버튼을 클릭할 때 각각 ‘아메리카노를 클릭하셨습니다’ ‘카페라떼를 클릭하셨습니다’ 라고 출력하자 let menus = document.querySelectorAll("butt..

유효성 검사 ex) 웹사이트 “회원가입” 할때? 아이디, 이메일, 비번 필수 암호는 숫자와 특수문자 포함 등등.. → 이런거 검사하는 기능을 유효성 검사 최소 기능 제품(MVP) 만들기 연습 학습 목표 * DOM 기초 실습을 통한 구체적 사용법 querySelector onclick, onkeyup, addEventListener 메소드 이벤트 핸들러 함수 → 이벤트 발생한 곳의 정보 확인 이벤트 핸들러 함수 → 유효성 검사 실행 * 유효성 검사에 필요한 기술 요소 검사에 필요한 HTML 엘리먼트, CSS 속성 - display: none - 유효성 검사에 활용할 수 있는 정규 표현식 사용법 기초 * 관심사 분리를 적용하거나 유효성 검사 함수를 따로 분리해서 설계하기 유효성 검사 hands-on 1 엘리..

js/browser – DOM(Document Object Model) DOM은 프로그래머 관점에서 바라 본 HTML DOM 이해하기 DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model입니다. 즉, 여러분이 자바스크립트를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있습니다. 학습 목표 * DOM의 개념 * DOM의 구조와 HTML과 비교 * HTML에서 JavaScript 파일을 불러올 때의 주의점 - ` // html 파일과 같은 디렉토리에 있는 ~파일 불러옴 → 웹 브라우저는 코드를 해석하는 과정에서 요소를 만나면 html 해석을 일시 정지하고 요소를 먼저 실행한다. ..