⛏️/JavaScript
[JavaScript] 2. 출력문과 변수, 연산자
defyuil
2023. 7. 24. 11:16
<script>
// 출력문
// 1. alert();
// alert(' 안녕하세요! ');
// 2. document.write();
// document.write(' 안녕하세요 아이티윌 입니다. ');
// 3. console.log();
// console.log('안녕하세요!');
// 출력문을 사용하여 페이지에 이름 출력
document.write("이름 : 아이티윌<br>");
// alt shift + 방향키아래
// alt + 방향키 위,아래
document.write("<h1>이름 : 아이티윌</h1>");
// 숫자 +(연산자) 숫자 => 숫자
document.write(100 + 200);
// 문자 +(연결자) 문자 => 문자(연결)
document.write("100" + "200");
document.write("<br>");
// 문자 + 숫자 => 문자
// => 문자 + A => 문자
document.write("100" + 200);
document.write("<br>");
document.write("100"+(200+300));
<h2> 변수(Variables):데이터를 저장하는 공간(메모리) </h2>
<h3> 변수 사용 방법 <br>
1) 변수 선언 : var 변수명/ let 변수명/ const 변수명 <br>
2) 변수 초기화 <br>
3) 변수 사용
</h3>
<script>
// 변수 선언
var itwill;
// 변수 초기화
itwill = 1000;
// 변수 사용
document.write('변수 :'+itwill);
// 변수 선언
// [var] 변수명;
// =>데이터타입 : 문자형(String),숫자형(Number),
// 논리형(Boolean),Null
// 변수명 : 한글사용X,영문자,숫자 조합,(특수문자_ $)
// 가능하면 의미있는 단어,
// 카멜표기법 : 두개 이상의 단어를 결합하여 작성
// 두번째 단어의 첫글자를 대문자로 표시
// applebox => appleBox
document.write("<hr>");
// 문자데이터 타입 : "",'' 사용하여 정보 저장
// 본인 이름을 저장하는 변수 생성
// var myName = "아이티윌";
var myName = '<h1>아이티윌</h1>';
document.write(myName);
document.write("<hr>");
document.write("아이티윌");
document.write("<hr>");
// 숫자데이터 : 숫자정보 저장(실수,정수)
var tmpValue = 100;
document.write(tmpValue + 100);
document.write("<hr>");
document.write(typeof tmpValue);
document.write("<hr>");
var tmpValue2 = "100";
document.write(tmpValue2 + 100);
document.write("<hr>");
document.write(typeof tmpValue2);
// 논리데이터 : true(참) / false(거짓)를 표시하는 데이터
// null / undefined
// => 변수값이 없음
var a; // undefined (초기화X)
var b = null; // null (초기화O)
</script>
연산자
1. 산술 연산자 (+ - * / %)
var num1 = 10;
var num2 = 2;
// 산술연산의 결과를 출력
document.write("+ : "+(num1 + num2)+"<br>");
document.write("- : "+(num1 - num2)+"<br>");
document.write("* : "+(num1 * num2)+"<br>");
document.write("/ : "+(num1 / num2)+"<br>");
document.write("% : "+(num1 % num2)+"<br>");
// Q. 과일(50개)을 상자에 담으려고한다.
// 이때 상자의 크기는 한번에 5개씩 저장가능
// 모든 과일을 포장할때 필요한 상자의 개수?
var orange = 100;
var sizeOfBox = 5;
document.write("필요한 상자개수 : "+(orange/sizeOfBox)+"개<br>");
// Q. 895 -> ???? -> 800
// 472 -> ???? -> 400
// 123 -> ???? -> 100
// 952 -> ???? -> 900 (확인) /버림
var number = 999;
document.write( Math.floor(number/100) * 100 );
// Q. 856 -> ??? -> 851
// -> 999일 때의 값을 계산
document.write( Math.floor(number/10) * 10 +1 );
2. 대입 연산자(=)
- 연산의 방향(오->왼)
- 복합 대입연산자 (+= -+ *= /= %=)
<script>
// A = B;
// A += B; <=> A = A + B; (누적합)
// A -= B; <=> A = A - B;
// A *= B; <=> A = A * B;
// A /= B; <=> A = A / B;
// A %= B; <=> A = A % B;
document.write(num1); //10
document.write(num1 += num2); //12
document.write(num1); //12
var tag = ""; //누적합을 이용한 테이블 만들기
tag += "<table border='1'>";
tag += "<tr>";
tag += "<td>1</td>";
tag += "<td>2</td>";
tag += "</tr>";
tag += "</table>";
document.write(tag);
document.write("<table border='1'><tr><td>1</td><td>2</td></tr></table>");
</script>
3. 증감 연산자(++A. A++. --A. A--): 데이터를 1씩 증가/감소
<script>
var A = 100;
++A; // 101
A++; //102 -> 101
A; //102
A=100
document.write("A : " + A +"<br>");
++A; //101 : 전위연산(변수를 사용할 때 숫자를 1 증가 후 사용, 실행 중 증가)
document.write("A : "+ A + "<br>");
A++; // 101 : 후위연산(변수를 사용할 때 그대로 사용 후 1 증가, 실행 후 증가)
document.write("A : "+ A + "<br>"); // 102
A = 100;
++A; // 101
A--; // 101
A++; // 100 -> 100
A--; // 101 -> 101
++A; // 101
document.write(A--); // 101
A--; // 100
++A; // 100
document.write(++A); // 101
</script>
4. 비교 연산자 ( >, <, >=, <=, ==, !=, ===, !==)
- 피연산자 2개를 사용해서 값을 비교 후 결과를 참/거짓 형태로 리턴
<script>
var val1 = 10;
var val2 = 20;
document.write(" val1 > val2 : "+(val1 > val2)+"<br>");
document.write(" val1 < val2 : "+(val1 < val2)+"<br>");
document.write(" val1 == val2 : "+(val1 == val2)+"<br>");
document.write(" val1 != val2 : "+(val1 != val2)+"<br>");
val1 = 10;
val2 = "10";
// 타입 상관없이 값만 비교할 때
document.write(" val1 == val2 : "+(val1 == val2)+"<br>");
// 타입과 값을 모두 비교할 때
document.write(" val1 === val2 : "+(val1 === val2)+"<br>");
// 아스키 코드값을 사용한 문자 크기 비교할 때
document.write("A" > "B");
document.write("JavaScrit" > "javaScript")
document.write("javascrit" > "javaScript")
</script>
5. 논리 연산자
-ture/false를 사용해서 연산
| A | B | &&(AND) | ||(OR) | !(NOT) |
| T | T | T | T | T -> !T = F F -> !F = T |
| T | F | F | T | |
| F | T | F | T | |
| F | F | F | F |
<script>
var T = true;
var F = false;
document.write("<hr>");
document.write(" t && t : "+(T&&T)+"<br>");
document.write(" t && f : "+(T&&F)+"<br>");
document.write(" f && t : "+(F&&T)+"<br>");
document.write(" f && f : "+(F&&F)+"<br>");
document.write("<hr>");
document.write(" t || t : "+(T||T)+"<br>");
document.write(" t || f : "+(T||F)+"<br>");
document.write(" f || t : "+(F||T)+"<br>");
document.write(" f || f : "+(F||F)+"<br>");
document.write("<hr>");
</script>
6. 삼항(조건) 연산자 [조건식? 값1(참):값2(거짓)]
- 조건식의 결과에 따른 실행 결과를 변화 가능
<script>
var A =100;
var B =200;
// A,B 비교해서 A가 클 때 "A값이 더 크다"
// B가 클 때 "B값이 더 크다"
document.write( A > B? "A값이 더 크다" : "B값이 더 크다" );
//Q. 과일(53개)을 상자에 담으려고 한다
// 이때 상자의 크기는 한번에 5개씩 저장 가능
// 필요한 상자의 개수?
// ex) 53개 -> 11개 / 50개 -> 10개 / 15개 -> 3개 / 18개 -> 4개
var sizeOfbox = 5;
var orange = 53;
// 나머지가 있을 때 / 없을 때
// -> 소수점 버림
document.write("필요한 상자 개수: " +Math.floor(orange / sizeOfbox)+"개" + "<br>");
document.write("필요한 상자 개수: " +Math.floor(orange / sizeOfbox+1)+"개" + "<br>");
document.write("필요한 상자 개수: " +(Math.floor(orange / sizeOfbox)+(orange%sizeOfbox>0? 1:0))+"개" + "<br>");
</script>
