08-3. 웹 요소의 태그 속성 가져와서 수정하기 지금부터는 접근한 웹 요소의 속성 노드에 접근하는 법을 알아볼 것이다. 선택한 상품의 이미지를 특정 위치에 표시하는 법을 실습하며 진행한다. getAttribute(), setAttribute() 이 두 함수는 HTML 태그의 속성을 가져오거나 수정하는 함수이다. 위에서 말한 기능을 구현하기 위해서는 - 1) 작은 이미지의 src 속성에 접근해 그 값 알아내기 (querySelector, getAttribute) 2) 큰 이미지의 src 속성을 알아낸 값으로 변경하기 (getAttribute, setAttribute) 두 가지를 수행하면 된다. 우선 이미지의 HTML 코드를 살펴보자. 여기에는 id값이나 class가 없기 때문에, img 태그를 이용해 접..

08-1. 문서 객체 모델이란? DOM은 앞서 6장에서 객체를 다루며 설명한 적이 있다. (6장 링크) DOM (문서 객체 모델, Document Object Model) 은 자바스크립트를 이용해 웹 문서를 제어하기 위해 사용되는 내장 객체를 말한다. 문서 객체 모델의 정의 DOM은 Document Object Mode의 준말로 돔이라고 읽는다. 문서 객체 모델을 DOM이라고 표기한다. DOM이란? 웹 문서의 모든 요소를 자바스크립트를 이용해 제어할 수 있도록 객체를 사용해 문서를 해석하는 방법 EX) 웹 문서의 텍스트, 이미지, 표 등은 모두 문서 객체 모델에 해당한다. 이게 무슨 말일까? DOM을 이용하지 않고 상세 설명 가리기 상품 정보 원산지 : 에디오피아 지 역 : 이르가체프 코체레 농 장 : ..

07-3. 여행 준비물 점검 프로그램 만들기 지금까지 Array 객체와 그 대표적인 함수들의 기능에 대해 알아보았다. 이제 이를 활용하여 여행 준비물 점검 프로그램을 만들어 보자. 1. 필요한 기능, 실행 순서 설정하기 준비물을 추가하고 지울 수 있는 프로그램 작성 2. 만드는 과정 미리 생각해 보기 - 배열 만들기: 준비물이 들어가 있는 배열을 만든다. (저장되어 있는 공간) - 챙길 물건 배열에 추가하기: 원하는 위치에 추가하기 위해서 push() 함수를 사용한다. - 추가한 내용 화면에 표시하기: for문을 이용해야 할 것이다. - 챙긴 물건 배열에서 삭제하기: 특정 위치의 목록을 삭제하기 위해서 splice() 함수를 사용한다. 3. 입력 필드 만들기 여행 준비물 점검 목록 추가 먼저 이런 식으로..

여러 개의 항목을 하나의 변수에 저장해야 할 때 -> 배열 (array) 를 사용한다. 07-1. 객체란? Array 객체로 배열 만들기 - 리터럴 표기법으로 객체 만들기 / 객체의 인스턴스를 이용해 배열 만들기 2가지 방법이 있다. - 전자는 3장에서 다루었으므로, 후자에 대해서 서술한다. Array(); 객체가 만들어져 있으므로 그냥 인스턴스를 선언하면 된다. 예약어는 마찬가지로 new 사용 > var myArray = new Array(); 배열의 크기 지정 시 괄호 안에 숫자 쓰기 숫자 쓰지 않을 경우, 얼마든지 많은 자료 표기 가능 -초기값이 있을 경우 > var numbers = ["one", "two", "three", "four"]; // 리터럴 표기법 > var numbers = new ..

06-1. 객체란? 객체 (object) 란, 자바스크립트 자료형의 일종으로, 여러 변수와 함수 등 여러 가지 자료형을 묶은 하나의 자료형 ("복합 자료형") 자바스크립트는 객체 기반 언어이므로, 객체는 자바스크립트에서 자료를 처리하고 저장하는 기본 단위가 된다. 객체 간단히 살펴보기 var book = { title : "자바스크립트", // 자료형 : string author : "홍길동", pages : 500, price : 1500, .... }; // :와 ,으로 객체의 변수를 구분한다. 이렇게 한 개의 변수 안에 여러 가지 변수와 함수를 묶어서 저장한다. 선언방식에는 두가지가 있다. (06-2에서 다룸) ex) 회원가입 -> 회원의 정보를 "회원" 객체에 여러가지 정보를 묶어 저장하는 방식으..