본문 바로가기

Frontend22

문서 객체 모델 ① 문서 객체 조작 HTML 페이지에 있는 html, head, body, title, h1, div, span 등을 HTML에서는 요소, JavaScript에서는 문서 객체라고 부른다.즉 문서 객체를 조작한다는 것은 h1, div, span과 같은 HTML 요소를 조작한다는 의미로, 문서 객체를 조합하여 만든 전체적인 형태를 문서 객체 모델이라고 한다.* * 문서 객체 모델의 넓은 의미는 웹 브라우저가 HTML 문서를 인식하는 방식, 문서 객체 모델의 좁은 의미는 문서 객체의 집합으로, 간단히 이해하면 HTML 문서가 곧 문서 객체 모델인 것 같다. DOMContentLoaded 이벤트 DOMContentLoaded 이벤트는 웹 브라우저가 문서 객체를 모두 읽어들인 뒤 발생하는 이벤트로,문서 객체를 조작할 때는 DOMCo.. 2024. 10. 2.
객체 ③ 객체와 배열 고급 이번 글에서는 앞서 배운 객체 개념을 바탕으로 보다 심화된 내용을 알아보자. 속성 존재 여부 확인하기객체.키로 객체 내 특정 속성 값에 접근할 수 있는데,이때 해당 속성 자체가 존재하지 않으면 undefined를 반환한다. 이를 이용해 객체 내 특정 속성의 존재 여부를 확인할 수 있다.const book = {  name: '혼자 공부하는 자바스크립트',  author: '윤인성',  publisher: '한빛미디어'}if (book.name !== undefined) {  console.log('name 속성이 있습니다.')} else {  console.log('name 속성이 없습니다.')}if (book.price !== undefined) {  console.log('price 속성이 있습니다... 2024. 9. 30.
객체 ② 기본 자료형과 객체 자료형 기본 자료형과 객체 자료형 앞서 자료와 변수 ① 기본 자료형에서는 기본 자료형에 대해, 객체 ① 객체 기본에서는 객체 자료형에 대해 알아보았다. JavaScript에서의 자료는 기본 자료형과 객체 자료형으로 구분할 수 있는데 기본 자료형으로는 숫자, 문자열, 불이 있고 이 셋을 제외한 나머지는 전부 객체 자료형에 해당된다. 이때 객체는 키와 값으로 구성된 속성을 가지는 자료형으로, 특히 함수 자료형을 가지는 속성은 메소드라고 부른다. 앞서 배운 배열, 함수 또한 객체 자료형으로, 속성과 메소드를 가질 수 있다.> const a = []undefined> a.sample = 1010> a.sample10> typeof(a)"object"> function b () {}undefined> b.sample =.. 2024. 9. 27.
객체 ① 객체 기본 앞서 반복문 ① 배열에서 배열이란 여러 변수를 한꺼번에 모아 사용하는 자료형이라고 했다. 이때 typeof 연산자를 이용해 배열의 자료형을 확인해보면 object, 즉 객체 자료형이 나온다. 즉 배열은 객체의 한 종류라는 것인데, 과연 객체란 무엇일까? 객체 객체는 키와 값으로 구성된 속성을 가지는 자료형으로, 중괄호를 사용해 생성하고 내부의 값을 쉼표로 구분한다. 이때 이 내부의 값을 속성이라 하고, 하나의 객체는 다양한 자료형의 속성을 가질 수 있다. 다음은 객체의 예시이다.const book = { name: '혼자 공부하는 자바스크립트', author: '윤인성', publisher: '한빛미디어'} 속성 속성은 객체 내부의 값으로, 키와 값으로 구성된다. 속성 값에 접근하기 객체 내 속성 .. 2024. 9. 22.
함수 ② 함수 고급 콜백 함수 JavaScript에서는 함수도 하나의 자료형이므로 매개변수로 전달할 수 있고, 이렇게 매개변수로 전달되는 함수를 콜백 함수라고 한다. 0번째 함수 호출1번째 함수 호출2번째 함수 호출 함수를 매개변수로 가지는, 즉 콜백 함수를 사용하는 주요 메소드로는 forEach(), map(), filter()가 있다. forEach(), map(), filter() 모두 배열이 가지고 있는 메소드로, 다음과 같은 형태로 사용된다.배열.메소드(function (value, index, array) {}) 즉 콜백 함수는 function (value, index, array) {}와 같은 형태를 가지는데, 이때 value, index, array 중 필요한 매개변수만 선택적으로 순서에 맞춰 입력하면 되고 .. 2024. 9. 22.
함수 ① 함수 기본 익명 함수 함수는 코드의 집합을 나타내는 자료형으로, 함수의 기본 형태는 이름이 없는 함수인 익명 함수이다.function () {} 함수가 실행되었습니다.f () { console.log('함수가 실행되었습니다.')}더보기나는 위 예제 코드가 뭔가 어색하게 느껴졌었는데, 함수도 하나의 자료형임을 떠올려보면 함수 자료형의 변수를 선언한 것일 뿐이니 이상할 거 없는 코드이다. 선언적 함수 하지만 일반적으로는 이름이 있는 함수를 많이 사용하는데, 이를 선언적 함수라고 한다.function 함수명 () {} 위 코드는 익명 함수를 다음과 같이 사용한 경우와 동일하다.let 함수명 = function () {} 함수가 실행되었습니다.f func () { console.log('함수가 실행되었습니다.')} 익.. 2024. 9. 17.

티스토리툴바