Notice
Recent Posts
Recent Comments
Link
«   2024/10   »
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
관리 메뉴

wa_ter_ve

GDG-WEB 2주차 과제 본문

공부/자바스크립트

GDG-WEB 2주차 과제

수win 2024. 10. 1. 20:50
* 디스코드 공지 확인 안 하신 분들 확인하세요~
코드 쓰는 방법에는 여러가지가 있지만
도무지 감이 안 잡힌다 하시는 분들은 힌트 보고 그 과정대로 차근차근 작성해보세요!

 


📌 과제1

[html,css 파일]
본인이 원하는 상품을 판매하는 창을 만들어보도록 합시다!
이미지 소스에 판매할 상품의 이미지를 넣고, 내용은 자유로이 작성해 주시면 됩니다.
다만, 전체적인 양식은 그대로 구현해야 합니다.(css) 더 꾸미고 싶으시면 그래도 좋습니다^^

 
구현한 모든 것이 화면에 바로 보이도록 스크롤이 생기지 않게 구현합니다.
각 주문자 이름, 수량, 주소, 전화번호 칸에 글자 입력이 가능해야 합니다.
 

 

 
수량 버튼을 누르면 목록이 떠 선택이 가능해야 합니다.
(수량 목록 개수는 3개 이상이기만 하면 몇 개를 해도 상관없습니다~)
 
 

 

주문하기 버튼을 누르면 브라우저 상단에 alert창이 떠야합니다.
 

 
 


📌 과제2

 
[js 파일]
함수를 통해 평균 구하기

let students = {
    남도일: 92,
    유미란: 84,
    하인성: 88,
    유가영: 76
};

function Average(studentScore) {
    // 이 부분에 들어갈 내용을 채워서 제출.
    
    return Math.floor(total / Object.values(studentScore).length); //소수점 버리는 코드
}

let averageScore = Average(students);
console.log(`네 사람의 평균 성적: ${averageScore}`);

 
 
학생들과 각 성적을 객체로 정의하였습니다.
평균 성적 계산 함수를 통해 빈 부분을 채워서 
네 사람의 평균 성적: 85
가 출력되도록 하시면 됩니다.
 

- 콜백 함수에 대해 아직 배우지 않았기에 코드 알려드립니다.
*참고로 콜백 함수는 다른 함수에 전달되어 호출되는 함수입니다.
(sum, score) => sum + score 

- 객체에서 value값만을 뽑아서 저장하는 함수
Object.values ()

 
 
[힌트] 

더보기

빈칸에 들어갈 코드의 과정
1. 객체들의 value값들만을 뽑아 배열을 생성.
2. 평균값을 구하기 위해 누적값을 저장하는 메소드와 함께 콜백 함수 코드 사용.

 
 


📌 과제3

 
[js 파일]
for문을 사용하여 0부터 10이하의 정수 중에서 홀수 만을 내림차순으로 나열하고
이를 문자열로 변환하여 출력하세요.
 
 
[힌트]

더보기

1. 문자열 배열 변수 선언 및 할당

2. 반복문 사용 (내림차순 반복)

3. 조건문 사용 (홀수만)

4. 문자열 배열에 조건에 해당하는 숫자들을 할당

(+ 조건문을 한 번 더 사용해서 문자간 띄어쓰기 할 수 있으면 하기)

5. 콘솔 출력

 
 


📌 과제4

 
[js 파일]
세 개의 주사위를 던졌을 때, 눈의 합이 10이 되는 모든 경우의 수를 출력하세요.
 
 
[힌트]

더보기

세 개의 주사위 이므로 3번의 중첩 반복문 사용 후,

조건에 해당하는 숫자들만 출력.

(이때 조건에서는 '엄격한 동등 비교 연산자(===)'를 사용하도록 권고 ) 

 
 


📌 과제5

[html 파일]
숫자 맞추기 게임.
html 내에 script 태그를 삽입하여 자바스크립트 코드를 작성합니다.
컴퓨터가 1~10까지의 숫자 중 임의의 수를 선택하면, 프롬프트 창을 통해 사용자가 숫자를 입력합니다.
정답이 아닐 경우, 입력한 숫자에 대해 UP 또는 DOWN으로 힌트를 주는 창이 떠야합니다.
정답을 맞힌 경우 정답입니다와 함께 몇 번째 시도 만에 맞췄는지 알려주도록 구현합니다.
 

prompt 창은 브라우저 가운데에 생성됩니다.

 

// 버튼 클릭시 게임 시작하게 하는 이벤트 핸들러 코드입니다.
// 이 내용은 아직 안 배워서 알려드립니다. 아래쪽에 추가하세요.
document.getElementById("startGame").onclick = startGame;
- 참고 -

prompt(" 문자 ");  // prompt(입력창) 출력
alert(" 문자 ");  // alert창(알림창) 출력

랜덤 변수 함수
Math.floor(Math.random( )) 사용

*Math.floor( ) : 소수점 이하 버림하고 정수만 남기는 함수. 
*Math.random( ) : 0이상 1미만의 난수 생성 함수.

조건문 사용해야 함.
출력값이 좀 많이 나올텐데, 경우의 수가 많아서 그런 거라 그게 답 맞습니다! (27개) 

 
 

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

Javascript 2 DOM  (5) 2024.10.07
Javascript 1-4 연산자  (0) 2024.09.30
Javascript 1-3 제어문  (0) 2024.09.30
Javascript 1-2 변수와 데이터 타입  (0) 2024.09.29
Javascript 1-1 기본 개념  (0) 2024.09.29