웹 (26) 썸네일형 리스트형 JavaScript 이벤트 설정 모든 문서 객체는 생성되거나 클릭되거나 마우스를 위에 올리거나 할 때 이벤트라는 것이 발생한다. 그리고 이 이벤트가 발생할 때 실행할 함수를 addEventListener() 메소드를 통해 지정할 수 있다. 문서객체.addEventListener(이벤트 이름, 콜백 함수- 이벤트 리스너 또는 이벤트 핸들러라고 부름) *이벤트 제거 문서객체.removeEventListener(이벤트이름, 이벤트리스너) JavaScript 문서 객체 조작 자바스크립트에서는 html 요소들을 문서객체라 부른다. 1. DOMContentLoaded 이벤트 바디 태그가 생성되기 전인 head 태그 에서 바디 태그에 무언가를 출력하려고 하면 문제가 생긴다. DOMContentLoaded 이벤트는 웹 브라우저가 문서 객체를 모두 읽고나서 실행하는 이벤트다. 다음과 같이 코드를 구성하면 DOMContentLoaded 상태가 되었을 때(문서 객체를 다 읽었을 때) 콜백 함수를 호출한다. document.body.innerHTML 코드는 문서(document)의 바디(body) 안에 있는 HTML 코드를 자바스크립트로 조작할 수 있게 해주는 코드다. document.addEventListener('DOMContentLoaded', () => {})는 앞으로 나오는 대부.. JavaScript 객체와 배열 고급 - 얕은 복사, 깊은 복사 1. 얕은 복사. 1-1. - 배열은 복사해도 다른 이름이 붙을 뿐이다. 1-2. 객체 얕은 복사. 2. 깊은 복사 2.1. 배열 얕은 복사 - 복사한 두 배열이 완전히 독립적으로 작동하게 함 - 과거에는 반복문을 사용했으나, 지금은 전개연산자를 사용해 쉽게 깊은 복사가 가능하다. [...배열] 2-2. 객체 얕은 복사. 다음과 같이 '구름'이라는 객체에 변경하고 싶은 속성만 넣어서 추가로 입력한다면 다음과 같다. 객체 전개는 순서가 중요하다. 전개를 뒤에서 하면 앞에 적어놓은 속성값을 뒤에 전개된 속성값들이 덮어쓸 수 있다. JavaScript. 외부 script 파일 읽어들이기. Lodash 프로그램의 규모가 커지면 파일을 분리해야 한다. 1. 별도의 자바스크립트 파일 만들기. 외부 자바스크립트 파일을 읽어들일 때도 script 태그를 이용한다. 그리고 src 속성에 읽어들일 파일의 경로를 입력하면 된다. 이렇게 외부 자바스크립트 파일을 불러오면 해당 파일의 메소드, 변수 모두 사용 가능하다. 2. 외부 라이브러리 내가 만든 외부 자바스크립트 파일을 읽어들일 수도 있지만, 다른 사람이 만든 외부 자바스크립트 파일을 사용할 수도 있다. 다른 사람들이 만든 다양한 함수와 클래스를 묶어서 제공해주는 것을 외부 라이브러리라고 부른다. 2-1. 유틸리티 라이브러리 개발할 때 보조적으로 사용하는 함수들을 제공해주는 라이브러리. underscore, Lodash 등 다양한데, 요즘 많이 사용되는 것은 L.. 기본 자료형 객체 활용 1. Number 객체 1-1. 숫자 N번째 자릿수까지 출력하기: toFixed() 1-2. isNan(), isFinite() 2. String 객체 2-1. 문자열 양쪽 끝의 공백 없애기: trim() - 파이썬의 strip()과 같음. 2-2. 문자열을 특정 기호로 자르기: split() 이외에도 length 속성, indexOf() 메소드 등. 더 많은 메소드는 모질라 문서 참고: url: developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String javascript 객체의 속성과 메소드, 프로토타입 prototype 자바스크립트에서 사용하는 자료는 크게 기본 자료형(primitives)과 객체 자료형(object)로 구분할 수 있다. 1. 객체 자료형. 속성과 메소드를 가질 수 있는 모든 것은 객체다. 예를 들면 배열도 객체다. 배열의 타입은 객체다. 배열인지 확인하려면 Array.isArray() 메소드를 사용한다. 함수는 실행이 가능한 객체라는 특이한 자료로 function 타입을 지닌다. 함수는 객체의 특성을 완벽히 가지고 있으므로 일급 객체(first-class object)라고 부르기도 한다. 2. 기본 자료형 자바스크립트에서는 실체가 있는 것(undefined와 null이 아닌 것) 중에 객체가 아닌 것을 기본 자료형이라 부른다. 숫자, 문자열, bool이 바로 기본 자료형이다. 이들은 객체가 아니므로 속.. javascript 객체 객체는 배열과 매우 유사하다. 다른 점이 있다면 배열은 요소에 접근할 때 인덱스를 사용하지만, 객체는 키(key)를 사용한다. - 파이썬의 딕셔너리와 유사. 객체는 중괄호{}로 생성하며 쉼표를 통해 연결한다. const product = { 제품명: '망고', 유형: '당절임', 성분: '망고, 설탕, 치자황색소', 원산지: '필리핀' } 요소 접근법 1. 키 사용 - product['제품명'] -> '망고' 2. 온점 사용 - product.제품명 -> '망고' 위와 같이 객체 안에 함수를 선언할 수 있다. this 키워드는 클래스 자신이 가진 속성이라는 것을 표시하는 기능이 있다. 객체 선언 후에도 속성을 추가할 수 있다. - 동적 객체 속성 추가 여기서 JSON.stringify(val, repla.. 자바스크립트 javascript 타이머 함수, 비동기 + 즉시 호출 함수 setTimeout(함수, 시간) = 특정 시간 후에 함수를 한 번 호출. setInterval(함수, 시간) = 특정 시간마다 함수를 호출. 타이머 종료 함수 clearTimeout(타이머 id) = setTimeout()으로 설정한 타이머를 제거 clearInterval(타이머id) = setInterval()로 설정한 타이머 제거 타이머id는 setTimeout()과 setInterval() 함수를 호출할 대 리턴값으로 나오는 숫자. id 값을 매개변수로 넣어줘야만 clearInterval()이 작동한다. (function () { })() - 다른 자바스크립트 파일의 변수들과 충돌이 일어나는 것을 막기 위해 함수 블록을 만들 때 사용. 이전 1 2 3 4 다음
