🌞 Day 028 

• JavaScript 시작

 🌌 JavaScript 

 🪐 JavaScript Basic 

JavaScript는 ...

• html5 언어로 마크업하며 만드는 웹페이지의 정적인 기능들을 확장하고 페이지를 조금 더 동적으로 만들기 위해 사용하는 프론트 개발언어

• 주로 html5에서 불가능한 사칙연산 및 관계연산 등을 실행할 때 사용하며, 기능적인 면이나 이벤트(클릭, 더블클릭 등)에 대한 동작을 처리하는 데 사용

• 브라우저 및 화면에 표시될 태그들을 대상으로 하는 객체들이 정의되어 있으며, 자바의 객체지향언어 형식의 프로그램이 작성

• 브라우저 상에서 일어날 수 있는 사용자 입력, 해당연산, 이벤트에 의한 출력의 기능을 구현 한다.

• 자바스크립트의 작성위치는 head 태그 내부, 그리고 body태그 내부

  • head 태그 내부 작성
    : 페이지 로딩 전에 실행되고 준비되어야 할 코드들
  • body 태그 내부 작성
    : 페이지 표시시점에 함께 실행되거나 준비될 코드들

 🌟 head 안의 스크립트 실행 명령들 

• 간단한 경고(or 안내) 메시지를 표시하기 (작은 팝업 띄우기)
  window.alert("Hello JavaScript #1");

• html 파일 내 body부분에 해당 내용을 출력하기, h1태그는 표시되지 않고 기능별로 동작하며 출력한다.
  document.write("<h1>Hello JavaScript #1</h1>");

 🌟 출력관련 명령 

• alert 명령은 자바스크립트 안에 내장된 window객체 안의 멤버 메서드 이다.

• 사용할 때 window.을 생략해서 사용할 수도 있고, 생략하지 않고 사용할 수도 있다.

• 자바스크립트에서는 화면에 표시되는 윈도우를 window라는 이름으로 정의한 객체로 다루게끔 환경객체를 내장하고 있다. 현재의 위치가 window 클래스 내부라는 뜻이기도 하다.

• 따라서 그 외부에 정의 되어 있는 document객체는 그 멤버메서드 사용시 반드시 클래스 이름과 멤버 메서드이름을 함께 써줘야 한다.

 🌟 문자 자료형 

• 자바스크립트에서도 자바와 마찬가지로 문자 또는 숫자형의 자료가 존재한다.

• 또한 그들을 저장해두고 사용할 수 있게 변수도 존재한다. 아래는 문자형 자료의 설명이다.

• Java와 달리 javascript의 문자 자료형은 작은 따옴표와 큰따옴표 모두 문자자료로 사용한다. (char와 String 구분이 없다.)
  

• 작은 따옴표로 묶어도 문자자료, 큰따옴표로 묶어도 문자자료로 인식, 다만 그 둘을 혼용하여 사용할 수는 없다.
   ("javascript' 잘못된 사용) 
  

• 둘은 혼용하여 사용하는 경우는 문자열 자료안에 인용구문을 넣어야 할 때 혼용하여 사용한다.
   ('Hello "JavaScript"...' 바른 사용) 
  

• 인용구문의 사용도 작은 따옴표와 큰 따옴표 구분은 없다
   ('Hello "JavaScript"...' 바른사용, "Hello 'JavaScript'..." 바른사용) 
  

• 큰따옴표나 작은 따옴표로만 인용구문 표기를 하고 싶다면 이스케이크 문자 \"를 사용한다.
   ("Hello, \"Javascript\" ... ") 
  

• 이스케이프 문자들 : \n, \', \t, \\

• alert안에서는 태그 작동 X, <br>대신 \n을 사용해야 함

 🌟 숫자 자료형 

• JavaScript의 숫자자료는 정수와 실수만 구분하고, 이외의 요소들을 구분없이 사용한다.

• 통틀어서 수치형자료(Number)라고 부르기도 한다.

 🌟 산술연산자 : +, -, *, /, % 

• 일반적인 산술연산자는 똑같이 사용 다만, 정수와 정수끼리의 나눗셈 연산이 정수결과가 나오는 것이 아니라 실수결과로 출력되는 것만 다름

 🌟 비교연산자 : <, >, <=, >=, ==, != 

 🌟 논리 연산자 : && , ||, ! 

 🌟 변수 

• 자바스크립트의 변수 선언
  

  • 모든 변수는 var로 선언명령으로 생성
    변수의 자료형은 현재 저장되어 있는 자료형에 따라 바뀐다.

  • a변수에 10이라는 값을 저장해서 정수형 변수가 되어 있다가도,
    이후에 123.123이라는 값을 a 변수에 대입하면 a변수는 실수형이 된다.
    
    

• 변수는 1개이지만 자료형을 바꿔가며 재활용이 가능하다
  

• 자바스크립트의 함수
  (자바스크립트 메서드-멤버메서드가 아닌 일반 메서드)

   	function abc(){
   		document.write("<h2>자바스크립트의 일반적인 함수입니다. 
   						자바처럼 호출합니다.</h2>")
   	}
   	abc();

  • 자바스크립트 변수의 특별한 기능
    : 자바스크립트의 변수는 함수를 저장할 수가 있다.

   	var functionVariable = function(){
   		document.write("<h2>함수를 변수에 저장했어요. 
   						그리고 변수 이름으로 호출합니다.</h2>")
   	};

  • 자바스크립트의 함수는 이와 같이 function이라는 키워드와 매개변수가 들어가는 ()와 함수의 내용이 들어가는 {}로 구성되며, 현재 지정되지 않은 함수의 이름은 없는재로 "익명함수"라고 부른다.

  • 따라서 위의 명령은 익명함수를 functionVariable 변수에 저장한 것이며, 이후 functionVariable이름으로 위 함수를 호출 가능
    

 🌟 복합대입연산자 : +=, -=, *=, /=, %=  

var value = 10;
value += 10; // value = value+10
document.write("<h2>" + value + "</h2>");
value -= "world";
document.write("<h2>" + value + "</h2>"); // NaN(Not Number)

 🌟 증감 연산자 

 🌟 자료형 검사 

 🌟 객체 

• 자바스크립트에도 객체가 존재한다. 하나의 변수 안에 여러 속성(멤버변수) & 멤버 메서드 들을 생성해놓고 객체지향 프로그래밍을 할 수 있다.
  

 🌟 입력 

 🌟 배열 

• 배열에 저장되는 자료형이 고정되지 않았다.
  또한 배열 안에 배열을 넣어서 이차원 배열처럼 사용이 가능
  

 🌟 undefined 자료형 

 🌟 숫자와 문자열(아라비아기호)의 특별한 연산과 자료형 변환 

1. + 연산자
   : 숫자끼리 연산을 제외한 String과의 +연산은 모두 이어붙이기

2. 덧셈을 제외한 문자와 숫자 간의 사칙연산
   : 문자 -> 숫자 자동변환되어 산술연산이 실행

3. 강제 자료형 변환

   • 다른 자료형 -> 숫자변환 : Number() 함수사용
   • 다른 자료형 -> 문자열 변환 : String() 함수사용

4. Boolean() 자료형 변환 (다른 자료형 -> boolean)

   • 0은 boolean 변환시 false, 0아닌 모든 숫자는 true
   • 따옴표 안에 그 어떤 글자라도 존재한다면 true,
     비어있거나 null이거나 NaN이거나 undefined라면 false

 🌟 일치 연산자 

• 양변의 자료형은 틀리지만 자료형을 맞춰서 변환했을 때 변환된 값이 같음

  • == : 일치 true
  • != : 불일치 true
    
    
    

• === : 양변이 자료형도 같고 값도 일치해야 true
  !== : 양변의 자료형이나 값이 다를 때 true
  

 🪐 JavaScript Control 

 🌟 조건문 IF 

 🌟 Loop : while 

 🌟 Loop : for 

 🪐 JavaScript Function 

 🌟 Function 01 

• 자바의 메서드와 같은 뜻의 문법요소

• 반복되거나 단위로 구성될 명령을 하나의 이름으로 묶어놓고, 명령이 필요할 대 이름을 불러 실행하는 구조

• 보통 head태그 안의 스크립트영역에서 함수를 정의해놓고, body의 이벤트에 연결하여 실행시킴
  : 버튼이 클릭되면 실행되는 자바스크립트의 함수의 정의

• 함수는 선언적 함수와 익명 함수가 있다.

• 선언적 함수는 생성 당시 부를 이름을 부여해서 만드는 함수

• 익명 함수는 이름을 지정하지 않은 상태로 만들어서, 함수자체를 변수에 저장하여 변수이름으로 사용하곤 한다.
  

• 선언적 함수이든 익명 함수이든 이들은 head 또는 body 안의 script태그 안에서 어디서든 호출이 가능하다.

• 익명함수

  • 하나의 변수에 익명함수를 대입하고, 필요할 때마다 변수이름으로 실행할 수 있다는 장점이 있다.
  • 이미 함수가 대입되어 있는 다른 함수를 대입하여 다른 함수가 실행되게 할 수도 있다.
    

• 익명함수를 저장한 변수는 저장된 함수의 몸체를 대신하지만 변수에 괄호를 붙이면 함수가 실행되는 모드로 변경된다.

• 함수의 정의 영역 및 몸체를 변수에 저장하여 변수의 이름으로 호출하는 형태

• 변수는 일시적으로 하나의 함수만 저장할 수 있으며,
  변수의 이름으로 함수를 호출할 시 현재 저장되어 있는 함수가 실행된다.

 🌟 Function 02 

1. 함수의 매개변수 & 전달인수

• 자바스크립트 함수의 전달인수와 매개변수는 자바와 비슷하지만

• 매개변수의 자료형을 표시하지 않고 변수의 이름만 명시하고 사용한다.

    function add1( a, b ){
        c = a + b;
        document.write("<h2>" + a + "+" + b+ " = " + c + "</h2>");
    }
    add1( 40, 30 );

2. 함수의 리턴값 & 매개변수 사용상 특이점

• function에도 return값을 사용할 수 있다.

• 생성되어 있는 매개 변수보다 전달 인수의 개수가 많으면 해당 전달 인수는 무시된다. (넘쳐서 쓰지 않는 변수는 무시)

    function add2( a, b ){
        c = a + b;
        return c;
    }
    var result = add2( 50, 60 );
    document.write("<h2>50+60 = " + result + "</h2>");

    // 매개변수의 사용상 특이점
    function f(x){
        return x*x;
    }
    result = f(5, 3);
    // 위 호출에서 두 번째 전달 인수는 무시한다.
    document.write("<h2>5*5 = " + result + "</h2>");

3. 함수의 오버로딩

• 배열을 만들어 주는 Array() 함수의 다양한 사용(오버로딩)

• Array() 함수는 기본적으로 매개변수에 아무 것도 입력하지 않게 정의 됨

    // 빈 배열을 만듦
    var array1 = Array();

    // 매개 변수만큼의 크기를 가지는 배열을 만듦 (10개의 공간)
    var array2 = Array(10);

    // 매개변수를 배열로 만듦
    var array3 = Array(25, 35, 45, 55);

    document.write("<h2>" + array1 + "<br>" + array2 + 
                   "<br>" + array3 + "</h2>");

4. argument 변수 사용 예제

• 자바의 int ... a와 같은 매개변수의 키워드

• 자바처럼 매개변수로 선언하지 않아도 내부에 존재하는 배열 객체라고 생각하면 된다.

• 전달되는 모든 전달인수를 argument가 배열로 받아서 관리

5. 리턴값이 익명함수인 경우

6. 익명함수를 함수의 전달인수로 전달하는 경우

7. 지역변수와 유효범위

    function test(name){
        var output = 'Hello' + name + '...!';
        return output;
    }

• 위 함수 내의 output변수는 지역 변수 이므로, 함수를 벗어나면 없는 변수가 된다.
  document.write('<h1>' + output + '</h1>');
  ➡️ 실행결과 에러 메시지 : output is not defined

• 지역변수는 자신을 감싸고 있는 중괄호를 벗어나는 순간 소멸

• test 함수 안에 있는 output변수의 값을 활용하려면 return으로 받아서 사용
  var s = test('홍길동');
document.write('<h1>' + s + '</h1>')

9. 클로저(Closure)

• Closure
  : 지역변수의 값을 살리고 활용하기 위해서, "리턴되는 함수의 리턴값"으로 지정

• 함수 내의 지역변수를 외부에서 활용하는 방법
  거의 사용하지 않음

 🌟 Function 03 

함수의 재정의 : 함수 호출 전 마지막에 저장된 함수가 실행

1. 익명함수의 재정의

• 익명함수는 변수의 이름으로 호출될 때, 호출실행 시점에 변수에 저장된 함수가 실행된다.

        var func = function(){ document.write('<h1>익명함수1</h1>'); }
        func();   // 익명함수1
        var func = function(){ document.write('<h1>익명함수2</h1>'); }
        func();   // 익명함수2
        

2. 선언적 함수의 재정의

        function move(){  
          document.write('<h1>move() 함수 1 호출</h1>'); 
        }
        move();
        function move(){  
          document.write('<h1>move() 함수 2 호출</h1>'); 
        }
        move();
        function move(){  
          document.write('<h1>move() 함수 3 호출</h1>'); 
        }
        move();

• 자바스크립트 최초 실행 시 내부의 실행 명령들의 내용을 읽기 전에 선언적 함수들을 먼저 읽어서 사용준비를 한다. 그 과정에 같은 이름의 함수가 있다면 나중에 정의된 함수가 그 이름의 함수로 결정된다.

• 따라서 위 코드의 세 번의 move()함수 호출 명령은 모두 'move() 함수3 호출' 내용을 출력한다.