함수의 모든 파라미터들을 전부 한꺼번에 싸잡아서 다루고 싶을 때 쓸 수 있는 arguments라는 키워드가 있습니다. function 함수(a,b,c){ console.log(arguments) } 함수(1,2,3); 이렇게 하면 콘솔창에 [1,2,3]가 출력됩니다. 응용하자면, function 함수(a,b,c){ console.log(arguments[0]) console.log(arguments[1]) console.log(arguments[2]) } 함수(2,3,4); function 함수(a,b,c){ for (var i = 0; i < arguments.length; i++){ console.log(arguments[i]) } } 함수(2,3,4); 위 두 코드의 결과가 같게 나옵니다.
1. 그냥 쓰거나 함수 안에서 쓰면 this는 window를 뜻합니다. function 함수(){ console.log(this) } 함수(); this의 값은 window로 출력됨. (window는 모든 전역변수, 함수, DOM을 보관하고 관리하는 전역객체) 2. 메소드 안에서 쓰면 this는 메소드를 가지고 있는 오브젝트를 뜻합니다. var 오브젝트1 = { data : 'Kim', 함수 : function(){ console.log(this) } } 오브젝트1.함수(); this의 값은 메소드를 가지고 있는 오브젝트1을 뜻합니다. 3. constructor 안에서 쓰면 constructor로 새로생성되는 오브젝트를 뜻합니다. function box(){ this.이름 = 'Kim' } var 오브젝..
Document Object Model : DOM Javascript는 HTML 조작에 특화된 언어입니다. 그런데 HTML과 Javascript는 다른 언어입니다. 그래서 Javascript에선 html을 직접 해석하고 조작할 수 없습니다. Javascript가 HTML 조작을 하기 위해선 HTML을 Javascript가 해석할 수 있는 문법으로 변환해놓면 됩니다. HTML을 Javascript가 좋아하는 array 혹은 object 자료형에 담아버리는게 좋지 않을까요? 그래서 실제로 브라우저는 HTML 페이지를 열어줄 때 HTML을 Javascript로 쉽게 찾고 바꾸기 위해 object와 비슷한 자료형에 담아줍니다. 예를 들어, 안녕하세요 브라우저는 이런 HTML을 발견하면 object 자료로 바꿔서..
array 자료는 순서개념이 있다보니 정렬도 가능합니다. 그냥 문자 가나다순으로 정렬하려면 .sort() 붙이면 됩니다. 어레이.sort(function(a, b){ return a - b }); 1. a, b는 array 안의 자료들입니다. 2. return 오른쪽이 양수면 a를 오른쪽으로 정렬해줍니다. 3. return 오른쪽이 음수면 b를 오른쪽으로 정렬해줍니다. 4. 그리고 array 안의 자료들을 계속 뽑아서 a, b에 넣어줍니다. 이렇게 동작해서 a - b 저렇게 쓰면 숫자순 정렬이 되는 것입니다. 예를 들면 a, b가 7과 3일 경우 7 - 3 하면 4가 남습니다. 4는 양수죠? 그러면 7을 3보다 오른쪽으로 보내줍니다. 그래서 숫자 오름차순 (123순) 정렬이 완성되는 것입니다. 그럼 ar..
array 자료 뒤에 붙일 수 있는 forEach() 라는 반복문 기본함수가 있다. var pants = [28, 30, 32]; pants.forEach(function(){ console.log('안녕') }); 예를 들어, 위와 같이 이렇게 쓰면 pants 안의 데이터 갯수만큼 forEach 콜백함수 안에 있는 코드가 실행된다. 총 3번 실행 되는 것이다. 그래서 array 자료 다룰 때 for 반복문 쓰기 귀찮으면 forEach 뒤에 붙여도 된다. forEach 안에 넣는 콜백함수 var pants = [28, 30, 32]; pants.forEach(function(a, i){ console.log(a) }); 콜백함수 안에 파라미터 2개까지 작명이 가능한데 첫 파라미터는 반복문 돌 때 마다 a..
console.log(1 + '2'); // '12'출력됨 자바스크립트에서 덧셈기호 쓰면 문자이어붙이기가 쉽게 가능하다. 숫자 + 숫자는 숫자 덧셈해주는데 문자 + 숫자처럼 적어도 1개가 문자면 문자 덧셈을 해준다. 문자덧셈은 그냥 문자2개 이어붙여줌. var a = '안녕'; console.log('문자' + a + '문자'); // '문자안녕문자'출력됨 그래서 문자 중간에 변수를 넣고 싶다면 덧셈기호를 이렇게 활용하면 된다. 이것말고 한가지 방법이 더 있는데, var a = '안녕'; console.log(`문자 ${a} 문자`); // '문자안녕문자'출력됨 백틱기호 ``를 쓰면 1. 문자 중간에 엔터키 칠 수 있음 2. 중간에 ${ 변수명 } 문법을 이용가능함 ${ } 이건 문자안에 변수넣어주는 간..
어떤 HTML 태그에 이벤트가 발생하면 그의 모든 상위요소까지 이벤트가 실행되는 현상을 이벤트 버블링이라고 한다. click이라는 이벤트로 예를 들어보면, HTML 태그에 클릭이 발생하면 그의 모든 상위요소까지 자동으로 클릭된다는 말이다. document.querySelector('.black-bg').addEventListener('click', function(e){ e.target; e.currentTarget; e.preventDefault(); e.stopPropagation(); }) e.target : 실제 클릭한 요소 알려줌 (이벤트 발생한 곳) e.currentTarget : 지금 이벤트리스너가 달린 곳 알려줌 (참고로 this라고 써도 똑같음) e.preventDefault() : 실행..
- var 변수는 유연해서 재선언 재할당이 자유롭다. - let, const는 재선언이 불가능하다. -> 장점 : 코드가 길어지다보면 변수 만든것을 또 만드는 실수를 할때가 있다. 그걸 미연에 방지해준다. - const의 특징 : 값을 수정하면 큰일나는 변수들을 만들고 싶을 때 쓴다. - let, const는 중괄호가 범위이다. 중괄호 밖으로 나가면 작동하지 않는다.
(코딩한 내용 중 일부) .stage를 가진 stageElem를 선언하고, 클릭했을 때 doorHandler라는 event를 발생. doorHandler event가 발생되면 타켓이 되는 targetElem 변수를 선언. 하지만 if문을 사용해서 이 event는 door-body 클래스를 가졌을 경우에만 작동하게 함. door-body를 가졌을 때 클릭한 것의 parentNode(부모 요소)에 door-opened 클래스가 추가되게 함
전역변수를 줄이는게 좋은 이유 = 협업을 할 경우 전역변수를 너도 나도 막 쓰다가 나중에 합치게 되면 겹치거나 하는 혼란이 올 수 있어서 줄일 수 있으면 줄이는게 좋다. body 태그 안에 있을시, 통째로 괄호로 감싸주고 바로 뒤에 ()로 호출해주면 전역변수가 아닌 상태로 쓸 수 있다. head 태그 안에 썼을 경우 window.addEventListener('load', function() { // 여기서 변수 선언 }); 이렇게도 할 수 있다.
