자바스크립트 - 04

월요일좋아·2022년 10월 25일
js
0

JavaScript

목록 보기
4/6

study03.project

while 문 사용하기

while문 예제 1

지정한 숫자 a부터 b까지 출력하기

let count = 1;

while (count < 11) {
    console.log(count);
    count++;
}

while 예제 2

구구단 출력하기

let dan = 5;
count = 1;
while (count < 10) {
    console.log(`${dan} * ${count} = ${dan * count}`);

    count++;
}

while 예제 3

구구단 전체 출력하기

//  구구단 전체 출력을 while문을 사용하여 출력하세요.
let i = 2;
while (i < 10) {
    console.log(`----- ${i}단 -----`);
    let j = 1;
    while (j < 10) {
        console.log(`${i} * ${j} = ${i * j}`);
        j++;
    }i++;
}

for문 사용하기

for문 예제 1

1부터 5까지 더하기

//  예제 : 1부터 5까지 더하라
let sum = 0;

for(let i = 1; i < 6; i++) {
    sum = i + sum;
    console.log(sum);
}

for문 예제 2

배열의 값을 출력하기

//  예제 : 배열의 값을 출력하라.
const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

for (let i = 0; i < arr1.length; i++) {
    console.log(arr1[i]);
}

for문 예제 3

열 arr1를 이용하여 1 ~ 10 까지의 총합을 구하는 프로그램을 for 문을 사용하여 작성하기

//  문제 : 배열 arr1를 이용하여 1 ~ 10 까지의 총합을 구하는 프로그램을 
//         for 문을 사용하여 작성하세요.
sum = 0;
for (let i = 0; i < arr1.length; i++) {
    sum = sum + arr1[i];
    console.log(sum);
}

break, continue 예제

break

break 가장 가까운 반복문만 종료되는 것임.

// break
for (let i = 0; i < 10; i++) {
    if (i == 5) {
        break;
    }
    else {
        console.log(`현재 i의 값 : ${i}`);
    }
}
// break 가장 가까운 반복문만 종료되는 것임.
for (let i = 2; i < 10; i++) {
    for (let j = 1; j < 10; j++) {
        if (j == 5) {
            break;
        }
        console.log(`${i} * ${j} = ${i * j}`);
    }
}

continue

for (let i = 0; i < 10; i++) {
    if (i == 5) {
        continue;
    }
    else {
        console.log("현재 i의 값 : " + i);
    }
}

3의 배수의 개수 찾기

document.write("<h1>3의 배수 찾기</h1>")

let num = prompt("몇까지 3의 배수를 찾을까요?");
num = Number(num);
count1 = 0;

for(let i = 1; i <= num; i++) {
	if (i % 3 == 0) {
		document.write(`${i}, `)
		count1++;
	}
}
document.write(`<p>${num}까지 3의 배수의 개수 : ${count1}</p>`);

커피 자판기 프로그램 만들기

커피 자판 프로그램을 작성하세요
1. 사용자가 가지고 있는 금액을 입력 받기
2. 커피 1잔의 금액은 300원
3. 자판기에 들어있는 커피의 양은 10개
4. 커피를 판매할 때마다 1개의 커피가 소비됨
5. 소지 금액이 부족 시 '돈이 부족합니다' 를 출력
6. 커피가 부족할 경우 '커피가 다 팔렸습니다' 를 출력
7. 커피 판매 시 '커피를 한잔 판매 합니다.' 와 커피 재고량을 출력

  • ex) 커피를 한잔 판매합니다.
    남은 커피 00 잔
document.write("<h1>커피 자판 프로그램</h1>")
let all = 10;
let coffee = 300;
let money = prompt("지금 얼마를 가지고 있습니까?");
while (true) {
    all--;
  
    if(money < 300) {
        document.write("<p>돈이 부족합니다</p>");
        break;
    } else if (all == 0) {
        document.write("<p>커피가 다 팔렸습니다.</p>");
        break;
    } else if (money >= coffee) {
        money = money - coffee;
        document.write("<p>커피를 한잔 판매합니다.</p>");
        document.write(`<p>남은 커피 : ${all}잔 입니다.</p>`);
    }
}
  • for문의 무한반복
    for ( ; true ; ) { ... }

은행 프로그램 작성하기

은행 프로그램을 작성하세요

  1. 프로그램 시작 시 안내 메시지와 메뉴가 출력

    • ex) 안녕하세요 java505 은행입니다.
    • ex) 1: 입금, 2: 예금 확인, 3: 출금, 0: 종료

  2. 메뉴를 선택하면 해당 기능을 실행

  3. 메뉴는 기능을 실행 후 계속 출력

  4. 0 실행 시 '프로그램을 종료합니다.' 출력 후 프로그램 종료

  5. 1 실행 시 사용자 입력을 통해 금액을 입력 받고 기존 금액에 추가

  6. 2 실행 시 기존에 저장된 금액을 출력

  7. 3 실행 시 사용자 입력을 통해 금액을 입력 받고 기존 금액에서 차감

  8. 기존 금액보다 큰 금액을 출금 시 기존 금액을 0으로 만들고 모든 금액을 출금

alert("안녕하세요. java505 은행입니다.");

let sum = 0;
while (true) {
    let session1 = prompt("1 : 입금, 2 : 예금 확인, 3 : 출금, 0 : 종료");

    if ( session1 == 1) {
        let money = prompt(`얼마를 입금하시겠습니까?`);
        if (isNaN(money)) {
            console.log("잘못된 입력입니다. 메뉴로 돌아갑니다.")
        }
        sum = sum + Number(money);
        console.log(`${money}원을 입금하셨네요. 남은 금액은 ${sum}원 입니다.`)
    } else if (session1 == 2) {
        console.log(`현재 잔액은 ${sum}원 입니다.`);
    } else if (session1 == 3) {
        let minus = prompt("얼마를 출금하시겠습니까? ")
        if(minus > sum) {
            console.log(`잔액보다 큰 금액을 입력하셨습니다. 현재 잔액은 ${sum}이며, 모두 출금하겠습니다.`);
            sum = 0;
        }else {
            sum = sum - minus;
            console.log(`출금 금액은 ${minus}이며, 현재 잔액은 ${sum}원 입니다.`);
        }
    } else if (session1 == 0) {
        console.log(`프로그램을 종료합니다.`);
        break;
    }
}

함수 알아보기

  • 함수란
    • 자바의 메서드와 비슷
    • 특정 결과를 얻기 위해서 필요한 소스코드들을 하나의 이름으로 묶어놓는것
  • 함수의 선언 및 호출
    • function 함수명 (매개변수) { 소스코드 return} : 접근제한자/반환타입 없음

함수 사용하기

  • 함수의 4가지 형태
    1. 매개변수 X, 반환값 X
    2. 매개변수 O, 반환값 X
    3. 매개변수 X, 반환값 O
    4. 매개변수 O, 반환값 O
ㅡㅡㅡㅡ 1. 매개변수 X, 반환값 X ㅡㅡㅡㅡ
function add() {
    const a = 10;
    const b = 20;
    const c = a + b;
    console.log(`두 수의 덧셈은 ${c}`)
}

ㅡㅡㅡㅡ 2. 매개변수 O, 반환값 X ㅡㅡㅡㅡ
function add2(a, b) {
    const c = a + b;
    console.log(`두 수의 덧셈은 ${c}`)
}

ㅡㅡㅡㅡ 3. 매개변수 X, 반환값 O ㅡㅡㅡㅡ
function add3() {
    const a = 10;
    const b = 20;
    const c = a + b;
    return c;
}

ㅡㅡㅡㅡ 4. 매개변수 O, 반환값 O ㅡㅡㅡㅡ
function add4(a, b) {
    const c = a + b;
    return c;
}

익명함수

  • 프로그램 실행 시 단 한번만 실행해야되는 부분을 실행하기 위해서 사용함 = 즉시 실행 함수(일회용 함수)
  • 이름이 없어서 호출(실행) 불가한 함수
  • 선언과 동시에 실행, 호출 불가
  • 함수 자체가 식이므로 함수를 변수에 할당할 수도 있고 다른 함수의 매개변수로 사용할 수도 있음
  • 선언 : (function () { } () );
//  즉시 실행 함수
	(function () {
    const a = 10;
    const b = 20;
    const c = a + b;
    console.log(c);
	}());
  • 변수에 익명 함수를 대입하여 변수명으로 익명 함수를 호출할 수 있음.
const noname = function () {
    const a = 10;
    const b = 20;
    console.log(`두 수의 합은 ${a + b}`);
};

noname();
  • 익명함수 활용 : 매개변수로 함수를 사용
var btn = document.getElementById("aaa");
btn.addEventListener("click", function () {
    alert("aaaaa");
});

3의 배수의 개수 찾기 함수화

  • 3의 배수의 개수 찾기 프로그램의 코드를 함수를 사용하는 방식으로 수정하세요.
  1. 사용자 입력 부분을 함수로 생성, quiz6Input()
  2. 3의 배수를 계산하는 부분을 (for문) 함수로 생성, quiz6Cal()
document.write("<h1>3의 배수 찾기</h1>")

let num = prompt("몇까지 3의 배수를 찾을까요?");
count1 = 0;

for(let i = 1; i <= num; i++) {
    if (i % 3 == 0) {
        document.write(`${i}, `)
        count1++;
    }
}
document.write(`<p>${num}까지 3의 배수의 개수 : ${count1}</p>`);
  • 함수 생성
function quiz6Input() {
	let num = prompt("몇까지 3의 배수를 찾을까요?");
	return num;
}

function quiz6Cal(num) {
let count1 = 0;

	for(let i = 1; i <= num; i++) {
		if (i % 3 == 0) {
		document.write(`${i}, `)
		count1++;
		}
	}
document.write(`<p>${num}까지 3의 배수의 개수 : ${count1}</p>`);
}

quiz6Cal(quiz6Input());

커피 자판기 프로그램의 함수화

커피 자판기 프로그램의 소스코드를 함수를 사용하는 방식으로 수정하세요.
1. money, coffee, price 에 초기값을 설정하는 함수 생성, quiz7Setup()
2. 커피 판매 부분을 함수로 생성, quiz7Sale()

지역변수 / 전역변수

  • 전역 변수 : 프로그램 전체에서 접근이 가능한 변수

  • 지역 변수 : 코드 블럭 내에서 선언되고 사용되고 삭제되는 변수

  • 전역 변수를 함수 안에서 사용하는 것은 문제가 없음

let gValue = 100;
console.log(`전역변수 ${gValue}`);


function func1() {
    console.log(`함수 func1에서 사용한 gValue : ${gValue}`);
}
func1();
  • 지역 변수는 함수(코드블럭) 안에서 선언하고 사용하는 것은 문제가 없음
function func2() {
    let lValue = 10;
    console.log(`함수 func2에서 사용한 lValue : ${lValue}`);
}
func2();
  • 지역 변수를 함수(코드블럭) 밖에서 호출하는 것은 불가능함
    지역 변수는 해당 함수(코드블럭)의 실행이 종료되면 메모리에서 삭제됨
console.log(`함수 밖에서 사용한 lValue : ${lValue}`); <- /오/류/발/생/
  • 함수 안에서 지역 변수 선언 시, 전역 변수와 동일한 이름을 사용하면 지역 변수가 우선 순위를 가짐
    전역변수처럼 보이지만 사실은 코드블럭이 끝나면 메모리에서 삭제되는 지역변수 gValue가 선언된것임. (동명이인)
function func3() {
    let lValue = 10;
    let gValue = 20; // 지역변수 gValue
    console.log(`함수 func3에서 사용한 lValue : ${lValue}`);
  
- 전역 변수와 같은 이름의 지역 변수를 선언했기 때문에 전역 변수보다 우선 순위가 높은 지역 변수를 호출하여 사용함 -
    console.log(`함수 func3에서 사용한 gValue : ${gValue}`);
}
func3();
  • 결과값 = 100, func3에서 20으로 바꾼게 적용이 안되어있음
    why? 특정 함수 안에서 전역 변수와 같은 이름의 지역변수를 선언했더라도
    해당 함수 밖에서는 지역변수를 사용할 수 없으므로 전역 변수가 사용됨
console.log(`함수 밖에서 사용한 gValue : ${gValue}`);
profile
월요일좋아
이전 포스트

자바스크립트 - 03

다음 포스트

자바스크립트 - 05

0개의 댓글