로또 번호 생성기 과제 (난이도 하)

<aside> 🔥

이 과제에서는 HTML, CSS, JavaScript를 사용하여 간단한 로또 번호 생성기를 만드는 법을 배웁니다. 특히, 로또 번호를 생성하는 로직도 직접 한번 생성을 해보면서 함수 생성에 대한 연습을 해볼게요.

</aside>

Screen Recording 2024-09-09 at 3.09.12 AM.mov

1단계: 프로젝트 파일 구조 설정

먼저, 프로젝트를 시작하기 위해 기본 파일 구조를 설정합니다.

  1. 새 폴더 생성: 컴퓨터의 원하는 위치에 'lotto-generator'라는 폴더를 만듭니다.
  2. 파일 생성: 아래와 같은 파일들을 폴더 안에 생성하세요.
    • index.html
    • styles.css
    • script.js

2단계: HTML 파일 만들기

이제 index.html 파일을 열고, 아래의 코드를 입력합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로또 번호 생성기</title>
    <!-- 여기에 styles.css 파일을 불러오는 링크를 추가하세요 -->
</head>
<body>
    <div class="container">
        <h1>로또 번호 생성기</h1>
        <button id="generateButton">행운의 넘버!</button>
        <div id="numbers"></div>
    </div>
    <!-- 여기에 script.js 파일을 불러오는 스크립트를 추가하세요 -->
</body>
</html>

과제: HTML 파일 완성하기

  • <head> 태그 안에 styles.css 파일을 불러오는 <link> 태그를 추가하세요.
  • <body> 태그 끝 부분에 script.js 파일을 불러오는 <script> 태그를 추가하세요.

이 파일들을 불러오지 않으면 스타일과 기능이 적용되지 않습니다.

3단계: CSS 파일 만들기

  • 이제 styles.css 파일을 열고, 아래의 기본적인 스타일을 적용합니다.
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

/* 여기에 container 클래스에 대한 스타일을 추가하세요 */

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

/* 여기에 numbers ID에 대한 스타일을 추가하세요 */

과제: CSS 파일 완성하기

  • 제가 기본적인 css 만 했으니, 여러분들이 나머지는 완성시켜주세요!
  • .container 클래스에 대한 스타일을 추가하세요. (배경색, 패딩, 그림자 등을 지정해 보세요.)
  • #numbers ID에 대한 스타일을 추가하세요. (폰트 크기나 텍스트 정렬 등을 지정해 보세요.)

4단계: JavaScript 파일 만들기

마지막으로, script.js 파일을 열고, 아래의 코드를 입력합니다.

// 버튼이 눌렸을 때, 이벤트가 작동되도록 이벤트리스너를 넣어준 코드입니다.
document.getElementById('generateButton').addEventListener('click', function() {
    let numbers = generateLottoNumbers();  // 버튼이 눌리면 이 함수가 실행이 될 거에요.
    document.getElementById('numbers').textContent = numbers.join(', ');
});

function generateLottoNumbers() {
	/* 여기에 generateLottoNumbers 함수를 완성해주세요. */
}

과제: generateLottoNumbers 함수 완성하기

generateLottoNumbers 함수는 로또 번호를 생성하는 역할을 합니다. 다음 힌트를 참고하여 함수를 작성하세요:

  1. 빈 배열 만들기: 로또 번호를 저장할 빈 배열을 만듭니다.
  2. 반복문 사용: 배열에 6개의 번호가 들어갈 때까지 반복문을 사용하세요.
  3. 랜덤 번호 생성: 1부터 45 사이의 랜덤 번호를 생성합니다. 이때, Math.random()과 Math.floor() 함수를 사용하면 유용합니다.
  4. 중복 검사: 배열에 이미 같은 번호가 들어있지 않은지 확인한 후, 배열에 추가하세요. 배열의 includes() 메서드를 사용하면 중복 검사가 가능합니다.
  5. 배열 반환: 6개의 번호가 모두 배열에 추가되면, 배열을 반환합니다.

힌트를 참고하여, generateLottoNumbers 함수를 직접 작성해보세요!

5단계: 프로젝트 실행

모든 파일을 저장한 후, index.html 파일을 브라우저에서 열어보세요. HTML, CSS, JavaScript 파일을 올바르게 작성하고 링크했다면, "Generate Numbers" 버튼을 클릭했을 때 1부터 45까지의 로또 번호가 화면에 표시될 것입니다.

추가 과제 (Optional)

기본 기능을 완성했다면, 아래의 추가 과제를 시도해 보세요:

  • 번호를 오름차순으로 정렬해서 출력하기
  • 이전 결과를 저장하고, 새 결과와 비교하기
  • 결과를 더 멋지게

 

로또 번호 생성기.zip
0.00MB

'자바스크립트' 카테고리의 다른 글

객체 프로퍼티 접근 및 조회  (0) 2024.12.18
삼항연산자  (1) 2024.12.16
switch 함수  (0) 2024.12.12
if 문 / if ...else 문/ else if 절  (0) 2024.12.11
비교 연산자  (0) 2024.12.10
JavaScript 배열 고급 메서드 활용
 
  • `slice`, `splice`, `reverse` 메서드의 동작 방식을 이해하고, 이를 활용한 실습 예제를 작성하세요.
  • 예: 배열의 특정 구간을 잘라내거나, 특정 위치에 데이터를 삽입 및 삭제하는 로직 구현.

 

'함수로직풀기' 카테고리의 다른 글

음양 더하기  (0) 2024.12.19
서울에서 김서방 찾기  (1) 2024.12.17
하샤드 수  (1) 2024.12.13
정수 제곱근 판별  (0) 2024.12.12
문자열을 정수로 바꾸기  (0) 2024.12.12

'함수로직풀기' 카테고리의 다른 글

서울에서 김서방 찾기  (1) 2024.12.17
두 정수 사이의 합  (0) 2024.12.13
정수 제곱근 판별  (0) 2024.12.12
문자열을 정수로 바꾸기  (0) 2024.12.12
정수 내림차순으로 배치하기  (0) 2024.12.12

 

 

1️⃣ switch 문의 이해

  • 특정 변수(표현식)와 일치하는 값에 해당하는 코드를 실행하는 조건문입니다.
  • 하나의 변수를 여러 고정된 값과 비교하는 경우 if 문보다 switch 문이 적합합니다.
    • if...else 문을 사용해 여러 개의 분기를 만들면 코드가 복잡해질 수 있습니다.
    • 조건이 논리형 표현식이 아닌 단순한 값일 때 switch 문으로 작성하면 더 간결합니다.
switch (표현식) {
  case 값1:
    // 표현식이 값1과 일치할 때 실행될 코드
    break;
    
  case 값2:
    // 표현식이 값2와 일치할 때 실행될 코드
    break;
    
  case 값3:
    // 표현식이 값3과 일치할 때 실행될 코드
    break;
    
  default:
    // 어떤 case도 일치하지 않을 때 실행될 코드
}

 

2️⃣ switch 문의 사용 방법

  • switch 문의 괄호 안에 비교할 표현식(변수)을 작성합니다.
  • case 키워드 옆에는 표현식과 일치 여부를 비교할 값을 작성합니다.
  • case 키워드 다음 문장에는 표현식이 case의 값과 일치할 때 실행할 코드를 작성합니다.
  • default는 어떤 case에도 해당되지 않을 경우에 실행됩니다.
  • 각 case의 끝에 break를 작성해 해당 case만 실행하고 switch 문을 종료합니다.
  • break를 작성하지 않으면 일치하는 case를 실행한 후, 다음 case도 이어서 실행합니다.
const season = 'summer';

switch (season) {
  case 'spring':
    console.log('봄에는 쑥을 드세요.');
  
  case 'summer':
    console.log('여름에는 수박을 드세요.');
  
  case 'autumn':
    console.log('가을에는 사과를 드세요.');
 
  case 'winter':
    console.log('겨울에는 딸기를 드세요.');
 
  default:
    console.log('계절을 입력해 주세요.');
}
// 결과
여름에는 수박을 드세요.
가을에는 사과를 드세요.
겨울에는 딸기를 드세요.
계절을 입력해 주세요.
  • season의 값이 'summer'이므로, '여름에는 수박을 드세요.'가 출력됩니다.
  • 코드에 break가 없기 때문에, summer 이후의 case도 모두 순차적으로 실행됩니다.
  • break를 사용하면 각 계절에 맞는 메시지만 출력하고 switch 문을 종료할 수 있습니다.
const season = 'summer';

switch (season) {
  case 'spring':
    console.log('봄에는 쑥을 드세요.');
    break;

  case 'summer':
    console.log('여름에는 수박을 드세요.');
    break;

  case 'autumn':
    console.log('가을에는 사과를 드세요.');
    break;

  case 'winter':
    console.log('겨울에는 딸기를 드세요.');
    break;

  default:
    console.log('계절을 입력해 주세요.');
}
// 결과
여름에는 수박을 드세요.
  • season의 값이 'summer'이므로, '여름에는 수박을 드세요.'가 출력됩니다.
  • 문장 출력 후 break를 만나 switch 문 전체가 종료됩니다.

 

➕ 여러 case에서 같은 코드를 실행해야 할 경우
  • 같은 코드를 실행하는 조건을 그룹화해서 중복 코드를 줄일 수 있습니다.
    • 같은 그룹의 case를 연속으로 나열하고, case의 본문을 생략합니다.
    • 그룹의 마지막 case 내에 공통으로 실행할 코드를 작성합니다.
    • 각 그룹의 마지막에 break를 작성해 switch 문을 종료합니다.
const grade = 'B';

switch (grade) {
  case 'A+':
  case 'A':
  case 'A-':
    console.log('훌륭합니다!');
    break;

  case 'B+':
  case 'B':
  case 'B-':
    console.log('잘했습니다!');
    break;

  default:
    console.log('노력이 필요합니다.');
}
// 결과
잘했습니다!

 

 

'자바스크립트' 카테고리의 다른 글

삼항연산자  (1) 2024.12.16
로또 번호 생성기 과제  (0) 2024.12.16
if 문 / if ...else 문/ else if 절  (0) 2024.12.11
비교 연산자  (0) 2024.12.10
산술연산자  (0) 2024.12.09

배열의 개념과 기본적인 생성 방법을 익히고, 데이터를 추가(push)하거나 제거(pop)하는 방법을 실습하세요.

 

요약

  • 첫 번째 매개변수: 배열의 요소 값 (예: item, number).
  • 두 번째 매개변수: 배열 요소의 인덱스 (예: index, idx).
  • 매개변수 이름은 자유롭게 지정 가능하지만, 순서는 반드시 지켜야 합니다. 😊

궁금한 점 있으면 또 물어보세요! ✨

 

'함수로직풀기' 카테고리의 다른 글

두 정수 사이의 합  (0) 2024.12.13
하샤드 수  (1) 2024.12.13
문자열을 정수로 바꾸기  (0) 2024.12.12
정수 내림차순으로 배치하기  (0) 2024.12.12
자연수를 뒤 집어 배열로 만들기  (0) 2024.12.10

 

 

 

 

 

 

 

'함수로직풀기' 카테고리의 다른 글

하샤드 수  (1) 2024.12.13
정수 제곱근 판별  (0) 2024.12.12
정수 내림차순으로 배치하기  (0) 2024.12.12
자연수를 뒤 집어 배열로 만들기  (0) 2024.12.10
x만큼 간격이 있는 n개의 숫자.  (0) 2024.12.09

+ Recent posts