▼HTML, JavaScript 문서더보기 click me! // 이벤트 객체 (Event Object)const myInput = document.querySelector("#myInput");const myBtn = document.querySelector("#myBtn");사용자가 키보드와 마우스를 통해서 컴퓨터의 모든 동작을 다루기 때문에 웹 페이지에서 일어날 수 있는 이벤트도 대부분 키보드, 마우스 이벤트로 이루어진다. 키보드로 제어할 수 있는 대표적인 이벤트인 '키다운'과 마우스로 제어할 수 있는 대표적인 이벤트인 '클릭'의 이벤트 핸들러를 등록해보자// 이벤트 객체 (Event Object)const myInput = document.queryS..

▼ HTML 문서더보기 JS Hi HTML Hello 버튼 클릭 이벤트에서 이벤트 핸들러를 등록하는 두 가지 방법이 있다고 했을 때, - LinkDom 요소 접근하여 onclick 프로퍼티 활용HTML 태그에 onclick 속성 활용또한 HTML 태그에서 직접 이벤트를 다루는 일은 잘 사용하지 않으며 문제도 많아 잘 쓰이지 않는다고 했다.다시한번 onclick 동작 구조를 살펴보기위해 각 버튼에 적용해보자면//이벤트 핸들러 등록하기let btn = document.querySelector("#myBtn");btn.onclick = function () { console.log("Hi");};이렇게 등록한 이벤트 핸들러가 잘 동작하는 것을 확인할 수 있..

이전 글 까지만해도 표준 속성을 사용하여 HTML 태그의 속성을 다루었다.하지만 자바스크립트로 태그를 다루다보면 아래와 같이 표준이 아닌 속성을 사용할 때가 있다.  이러한 비표준 속성을 어떤 식으로 다룰 수 있는지 확인해보자.▼ HTML, CSS, JavaScript 문서더보기 Progream : Name : status : 상태 변경: 방해금지 게임중 접속중  [status] { padding: 5px 10px;}[status="방해금지"] { background-color: #FF6767; color: #FFFFFF;}[status="게임중"] { background-color: #5f62ff; color: #FFFFFF;}[status="접속중..

▼ HTML, CSS, JavaScript 문서더보기 오늘 할 일 자바스크립트 공부 고양이 화장실 청소 고양이 장난감 쇼핑 내일 할 일 자바스크립트 공부 뮤지컬 공연 예매 유튜브 시청 .done { opacity: 0.5; text-decoration: line-through;}// 스타일 다루기const today = document.querySelector('#today');const tomorrow = document.querySelector('#tomorrow'); style 프로퍼티▼ style 프로퍼티를 활용하여 글자에 취소선 및 배경 적용하기//st..

▼ HTML, JavaScript 문서더보기 오늘 할 일 자바스크립트 공부 고양이 화장실 청소 고양이 장난감 쇼핑 내일 할 일 자바스크립트 공부 뮤지컬 공연 예매 유튜브 시청 // HTML 속성 (HTML attribute)const tomorrow = document.querySelector('#tomorrow');const item = tomorrow.firstElementChild;const link = item.firstElementChild;// id 속성console.log(tomorrow);console.log(tomorrow.id);// class 속..

▼HTML, JavaScript 문서더보기 오늘 할 일 자바스크립트 공부 고양이 화장실 청소 고양이 장난감 쇼핑 내일 할 일 자바스크립트 공부 뮤지컬 공연 예매 유튜브 시청 // 노드 삭제와 이동const today = document.querySelector('#today');const tomorrow = document.querySelector('#tomorrow');노드 삭제 - remove 메소드 ▼ 원하는 노드를 선택해서 remove 메소드를 호출하여 노드 삭제// 노드 삭제와 이동const today = document.querySelector('#today');const tomorrow = document.querySelector('#tom..

▼ HTML,JavaScript 문서더보기 오늘 할 일 자바스크립트 공부 고양이 화장실 청소 고양이 장난감 쇼핑 내일 할 일 자바스크립트 공부 뮤지컬 공연 예매 유튜브 시청 const today = document.querySelector('#today');today.innerHTML = '처음' + today.innerHTML;today.innerHTML = today.innerHTML + '마지막';today.outerHTML = '이전' + today.outerHTML; const newToday = document.querySelector('#today');newToday.outerHTML = newToday.outerHTML + '다음';▼ i..

TypeScript 란• 타입스크립트 (TypeScript)는 MS에서 만든 대규모 어플리케이션 개발을 위한 소프트웨어 언어• ES6 + 정적 타입• ES6 는 Supset, Typescript 는 ES6 의 Super set • 타입스크립트는 ES6 의 모든 기능을 지원한다.• 정적 타입을 지원함으로 코드의 오류를 줄이고 쉽게 디버깅이 된다.개발환경• 타입스크립트를 브라우저의 JS Engine 이 해석하지 못한다.• 타입스크립트 코드를 브라우저에서 해석 가능한 자바스크립트 코드로 변형시켜야 한다.• 컴파일러(트랜스파일러)– tsc >npm install typescript>npx tsc main.ts • tsconfig.json 활용>npm init>npm install -D typescript>npx..

▼ HTML,JavaScript 문서더보기 Cat-1 Ragdoll British Shorthair Scottish Fold Bengal Siamese Maine Coon American Shorthair Russian Blue Cat-2 Sphynx Munchkin Persian Norwegian Forset Turkish Angora Bombay Selkirk Rex Munchkin  //요소 노드 주요 프로퍼티const myTag = document.querySelector('#list-1') HTML 문서를 ..

File 핸들링 제약• 브라우저에서 실행되는 프론트 웹 애플리케이션에서 사용자 컴퓨터에 저장되있는 파일을 핸들링하는 것은 일차적으로 금지되어 있다.유저가 브라우저에서 선택한 파일에 한해서만 자바스크립트로 읽어 들일 수 있고 서버에 업로드가 가능하다.사용자가 선택한 파일이란 이후에 살펴볼 을 통해 유저가 선택한 파일이거나아니면유저가 드래그&드랍으로 웹 페이지에 추가시킨 파일을 의미한다. • 사용자가 애플리케이션에 파일을 추가하기 위한 가장 기본적인 방법은 태그를 이용하는 방법이다. ▼ multiple 속성 • multiple 속성이 추가되면 사용자가 파일 선택 다이얼로그에서 여러 파일을 선택할 수 있다. ▼ accept 속성 • accept 속성을 이용해 사용자가 선택할 파일의 타입을 지정할 수 있다.  ..