[JavaScript] 생활코딩 WEB2 - JavaScript 29~35

객체(object) 예고

 

 

코드가 많아지면 정리정돈 하기 위한 도구 -> 함수

복잡도의 한계에서 서로 연관된 함수와 서로 연관된 변수를 같은이름으로 그룹핑 하는 도구 -> 객체

 

서로 연관된 함수와 변수들을 그룹핑해서 정리정돈하기 위한 수납상자 - 객체 (폴더라는 관점으로 봐도 된다.)

-> body.setBackgroundColor ~ 등으로 만들어주는 걸 보면 body라는 객체가 생기는 것을 확인할 수 있다.

 

=> body(객체).setColor(객체에 속해있는 함수)('color_name');

객체에 속해있는 함수 -> 매소드(method)

 

 

* alist[i].style.color = color; -> ='color';로 적혀있을 시 실행이 안되는 것을 볼 수 있었다. -> 따옴표 확인하기.

 

 

---

 

 

객체 쓰기와 읽기

 

배열 - 순서에 따라서 정보를 정리정돈한다.

객체 - object / 이름이 있는 정리정돈 상자(정보가 순서없이 저장될 수 있는 것)

 

객체의 문법

-> var 변수 = {객체}

egoing이라는 정보에 대한 이름 -> programmer

leezche 라는 정보에 대한 이름 -> designer

 

정보를 꺼내올때는 document.write("programmer :"+coworkers.programmer+"<br>");

 

배열 - 대괄호[] / 객체 - 중괄호{}

data scientist -> 이름에는 공백 사용을 못하기 때문에 ["data scientist"] 대괄호와 큰따옴표(문자)로 감싸준 뒤 쓴다.

 

이미 객체가 만들어진 다음 정보를 추가하고 싶은 경우,

변수.넣고자하는 이름 = "정보";

 

 

객체 생성 - 객체 데이터 가져오는 법 - 객체 데이터 넣는 법

 

 

---

 

 

객채와 반복문

 

 

생성된 객체에 어떤 데이터가 있는지 모조리 다 가져와야하는 경우 -> 배열에서 반복문으로 데이터를 가져와야함

객체에서는 Iterate(순회)로 데이터들을 부를 수 있다. -> for (var key in coworkers){}

-> coworkers라는 변수가 가리키는 객체에 있는 키(key)값들을 가져오는 반복문

 

우리가 가져오고싶은 정보에 도달할 수 있는 열쇠(key)

배열에서는 index라는 표현을 쓴다.

coworkers안에 있는 키값들을 모조리 출력할 수 있다.

배열의 형식을 가져오는데 index안에 키값을 넣어주면 데이터를 가져올 수 있다.

 

 

특정한 데이터를 가져올 때 index가 들어가는 자리에 [key값]을 넣어주면 그 데이터가 출력이 된다.

객체의 모든 데이터를 순회하는 법.

 

 

 

 

---

 

 

객체프로퍼티와 메소드

property / method

 

 

객체는 데이터를 담을 수 있다. -> 함수도 담을 수 있다.

coworkers라는 객체에 method를 추가하고 싶다

(ex.showAll = function(){함수} = function showAll(){}과 똑같다.

객체의 이름이 바뀐다면 데이터를 못 가져오는 현상이 생길 수 있으므로 함수(showAll)가 소속해있는 객체를 가리키는 약자 this를 써줌으로써 객체가 이름이 뭘로 바뀌든 데이터를 추출해낼 수 있다.

 

 

객체에 소속된 변수의 값으로 함수를 지정할 수 있고, 그렇게 되면 객체에 소속된 함수를 만들 수 있다.

객체에 소속된 함수 = 메소드(Method)

객체에 소속된 변수 = 프로퍼티(Property)

 

*if문을 써서 showAll이라는 property를 제거할 수 있다. 그것에 대한 예제↓↓

if(key!=="showAll") { document.write(key+" : "+this[key]); }를 for문 내부에 작성하면 된다고 한다. 댓글 써주신 분 적게 일하고 많이 버시길..:)

 

 

---

 

 

객체의 활용

 

 

Body라는 변수에 {객체}를 담는다. -> 객체의 프로퍼티로 setColor 지정해준 뒤 코드 복붙

 

*객체의 프로퍼티와 프로퍼티를 구분할 때 콤마(,)로 구분시켜줘야 한다.

var Links = {객체}를 옮겨준다.

 

 

---

 

 

파일로 쪼개서 정리 정돈하기

 

 

 

서로 연관된 코드들을 파일로 묶어서 그룹핑 -> 웹페이지가 아무리 많아도 다 감당할 수 있다.

 

 

 

 

input태그를 먼저 각 페이지마다 적어준다.->

color.js파일을 만들어서 script내에 있는 코드들을 복붙해주고, 기존 페이지상에서는 <script srs="color.js"></script>로 color.js파일을 열수 있도록 적어준다.

 

접속은 적을 수록 좋다.

cache(캐시) - 저장한다.

한 번 웹브라우저에 다운이 된 파일은 보통 컴퓨터가 저장해놓기 때문에 다음접속시 저장된 파일을 읽어서 네트워크를 통하지 않게 되며,

트래픽 절감과 함께 더 빠르게 페이지를 로딩할 수 있다.

 

 

 

---

 

 

라이브러리와 프레임워크

 

 

생산자로써

library -> 내가 만들고자 하는 프로그램에 필요한 부품들이 되는 소프트웨어들이 재사용하기 쉽게 되어있는 소프트웨어

framework -> 만들고자 하는 것이 있을 때 그것이 무엇이냐에 따라(웹, 게임, 채팅 등) 그것을 만들려고 할때 기능에 따라 달라지는 부분들만 살짝씩 수정하는 것을 통해 우리가 만들고자하는 것을 처음부터 끝까지 만들지 않아도 됨.(완제품같은 느낌)

 

 

*library와 framework를 이해하기 쉬웠던 댓글을 통해 이해하기 쉬웠다.

 

 

 

 

 

CDN (Content Delivery Network)를 통해 자기들의 서버에 파일을 보관해놓고, <script src="">를 통해 가져갈 수 있다.

 

 

 

 

 

<script src="colors.js"></script>전에 jQuery 코드를 복사해서 붙여넣어준다.

 

 

 

 

 

$('a') => 이 웹페이지에 있는 모든 a태그를 jQuery로 제어하겠다라는 뜻.

 

 

 

 

.css -> css를 바꾸고 싶다면 $('a').css('color',color(function뒤 매개변수 color));

코드를 통해 css 컬러값을 수정할 수 있다.

주석처리된 태그들을 .css가 대신 해주고 있다고 생각하면 된다.