처음에 목표했던 CS관련 지식 스터디가 종료되고 무엇을 시작할까 동기들과 고민했었다.
물론 지난 반년간 공부한 지식으로는 아직 한참 모자라고,
알아야하고 배워야하는 것은 더 많지만 취업준비중이 아닌 다들 현업에서 일을 배우고 있는 상황이기에
공통적으로 필요한 것을 우선적으로 시작하게 되었다.
현업에서 JS를 사용하고는 있지만 울며 겨자먹기로 고차원적인 내용부터
맨땅에 헤딩을 하고 있으니 기초부터 다시 해보는걸로!
기본적인 자료형, 조건반복문은 제외하고 연습문제나 실습 위주로 작성해보려고 한다.
강의 자료는 인프런으로 한다.
학습명 : 쉽고 자연스럽게 배워보는 Javascript 입문 - 코드스쿼드 마스터즈 코스레벨 1
연습문제1
1. 두 수를 입력받아 사칙연산의 결과를 표시해본다.
<!DOCTYPE html>
<html>
<head>
<mata charset="UFT-8">
<meta name="viewport" content=width-device-width, intial-scale=1.0">
</head>
<body>
<script>
var input = prompt("숫자를 입력하세요");
var num1 = Number(input);
console.log("입력한 숫자는" + num1 );
</script>
</body>
</html>
2. BMI를 계산하는 프로그램을 작성해본다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script>
var cm = prompt("키(cm)");
var kg = prompt("체중(Kg)");
var height = Number(cm) / 100;
var weight = Number(kg);
var bmi = weight / (height * height);
console.log("BMI는 " + bmi +"입니다.");
</script>
</body>
</html>
3. 섭씨를 입력받아서 화씨로 바꾸는 프로그램을 작성해본다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<script>
var s1 = prompt("화씨온도를 입력해 주세요.(F)");
var f = Number(s1);
var c = (f - 32) * 5 / 9;
document.write("화씨" + f + "도는 섭씨 " + c + "도입니다.");
</script>
</body>
</html>
4. 입력한 문장의 길이를 알려주는 프로그램을 작성해본다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<script>
var talk = prompt("아무거나 입력");
var length = talk.length;
console.log (length);
</script>
</body>
</html>
5. 사용자가 입력한 숫자가 소수인지 아닌지 알려주는 프로그램을 작성해본다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<script>
var isPrime = true;
var n = Number(prompt("2이상의 정수를 입력하세요."));
for (var i =2; i < n; i++) {
if (n % i === 0) {
isPrime = false;
}
}
if (isPrime) {
document.write(n + "은 소수입니다.");
} else {
document.write(n + "은 소수입니다.");
}
</script>
</body>
</html>구구단 구현하기
과제에서는 두개의 단씩 나눠서 구현하게 되어있지만 나는 일단 한번에 계산하는 코드로 작성했다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>구구단</title>
</head>
<body>
<h1>구구단 출력</h1>
<div id="gugudan-container"></div>
<script>
const container = document.getElementById('gugudan-container');
for (let i = 2; i <= 9; i++) {
const gugudanDiv = document.createElement('div');
const title = document.createElement('h3');
title.textContent = `${i}단`;
gugudanDiv.appendChild(title);
for (let j = 1; j <= 9; j++) {
const result = document.createElement('p');
result.textContent = `${i} x ${j} = ${i * j}`;
gugudanDiv.appendChild(result);
}
container.appendChild(gugudanDiv);
}
</script>
</body>
</html>
1. const container 가진div 요소를 선택하여 container에 저장한다.
2. 이후 for문을 돌면서 2단부터 9단까지 구구단을 생성한다.
3. const gugudanDiv 요소에 각 단을 담아준다.
4. 단의 제목을 표시할 요소에 const title 텍스트를 설정해준다 .
5. 다시 한번 for문 돌면서 각 단의 1부터 9까지 곱셈을 반복하고
곱셈 결과를 p요소에 표시한다.
'🪄Interview > ✏️Study' 카테고리의 다른 글
| [JavaScript Study] 3주차 - 객체 구축 연습(Object building practice) (1) | 2024.09.14 |
|---|---|
| [JavaScript Study] 2주차 - 이미지 갤러리(gallery-start) (0) | 2024.08.31 |
| [CS STUDY INTERVIEW] 16주차 - 옵저버 패턴 & 스트레티지 패턴 & 컴포지트 패턴 (0) | 2024.07.16 |
| [CS STUDY INTERVIEW] 15주차 - 싱글톤 패턴 (0) | 2024.07.06 |
| [CS STUDY INTERVIEW] 14주차 - 팩토리 메서드 패턴 (0) | 2024.06.20 |