-
(23) WEB2 JavaScript - 30.객체 쓰기와 읽기 - YouTube
배열은 정보를 담는 그릇이며, 정보가 순서대로 저장된다.
객체: 순서 없이 저장되는 것이자. 이름이 있는 정리정돈 상자 라고 할 수 있다.
- 배열은 대괄호[], 객체는 중괄호{}를 사용한다.
- var coworkers ={}; 는 비어있는 객체이다.
객체에 정보를 넣어보자.
- 정보에 대한 이름을 넣어줘야 한다.
ex. programmer:egoing, designer:leezhe -> 객체 안에 egoing이라는 정보를 programmer라는 딱지(정보명)를 붙여 저장한다
- 정보를 꺼내오고 싶다면 document.write("딱지 : "+객체명.딱지); 여기서 '.'은 객체에 접근하는 오퍼레이터이다.
designer 를 가져오고 싶다면 document.write("designer : "+coworkers.designer+"<br>"); 을 하면 된다.
이미 만들어놓은 객체에 정보를 추가하고 싶은 경우
객체명.딱지 = "정보"; 를 입력한다.
이름에는 공백을 넣을 수 없으므로 띄어쓰기 있는 경우 [] 사용
띄어쓰기 <br> 사용하면 보기 쉬움
(23) WEB2 JavaScript - 31.객체와 반복문 - YouTube
객체에 있는 데이터를 다 가져와야 하는 경우 반복문을 사용한다.
- for in 을 사용한다.
- Iterate 아래에 객체에 있는 모든 데이터를 꺼내 출력하자.
for 는 coworker가 가리키는 변수에 있는 key 값들을 가져오는 반복문이다. key 값은 programmer, designer, data scientist, bookkeeper이다. 즉 key 값은 우리가 가져오려는 정보의 열쇠이다.
배열에서는 key 대신 인덱스라고 표현한다.
즉 coworkers 에 있는 키를 하나씩 꺼내서 { } 안의 코드를 실행하고 실행할 때마다 coworkers의 key 값으로 세팅해준다.
인덱스 대신 key 값을 넣었더니 데이터가 출력되었다.
document.write(key+"<br>"); 를 coworkers[key]로 바꾸자.
이번에는 Create 아래의 값과 같게 만들어보자.
(23) WEB2 JavaScript - 32.객체프로퍼티와 메소드 - YouTube
객체에는 함수도 담을 수 있다.
Property & Method 라는 제목 아래에 결과물을 만들어보자
- 객체에 showAll이라는 메소드(객체의 모든 데이터를 출력하는 함수)를 추가하고 싶은 경우
객체의 이름이 바뀌면 그대로 못 가져옴
따라서 showAll이라는 함수 안에서 함수가 소속된 객체를 가리키는 약속된 기호 this 를 사용한다.
객체에 소속된 함수를 메소드, 객체에 소속된 변수를 프로퍼티 라고 한다.
(23) WEB2 JavaScript - 33.객체의 활용 - YouTube
Body.setBackgroundColor('black')으로 코딩하고 싶은 경우
함수의 이름으로 중복되지 않도록 해놓은 코드를 바꾸어 Body라는 변수에 객체를 담는다.
그리고 객체의 프로퍼티로 setColor를 지정한 후 setColor:fucntion(color)을 해준다.
객체는 객체의 프로퍼티와 프로퍼티를 구분할 때 컴마(,) 를 찍는다.
LInksSetColor도 객체로 만들어주자.
document는 객체이고 querySelector('body')는 함수이면서 객체에 소속되어 있었기 때문에 메소드이다.
(23) WEB2 JavaScript - 34.파일로 쪼개서 정리 정돈하기 - YouTube
가장 큰 정리정돈 도구를 알아보자.
연관된 코드들을 파일을 묶어서 그룹핑한다면 많은 웹페이지를 감당할 수 있다.
링크 색깔을 바꾸고 싶다면 링크 관련 코드를 모든 웹페이지에서 바꿔야 한다. 이 때 파일로 쪼개면 쉽다.
color.js라는 파일을 만들어서 모든 웹페이지에 공통적으로 들어가는 공통된 코드를 <script>태그를 제외하고 카피해서 붙여넣기를 하자.
공통된 코드를 지우고<sciprt src ="colors.js"></script> 를 입력하면 아까와 같이 작동한다.
검사-네트워크 탭을 보면 웹페이지를 화면에 표시하기 위해서 로딩된 파일이 보이는데 colors 를 조용히 웹브라우저가 다운로드 해서 원래 있었던 것처럼 가져다 놓고 해석하는 것이다.
다른 project에도 <sciprt src ="colors.js"></script> 를 복붙하면 끝난다.
파일로 쪼갰을 때의 장점은
- 새로운 파일을 만들면 모든 코드를 카피할 필요 없이 그냥 심플하게 파일을 새로운 웹페이지에 포함시키면 된다.
- 파일을 수정하면 모든 웹페이지에 동시에 변화가 반영되어 유지보수가 매우 편리하다.
- 가독성이 좋아지고 코드가 훨씬 더 명확해지고 코드의 의미를 파일의 이름을 통해 확인할 수 있다.
- 한 번 웹페이지에 다운로드된 파일은 저장해놓고 저장된 파일을 읽어 네트워크를 통하지 않게 하기 때문에 서버 입장에서 훨씬 더 비용을 절감할 수 있고 사용자 입장에서도 네트워크 트래픽을 절감할 수 있고 훨씬 더 빠르게 웹페이지를 화면에 표시할 수 있다.
(23) WEB2 JavaScript - 35.라이브러리와 프레임워크 - YouTube
소프트웨어에 사회성을 알아보자
라이브러리와 프레임워크는 다른 사람의 도움을 받아 소프트웨어를 만든다는 점에서 비슷한데
- 라이브러리는 내가 만들고자하는 프로그램에 필요한 부품이 되는 소프트웨어를 잘 정리정돈해놓은 것이다. (내가 만들고있는 프로그램에 사용할 부품을 가져오는 느낌)
- 프레임워크는 만들고자 하는 것이 있을 때 만들고자하는 것이 무엇인지에 따라서 공통적으로 필요한 것과 달라지는 부분이 있는데, 공통적인 부분은 프레임워크가 만들어놓고 만들고자 하는 것의 기능에 따라 조금씩 수정하는 것을 통해 처음부터 다 만들지 않도록 해주는 반제품 같은 것이다.(프레임워크 안에 우리가 들어가서 작업하는 것)
둘 다 다른 사람과 협력하는 모델이다.
라이브러리)
자바스크립트 라이브러리 중 jQuery라는 라이브러리가 유명하다. 생산성이 훨씬 더 높아진다!
jQuery 다운로드/
CDN 을 찾아 다운로드받으면 script src를 통해 가져올 수 있다.
colors.js 앞에 jQuery script 태그를 복붙하자. (다운로드 필요 없음.)
jQuery를 이용해 colors.js 파일을 수정해보자.
처리할 태그가 많을 때 반복문을 사용해야 하는데 jQuery를 사용하면 jQuery가 대신 해준다.
주석 부분과 같은 코드를 만들어주자.
- jQuery는 $로 시작한다. $()는 $라는 이름의 함수이며 $('a')는 웹페이지의 모든 a 태그를 jQuery로 제어하겠다는 의미이다.
jQuery 를 css로 바꾸고 싶은 경우 css("color", "색")으로 사용하면 된다.
어떤 태그의 css 를 바꾸고 싶을 때는 . css를 쓰고 두 번째 인자로 매개변수를 통해 들어온 color 값을 준다.
다른 코드들도 jQuery 를 사용해 바꿔주자. (parameter color 값으로 지정)
