1.  주문서

 

body 태그
<body>
<!-- 배송 정보 자동으로 입력하기 1 -->
<div id="container">
    <form name="order">
        <fieldset>
            <legend> 주문 정보</legend>
            <ul>
                <li>
                    <label class="field" for="billingName">이름 : </label>
                    <input type="text" class="input-box" id="billingName" name="billingName">
                </li>
                <li>
                    <label class="field" for="billingTel">연락처 : </label>
                    <input type="text" class="input-box" id="billingTel" name="billingTel">
                </li>
                <li>
                    <label class="field" for="billingAddr">주소 : </label>
                    <input type="text" class="input-box" id="billingAddr" name="billingAddr">
                </li>
            </ul>
        </fieldset>
    </form>
    <form name="shipping">
        <fieldset>
            <legend> 배송 정보</legend>
            <ul>
                <li>
                    <input type="checkbox" id="shippingInfo" name="shippingInfo">
                    <label class="check">주문 정보와 배송 정보가 같습니다</label>
                </li>
                <li>
                    <label class="field" for="shippingName">이름 : </label>
                    <input type="text" class="input-box" id="shippingName" name="shippingName">
                </li>
                <li>
                    <label class="field" for="shippingTel">연락처 : </label>
                    <input type="text" class="input-box" id="shippingTel" name="shippingTel">
                </li>
                <li>
                    <label class="field" for="shippingAddr">주소 : </label>
                    <input type="text" class="input-box" id="shippingAddr" name="shippingAddr">
                </li>
            </ul>
        </fieldset>
    </form>
    <button type="submit" class="order">결제하기</button>

</div>
</body>

 

order.css
* {
    margin:0;
    padding:0;
    box-sizing: border-box;
}
ul {
    list-style: none;
}
legend {
    font-size:1.2em;
    font-weight:bold;
    margin-left:20px;
}

form {
    width:520px;
    height:auto;
    padding-left:10px;
    margin:50px auto;
}
fieldset {
    border:1px solid #c0c0c0;
    padding:30px 20px 30px 30px;
    margin-bottom:35px;
}

.field {
    float:left;
    width:60px;
    font-weight:bold;
    font-size:0.9em;
    line-height: 55px;
    text-align:right;
    margin-right:15px;
}

.input-box {
    width:350px;
    height:35px;
    border:1px solid #aaa;
    border-radius:5px;
    padding:5px;
    margin:10px 0;
    float:left;
}

.order {
    width:100%;
    padding:20px;
    border:1px solid #aaa;
    background:#e9e9e9;
    font-size:1em;
    font-weight:bold;
}

 

stylesheet와 body 요소만 적용했을 때

'주문 정보와 배송 정보가 같습니다' 클릭 시 주문 정보 가지고 오고, 클릭 해제시 정보 지우는 코드
<head>
    <link rel="stylesheet" href="css/order.css">
    <script>
  
        document.addEventListener('DOMContentLoaded', function () {
            const check = document.querySelector('#shippingInfo'); 
            // 체크박스의 id는 shippingInfo

            check.addEventListener('click', function () { 
            // check 요소에 click 이벤트가 발생했을 때 실행할 함수
            
                if (this.checked) { // 체크 되었을 때
                    document.querySelector('#shippingName').value = document.getElementById('billingName').value;
                    document.querySelector('#shippingTel').value = document.getElementById('billingTel').value;
                    document.querySelector('#shippingAddr').value = document.getElementById('billingAddr').value;
                } else { // 체크 해제되었을 때 배송정보 지움
                    document.querySelector('#shippingName').value = "";
                    document.querySelector('#shippingTel').value = "";
                    document.querySelector('#shippingAddr').value = "";
                }

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

 

💡  폼 요소 접근 방법 3가지 

    1. id 값이나 class 값을 사용해 폼 요소에 접근하기
        👾  id 값이나 class 값을 사용해 폼 요소에 접근하는 방법은 DOM의 다른 요소에 접근하는 것과 같음
        👾  querySelector() 함수나 querySelectorAll() 함수를 사용
        👾  텍스트 필드에 있는 값을 가져오기 위해서는 텍스트 필드에 접근하는 소스 뒤에 value 속성을 붙임
 
console.log(document.getElementById('billingName').value)
console.log(document.querySelector('[name=billingName]').value);

    2. name 값을 사용해 폼 요소에 접근하기
       👾  폼 요소에 id나 class 속성이 없고 name 속성만 있는 경우 name 식별자를 사용해 폼 요소에 접근
       👾  이 방법을 사용하려면 <form> 태그에 name 속성이 지정되어 있어야 하고,
             <form> 태그안에 포함된 폼 요소에도 name 속성이 있어야 함
       👾  폼 안에 있는 텍스트 필드에 접근하려면 <form>의 name 값과 텍스트 필드의 name 값을 사용
       👾  submit시에 input의 name은 서버로 전송. 하지만 form의 name은 서버로 전송되지 않음
 
console.log(document.order.billingName.value);

    3. 폼 배열을 사용해 폼 요소에 접근하기
        👾  document의 속성 중 forms 속성은 문서 안에 있는 <form> 태그를 모두 가져와 배열 형태로 반환
        👾  이 방법은 폼 요소에 id나 class 속성도 없고 name 속성도 없을 때 유용
        👾  <form> 태그 안에 포함된 요소에 접근하려면 elements 속성을 사용
                 ➡️  해당 폼 안에 있는 모든 폼 요소를 가져오는 속성, 인덱스 번호로 접근
 
console.log(document.forms[0].elements[1].value);

 

 

 

 

 

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

저작자표시 비영리 변경금지

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

[JavaScript] localStorage 객체  (0) 2024.04.07
[JavaScript] 회원가입 예제  (0) 2024.04.05
[JavaScript] 드롭다운 목록, 체크박스, 라디오 버튼, 기본 이벤트 막기, 참가신청 명단  (0) 2024.04.05
[JavaScript] 키보드 이벤트 및 관련 속성, 이벤트 발생 객체 - 리스너를 외부로 빼낸 경우 와 글자입력 양식 이벤트  (0) 2024.04.03
[JavaScript] 이벤트 핸들러 등록과 제거  (0) 2024.04.02

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 ]

저작자표시 비영리 변경금지

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

[Java] while 문 · break문 · continue 문  (0) 2024.08.09
[Java] Switch문 · for문  (0) 2024.05.22
[Java] 비트 연산자 · if 문  (0) 2024.05.21
[JAVA] 형변환 casting & 연산자 operator  (0) 2024.04.01
[JAVA] 변수와 변수 기본형, 상수와 리터럴, 문자열 연산  (1) 2024.04.01

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 학원 강의 ]

저작자표시 비영리 변경금지

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

[Kotlin] 배열 Array  (0) 2024.04.08
[Kotlin] while 문과 반복문 제어 (break, continue)  (0) 2024.04.08
[Kotlin] when 조건문, 범위 클래스  (1) 2024.04.05
[Kotlin] if 조건문  (0) 2024.04.05
[Kotlin] 자료형 변환, 기본형과 참조형 비교, 스마트 캐스트, 자료형 검사  (0) 2024.04.04

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 학원 강의 ]

저작자표시 비영리 변경금지

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

[Kotlin] while 문과 반복문 제어 (break, continue)  (0) 2024.04.08
[Kotlin] for 반복문  (0) 2024.04.05
[Kotlin] if 조건문  (0) 2024.04.05
[Kotlin] 자료형 변환, 기본형과 참조형 비교, 스마트 캐스트, 자료형 검사  (0) 2024.04.04
[Kotlin] 코틀린 특징, 변수와 자료형, 상수  (0) 2024.04.04

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 학원 강의 ]

저작자표시 비영리 변경금지

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

[Kotlin] while 문과 반복문 제어 (break, continue)  (0) 2024.04.08
[Kotlin] for 반복문  (0) 2024.04.05
[Kotlin] when 조건문, 범위 클래스  (1) 2024.04.05
[Kotlin] 자료형 변환, 기본형과 참조형 비교, 스마트 캐스트, 자료형 검사  (0) 2024.04.04
[Kotlin] 코틀린 특징, 변수와 자료형, 상수  (0) 2024.04.04

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 학원 강의 및 책 '혼자 공부하는 자바스크립트' ]

저작자표시 비영리 변경금지

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

[JavaScript] 회원가입 예제  (0) 2024.04.05
[JavaScript] 주문서 작성  (0) 2024.04.05
[JavaScript] 키보드 이벤트 및 관련 속성, 이벤트 발생 객체 - 리스너를 외부로 빼낸 경우 와 글자입력 양식 이벤트  (0) 2024.04.03
[JavaScript] 이벤트 핸들러 등록과 제거  (0) 2024.04.02
[JavaScript] 글자·스타일·속성 조작하기, 문서 객체 생성·이동·제거하기  (0) 2024.04.02

+ Recent posts

티스토리툴바