[JavaScript] 배열, 배열함수, 내장함수, 반복문 (if switch, for, for while, array,document)

exam5

html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#output {

/* 가로 */

width: 700px;

/* 중앙정렬 */

margin: 30px auto;

/* 배경색 */

background-color: black;

/* 글자색 */

color: yellow;

/* 글자 중앙 정렬 */

text-align: center;

/* 글자 크기 */

font-size: 2em;

}

</style>

</head>

<body>

</body>

</html>

/* 조건문 연습 */

// 1) 입력값이 y이면 글쓰기 라고 출력하고

// y가 아니면 글수정이라고 출력하기

// 힌트 : 조건문

// 새로운 출력방법(3) :

// console.log(값) 대신에 아래 코드를 사용하면 화면에 출력됨

// 값이 웹브라우저에 출력됨

// document.querySelector("#output").innerHTML = "값";

// let strVal = prompt("글자를 입력해 주세요");

// // 조건문

// if (strVal === "y"){

// // 웹브라우저에 출력하기

// document.querySelector("#output").innerHTML = "글쓰기"

// }else{

// // 웹브라우저에 출력하기

// document.querySelector("#output").innerHTML = "글수정"

// }

// 2) // 입력값이 짝수이면 짝수입니다.

// 홀수이면 홀수입니다. 출력하는 코딩을 작성하세요.

// 입력 : 0

// 출력 : 짝수입니다.

// 단, 출력은 웹브라우저에 하세요

// let a = Number(prompt("숫자 입력"))

// if(a%2==0){

// document.querySelector("#output").innerHTML = "짝수"

// }else{

// document.querySelector("#output").innerHTML = "홀수"

// }

// 3) // 입력값이 3~5가 들어오면 봄입니다.

// 6~8 들어오면 여름입니다.

// 9~11 들어오면 가을입니다.

// 12~2 들어오면 겨울입니다.

// let a = Number(prompt("몇월입니까?"))

// if(a>=3 && a<=5){

// document.querySelector("#output").innerHTML = "봄"

// }else if(a>=6 && a<=8){

// document.querySelector("#output").innerHTML = "여름"

// }else if(a>=9 && a<=11){

// document.querySelector("#output").innerHTML = "가을"

// }else if(a===12 || a===1 || a===2) {

// document.querySelector("#output").innerHTML = "겨울"

// }else {

// document.querySelector("#output").innerHTML = "잘못된 숫자를 입력하셨습니다"

// }

// 4) // 입력을 하나 받아서 "admin" 이 맞으면

// "해당 콘텐츠 이용이 가능합니다." 라고 출력

// 아니면

// 다시 입력값을 숫자로 하나 또 받아서

// 입력값이 1 ~ 7 사이에 있으면

// "해당 콘텐츠 이용이 가능합니다." 라고 출력하고,

// 아니면 "해당 콘텐츠에 접근할 수 없습니다."

// 힌트 : 중첩 if문 사용(if문 안에 if문 있는 구조)

// let a = prompt();

// if(a=="admin"){

// document.querySelector("#output").innerHTML = "해당 콘텐츠 이용이 가능합니다."

// }else {

// let b = Number(prompt());

// if(b>=1 && b<=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 a = Number(prompt())

// if(a==1){

// document.querySelector("#output").innerHTML = "x의 값은 1입니다"

// }else if(a==2){

// document.querySelector("#output").innerHTML = "x의 값은 2입니다"

// }else{

// document.querySelector("#output").innerHTML = "x의 값은 1 또는 2가 아닙니다"

// }

결과

웹 브라우저에 출력하는 방법

document.querySelector("#output").innerHTML = "값"

if switch

html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

// 조건문 (if문(90%) === 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 문 풀이

let num = Number(prompt("숫자를 입력하세요"));

// 조건문 : switch

// 사용법 : 조건변수와 값을 비교해서 각각의 case 따라 실행됨

// switch(조건변수) {

// case 값:

// 실행문;

// break;

// ...

// default:

// 실행문;

// break;

// }

// 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항 연산자(조건문) : *****(React 에 시도때도 없이 사용함)

// 활용 : 자바 , 자바스크립트 에서 간단한 조건 문제일 경우 사용함(주로 1줄 표현)

// 사용법 : let 변수명 = (조건식)? 실행문 : 실행문2;

// 조건식을 판단하여 참이면 실행문 일 실행되고, 거짓이면 실행문2가 실행됨

// 예제) 입력값을 받아서 값이 admin 이면 "있음" 라고 출력하고 , 아니면 "없음" 출력하세요

let strVal = prompt("아이디를 입력하세요");

// 조건식 : 3항 연산자 사용

// strVal 가 admin 이면 있음 이라는 문자열이 result 변수에 저장됨

// 아니면 없음 이라는 문자열이 result 변수에 저장됨

let result = (strVal === "admin")? "있음" : "없음";

// 결과 출력

alert(result);

exam for3

html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#output {

/* 가로 */

width: 700px;

/* 중앙정렬 */

margin: 30px auto;

/* 배경색 */

background-color: black;

/* 글자색 */

color: yellow;

/* 글자 중앙 정렬 */

text-align: center;

/* 글자 크기 */

font-size: 2em;

}

</style>

</head>

<body>

</body>

</html>

// 1) // for문 안에 if문으로 짝수체크해서 더하기

// 입력 : 없음

// 출력 : 1 ~ 100 까지 합계 구하는데

// 짝수의 합계를 구해서 출력하세요.

// let sum = 0;

// for(let i=1; i<=100; i++){

// if(i%2==0){

// sum += i;

// }

// document.querySelector("#output").innerHTML="값: " + sum;

// 2) // 입력 : 없음

// 출력 : 1 ~ 100 까지 합계 구하는데

// 3의 배수의 합계를 구해서 출력하세요.

// 결과 : 1683

// let sum = 0;

// for(let i=1; i<=100; i++){

// if(i%3==0){

// sum += i;

// }

// document.querySelector("#output").innerHTML="값: " + sum;

// 3) 1부터 n까지 합 구하기

// 입력예시 : 100

// 출력예시 : 5050

// let a = Number(prompt("숫자를 입력하세요"));

// let sum = 0;

// for(let i=1; i<=a; i++){

// sum += i;

// }

// document.querySelector("#output").innerHTML="값: " + sum

// 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증가)

// 방법 1

let num = prompt("문자 2개를 입력하세요").split(" ")//.map(Number); // 숫자 배열

let cnt = 0;

// // let a = Number(prompt())

for(let i = 0; i<=num.length; i++){

if(num[i] % 5 == 0){

cnt++;

// document.querySelector("#output").innerHTML = num[i]

console.log(num[i]);

break;

}

if(cnt==0){

// document.querySelector("#output").innerHTML = 0

console.log(0);

}

// 방법 2

// let num = prompt("문자 2개를 입력하세요").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 a = Number(prompt())

// let sum =0;

// for(let i=1;i<=a;i++){

// if(i%2==0){

// sum += i

// }

// document.querySelector("#output").innerHTML = sum

// 6) 두 수 사이의 홀수 출력하기

// 입력 : 2

// 입력 2 : 7

// 출력예시 : 3 5 7

// let a = Number(prompt())

// let b = Number(prompt())

// let nul ="";

// for(let i=a;i<=b;i++){

// if(i%2==1){

// nul += i +" "

// }

// document.querySelector("#output").innerHTML = nul

for while

html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

// 반복문 : for(80%) === while문

// 예제 1)

// 입력 : 없음

// 출력 : 안녕하세요 5번 출력

// TODO: for 문

// 사용법 : 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; 문(반복문 #3)

// 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)

// while(true) {

// // 입력값

// let num = Number(prompt("숫자"));

// // num 값 검사

// if(num === 5) {

// break; // 무한 루프 중단

// }

// // 화면 출력

// console.log(num + "번째 반복입니다.");

// }

// let num =0;

// while(true){

// let a = Number(prompt("숫자"));

// num++;

// if(a==5){

// break;

// }

// console.log(num + "번째 반복입니다.")

// }

// 연습문제 1) 숫자를 입력하면 이미지를 화면에 그 숫자만큼 반복해서 출력하세요

// let a = Number(prompt("숫자를 입력하세요"))

// let nul ="";

// for(let i = 1; i<=a ;i++){

// nul +="<img src ='./img/fish.jpg'/>"

// }

// document.querySelector("#output").innerHTML = nul

arrays

html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

// 배열(객체) : 여러가지 값을 저장하는 곳(장소)

// 비교) 변수 : 한가지 값을 저장하는 곳(장소)

// 배열의 형태

// 사용법 :

// 1) 배열 정의

// let 배열변수명 = ["값", "값2", ... "값n"];

// 2) 배열 사용 : 인덱스번호(0 ~ n-1까지)

// 배열변수명[0] <- "값"

// 배열변수명[1] <- "값2"

// ...

// 배열변수명[n-1] <- "값n"

// 예제) 아래와 같이 색깔 배열이 있다. 화면에 배열의 값을

// 모두 출력하세요

// let color = ["red", "green", "blue", "yellow", "skyblue"];

// // for문 사용 : 배열 출력, console.log()

// // color === 배열변수명, 배열변수명[인덱스번호]

// for(let i=0; i<color.length; i++) {

// // i=0 일때 color[0] === "red" 출력

// // i=1 일때 color[1] === "green" 출력

// // i=2 일때 color[2] === "blue" 출력

// // ....

// console.log(color[i]); // i=1 ~ i=4까지 화면에 출력함

// }

// 예제 2) 아래와 같은 배열 값들이 있다.

// 아래처럼 출력하세요

// 출력 : 1번째 할 일: 우유구매

// 2번째 할 일: 업무 메일 확인하기

// 3번째 할 일: 필라테스 수업

// let todos = ["우유구매", "업무 메일 확인하기", "필라테스 수업"]

// for(let i=0; i<todos.length;i++){

// console.log((i+1) + "번째 할 일: "+todos[i])

// }

let array = [1,2,3,4,5]; // 숫자 배열 정의

let nul = "";

for(let i=0; i<array.length;i++){

nul += array[i];

}

alert(nul)

array func

html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

// 배열의 자바스크립트 내장함수들 소개

// ex) .toFixed(자리수) : 소수점 자르기 함수 등 (js 내장 함수)

// TODO: 배열 내장함수

// 1) 두 배열 합치기 함수(***)

// 사용법 : 배열변수.concat(배열변수2);

// let nums = [1,2,3] // 숫자 배열

// let chars = ["a", "b", "c", "d"]; // 문자 배열

// // 두개 합치기

// let numsChars = nums.concat(chars);

// // 결과 출력 : 1,2,3, "a", "b", "c", "d"

// 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]; // 원본 배열

// nums.push(4,5); // 1,2,3,4,5

// // 결과 출력 : 원본 조작 함수

// console.log("nums", nums);

// 4) pop() : 마지막 값을 꺼내서 원본배열에서 제거하는 함수

// let chars = ["a", "b", "c", "d"]; // 원본 배열

// chars.pop(); // a, b, c

// 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

html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

// 자바스크립트 유용한 내장함수들 소개

// TODO: 1) .toFixed() : 소수점 자르기 함수

// 사용법 : 변수명.toFixed(자리수)

// let x = 12.4763;

// console.log(x.toFixed(2)); // 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 = "태산이 무너져도 솟아날 구멍이 있다.";

// // 4,5,6,7 까지 보임

// console.log("str.substring", str.substring(4,8));

// 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]); // 2025

console.log("arr[1]", arr[1]); // 3

console.log("arr[2]", arr[2]); // 25

// 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.round", 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.min(값, 값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));

// TODO: 11) 날짜 함수들

let date = new Date(); // 현재 날짜 (년, 월, 일, 시, 분, 초);

// 출력

let year = date.getFullYear(); // 년도

let month = date.getMonth()+1; // 월 (0~11)

let day = date.getDate(); // 일

console.log("year",year)

console.log("month",month)

console.log("day",day)

// 출력

let hour = date.getHours(); //시

let minute = date.getMinutes(); //분

let second = date.getSeconds(); //초

console.log("hour",hour)

console.log("minute",minute)

console.log("second",second)

저작자표시

'HTML > JavaScript' 카테고리의 다른 글

[JavaScript] children, parent, siblings, before after, remove, classList, forbidden, char num, date (0)	2023.08.23
[JavaScript] DOM querySelector, onclick, mouseover, setInterval, addEventListener (0)	2023.08.22
[JavaScript] 함수, 객체 (0)	2023.08.21
[JavaScript] for문, 반복문 예제 (0)	2023.08.17
[JavaScript] 기본 사용법, 입력, 출력, 자료형, 사용법, 조건문, 연산자 (0)	2023.08.16

exam5

if switch

exam for3

for while

arrays

array func

inner func

'HTML > JavaScript' 카테고리의 다른 글

티스토리툴바