전체 글 (117) 썸네일형 리스트형 드롭다운 목록 활용 드롭다운은 기본적으로 select 태그로 구현 JavaScript 글자 입력 양식 이벤트 사용자로부터 어떤한 입력을 받을 때 사용하는 요소를 입력 양식이라고 부른다.(예: input, textarea, button, select) JavaScript 이벤트 발생 객체 이벤트 리스너를 외부로 빼낸 경우, 어떻게 이벤트를 발생시킨 객체에 접근할 수 있을까? event.currentTarget 속성 사용 - 화살표함수와 일반 함수에 모두 적용 가능 this 키워드 사용 - 일반 함수에만 적용 가능 위와 같이 listener 메소드가 분리되면, 메소드 안에서 외부의 이벤트에 접근할 수 없기에 event.currentTarget 코드로 이벤트를 발생시킨 객체에 접근할 수 있게 만든다. 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 이전 1 2 3 4 5 6 7 ··· 15 다음
