전체 글 (47) 썸네일형 리스트형 [JS] 자바스크립트 작동 원리 간단요약 1. typeof 가 모든 자료형을 리턴하지 않는다. typeof null >>> object를 반환 typeof function >>> object가 아닌 function 반환 2. && 와 ||의 연산방식 && 왼쪽 값이 true일 때, 오른쪽 값을 반환 왼쪽 값이 false일 때, 왼쪽 값을 반환 || 왼쪽 값이 true일 때, 왼쪽 값을 반환 왼쪽 값이 false일 때, 오른쪽 값을 반환 and연산과 or 연산을 같이 할 때는 주의해야한다. &&연산이 || 연산보다 우선순위가 높다. a || b && c 의 연산에서 a와 b의 || 연산을 우선으로 하고 싶다면 (a || b) && c 로 괄호를 사용해야한다. 3. null 병합 연산자 ?? ES2020에서 새롭게 추가된 연산자 null 또는 un.. [JS]ECMAScript와 모던 자바스크립트 1. ECMAScript 자바스크립트 프로그래밍 언어의 표준 JS의 발전? ECMA international 이라는 국제 표준화 기구에서 관리함 JS 규칙 ECMA-262 라는 문서로 관리함 이 내용이 ECMAScript 2015년 ES6 >> 1년마다 버전 업을 하기로 함. ES6의 공식명칭 ES2015 그 이후로 년도 ES6에서 많은 변화를 가져왔다. 웹브라우저가 새로운버전을 바로바로 지원하지 못한다는 문제점이 있다. 2. 모던 자바스크립트란?? 현시점에 사용하기 적합한 범위 내에서 최신 버전의 표준을 준수하는 자바스크립트 [JS] 이벤트 형태 1. 마우스 버튼 이벤트 MouseEvent.button 0: 마우스 왼쪽 버튼 1: 마우스 휠 2: 마우스 오른쪽 버튼 MouseEvent.type click : 마우스 왼쪽 버튼을 눌렀을때 context.menu: 마우스 오른쪽 버튼을 눌렀을 때 dblclick: 동일한 위치에서 빠르게 두번 클릭 mousedown: 마우스 버튼을 누른 순간 mouseup: 마우스 버튼을 눌렀다 뗀 순간 2. 마우스 이동 이벤트 > MouseEvent.type mousemove: 마우스 포인터가 이동할 때 mouseover: 마우스 포인터가 요소 밖에서 안으로 이동할 때 mouseout: 마우스 포인터가 요소 안에서 밖으로 이동할 때 MouseEvent.clientX, clientY : 화면에 표시되는 창 기준 마우스.. [JS]이벤트 핸들러 관련 1. 이벤트 핸들러 등록하기 태그.이벤트핸들러프로퍼티 = function() {}; 프로퍼티에 직접 이벤트핸들링을 하게되면 추가, 수정 등에 제약이 생긴다. myTag.addEventListner('event', handler); 이벤트 핸들러를 등록함 여러번 사용해서 독립적인 이벤트를 추가 가능하다. myTag.removeEventListner('event', handler); 등록한 이벤트를 개별적으로 제거함. * 이벤트를 삭제할 때 등록했던 핸들러를 그대로 전달해야함 * 익명함수로 똑같이 작성해도 다른 함수여서 정상적으로 작동하지 않는다. * 핸들러 부분에 함수명만 적으면된다. 2. 이벤트 객체 이벤트의 상세한 정보를 담고있는 이벤트객체가 자동생성된다 이벤트 핸들러 함수의 첫번째 파라미터는 이벤트 .. [JS] DOM 관련 1. window객체 전역객체 window 객체 안에 console, document 등이 있다. window. 을 전부 생략하고 사용하는 것이다. 2. DOM(Document Object Model) 문서 객체 모델 console.log(document); 문서의 모든 html 내용이 나온다. console.dir(document); 문서의 객체를 확인할 수 있다. const title = document.querySelector('#title'); title.style.color = 'red'; 3. DOM 트리 document 객체를 최상위로 해서 밑으로 DOM 트리가 형성되어있다. 각 객체를 NODE라고 부른다. 부모 노드, 자식 노드, 형제 노드 태그를 표현하는 노드를 요소 노드 문자열을 표현하.. [JS]Html문서의 태그 선택하기 1. id로 태그 선택하기 document.getElementById('아이디'); 해당 아이디의 태그가 선택됨 존재하지 않은 Id를 선택하면 null이 저장된다. 2. class로 태그 선택하기 document.getElementsByClassName('클래스); HTMLCollection이라는 유사배열이 생성된다. 유사배열 : 일반 배열의 메소드가 사용이 안된다. 인덱스 순서는 깊이와 상관없이 코드가 쓰여진 순서대로 생성된다. 클래스가 하나여도 유사배열이 생성되고 클래스가 없어도 비어있는 유사배열이 생성된다. 3. HTMLCollection 유사배열이란? 1. 숫자 형태의 indexing이 가능 2. length 프로퍼티가 존재 3. 배열의 기본 메소드를 사용할 수 없다. 4. Array.isArra.. 6. JavaScript에서 얕은 복사와 깊은 복사 자바스크립트에서 객체는 참조 변수로써 데이터의 주소를 공유하게 된다. 예를 들어, const obj1 = { property1 : '내용', property2 : { innerProperty1 : '내용' } } 라는 객체가 있을 때 const obj2 = obj1; obj2를 위와 같이 할당하였을 때 obj2의 프로퍼티를 수정하게 되면 obj1의 프로퍼티가 같이 수정되게 된다. 위와 같은 상황을 방지하기 위해 객체를 복사할 때 for문을 사용하거나 const obj2 = Object.assign({}, obj1); 와 같은 메소드를 사용해야 한다. 하지만 객체 안에 배열이나 객체가 또 있게 된다면 그 배열과 객체 자체로 공유되기에 얕은 복사가 이루어진다. 내부의 객체나 배열을 복사하기 위한 깊은 복사를.. 5. 자바스크립트 ==과 ===의 차이 ==와 ===는 비교 연산자이다. 예를 들어 console.log(10 == '10'); console.log(10 === '10'); 명령을 실행하면 각 항을 비교하여 true, fasle 불린 값으로 반환하게 되는데 각 코드의 결과는 true false 가 출력될 것이다. == 동등 연산자 == 연산자는 값을 비교할 때 자동으로 형 변환을 수행한다. 위 코드의 경우 10과 '10'은 숫자와 문자열인데 서로 다른 데이터 유형이지만, ==은 값을 비교할 때 자동으로 숫자로 변환하여 비교하기 때문에 true가 나온것이다. === 일치 연산자 === 연산자는 값과 데이터 유형을 비교한다. 위 예문의 경우는 자료형이 다르기 때문에 false가 나온것이다. 엄격한 자료검사를 위해서 === 사용이 권장된다. 이전 1 2 3 4 5 6 다음