학습/JS 학습 (15) 썸네일형 리스트형 [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.. [JS]자바스크립트 데이터 1. e 지수 표기법 ex) 1e9 1에 10^9를 곱한 값 3e-3 3에 10^3을 나눈 값 2. 16진법 0xff /// 0xFF 8진법 0o377 2진법 0b11111111 3. 자주 사용되는 숫자형 메소드 myNumber.toFixed(소수점자리); (범위 : 0~100) 소수점 자리 밑의 숫자를 반올림한다. 범위 까지의 숫자가 없으면 0으로 채워준다. * 문자열로 반환된 값이다. * 다시 숫자로 만드려면 Number()함수를 사용하거나 앞에 +를 붙여준다. myNumber.toString(진법); 해당 진법으로 바꿔준다. *문자열로 반환된 값이다. myNumber.toString(); 숫자를 문자열로 바꿔준다. 정수에서 바로 사용하는 방법 255..toString(); (255).toSting(.. [JS]배열 간단 요약 1. let 배열명 = [값1, 값2, 값3 ....]; 각 값은 요소(element)라고 부른다. 각 요소에 접근은 인덱스(0부터 시작)로 접근한다. 2. 배열 요소 접근하기 배열명[index]; 3. 배열도 객체다 배열 관련된 프로퍼티와 메소드를 사용할 수 있다. 배열명.length or 배열명['length'] 배열의 크기 배열 요소 추가 배열명[추가할인덱스] = 요소값; * 배열의 최대크기를 뛰어넘어서 추가하면 중간에 빈 요소는 undefined가 된다. 배열 요소 수정 배열명[수정할인덱스] = 수정값; 배열 요소 삭제하기 delete를 사용하면 undefined로 남아있는다. 4. splice메소드 배열명.splice(인덱스); 배열의 인덱스 포함 뒤의 요소를 전부 삭제한다. 배열명.splice.. [JS]객체 간단 요약 1. let 객체 = { 프로퍼티네임(키) : 프로퍼티밸류(값) } 2. 프로퍼티네임은 문자열 속성을 가짐 일반적인 식별자 규칙을 따르며 그 외에는 "" '' 감싸줘야한다. 3.접근 방법 객체.프로퍼티키 객체["2프로-퍼티 키"] or 객체[값이 문자열인 변수] 존재하지않는 프로퍼티에 접근하면 undefined 값이 나온다. 4. 프로퍼티 수정, 추가, 삭제 등등 프로퍼티 수정하기 객체.프로퍼티키 = 수정할값; 프로퍼티 추가하기 객체.새로운프로퍼티키 = 값; 프로퍼티 삭제하기 delete 객체.삭제할프로퍼티키; in 연산자 '프로퍼티키' in 객체 해당 프로퍼티의 객체 내 존재 여부를 boolean 값으로 리턴 5. 객체와 메소드 프로퍼티 값으로 함수를 정의할 때 메소드라고 부른다. 메소드키 : func.. [JS]JS 학습 기본 - 1 1. typeof 연산자 typeof 값 값의 자료형을 평가해서 문자열로 반환함 console.log(typeof 8 - 3); 위의 코드의 경우 8-3의 값이 5니까 5의 자료형인 Number가 출력될 것 같지만, typeof의 연산자의 우선순위가 높아 Number - 3 의 결과값인 NaN이 나오게된다. 우선순위를 주의해야한다. 2. true, false >>> 숫자로 형변환시 1, 0 으로 형변환된다. 0, NaN, '', null, undefined Boolean으로 형 변환시 false가 나온다. fasly라고 부른다. 3. +는 문자형 우선, 나머지는 숫자형 우선 연산을 한다. ex) console.log( 4 + '4'); >>> 문자열 44 가 출력된다. console.log('4' / 2.. 이전 1 2 다음