DOM과 CRUD CREATE document.createElement createElement 메서드는 요소를 만들어 준다. document.createElement('div') //요소를 만든다 자바스크립트로 DOM 을 조작하려면 변수에 담아야 한다. const tweetDiv = document.createElement('div') // tweetDiv 라는 변수에 요소를 할당한다. APPEND document.target.append(변수) append 메서드는 요소가 할당된 변수를 타겟에 넣어준다. document.body.append(tweetDiv) READ querySelector querySelector 에 '.target 을 첫 번째 인자로 넣으면, 클래스 이름이 target 인 HTM..

spread 문법 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용합니다. function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; sum(numbers) //배열은 매개변수의 전달인자로 사용 할 수 없다. //'1,2,3undefinedundefined function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; sum(...numbers)// 배열을 풀어서 전달인자로 넣어준다 //'6' rest 문법 파라미터를 배열의 형태로 받아서 사용할 수 있습니다. 파라미터 개수가 가변적일 때 유용합니다. function sum(...theArg..

스코프(scope) 함수가 실행될때, 함수 내에서 변수에 대한 접근이 어떻게 되든지를 나타내는 용어이다. (함수의 실행 컨텍스트 내에서의 변수 환경이 무엇인지) 스코프는 함수를 기반으로 한 용어이다. 컨텍스트(context) this 키워드 값이 무엇인지를 나타내는 용어이다. 현재 실행 컨텍스트 내에서 어떤 객체를 참조하고 있는지를 의마한다. 컨텍스트는 객체를 기반으로 한 용어이다. 함수스코프 자바스크립트는 기본적으로 함수 스코프를 따르는 언어 함수스코프를 따른다? => 새로운 함수가 생성될때마다 새로운 스코프가 발생한다. - 함수 몸체에 선언한 변수는 해당 함수 안에서만 접근할 수 있음 함수스코프 -> 지역스코프 if(5 > 4) { var secret = '12345'; } secret // '123..

원시타입 자료형 (primitive type data) 원시타입 데이터의 종류에는 아래와 같은 주로 사용되는 5가지 타입이 있다. 5 //number '문자열'//String true // boolean null // (null) undifined // undifined 원시타입 자료형의 특징에는 아래와 같이 원본을 보존한다는 특징이있다. let a = 3 b = a b = 5 console.log(a) // 3 변수 b에 변수 a의 '값'을 할당해줘서 b의값은 3, 이 후 변수 b에 값 5를 재할당 하면서 b의 값은 5가됐지만 원시자료형인 number는 원본이 보존되어 a = 3 으로 영향이없다. 원시타입 자료형은 값이 같은지만 판단하기 때문에 값이 같다면 true를 반환한다. let a = 'coco..

자바스크립트 배열 메소드 arr = Array(51).fill().map((_, i) => i) = 0에서 50까지 배열을 만들어줘라! arr.length 배열의 길이를 반환해준다. let arr = [감자, 고구마, 호박] arr.length // 3 arr.push () 배열의 맨 뒤에 targrt요소를 넣어준다. let arr = ['감자', '고구마', '호박'] arr.push('애호박') // arr 배열의 맨 뒤에 '애호박'요소를 넣어줌/ return arr arr = ['감자', '고구마', '호박', '애호박'] // 맨뒤에 애호박 요소가 추가됨 arr.pop() 배열의 맨 뒤에 요소를 삭제한다. let arr = ['감자', '고구마', '호박', '애호박'] arr.pop() // 배..

기본 셀렉터 전체 셀렉터 전체 셀렉터는 문서의 모든 요소를 선택합니다. 1 * { } 태그 셀렉터 태그 셀렉터는 같은 태그명을 가진 모든 요소를 선택합니다. 복수로도 선택할 수 있습니다. 1 2 3 4 h1 { } div { } section, h1 { } ID 셀렉터 ID 셀렉터는 #id로 입력하여 선택합니다. 1 #only { } class 셀렉터 class 셀렉터는 .class로 입력하여 선택합니다. 같은 class를 가진 모든 요소를 선택합니다. 1 2 .widget { } .center { } attribute 셀렉터 attribute 셀렉터는 같은 속성을 가진 요소를 선택합니다. (모두 암기하실 필요는 없습니다.) 1 2 3 4 5 6 7 a[href] { } p[id="only"] { } p..