비전공자 개발일기

NaN(Not a Number) 전역 객체의 속성(전역 스코프의 변수) 초기값은 Not-A-Number로, Number.NaN과 같음 최신 브라우저에서 NaN은 설정 불가, 쓰기 불가 속성 NaN을 반환하는 연산 숫자로서 읽을 수 없는 경우 (parseInt("어쩌구"), Number(undefined)) 결과가 허수인 수학 계산식 (Math.sqrt(-1)) 피연산자가 NaN (7 ** NaN) 정의할 수 없는 계산식 (0 * Infinity) 문자열을 포함하면서 덧셈이 아닌 계산식 ("가" / 3) NaN은 다른 모든 값과 비교(==, !=, ===, !==)했을 때 같지 않으며, 다른 NaN과도 같지 않음(어떠한 연산을 해도 결과 값은 false) 판별: Number.isNaN(value) or i..

HTML CANVAS CANVAS는 웹 페이제 그래픽을 그려주는 컨테이너 CANVAS는 JAVASCRIPT로 그래픽을 그림 strokeRect(x1,y1,x2,y2) 사각형 그리기 fillStyle: 사각형 색 지정 fillRect: 색이 있는 사각형 그리기 strokeRect: 사각형 테두리 그리기 clearRect: 사각형 모양의 지우개 웹 브라우저가 canvas를 지원하지 않습니다(라는 문장만 출력) lineTo 선그리기 moveTo: 선이 시작되는 좌표 lineTo: 선이 끝나는 좌표(연속으로 지정 가능) ex)let c2 = document.getElementById("canvas2").getContext("2d") c2.moveTo(0,0); c2.lineTo(300,100); c2.lineT..

html SVG(Scalable Vector Graphics) xml 형식의 벡터 기반 그래픽을 정의하는 요소 svg는 확장 가능한 웹용 벡터 그래픽을 나타냄 svg는 xml 형식으로 그래픽을 정의 svg는 모든 요소와 속성에 에니메이션 정의 가능 ex) 경과 시간에 따른 스타일이 변화는 것 svg는 W3C(html을 표준화하는 곳)에서 권장하는 태그(요소) SVG 사각형 그리기 rect width: 도형의 너비 height: 도형의 높이 stroke: 테두리 색 stroke-width: 테두리 두께 fill: 도형의 배경색 opacity: 도형의 투명도 x: 사각형의 왼쪽 상단 x좌표 y: 사각형의 왼쪽 상단 y좌표 rx: 사각형 모서리 굴곡의 x축 반지름 ry: 사각형 모서리 굴곡의 y축 반지름 SV..

HTML Iframe(Inline frame) iframe은 다른 웹 페이지를 추가할 수 있음 src: 출력될 url, width: 넓이, height: 높이(모든 요소의 스타일 속성은 동일하게 적용 가능) 출력되지 않을 때.... iframe은 스타일이 적용되고 border 바꿀 수 있음(border: none -> 테두리 없음) iframe name: 은 a 요소의 target으로 지정할 수 있음(_self, _blank, iframeName-iframe으로 이동) target="targetTest" : 이동할 페이지는 L04_html_style.html 이동 target="_self" : 이동할 페이지는 L04_html_style.html 이동 target="_blank" : 이동할 페이지는 L04..

1. 변수 선언 var, let, const 혼용은 절대로 안됨! -> var 만 사용 또는 let, const 만 사용 2. 세미콜론(;) 세미콜론이 있는 코드 + 세미콜론이 없는 코드 혼용 절대로 안됨! -> 모든 코드에 넣기 또는 모든 코드에 넣지 않기 3. 일치 연산자 == 와 === 는 동일한 연산자가 아니기에 예상치 못한 오류가 발생하는 원인 -> === 만 사용 4. 불변성(객체의 원본 보정성) 개발자로서 중요한 사항 = 인자로 들어온 값을 수정하지 않는 것 -> 새 객체에 깊은 복사로 값을 복사 후 사용 5. 삼항연산자 return a? b : c 형태로 깔끔하게 처리할 수 있는 코드일 경우 사용 6. 코딩테스트 공부 주력 언어의 문법 공부 -> 코트업의 기초 100제 -> 백준 온라인 저..

알파벳 선택: 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..