1.  제어문

👩🏻‍💻  제어문 : 코드의 흐름을 조건에 따라 바꿀 수 있음
👩🏻‍💻  제어문에는 크게 조건문에 해당하는 if, when 그리고 반복문에 해당하는 for, while 이 있음

(1)  조건문  if

    ✏️   주어진 조건식의 결과값이 참인지 거짓인지에 따라 코드르 실행할 것인지
           혹은 다른 코드를 실행할 것인지 판단하기 위한 프로그래밍 문법

  1) if문을 사용하기 위한 조건

      -  if문의 조건식에는 비교 연산자(==, <, >)와 논리 연산자(&&, ||)를 사용한 조건식만 사용 가능
      -  조건식의 결과는 Boolean 타입인 true 참과 false 거짓

  2) 기본적인 if문 사용하기

if (조건식) {
        조건식이 참일 경우 실행되는 코드 영역
 } 
    *  코드 블럭 code block. 코드 스코프 code scope : 코드 중간의 여는 중괄호 {로 시작해 닫는 괄호 } 까지

fun main() {
  
    var out = 0
    var strike = 3
    if (strike > 2) {
        out = out + 1
    }
    println("out: $out") // out: 1
    
}

  3) if~else 문 사용하기

if (조건식) {
        조건식이 참일 경우 실행되는 코드 영역
} else {
        조건식이 거짓일 경우 실행되는 코드 영역
}    

fun main() {
    var ball = 4
    if (ball > 3) {
        println("4볼로 출루합니다.") // 4볼로 출루합니다.
    } else {
        println("타석에서 다음 타구를 기다립니다.")
    }
}

    4) else if 문

 if (조건식) {
        조건식이 참일 경우 실행되는 코드 영역
 } else if (조건식 2) {
        조건식 1 결과가 거짓이고 조건식 2 결과가 참일 경우 실행되는 코드 영역
} else {
        조건식1, 조건식2 모두 거짓일 경우 실행되는 코드 영역
}

  5) 변수에 직접 if문 사용하기

      -  if문의 조건식 결과를 변수에 대입할 수 있음

fun main () { 
    var a = 5
    var b = 3
    var bigger = if (a > b) a else b
    println("bigger: $bigger")  // 5
}

  6) if문의 마지막 값을 반환값으로 사용하기

    -  위의 코드와 같은데 if문의 코드 영역이 여러 줄일 경우에도 마지막 줄을 변수값으로 사용할 수 있음

fun main() {

    bigger = if (a>b) {
        var c = 30
        a // 마지막 줄의 a 값이 bigger에 저장
    } else {
        b
    }
    println("bigger: $bigger") // 5

    /*
    다음과 같이 'if문을 활용하여 변수에 값을 할당할 수 있음.'
    '값을 할당해야 하므로 반드시 else문이 필요'
     */
    val myAge = 20
    val isAdult = if (myAge > 20) true else false

    println("성인 여부 : $isAdult") // 성인 여부 : false
}

응용 예제

fun main() {
    /*
    사용자에게 성적을 입력받아
    if문을 사용해서 학점을 출력하는 코드를 완성하세요.
    입력은 0 ~ 100까지 입력이 됩니다.
    * 기준
    A: 90 ~ 100
    B: 80 ~ 89
    C: 70 ~ 79
    D: 60 ~ 69
    F: 0 ~ 59

    예) 성적을 입력하세요 : 81
       학점 B
     */

    print("성적을 입력하세요 : ")
    val scanner = Scanner(System.`in`)
    val score = readln().toInt()

    if (score >= 90) print("학점 A")
    else if (score >= 80) print("학점 B")
    else if (score >= 70) print("학점 C")
    else if (score >= 60) print("학점 D")
    else print("학점 F")
}

[ 내용 참고 : IT 학원 강의 ]

1.  코틀린의 특징

👩🏻‍🚀  안드로이드의 개발 환경은 Java 언어를 중심으로 확장되어 있는데, 새로운 개발 언어를 도입함

👩🏻‍🚀  Kotlin 코틀린은 2017년 안드로이드 공식 개발 언어로 지정
      ▶️ 구글이 코틀린을 안드로이드 공식 언어로 지정한 이유는 코틀린이 현대적인 언어로서 갖는 장점들 때문

👩🏻‍🚀  코틀린은 유명 IDE 제작사인 JetBrain이 만든 언어로, 같은 회사에서 만든 Intellij와 Android Studio IDE에서

       매우 잘 지원되는 언어

1) 코틀린의 장점

-  코틀린은 자바와 100% 상호 호환되면서도 더 현대적이고 간결 

      ▶️  자바와 코틀린 코드를 하나의 프로젝트에서 섞어서 사용할 수 있음
-  Null Pointer Exception이 발생할 수 있는 코드를 금지하고 Null에 대해 안전한 코드를 간결하게 표현 할 수 있도록 지원
-  '타입 추론'을 지원

      ▶️  정적 타입 지정 언어가 가진 정확성과 성능을 보장하면서도 동적 타입 언어와 같은 간결함을 유지할 수 있음
-  '람다 표현식'을 지원  ▶️  코틀린의 람다 표현식은 자바8부터 지원되는 람다 표현식보다 더 간결
-  '객체 지향' 프로그래밍과 '함수형' 프로그래밍 스타일을 모두 지원
-  코틀린의 '확장 함수'는 기존 클래스의 변경없이 클래스의 기능을 추가하는 것이 가능
-  코틀린은 이미 널리 쓰이는 '코드 패턴을 간결화할 수 있도록 설계'
      ▶️ 예를 들면 'getter', 'setter'를 묵시적으로 제공하고 자주 쓰이는 'Singleton 패턴'은 'object'로서 지원
-  코틀린의 함수는 '일급 객체'로서 다른 함수의 파라미터로 전달 가능하고 함수의 반환값을 함수 형태로 반환할 수 있어

    '높은 추상화'가 가능
-  코틀린은 '불변성을 보장하는 변수'와 '변경이 가능한 변수'를 언어 차원에서 분리
       ▶️  불변값을 갖는 변수의 사용은 '다중 쓰레드 애플리케이션 개발'에 보다 유용

2.  변수

👩🏻‍🚀  코틀린은 변수명을 먼저 쓰고, 콜론 : 을 쓴 후 자료형을 명시

👩🏻‍🚀  문맥상 추론이 가능하다면 자료명을 생략할 수 있음 ▶️ 코틀린의 형추론이라고 함

👩🏻‍🚀  변수명만 쓸 때는 자료형을 적어줘야 함

💡  val 변수명: 자료형 = 값

fun main() {

    val pi: Double = 3.14

    val name = "tom" // String 으로 형 추론.

    // val은 값을 변경할 수 없는 변수이므로 값을 재할당 하면 다음과 같이 컴파일 오류가 남
    // pi = 3.141593 // 오류 Val cannot be reassigned

    // 값을 변경하고 싶을 때는 var을 사용해야 됨. var로 정의된 변수는 값을 바꿀 수 있음
    var age = 21 // 형추론 Int
    println(age)  // 21
    age = 25 // 재할당
    println(age) // 25
}

1)  변수와 자료형

  👾  변수는 val, var 이라는 키워드를 이용하여 선언
        ⚡️  val로 변수를 선언하면 최초로 지정한 변수의 값으로 초기화하고 더 이상 바꿀 수 없는 '읽기 전용 변수'가 됨
        ⚡️  var로 변수를 선언하면 최초로 지정한 변수의 초깃값이 있더라도 '값을 바꿀 수 있음'

💡  변수를 선언한 예 :
       val username: String = "kildong"
       ➡️  변경되지 않는 변수 username이 String 자료형으로 선언되었고 "kildong"이 값으로 할당

  👾  코틀린은 자료형을 지정하지 않고 변수를 선언하면 변수에 할당된 값("kildong")을 보고 알아서 자료형을 지정할 수 있음

         ▶️  이것을 '자료형 추론'이라고 함
         ▶️  즉 username 변수에 "kildong"이라는 값만 할당해도 코틀린이 알아서 이 변수의 자료형을 String으로 지정
  👾  단 자료형을 지정하지 않은 변수는 반드시 자료형을 추론할 값을 지정해야 함
  👾  선언만 하고 초기화를 하지 않을 때는 반드시 자료형을 적어줘야 함

fun main() {
    val number = 10 // number 변수는 Int 형으로 추론
    var language = "Korean" // language 변수는 String으롤 추론.
    language = "English" // var 키워드로 선언한 변수는 값을 다시 할당할 수 있음
    // language = 10 // 파이썬처럼 다른 데이터 타입의 데이터는 저장할 수 없음.
    val secondNumber: Int = 20 // secondNumber 변수는 자료형을 Int로 명시적으로 지정.
    // secondNumber = 30 // val로 선언한 변수를 값을 다시 할당할 수 없음.

    println("number: $number") // 10
    println("language: $language") // English
    println("secondNumber: $secondNumber") // 20
}

3.  기본 자료형

👩🏻‍🚀  자료형은 크게 기본 자료형 primitive data type과 참조 자료형 reference data type으로 나누어 진다.
      ⚡️ 기본형은 순수하게 값을 저장하는 자료형이고 자바에서는 int, byte, boolean 등이 해당
      ⚡️ 참조형은 객체를 만들고 변수에는 객체의 참조값을 저장하고 자바에서는 String, Array 등이 해당

👩🏻‍🚀  코틀린의 자료형은 모두 참조형. 즉 모든 자료형이 객체 형태

(1) 정수 자료형  -  Byte, Short, Int, Long

   👾  코틀린은 정수의 경우에는 숫자가 작아도 Int 형으로 추론 (기본값)

          ➡️  Byte나 Short 같은 작은 범위를 사용할 때는 자료형을 지정해야 함
 
   1)  Int : 정수

      📍  소수점이 없는 정수값을 지정할 때 사용
      📍  가독성을 높이기 위해 언더바(_)로 자릿수를 구분할 수 있음
      📍  다만, 언더바는 개발자가 읽기 쉽게 하기 위한 것으로 컴퓨터는 동일하게 인식

fun main() {    
    var intValue: Int
    intValue = 3
    intValue = 2_147_483_435
}

  2) Long : 정수

     📍  Int 보다 큰 범위의 정수를 저장할 수 있음
     📍  Double과 Float의 관계처럼 Int와 구분하기 위해서 숫자의 끝에 L을 붙여줌
     📍  Long 타입의 경우에는 설정한 글꼴에 따라 숫자가 1과 구분이 어려울 수 있기 때문에 대문자를 사용

fun main() {
    var longValue = 3_141592L
}

  3) Short와 Byte : 정수

    📍 정숫값을 저장할 때 사용하는데 입력할 수 있는 값의 크기가 Int보다 작음

fun main() {
    var shortValue: Short = 32_767
    var byteValue: Byte = 127
}

(2)  실수 자료형 - Double, Float

  👾  실수의 경우 자료형을 명시하지 않으면 Double 형이 됨 (기본값)

  👾  Float 형으로 지정하고 싶다면 값뒤에 F를 추가로 붙여줌

fun main() {
    val numFloat: Float = 100.0F // 자료형 생략 가능
    val numDouble: Double = 100.0 // 자료형 생략 가능
}

  1) Double : 실수 - 소수점이 있는 값을 저장할 때 사용

fun main() {
    var doubleValue: Double
    doubleValue = 3.141592
}

  2) Float : 실수

    📍 Double과 동일한 용도이지만 더 작은 범위의 숫자를 저장할 때 사용
    📍 Double과 구분하기 위해 Float의 경우 숫자 끝에 'F'를 붙여줌

fun main() {   
    var floatValue: Float
    floatValue = 3.141592F
}

(3) 문자 자료형

    👾  문자 자료형은 문자 하나를 표현하는 Char형과 문자열을 표현하는 String형으로 분류
    👾  Char 형은 문자를 작은 따옴표로 감싸고, String형은 문자열을 큰 따옴표로 감쌈

fun main() {
    val char: Char = 'a' // 자료형 생략 가능
    val string: String = "abc" // 자료형 생략 가능
}

(4) 논리 자료형

   👾  참, 거짓을 표현하는 true, false 를 사용하고 주로 조건 검사에 사용

fun main() {
    val isTrue: Boolean = true // 자료형 생략 가능
}

4.  상수  const

👩🏻‍🚀  상수는 주로 기준이 되는 변하지 않는 값을 입력해 둘 때 사용

👩🏻‍🚀  읽기 전용 변수인 val 앞에 const 키워드를 붙여서 만듦. 전역으로만 사용가능

💡  val과 같이 읽기 전용인 것은 동일하지만, 컴파일 시에 값이 결정되기 때문에 Int, Long과 같은 기본형과 문자열인 String만 입력할 수 있음

const val PI = 3.141592653589793

[ 내용 참고 : IT 학원 강의 ]

1.  이벤트 설정하기

🐝  이벤트 : 사이트에서 방문자가 취하는 모든 행위
         ▶️  모든 문서 객체는 생성되거나 클릭되거나 마우스를 위에 올리거 나 할 때 이벤트가 발생
🐝  이벤트 핸들러 (= 이벤트 리스너) : 이벤트가 발생했을 때 실행되는 코드 (함수)

(1) 이벤트 핸들러 등록 종류

  1) 이벤트 핸들러 어트리뷰트 방식

    👩🏻‍💻 이벤트 핸들러 어트리뷰트는 onclick과 같이 on 접두사와 이벤트의 종류를 나타내는 이벤트 타입으로 이루어져 있음
    👩🏻‍💻  주의할 점은 이벤트 핸들러 어트리뷰트 값으로 함수 참조가 아닌 함수 호출문 등의 문을 할당
           ➡️  이때 이벤트 핸들러 어트리뷰트 값은 사실 암묵적으로 생성될 이벤트 핸들러의 함수 몸체를 의미
           ➡️  하지만 HTML과 자바 스크립트는 관심사가 다르므로 혼재하는 것보다 분리하는 것이 좋음

<body>
    <button onclick="sayHi('Lee')">Click me!</button>
    <script>
        function sayHi(name) {
            console.log(`Hi! ${name}`); // Hi! Lee
        }
    </script>
</body>

  (2) 이벤트 핸들러 프로퍼티 방식

    👩🏻‍💻  window 객체와 Document, HTMLElement 타입의 DOM 노드 객체는 이벤트에 대응하는

          이벤트 핸들러 '프로퍼티'를 가지고 있음
    👩🏻‍💻  이벤트 핸들러 프로퍼티의 키는 on 접두사와 이벤트의 종류를 나타내는 이벤트 타입으로 이루어져 있음
    👩🏻‍💻  이벤트 핸들러 프로퍼티 방식은 이벤트 핸들러 어트리뷰트 방식의 HTML과 자바 스크립트가 뒤섞이는 문제를 해결할 수 있음
           ▶️ 하지만 이벤트 핸들러 프로퍼티에 하나의 이벤트 핸들러만 바인딩할 수 있다는 단점이 있음

<body>
    <button>Click me!</button>
    <script>
        const btn = document.querySelector('button');
        console.log(typeof btn); // object

        // 이벤트 핸들러 프로퍼티에 이벤트 핸들러 바인딩.
        // 첫 번째로 바인딩 된 이벤트 핸들러는 두 번째 바인딩된 이벤트 핸들러에 의해 재할당되어 실행되지 않음.
        btn.onclick = function () {
            console.log('button click 1');
        };

        btn.onclick = function () {
            console.log('button click 2');
        };
    </script>
</body>

  (3)  addEventListener 메서드 방식

문서 객체.addEventListener(이벤트 이름, 콜백 함수)
      ⚡️  첫 번째 매개변수에는 이벤트의 종류를 나타내는 문자열인 이벤트 타입을 전달
             ( 이 때 이벤트 핸들러 프로퍼티 방식과는 달리 on 접두사를 붙이지 않음 )
      ⚡️  두 번째 매개변수에는 이벤트 핸들러를 전달

     👩🏻‍💻  DOM Level 2에서 도입된 Event.prototype.addEventListener 메서드를 사용하여 이벤트 핸들러를 등록할 수 있음
     👩🏻‍💻  '이벤트 핸들러 어트리뷰트 방식'과 '이벤트 핸들러 프로퍼티 방식'은 DOM Level 0 부터 제공되던 방식

<body>
    <button>Click me!</button>
    <script>
        const btn = document.querySelector('button');

        btn.addEventListener('click', function () {
            console.log('button click 1');
        });  // 재활용 불가

        function btnClick () {
            console.log('button click 2');
        } // 재활용 가능

        btn.addEventListener('click', btnClick);

    </script>
</body>

이벤트 핸들러 프로퍼티 방식과 addEventListener 메서드 방식을 모두 사용하여 이벤트 핸들러를 등록하면?

    addEventListener 메서드 방식은 이벤트 핸들러 프로퍼티에 바인딩된 이벤트 핸들러에 아무 영향을 주지 않음
    따라서 버튼 요소에서 클릭 이벤트가 발생하면 2개의 이벤트 핸들러가 모두 호출

<body>
    <button>Click me!</button>
    <script>
        const btn = document.querySelector('button');
        
        // 이벤트 핸들러 프로퍼티 방식.
        btn.onclick = function () {
            console.log('[이벤트 핸들러 프로퍼티 방식] button click');
        }

        // addEventListener 메서드 방식.
        btn.addEventListener('click', function () {
            console.log('[addEventListner 메서드 방식] button click');
        });
    </script>

</body>

💫  addEventListener 메서드는 동일한 요소에서 발생한 동일한 이벤트에 대해 하나 이상의 이벤트 핸들러를 등록할 수 있음

<body>
<button>Click me!</button>
<script>
    const btn = document.querySelector('button');

    function btnClick () {
            console.log(`button click`);
    }

    btn.addEventListener('click', btnClick);
    btn.addEventListener('click', btnClick);

</script>
</body>

응용 예제

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>

        document.addEventListener('DOMContentLoaded', () => {
            const h1 = document.querySelector('h1');
            let counter = 0;

            h1.addEventListener('click', function (event) { 
            // h1 태그에 click 이벤트가 발생할 때 실행할 함수.
                counter++;
                h1.textContent = `클릭 횟수: ${counter}`;
            });
        });
    </script>
    <style>
        h1 { /* 클릭을 여러 번 했을 때 글자가 선택되는 것을 막기 위한 스타일. 드래그가 안됨 */
            user-select: none;
            cursor: pointer;
        }
    </style>

</head>
<body>
    <h1>클릭 횟수: 0</h1>
</body>

(2) 이벤트 핸들러 제거

문서 객체.removeEventListener(이벤트 이름, 콜백 함수)

  👩🏻‍💻  addEventListener 메서드로 등록한 이벤트 핸들러를 제거하려면

        EventTarget.prototype.removeEventListener() 메서드를 사용 
  👩🏻‍💻  removeEventListener 메서드에 전달할 인수는 addEventListener 메서드와 동일
  👩🏻‍💻  addEventListener 메서드에 전달한 인수와 removeEventListener 메서드에 전달한 인수가 일치하지 않으면
        이벤트 핸들러가 제거되지 않음  ➡️  익명함수를 이벤트 핸들러로 등록한 경우에는 제거할 수 없음
       ⚡️ 단, 기명 이벤트 핸들러 내부에서 removeEventListener 메서드를 호출하여 이벤트 핸들러를 제거하는 것은 가능
            (이때 이벤트 핸들러는 단 한 번만 호출)

<body>
    <button>Click me!</button>
    <script>
        const btn = document.querySelector('button');

        const handleClick = () => console.log('button click');

        // 이벤트 핸들러 등록
        btn.addEventListener('click', handleClick);

        // 이벤트 핸들러 제거
        btn.removeEventListener('click', handleClick, true); // 실패
        btn.removeEventListener('click', handleClick); // 성공
    </script>
</body>

기명 이벤트 핸들러 내부에서 removeEventListener 메서드를 호출하여 이벤트 핸들러를 제거

<body>
<button>Click me!</button>
<script>

    const btn = document.querySelector('button');

    btn.addEventListener('click', function foo() {
        console.log('button click');

        // 이벤트 핸들러를 제거. 따라서 이벤트 핸들러는 단 한 번만 호출.
        btn.removeEventListener('click', foo);
    });

</script>
</body>

프로퍼티 방식으로 이벤트 핸들러 등록한 경우 removeEventListener 메서드로 제거 불가

    💫  프로퍼티에 'null' 할당하여 제거

<body>
    <button>Click me!</button>
    <script>
        const btn = document.querySelector('button');
        const handleClick = () => console.log('button click');

        // 이벤트 핸들러 프로퍼티 방식으로 이벤트 핸들러 등록
        btn.onclick = handleClick;

        // removeEventListener 메서드로 이벤트 핸들러를 제거할 수 없음.
        btn.removeEventListener('click', handleClick);

        // 이벤트 핸들러 프로퍼티에 null을 할당하여 이벤트 핸들러를 제거.
        btn.onclick = null;
    </script>
</body>

예제

<body>
    <button id="changeBtn">배경색 변경</button>
    <button id="resetBtn">배경색 초기화</button>
    <script>
        const changeBtn = document.querySelector('#changeBtn');
        const resetBtn = document.querySelector('#resetBtn');

        let i = 0;

        const bodyTag = document.querySelector('body');
        const color = ['red', 'orange', 'yellow', 'blue'];
        const handleColor = () => {
            bodyTag.style.backgroundColor = color[i++ % color.length];
        }

        changeBtn.addEventListener('click', handleColor);
        resetBtn.addEventListener('click', () => {
            changeBtn.removeEventListener('click', handleColor);
            bodyTag.style.backgroundColor = '';
        })
    </script>
</body>

응용 예제

<head>
    <script>

        document.addEventListener('DOMContentLoaded', () => {
            const h1 = document.querySelector('h1');
            const btnConnect = document.getElementById('connect');
            const btnDisconnect = document.getElementById('disconnect');
            const p = document.querySelector('p');

            let counter = 0;
            let isConnect = false; // 이벤트를 여러 번 연결되지 않게

            const listener = (event) => { // 이벤트를 제거하려면 이벤트 리스너를 변수 또는 상수로 가지고 있어야 함.
                h1.textContent = `클릭 횟수: ${counter++}`;
            }

            btnConnect.addEventListener('click', function () {
                if (isConnect === false) {
                    // 1. h1에 이벤트 리스너 연결
                    h1.addEventListener('click', listener);

                    // 2. btnConnect 버튼 안 보이도록
                    this.style.display = 'none';
                    btnDisconnect.style.display = 'block';

                    // 3. p의 내용을 '이벤트 연결 상태 : 연결'로 변경
                    p.textContent = '이벤트 연결 상태: 연결';

                    isConnect = true;
                }
            });

            btnDisconnect.addEventListener('click', function () {
                if (isConnect === true) {
                    // 1. h1에 이벤트 리스너 해제
                    h1.removeEventListener('click', listener);

                    // 2. btnDisconnect 버튼 안 보이도록
                    btnConnect.style.display = 'block'
                    this.style.display = 'none';

                    // 3. p의 내용을 '이벤트 연결 상태 : 해제'로 변경
                    p.textContent = '이벤트 연결 상태: 해제';

                    isConnect = false;
                }
            })

        });
    </script>
    <style>
        h1 {
            user-select: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>클릭 횟수: 0</h1>
    <button id="connect">이벤트 연결</button>
    <button id="disconnect">이벤트 제거</button>
    <p>이벤트 연결 상태: 해제</p>
</body>

[ 내용참고 : IT 학원 강의 및 책 '혼자 공부하는 자바스크립트' ]

1.  변수 variable 란?

👩🏻‍💻  단 하나의 값을 저장할 수 있는 메모리 공간

       ex. int age = 25  ▶️ 변수 age를 선언하고 25로 초기화 한다.

변수 명명 규칙

     a.  예약어 사용 x

     b.  숫자로 시작 x

     c.  특수문자는 '_'와 '$'만 가능

     d.  클래스 이름 첫 글자는 항상 대문자, 변수와 메서드의 첫 글자는 항상 소문자

     e.  여러단어로 이루어진 경우 첫 글자만 대문자

     f.   상수의 이름은 모두 대문자

💡  float : 소수점 7자리
💡  double : 소수점 15자리

2.  변수 기본형  Primitive type

(1) 논리형 ; boolean - true, false 값만 가짐 (1byte)

public class BooleanExample {
	public static void main(String[] args) {
		// boolean 형은 두가지 값만 존재 : true, false
		boolean stop = false;
		if(stop) {
			System.out.println("중지합니다.");
		} else {
			System.out.println("시작합니다.");
		}
	}
}
// 출력결과 : 시작합니다.

(2) 문자형 'char' (2byte)

     📁  char은 단 하나의 문자만 저장, 여러 문자를 저장 할려면 String 사용
     📁  char은 ''(작은 따옴표)로만 묶임
     📁  String 은 클래스, ""(큰 따옴표)로만 묶어야 함

public class Etc0201 {
	public static void main(String[] args) {
		// 문자를 숫자로
		char ch = 'A'; // char ch = '\u0041';로 바꿔 써도 같다.
		int code = (int)ch; // ch에 저장된 값을 int형으로 변환하여 저장한다.
		System.out.println(ch); // A
		System.out.println(code); // 65
	}
}

(3) 정수형 byte / short / int / long

      - long 접미사 ; l or L

(4) 실수형 float / double

      - float 접미사 ; f ( 기본 타입이 double 이기 때문에 안 붙이면 에러남)

※  아스키코드 
   미국정보교환표준부호, 또는 줄여서 ASCII는 영문 알파벳을 사용하는 대표적인 문자 인코딩이다. 아스키는 컴퓨터와 통신 장비 
   를  비롯한 문자를 사용하는 많은 장치에서 사용되며, 대부분의 문자 인코딩이 아스키에 기초를 두고 있다. (출처 ; 위키백과)

※  유니코드   
   전 세계의 거의 모든 문자에 고유 숫자를 부여한 문자 집합

💡 데이터 단위 (출처; 삼성반도체 사이트)

3.  상수 constant 와 리터럴 literal 

(1) 상수

형식 : final 데이터 타입 상수명 = 값;

  · 변수와 달리 한 번 값을 저장하면 다른 값으로 변경할 수 없다. 대문자로 선언

  · 변수 타입 앞에 'final' 붙이면 된다.

public class Exam003 {
	public static void main(String[] args) {
		int a =3;
		System.out.println(a); // 3
		a = 4;
		System.out.println(a); // 4
		
		final double PI = 3.14;
		// PI = 3.15; // 에러발생
		System.out.println(PI); // 3.14 이 문장만 봐도 PI가 상수인걸 할 수 있도록 대문자로 작성.
	}
}

(2)  리터럴

· 문자 리터럴 : 작은따옴표로 문자 하나를 표현한 것  ▶️  ''안에 하나의 문자가 있어야 함

· 문자열 리터럴 : 큰 따옴표로 감싼 두 문자 이상  ▶️  "" 안에 아무런 문자도 넣지 않는 것 ok

· 덧셈 연산자는 피연산자 중 어느 한 쪽이 String이면 나머지 한 쪽을 먼저 String으로 변환한 다음 두 String을 결합한다.

    * 왼쪽에서 오른쪽 방향으로 연산을 수행

char sample = '\'' = ''';

public class MyVar_06 {
	public static void main(String[] args) {
		/* 문자열 표현 */
		char single = '\''; 
		String db1Quote = "\"Hello\""; // 겹따옴표를 출력하려면 이렇게 한다.
	    String root = "c:\\";
	    
	    System.out.println(single); // '
	    System.out.println(db1Quote); // "Hello"
	    System.out.println(root); // c:\
	    
	    char single2 = '"';
	    String single3 = "'";
	    String db1Quote2 = "'Hello'";
	    //String db1Quote3 = 'Hello';  // 에러
	    
	    System.out.println(single2); // "
	    System.out.println(single3); // '
	    System.out.println(db1Quote2); // 'Hello'
	}
}

4.  문자열 연산

'+' 연산자의 두 가지 기능

    1) 피연산자가 숫자일 경우에는 덧셈 연산
    2) 피연산자 중 하나라도 문자열이면 나머지 피연산자도 문자열로 자동 변환되어서 문자열 결합 연산을 수행

public class MyVar_07 {
	public static void main(String[] args) {
		// 숫자 결합 연산
		int value = 10 + 2 + 8;
		System.out.println("value : " + value); // 20
		
		
		// 문자 결합 연산
		String str1 = 10 + 2 + "8";
		System.out.println("str1 : " + str1); // 128 :
		// 연산자는 왼쪽에서 오른쪽으로 순서대로 실행이 되기 때문에
		// 12 + "8" 이 됨 
		
		String str2 = 10 + "2" + 8;
		System.out.println("str2 : " + str2); // str2 : 1028
		
		String str3 = "10" + 2 + 8;
		System.out.println("str3 : " + str3); // str3 : 1028
		
		String str4 = "10" + (2 + 8);
		System.out.println("str4 : " + str4); // str4 : 1010

	}

}

문자열 연산 예제

public class MyVar_08 {
	public static void main(String[] args) {

		String a = 7 + " ";
		String b = " " + 7;
		String c = 7 + "";
		String d = "" + 7;
		String e = "" + "";
		String f = 7 + 7 + "";
		String g = "" + 7 + 7;
		
		System.out.println(a); // 7
		System.out.println(b); //  7
		System.out.println(c); // 7
		System.out.println(d); // 7
		System.out.println(e); 
		System.out.println(f); // 14
		System.out.println(g); // 77
	}
}

[내용 출처 : 자바의정석 및 학원강의]

1.  타이머 timer 함수  

🐰  특정 시간 이후에 콜백함수를 호출할 수 있는 함수

<script>
    setTimeout(function () {
        console.log(`2초 후에 실행됩니다.`);
    }, 2 * 1000); // 시간의 기초단위는 밀리 초 단위.

    let count = 0;
    setInterval(() => {
        console.log(`2초마다 실행됩니다.(${count}번째)`);
        count++;
    }, 2 * 1000);
</script>

타이머 함수를 종료하고 싶은 경우

🐰  타이머 ID는 setTimeout()과 setInterval() 함수를 호출할 때 리턴 값으로 나오는 숫자

<script>
    let count = 0;
    let id = setInterval(() => { // setInterval은 반환형이 있는 함수이기 때문에 변수에 저장 가능
        console.log(`1초마다 실행됩니다(${count}번째)`);
        count++;
    }, 1000);

    setTimeout(() => {
        console.log('타이머를 종료합니다.');
        clearInterval(id);
    }, 5 * 1000); // 5초후 종료
</script>

응용 문제 - 정지 & 시작버튼

<head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #numb {
            width: 100vw;
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 300px;
        }

        #box {
            display: flex;
            justify-content: center;
            align-content: center;
        }

        button {
            width: 50px;
            height: 20px;
            margin: 0 10px;
        }

    </style>

    <script>
        /* '정지' 버튼을 클릭하면 정지 */
        const rainbow = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
        let count = 1;
        const timer = function () {
            document.querySelector('div').innerHTML = String(count);
            document.querySelector('div').style.color = rainbow[count % rainbow.length];
            count++;
        };

        let id = setInterval(timer, 1000);

        const stopTimer = function () {
            clearInterval(id);
        };

        const reStart = function () {
            id = setInterval(timer, 1000);
        };
    </script>
</head>

<body>
    <div id="numb">0</div>
    <div id="box">
        <button onclick="stopTimer()">정지</button>
        <button onclick="reStart()">재시작</button>
    </div>
</body>

2.  기본 매개변수

🐰  매개 변수에 기본 값을 지정, 매개 변수가 들어오지 않는 경우에 기본 값으로 대체
🐰  기본 매개 변수와 일반 매개 변수를 섞어서 사용할 경우에는 기본 매개 변수가 오른쪽으로 가야됨

함수이름(매개변수, 매개변수=기본값, 매개변수=기본값)

<script>

  const earnings = function (name, wage = 8590, hours = 40) {
    console.log(`# ${name}님의 급여 정보`);
    console.log(`- 시급: ${wage}원`);
    console.log(`- 근무 시간: ${hours}시간`);
    console.log(`- 급여: ${wage * hours}원`);
    console.log('');
  }

  // 최저 임금으로 최대한 일하는 경우
  earnings('smith');

  // 시급 1만원으로 최대한 일하는 경우
  earnings('adam', 10000);

  // 시급 1만원으로 52시간 일한 경우
  earnings('tom', 10000, 52);
</script>

응용 문제

<script>
    // 년도를 인수로 전달하지 않은 경우에는 현재 년을 기본값으로 함.
    // 윤년을 확인하는 함수를 정의 - 정수 연도를 입력받아서 윤년의 여부를 불린형으로 반환.
    const isLeapYear = function (year = new Date().getFullYear()) {
        const isLeapYear = (year % 4 === 0) && (year % 100 !== 0) || (year % 400 === 0);
        return isLeapYear;
    }

    console.log(`올해는 윤년일까? === ${isLeapYear()}`); 
</script>

3.  즉시 호출 함수  Immediately-invoked function expression

(function () { })();

 🐰  선언과 동시에 함수가 실행되며 보통은 함수명 없이 사용하기 때문에 재호출이 안됨
 🐰  변수의 충돌을 막기 위해 사용. 재사용을 위해서 함수를 만드는게 아닌 변수의 충돌을 막기 위해 블록화를 하는 목적으로 사용

💡  자바 스크립트에서 선언적 함수보다 익명함수를 생성하고 바로 호출하는 패턴이 많은 이유 

       -  이름 충돌 방지
       -  다른 프로그램에 비해 자바 스크립트는 라이브러리를 많이 사용하고
           한 페이지에 사용하는 프로그램이 여러 개의 파일로 나누어져 있거나 여러 개로 분리되어 있어서
           다른 프로그래밍 언어보다 이름 충돌되는 경우가 많음
       -  익명함수를 사용해서 이름이 중복되는 함수를 만드는 것을 방지

<!-- 이름 충돌 문제 발생 -->
<!-- 다른 곳에서 가져온 자바스크립트 코드 -->
<script>
    let pi = 3.14;
    console.log(`파이 값은 ${pi}입니다.`);
</script>

<!-- 내가 만든 자바스크립트 코드 -->
<script> // Uncaught SyntaxError: Identifier 'pi' has already been declared
    let pi = 3.141592; // 중복 선언
    console.log(`파이 값은 ${pi}입니다.`);
</script>

<script>
    // 1. 재호출이 안되는 형태
    (function() {
        life();
    })();
    function life() {
        console.log(`즉시 실행 함수1`); // 즉시 실행 함수1
    }

    // 1) 익명함수처럼 보이니까 즉석 실행 함수를 변수에 저장한다면?
    let instant = (function() {
        console.log('즉시 실행 함수2'); // 즉시 실행 함수2
    })();
    console.log(typeof instant); // undefined. 변수에 할당되지는 않고 실행만 됨.
    // instant(); // Uncaught TypeError: instant is not a function

    // 2) 선언적 함수처럼 이름을 지정하면 재실행 되지 않을까?
    (function instant3rd () {
        console.log(`즉시 실행 함수3`);
    })();

    // instant3rd(); // Uncaught ReferenceError: instant3rd is not defined

    // 2. 재실행이 가능한 경우
    let instant4th;
    (instant4th = function() {
        console.log('즉시 실행 함수4'); // 즉시 실행 함수4
    })();
    console.log(typeof instant4th); // function
    instant4th(); // 즉시 실행 함수4
</script>

스코프 scope : 변수가 존재하는 범위   

   -  같은 단계의 스코프에서 동일한 이름의 변수가 있으면 충돌
   -  스코프 단계를 변경하는 방법은 중괄호를 사용해서 블록을 만들거나, 함수를 생성해서 블록을 만듦
   -  블록 내부에서 같은 이름으로 변수를 선언하면 변수가 외부 변수와 충돌하지 않고

       외부 변수를 가려서 내부 블록에서 선언한 변수만 볼 수 있음
   -  블록이 다른 경우 내부 변수가 외부 변수를 가리는 현상을 섀도잉 shadowing 이라고 함

💡  블록({}) 생성으로 이름 충돌 문제를 해결하는 방법은  구 브라우저나, var 키워드 사용하는 경우에는 사용할 수 없어서 대체재로 즉시 호출 함수를 사용

<script>
    let pi = 3.14;
    console.log(`파이 값은 ${pi}입니다.`); // 파이 값은 3.14입니다.

    // 블록을 사용한 스코프 생성
    {
        let pi = 3.141592; // 블록에서 선언한 변수는 블록 안에서만 사용 가능
        console.log(`파이 값은 ${pi}입니다.`); // 파이 값은 3.141592입니다. 블록에서 pi가 선언되지 않았다면 전역을 들고 옴.
    }

    console.log(`파이 값은 ${pi}입니다.`); // 파이 값은 3.14입니다.

    // 함수 블록을 사용한 스코프 생성
    function sample() {
        let pi = 3.141592;
        console.log(`파이 값은 ${pi}입니다.`);
    }
    sample(); // 파이 값은 3.141592입니다.
    console.log(`파이 값은 ${pi}입니다.`); // 파이 값은 3.14입니다.
</script>

var 에서 블럭 사용과 즉석 실행 함수

<script>
    var animal = 'dog';
    console.log(animal); // dog

    {
        var animal = 'cat';
        console.log(animal); // cat
    }
    console.log(animal); // cat. 블록에서 사용했지만 블록 밖에서 변수 사용이 됨

    var animal = 'dog';
    console.log(animal); // dog
    (function () {
        var animal = 'cat';
        console.log(animal); // cat
    })();

    console.log(animal); // dog. 즉시 호출 함수의 경우에는 함수 블럭 안에서만 변수의 범위가 제한 됨.
</script>

블록 사용으로 이름 충돌을 막을 수 없는 경우 즉시 호출 함수 사용

<!-- 다른 곳에서 가져온 자바스크립트 코드 -->
<script>
    let pi = 3.14;
    console.log(`파이 값은 ${pi}입니다.`); // 파이 값은 3.14입니다.
</script>

<!-- 내가 만든 자바스크립트 코드 -->
<script>
    /* 즉시 호출 함수를 사용해 변수 이름 충돌 문제를 해결 */
    (function () {
        let pi = 3.141592;
        console.log(`파이 값은 ${pi}입니다.`); // 파이 값은 3.141592입니다.
    })();
</script>

4.  엄격 모드  strict mode

🐰  'use strict' 문자열을 읽은 후 부터는 코드를 엄격하게 검사
🐰  초기의 자바 스크립트는 간단한 보조 프로그램을 만드는게 목적이라 어느 정도 오류가 있어도 정상적으로 작동.
      하지만 이후에 자바 스크립트의 사용이 활발해 지고, 규모가 있는 프로그램을 만들기 위해서는 코드의 오류를 엄격하게 검사를 해야돼서 엄격 모드 사용

      🥕  즉시 호출 함수를 만들고, 이 블록의 가장 윗쪽에 엄격 모드를 적용하는 경우가 많음
              ▶️  이렇게 하면 해당 블록 내부에서만 엄격 모드가 적용
 

 사용예:
    (function () {
        'use strict';
        문장;
        문장
     }) ();

<script>
    /* 변수를 선언하지 않아도 사용이 됨. */
    data = 10;
    console.log(data); // 10
</script>
<script>
    'use strict';
    data = 10; // Unresolved variable or type data
    console.log(data); // 10
</script>

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]

1.  if 문과 if-else 문

👩🏻‍💻  if문이나 if-else문을 사용하면 스크립트 안에서 조건 체크 가능

들어가기 전

 const number = prompt('숫자를 입력하세요!');

    💡  위 코드는 형변환을 하지 않아도 프로그램 실행에는 문제가 없음
            ▶️ 조건식에서 0과 비교를 할 때 자동으로 형변환이 되어서 계산이 되기 때문
            ▶️ but! 자바 스크립트로 프로그램을 짤 때 문제가 되는 경우가 있어서 가급적 형변환을 하는 것을 추천

if 문

<!--if조건문 기본형-->
if (불 값이 나오는 표현식) {
    불 값이 참일 때 실행할 문장
}

<script>
    if(273 < 100) { // 표현식 273 < 100이 참일 때 실행
        alert('273 < 100 => true')
    }

    let str = ' ';
    if (!str) { // 조건문 안에서 자동으로 형변환. 공백도 글자로 취급
        alert('빈 문자열입니다.'); // false라서 실행 안됨.
    }

    str = ' '; 
    if (!str.trim()) { // 조건문 안에서 자동으로 형변환.
        alert('빈 문자열입니다.') // trim()은 공백제거 함수. true라서 실행됨.
    }

    str = '값입력';
    if (str) { // 조건문 안에서 자동으로 형변환
        alert('빈 문자열이 아닙니다.'); // true라서 실행됨.
    }
</script>

if-else문

<!-- if-else 조건문 기본형 -->
if (불 값이 나오는 표현식) {
    불 값이 참일 때 실행할 문장
} else {
    불 값이 거짓일 때 실행할 문장
}

<script>
    // 오전과 오후 구분하기
    const date = new Date(); // 현재 날짜와 시간을 갖는 객체 생성
    const hour = date.getHours();

    if (hour < 12) {
        alert('오전입니다.');
    } else {
        alert('오후입니다.');
    }
    // if-else문을 삼항연산자로 변경
    console.log((hour < 12 ? '오전입니다.' : '오후입니다.'))
</script>

중첩 조건문 : 조건문 안에 조건문을 중첩해서 사용하는 것

<script>
    // 변수를 선언
    const date = new Date(); // 현재 날짜와 시간을 갖는 객체생성.
    const hour = date.getHours(); // 현재시간을 0 ~ 23 사이의 값으로 출력하는 메소드.

    // if-else 문
    if (hour < 11) { //표현식 hour < 11가 참일 때
        alert("아침 먹을 시간입니다.")
    } else { // 표현식 hour < 11가 거짓일 때 실행
        if (hour < 15) { // 표현식 hour < 15가 참일 때 실행.
            alert("점심 먹을 시간입니다.");
        } else { // 표현식 hour < 15가 거짓일 때 실행.
            alert("저녁 먹을 시간입니다.")
        }
    }
    // else-if 문
    if (hour < 11) { //표현식 hour < 11가 참일 때
            alert("아침 먹을 시간입니다.")
        } else if (hour < 15) { // 표현식 hour < 15가 참일 때 실행.
                alert("점심 먹을 시간입니다.");
        } else { // 표현식 hour < 15가 거짓일 때 실행.
                alert("저녁 먹을 시간입니다.")
        }
</script>

  💡  false, undefined, null, 0, NaN이나 빈 문자열('')이 아닌 값은 조건문으로 테스트되었을 때, 실제로는 true를 리턴하므로, 변수가 참인지 혹은 값이 존재하는지를 테스트하기 위해 변수 이름 그 자체를 사용할 수 있다. 

let shoppingDone = false;
let childsAllowance;

if (shoppingDone) {
  // 명시적으로 '=== true'를 명시할 필요가 없습니다
  childsAllowance = 10;
} else {
  childsAllowance = 5;
}

2.  switch 문

🐰  switch 조건문의 괄호 안에 비교할 값을 입력  ▶️  이때 입력한 값을 기준으로 특정 코드를 실행

      🥕  처리할 명령이 많을 때 주로 사용

      🥕  switch 문의 조건은 case 문의 값과 일대일로 일치해야 함

🐰  일반적으로 case 뒤에는 정수나 문자열이 오는 것으로 사용
🐰  break 키워드는 switch 조건문이나 반복문을 빠져나가기 위해 사용하는 키워드
        ▶️  코드를 읽다가 break 키워드를 만나면 break 키워드를 감싼 switch 조건문이나 반복문을 완전히 빠져 나감

<!-- 기본형 -->
switch (조건문) {
    case 조건A :
        조건이 A일 때 실행할 명령문;
        break;
    case 조건B :
        조건이 B일 때 실행할 명령문;
        break;
    default :
        break;
}

<script>
    // 변수를 선언
    const input = Number(prompt('숫자를 입력하세요.', '숫자'));

    // 조건문
    switch (input % 2) { // 나머지 연산자를 이용해서 홀수와 짝수를 구분
        case 0:
            alert('짝수입니다.');
            break;
        case 1:
            alert('홀수입니다.');
            break;
        default:
            alert('숫자가 아닙니다.'); // 숫자가 아닌걸 입력해도 에러가 나지 않음.
            break;
    }
</script>

<script>
    /* 사용자에게 월을 입력받아서 switch 이용해 계절을 출력.
       다만 1~12만 입력된다고 가정. */

    const month = Number(prompt("월을 입력하세요. (숫자 1~12 중 선택)"));

    switch (month) {
        case 12: case 1: case 2:
            document.write(`${month}월은 겨울 입니다.`);
            break;
        case 3: case 4: case 5:
            document.write(`${month}월은 봄 입니다.`);
            break;
        case 6: case 7: case 8:
            document.write(`${month}월은 여름 입니다.`);
            break;
        case 9: case 10: case 11:
            document.write(`${month}월은 가을 입니다.`)
            break;
    }
</script>

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]