[생활코딩] WEB2 - Javascript (下)

1. 조건문

1) 비교연산자와 boolean 데이터 타입

=== 비교연산자 : 좌항과 우항이 같은지 판단하는 연산자

  -> 같으면 true

  -> 다르면 false

  -> true 와 false 를 합쳐서 boolean 데이터타입(정보형)

 

>, < 비교연산자

*html에서는 > < 대신 &lt;(less than)과 &gt;(greater than) 사용

 

2) 조건문 문법

()안의 boolean에 따라서 실행되는 코드가 달라진다.

e.g.  if ( _________ === true/false ) { true일 때의 코드 } else { false일 때의 코드 }

 

 

---

 

2. 리팩터링(refactoring)을 통한 중복의 제거

* re+factor : factor를 다시 구성하다.
* fac·tor : 1. 요인, 인자  2. 인수  3.(증가감소의) 양

노란 코드는 자기 자신(자신이 속한 태그)를 가리키고 있음.

  -> '나'에게 이름붙이고 그 이름을 부를 필요 없이, 대명사 this로 대체할 수 있음.

  -> 이름도 필요 없으므로 id도 삭제.

 

대명사가 없는 코드라도 반복이 심하다면  var 반복코드 = 임의의대명사  로 변수를 정의해서 짧게 만들 수 있음

 

 

---

 

3. 반복문

1) 배열 (array)

*배열의 기본 개념 = 대괄호 수납장을 만들어서 값을 집어넣기 (변수 활용)

 var coworkers = [ "sol" , "jaesun" ]

*배열 뒷자리에 새 값을 넣고 싶다면 coworkers.push("mcrn", "docked");

*배열에서 첫 번째 값을 출력하고 싶다면 document.write(coworkers[0]);

*배열 안에 있는 값의 개수를 출력하고 싶다면 document.write(coworkers.length);

 

-> 기타 필요한 syntax(문법)은 그때그때 구글링해서 찾기

 

2) 반복문

* var coworkers = [    ];   배열을 저장.

* var i = 0 ;    변수를 저장.

* while (    ) {    };    ( ) 안의 내용이 true인 동안은 { }안의 동작을 실행한다

* { } 안에 들어있는 i = i + 1;   앞의 동작을 전부 실행한 다음 i 를 i 다음 수로 변경한다. 반복문이 실행될 때마다 값이 높아진다.

* ( ) 안에 html 코드를 적고 싶으면 문자마다 ' ' 로 포장해서 넣어야 함.

* <li>로 배열 안의 값을 하나씩 꺼내 리스트로 만듦.

* <a>로 리스트에 있는 내용마다 해당 값이 포함된 링크를 걸어 줌.

  -> alist라는 배열에 모든 <a> 태그를 넣어줌.

  -> 태그를 하나씩 꺼내서 텍스트 색깔을 white로 바꿔줌.

 

4. 함수, 객체, 파일에 담기

1) 함수

* 배열이 단어를 정리하는 상자라면, 함수는 코드를 정리하는 상자다.

  function 함수이름( 인자/파라미터 ) {  코드  }

 

2) 객체

* 서로 연관된 함수와 변수를 정리정돈하기 위한 도구다.

  배열처럼 순서대로 저장하지 않아서 순서로 호출은 못 하지만, 이름을 달아서 이름으로 꺼내 쓸 수 있다.

* var coworkers = {      }     배열 생성할 때와 동일하게 var을 이용하되 중괄호 사용

* coworkers . 추가내용    점 찍고 배열 안에 추가로 넣게 됨

* coworkers["추가할 내용"]   추가할 내용이 띄어쓰기를 포함한 경우, 배열에 쓰던 것처럼 ["__"]를 이용해서 원하는 값을 넣어 줌.

놀랄 노. 지금까지 써 왔던 document.write(  ) 나 document.querySelector(  ) 등은 모두 객체.함수(  ) 의 구성이었다.

그러니까 setBackgroundColor(  ) 함수와 setColor(  ) 함수를 Body라는 객체 안에 집어넣어 두고, script를 작성할 때는 간단하게 Body.setBackgroundcolor(  ) 나 Body.setColor(  ) 이런 식으로 꺼내 쓸 수 있는 것이다!

 

3) 파일로 쪼개서 정리하기

css 파일과 마찬가지로 새 파일로 만들어 따로 링크시킬 수 있음.

css파일은 <link> 태그 이용해 파일 유형 stylesheet로 지정하고 href 걸어야 하는 반면,

javascript 파일은 태그 자체를 <script> 그대로 써서 src만 지정해 주면 읽어 옴.

 

---

document 객체
- 페이지내의 태그 조작

DOM 객체
- document 객체로도 안되는 작업은 DOM문서를 확인

window 객체
- 웹페이지가 아닌 웹 브라우저 자체를 제어해야 하는 경우 확인
- ex. 현재 열린 웹페이지의 주소가 필요한 경우,
새로운 브라우저 창을 열어야 할때.
브라우저 화면 크기 정보가 필요한 경

Ajax 기술
- 웹페이지를 reload하지 않고, 정보를 변경하고 싶다면 사용
- Morden web page 를 위한 필수 기술

Cookie 기술
- 웹페이지가 reload되어도 status를 유지해야 할 경우,
- 사용자를 위한 개인화된 서비스 제공

offline web application
- 인터넷이 끊겨도 동작하는 웹 페이지를 만들고 싶다

WebRTC
- 화상통신 웹 애플리케이션을 만들어야 한다면

Speech API
- 사용자의 음성을 처리하고 싶다면

---

22.01.04 오늘의 실수

* 코드명은 대소문자를 구분하자!

* 변수를 지정하기 시작하면 정신 바짝 차리기. 뭐가 뭔지 기억해 놓고 사용하기.

 

22.01.05 오늘의 실수

* 공부를 많이 하기보다는 당장 프로젝트의 문제를 해결해라.

* 있는 지식을 총동원해서 멋들어진 방법으로 문제를 해결하려고 하지 마라.

가능한 방법을 이용해서 문제를 해결해 보고, 한계에 봉착하면 그 때 공부를 해라.

 

*문제 발생 / 해결 -> troubleshooting 글로 옮김