Example
[E-JS] 반복문, 조건문, 배열 연습
송기동
2023. 8. 18. 17:47
728x90
// 1) for문 사용해서 1 ~ 100까지 출력하기
// for(let i = 1; i <=100; i++) {
// console.log(i);
// }
// 2) 1 ~ n까지 출력하기
// 입력예시 : 5
// 출력예시 : 1 2 3 4 5
// let num = Number(prompt(""));
// let result = "";
// for(let i = 1; i <= num; i++) {
// result = result + i + " ";
// }
// alert(result);
// 3) a ~ b까지 출력하기
// 입력예시1 : 8
// 입력예시2 : 3
// 출력예시 : 3 4 5 6 7 8
// for(시작값; 시작값<=끝값; 증감식){}
// let num1 = Number(prompt("시작 숫자"));
// let num2 = Number(prompt("끝 숫자"));
// let maxNum = Math.max(num1, num2); // 큰값
// let minNum = Math.min(num1, num2); // 작은값
// let result = ""; // 문자열 붙이기 변수
// for(let i = minNum; i <= maxNum; i++) {
// // 문자열 붙이기 : 문자열 + 숫자 -> 문자열(자동 자료형변환)
// result = result + i + " ";
// }
// alert(result);
// 4) 별 출력하기
// 입력 : 5
// 출력 : *****
// let num = Number(prompt(""));
// let result = "";
// for(let i = 1; i <= num; i++){
// result = result + "*";
// }
// alert(result);
// 5) 1 ~ 10 까지 합계를 구해서 아래와 같이 화면에 출력
// 출력 : "1 ~ 10의 합계 : 55"
// TODO: 누적합 문제
// 누적합을 위한 임시 변수
// let sumVal = 0;
// for(let i = 1; i <= 10; i++){
// sumVal = sumVal + i;
// }
// alert("1 ~ 10의 합계 : " + sumVal);exam5
/* 조건문 연습 */
// 1) 입력값이 y이면 글쓰기라고 출력하고
// y가 아니면 글수정이라고 출력하기
// 새로운 출력방법 :
// 값 이 웹브라우저에 출력됨
// console.log(값) 대신에 아래코드를 사용하면 화면에 출력됨
// document.querySelector("#output").innerHTML = "값";
// let strVal = prompt("글자를 입력");
// if(strVal === "y"){
// document.querySelector("#output").innerHTML = "글쓰기";
// } else {
// document.querySelector("#output").innerHTML = "글수정";
// }
// 2) 입력값이 짝수면 짝수입니다.
// 홀수이면 홀수입니다. 출력하는 코딩 작성
// 문제 풀때 참고: num % 3 === 0(3의 배수) num % 4 === 0(4의 배수)...
// let num = Number(prompt("정수"));
// if(num % 2 === 0) {
// document.querySelector("#output").innerHTML = "짝수입니다.";
// } else {
// document.querySelector("#output").innerHTML = "홀수입니다.";
// }
// 3) 입력값이 3~5가 들어오면 봄입니다.
// 6~8이 들어오면 여름입니다.
// 9~11이 들어오면 가을입니다.
// 12~2가 들어오면 겨울입니다.
// let month = Number(prompt("월을 입력하세요"));
// if(month >= 3 && month <= 5) {
// document.querySelector("#output").innerHTML = "봄입니다.";
// } else if(month >= 6 && month <= 8) {
// document.querySelector("#output").innerHTML = "여름입니다.";
// } else if(month >= 9 && month <= 11) {
// document.querySelector("#output").innerHTML = "가을입니다.";
// } else if(month == 12 || month == 1 || month == 2) {
// document.querySelector("#output").innerHTML = "겨울입니다.";
// }
// 4) // 입력을 하나 받아서 "admin" 이 맞으면
// "해당 콘텐츠 이용이 가능합니다." 라고 출력
// 아니면
// 다시 입력값을 숫자로 하나 또 받아서
// 입력값이 1 ~ 7 사이에 있으면
// "해당 콘텐츠 이용이 가능합니다." 라고 출력하고,
// 아니면 "해당 콘텐츠에 접근할 수 없습니다."
// 힌트 : 중첩 if문 사용(if문 안에 if문 있는 구조
// let userId = prompt("문자를 입력");
// if(userId == "admin") {
// document.querySelector("#output").innerHTML = "해당 컨텐츠 이용이 가능합니다.";
// } else {
// let num = Number(prompt("숫자를 입력"));
// if(num >= 1 && num <= 7){
// document.querySelector("#output").innerHTML = "해당 컨텐츠 이용이 가능합니다.";
// } else {
// document.querySelector("#output").innerHTML = "해당 컨텐츠에 접근할 수 없습니다.";
// }
// }
// 5) // X 가 1일 경우 "x의 값은 1입니다."
// X 가 2일 경우 "x의 값은 2입니다."
// X 가 1도2 도 아닐경우 "x의 값은 1 또는 2가 아닙니다."
// 입력 : 2
// 출력 : x의 값은 2입니다.
let num = Number(prompt("x"));
if(num == 1){
document.querySelector("#output").innerHTML = "x의 값은 1입니다.";
} else if(num == 2){
document.querySelector("#output").innerHTML = "x의 값은 2입니다.";
} else {
document.querySelector("#output").innerHTML = "x의 값은 1또는 2가 아닙니다.";
}if_switch
// 조건문 (if문 --- switch문)
// 예제) // X 가 1일 경우 "x의 값은 1입니다."
// X 가 2일 경우 "x의 값은 2입니다."
// X 가 1도2 도 아닐경우 "x의 값은 1 또는 2가 아닙니다."
// 입력 : 2
// 출력 : x의 값은 2입니다.
// TODO: if문 풀이
// let num = Number(prompt("숫자를 입력하세요"));
// if(num == 1){
// alert("x의 값은 1입니다.");
// } else if(num == 2){
// alert("x의 값은 2입니다.");
// } else {
// alert("x의 값은 1 또는 2가 아닙니다.");
// }
// TODO: switch문 풀이
// 조건문 : switch
// 사용법 :
// switch(조건변수) {
// case 값;
// 실행문;
// break;
// ...
// default;
// 실행문;
// break;
// }
// let num = Number(prompt("숫자를 입력하세요"));
// switch(num){
// num == 1일때
// case 1:
// alert("x의 값은 1입니다.");
// break;
// num == 2일때
// case 2:
// alert("x의 값은 2입니다.");
// break;
// 모두가 아닐때
// default:
// alert("x의 값은 1 또는 2가 아닙니다.");
// break; // 생략가능
// }
// TODO: 3항 연산자(조건문) *****
// 활용 : 자바, 자바스크립트에서 간단한 조건문제일 경우 사용함(주로 1줄 표현)
// 사용법 : let 변수명 = (조건식)? 실행문 : 실행문2;
// 조건식을 판단하여 참이면 실행문이 실행되고, 거짓이면 실행문2가 실행됨
// 예제) 입력값을 받아서 값이 admin이면 "있음" 출력, 아니면 "없음" 출력
let strVal = prompt("입력하세요");
// strVal 가 admin 이면 있음 이라는 문자열이 result변수에 저장
// 아니면 없음 이라는 문제열이 result변수에 저장됨
let result = (strVal === "admin")? "있음" : "없음";
alert(result);exam_for
// 1) for문 안에 if문으로 짝수체크해서 더하기
// 입력 : 없음
// 출력 : 1 ~ 100까지 합계 구하는데
// 짝수의 합계를 구해서 출력하세요.
// let sumVal = 0;
// for(let i = 1; i <= 100; i++){
// if(i % 2 === 0){
// sumVal = sumVal + i;
// }
// }
// document.querySelector("#output").innerHTML = sumVal;
// 2) 입력 : 없음
// 출력 : 1 ~ 100까지 합계 구하는데
// 3의 배수의 합계를 구해서 출력하세요.
// let sumVal = 0;
// for(let i = 1; i <= 100; i++){
// if(i % 3 === 0){
// sumVal = sumVal + i;
// }
// }
// document.querySelector("#output").innerHTML = sumVal;
// 3) 1부터 n까지 합 구하기
// 입력예시 : 100
// 출력예시 : 5500
// let num = Number(prompt(""));
// let result = 0;
// for(let i = 1; i <= num; i++){
// result = result + i; // 누적합
// }
// document.querySelector("#output").innerHTML = result;
// TODO) hard **
// 4) First Special Judge (Test)
// 10개의 수 중 5의 배수가 있으면 그 중 하나만 출력하고, 없다면 0을 출력한다.
// 입력예시 : 1 2 3 4 5 6 7 8 9 10
// 출력예시 : 5
// 힌트 : 입력값 : .split("구분자") : 문자열 자르기 함수
// 힌트 : 1) 숫자배열 반복문 실행해서 5의 배수 있으면 출력; break;
// 2) 만약에 5의 배수 1개도 없다면(카운트변수 === 0) "0" 출력
// (반복문 내부에 5의 배수가 있을때 마다 카운트변수 1증가)
let num = prompt("문자를 입력하세요").split(" ").map(Number); // 숫자 배열
// 카운트 변수 초기화
let count = 0;
// 반복문
// TODO : 1) 숫자배열 반복문 실행해서 5의 배수 있으면 출력; break;
// 배열 : 여러개의 값을 저장하는 공간 , 배열의 크기 : length
for(let i=0; i<num.length; i++) {
// 5의 배수 판단
if( num[i] % 5 === 0) {
// 출력
document.querySelector("#output").innerHTML = num[i]; // 5의 배수 출력
// 카운팅 변수 : 1증가 (5의 배수이므로)
count = count + 1;
// 강제 중단
break;
}
}
// TODO: 2) 만약에 5의 배수 1개도 없다면(카운트변수 === 0) "0" 출력
// TODO: (반복문 내부에 5의 배수가 있을때 마다 카운트변수 1증가)
// 5의 배수가 숫자 배열에 1개도 없으면 : count === 0 임
if(count === 0) {
document.querySelector("#output").innerHTML = "0";
}
// 5) 1부터 n까지 중 짝수의 합 구하기
// 입력예시 : 5
// 출력예시 : 6
// let num = Number(prompt("숫자입력"));
// let result = 0;
// for(let i = 1; i <= num; i++){
// if(i % 2 == 0){
// result = result + i; // 누적합
// } else{
// }
// }
// document.querySelector("#output").innerHTML = result;
// 6) 두 수 사이의 홀수 출력하기
// 입력1 : 2
// 입력2 : 7
// 출력 : 3 5 7
// let result = "";
// let num1 = Number(prompt("숫자1"));
// let num2 = Number(prompt("숫자2"));
// let maxNum = Math.max(num1, num2);
// let minNum = Math.min(num1, num2);
// for(let i = minNum; i <= maxNum; i++){
// if(i % 2 == 1){
// result = result + i + " ";
// } else{
// }
// }
// document.querySelector("#output").innerHTML = result;for_while
// 반복문 : for - while문
// 예제1)
// 입력 : 없음
// 출력 : 안녕하세요 5번 출력
// TODO: for문
// for(let i = 1; i <= 5; i++){
// console.log("안녕하세요");
// }
// TODO: while문
// 사용법 :
// 초기값;
// while(조건식) {
// 반복문;
// 증감식;
// }
// let i=1; // 초기값
// while(i<=5) { // while(조건식)
// console.log("안녕하세요");
// i++; // 증감식
// }
// TODO:(참고) do ~ while; 문
// // TODO: 특징 : 조건식이 거짓이라도 1번은 실행함
// let i=1; // 초기값
// do {
// console.log("안녕하세요");
// i++; // 증감식
// } while(i<=5); // while(조건문);
// TODO: 반복문 특수형태 : 무한 루프(loop, 반복문)(무한히 반복)
// TODO: while 문 무한루프
// 사용법 : 예제
// while(true) { 반복문; }
// while(true) {
// console.log("안녕하세요");
// }
// TODO: for 문 무한루프
// for(;true;) {
// console.log("안녕하세요");
// }
// 무한루프 예제(while문)
// 입력값이 숫자 5가 입력될때 까지
// 무한히 화면에 숫자를 출력하세요
// while(true) {
// // 입력값
// let num = Number(prompt("숫자"));
// // num 값 검사
// if(num === 5) {
// break; // 무한 루프 중단
// }
// // 화면 출력
// console.log(num + "번째 반복입니다.");
// }
// 연습문제 1) 숫자를 입력하면 이미지를
// 화면에 그 숫자만큼 반복해서 출력하세요
// 힌트 : document.querySelector("#output").innerHTML = "<img src='이미지경로'/>"
let num = Number(prompt("숫자")); // 5
// 문자열 붙이기 변수
let result = ""; // 빈문자열
// 반복문
for(let i=1; i<=num; i++) {
// 문자열 붙이기 형태
result = result + "<img src='./img/fish.jpg' />";
}
document.querySelector("#output").innerHTML = result; // 결과 출력array
// 배열(객체) : 여러가지 값을 저장하는 곳(장소)
// 비교) 변수 : 한가지 값을 저장하는 곳(장소)
// 배열의 형태
// 사용법 :
// 1) 배열 정의
// let 배열 변수명 = ["값", "값2", ... "값n"];
// 2) 배열 사용 : 인덱스번호 (0 ~ n-1까지)
// 배열변수명[0] <- "값"
// 배열변수명[1] <- "값2"
// ...
// 배열변수명[n-1] <- "값n"
// 예제) 아래와 같이 색깔 배열이 있다. 화면에 배열의 값을 모두 출력
let color = ["red", "green", "blue", "yellow", "skyblue"];
for(let i = 0; i <= 4; i++){
console.log(color[i]);
}
// 예제2) 아래와 같은 배열 값들이 있다. 아래처럼 출력
// 출력 : 1번째 할 일 : 우유구매
// : 2번째 할 일 : 업무메일 확인하기
// : 3번째 할 일 : 필라테스 수업
let todos = ["우유구매", "업무메일 확인하기", "필라테스 수업"];
for(let i = 0; i <= 2; i++){
console.log((i+1) + "번째 할 일 : " + todos[i]);
}
// 예제3) 화면에 배열 값들을 출력
// 출력 : 12345
let array = [1, 2, 3, 4, 5];
let result = "";
for(let i = 0; i < array.length; i++){
result = result + array[i];
}
console.log(result);array_func
// 배열의 자바스크립트 내장함수들 소개
// ex) .toFixed(자리수) : 소수점 자르기 함수 등 (js 내장 함수)
// TODO: 배열 내장함수
// 1) 두 배열 합치기 함수
// 사용법 : 배열변수.concat(배열변수2);
// let nums = [1, 2, 3]; // 숫자배열
// let chars = ["a", "b", "c", "d"] // 문자배열
// let numsChars = nums.concat(chars);
// console.log("numsChars", numsChars);
// 2) 배열 내에 구분자를 이용해서 붙이기 함수
// 사용법 : 배열변수.join(구분문자열)
// let chars = ["a", "b", "c", "d"] // 문자배열
// let string1 = chars.join("/");
// // 결과 출력 : 배열 -> 구분자포함 문자열로 변경됨
// console.log("string1", string1);
// 3) push() : 새로운 값을 배열의 뒤에 추가하는 함수
// 사용법 : 배열변수.push(값, 값2 ... 값n);
// let nums = [1, 2, 3]; // 원본배열
// let result = nums.push(4, 5); // 원본배열에 4,5를 추가
// console.log("nums", nums);
// 4) pop() : 마지막 값을 꺼내서 원본배열에서 제거하는 함수
// let chars = ["a", "b", "c", "d"] // 원본배열
// chars.pop();
// console.log("chars", chars);
// 5) 기타(참고) : .push(값) (배열의 마지막에 추가)
// .unshift(값) (배열의 앞에 추가)
// .pop(값) (배열의 마지막값을 제거)
// .shift(값) (배열의 처음값을 제거)
// 6) 배열의 수정
// let nums = [1, 2, 3, 4, 5];
// // 배열의 1st 값 수정 : 0
// nums[0] = 10; // 값 수정(1 -> 10)
// // 배열의 2nd 값 수정 : 1
// nums[1] = 20; // 값 수정(2 -> 20)
// console.log("nums", nums);
// 7) 배열의 복사 :
// 사용법 : 배열변수.slice(복사할_시작인덱스번호, 복사할_끝인덱스번호);
// [복사할_시작인덱스번호 ~ 복사할_끝인덱스번호 -1 까지 복사됨]
let colors = ["red", "green", "blue", "white", "black"];
let colors2 = colors.slice(2,4); // 인덱스번호 2 ~ 3까지 복사됨
console.log("colors2", colors2);inner_func
// 자바스크립트 유용한 내장함수들 소개
// TODO: 1) .toFixed() : 소수점 자르기 함수
// 사용법 : 변수명.toFixed(자리수)
// let x = 12.4769;
// console.log(x.toFixed(2));
// TODO: 2) 문자열 -> 숫자로 바꾸기 함수
// let x = "10.33"; // 숫자로 된 문자열
// console.log(Number(x)); // 문자열 -> 숫자
// console.log(parseInt(x)); // 문자열 -> 정수
// console.log(parseFloat(x)); // 문자열 -> 실수
// 참고 : 이렇게 사용하지 말기
// let x = "apple";
// NaN 에러발생 : (Not a Number)
// console.log(Number(x)); // 에러발생(숫자로 변경불가)
// TODO: 3) 배열을 요소(원소) 모두 문자열로 변경하기
// 사용법 : 배열변수.toString()
// let animals = ["사자", "호랑이", "사슴", "펭귄"];
// // 문자열로 변경
// let str = animals.toString();
// console.log("str", str);
// 참고 : 자료형 확인 함수 : typeof(변수명)
// console.log(typeof(str));
// TODO: 4) 배열의 길이 : 배열변수.length (반복문에 많이 사용)
// let animals = ["사자", "호랑이", "사슴", "펭귄"];
// console.log("animals.length", animals.length);
// TODO: 5) 배열 정렬 함수 : 오름차순, 내림차순
// 문자열 대상 정렬
// let animals = ["사자", "호랑이", "사슴", "펭귄"];
// animals.sort() // 오름차순 정렬
// console.log("animals", animals);
// 배열 뒤집기 : 원본 배열 뒤집어서 출력
// animals.reverse();
// console.log("animals", animals);
// TODO: 6) 문자열 자르기 함수
// 사용법 : 문자열.substring(시작인덱스번호, 끝인덱스번호);
// (시작인덱스번호 ~ 끝인덱스번호 -1 까지 잘림)
// let str = "태산이 무너져도 솟아날 구멍이 있다.";
// 9, 10, 11까지 보임
// console.log("str.substring", str.substring(9,12));
// TODO: 7) 문자열 바꾸기 함수
// 사용법 : 문자열.replace(/대상문자/g, "바꿀문자");
// let str = "A friend in need is a friend indeed.";
// let str2 = str.replace(/friend/g, "family");
// console.log("str2", str2);
// TODO: 8) 대소문자 바꾸기 함수
// 사용법(대문자) : 문자열.toUpperCase();
// 사용법(소문자) : 문자열.toLowerCase();
// let str = "Have a nice Day!";
// let str2 = str.toUpperCase(); // 대문자 바꾸기
// console.log("str2", str2);
// let str3 = str.toLowerCase(); // 소문자 바꾸기
// console.log("str3", str3);
// TODO: 9) 문자열 자르기 : split(구분자)
// 사용법 : 문자열.split(자를문자)
// 결과 : 배열로 내보내기 됨
// let str = "2025 3 25";
// let arr = str.split(" "); // 공백으로 자르기
// console.log("arr[0]", arr[0]);
// console.log("arr[1]", arr[1]);
// console.log("arr[2]", arr[2]);
// TODO: 10) 수학 함수
// 반올림(첫째자리)
// 사용법 : Math.round(실수) -> 반올림 된 정수
console.log("Math.round", Math.round(5.3));
console.log("Math.round", Math.round(5.7));
// 올림(첫째자리), ceil(천장)
// 사용법 : Math.ceil(실수) -> 올림 정수
console.log("Math.ceil", Math.ceil(5.3));
// 내림(첫째자리), floor(바닥)
// 사용법 : Math.floor(실수) -> 내림 정수
console.log("Math.floor", Math.floor(5.3));
// 절대값 : 음수 -> 양수
// 사용법 : Math.abs(음수) -> 양수
console.log("Math.abs", Math.abs(-3.7));
// 최소값 :
// 사용법 : Math.min(값, 값2, ... 값n) -> 최소값
console.log("Math.min", Math.min(0, 3, -5, 12));
// 최대값 :
// 사용법 : Math.max(값, 값2, ... 값n) -> 최대값
console.log("Math.max", Math.max(0, 3, -5, 12));
// 제곱 :
// 사용법 : Math.pow(숫자, 제곱수)
console.log("Math.pow", Math.pow(2,4));
// 제곱근 :
// 사용법 : Math.sqrt(숫자)
console.log("Math.sqrt", Math.sqrt(25));728x90