'함수로직풀기' 카테고리의 다른 글
핸드폰 번호 가리기 (0) | 2024.12.20 |
---|---|
음양 더하기 (0) | 2024.12.19 |
두 정수 사이의 합 (0) | 2024.12.13 |
하샤드 수 (1) | 2024.12.13 |
정수 제곱근 판별 (0) | 2024.12.12 |
핸드폰 번호 가리기 (0) | 2024.12.20 |
---|---|
음양 더하기 (0) | 2024.12.19 |
두 정수 사이의 합 (0) | 2024.12.13 |
하샤드 수 (1) | 2024.12.13 |
정수 제곱근 판별 (0) | 2024.12.12 |
조건식 ? 참일 때의 반환값 : 거짓일 때의 반환값
const score = 85;
if (score >= 70) {
console.log('Pass');
} else {
console.log('Fail');
}
// 결과
Pass
const score = 85;
const result = score >= 70 ? 'Pass' : 'Fail';
console.log(result);
// 결과
Pass
const score = 85;
const grade =
score > 90 ? 'A' : score > 80 ? 'B' : score > 70 ? 'C' : 'F';
console.log(grade);
// 결과
B
배열이란? (0) | 2024.12.26 |
---|---|
객체 프로퍼티 접근 및 조회 (0) | 2024.12.18 |
로또 번호 생성기 과제 (0) | 2024.12.16 |
switch 함수 (0) | 2024.12.12 |
if 문 / if ...else 문/ else if 절 (0) | 2024.12.11 |
<aside> 🔥
이 과제에서는 HTML, CSS, JavaScript를 사용하여 간단한 로또 번호 생성기를 만드는 법을 배웁니다. 특히, 로또 번호를 생성하는 로직도 직접 한번 생성을 해보면서 함수 생성에 대한 연습을 해볼게요.
</aside>
Screen Recording 2024-09-09 at 3.09.12 AM.mov
먼저, 프로젝트를 시작하기 위해 기본 파일 구조를 설정합니다.
이제 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>
이 파일들을 불러오지 않으면 스타일과 기능이 적용되지 않습니다.
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에 대한 스타일을 추가하세요 */
마지막으로, script.js 파일을 열고, 아래의 코드를 입력합니다.
// 버튼이 눌렸을 때, 이벤트가 작동되도록 이벤트리스너를 넣어준 코드입니다.
document.getElementById('generateButton').addEventListener('click', function() {
let numbers = generateLottoNumbers(); // 버튼이 눌리면 이 함수가 실행이 될 거에요.
document.getElementById('numbers').textContent = numbers.join(', ');
});
function generateLottoNumbers() {
/* 여기에 generateLottoNumbers 함수를 완성해주세요. */
}
generateLottoNumbers 함수는 로또 번호를 생성하는 역할을 합니다. 다음 힌트를 참고하여 함수를 작성하세요:
힌트를 참고하여, generateLottoNumbers 함수를 직접 작성해보세요!
모든 파일을 저장한 후, index.html 파일을 브라우저에서 열어보세요. HTML, CSS, JavaScript 파일을 올바르게 작성하고 링크했다면, "Generate Numbers" 버튼을 클릭했을 때 1부터 45까지의 로또 번호가 화면에 표시될 것입니다.
기본 기능을 완성했다면, 아래의 추가 과제를 시도해 보세요:
객체 프로퍼티 접근 및 조회 (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 배열 고급 메서드 활용
스타벅스 만들기 (1) | 2024.12.20 |
---|---|
배열의 개념과 기본적인 생성 방법을 익혀보자. (0) | 2024.12.12 |
JavaScript 반복문의 기초와 활용[1부터 100까지의 합을 계산하는 프로그램.] (1) | 2024.12.11 |
JavaScript 연산자의 종류와 사용법 (0) | 2024.12.10 |
JavaScript 데이터 타입의 종류와 특징 이해하기 (1) | 2024.12.09 |
음양 더하기 (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 |
switch (표현식) {
case 값1:
// 표현식이 값1과 일치할 때 실행될 코드
break;
case 값2:
// 표현식이 값2와 일치할 때 실행될 코드
break;
case 값3:
// 표현식이 값3과 일치할 때 실행될 코드
break;
default:
// 어떤 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('계절을 입력해 주세요.');
}
// 결과
여름에는 수박을 드세요.
가을에는 사과를 드세요.
겨울에는 딸기를 드세요.
계절을 입력해 주세요.
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('계절을 입력해 주세요.');
}
// 결과
여름에는 수박을 드세요.
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)하는 방법을 실습하세요.
궁금한 점 있으면 또 물어보세요! ✨
스타벅스 만들기 (1) | 2024.12.20 |
---|---|
JavaScript 배열 고급 메서드 활용`slice`, `splice`, `reverse` (0) | 2024.12.13 |
JavaScript 반복문의 기초와 활용[1부터 100까지의 합을 계산하는 프로그램.] (1) | 2024.12.11 |
JavaScript 연산자의 종류와 사용법 (0) | 2024.12.10 |
JavaScript 데이터 타입의 종류와 특징 이해하기 (1) | 2024.12.09 |