반복문, 조건문, 배열, 변수

//파일명: variable.html

출력문

• 함수형식은 매개변수로 결과값을 가져오는 구조. 명령 끝이라는 걸 표현하기 위해 ;찍힘
• 다른 언어에서 ''는 문자, ""는 문자열. js는 구분 안한다.

1. 경고창 출력
   alert(1234);
   문자표현 => '문자', "문자", "'작은 따옴표 출력", '"쌍따옴표 출력"'
   alert('문자');

2. 브라우저 화면 출력
   => html body에 내용 삽입하여 출력
   => 태그 활용 가능
   document.write("<h1>브라우저 출력</h1>");

3. 콘솔에 출력하기
   console.log("콘솔 출력");

변수 => 저장 창고

• 저장을 해서 데이터를 활용

1. var
   => 변수 선언문, 재선언 가능
   var 변수명 = 123;
var 변수명 = 456;
2. let
   => 재정의는 가능하지만 동일 이름으로 재선언은 할 수 없음
   let 변수명 = '초기값';
let 변수명 = '동일 변수명으로 재선언 안됨';
변수명 = "선언문 없이 추가 데이터 삽입 => 재정의 ";
3. const (상수)
   => 선언 후 무조건 저장된 값만 사용
   => 재선언, 재정의 모두 안됨

연산자

1. 문자연결연산자
   문자 + 문자 => 문자를 연결하는 연산자
   '문자' + 변수 + '문자' + 변수
   `문자 ${변수} 문자`
   const a = '변수';
document.write("변수선언"+a+"미리 선언"+a);
document.write(변수는 사용전 ${a} 선언해야 합니다);
2. 오칙연산
   +, -, *, /, %(나머지)
3. 복합대입연산자
   a = a + 1
   a += 1
a -= 1
a *= 1
a /= 1
a %= 1
4. 증감연산자
   무조건 1씩 증가 또는 감소
   ++변수명, 변수명++ => 1씩 증가
--변수명, 변수명-- => 1씩 감소
5. 비교연산자
   참, 거짓 형태로 결과값 활용
   >, <, ==, !=
===, !== 자료형까지 확인
   조건문(if문) 사용시 활용
6. 논리연산자
   and (&&)
   or (||)
   not (!)

---

// 파일명: if.html

if문(조건문)

1. if(조건) {조건이 참일때 실행되는 실행문}

if(조건) {
	조건이 참일때 실행되는 실행문
} else {
    if문이 거짓일때 실행되는 실행문
}

if(조건1) {
	조건1 참일때 실행되는 실행문
} else if (조건2) {
  	조건2 참일때 실행되는 실행문
}...else if() {
    조건 추가
} else {
    앞에 있는 모든 조건이 거짓일때 실행
}

if(조건1){}
if(조건){
} else {
	else 문 바로 앞에 있는 if문이 거짓일때만
}

• 변수에 저장된 값이 짝수인지 홀수인지 확인하는 if문 만들기

let i = 5; 
if(i%2 === 0) {
	alert('i는 짝수');
} else {
	alert('i는 홀수');
}

중첩 if문

if문 안에 if 추가해서 활용

if(조건1) {
	조건1이 참일때 실행
	if(조건1-1) {
    	조건 1-1 참일때 실행
    } else if(조건 1-2) {
        조건 1-2 참일때 실행
    } else {
        조건 1-1, 1-2 모두 거짓일때 실행
    }
} else {
    조건1이 거짓일때 실행
}

---

// 파일명: for.html

for문(반복문)

반복 횟수가 정해져 있는 반복
for(시작값; 끝값; 증감값){}
시작값 => 변수=0;
끝값 => 조건식 형태로 반복의 끝을 표현
a=0으로 시작 a<=4 a++(1씩 변화)
0, 1, 2, 3, 4, 5번의 반복 출력

중첩 for문

for(bigfor){
	bigfor가 한번 반복할때
    for(smallfor){
		smallfor문은 전체 반복함
    }
}

• 구구단 출력하기

for(i=2; i<10; i++) {
	document.write(`${i}단<br>`)
	for(j=1; j<10; j++) {
    	document.write(`${i} * ${j} = ${i*j}<br>`);
  	}
  	document.write(`<br>`);
}

• ====*====*====*====*====*====*====*====*====*====* 출력

for(i=0; i<10; i++) {
  // document.write('====*');
  for(j=0; j<4; j++){
    document.write('=');
  }
  document.write('*');
}
document.write(`<br>`);

• 별 찍기

// 줄 bigfor
// 한줄 출력되는 칸 smallfor
for(a=1; a<=10; a++) {
  	for(b=1; b<=a; b++) {
    	document.write('*');
  	}
  	document.write(`<br>`);
}

• 입력받은 수가 짝수이면 입력받은 수 짝수항, 입력 받은 수가 홀수이면 입력받은 수 홀수항

let n =4;
if(n%2 === 0) {
  	for(i=2; i<10; i+=2) {
    	document.write(`${n}*${i}=${n*i}<br>`);
  	}
} else {
  	for(i=1; i<10; i+=2) {
    	document.write(`${n}*${i}=${n*i}<br>`);
  	}
}
document.write(`<br>`);

입력문

1. prompt('메세지','기본값');
   => 문자열 입력문
   => 입력 받은 값이 문자형
   => 숫자 입력도 문자로 인식
   => Number(); 숫자형으로 변경하는 형변환명령

let k = Number(prompt('숫자를 입력해주세요', '1,2,3'));
document.write(`${k+k}`);

2. confirm('메세지');
   => 참, 거짓의 형태로 입력값 확인
   => 입력받음 => 저장 => 출력

• 입력 받은 값의 구구단의 출력

let k = Number(prompt('숫자를 입력하세요', ''));
	for(i=1; i<10; i++) {
  		document.write(`${k}*${i}=${k*i}<br>`)
    }
}
document.write(`<br>`);

• 잠이 오면 네, 잠이 안오면 아니오

if(confirm('잠이 오죠?')){
    document.write('네');
} else {
    document.write('아니요');
}
document.write(`<br>`);

• 태어난 년도 입력하면 띠 알려주기

let birthYear = Number(prompt('태어난 년도를 입력하세요', ''));
if(birthYear%12 === 0) {
  	document.write('당신은 원숭이띠 입니다.');
} else if (birthYear%12 === 1) {
  	document.write('당신은 닭띠 입니다.');
} else if (birthYear%12 === 2) {
  	document.write('당신은 개띠 입니다.');
} else if (birthYear%12 === 3) {
  	document.write('당신은 돼지띠 입니다.');
} else if (birthYear%12 === 4) {
  	document.write('당신은 쥐띠 입니다.');
} else if (birthYear%12 === 5) {
  	document.write('당신은 소띠 입니다.');
} else if (birthYear%12 === 6) {
  	document.write('당신은 호랑이띠 입니다.');
} else if (birthYear%12 === 7) {
  	document.write('당신은 토끼띠 입니다.');
} else if (birthYear%12 === 8) {
  	document.write('당신은 용띠 입니다.');
} else if (birthYear%12 === 9) {
  	document.write('당신은 뱀띠 입니다.');
} else if (birthYear%12 === 10) {
  	document.write('당신은 말띠 입니다.');
} else if (birthYear%12 === 11) {
  	document.write('당신은 양띠 입니다.');
}
document.write(`<br>`);

• 거꾸로 별찍기

for(i=10; i>0; i--){
  	for(j=1; j<=i; j++) {
    	document.write(`*`);
  	}
  	document.write(`<br>`);
}
document.write(`<br>`);

---

// 파일명: array.html
1. 변수 => 데이터를 저장 반복 활용
2. for문 => 구간이 정해진 반복 실행 활용
3. 배열 => 한 데이터를 저장 사용하는 변수를 크게 여러 데이터를 저장하기 위해서 사용 활용

let f=[0, 1, 2, 3, 4, 5, 6, 7];
document.write(f+'<br>');
document.write(f[4]+'<br>');
// => 배열의 방번호 index는 0부터 시작

let 과일=['사과','수박','바나나','딸기','포도'];
document.write(과일+'<br>');
// 배열 출력
for(i=0; i<과일.length; i++) {
  	document.write(과일[i]+'<br>');
}
// 거꾸로 출력
for(i=(과일.length)-1; i>=0; i--) {
  	document.write(과일[i]+'<br>');
}

for in 반복문

=> 배열의 순차값 활용 반복문
for(배열의 순차값 변수 in 배열명) { 실행식 }

for(i in 과일) {
  	document.write(i+'<br>');
}

• 빨강장미를 모두 하얀 장미로 바꾸기

let roses = ['빨간장미','빨간장미','빨간장미','빨간장미','빨간장미'];
for(i in roses) {
	  roses[i] = '하얀장미';
  	document.write(roses[i]+'<br>');
}

• 다음 입장한 사람들의 나이 배열이다.입장한 모든 사람의 입장료를 계산하여 오늘 총 매출을 구하기

1. 20세 이상 8000
2. 10세 이상 20세 미만 5000
   그외 2500

let ages=[22,21,17,32,4,28,19,8];
// let first = [];
// let second = [];
// let third = [];
// let firstMoney = 0;
// let secondMoney = 0;
// let thirdMoney = 0;
let total = 0;
for(i in ages) {
	if(ages[i]>=20){
    // first.push(ages[i]);
    // firstMoney = Number(first.length*8000);
    total += 8000;
	} else if(ages[i]>=10 && ages[i]<20) {
    // second.push(ages[i]);
    // secondMoney = Number(second.length*5000);
    total +=5000;
	} else {
    // third.push(ages[i]);
    // thirdMoney = Number(third.length*2500);
    total += 2500;
  	}
}
// document.write(firstMoney+secondMoney+thirdMoney);
document.write(total);
// 원소의 갯수를 세야한다고 생각해서 빈 배열을 만들고 빈 배열에 원소를 집어 넣어서 배열의 길이로 각 나이별 인원수를 파악했는데 그냥 매출값을 나이별로 나눠서 그때그때 더해준다 생각하면 더 간단!