1. while 문

1) 일반적인 while 반복문


👩🏻‍💻  for문과는 다르게 증감되는 인덱스가 있으면 코드에서 직접 처리해야 함

fun main() {
    // current 변수가 인덱스의 역할
    var current = 1
    val until = 12
    while (current < until) {
        println("현재 값은 ${current}입니다.")
        current++
    }
}
/*
현재 값은 1입니다.
현재 값은 2입니다.
현재 값은 3입니다.
...
현재 값은 9입니다.
현재 값은 10입니다.
현재 값은 11입니다.
*/


2) do와 함께 사용하기


👩🏻‍💻  do와 함께 사용하면 while 문의 조건식과 관계없이 do 블록 안의 코드를 한 번 실행

fun main() {
    var game = 1
    val match = 6
    do {
        println("${game}게임 이겼습니다. 우승까지 ${match - game}게임 남았습니다.")
        game++
    } while (game < match)
}    
/*
1게임 이겼습니다. 우승까지 5게임 남았습니다.
2게임 이겼습니다. 우승까지 4게임 남았습니다.
3게임 이겼습니다. 우승까지 3게임 남았습니다.
4게임 이겼습니다. 우승까지 2게임 남았습니다.
5게임 이겼습니다. 우승까지 1게임 남았습니다.
*/


3) while과 do ~ while의 차이점


👩🏻‍💻  가장 큰 차이점은 최초 값이 조건식을 만족하지 않았을 경우 실행 코드가 달라지는 것
👩🏻‍💻  do ~ while 은 조건과 상관없이 처음 한 번 로그가 출력

fun main() {
    game = 6
    while (game < match) {
        println("while 테스트입니다.")
        game++
    }

    // do ~ while 테스트
    game = 6
    do {
        println("do ~ while 테스트 입니다.")
        game++
    } while (game < match)
}
/*
do ~ while 테스트 입니다.
*/

 


2. 반복문 제어하기


👩🏻‍🚀  반복문이 실행되는 도중에 특정 조건에서 반복문을 벗어나거나 다음 반복문으로 넘어가야 하는 상황에서 사용

1) break : 반복문 탈출하기


    👾  반복문 안에서 break를 만나면 반복문을 탈출할 수 있음
    👾  특정 조건에서 무조건 반복문 블록에서 벗어날 때 사용

fun main() {    
    for (index in 1..10) {
        println("현재 index는 ${index}입니다.")
        if (index > 5) { // index가 5보다 크면 break 명령어로 현재 반복문을 벗어남
            break
        }
    }
}

/*
현재 index는 1입니다.
현재 index는 2입니다.
현재 index는 3입니다.
현재 index는 4입니다.
현재 index는 5입니다.
현재 index는 6입니다.
*/

 



2)  continue : 다음 반복문으로


    👾  반복문 내에서 continue를 만나면 continue 다음 코드는 실행하지 않고  반복문의 코드의 처음으로 돌아감

fun main() {

    for (except in 1..10) {
        // except가 3보다 크고 8보다 작으면 continue 명령으로 로그를 찍지 않고 다음 반복문으로 이동
        if (except > 3 && except < 8) {
            continue
        }
        println("현재 index는 ${except}입니다.")
    }
}
/*
현재 index는 1입니다.
현재 index는 2입니다.
현재 index는 3입니다.
현재 index는 8입니다.
현재 index는 9입니다.
현재 index는 10입니다.
*/

 


응용 예제


   📌  while문과 Range.random() 메소드를 이용해서 2개의 주사위를 던졌을 때 나오는 눈을 (눈1, 눈2) 형태로 출력하고,
         눈의 합이 5가 아니면 계속 주사위를 던지고, 눈의 합이 5이면 실행을 멈추는 코드를 작성해 보세요.
         눈의 합이 5가 되는 조합은 (1, 4), (4, 1), (2, 3), (3, 2)입니다.
       예 ) (5, 1)
              (4, 4)
              (6, 5)
              (5, 2)
              (3, 6)
              (1, 2)
              (2, 3)

💡  Range.random() : 어떤 숫자 범위가 정의된 Range 객체의 random() 메소드를 호출하면 그 범위의 무작위 숫자가 리턴
fun main() {

    while (true) {
        val num1 = (1..6).random()
        val num2 = (1..6).random()
        println("($num1, $num2)")

        if (num1 + num2 == 5) {
            break;
        }
    }
    println()

    do {
        val num1 = (1..6).random()
        val num2 = (1..6).random()
        println("($num1, $num2)")

    } while (num1 + num2 != 5)

}

 


 
    📌  음수가 입력될 때까지, 사용자가 입력한 정수의 합계를 계산하여 출력하는 프로그램을 작성하세요.
          while문을 사용, break 사용하지 말 것
          1) while문으로 작업
          2) do while문으로 작업

fun main() {

    var sum = 0
    var value = 0

    while (value >= 0) {
        sum += value
        print("정수를 입력하세요.")
        value = readln().toInt()
    }
    println("정수의 합계는 ${sum}입니다.")

    do {
        print("정수를 입력하세요.")
        val value = readln().toInt()
        if (value >= 0) {
            sum += value
        }
    } while (value >= 0)
    println("정수의 합계는 ${sum}입니다.")
}

 



    📌  컴퓨터가 주사위를 던지면 사용자가 주사위의 숫자를 맞히는 프로그램을 완성하세요.
          사용자가 맞힐 때까지 게임은 계속 됩니다.
          예)
          주사위 값은 얼마일까요? >>> 5
          오답입니다. 다시 시도하세요.
          주사위 값은 얼마일까요? >>> 1
          1! 정답입니다.
         

fun main() {

    // 1. break 사용
    val num = (1..6).random()
    while (true) {
        print("주사위 값은 얼마일까요? >>> ")
        var inputNum = readln().toInt();
        if (num == inputNum) {
            println("$inputNum! 정답입니다.")
            break
        } else {
            println("오답입니다. 다시 시도하세요.")
        }
    }

    println()

    // 2. break 사용 x
    val num2 = (1..6).random()
    do {
        print("주사위 값은 얼마일까요? >>> ")
        var inputNum = readln().toInt()
        if (num2 == inputNum) {
            println("$inputNum! 정답입니다.")
        } else {
            println("오답입니다. 다시 시도하세요.")
        }
    } while (num2 != inputNum)

}

 

 

 

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

'Programming Language > Kotlin' 카테고리의 다른 글

[Kotlin] 함수 function  (0) 2024.04.09
[Kotlin] 배열 Array  (0) 2024.04.08
[Kotlin] for 반복문  (0) 2024.04.05
[Kotlin] when 조건문, 범위 클래스  (1) 2024.04.05
[Kotlin] if 조건문  (0) 2024.04.05


1.  회원가입 예제

body 태그
<body>
<div id="container">
    <h1>회원 가입</h1>
    <form action="#" id="register">
        <ul id="user-info">
            <li>
                <label for="user-id" class="field">아이디</label>
                <input type="text" name="user-id" id="user-id" placeholder="4~15자리로 입력" required>
            </li>
            <li>
                <label for="email" class="field">이메일</label>
                <input type="email" name="email" id="email" required>
            </li>
            <li>
                <label for="user-pw1" class="field">비밀번호</label>
                <input type="password" name="user-pw1" id="user-pw1" placeholder="8자리 이상" required>
                <span class="trans">문자로 변환</span>
            </li>
            <li>
                <label for="user-pw2" class="field">비밀번호 확인</label>
                <input type="password" name="user-pw2" id="user-pw2" required>
            </li>
            <li>
                <label class="field">메일링 수신</label>
                <label class="r"><input type="radio" value="yes" name="mailing">예</label>
                <label class="r"><input type="radio" value="no" name="mailing">아니오</label>
            </li>
        </ul>
        <ul id="buttons">
            <li>
                <input type="button" class="btn btnBlack" value="가입하기">
            </li>
            <li>
                <input type="reset" class="btn btnGray" value="취소">
            </li>
        </ul>
    </form>
</div>
</body>

 

stylesheet
#container{
    width:600px;
    margin:0 auto;
}
ul {
    list-style:none;
}
ul li {
    clear:both;
}
.field {
    float:left;
    width:100px;
    font-weight:bold;
    font-size:0.9em;
    line-height: 55px;
    text-align:right;
    margin-right:15px;
}
input[type="text"], input[type="password"], input[type="email"] {
    float:left;
    width:350px;
    height:35px;
    border:1px solid #aaa;
    border-radius:5px;
    padding:5px;
    margin:10px 0;
    float:left;
}

.r {
    line-height:55px;
}

#buttons > li {
    display:inline-block;
}
input[type="button"], input[type="reset"] {
    width:250px;
    height:50px;
    margin-right:10px;
    border:1px solid #ccc;
    background:#eee;
    font-size:0.9em;
}

 


 

script 코드 작성

 회원가입 페이지 입력 값 검증하기
         1. [가입하기] 버튼을 클릭하면 아이디 글자 수 확인하기

         2. 비밀번호 확인하기
           1) 비밀번호 필드에 입력한 내용의 글자 수가 8자리 이상인지 확인
           2) 비밀번호 확인 필드에 입력한 값이 비밀번호의 필드 값과 같은지 확인

         3. 비밀번호 패스워드 변환 <-> 문자 변환
<head>
    <link rel="stylesheet" href="css/register.css">
    <script>
        
        document.addEventListener('DOMContentLoaded', function () {
            const frmRegister = document.getElementById('register'); // 폼태그
            const btnSubmit = document.querySelector('.btnBlack'); // 가입 버튼
            const userName = document.getElementById('user-id'); // id태그
            const pw1 = document.querySelector('#user-pw1'); // 비밀번호1 필드
            const pw2 = document.querySelector('#user-pw2'); // 비밀번호2 필드

            btnSubmit.addEventListener('click', function () {
             // 가입하기 버튼 클릭했을 때
                if (userName.value.length > 15 || userName.value.length < 4) {
                    alert('4~15자리로 입력하세요.'); // 오류 메시지 출력

                    /*
                    select() : 사용자가 기존에 입력한 값을 선택
                    focus() : 사용자가 기존에 입력한 값을 지우고 새로운 값을 입력하도록 텍스트 필드에 커서를 가져다 놓음.
                     */
                    userName.select();
                    return;
                }
                frmRegister.submit();
            });

            pw1.addEventListener('change', function () { 
            // 비번1 입력했을 때 오류 확인
            
                if (pw1.value.length < 8) {
                    alert('비밀번호는 8자리 이상이어야 합니다.'); // 오류 메시지 표시
                    pw1.value='';
                    pw1.focus();
                }
            });

            pw2.addEventListener('change', function () {
             // 비번 2 입력했을 때 오류 확인
             
                if (pw1.value !== pw2.value) {
                    alert('암호가 다릅니다. 다시 입력하세요.'); // 오류 메시지 표시
                    pw2.value = '';
                    pw2.focus();
                }
            });

            const btnTrans = document.querySelector('span.trans'); 
            // 비밀번호 문자열 변환 태그
            
            btnTrans.addEventListener('click', function (e) {

                if (pw1.getAttribute('type') === 'password') {
                    pw1.setAttribute('type', 'text');
                    e.currentTarget.textContent = '패스워드로 변환';

                } else {
                    pw1.setAttribute('type', 'password');
                    e.currentTarget.textContent = '문자로 변환';
                }

            });
        });
    </script>
</head>

 

 

 

 

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


1.  연산자의 우선순위와 결합규칙

  👩🏻‍🚀  산술 > 비교 > 논리 > 대입 (제일 마지막에 수행)

  👩🏻‍🚀  단항 > 이항 > 삼항

 

    ⚡️  단항 연산자와 대입 연산자를 제외한 모든 연산의 진행방향은 왼쪽에서 오른쪽

              ➡️ 오른쪽에서 왼쪽으로 연산을 수행


2.  단항 연산자

(1) 증감 연산자

 

    ① 증가 연산자 (++) 피연산자의 값을 1 증가

    ② 감소 연산자 (--)  피연산자의 값을 1 감소

      ⚡️  전위형 : ++a  <증가 후 출력>

      ⚡️  후위형 : a++  <출력 후 증가>

            ** 단독으로 쓰이는 경우엔 전위나 후위 결과값 같음!!

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

		int i = 5, j = 5;
		System.out.println(i++); // 5. 출력 후 증가
		System.out.println(++j); // 6. 증가 후 출력

		System.out.println("i = " + i + ", j = " +j); // 6 6 실행 후에는 동일한 값
	}
}

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

		int a = 1;
		System.out.println(a); // 1
		
		a++; // a = a + 1;
		System.out.println(a); // 2
		System.out.println(++a); // 3
		System.out.println(a++); // 3
		System.out.println(a); // 4

	}
}

 


3.  대입 연산자

  ✏️  변수와 같은 저장공간에 '값 또는 수식의 연산결과'를 저장하는데 사용됨

  ✏️  오른쪽 피연산자의 값을 왼쪽 피연산자에 저장

💡 복합 대입 연산자
    * a = a + 2  ▶️  a += 2  (덧셈)
    * a = a - 3   ▶️  a -= 3   (뺄셈)
    * a = a / 2    ▶️  a /= 2   (나눗셈)
    * a = a * 3   ▶️  a *= 3   (곱셈)
public class Exam013 {
	public static void main(String[] args) {
		
		int a = 3;
		int b = 5;
		
		System.out.println(b); // 5
		b = a; // copy
		System.out.println(b); // 3
		
		System.out.println(a); // 3
		a += 1; // a = a + 1
		System.out.println(a); // 4
		a /= 2; // a = a / 2
		System.out.println(a); // 2
		a *= a; // a = a * a
		System.out.println(a); // 4
		
	}

}

 


4.  비교 연산자

  ✏️  주로 조건문과 반복문의 조건식에 사용되며 연산결과는 오직 true 와 false 둘 중 하나

  1) 대소비교 연산자 ( <, >, <=, >= )

비교연산자
연산결과
>
좌변 값이 크면 true 아니면 false
<
좌변 값이 작으면 true 아니면 false
>=
좌변 값이 크거나 같으면 true 아니면 false
<=
좌변 값이 작거나 같으면 true 아니면 false
public class Exam008 {
	public static void main(String[] args) {

		int a = 10;
		int b = 20;
		int c = 30;
		System.out.println(a < b); // t
		System.out.println(a > b); // f
		System.out.println(a + b <= c); // 산술연산자가 비교연산자 보다 먼저 실행. t
		System.out.println(a + b >= c); // t
	}
}

 

  2) 등가비교 연산자 (==, !=)

 

 

비교연산자
연산결과
==
두 값이 같으면 true 아니면 false
!=
두 값이 다르면 true 아니면 false
public class Exam009 {
	public static void main(String[] args) {

		double a = 3.14;
		double b = 5.14;
		System.out.println(a == b); // false
		System.out.println(a != b); // true
		
		/* 문자열의 경우 equals() 메서드를 이용해서 값을 비교 */
		String c1 = "Hello JAVA!";
		System.out.println(c1.equals("Hello java!")); // false
		System.out.println(c1.equals("Hello JAVA!")); // true
		
	}
}

 


5.  논리 연산자 

  ✏️  || (OR 결합) : 피연산자 중 어느 한 쪽만 true이면 true를 결과로 얻는다

  ✏️  && (AND결합) : 피연산자 양쪽 모두 true이어야 true를 결과로 얻는다

public class MyOper_21 {
	public static void main(String[] args) {
		// 논리곱
		System.out.println(true && true); // true 1 * 1 = 1
		System.out.println(true && false);// false 1 * 0 = 0
		System.out.println(false && true); // false 0 * 1 = 0
		System.out.println(false && false); // false 0 * 0 = 0
		
		// 논리합
		System.out.println(true || true); // true 1 + 1 = 2
		System.out.println(true || false); // true 1 + 0 = 1
		System.out.println(false || true); // true 0 + 1 = 1
		System.out.println(false || false); // false 0 + 0 = 0
	}
}

public class Exam010 {
	public static void main(String[] args) {
		/* 논리 연산자
		 * 2항 연산자이고, 항은 boolean 값이고 결과도 boolean
		 */
		int a = 10;
		// 비교연산자가 논리연산자 보다 먼저 실행
		System.out.println(5 < a && a < 15); // true -> true && true
		System.out.println((5 < a && a < 15) && a % 2 == 0); // true -> true && true
		
		a = 4;
		System.out.println((5 < a && a < 15) && a % 2 == 0); // false -> false && true
		System.out.println((5 < a && a < 15) || a % 2 == 0); // true -> false || true

	}
}

 


6.  삼항 연산자

a ? b : c

 

    - a 값이 true면 b, false면 c 결과 값이 도출

 

import java.util.Scanner;

public class Exam012 {
	public static void main(String[] args) {
		
		int age = 20;
		System.out.println(age > 19 ? "성인입니다" : "청소년입니다");
		// 성인입니다
        
        Scanner scanner = new Scanner(System.in);
        
		// 같은 줄에서 입력을 받기 위해 prinln() 대신 print() 사용.
		System.out.print("나이를 입력하세요: ");
		int age1 = scanner.nextInt();
		
		System.out.println(age1 > 20 ? "성인입니다" : "청소년입니다" );
		scanner.close();

	}
}

 

 


💡  키보드 입력 데이터 변수에 저장하는 방법
       Scanner scanner = new Scanner(System.in);
         ➡️  생성된 scanner 객체를 변수에 대입
       int 변수명 = scanner.nextInt();  /  String 변수명 = scanner.nextLine();
         ➡️  입력된 문자열을 변수에 대입

    ** nextLine()메소드는 Enter를 치기 전까지 쓴 문자열을 모두 리턴
         next() 메소드는 스페이스 즉 공백 전까지 입력받은 문자열을 리턴

       (
출처: https://deftkang.tistory.com/55 [deftkang의 IT 블로그:티스토리])

 

import java.util.Scanner;

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

		String name;
	    int age;
		
		Scanner scanner = new Scanner(System.in);
		
		System.out.print("이름을 입력하시오: ");
		name = scanner.nextLine(); // 문자열 입력
		System.out.println("나이를 입력하시오: ");
		age = scanner.nextInt(); // 정수 입력
		
		System.out.println(name + "님 안녕하세요! " + age + "살이시네요.");
		scanner.close();

	}
}

 

사용자로부터 숫자를 입력받아 cm를 inch 단위로 변환하여 출력하는 프로그램
    * 1cm는 0.393701 inch로 반환
    * 예) cm 단위의 숫자를 입력해주세요. * 입력 > 24 * 24cm는 9.448824 inch 입니다. 
import java.util.Scanner;

public class Ex_07 {
	public static void main(String[] args) {
		
		Scanner scanner = new Scanner(System.in);
		 
		int cm;
		double inch;
		
		System.out.print("cm 단위의 숫자를 입력해주세요. ");
		System.out.print("입력 > ");
		cm = scanner.nextInt();
		
		inch = cm * 0.393701;
		System.out.println(cm + "cm는 " + inch + "inch 입니다.");
		
		scanner.close();
	
	}
}

사용자로부터 숫자를 입력받아 달러를 원으로 변환하여 출력하는 프로그램
    * 1달러는 1289.50원으로 반환
    * 예) 달러 단위의 금액을 입력해주세요.  입력 > 24  -> 원화 : 30948.0 
import java.util.Scanner;

public class Ex_08 {
	public static void main(String[] args) {
		
		Scanner scanner = new Scanner(System.in);
		
		int dollar;
		double won;
		
		System.out.print("달러 단위의 금액을 입력해주세요. ");
	    System.out.print("입력 > ");
	    dollar = scanner.nextInt();
	    
	    won = dollar * 1289.50;
	    System.out.println("-> 원화 : " + won );
	    
	    scanner.close();

	}
}

 

 

 

 

[ 내용 참고 : IT 학원 강의 및 자바의 정석 3rd ]


1.  for 반복문

🐝  for 다음의 괄호 (()) 안에 반복할 범위를 지정하면 for 블록의 코드가 지정한 횟수만큼 반복해서 동작

for (반복할 범위) {    실행 코드    }

 



1) for in .. (온점 2개) : 일반적인 형태의 for 반복문


  🍯  시작값과 종료값으로 지정한 숫자 범위만큼 코드를 반복하는 일반적인 방법
  🍯  in을 사용해서 반복하는 범위의 숫자를 변수에 담아두고 사용

for (변수 in 시작값..종료값) {    실행 코드    }  
fun main() {
    // 1부터 10까지 열 번 반복하면서 그 숫자를 변수 index에 가장 먼저 저장하고, for 블록의 코드를 실행
    // 첫 번째 반복에서는 변수 index에 '1'이 저장되고, 두 번째 반복에서는 index에 '2'가 저장
    for (index in 1..10) {
        println("현재 숫자는 ${index}")
    }
}
/*
현재 숫자는 1
현재 숫자는 2
현재 숫자는 3
현재 숫자는 4
현재 숫자는 5
현재 숫자는 6
현재 숫자는 7
현재 숫자는 8
현재 숫자는 9
현재 숫자는 10
*/


2) until : 마지막 숫자 제외하기

 

  🍯  시작값과 종료값 사이의 .. 대신에 until을 사용하면 '종료값 이전'까지만 반복

  🍯  배열의 index가 항상 0부터 시작하기 때문에 배열의 인덱스를 사용하여 처리하는 코드에서 사용
         ➡️ 배열의 크기는 항상 '마지막 인덱스 + 1의 값'
         ➡️ 반복을 할 때 배열의 크기 바로 전까지만 반복

for (변수 in 시작값 until 종료값) {    실행 코드    }
fun main() {

    val array: Array<String> = arrayOf("JAN", "FEB", "MAR", "APR", "MAY", "JUN")
    for (index in 0 until array.size) {
        println("현재 월은 ${array[index]}입니다.")
    }
}
/*
현재 월은 JAN입니다.
현재 월은 FEB입니다.
현재 월은 MAR입니다.
현재 월은 APR입니다.
현재 월은 MAY입니다.
현재 월은 JUN입니다.
*/


 3) step : 건너뛰기


  🍯  1부터 100까지 반복하면서 3의 배수만 사용하고 싶을 때와 같은 상황에 사용
  🍯  step을 사용하면 for 문의 블록을 step 수만큼 건너뛰어서 실행

for (변수 in 시작값..종료값 step 3) {    실행 코드    }
fun main() {
    for (index in 0..100 step 3) {
        println("현재 숫자는 ${index}")
    }
}
/*
현재 숫자는 0
현재 숫자는 3
현재 숫자는 6
...
현재 숫자는 93
현재 숫자는 96
현재 숫자는 99
*/

 


4) downTo : 감소시키기


  🍯  .. 대신 downTo를 사용하면 큰 수에서 작은 수로 감소시키면서 실행할 수 있음

fun main() {

    for (index in 10 downTo 0) {    println("현재 숫자는 ${index}")    }   
    
    // 증가할 때와 같이 step을 사용할 수도 있음
    for (index in 10 downTo 0 step 3) {
        println("건너뛰면서 감소시키기: ${index}")
    }
}

/*
현재 숫자는 10
현재 숫자는 9
현재 숫자는 8
...
현재 숫자는 2
현재 숫자는 1
현재 숫자는 0

건너뛰면서 감소시키기: 10
건너뛰면서 감소시키기: 7
건너뛰면서 감소시키기: 4
건너뛰면서 감소시키기: 1
*/

 


5) 배열, 컬렉션에 들어 있는 엘리먼트 반복하기


  🍯  배열이나 컬렉션을 엘리먼트의 개수만큼 반복하면서 사용

  🍯  인덱스를 사용하는 방법보다 더 편하고 가독성이 좋음

for (변수 in 배열 또는 컬렉션) {    실행 코드    }    

 

fun main() {

    val arrayMonth = arrayOf("JAN", "FEB", "MAR", "APR", "MAY", "JUN")
    for (month in arrayMonth) {
        println("현재 월은 ${month}입니다.")
    }

    // withIndex() 함수를 이용하면 요소의 인덱스도 함께 가져올 수 있음
    val students = arrayOf("John", "Peter", "Jane")
    for ((index, name) in students.withIndex()) {
        println("Index: $index, Name: $name")
        // Index: 0, Name: John
        // Index: 1, Name: Peter
        // Index: 2, Name: Jane
    }
}

 


응용 예제
fun main() {
    /*
    2개의 주사위를 던지는 게임이 있다고 가정하자.
    중첩 for문을 이용하여 2개의 주사위의 합이 6이 되는 경우를 출력하는 코드 작성.
    (1, 5)
    (2, 4)
    (3, 3)
    (4, 2)
    (5, 1)
     */

    for (i in 1..6) {
        for (j in 6 downTo 1) {
            if (i+j == 6) {
                println("(${i}, ${j})")
            }
        }
    }

}

 

 

 

 

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


1.  조건문 when

🐰  다른 언어의 switch문은 if문의 연산식에서 사용되는 비교 연산자 '==' 만 사용해서 같은 값인지를 비교
🐰  코틀린을 제외한 거의 모든 프로그래밍 언어에서는 switch라는 이름으로 사용되며 선택문이라고 불리기도 함
🐰  코틀린의 when문은 다른 언어와는 다르게 같은 값뿐만 아니라 범위 값도 처리할 수 있고 사용 방법도 더 많음
       ➡️  특정 값을 선택할 수 있는 switch의 사용법에 if문의 범위 비교 기능이 더해진 if문의 확장판



1) 일반적인 형태의 when 사용하기


    ✏️  when 다음에 괄호 (()) 를 작성하고 괄호 안에는 주로 비교 대상 파라미터로 사용할 변수명을 입력
    ✏️  if에서처럼 괄호 다음에 중괄호 ({})를 사용해서 when 블록을 구분하고 블록 내부에서 비교할 값은

          화살표 연산자 Arrow Operator (->)를 사용해서 선택

when (파라미터) {
    비교값 -> {
            변수값이 비교값과 같다면 이 영역이 실행
     }
 }
    *  switch문과 비교하면 값을 비교하는 줄 앞의 case가 없어지고, 비교값 다음의 콜론이 화살표 연산자(->)로 대체
when (파라미터) {
    비교값1 -> {
            변수값이 비교값1과 같다면 이 영역이 실행.
    }
    비교값2 -> {
            변수값이 비교값1과 같다면 이 영역이 실행.
    }
    else -> {
            변수값이 앞에서 비교한 값들과 다르면 이 영역이 실행
    }
}
fun main() {

    val now = 10
    when(now) {
        8 -> {
            println("현재 시간은 8시 입니다.")
        }
        9 -> {
            println("현재 시간은 9시 입니다.")
        }
        else -> { // 위의 조건에 맞지 않으면 else 다음 코드가 실행
            println("현재 시간은 9시가 아닙니다.")
        }
    }
}


2) 콤마로 구분해서 when 사용하기


  ✏️  특정 값을 비교하는 데 결과 처리가 동일하다면 콤마(,)로 구분해서 한 번에 비교할 수 있음

fun main() {
    val time = 9
    when (time) {
        8, 9 -> {
            println("현재 시간은 8시 또는 9시입니다.")
        }
        else -> {
            println("현재 시간은 9시가 아닙니다.")
        }
    }
}


3) 범위 값을 비교하기


  ✏️  in을 사용해서 범위 값을 비교할 수 있음

fun main() {
    val ageOfMichael = 19
    when (ageOfMichael) {
        in 10..19 -> {
            println("마이클은 10대 입니다.")
        }
        !in 10..19 -> {
            println("마이클은 10대가 아닙니다.")
        }
        else -> {
            println("마이클의 나이를 알 수 없습니다.")
        }
    }
}


 4) 파라미터 없는 when 사용하기


  ✏️  when 다음에 오는 괄호를 생략하고 마치 if문처럼 사용할 수 있음

fun main() {

    val currentTime = 6
    when {
        currentTime == 5 -> {
            println("현재 시간은 5시입니다.")
        }
        currentTime > 5 -> {
            println("현재 시간은 5시가 넘었습니다.")
        }
        else -> {
            println("현재 시간은 5시 이전입니다.")
        }
    }
}

 


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

   예) 성적을 입력하세요 : 90
      입력하신 성적은 90점이고, 학점은 A입니다.
    */

    print("성적을 입력하세요 : ")
    val score = readln().trim().toInt()

    val grade = when (score) {
        in 90..100 -> {'A'}
        in 80..89 -> {'B'}
        in 70..79 -> {'C'}
        in 60..69 -> {'D'}
        else -> {'F'}
    }

    println("입력하신 성적은 ${score}점이고, 학점은 ${grade}입니다.")
}

 


2.  범위 클래스

🐰  코틀린을 이용하면 특정 범위의 값들을 간편하게 표현할 수 있음
    ⚡️ 범위 클래스로는 IntRange, LongRange, CharRange등이 있음
          예) IntRange 클래스를 사용해 1에서 5까지 숫자의 범위를 생성하는 코드

🐰  값 포함 여부를 확인할 때 '변수명.containts(값)' 사용

fun main() {

    val numRange: IntRange = 1..5
    println(numRange) // 1..5

    println(numRange.contains(3)) // true
    println(numRange.contains(10)) // false

    /*
    알파벳의 범위도 마찬가지. CharRange 클래스를 사용
     */
    val charRange: CharRange = 'a'..'e'
    println(charRange.contains('b')) // true
    println(charRange.contains('z')) // false
}

 

 

 

 

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


1.  드롭다운 목록 활용하기

🐰  드롭다운 목록은 select 태그로 구현

 드롭 다운 목록을 선택했을 때(값이 변경 되었을 때) 어떤 것을 선택했는지 출력
<head>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const select = document.querySelector('select');
            const p = document.querySelector('p');

            select.addEventListener('change', (event) => {
                const options = event.currentTarget.options; // option을 배열로 반환
                const index = event.currentTarget.options.selectedIndex; 
                // 선택한 index 추출
                console.log(options)

                p.textContent = `선택: ${options[index].textContent}`; 
                // 선택한 option 태그를 추출

            })
        });
    </script>
</head>
<body>
    <select>
        <option>떡볶이</option>
        <option>순대</option>
        <option>오뎅</option>
        <option>튀김</option>
    </select>
    <p>선택: 떡볶이</p>
</body>
💡  글자 입력 양식의 change 이벤트
    -  입력 양식은 값이 변경될 때 change 이벤트를 발생.
    -  글자 입력 양식은 입력 양식을 선택(focus 상태)해서 글자를 입력하고, 선택을 해제(blur)할 때 change 이벤트를 발생함
    -  따라서 사용자가 입력하는 중에는 change 이벤트가 발생 x

💡 selectedIndex : 선택한 option의 index 반환

 


 

💡 multiple select 태그 : select 태그에 multiple 속성을 부여하면 ctrl이나 shift를 누르고 복수의 항목을 선택 가능
<head>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const select = document.querySelector('select');
            const p = document.querySelector('p');

            select.addEventListener('change', (event) => {
                const options = event.currentTarget.options; // option을 배열로 반환
                // console.log(options)
                const list = []

                for (const option of options) { // options에는 forEach() 메소드가 없어서 for문을 돌림
                    //console.log(option.selected)
                    if (option.selected) { // selected 속성 확인
                        list.push(option.textContent);
                    }
                }
                p.textContent = `선택: ${list.join(',')}`

            })
        });
    </script>
</head>
<body>
    <select multiple>
        <option>떡볶이</option>
        <option>순대</option>
        <option>오뎅</option>
        <option>튀김</option>
    </select>
    <p></p>
</body>

 

 


2.  체크 박스 활용

🐰  체크박스의 체크 상태를 확인할 때는 입력양식의 checked 속성을 사용

체크 상태일때만 타이머를 증가시키는 프로그램
<head>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const input = document.querySelector('input');
            const h1 = document.querySelector('h1');
            let count = 0
            let timerId;

            input.addEventListener('change', (event) => {
                console.log(event.currentTarget.checked);
                if (event.currentTarget.checked) { //체크 상태
                    timerId = setInterval(() => {
                        h1.textContent = `${count++}초`
                    }, 1000)
                } else { // 체크 해제 상태
                    clearInterval(timerId)
                }
            });
        });
    </script>
</head>
<body>
    <input type="checkbox">
    <span>타이머 활성화</span>
    <h1></h1>
</body>

 


3.  라디오 버튼 활용

🐰  라디오 버튼은 name 속성이 동일하면 하나만 선택할 수 있음

🐰  체크박스와 마찬가지로 checked 속성 사용

<head>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 문서 객체 추출하기
            const output = document.querySelector('#output');
            const radios = document.querySelectorAll('[name=pet]');

            // 모든 라디오 버튼에
            radios.forEach((radio) => {
                // 이벤트 연결
                radio.addEventListener('change', (event) => {
                    const current = event.currentTarget;
                    if (current.checked) {
                        output.textContent = `좋아하는 애완동물은 ${current.value}이시군요!`;
                    }
                });
            });

        });
    </script>
</head>
<body>
    <h3># 좋아하는 애완동물을 선택해주세요</h3>
    <label><input type="radio" name="pet" value="강아지">
        <span>강아지</span></label>
    <label><input type="radio" name="pet" value="고양이">
        <span>고양이</span></label>
    <label><input type="radio" name="pet" value="햄스터">
        <span>햄스터</span></label>
    <label><input type="radio" name="pet" value="기타">
        <span>기타</span></label>
    <hr>
    <h3 id="output"></h3>
</body>

💡  name 속성이 없는 라디오 버튼
    -  버튼을 여러 개 선택할 수 있다. 한 번 선택하고 나면 취소할 수도 없음

4.  기본 이벤트 막기

🐰  기본 이벤트 : 어떤 이벤트가 발생했을 때 웹 브라우저가 기본적으로 처리해주는 것
🐰  기본 이벤트를 제거할 때는 event 객체의 preventDefault() 메소드를 사용

 

이미지 마우스 오른쪽 버튼 클릭 막기
  웹 브라우저는 이미지에서 마우스 오른쪽 버튼을 클릭하면 컨텍스트 메뉴 contextmenu를 출력
<head>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const imgs = document.querySelectorAll('img');

            imgs.forEach((img) => {
                img.addEventListener('contextmenu', (event) => {
                    event.preventDefault(); // 컨텍스트 메뉴를 출력하는 기본 이벤트 제거
                });
            });
        });

    </script>
</head>
<body>
    <img src="http://placebear.com/300/300" alt="">
</body>

메소드 사용 전 / 후


체크 때만 링크 활성화 하기
<head>
    <script>

        document.addEventListener('DOMContentLoaded', function () {
            let status = false;
        
            const checkbox = document.querySelector('input');
            checkbox.addEventListener('change', (event) => {
                status = event.currentTarget.checked;
            });
            
            const link = document.querySelector('a');

            link.addEventListener('click', (event) => {
                if (!status) {
                    event.preventDefault(); // status가 false가 아니면 링크의 기본 이벤트 제거.
                }
            });

        });

    </script>
</head>
<body>
    <input type="checkbox">
    <span>링크 활성화</span>
    <br>
    <a href="http://naver.co.kr">네이버</a>
</body>


5.  참가신청 명단

1) 새 노드 추가하고 표시하기
    -> input 태그에 문자열을 입력하고 [신청] 버튼을 클릭하면, nameList에 문자열이 추가
2) 추가시 맨위로 가도록 변경
<head>
    <link rel="stylesheet" href="./css/name_list.css">
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const input = document.querySelector('#userName');
            const btn = document.querySelector('button');
            const list = document.querySelector('#nameList');

            btn.addEventListener('click', function (event) {
                // 기본 이벤트(submit) 막기
                // event.preventDefault();

                // 1. input 태그에 있는 문자열을 들고와서 새로운 요소 만들기
                const name = document.createElement('p');
                name.textContent = input.value;
                
                // del 키워드 추가
                const delBtn = document.createElement('span');
                delBtn.textContent = 'X';
                delBtn.setAttribute('class','del');
                // 새로 생성된 요소에 이벤트를 추가할 경우에는 생성될 때 마다 이벤트를 등록해야 함.
                delBtn.addEventListener('click', function () {

                    if (confirm("삭제하시겠습니까?")) {
                        // '현재 노드(this)의 부모 노드(= p태그)의 부모 노드'를 찾아 '현재 노드의 부모 노드' 삭제
                        this.parentNode.parentNode.removeChild(this.parentNode);
                    }
                })
                name.appendChild(delBtn);
                

               // 2. nameList에 새로운 요소 추가하기
               // list.appendChild(name);
                list.insertBefore(name, list.childNodes[0]); // p 요소를 #nameList 맨 앞에 추가하기

                // 3. input 태그에 있는 문자열 제거하기
                input.value = ''; //텍스트 필드 지우기

            });

        });
    </script>
</head>
<body>
    <div id="container">
        <h1>참가 신청</h1>
        <form action="">
            <input type="text" id="userName" placeholder="이름" required>
            <button>신청</button>
        </form>
        <hr>
        <div id="nameList"></div>
    </div>
</body>

 

 

 

 

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

+ Recent posts