JavaScript 정리 03

07 Feb 2019

Reading time ~4 minutes

JavaScript 정리 03 - 연산자, 제어문

연산자(Operator)

연산자의 우선순위는 자바와 같다.

최우선

(), []

단항
- tilde(~) : 1의 보수 연산자, 비트 단항 연산자(NOT)
- - : 부호바꿈 연산자, 2의 보수 연산자
- ++ : 증가연산자
- – : 감소 연산자

~, !, +, -, ++, --

산술
- Java에선 정수/정수 = 정수
- JS에선 정수/정수 = 실수

+, -, *, /, %

쉬프트

<<, >>, >>>

관계
- ==, !=과 ===, !==의 차이
  - ==, !=은 값만 같은지 **비교
  - ===, !==은 값과 데이터형이 모두 같은지 비교

>, >=, <, <=, ==, ===, !=, !==

a = "안녕";
a = 10;

b = "10";

(a == b) ? "같다" : "다르다";  // "같다"가 나옴
(a === b) ? "같다" : "다르다"; // "다르다"가 나옴

논리
- 일반 논리 - 여러개의 관계 연산자를 묶어서 비교할 때
- 비트 논리 - 비트 연산

// 일반 논리
&& // 전항과 후항이 모두 참일 경우 참을 반환
|| // 전항과 후항이 모두 거짓일 때만 거짓을 반환

// 비트 논리
& // AND, 상위비트와 하위비트가 모두 1인 경우 1내림
| // OR, 상위비트와 하위비트가 모두 0인 경우 0내림
^ // XOR, 상위비트와 하위비트 둘 중 하나만 1인 경우 1내림

삼항(조건 연산자)

조건 ? 참반환값 : 거짓반환값

대입

= 
+=, -=, *=, /=, %=, <<=, >>=, >>>=, &=, |=, ^= // 연산결과로 변수의 값을 변경시킴

데이터형

JavaScript에선 정수, 실수를 number로 인식
- 정수/정수 = number
  - 정수 또는 실수가 나올 수 있다.
  - Java에선 정수/정수 = 정수
- 수가 아닌 걸 연산하면 NaN(Not A Number)이 발생
true/ false는 boolean
“안녕”, ‘안녕’은 string
object는 HTML Tag, HTML Form Control
변수를 만들지 않고 사용하면 undefined가 발생
데이터형을 확인하는 함수 typeof()

typeof(변수);

제어문

프로그램의 순차적인 흐름을 바꾸어 주는 문장.
조건문
- Java와 다르게 if ~ else, switch ~ case에서 모든 형을 비교가능
- if문은 범위를 비교할 때 사용
- switch는 값이 일치할 때 사용

if ~ else, switch ~ case

반복문
- for는 시작과 끝을 알 때 사용
- while,(최소 0~조건까지) do ~ while(최소 1~조건까지)은 시작과 끝을 모를 때 사용

for, while, do~while

분기문
- break는 switch ~ case나 반복문을 빠져나갈 때 사용
- continue는 반복문의 수행을 건너뛸 때 사용
- return은 값을 반환하거나 코드의 실행을 멈추고 호출한 곳으로 돌아갈 때 사용

break, continue, return

외부값 입력받기

HTML Form Control을 사용하지 않고 입력값을 받고 싶을 때 사용
- 서비스로 사용하진 않는다.
  - 개발할 때만 사용

var inputValue = prompt("메시지","초기값");

var name = prompt("이름을 입력해주세요.", "초기값");

alert(name);

var name = prompt("이름을 입력해주세요.", "초기값");

var img="img.png";
var msg="평민";

// 조건문 : 단일 if - 조건에 맞을 때에만 코드를 실행해야 할  때 사용
if(name == "이재찬"){
          img="img1_1.png";
          msg="반장";
}

document.write("<img  src='../common/images/"+img+"'>");
document.write(name+"은 "+msg);

숙제1

방향을 입력받기
- UP, DOWN, LEFT, RIGHT
메시지를 입력받기
넓이 500px, 높이 400px이면서 border가진 <div>를 만들고 화살표 방향으로 메시지를 이동시킴

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="work1.js"></script>
<style type="text/css">
     div {
           width: 500px;
           height: 400px;
           border: 1px solid blue;
     }
     
     marquee {
           width: 500px;
           height: 400px;
     }
</style>
</head>
<body>
</body>
</html>

function setDirection(direction) {
     var msg = prompt("메시지를 입력해주세요.", "");
     var htmlContent = "";
     
     if (direction == "up") {
           htmlContent = "<div><marquee scrollamount='10'  direction="+direction+">"+"∧
"+msg+"</marquee></div>";
     } else if (direction == "down") {
           htmlContent = "<div><marquee scrollamount='10'  direction="+direction+">"+msg+"
∨"+"</marquee></div>";
     } else if (direction == "left") {
           htmlContent = "<div><marquee scrollamount='10'  direction="+direction+">&lt;"+msg+"</marquee></div>";
     } else if (direction == "right") {
           htmlContent = "<div><marquee scrollamount='10'  direction="+direction+">"+msg+"&gt;</marquee></div>";
     }
     
     window.document.write(htmlContent);
}
var direction = prompt("방향을 입력해주세요.","UP, DOWN, LEFT,  RIGHT만 입력가능합니다.");
if (direction == "UP" || direction=="up") {
     direction = "up";
     setDirection(direction);
} else if (direction == "DOWN" || direction == "down") {
     direction = "down";
     setDirection(direction);
} else if (direction == "LEFT" || direction == "left") {
     direction = "left";
     setDirection(direction);
} else if (direction == "RIGHT" || direction == "right") {
     direction = "right";
     setDirection(direction);
} else {
     alert("UP, DOWN, LEFT, RIGHT 중 한가지 방향을  입력해주세요.");
}

숙제2

Java, CSS, JavaScript, HTML 중 한개를 입력받고 입력받은 언어의 창시자의 이름, 태어난 해, 나이 정보를 box-shadow를 가진 table로 뜨도록 만드세요.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
     var lang = prompt("언어입력(java, HTML, javascript, CSS)",  "");
     var name = "";
     var year = 0;
     var age = 0;
     
     function calAge(year) {
           return 2019 - year + 1;
     }
     
     function showLangMaker(lang, name, year, age) {
           console.log(lang+" "+name+" "+year+" "+age);
           document.write("<div id='lang-maker'><table><tr>");
           document.write("<td id='maker-img' rowspan='3'><img  src='../common/images/lang_makers/"+lang.toLowerCase()+".jpg'></td>");
           document.write("<td class='font-bold'>이름</td>");
           document.write("<td>"+name+"</td>");
           document.write("</tr><tr>");
           document.write("<td class='font-bold'>태어난  해</td>");
           document.write("<td>"+year+"</td>");
           document.write("</tr><tr>");
           document.write("<td class='font-bold'>나이</td>");
           document.write("<td>"+age+"</td>");
           document.write("</tr></table></div>");
     }
     
     if (lang == "JAVA" || lang == "java") {
           name = "제임스 고슬링";
           year = 1965;
           age = calAge(year);
           showLangMaker(lang, name, year, age);
     } else if(lang == "HTML" || lang == "html") {
           name = "팀 버너스 리";
           year = 1955;
           age = calAge(year);
           showLangMaker(lang, name, year, age);
     } else if(lang == "JAVASCRIPT" || lang == "javascript") {
           name = "브렌던 아이크";
           year = 1961;
           age = calAge(year);
           showLangMaker(lang, name, year, age);
     } else if(lang == "CSS" || lang == "css") {
           name = "하콤 비움 리";
           year = 1965;
           age = calAge(year);
           showLangMaker(lang, name, year, age);
     } else {
           alert("언어는 java, HTML, javascript, CSS만  선택가능합니다.");
     }
</script>
<style type="text/css">
     #lang-maker {
           width:600px;
           height:300px;
           margin:0px auto;
           box-shadow: 5px 5px 3px black;
     }
     
     table {
           width:600px;
           height:300px;
           border-spacing: 0px;
           border:1px solid black;
           text-align: center;
           vertical-align: center;
     }
     
     .font-bold {
           font-weight:bold;
     }
     
     td {
           border:1px solid black;
     }
     
     #maker-img { width:240px }
</style>
</head>
<body>
<!-- Java - 제임스 고슬링 1955 -->
<!-- CSS - 하콤 비움 리 1965 -->
<!-- HTML - 팀 버너스리 1955 -->
<!-- JavaScript - 브렌던 아이크 1961 -->
</body>
</html>

JavaScript