Suyeon BLOG

parentElement - 현재 element의 부모 element previousElementSibling - 현재 element의 바로 전 형제 자매 element (형제가 여러 개면 현재 element와 가까이 있는 것이 출력됩니다.) const audio = document.querySelector('.inner__music'); audio.parentElement; //div.inner__text audio.parentElement.previousElementSibling; //div.inner__pic

출처 : Do it! 자바스크립트 입문편 DOM 트리가 만들어지는 과정 실시간으로 확인 https://software.hixie.ch/utilities/js/live-dom-viewer/ Study DOM 공부하기 1. Markup test (웹 문서를 작성할 창) 2. DOM view (DOM 트리를 보여주는 창) 3. Rendered view (결과 화면을 보여주는 창)

const Food = ['tomato', 'potato']; const [FirFavFood, SecFavFood] = Food; //FirFavFood -> 'tomato' //SecFavFood -> 'potato'

출처 : Do it! 자바스크립트 입문편 Array를 사용하는 이유 1. 할 일 목록이나 여행 준비물 목록 검토 등을 하는 프로그램에서 새로운 것을 추가하거나 삭제하는 기능이 필요합니다. 이때 Array 객체 기능을 사용합니다. Array 속성 1. concat() - 둘 이상의 배열을 이어주는 역할을 합니다. - 새로운 함수를 만들기 때문에 원래 함수에는 아무런 영향을 받지 않습니다. 2. join - 배열 요소를 연결해주는데 연결할 때 사용하는 기호를 직접 정할 수 있습니다. - 그리고 String형으로 출력합니다. 3. push 와 unshift - push는 배열 마지막에 값을 넣습니다. - unshift는 배열 첫 번째에 값을 넣습니다. (여러 개를 넣어도 상관없습니다.) 4. pop과 shif..

출처 : Do it! 자바스크립트 입문편 생성자 함수를 사용하는 이유 - 리터럴 표기법으로 만들어진 객체는 값을 변경할 수 없어서 필요할 때마다 계속 만들어야 합니다. - 이것을 해결할 수 있는 것이 '생성자 함수' 입니다. 생성자 함수 만드는 방법 - function 예약어를 사용하고 아래처럼 만듭니다. 인스턴스 만들기 - new 객체 이름(값 넣기) 으로 인스턴스를 만들 수 있습니다.

출처 : Do it! 자바스크립트 입문편 객체 종류 1. 내장 객체 - 자바스크립트에서 자주 사용하는 객체가 미리 만들어져 있는 것을 의미합니다. 2. DOM(문서 객체 모델) - 객체를 사용해서 웹 문서를 관리하는 것을 의미합니다. - 이미지를 담는 Image 객체, 웹 문서를 담는 Document 객체가 있습니다. 3. 브라우저 객체 모델 - 웹 브라우저의 주소 표시줄, 창 크기를 관리합니다. - 사용자의 브라우저 종류나 버전을 담고 있는 Navigator, 브라우저에서 방문한 기록을 담는 History, 주소 표시줄 정보를 담고 있는 Location이 있습니다. 4. 사용자 정의 객체 - 자신이 필요할 때 사용할 수 있도록 직접 정의해서 만드는 객체입니다. (object 같이) - let book ..

출처 : Do it! 자바스크립트 입문편 자바스크립트 함수 1. 익명 함수 - 이름이 없는 함수라서 변수에 할당해서 사용합니다. 2. 즉시 실행 함수 - 함수를 정의함과 동시에 실행하는 함수입니다. - () 안에 함수를 정의한 다음 마지막에 (); 를 붙이면 됩니다. 3. 화살표 함수 - ES6에 추가된 함수입니다. - => 으로 함수를 표현하는데 익명 함수에서만 사용할 수 있습니다.

출처 : Do it! 자바스크립트 입문편 ES6에서 새로 추가된 let, const - 원래는 var로 변수를 예약했는데 ES6에서부턴 let 예약어로 변수를 선언하는 것을 권장하고 있습니다. var과 let, const 차이점 - var은 함수 영역의 스코프를 가졌습니다. - var은 같은 이름의 변수를 여러 번 재선언할 수 있습니다. - var은 호이스팅을 가져서 변수를 선언하지 않아도 사용할 수 있습니다. 그리고 undefined로 초기화 됩니다. - let과 const는 블록 영역의 스코프를 가졌습니다. - let과 const는 같은 이름의 변수를 재선언할 수 없습니다. - let과 const는 호이스팅이 없어서 선언하지 않은 변수를 사용하면 오류가 발생합니다. 따라서 초기화는 되지 않습니다. -..

출처 : Do it! 자바스크립트 입문편 웹 브라우저에서 자바스크립트 코드를 해석할 때, function 예약어가 사용된 함수는 위치가 어디든 이 함수는 제일 먼저 확인합니다. 따라서 아래 코드 둘 다 정상적으로 작동한다는 것을 알 수 있습니다. 그래서 함수 여러 개를 작성할 때 코드의 앞부분 또는 뒷부분에 모아서 작성합니다.

출처 : Do it! 자바스크립트 입문 for문은 무엇인가 - 초기값이 있으면서 일정한 간격으로 반복할 때 주로 사용합니다. - 따라서 0부터 9까지 반복하는 과정을 수행해야 할 때, for문을 사용하는 것이 적합합니다. See the Pen Untitled by OhGod-23 (@ohgod-23) on CodePen. while문은 무엇인가 - 초기값이나 반복값이 없고 조건에 맞으면 계속 반복을 수행합니다. - while문은 조건에 맞으면 실행하거나 안 맞으면 실행하지 않을 때 사용하고 - do-while문은 조건에 맞지 않더라도 한 번은 꼭 실행되야 할 때 사용합니다. See the Pen Untitled by OhGod-23 (@ohgod-23) on CodePen.