<생활코딩 - WEB - WEB2 - JavaScript>
1. 배열과 반복문의 활용
1 야간, 주간 모드에 따라 링크의 폰트 색을 바꿔보자.
1) console에서 링크를 모두 가져오는 코드를 찾아보자 1 (배열 이용)
1 검색 “javascript get element by css selector multiple”
2 검색결과: document.querySelectorAll (‘’)
3 검색결과 재검색 “document.querySelectorAll”
4 재검색결과: 해당 코드는 element list를 나타내는 코드이다.
5 console 입력: document.querySelectorAll(‘a’)
6 결과: (4) [a,a,a,a]
2) console에서 링크를 모두 가져오는 코드를 찾아보자 2
1 console 입력: var alist = document.querySelectorAll(‘a’)
console.log(alist[0]);
2 결과: 첫째 a 태그 불러옴
3 console 입력: var alist = document.querySelectorAll(‘a’)
console.log(alist[1]);
4 결과: 둘째 a 태그 불러옴
5 의미: var alist = : alist라는 변수에 담는 것을 의미한다.
3) console에서 링크를 모두 가져오는 코드를 찾아보자 3
1 console 입력: var alist = document.querySelectorAll(‘a’)
console.log(alist.length);
2 결과: 4
4) console에서 링크를 모두 가져오는 코드를 찾아보자 4 (반복문 이용)
1 console 입력: var alist = document.querySelectorAll(‘a’)
var i = 0;
while(i < alist.length){
console.log(alist[i]);
i = i + 1; }
2 결과: 모든 a 태그가 화면에 출력됨
3 (console 코드는 각 a 태그 속성이 변하는 것을 화면에 출력하기 위해 작성한 것)
5) 링크 색을 바꿔보자 1
1 위의 코드에서 마지막 줄 위에 alist[i].style.color = ‘powderblue’; 를 적어준다.
2 결과: 링크 색이 파우더블루 색으로 바뀌었다.
6) 링크 색을 바꿔보자 2
1 위의 코드를 복사해서 Atom의 해당 html에 붙여 넣기 한다. (위치: if 중괄호 안의 가장 마지막 줄)
2 console.log 부분은 필요 없으니 삭제한다.
3 다시 복사해서 else 중괄호의 가장 마지막 줄에 붙여 넣기 한다.
4 style.color를 blue로 바꿔준다. (주간 모드에서는 blue가 더 잘 보이니까)
7) 링크 색을 바꿔보자 3
1 짜잔! 웹브라우저가 주간 모드일 때 night 버튼을 누르면, 전체 화면은 검어지고 링크색은 파우더블루로 바뀐다.
2 웹브라우저가 야간모드일 때 day 버튼을 누르면, 전체 화면은 하얘지고 링크색은 블루로 바뀐다. 2. 함수예고
1 함수: 코드를 수납상자에 차곡차곡 넣어놓듯이 정리할 수 있는 도구
2 함수를 이용하는 이유
1) 지금처럼 javascript가 input 태그 내의 onclick 안에 들어가 있는 경우, 같은 코드가 1억 개라면
2) 그 코드 내용이 완전히 같은지 확신하거나, 코드 내용을 수정하기가 어렵다.
3 함수 이용 방법
1) javascript 내용을 복사해서, head 태그 안에 script 태그를 입력하고, 그 안에 붙여 넣기 한다.
2) 이름을 붙이고, 함수라는 뜻을 알려준다. function nightDayHandler(self){ ~자바스크립트~ }
3) 자바스크립트의 this 단어를 모두 self로 바꿔준다.
4) body 태그 내에 아래 코드를 입력해준다.
5) <input type="button" value="night" onclick="
nightDayHandler(this)
">
6) 웹페이지가 이전과 똑같이 작동한다.
4 함수 이용 효과
1) 수정과 유지보수가 편리하다. (function 내의 코드만 수정해주면, 1억 개의 input 태그를 모두 수정하는 효과가 있다.)
2) 웹페이지의 크기가 크게 줄어든다.
3) input 태그들의 코드가 똑같은 로직을 갖고 있는지 확신할 수 있다.
4) 함수에 이름을 붙였기 때문에, 코드의 정체를 분명히 알 수 있다. 3. 함수
1 함수
1) 함수는 입력과 출력으로 이루어져 있다.
2) 비연속적인 반복이 일어날 때, 반복문보다 함수(Function)를 이용하는 것이 더 효과적이다.
2 함수 만들기 Basic 1
1) function two() {}: 중괄호 안에 반복을 원하는 부분을 입력한다.
two는 이름을 붙여준 것으로 아무거나 붙여도 괜찮다.
2) 반복을 원하는 부분은 아래와 같다.
3) document.write('<li>2-1</li>');
document.write('<li>2-2</li>');
3 함수 만들기 Basic 2
1) ul 태그 내에 아래대로 입력한다.
2) document.write('<li>1</li>');
two();
document.write('<li>3</li>');
two();
4 함수 만들기 Basic 3
1) 웹페이지 결과는 아래와 같다.
2) * 1
* 2-1
* 2-2
* 3
* 2-1
* 2-2
3) 함수는 이름 뒤의 소괄호를 통해 ‘이것이 함수이구나~’라고 이해하고, 기능한다.
4. 함수: 매개변수와 인자
1 매개변수 (Parameter)와 인자 (Argument)는 입력과 관련된 함수이다.
2 입력값에 따라 다른 출력 값을 갖는 함수를 만들어보자.
아래와 같이 입력해보자.
1) function sum(left, right) {
document.write(left+right+’<br>’); }
sum(2,3);
2) 웹브라우저에 5가 나타난다. (sum 소괄호 안에 왼쪽 2와 오른쪽 3이 더해진 값이 나타나는 것)
3 function sum(left, right)의 left, right는 매개하는 변수(Parameter)이다.
4 sum 소괄호 안의 2와 3은 함수로 전달하는 값으로서 인자(argument)라고 부른다. 5. 함수 (리턴)
1 리턴(Reture)은 출력과 관련된 함수이다.
2 sum(2,3); 이 5로 출력되도록 하는 표현식을 만들어보자.
1) function sum2(left,right){
return left+right; }
document.write(sum2(2,3));
3 출력된 숫자를 다양하게 나타나도록 해보자.
1) document.write('<div style="color:Red"> '+sum2(2,3)+'</div>');
2) document.write('<div style="font-size:3rem;">'+sum2(2,3)+'</div>');
4 return 함수로 인해 2+3의 값이 계속 나타나면서, 간단하게 다른 기능을 추가할 수 있게 되었다. - 여기까지 공부한 후, -
return 강의는 3번을 봤는데도 잘 이해가 되지 않는다.
우선 이 기능이 어떤 상황에서 필요한 것인지
머릿속에 그려지지 않기 때문에 이해가 되지 않는 것 같다.
우선 남은 자바스크립트 강의를 차근차근 수강하고
나만의 project를 진행할 때 return 함수를
다양한 방법으로 실험해보면서 알아봐야겠다.
6. 함수의 활용
1 [2. 함수예고]의 내용이 보다 자세히 설명되는 강의이다.
2 함수예고의 내용은 함수를 이용해 ‘리팩토링’하는 내용이었다.
리팩토링을 하는 데에는 함수가 다방면으로 중요하게 사용된다고 한다.
3 input 태그의 onclick에 nightDayHandler(this)함수를 지정해주면,
그 this 값은 함수 nightDayHandle(self)가 실행될 때 self라는 매개변수와 연결이 된다.
(self라는 단어는 아무거나 해도 상관없다.)
4 물론 if 코드 내에서도 self.value와 같이 이름을 통일해주어야 한다. 7. 객체예고
1 객체(Object): 복잡도가 너무 높아졌을 때, 연관된 함수나 변수들을 같은 이름으로 그룹핑하여
코드를 정리 정돈하는 도구로서 많이 사용된다.
2 파일 (3-javascript.html)을 함수로 정리 정돈해보자.
1) 중복되는 부분을 찾는다. 배열 및 반복문을 통해 링크 색을 지정하는 것과, 백그라운드 색, 폰트 색을 변경하는 것이 중복된다.
2) function으로 모두 묶어준다 1 (링크)
function LinksSetColor(color) {
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = color;
i = i + 1;
}
3) function으로 모두 묶어준다 2 (백그라운드)
function BodySetBackgroundColor(color) {
document.querySelector('body').style.backgroundColor = color;
4) function으로 모두 묶어준다 3 (폰트)
function BodySetColor(color){
document.querySelector('body').style.color = color;
5) function으로 모두 묶어준다 4 (if 절)
function nightDayHandler(self){
var target = document.querySelector('body');
if (self.value === 'night') {
BodySetBackgroundColor('black');
BodySetColor('white');
self.value = 'day';
LinksSetColor('powderblue');
} else {
BodySetBackgroundColor('white');
BodySetColor('black');
self.value = 'night';
LinksSetColor('blue');
}
}
3 이럴 때, 객체를 사용하면 더 잘 정리할 수 있다. 8. 객체 쓰기와 읽기
1 객체란?
1) 배열은 순서대로 정보를 저장하는 반면, 객체는 순서 없이 정보를 저장한다.
2) 그러나, 이는 쓰레기통처럼 마구잡이로 정보를 넣는다는 말은 아니다.
객체는 정보의 이름과 함께 정리를 해놓는 정리상자 같은 개념이다.
2 객체의 문법
1) 배열은 대괄호 [], 객체는 중괄호 {}를 사용한다.
2) 객체를 만들고, 정보를 정리하는 방법
var coworkers = {
"programmer":"jean",
"singer":"samkim"
};
3) 객체에서 정보를 가져오는 방법
1 document.write(“programmer : “+coworkers.programmer);
2 웹 화면에 programmer : jean 이 나타난다.
3 *coworkers.programmer 사이의 점은 object access operator로서,
coworkers라는 객체에 접근하는 오퍼레이터임을 이른다.
4 document.write(“singer : “+coworkers.singer); 라고 입력하면,
5 웹 화면에 singer : samkim 이 나타난다.
4) 만들어진 객체에 정보를 추가하는 방법
1 coworkers.bookkeeper = “yeoul”;
2 coworkers[“data scientist”] = “jun”;
(*이름에 띄어쓰기가 있을 때, 점 사용이 불가하기 때문에 대괄호와 큰따옴표를 사용한다.)
2 띄어쓰기 있는 정보 가져오는 방법: document.write(“data scientist : “+coworkers[“data scientist”]+”<br>");9. 객체와 반복문
1 배열에서 반복문을 사용해 정보를 모두 가져오듯이, 객체에서도 정보를 모두 가져올 수 있다.
1) 검색 “javascript object interate”
2) 결과: for (var key in object) : key값을 모두 가져오라는 코드이다.
key 값은 programmer, singer 같은 정보이다.
3) 입력: for(var key in coworkers) {
document.write(key+'<br>');
}
4) 결과: key 값(programmer, singer 등)이 모두 화면에 나타났다.
2 key 값과 해당 데이터 모두 불러오기 1
1) 앞서 data scientist를 작성할 때, index가 들어가는 곳에 key값을 입력했더니,
해당 데이터도 불러올 수 있었다.
2) 이것에 차용해서 중괄호 내에 입력: document.write(coworkers[key]+’<br>');
3) 결과: key의 데이터 값(jean, samkim 등)이 모두 화면에 나타났다.
3 key 값과 해당 데이터 모두 불러오기 2
1) 중괄호 내에 입력: document.write(key+’ : ‘+coworkers[key]+’<br>');
2) 결과: key 값과 해당 데이터 모두가 화면에 나타났다.
3) 이 코드의 의의는 모든 데이터를 순회하면서, 우리가 필요한 데이터가 있는지 확인하는 기능임을 아는 데 있다.- 여기까지 공부한 후, -
와 문자를 별로 입력하지 않고, 아주 간단하게 따옴표 같은 기호만 썼는데
앞서 길게 여러 줄을 입력한 코드와 동일한 화면이 나타났다.
너무 신기한데 이 원리를 아직 잘 모르겠어서
우와만 되뇌인다.
자바스크립트는 너무 재밌긴 한데,
그만큼 복잡한 내용도 많아서 머리가 점점 어지러운 기분이다.
개인 프로젝트도 하고 스터디도 하면서 다른 사람들과 이야기 나누다 보면
언젠가 머릿속 안개가 걷힐 날이 오겠지-
10. 객체프로퍼티와 메소드
1 객체의 변수 값에는 함수도 담을 수 있다.
1) 예를 들어, coworkers.showAll = function() {} 와 function showAll() {} 은 같은 표현이다.
2) showAll이라는 메소드에 아래 함수를 입력해보자.
3) for (var key in coworkers) {
document.write(key+’. : ‘+coworkers[key]+’<br>'); }
4) 결과: 모든 key과 데이터 값이 웹 화면에 나타난다.
5) *변수의 이름인 coworkers의 이름이 변할 때, 함수도 영향을 받게 된다.
6) 영향이 없게 하기 위해서는 coworkers[key] 를 this[key]로 바꿔준다.
2 즉, 객체에 소속된 함수를 만들 수 있다.
3 객체에 소속된 함수를 Method라고 부른다.
4 객체에 소속된 변수(programmer, singer 등)를 Property라고 부른다. - 여기까지 공부한 후, -
뒤로 갈수록 몰라도 괜찮은 거라는 이고잉님의 말에
힘들었던 마음이 사르르 녹았다.
맘 편하게 다음 수업으로 진행하면 된다는 말에
또 다음 강의를 듣고 실험할 용기와 힘이 났다.
어떤 일을 하든지 가장 중요한 것은
힘든 부분을 마주했을 때, 스스로에게 용기를 주고 마음을 편하게끔 하는 것 같다.
벌써 코딩 공부를 시작한 지 10일이 되었다.
처음 다짐처럼 설레는 마음 잊지 말고
재미 느끼면서 하나씩 해 가보자.
11. 객체의 활용
1 변수에 객체를 담아보자 1
1) if 절의 모든 이름을 Body.setColor() 식으로 객체를 나누자.
2) var Body = {
setColor:function (color){
document.querySelector('body'). style.color = color;
},
setBackgroundColor:function (color) {
document.querySelector('body').style.backgroundColor = color;
}
}
3) setColor는 프로퍼티이다.
2 변수에 객체를 담아보자 2
1) var Links = {
setColor:function (color) {
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = color;
i = i + 1;
}
}
3 변수에 객체를 담아보자 3
1) 오류가 생길 때는 검사-Console을 통해 편하고 자세하게 찾을 수 있다.
2) 우리가 써오던 document가 '객체'였고, querySelector(‘~~’)은
함수면서 객체에 소속되어 있었기 때문에 '메소드'였다는 사실을 알게 됐다. 12. 파일로 쪼개서 정리 정돈하기
1 서로 연관된 코드들을 파일로 그룹핑해 정리할 수 있다.
1) script 코드 내의 모든 내용을 colors.js 라는 파일에 저장. (*script 태그 제외하고 저장)
2) 모든 링크에 아래 태그 저장
<script src=“colors.js”></script>
<input type="button" value="night" onclick="
nightDayHandler(this)
">
2 장점
1) colors.js 파일만 수정해주면, 해당 소스 태그가 있는 모든 파일이 수정되는 효과가 있다.
즉, 수정 및 유지보수가 굉장히 편리해졌다.
2) 각 html 파일의 코드가 더 명확해지고, 가독성이 좋아졌다.
3) 파일의 이름을 통해 코드 의미도 쉽게 확인할 수 있다.
4) 서버 비용 및 네트워크 트래픽을 절감할 수 있다.
(웹브라우저에 다운로드된 colors.js 파일은 재저장이 필요하지 않기 때문에)
즉, 파일을 로딩하는 데 시간과 돈을 절약할 수 있다. 
💡 Software Engineer - F.E