비전공자 개발일기

알파벳 선택: a b c d e 선택된 옵션(순서(selectedIndex), value, text) -> Multi Option Select : a b c d e f SUBMIT 제출될 데이터를 확인하세요. // select option let bTag = document.getElementById('selectedOpt') let selectAlphabet = document.querySelector('select') function print() { // console.log(selectAlphabet) let selectAlphabetI = selectAlphabet.options.selectedIndex let selectValue = selectAlphabet[selectAlphabetI].v..

00:00:00 const clock = document.querySelector("h2#clock"); function getClock() { const date = new Date(); const hours = String(date.getHours()).padStart(2, "0"); const minutes = String(date.getMinutes()).padStart(2, "0"); const seconds = String(date.getSeconds()).padStart(2, "0"); clock.innerText = `${hours}:${minutes}:${seconds}`; } getClock(); setInterval(getClock, 1000);

const loginForm = document.querySelector("#login-form"); const loginInput = document.querySelector("#login-form input"); const greeting = document.querySelector("#greeting"); const HIDDEN_CLASSNAME = "hidden"; // 문자열 타입을 변수로 만든 이유 -> 오타로 인한 오류 방지 const USERNAME_KEY = "username"; function onLoginSubmit(event) { event.preventDefault(); // 이벤트의 기본 진행 차단 loginForm.classList.add(HIDDEN_CLASSNAME); co..

모듈: 자바스크립트 파일 하나, 복잡하고 많은 양의 코드를 기능에 따라 파일로 나눠서 관리하기 위함 모듈 스코프: 외부에서 자유롭게 접근하는 걸 막기위해 파일 안에서 독립적인 스코프를 가지고 있어야함 모듈 문법: export, import // printer.js export const title = 'Printer'; export function print(value) { console.log(value); }; // index.js import { title, print } from './printer.js'; print(title); // 이름 바꿔서 import import { title as printerTitle, print, printArr } from './printer.js'; impor..

1. sort const letters = ['D', 'C', 'E', 'B', 'A']; const numbers = [1, 10, 4, 21, 36000]; letters.sort(); numbers.sort(); console.log(letters); // (5) ["A", "B", "C", "D", "E"] console.log(numbers); // (5) [1, 10, 21, 36000, 4] const numbers = [1, 10, 4, 21, 36000]; // 오름차순 정렬 numbers.sort((a, b) => a - b); console.log(numbers); // (5) [1, 4, 10, 21, 36000] // 내림차순 정렬 numbers.sort((a, b) => b - ..

1. 기명 함수 표현식 함수 표현식으로 함수를 만들때 선언하는 함수에 이름을 표현 const Hi = function () { console.log('Hi'); }; console.log(Hi.name); // Hi const Hi2 = function printHi() { console.log('Hi'); }; console.log(Hi2.name); // printHi 함수 내부에서 함수 자체를 가리킬 때 사용 let countdown = function(n) { console.log(n); if (n === 0) { console.log('End!'); } else { countdown(n - 1); } }; countdown(5); 재귀함수: 자기 자신을 부르는 함수 2. 즉시 실행 함수(익명 함..

1. 이벤트 관련 흐름 캡쳐링 단계: 이벤트가 하위 요소로 전파되는 단계 타깃 단계: 이벤트가 실제 카깃 요소에 전달되는 단계, 이벤트 객체의 target 속성이 되는 요소에 등록되어있던 이벤트 핸들러가 동작하는 단계, 가장 처음 이벤트 핸들러가 동작하게 되는 순간 버블링 단계: 이벤트가 상위 요소로 전파되는 단계 참고 사이트: https://www.w3.org/TR/DOM-Level-3-Events/ UI Events www.w3.org 2. 이벤트 핸들러 등록 및 삭제 (등록) HTML의 속성이나 DOM 속성을 활용해 이벤트를 등록하는 방법 외 Element.addEventListner('type', 'handler') (삭제) Element.removeEventListener('type', 'han..

1. 자바스크립트로 태그 선택하기 메소드 의미 결과 document.getElementById("id") HTML id속성으로 태그 선택 id에 해당하는 태그 하나 document.getElementByClassName("class") HTML class속성으로 태그 선택 class에 해당하는 태그 모음 (HTMLCollection) document.getElementByTagName("tag") HTML 태그 이름으로 태그 선택 tag에 해당하는 태그 모음 (HTMLCollection) document.querySelector("CSS 선택자") CSS 선택자로 태그 선택 CSS 선택자에 해당하는 태그 중 가장 첫번째 태그 하나 document.querySelectorAll("CSS 선택자") CSS ..