5주차_예제 코드 모음

210201

document.write("Hello World!", "<br>"); // Hello World!
// " " (쌍따옴표) : 문자열
// write : write 함수
// document : document 객체
// -> JavaScript : 객체지향 프로그래밍 언어
// "document에 문자를 출력해라"

document.write("Hello Jquery!", "<br><hr>"); // Hello Jquery!
// jquery : JavaScript로 만든 라이브러리(기능 모음집)


var num1=10;
var num2=20;
// var(variable) : 변수
// =(대입 연산자) : 오른쪽의 값을 왼쪽의 공간에 넣는다 (같다는 뜻 아님)
// ;(세미 콜론) : 종결 문자
// "num1 변수를 만들고 10을 넣어라"
document.write(num1, "<br>"); // 10
// "document에 num1 변수를 출력해라"
document.write(num2, "<br><hr>"); // 20
// "dovument에 num2 변수를 출력해라"

document.write("산술 연산자 + - * /<br>");
document.write(num1+num2, "<br>"); // 30
document.write(num1-num2, "<br>"); // -10
document.write(num1*num2, "<br>"); // 200
document.write(num1/num2, "<br><hr>"); // 0.5
// 산술 연산자 + - * /

document.write("나머지 연산자 %<br>");
var num3=9;
var num4=4;
var num5=4;
document.write(num3%num4, "<br><hr>"); // 1
// 나머지 연산자 % : 나누고 남은 나머지 값 출력
// 활용도가 꽤 높음 (짝수/홀수 판별)

document.write("관계 연산자<br>");
// 관계 연산자 >= > <= < == !=
// 참이면 true(1), 거짓이면 false(0)
var result=0;
result=(num3>=num4); // result=true
document.write(result, "<br>"); // true
// num3이 num4 이상인가? : true

var result1=0;
result1=(num3<=num4); // result1=false
document.write(result1, "<br>"); // false
// num3이 num4 이하인가? : false

var result2=0;
result2=(num4==num5); // result2=true
document.write(result2, "<br>"); // true
// num4와 num5가 같은가? : true

var result3=0;
result3=(num4!=num5); // result3=false
document.write(result3, "<br><hr>"); // false
// num4와 num5가 다른가? : false

document.write("논리 연산자<br>");
//논리 연산자 : 논리값인 true, false로 연산하는 연산자
//참이면 true(1), 거짓이면 false(0)

document.write(false && false, "<br>"); // 0*0 = false
document.write(false && true, "<br>"); // 0*1 = false
document.write(true && false, "<br>"); // 1*0 = false
document.write(true && true, "<br><hr>"); // 1*1 = true
// && : AND, 논리 곱, 결합

document.write(false || false, "<br>"); // 0+0 = false
document.write(false || true, "<br>"); // 1+0 = true
document.write(true || false, "<br>"); // 0+1 = true
document.write(true || true, "<br><hr>"); // 1+1 = true
// || : OR, 논리 합, 선택

document.write(!false, "<br>"); // true
document.write(!true, "<br><hr>"); // false
// ! : NOT, 논리 반전, 부정

var num6=9;
var num7=5;
var num8=3;
var result4=0;
result4 = (num6>=num7)&&(num7>=num8); // result4 = true && true
document.write(result4, "<br>") // true

var result5=0;
result5 = (num6>=num7)&&(num7==num8); // result5 = true && false
document.write(result5, "<br>") // false

var result6=0;
result6 = !(num6); // result6 = !true
document.write(result6, "<br><hr>") // false


document.write("증감 연산자<br>");
// ++, -- : 증감 연산자
// 숫자를 1 증가/감소 시키는 연산자이며 접두/접미에 따라 선행/후행으로 나뉨
var num9=10;
document.write(num9, "<br>"); //10
document.write(num9++, "<br>"); //10
document.write(num9, "<br><br>"); //11
// 후행 연산 : 연산을 먼저 하고 증가는 나중에 진행

var num10=10;
document.write(num10, "<br>"); //10
document.write(++num10, "<br>"); //11
document.write(num10, "<br><hr>"); //11
// 선행 연산 : 연산과 함께 증가도 진행

---

 

210202

document.write("비트 연산자 & | ^ ~ << >> <br>");
//비트 연산자 : 비트끼리 연산하는 연산자
// AND(&) / OR(|) / XOT(^) / 반전(~) / 이동(<< >>)
// 정수는 4byte (32bit)
var num1=5;
// 00000000 00000000 00000000 00000101 : 5
var num2=3;
// 00000000 00000000 00000000 00000011 : 3

var result=(num1&num2);
document.write("result ", result, "<br>"); // 1
// "num1과 num2를 AND 한다"
//   00000000 00000000 00000000 00000101 : 5
//   00000000 00000000 00000000 00000011 : 3
// = 00000000 00000000 00000000 00000001 : 1

var result1=(num1|num2);
document.write("result1 ", result1, "<br>"); // 7
// "num1과 num2를 OR 한다"
//   00000000 00000000 00000000 00000101 : 5
//   00000000 00000000 00000000 00000011 : 3
// = 00000000 00000000 00000000 00000111 : 7

var result2=(num1^num2);
document.write("result2 ", result2, "<br>"); // 6
// XOR : exclusive OR
// 1^1 : 0
// 0^1 : 1
// 1^0 : 1
// 0^0 : 0
// "num1과 num2를 XOR 한다"
//   00000000 00000000 00000000 00000101 : 5
//   00000000 00000000 00000000 00000011 : 3
// = 00000000 00000000 00000000 00000110 : 6

var result3=(~num1);
document.write("result3 ", result3, "<br>"); // -6
// ~(반전) : bit 내용을 반전한다
//   00000000 00000000 00000000 00000101 : 5
//   11111111 11111111 11111111 11111010 : ~5 = -6
//   정수 제일 왼쪽 비트 : MSB(Most Significant Bit)
//   정수의 부호를 결정하며 0이면 양수, 1이면 음수
//   단, 음의 정수를 표현 하는 방법이 단순히 MSB의 구분으로 되는 것이 아님
//   ex) num= 5 / ~num= -6(5의 보수) / ~num+1= -5

비트 연산자

document.write("prompt <br>");
var num1=prompt("숫자1 입력") // "10"
var num2=prompt("숫자2 입력") // "20"
// prompt 실행 시 값을 입력하는 명령창 팝업
// 명령창에 넣은 값이 num이 됨
document.write("숫자1 : ", num1, " / 숫자2 : ", num2, "<br>") // 10 20
document.write("숫자1+숫자2 : ", num1+num2, "<br>") // 1020
// 단, prompt로 받은 값은 문자열로 취급하기 때문에 Number 함수 필요

num1=Number(num1)
num2=Number(num2)
// Number 함수 : 문자열을 숫자로 변환시켜준다
document.write("숫자1+숫자2(Number) : ", num1+num2)

prompt, Number

var age=prompt("나이 입력");
age=Number(age);

if(age>=20) // age가 20 이상이라면?
{
    document.write("성인입니다.<br>");
}
else // age가 19 이하라면?
{
    document.write("미성년자입니다.<br>");
}

if~else

var score=prompt("점수 입력");
score=Number(score);

//if~else if~else : if~else를 여러개 연결 가능
if(100>=score && score>=90)
{
    document.write("A등급 입니다.<br>");
}
else if(89>=score && score>=80)
{
    document.write("B등급 입니다.<br>");
}
else if(79>=score && score>=70)
{
    document.write("C등급 입니다.<br>");
}
else if(69>=score && score>=60)
{
    document.write("D등급 입니다.<br>");
}
else
{
    document.write("F등급 입니다.<br>");
}

if~else if~else

var choice=confirm("계속 하시겠습니까?")
    
// 확인 : true, 취소 : false

if(choice)
{
    document.write("확인 버튼을 누르셨습니다. <br>")
}
else
{
    document.write("취소 버튼을 누르셨습니다. <br>")
}

confirm

---

 

210203

//while 반복문
//~하는 동안
// 반복문의 필요요소
// 1.초기식, 2.조건식, 3.증감식

var num = 1; //초기식
var dan = prompt("몇 단?");
dan = Number(dan);

while (num <= 9) {
  // 조건식
  document.write(dan + "x" + num + "=" + dan * num, "<br>");
  num++; // 증가식
}
//source에서 행 선택 후 새로고침 시 f10을 누를때마다
// watch 란에 반복문에서도 값을 계산하는 과정 확인 가능

document.write("<br><br>");

//for 반복문
var dan = 7; 
for (
  var i = 1; // 초기식
  i <= 9; // 조건식
  i++ //증가식
) {
  document.write(dan + "x" + i + "=" + dan * i, "<br>");
}
//for문은 횟수가 정해진 반복에 좋음
//while은 언제 끝날지 정해지지 않고 사용자 입력으로 종료되는 반복에 좋음

while, for 반복문

- 초기식과 조건식으로 반복문의 false 조건을 충족해야 함

→ false가 될 때 까지 무한히 반복되기 때문에 제대로 된 식을 넣지 않으면 오류 발생

---

 

210204

// 중첩 반복문
var dan = 2;
var i = 1;

while (dan <= 9) {
  // 외부 while 문
  i = 1;
  while (i <= 9) {
    // 내부 while 문
    document.write(dan + "x" + i + "=" + dan * i, "<br>");
    i++;
  }
  document.write("<br>");
  dan++;
}

document.write("<hr>");

// - 외부 for 문
for (
  var dan = 2; // 1. 초기식
  dan <= 9; // 2. 조건식
  dan++ // 4. 증가식
) {
  // 3. 내부 실행식

  // - 내부 for 문
  for (
    var i = 1; // 1. 초기식
    i <= 9; // 2. 조건식
    i++// 4. 증가식
  ) {
    // 3. 내부 실행식
    document.write(dan + "x" + i + "=" + dan * i, "<br>");
  }

  document.write("<br>");
}

while, for 중첩 반복문

// break : 반복문 탈출
for (
  var i = 1; // 1. 초기식
  i <= 10; // 2. 조건식
  i++ // 4. 증가식
) {
  // 3. 내부 실행식
  document.write(i + "<br>");

  if (i == 5) {
    break; // if 조건 충족 시 반복 중단하고 연산 종료됨
  }
}
document.write("<hr>");

// continue : 반복문 스킵
for (
  var i = 1; // 1. 초기식
  i <= 10; // 2. 조건식
  i++ // 4. 증가식
) {
  // 3. 내부 실행식
  if (i % 2 == 0) {
    continue; // if 조건 충족 시 내부 실행식을 더 진행하지 않고 스킵 한 뒤 계속 반복됨
  }
  document.write(i + "<br>");
}

break, continue

// switch~case : if~else와 같은 조건문이나 조건이 많을 경우 명료하게 작성 가능
var choice = prompt("1. 신발 / 2. 옷 / 3. 가방 / 4. 상품권");
choice = Number(choice);
switch (choice) {
  case 1:
    document.write("신발");
    break;

  case 2:
    document.write("옷");
    break;

  case 3:
    document.write("가방");
    break;

  case 4:
    document.write("상품권");
    break;

  default:
    document.write("잘못 된 값을 입력하셨습니다.");
    break;
}
// switch 오른쪽 - case 오른쪽을 매칭하여 출력한다.

switch~case

var index = 1;
for (var i = 1; i <= 12; i++) {
  // 반복할 횟수 설정 (초기식, 조건식, 증가식)
  document.write(index + "번째 이미지 Show!", "<br>");
  if (index == 3) {
    // 3번째 이미지 출력 후 index 값 초기화
    index = 1;
  } else {
    // 그 외의 경우 index 증가
    index++;
  }
}

슬라이드 이미지 구현용 예제

---

 

210205

var num1 = "9.5";
var num2 = "3.4";

var result = num1 + num2;

console.log("1. " + result);

num1 = parseInt(num1);
num2 = parseInt(num2);
// parseInt : 값을 넣으면 정수로 변환
result = num1 + num2;
console.log("2. " + result);

var num3 = "9.5";
var num4 = "3.4";
result = num3 + num4;
console.log("3. " + result);

num3 = parseInt(num3);
num4 = parseInt(num4);
result = num3 + num4;
console.log("4. " + result);
// parseFloat : 값을 실수로 변환

parseInt, parseFloat

// Math.ceil : 올림 함수(Math 객체 내부의 ceil)
var num1 = Math.ceil(0.1);
var num2 = Math.ceil(0.2);
var num3 = Math.ceil(0.3);
var num4 = Math.ceil(1.1);
document.write(num1, "<br>");
document.write(num2, "<br>");
document.write(num3, "<br>");
document.write(num4, "<br><br>");

for (i = 1; i <= 6; i++) {
  rand = Math.ceil(
    Math.random() * 3
    //랜덤 값(난수) 생성
    // 0~1 사이의 값 도출(단, 0과 1은 포함되지 않음)
  );
  document.write(rand, "<br>");
}
document.write("<br>");

Math.ceil, Math.random

var rand=0;
var user_choice=0;
user_choice=prompt("가위 / 바위 / 보 중 하나를 입력");
alert(user_choice+"를 선택하셨습니다.");

if(user_choice=="가위"){
  user_choice=1;
} else if (user_choice=="바위") {
  user_choice=2;
} else if (user_choice=="보") {
  user_choice=3;
};

var com_choice=Math.ceil(Math.random()*3);

if(com_choice==1){
  alert("컴퓨터는 가위를 선택했습니다.");
} else if (com_choice==2) {
  alert("컴퓨터는 바위를 선택했습니다.");
} else if (com_choice==3) {
  alert("컴퓨터는 보를 선택했습니다.");
};

if(user_choice==com_choice){
  alert("비겼습니다!");
};

if (user_choice==1) { // 사용자 가위
  if (com_choice==2) { // 컴퓨터 바위
    alert("졌습니다.");
  } else if(com_choice==3){ // 컴퓨터 보
    alert("이겼습니다!");
  }
} else if (user_choice==2){ //사용자 바위
  if (com_choice==1) { // 컴퓨터 가위
    alert("이겼습니다!");
  } else if(com_choice==3){ // 컴퓨터 보
    alert("졌습니다.");
  }
} else if (user_choice==3){ //사용자 보
  if (com_choice==1) { // 컴퓨터 가위
    alert("졌습니다.");
  } else if(com_choice==2){ // 컴퓨터 바위
    alert("이겼습니다!");
  }
}

Math.ceil, Math.random 활용한 가위바위보 게임 만들기

//함수의 정의 (definition) : 함수를 만드는 것
function hello() {
  document.write("Hello World!<br>");
}
//function name(){} : 함수 정의

hello();
// name(); : 함수 호출

//매개변수
function add(n1, n2) {
  document.write(n1 + n2);
}

add(3, 4);
//함수 호출 시 매개로 잡힌 n1과 n2를 대입해서 호출한다

함수 function

var name = 0;
var age = 0;
var height = 0;

function introduce(n, a, h) {
  //함수 정의
  document.write("이름:" + n, "<br>");
  document.write("나이:" + a, "<br>");
  document.write("키:" + h, "<br>");
}

name = prompt("이름 입력");
age = prompt("나이 입력");
height = prompt("키 입력");
introduce(name, age, height); // 함수 호출

매개변수