JavaScript-자료형, 배열, 조건반복문, 함수

변수, 자료형

• javascript문자열과 숫자 자료형
• 문자열타입은 “ ” 또는 ‘ ’ 둘 다 표현 가능

    var x = 5;
    var name = "good man"
    "good boy".indexOf("g");   // 0
    "      good    ".trim();    // good
    "goood maaaan".upperClass();  // GOOOD MAAAAN
  

• 비교연산자
  • 자바랑 비슷한데.. 제일 충격적인건 비교연산자가 ==가 아니라 ===인 것.. 대입연산자는 = 이거로 똑같음
  • ==이거는 자료형 상관없이 안에 내용이 같을 때 사용 → 1==”1”; 이건 true, 1===”1”; 이건 false
• boolean 타입
  • true나 false를 말함. → 너무나 당연한 얘기

Operator	Description
typeof	Returns the type of a variable
instanceof	Returns true if an object is an instance of an object type

조건문, 리팩토링

• 아래와 같이 코드의 중복을 막아주는게 중요
• this를 통해 간편히 사용

    <input 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';
        }
      ">

이건 참고사항

    document.write('<li>2</li>');
    document.write('good boy<br>');

이렇듯 script함수 () 안에서 ‘ ‘ 안에 들어가는 <>태그들이 다 제 역할을 해낸다.

배열

• 생성방법

    var fruits = ["apple", "banana", "strawberry"];
    var fruits = new Array(); // 빈 배열 생성
    fruits[0] = "apple";  // 빈 배열에 값 저장하기
  

• 자바스크립트의 배열에서는 하나의 배열에 여러 종류의 객체를 혼합해서 저장할 수 있다.

    var comp = new Array();
    comp[0] = "dhdhdh";
    comp[1] = 3014.1;
    comp[2] = new Date();
  

• 자바스크립트만의 특별한 배열 특징
  • 인덱스값 대신 단순한 문자열인 key값을 이용해서 값을 저장, 호출할 수 있다. → 이게 은근 편리
  • html에서 input태그에 종종 등장하는 name속성이 있는데 이를 이용해서 key값을 저장한다.

    var fruits = new Array();
    comp['a'] = "bananan";
    comp['b'] = "apple";
    comp['c'] = "peach";

반복문 & 배열

    <input type = "button" name= "" value= "" onclick= "
    var target = document.querySelectorAll('a');
    var i =0;
    while(i < target.length) {
        target[i].style.backgoundColor='blue';
        target[i].style.color='powderblue';
        i++;
      }
    ">

자바스크립트 입출력 관련 유용한 함수

1. alert();
   • 이건 따로 리턴값이 없음. 자바로 치면 void
   • 그냥 괄호 안에 있는 “” 안의 텍스트를 출력만 함.
2. confirm();
   • 이건 똑같이 괄호 안에 있는 “” 안의 텍스트를 출력하는데
   • 확인을 누르면 true를 취소를 누르면 false를 리턴한다. var user = confirm(“계속하시겠습니까?”);
   • 위와 같이 user이라는 변수에 true 또는 false를 저장한다.
3. prompt();
   • 이건 입력창이 뜨는데 거기에 사용자가 입력하는 걸 그대로 저장값으로 가진다. var age = confirm(“나이를 입력하세요.”);

자동 형변환

    var x = 1;
    var y = 2;
    document.write("hihi" + x + y +"<br>");

위 코드 처럼 문자열과 숫자를 같이 출력으로 쓰면 숫자인 x와 y가 자동으로 문자열로 형변환되어서 결국 출력되는건 hihi12이 된다.

---

함수

• 자바스크립트는 함수형 언어로 함수가 차지하는 비중이 굉장히 큼 → 매우 중요
• 매개변수를 설정하여 인자받는 함수

    function get_arguments(arg1, arg2){
        return arg1 + arg2
    }
       
    alert(get_arguments(10, 20));
    alert(get_arguments(20, 30));
  

• 무명함수
  • 변수에 함수를 저장한 후 나중에 그 변수를 호출하는 방식

      var numbering = function (){
      i = 0;
      while(i < 10){
          document.write(i);
          i += 1;
      }   
      }
      numbering();
    

• 익명함수
  • 함수를 정의내림과 동시에 호출하는 경우

      (function (){
      i = 0;
      while(i < 10){
          document.write(i);
          i += 1;
      }   
      })();