Javascript

1. 자바스크립트의 데이터 타입 자바스크립트에는 8가지 데이터 타입이 있다. number string boolean undefined null object symbol bigint 2. Truthy 값과 Falsy 값 false 처럼 평가되는 값을 falsy 값, true 처럼 평가되는 값을 truthy 값이라고 부른다. falsy값에는 false, null, undefined, 0, NaN, ''(빈 문자열)이 있고, falsy값을 제외한 값들은 모두 truthy값이 된다. 이 때 주의할 점은 비어있는 배열과 객체( [], {})는 truthy 값이라는 점이다. // falsy Boolean(false); Boolean(null); Boolean(undefined); Boolean(0); Boolean..

1. 이벤트 핸들러 등록하기 1) 프로퍼티 사용하기 onclick 프로퍼티는 새로운 값을 할당하면, 기존의 값을 덮어쓰기에 기존 값을 유지하면서 추가적으로 핸들러를 추가하기 어려움 뿐만 아니라 핸들러에 리턴값이 존재할 때 관리하기 어려우며 여러 개의 핸들러를 다루기도 어려움 따라서 addEventListener를 사용하는 게 권장됨 2) addEventListener 첫 파라미터로 이벤트 타입을 문자열로, 두 번째 파라미터로 이벤트 핸들러를 전달하면된다. // 이벤트 등록하기 let btn = document.querySelector('#myBtn'); function event1() { console.log('Hi Codeit!'); } function event2() { console.log('Hi ..

1. window 객체 window 객체는 브라우저 창을 의미하며 자바스크립트에서 최상단에 존재하는 객체이다. console.log(window)를 하면 수 많은 프로퍼티들이 출력된다. 예) console, document 자바스크립트 코드 어느 곳에서나 항상 접근할 수 있는 객체이기 때문에 전역 객체, 영어로는 Global Object라고 부른다. 어떤 프로퍼티나 메소드를 사용하든 결국 전역 객체 내부의 것이기 때문에 앞에 window.을 생략할 수도 있다. (원칙적으로는 window.console.log("hello")이다.) 2. DOM 1) DOM의 의미 window 객체의 프로퍼티 중 하나 Document Object Model의 줄임말이며 (웹)문서 객체 모델이라고 해석된다. 웹 페이지에 나타..

window 객체에 존재하는 document 프로퍼티를 이용해서 태그를 선택해보자 0 - + 1. document.getElementById('id 이름') 여기서 myBtn이라는 id를 선택하려면 document.getElementById('myBtn'); id는 같은 파일의 코드에서 한 번만 사용 가능하기에 파라미터에 넣은 값과 동일한 id를 갖는 태그가 리턴되며 존재하지 않는 id를 찾을 경우, null이 리턴된다. 2. document.getElementsByClassName('class 이름') 여기서 red라는 클래스를 가진 태그를 선택하려면 document.getElementsByClassName('red'); class에 해당하는 태그 모음이 HTMLCollection이라는 유사배열로 리턴..

1. 객체의 property 삭제 let ewha = { name : '이화여자대학교', bornYear : 1886, isVeryNice : true, worstThing : null, slogan : { Korean :'Where changes begin', English : '변화가 시작되는 곳' } } delete 키워드 사용 delete ewha.isVeryNice console.log(ewha); // 결과값 let ewha = { name : '이화여자대학교', bornYear : 1886, isVeryNice : true, slogan : { Korean :'Where changes begin', English : '변화가 시작되는 곳' } } 2. 배열의 요소 삭제 let melody =..

1. toFixed 소수를 다룰 때 사용 파라미터로 숫자값을 전달해주면, 그만큼 소수점 아래의 자릿수를 고정해줌 let myNumber = 0.3591; // 범위는 0 ~ 100까지 console.log(myNumber.toFixed(3)) console.log(myNumber.toFixed(7)) // 결과 0.359 0.3591000 파라미터로 실제 자릿수(이 예시에서는 4)보다 적은 숫자(3)를 전달하면, (넷째 자릿수에서)반올림해서 그 자릿수(3)까지 나타내준다. 여기서 유의할 점! 결과값이 문자열이다. let myNumber = 0.3591; // 범위는 0 ~ 100까지 console.log(typeof myNumber.toFixed(7)) console.log(typeof Number(my..

1. 객체의 for..in 반복문 for (변수 in 객체){ 동작부분 } 이런 식으로 작성하면 변수에 객체의 Property Name이 할당된다. for (let i in ewha){ console.log(i) } for (let i in ewha){ console.log(ewha[i]) } // 결과값 name bornYear isVeryNice worstThing 이화여자대학교 1886 true null 대괄호 표기법을 이용해서 위처럼 Property Value에도 접근할 수 있다. 2. 배열의 for..of 반복문 사실 굳이 for..of 반복문을 사용하지 않아도, 배열의 length property를 이용해서 배열의 각 요소를 다룰 수 있다. 하지만 for..of를 사용하면 더욱 간단하게 활용할..

대부분의 프로그래밍 언어에서는 서로 다른 자료형의 연산을 오류라고 처리한다. 하지만 자바스크립트에서는 일정한 규칙으로 자동 형변환이 일어나 연산이 되기도 한다. 이를 제대로 이해하지 못하면 우리가 원하지 않은 형태로 연산이 되어버릴 수도 있다. 그렇다면 그 일정한 규칙이 무엇일까? 연산자 별로 나누어 살펴보자. 1. 산술 연산자 console.log(4 + '2'); console.log(4 + 2); console.log(4 - true); console.log(4 * false); console.log(4 / '2'); console.log('4' ** true); console.log(4 % 'two'); 42 6 3 0 2 4 NaN 산술연산자에서는 연산되어지는 값을 모두 숫자형으로 변환한 다음 ..