Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

왕초보 코딩 개발 일지 블로그

[23.05.08] 예제 background color 본문

Javacript

[23.05.08] 예제 background color

아캔두우잇 2023. 5. 8. 16:19
반응형
background color
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background color</title>
</head>
<body>
   

    <script>
        let color = prompt("원하는 색상을 입력하세요 (빨강, 파랑, 초록)");
        // 원하는 색상을 입력하세요 라는 입력 창 만들기
        // 빨강 -> red, 초록 -> green, 파랑 -> blue

        // if (color == '빨강') {
        //     document.getElementsByTagName('body')[0].style.backgroundColor='red';
        // } else if (color == '초록') {
        //     document.getElementsByTagName('body')[0].style.backgroundColor='green';
        // } else if (color == '파랑') {
        //     document.getElementsByTagName('body')[0].style.backgroundColor='blue';
        // } else {
        //     alert("잘못 입력하셨습니다.")
        // }

        // red, green, blu -> result라는 변수로 변환
        // let result = 'red'; let result 먼저 선언 해 놓고 red 대입

        let result;
        switch(color) {
            case '빨강':
                result = 'red';
                break;
            case '파랑':
                result = 'blue';
                break;
            case '초록':
                result = 'green';
                break;
            case '노랑':
                result = 'yellow';
                break;
            default :
                alert("잘못 입력하셨습니다.");
        }
   
        document.getElementsByTagName('body')[0].style.backgroundColor=result;

    </script>
</body>
</html>
반응형

'Javacript' 카테고리의 다른 글

[23.05.09] 자바스크립트 배열 인덱스 데이터 추가 및 삭제 방법  (0) 2023.05.09
[23.05.09] 자바스크립트 반복문 활용 : 숫자 배열 안에서 최댓값 출력 & 홀수만 출력  (0) 2023.05.09
[23.05.09] 함수 호이스팅 (함수 선언문과 함수 표현식의 차이)  (0) 2023.05.09
[23.05.09] if와 switch를 사용하여 자판기 만들기  (0) 2023.05.09
[23.05.08] 배경바꾸는 버튼  (0) 2023.05.08
'Javacript' Related Articles more