[JS] 기본 문법(1)

1. 데이터 타입 종류

2. 문자, 숫자 연산자 활용

ex)

3. 변수

변수 지정 시: var 변수 명 = "";

ex)

4. 웹브라우저 제어

• document.querySelector('태그') : CSS 선택자 // 요소를 선택해준다

ex) 백그라운드 컬러 변경: .style.background="";

<input type="button" value="night" onclick="
      document.querySelector('body').style.backgroundColor='tomato';
      document.querySelector('body').style.color='white';
">

5. Boolean

    <script>
      document.write(1===1);	// 같냐
    </script>
    
    <h3>1&lt;2</h3>				// 꺽새(<) 표시 : &lt;
    <script>
      document.write(1<2);
    </script>

6. 조건문 & 조건문 활용

• 조건문

<script>
  if(false){
    document.write("2");
  } else{
    document.write("3");
  }
</script>

• 조건문 활용

	<input id="night_day" type="button" value="night" onclick="
          if(document.querySelector('#night_day').value === 'night'){
            document.querySelector('body').style.backgroundColor = 'black';
            document.querySelector('body').style.color = 'white';
            document.querySelector('#night_day').value = 'day';
          } else {
            document.querySelector('body').style.backgroundColor = 'white';
            document.querySelector('body').style.color = 'black';
            document.querySelector('#night_day').value = 'night';
          }
        ">

7. 리팩토링(refactoring)

• 리팩토링 = 중복 제거

        <input id="night_day" type="button" value="night" onclick="
          var target = document.querySelector('body');	// 변수 선언 => 중복의 제거
          if(this.value === 'night'){
            target.style.backgroundColor = 'black';
            target.style.color = 'white';
            this.value = 'day';
          } else {
            target.style.backgroundColor = 'white';
            target.style.color = 'black';
            this.value = 'night';
          }
        ">

8. 배열

• 배열 선언: [ ]

  var coworkers = ["egoing", "leezche"];

• 배열 원소 추가: push

  coworkers.push('duru');
  coworkers.push('taeho');

9. 반복문

var i = 0;
while(i < 3){	// 반복문 실행
      document.write('<li>2</li>');
      document.write('<li>3</li>');
      i = i + 1;
}

10. 배열과 반복문

※ 속성은 작은 따옴표 ''로 감싸기

    <script>
      var coworkers = ['egoing','leezche','duru','taeho'];
    </script>
    <h2>Co workers</h2>
    <ul>
      <script>
        var i = 0;
        while(i < coworkers.length){
          document.write(coworkers[i]+'<br>');
          i = i + 1;
        }
      </script>

11. 함수

• 함수 선언: fuction 함수명( ) { ~ }

       function two(){
         document.write('<li>2-1</li>');
         document.write('<li>2-2</li>');
       }
       two();	// 함수 호출

12. 매개변수와 인자

• 기존 함수

      function onePlusOne(){
        document.write(1+1+'<br>');
      }
      onePlusOne();

• 매개변수를 가진 함수

      function sum(left, right){
        document.write(left+right+'<br>');
      }
      sum(2,3); // 인자 값을 넘겨준다	=5
      sum(3,4); // =7

• 매개변수 특징
  : 붉은색 5가 아닌 붉은색 23이 된 이유는 자바스크립트는 문자와 숫자를 더하면 숫자를 문자로 간주합니다. +를 덧셈이 아닌 문자 결합 연산자로 사용합니다.

  function sumColorRed(left, right){
  	// 아래와 같이 괄호를 사용해서 2와 3을 먼저 더해야 한다 => 5
    // document.write('<div style="color:red">'+(left+right)+'</div><br>');	
    
    // 아래는 숫자를 문자로 인식한다	=> 23
   	document.write('<div style="color:red">'+left+right+'</div><br>');
  }
  
  sumColorRed(2,3);

13. 리턴

  function sum2(left, right){
    return left+right;
  }

14. 객체

• 객체 선언: var 변수명 = { ~ };

<script>
  var cowokers = {	"programmer":"egoing", "designer":"leezche" };
</script>

document.write(cowokers.programmer);

• 객체 추가 시,
  1. 빈칸 없을 경우: 변수명.추가객체 = ~;
  2. 빈칸 있을 경우: 변수명["추가 객체"] = ~;

1. cowokers.bookkeeper = "duru";
2. cowokers["data scientist"] = "taeho";

15. 객체 반복문

for(var key in cowokers){
	document.write(cowokers[key]);
}

16. 프로퍼티와 메소드

• 객체에 속한 변수 = property
• 객체에 속한 함수 = method

ex)
	1. programmers, designer 등 
	2. cowokers.showAll = function() {
    	for(var key in cowokers){
        	document.write(cowokers[key]);
        }
    }

17. 소스 파일 쪼개기

※ 만약, 파일마다 여러번 반복되는 소스가 존재한다면 <scrpit> 안에 있는 소스만 복사해서 새로운 파일에 저장 -> 이후 저장한 파일 명을 <srcrpit src="파일명"> 으로 바꿔준다.

18. 코드 단축

• $('태그').css(적용시킬 속성, 파라미터);

ex) document.querySeLector('body').style.color = color;
  => $('body').css('color', color);