01_alert_console
자바스크립트를 이용한 화면출력 방법
더보기
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>화면출력 방법</title>
</head>
<body>
<script src="./js/01_alert_console.js"></script>
</body>
</html>
더보기
// TODO : 화면 출력 방법 (결과 확인용)
// 코딩 용어 : ;(세미콜론), :(콜론) &(엔퍼센트)
// 자바스크립트(js) 명령문(문장)의 끝에 ;(세미콜론) 붙임(생략)
// 주석 단축키 : ctrl + //
// 1) 사용법 : alert("문자열")
// alert("Hello Javascript");
// 2) 사용법 : console.log("문자열")
// 결과 확인 : 크롬 브라우저(오른쪽 클릭)
// - 검사 - 2nd 탭 (console)
console.log("Hello Javascript");
// 기타 : 함수 => 이름(문자열[변수 등])
식별자 및 명명법
식별자 : 변수명, 상수명, 함수명 등을 통틀어서 말함
변수(변하는 공간), 상수(안 변하는 공간)
변수, 상수의(이름을 정하는 규칙)
변수명 규칙 :
1) 첫 글자는 영문자, 달러($), 언더바(_)만 올 수 있음(숫자 안됨)
2) 대소문자를 구분
3) js 예약어(let, const 등) 사용 못함
기타(참고) 한글, 한자도 가능은 하다.
더보기
// TODO : 변수, 상수의(이름을 정하는 규칙)
// 변수명 규칙 :
1) 첫 글자는 영문자, 달러($), 언더바(_)만 올 수 있음(숫자 안됨)
// 2) 대소문자를 구분
let hi = "안녕하세요"; // (서로 다른 함수)
let Hi = "안녕하세요"; // (서로 다른 함수)
// 3) js 예약어(let, const 등) 사용 못함
// 기타(참고) 한글, 한자도 가능은 하다.
let 안녕 = "안녕하세요";
명명법(이름을 정하는 규칙)
변수명, 함수명(메소드명) 등에 사용되는 카멜 표기법(cameiCase) : 낙타 표기법
단어와 단어 사이는 대문자, 첫 글자는 소문자
클래스명, 생성자명에 사용되는 파스칼 표기법(Pascal)
단어와 단어 사이는 대문자, 첫 글자는 대문자
기타(참고) : 3) _언더바 표기법(스네이크 표기법), 4) - 마이너스 표기법
더보기
// TODO : 명명법(이름을 정하는 규칙)
// TODO 1) 카멜 표기법(cameiCase) : 낙타 표기법
// 사용법) 단어와 단어 사이는 대문자, 첫 글자는 소문자
// 예) hello + world -> helloW(대)orld
// 사용처 : 변수명, 함수명(메소드명) 등
// TODO 2) 파스칼 표기법(Pascal)
// 사용법) 단어와 단어 사이는 대문자, 첫 글자는 대문자
// 예) hello + world -> H(대)elloW(대)orld
// 사용처 : 클래스명, 생성자명
// TODO 기타(참고) : 3) 언더바 표기법(스네이크 표기법), 4) 마이너스 표기법
// 예) hello + world -> hello_world (언더바 표기법)
// 예) hello + world -> hello-world (마이너스 표기법)
표현식 : 변수, 상수, 값 입력 방법
1) 변수 : 변하는 값을 저장하는 1가지 값만 저장되는 곳(공간) vs 값 : 문자열, 숫자 등
변수를 이용한 출력 사용(소프트 코딩(soft code)) 방법 : ★ 추천 ★
변수 없이 출력하는 (하드 코딩(hard coding)) 방법 : ☆ 비추천 ☆
더보기
// TODO 1) 변수 : 변하는 값을 저장하는 1가지 값만 저장되는 곳(공간) vs 값 : 문자열, 숫자 등
// 변수 사용법 : let 변수명 = 값;
let hello = "안녕하세요";
hello = "안녕"; // 값 수정(변수는 가능)
// TODO 출력 변수 사용(소프트 코딩(soft code)) 방법 : ★ 추천 ★
alert(hello);
// TODO 출력(하드 코딩(hard coding)) 방법 : ☆ 비추천 ☆
alert("안녕")
2) 상수 : 변하지 않는 값을 저장하는 곳(공간)
상수 사용법 : const 상수명 = 값; 상수는 수정 불가(수정시 에러 발생)
더보기
// TODO 2) 상수 : 변하지 않는 값을 저장하는 곳(공간)
// 상수 사용법 : const 상수명 = 값;
const num = 1; // 상수 정의 (값 저장), 초기화
// TODO num = 2; -> 상수 수정 불가(에러 발생)
alert(num);
// TODO 자료형 :
// 1) 문자열(String) : 예) "반갑습니다", '안녕하세요'
// 쌍따옴표, 홑따옴표를 사용해서 문자들을 묶음
let hello_1 = "반갑습니다"
alert(hello_1 + '안녕하세요');
// 2) 숫자(Number) : 1, 2, 3 등
alert(2);
3) 문자열 특수문자 사용방법
줄 바꿈(<br/>) :\n
홑따옴표'안녕하세요'
쌍따옴표 "안녕하세요"
쌍따옴표 + 홑따옴표 모두 출력
더보기
// TODO 3) 문자열 특수문자
// 특수문자 사용법 :
// TODO 줄 바꿈(<br/>) :\n
let hello_2 = "안녕하세요\n홍길동입니다"
// 결과 출력
alert(hello_2);
// TODO 홑따옴표'안녕하세요' 출력
let hello_3 = "'안녕하세요'";
alert(hello_3);
// TODO 쌍따옴표 "안녕하세요" 출력
let hello_4 = '"안녕하세요"';
alert(hello_4);
// TODO 쌍따옴표 + 홑따옴표 모두 출력
// TODO 사용법 : 특수문자 사용 : \", \'
// '"안녕"하세요'
let hello_5 = "'안녕\"하세요'";
alert(hello_5);
연산자
사칙 연산자
+(덧셈), -(뺄샘), *(곱셈), /(나눗셈(슬래쉬)) %(나머지연산자 : 나누어서 나머지가 결과로 나옴)
더보기
// TODO 사칙 연산자 :
// 사칙연산자 : +(덧셈), -(뺄샘), *(곱셈), /(나눗셈(슬래쉬)) %(나머지연산자 : 나누어서 나머지가 결과로 나옴)
// TODO 1) 덧셈
let num1 = 52 + 273; // = 325
// 결과 출력
alert(num1);
// TODO 2) 뺄셈 : 273 - 52 = 221
let num2 = 273 - 52;
alert(num2);
// TODO 3) 곱셈 : 273 * 52 = 14196
let num3 = 273 * 52
alert(num3);
// TODO 4) 나눗셈 : 273 / 52 = 5.25, ※실수(비슷한 숫자, 유사한 숫자(부동소수점법))
let num4 = 273 / 52
alert(num4);
// TODO 5) 나머지연산 : 273 % 52 = 13
let num5 = 273 % 52
alert(num5);
문자열 연산(더하기 === 붙이기)
사용법: let 변수명 = "문자열" + "문자열2" + ....;
더보기
// TODO : 문자열 연산(더하기 === 붙이기)
// 사용법: let 변수명 = "문자열" + "문자열2" + ....;
let hello = "안녕하세요 " + " 홍길동입니다.";
// 결과 출력
alert(hello);
참/거짓을 표시하는 자료형(문자열(String), 숫자(Number)) : bool(boolean)(불 불린)
사용법 : let 변수명 = true(또는 false)
c언어나 java나 달리 변수의 자료형을 나타내는 예약어가 없음
let(const) 이용해서 변수 정의
더보기
// TODO : 참/거짓을 표시하는 자료형(문자열(String), 숫자(Number)) : bool(boolean)(불 불린)
// 사용법 : let 변수명 = true(또는 false)
// ※ c언어나 java나 달리 변수의 자료형을 나타내는 예약어가 없음
// ※ let(const) 이용해서 변수 정의
let hello_2 = true; // 내부적으로 bool(boolean) 된 것임
// 결과 출력
alert(hello2);
let hello3 = false; // 내부적으로 bool(boolean) 된 것임
// 결과 출력
alert(hello3);
비교 연산자
>=(크거나같음), <=(작거나같음), >(크다), <(작다), ==(같다), ===(같다, 좀 더 엄격하게 검사)
코딩 실수 예) 조건문 : if(hello = "안녕하세요") {} (x)
코딩 작성 예) 조건문 : if(hello == "안녕하세요") {} (o)
더보기
// TODO : 비교 연산자 :
// >=(크거나같음), <=(작거나같음),
// >(크다), <(작다),
// ==(같다), ===(같다, 좀 더 엄격하게 검사)
let age = 21;
if (age >= 19) {
alert("성인입니다.");
}
// ※ 코딩 실수 예) 조건문 : if(hello = "안녕하세요") {} (x)
// ※ 코딩 작성 예) 조건문 : if(hello == "안녕하세요") {} (o)
논리 연산자 : 참/거짓을 이용해서 논리 연산함
1) 논리 부정 : !(반대), (참이면 거짓, 거짓이면 참이 됨)
2) *논리 곱 : && (연산 시 하나라도 거짓이면 거짓) ★ if문 대신 논리곱을 사용할 수 있음 (고급 코딩)
★ 3) 논리 합(or) : || (연산 시 하나라도 참이면 참)
더보기
// TODO : 논리 연산자 : 참/거짓을 이용해서 논리 연산함
// TODO 1) 논리 부정 : !(반대), (참이면 거짓, 거짓이면 참이 됨)
// 예) let hello = !true;
// 결과 출력
// alert(hello);
// TODO 2) 논리 곱 : && (연산 시 하나라도 거짓이면 거짓)
// ※ 리액트 코딩할 떄 굉장히 많이 나옴
// 활용 : if문 대신 논리곱을 사용할 수 있음 (고급 코딩)
// let hello1 = true && true;
// 결과 출력
// alert(hello1); // = true
// let hello2 = true && false;
// 결과 출력
// alert(hello2); // = tfalse
// TODO 3) 논리 합(or) : || (연산 시 하나라도 참이면 참)
// let hello = true || true;
// 결과 출력
// alert(hello); // = true
// let hello2 = true || false;
// alert(hello2); // = true
대입 연산자(축약형) : 변수, 상수에 값을 넣을 때 사용
=(대입 연산자) vs ==, ===(비교 연산자) 구분
대입연산자 축약형
더보기
// TODO : 대입 연산자 : 변수, 상수에 값을 넣을 때 사용
// =(대입 연산자) vs ==, ===(비교 연산자) 구분
// let hello = "안녕하세요";
// let num = 1;
// TODO : 대입 연산자 축약형
// let x = 10; // x 의 변수에 10 값을 저장(대입연산자 = 사용)
// 예1)
// x = x + 5; // 10 + 5 => 다시 x 로 저장됨, x = 15;
// x += 5; // +(덧셈) 축약형
// alert(x); // 15 + 5 => 다시 x 로 저장됨 x = 20;
// 예2)
// x = x - 5; // 10 - 5
// x -=5; // -(뺄셈) 축약형
// 예3)
// x = x * 5; // 10 * 5
// x *=5; // *(곱셈) 축약형
// 예4)
// x = x / 5; // 10 / 5
// x /=5; // /(나눗셈) 축약형
// 예5)
// x = x % 5; // 10 % 5
// x %=5; // %(나머지 연산) 축약형
증감 연산자 : 1씩 증가 또는 1씩 감소함
변수++, ++변수, 변수--, --변수 등
더보기
// TODO : 증감 연산자 : 1씩 증가 또는 1씩 감소함
// 사용법 : 변수++, ++변수, 변수--, --변수 등
// let x = 10;
// alert(x); // x=10
// ++x;
// alert(x); // x=11
// --x; // 1감소
// alert(x); // x=10
// 뒤에 붙이기 : 변수++, --변수
// let y = 10;
// y++;
// alert(y); // y=11
// y--;
// alert(y); // y=10
조건문_if
1) if문
조건식이 참(true)이면 명령문이 실행됨
if(조건식) {
명령문(문장)
};
더보기
// TODO 조건문 (if문(90%) === switch문)
// 1번 예제 ) // X 가 1일 경우 "x의 값은 1입니다."
// X 가 2일 경우 "x의 값은 2입니다."
// X 가 1도2 도 아닐경우 "x의 값은 1 또는 2가 아닙니다."
// 입력 : 2
// 출력 : x의 값은 2입니다.
// TODO : if문 풀이
let input_num1 = Number(prompt("1번 예제문제 if : x 숫자(1~2) 입력")); // TODO 입력 값
if (input_num1 == 1) {
document.querySelector("#output").innerHTML = "x의 값은 1입니다.";
} else if (input_num1 == 2) {
document.querySelector("#output").innerHTML = "x의 값은 2입니다.";
} else {
document.querySelector("#output").innerHTML = "x의 값은 1 또는 2가 아닙니다";
}
// TODO : switch문 풀이
let input_num2 = Number(prompt("1번 예제문제 swuitch : x 숫자(1~2) 입력")); // TODO 입력 값
// 조건문 : switch
// 사용법 : 조건변수와 값을 비교해서 각각의 case 따라 실행됨
// switch(조건변수) {
// case 값:
// 실행문;
// break;
// ...
// default:
// 실행문;
// break;
// }
switch (input_num2) {
// input_num2 === 1일때
case 1:
alert("x의 값은 1입니다.");
break;
// input_num2 === 2일때
case 2:
alert("x의 값은 2입니다.");
break;
// 모두 아닐때 아래가 실행됨
default:
alert("x의 값은 1 또는 2가 아닙니다.");
break; // 생략가능
}
2) if/else
문 조건식이 참이면 실행문이 실행되고, 거짓이면 실행문2가 실행됨
if(조건식) {
실행문(문장);
} else {
실행문2(문장);
}
더보기
// TODO : 2) 조건문 : if/else 문
// 사용법 : 조건식이 참이면 실행문이 실행되고, 거짓이면 실행문2가 실행됨
// if(조건식) {
// 실행문(문장);
// } else {
// 실행문2(문장);
// }
// 예제) 19살 이상이면 성인입니다. 를 출력하고, 19살 미만이면 미성년입니다. 를 출력하세요.
let age2 = 18; // 변수 초기화
if (age2 >= 19) {
// 결과 출력
alert("성인입니다.");
} else {
// 결과 출력
alert("미성년입니다.");
}
3) if/ else if/ else 문
조건식을 판단하여 참이면 실행문이 실행되고, 거짓이면 조건식2를 판단하여 참이면 실행문2가 실행되고, 모든 조건식이 거짓이면 실행문 3이 실행됨
if(조건식) {
실행문(문장);
} else if {
실행문2(문장);
} else {
실행문3(문
);
더보기
// TODO : 3) 조건문 : if/ else if/ else 문
// 사용법 : 조건식을 판단하여 참이면 실행문이 실행되고,
// 거짓이면 조건식2를 판단하여 참이면 실행문2가 실행되고,
// 모든 조건식이 거짓이면 실행문 3이 실행됨
// if(조건식) {
// 실행문(문장);
// } else if {
// 실행문2(문장);
// } else {
// 실행문3(문장);
// }
// 예제) 19살 이상이면 성인입니다. 를 출력하고,
// 18살 이면 청소년입니다. 를 출력하고,
// 17살 이하이면 미성년입니다. 를 출력하세요
// 위를 코딩하세요.
// 출력 : 청소년입니다.
let age3 = 18; // 변수의 초기화
if (age3 >= 19) {
alert("성인입니다.");
} else if (age3 == 18) {
alert("청소년입니다.");
} else {
alert("미성년입니다.");
}
// 연습) x = 10 이고, y = 20 값이 있습니다.
// x와 y 같으면 "x 와 y가 같다" 출력하고,
// x < y 이면 "x 는 y보다 작다" 출력하고,
// x > y 이면 "x 는 y보다 크다" 출력하세요.
// 위를 코딩하세요.
// 출력 : x 는 y보다 작다
let x = 10, y = 20;
if (x < y) {
alert("x 는 y보다 작다");
} else if (x == y) {
alert("x 와 y가 같다");
} else{
alert("x 는 y보다 크다");
}
// 연습2) 10보다 작은 수가 입력되면 small 를 출력하고,
// 10이상이면 아무것도 출력하지 마세요.
// 위 내용 코딩하세요.
// 힌트 : let 변수명 = Number(prompt("1개의 정수를 입력하세요"))
// 입력 : 5
// 출력 : small
let num = Number(prompt("입력 5를 입력하세요")); // 정수
if (num < 10) {
alert("small");
}
조건문_switch
조건 변수와 값을 비교해서 각각의 case 따라 실행됨
switch(조건변수) {
case 값:
실행문;
break;
...
default:
실행문;
break; }
switch문은 if문과 유사하지만, 특정 변수나 표현식의 값을 기반으로 다양한 경우의 수를 처리할 때 사용된다.
switch문은 해당 변수의 값과 일치하는 각각의 case 라벨을 가지며, 해당 case 라벨에 해당하는 코드 블록을 실행한다.
if문은 복잡한 조건식과 여러 가지 경우의 수를 다룰 때
switch문은 변수의 값을 기반으로 단순한 값에 대한 조건 체크에 유용
더보기
// TODO 조건문 (if문(90%) === switch문)
// 1번 예제 ) // X 가 1일 경우 "x의 값은 1입니다."
// X 가 2일 경우 "x의 값은 2입니다."
// X 가 1도2 도 아닐경우 "x의 값은 1 또는 2가 아닙니다."
// 입력 : 2
// 출력 : x의 값은 2입니다.
// TODO : if문 풀이
let input_num1 = Number(prompt("1번 예제문제 if : x 숫자(1~2) 입력")); // TODO 입력 값
if (input_num1 == 1) {
document.querySelector("#output").innerHTML = "x의 값은 1입니다.";
} else if (input_num1 == 2) {
document.querySelector("#output").innerHTML = "x의 값은 2입니다.";
} else {
document.querySelector("#output").innerHTML = "x의 값은 1 또는 2가 아닙니다";
}
// TODO : switch문 풀이
let input_num2 = Number(prompt("1번 예제문제 swuitch : x 숫자(1~2) 입력")); // TODO 입력 값
// 조건문 : switch
// 사용법 : 조건변수와 값을 비교해서 각각의 case 따라 실행됨
// switch(조건변수) {
// case 값:
// 실행문;
// break;
// ...
// default:
// 실행문;
// break;
// }
switch (input_num2) {
// input_num2 === 1일때
case 1:
alert("x의 값은 1입니다.");
break;
// input_num2 === 2일때
case 2:
alert("x의 값은 2입니다.");
break;
// 모두 아닐때 아래가 실행됨
default:
alert("x의 값은 1 또는 2가 아닙니다.");
break; // 생략가능
}
// TODO : 3항 연산자(조건문) ※React 에서 시도떄도 없이 사용함
// 활용 : 자바, 자바스크립트에서 간단한 조건 문제일 경우 사용함
// 사용법 : let 변수명 = (조건식)? 실행문 : 실행문2;
// 조건식을 판단하여 참이면 실행문1 실행되고, 거짓이면 실행문2가 실행됨
// 예제) 입력값을 받아서 값이 admin 이면 "있음" 라고 출력하고, 아니면 "없음" 출력하세요.
let input_str = prompt("2번 예제문제 : 아이디 입력"); // TODO 입력 값
// 조건식 : 3항 연산자 사용
// input_str 가 admin 이면 "있음" 이라는 문자열이 result 변수에 저장됨
// 아니면 "없음" 이라는 문자열이 result 변수에 저장됨
let result = input_str === "admin" ? "있음" : "없음";
alert(result);
반복문_for
1) 카운팅 : 1씩 증가시키기
for(초기값;조건식;증감식){
}
더보기
// 예제) count1 변수가 1부터 10까지 1씩 증가하는 코드를 작성하세요.
count1 = 0;
for (let i = 1; i <= 10; i++) {
// i = 1일때 1 <= 10 (참) 반복문 실행 : count1 = 0 + 1 (값 : 1)
// i = 2일때 2 <= 10 (참) 반복문 실행 : count1 = 1 + 1 (값 : 2)
// i = 3일때 3 <= 10 (참) 반복문 실행 : count1 = 2 + 1 (값 : 3)
// ...
// i = 10일때 10 <= 10 (참) 반복문 실행 : count1 = 9 + 1 (값: 10)
count1 = count1 + 1; // TODO 카운팅 코드
console.log(count1); // 증가를 보여주고 싶으면 반복문 안에서 출력
}
2) 누적합 카운팅
더보기
// TODO : 2) 누적합 카운팅
// 예제) 1 ~ 10 까지 모든 숫자를 더해서 최종 결과를 출력하는
// 코드를 작성하세요.
// 출력 : 55
// 카운팅 코드 사용, for문의 i 변수 사용
let count2 = 0; // 카운팅 변수 초기화
let sumVal = 0; // 누적된 값을(1~10까지합) 저장할 변수 초기화
for (let i = 1; i <= 10; i++) {
count2 = count2 + 1; // TODO 카운팅 코드
// 누적합 코드
// i=1 일때 1 <= 10 (참), count2 = 0 + 1(값 : 1), sumVal = 0 + 1 (값 : 1)
// i=2 일때 1 <= 10 (참), count2 = 1 + 1(값 : 2), sumVal = 1 + 2 (값 : 3)
// i=3 일때 3 <= 10 (참), count2 = 2 + 1(값 : 3), sumVal = 3 + 3 (값 : 6)
// ...
// i=10 일때 10 <= 10 (참), count2 = 9 + 1(값 : 10), sumVal = 10 + 45(값 : 55)
sumVal = sumVal + count2;
}
console.log(sumVal); // 합계만 보여주고 싶으면 반복문 밖에서 출력
console.log("============");
반복문 3) 문자열 붙이기
더보기
// TODO : 3) 문자열 붙이기
// 예제 : ********** (10개)를 화면에 출력하세요.
// 단, 반복문을 이용하세요..
let strCount1 = ""; // 빈문자열("") 로 초기화
for (let i = 1; i <= 10; i++) {
// 문자열 붙이기 (카운팅)
// i=1 일때 1 <= 10 (참) 반복문 실행 strCount + "" + "*" (값 : "*")
// i=2 일때 2 <= 10 (참) 반복문 실행 strCount + "*" + "*" (값 : "**")
// i=3 일때 3 <= 10 (참) 반복문 실행 strCount + "**" + "*" (값 : "***")
// ...
// i=10 일때 1 <= 10 (참) 반복문 실행 strCount + "*********" + "*" (값 : "**********")
strCount1 = strCount1 + "*";
}
// 결과 출력
console.log(strCount1);
console.log("============");
// 연습) 아래 결과처럼 (*)별 출력하기
// 결과 :
// *
// **
// ***
// ****
// *****
// ******
let strCount2 = ""; // 빈문자열("") 로 초기화
for (let i = 1; i <= 6; i++) {
// i=1 일때 1 <= 5 (참) 반복문실행 strCount = "" + "*"("*"), console.log("*")
// i=2 일때 2 <= 5 (참) 반복문실행 strCount = "*" + "*"("**"),console.log("**")
// i=3 일때 3 <= 5 (참) 반복문실행 strCount = "**" + "*"("****"), console.log("***")
// i=4 일때 4 <= 5 (참) 반복문실행 strCount = "***" + "*"("*****"), console.log("****")
// i=5 일때 5 <= 5 (참) 반복문실행 strCount = "****" + "*"("*****"), console.log("*****")
strCount2 = strCount2 + "*";
// 결과 출력
console.log(strCount2);
}
반복문과 함께 사용하는 예약어
1) break : 중단 예약어
for(초기값;조건식;증감식){
if() {
break; 반복문 강제 중단
}
}
더보기
// TODO 반복문과 함께 사용하는 예약어
// TODO 1) break : 중단 예약어
// 예제) 1부터 5까지 반복해서 3이 될때 중단하고 빠져나오는
// 코드를 작성하세요
// for(초기값;조건식;증감식){} : 조건식 참일때만 반복함
for(let i=1; i<=5; i++) {
// 결과 출력
console.log("i의 값은 " + i); // i값 출력
// i === 3 일때 중단
if(i === 3) {
break; // 반복문 강제 중단
}
}
더보기
// 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("문자 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 = i; // 5의 배수 출력
// 카운팅 변수 : 1증가 (5의 배수이므로)
count = count + 1;
// 강제 중단
break;
}
}
2) continue : 계속 이라는 예약어
for(초기값;조건식;증감식){
if() {
continue; 바로 반복문 첫 라인으로 올라감
}
}
더보기
// TODO 반복문과 함께 사용하는 예약어
// TODO 2) continue : 계속 이라는 예약어
// 예제 2) 1 ~ 5까지 출력하되 3은 제외하고 출력하기
for(let i=1; i<=5; i++) {
// i === 3 이면 통과 : 아래 라인을 실행안함
if( i === 3 ) {
// 1) 밑에 console.log 라인이 실행안됨
// 2) 바로 반복문 첫 라인으로 올라감
continue;
}
console.log("i의 값은 " + i); // 결과 i 출력
}
반복문_while
1) while
주어진 조건이 참(True)인 동안 반복적으로 실행된다.
조건이 만족되지 않으면 반복이 중단된다.
while문 사용법 :
초기값;
while(조건식) {
반복문; 증식;
}
For문: for문은 주로 반복 횟수가 미리 정해진 경우에 사용되며, 보통 시작점과 종료점 및 증감값을 설정하여 사용된다. 예를 들어, 배열의 모든 요소를 반복적으로 접근할 때 사용한다.
더보기
// TODO : 반복문 : 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++; // 증감식
}
2) do-while
조건을 루프 실행 전에 검사하는 while문과는 다르게, 루프의 코드 블록을 최소한 한 번은 실행한 다음 조건을 검사하여 반복 여부를 결정하는 반복문이다. 최소한 한 번은 실행하고, 나중에 조건을 검사하여 계속할지 여부를 결정한다.
사용법 : 예제
while(true) { 반복문; }
while(true) {
console.log("안녕하세요");
}
더보기
// TODO : 반복문 특수형태 : 무한 루프(loop, 반복문)(무한히 반복)
// TODO : while 문 무한루프
// 사용법 : 예제
while(true) { 반복문; }
while(true) {
console.log("안녕하세요");
}
// TODO : do ~ while; 문(반복문)
// TODO : 특징 : 조건식이 거짓이라도 1번은 실행함
let i = 1; // 초기값
do {
console.log("안녕하세요");
i++; // 증감식
} while(i<=5); // while(조건문);
3항 연산자(조건문)
자바, 자바스크립트에서 간단한 조건 문제일 경우 사용함
사용법 : let 변수명 = (조건식)? 실행문 : 실행문2;
조건식을 판단하여 참이면 실행문1 실행되고, 거짓이면 실행문2가 실행됨
더보기
// TODO : 3항 연산자(조건문)
// 활용 : 자바, 자바스크립트에서 간단한 조건 문제일 경우 사용함
// 사용법 : let 변수명 = (조건식)? 실행문 : 실행문2;
// 조건식을 판단하여 참이면 실행문1 실행되고, 거짓이면 실행문2가 실행됨
// 예제) 입력값을 받아서 값이 admin 이면 "있음" 라고 출력하고, 아니면 "없음" 출력하세요.
let input_str = prompt("예제문제 : 아이디 입력"); // 입력 값
// 조건식 : 3항 연산자 사용
// input_str 가 admin 이면 "있음" 이라는 문자열이 result 변수에 저장됨
// 아니면 "없음" 이라는 문자열이 result 변수에 저장됨
let result = input_str === "admin" ? "있음" : "없음";
alert(result);
배열의 형태
배열(객체) : 여러가지 값을 저장하는 곳(장소) vs 변수 : 한 가지 값을 저장하는 곳(장소)
사용법 :
1) 배열 정의 let 배열 변수명 = ["값", "값2", ... "값n"];
2) 배열 사용 : 인덱스 번호(0 ~ n-1까지) 배열 변수명[0] <- "값" 배열 변수명[1] <- "값2" ... 배열변수명[n-1] <- "값n"
더보기
// 배열(객체) : 여러가지 값을 저장하는 곳(장소)
// 비교) 변수 : 한 가지 값을 저장하는 곳(장소)
// TODO : 배열의 형태
// 사용법 :
// 1) 배열 정의
// let 배열 변수명 = ["값", "값2", ... "값n"];
// 2) 배열 사용 : 인덱스 번호(0 ~ n-1까지)
// 배열 변수명[0] <- "값"
// 배열 변수명[1] <- "값2"
// ...
// 배열변수명[n-1] <- "값n"
// 예제 1) 아래와 같이 색깔 배열이 있다. 화면에 배열의 값을
// 모두 출력하세요.
// 힌트 : for문 사용 : 배열 출력, console.log() 사용
let color = ["red", "green", "blue", "yellow", "skyblue"];
for (let i = 0; i <= 4; i++) {
// i=0 일때 color[0] === "red" 출력
// i=1 일때 color[1] === "green" 출력
// i=2 일때 color[2] === "blue" 출력
// i=3 일때 color[3] === "yellow" 출력
// i=4 일때 color[4] === "skyblue" 출력
console.log(color[i]); // i=1 ~ i=4까지 화면에 출력함
}
// 예제 2) 아래와 같은 배열 값들이 있다.
// 아래처럼 출력하세요
// 출력 : 1번째 할 일: 우유구매
// 2번째 할 일: 업무 메일 확인하기
// 3번째 할 일: 필라테스 수업
let todos = ["우유구매", "업무 메일 확인하기", "필라테스 수업"];
// 반복문
for (let i = 0; i < 3; i++) {
console.log("2번 예제 " + (i + 1) + "번째 할 일 : " + todos[i]);
}
// 예제 3) 화면에 배열 값들을 출력하세요
// 출력 : 12345
// 힌트 : 배열의 길이 : 배열변수명.length 사용하세요
let array = [1, 2, 3, 4, 5]; // 숫자 배열 정의
let result_3 = " "; // 초기화
// 반복문 : array.length(배열의 크기(개수):5)
for (let i = 0; i < array.length; i++) {
// array[i] 문자열 붙이기
result_3 = result_3 + array[i];
}
// 최종 결과 출력
console.log("3번 예제 " + result_3);
배열 내장함수
1) 두 배열 합치기 함수
2) 배열 내에 구분자를 이용해서 붙이기 함수
3) push() : 새로운 값을 원본 배열의 뒤에 추가하는 함수
4) pop() : 마지막 값을 꺼내서 원본 배열에서 제거하는 함수
5) 배열의 앞(.push(값))/마지막(.push(값))에 추가, 처음(.shift())과 마지막(.pop()) 값을 제거
6) 배열의 수정
7) 배열의 복사
더보기
// 배열의 자바스크립트 내장함수를 소개
// ex) .toFixed(자리수) : 소수점 자르기 함수 등(js 내장 함수)
// TODO : 배열 내장함수
// TODO 1) 두 배열 합치기 함수
// 사용법 : 배열변수.concat(배열변수2);
let nums = [1,2,3] // 숫자 배열
let chars_1 = ["a", "b", "c", "d"]; // 문자 배열
// 두개 합치기
let numsChars = nums.concat(chars_1);
// 결과 출력
console.log("numsChars", numsChars)
// TODO 2) 배열 내에 구분자를 이용해서 붙이기 함수
// 사용법 : 배열변수.join(구분문자열)
let chars_2 = ["a", "b", "c", "d"]; // 문자 배열
let string_2 = chars_2.join("/");
// 결과 출력
console.log("string1", string_2);
// TODO 3) push() : 새로운 값을 원본 배열의 뒤에 추가하는 함수
// 사용법 : 배열변수.push(값. 값2, ... 값n);
let nums_3 = [1, 2, 3]; // 원본 배열
nums_3.push(4,5); // 1,2,3,4,5
// 결과 출력 : 원본 조작 함수
console.log("nums_3", nums_3);
// TODO 4) pop() : 마지막 값을 꺼내서 원본 배열에서 제거하는 함수
// 사용법 : 배열변수.pop(); 마지막 값만 없어짐
let chars_4 = ["a", "b", "c", "d"]; // 원본 배열
chars_4.pop(); // a,b,c
// 결과 출력 : 원본 조작 함수
console.log("chars_4", chars_4);
// TODO 5) 기타(참고) :
// .push(값) (배열의 마지막에 추가)
// .unshift(값) (배열의 앞에 추가)
// .pop() (배열의 마지막값을 제거)
// .shift() (배열의 처음값을 제거)
// TODO 6) 배열의 수정
let nums_6 = [1,2,3,4,5]; // 숫자 배열
// 배열의 1st 값 수정 : 0
nums_6[0] = 10; // 값 수정( 1 -> 10)
// 배열의 2nd 값 수정 : 1
nums_6[1] = 20; // 수정( 2 -> 20)
// 결과 출력
console.log("nums_6", nums_6);
// TODO 7) 배열의 복사
// 사용법: 배열변수.slice(복사할_시작인덱스번호, 복사할_끝인덱스번호);
// [복사할시작인덱스번호 ~ 복사할_끝인덱스번호-1 까지 복사됨]
let colors_7 = ["red", "green", "blue", "white", "black"];
let colors_7_2 = colors_7.slice(2,4) // (인덱스번호) 2 ~ 3 까지 복사됨
// 결과 확인
console.log("colors_7_2", colors_7_2);
자바스크립트 유용한 내장함수들
1) .toFixed() : 소수점 자르기 함수
2) 문자열 -> 숫자로 바꾸기 함수
3) 배열의 요소(원소) 모두 문자열로 변경하기
4) 배열의 길이 : 배열변수.length (반복문에 많이 사용)
5) 배열 정렬 함수 : 오름차순(가~하), 내림차순(하~가)
6) 문자열 자르기 함수
7) 문자열 바꾸기 함수
8) 대소문자 바꾸기 함수
9) 문자열 자르기 : split(구분자)
10) 수학함수(반올림, 절대값, 최소값, 최대값, 제곱, 제곱근)
11) 날짜 함수들
더보기
// 자바스크립트 유용한 내장함수들 소개
// TODO : 1) .toFixed() : 소수점 자르기 함수
// 사용법 : 변수명.toFixed(자리수)
let x_1 = 12.4763;
console.log(x_1.toFixed(2)); // 2째 자리수 자르기
// TODO : 2) 문자열 -> 숫자로 바꾸기 함수
let x_2 = "10.33"; // 숫자로 된 문자열
console.log(Number(x_2)); // 문자열 -> 숫자
console.log(parseInt(x_2)); // 문자열 -> 정수
console.log(parseFloat(x_2)); // 문자열 -> 실수
// 참고 : 이렇게 사용하지 말기
let x_2_1 = "apple";
console.log(Number(x_2_1)); // 에러 발생(숫자로 변경불가)
// NaN 에러발생 : (Not a Number)
// TODO : 3) 배열의 요소(원소) 모두 문자열로 변경하기
// 사용법 : 배열변수.toString()
let animals = ["사자", "호랑이", "사슴", "펭귄"];
// 문자열로 변경
let str = animals.toString();
console.log("str", str);
// TODO 참고 : ※ 자료형 확인 함수 : typeof(변수명
console.log(typeof str);
// TODO : 4) 배열의 길이 : 배열변수.length (반복문에 많이 사용)
let animals_4 = ["사자", "호랑이", "사슴", "펭귄"];
console.log("animals_4.length", animals_4.length);
// TODO : 5) 배열 정렬 함수 : 오름차순(가~하), 내림차순(하~가)
// 문자열 대상 정렬
let animals_5 = ["사자", "호랑이", "사슴", "펭귄"];
animals_5.sort(); // TODO 오름차순 정렬
console.log("animals_5", animals_5); // 결과 값: 사슴, 사자, 펭귄, 호랑이
animals_5.reverse(); // TODO 배열 뒤집기
console.log("animals_5", animals_5); // 결과 값: 호랑이, 펭귄, 사자, 사슴
// TODO : 6) 문자열 자르기 함수
// 사용법 : 문자열.substring(시작인덱스번호, 끝인덱스번호);
// (시작인덱스번호 ~ 끝인덱스번호-1 까지 잘림)
let str_6 = "태산이 무너져도 솟아날 구멍이 있다.";
// 4(무),5(너),6(져),7(도) 까지 보임
console.log("str_6.substring", str_6.substring(4, 8));
// TODO : 7) 문자열 바꾸기 함수
// 사용법 : 문자열.replace(/대상문자/g, "바꿀문자");
let str_7 = "A friend in need is a friend indeed.";
let str_7_1 = str_7.replace(/friend/g, "family");
console.log("str_7_1", str_7_1);
// TODO : 8) 대소문자 바꾸기 함수
// 사용법(대문자) : 문자열.toUpperCase();
// 사용법(소문자) : 문자열.toLowerCase();
let str_8 = "Have a Nice Day!";
let str_8_2 = str_8.toLocaleUpperCase(); // 대문자바꾸기
console.log("str_8_2", str_8_2);
let str_8_3 = str_8.toLowerCase(); // 소문자바꾸기
console.log("str_8_3", str_8_3);
// TODO : 9) 문자열 자르기 : split(구분자)
// 사용법 : 문자열.split(자를문자)
// 결과 : 배열로 내보내기 됨
let str_9 = "2025 3 25";
let arr_9 = str_9.split(" "); // 공백으로 자르기
console.log("arr_9[0]", arr_9[0]);
console.log("arr_9[1]", arr_9[1]);
console.log("arr_9[2]", arr_9[2]);
// TODO : 10) 수학함수
// 반올림(첫째자리)
// 사용법 : Math.reound(실수) -> 반올림된 정수
console.log("Math.round", Math.round(5.3)); // 결과 값: 5
console.log("Math.round", Math.round(5.7)); // 결과 값: 6
// 올림(첫째자리), ceil(천장)
// 사용법 : Math.celil(실수) -> 올림 정수
console.log("Math.ceil", Math.round(5.3)); // 결과 값: 5
// 올림(첫째자리), floor(바닥)
// 사용법 : Math.floor(실수) -> 내림 정수
console.log("Math.floor", Math.round(5.3)); // 결과 값: 5
// 절대값 : 음수 -> 양수
// 사용법 : 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));
// TODO : 11) 날짜 함수들
let date = new Date(); // 현재 날짜 (년, 월, 일, 시, 분, 초);
// 출력
let year = date.getFullYear(); // 년도
let month = date.getMonth() + 1; // 월 // TODO ※ 월 표기할 때 (0(1월) ~ 11월(12월)까지로 출력이 되기 때문에 +1 증가해야 함
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);
더보기
// 문제
// 연습문제 1)
// 현재 날짜를 아래와 같이 주어진다.
// 12시 이전이면 "오전입니다." 라고 출력하고,
// 12시 이후이면 "오후입니다." 라고 출력하는
// 프로그램을 코딩하세요.
let date = new Date(); // 현재 날짜 (년, 월, 일, 시, 분, 초);
let hours = date.getHours(); // 시
console.log("현재시간은 : " + hours + "시 입니다.");
console.log("===================================");
if (hours < 12) {
console.log("오전입니다.");
} else if (hours > 12) {
console.log("오후입니다.");
}
// 2)
// 현재 날짜를 이용해서 아래와 같이 코딩하세요
// 현재 시각이 5시 이전이면 "잠을 자렴..."
// 7시 이전이면 "준비"
// 9시 이전이면 "출근"
// 12시 이전이면 "빈둥빈둥"
// 14시 이전이면 "식사"
// 출력
if (hours < 5) {
console.log("잠을 자렴...");
} else if (hours < 7) {
console.log("준비");
} else if (hours < 9) {
console.log("출근");
} else if (hours < 12) {
console.log("빈둥빈둥");
} else if (hours < 14) {
console.log("식사");
}
// 3)
// 연도, 월, 일이 닷(.)으로 구분되어 입력된다.
// 대시를 구분기호로 사용해서 일-월-연도로 바꾸어서
// 코딩용어 : -(마이너스, 대시)
// 출력하세요
// 입력 : 2020.3.4
// 출력 : 4-3-2020
let intput_3 = prompt("2020.3.4 입력").split("."); // 잘리면 배열이 됨
intput_3[0] = 2020, intput_3[1] = 3, intput_3[2] = 4
console.log(intput_3[2] + "-" + intput_3[1] + "-" + intput_3[0]);
// 4) 2중 반복문(이중 루프, 반복문안에 반복문)
// 가로(10개) X 세로(5개) 형태
// 출력 : **********
// **********
// **********
// **********
// **********
let result_4 = "";
// 2중 반복문 : 세로 (밖에 for문 : 줄바꿈 5번 반복)
for (let a = 0; a < 5; a++) {
// 가로 (안에 for문 : * 10번 반복)
for (let b = 0; b < 10; b++) {
result_4 = result_4 + "*"; // * 10 번 문자열 붙이기(가로)
}
result_4 = result_4 + "\n"; // \n 5번 문자열 붙이기(세로)
}
console.log(result_4); // 결과 출력
'Visual Studio Code' 카테고리의 다른 글
| [DOM] chapter_01 (0) | 2023.08.21 |
|---|---|
| [JavaScript] chapter_02 (0) | 2023.08.21 |
| [HTML&CSS] chapter_04 (0) | 2023.08.09 |
| [HTML&CSS] chapter_03 (0) | 2023.08.09 |
| [HTML&CSS] chapter_02 (0) | 2023.08.07 |