[javascript] - 기초문법

1. 변수 선언

기본형 : var 변수명;  또는   var 변수명=값;

<script>
    var box;
    box=100;
    document.write(box, "<br><br>");
 
    var t=Number("500");
    document.write(box + t, "<br><br>");
</script>

-->  결과값 = 100  /  600 

2. 변수에 저장할 수 있는 자료형

문자형(string) var 변수 = "사용할 문자나 숫자";

숫자형(number) var 변수 = 숫자;  또는 Number("숫자 그대로의 원형=문자형 숫자")

논리형(boolean) var 변수 = true or false; 또는 Boolean(데이터);

(boolean메서드는 숫자0, null, undefined, 빈문자 (" "); 을 제외한 모든 데이터에 대해 true 를 반환함)

null은 변수에 저장된 데이터를 비울때사용

undefined는 변수에 등록되기 전의 기본값

var a=true;
var b=false;
var c=10 > 5;
var d=Boolean(null);

document.write(a, "<br>");
document.write(b, "<br>");
document.write(c, "<br>");
document.write(d, "<br><br>");

--> 결과 값 true / false / true / false

typeof

typeof는 지정한 데이터 또는 변수에 저장된 자료형을 알고싶을 때 사용합니다.

기본형 type 변수 또는 데이터;

var num=100;
var str="자바스크립트";

document.write(typeof num, "<br>");
document.write(typeof str, "<br><br>");

--> 결과값  number  /  string

연산자

var num1 = 15;
var num2 = 2;
var result;
result = num1 + num2;
document.write(result, "<br>");
result = num1 - num2;
document.write(result, "<br>");
result = num1 * num2;
document.write(result, "<br>");
result = num1 / num2;
document.write(result, "<br>");
result = num1 % num2;
document.write(result, "<br><br>");
 
var t1 = "학교종이";
var t2 = "땡땡땡";
var t3 = 8282;
var t4 = "어서모이자";
var result;
result = t1 + t2 + t3 + t4;
document.write(result, "<br>");

% -> 나머지 값.

--> 결과값  17  /  13  /  30  / 7.5  /  1  

학교종이 땡땡땡 8282 어서모이자

대입연산자

종류	풀이
A = B	A = B
A += B	A = A + B
A *= B	A = A * B
A /= B	A = A / B
A %= B	A = A % B

var num1 = 10;
var num2 = 3;

num1 += num2; //num1 = num1(10) + num2(3);
document.write(num1, "<br>");
num1 -= num2; //num1 = num1(13) - num2(3);
document.write(num1, "<br>");
num1 *= num2; //num1 = num1(10) * num2(3);
document.write(num1, "<br>");
num1 %= num2; //num1 = num1(30) % num2(3);
document.write(num1, "<br><br>");

--> 결과 값   13  /  10  /  30  /  0

증감 연산자

증감 연산자는 연산자와 달리 피연산자가 한개만 필요한 단항 연산자 입니다.

증감 연상자는 변수의 어느 위치에 오는가에 따라 결괏값이 달라집니다.

var A = ++B;

먼저 B의 값이 1만큼 증가하고 증가된 값을 A에 대입

​

var A = B--;

B의 값을 A에 대입하고, B의 값을 1만큼 감소

var num1 = 10;
var num2 = 20;
var result;
 
num1--;
document.write(num1, "<br>");
num1++;
document.write(num1, "<br>");
result = num2++;
document.write(result, "<br>");
result = ++num2;
document.write(result, "<br><br>");

--> 결과 값  9  /  10  /  20  /  22

비교연산자

종류	설명
A == B	A와 B는 같다 (문자 "10",  숫자 10 true)
A != B	A와 B는 다르다 (문자 "10",  숫자 10 false)
A === B	A와 B는 같다 (문자 "10", 숫자 10 자료형도 일치하면 true,  다르면 false)
A !== B	A와 B는 다르다 (문자"10", 숫자 10 표기된 자료형이 일치하지 않아서 true,  같으면 false)

var a=10;
var b=20;
var c=10;
var f="20";
var result;
 
result = a>b;
document.write(result, "<br>");
result = a<b;
document.write(result, "<br>");
result = a<=b;
document.write(result, "<br>");
result = b==f;
document.write(result, "<br>");
result = a!=b;
document.write(result, "<br>");
result = b===f;
document.write(result, "<br><br>");

--> 결과 값  false  /  ture  /  ture  /  ture  /  ture  /  false

논리 연산자

종류	설명
|| (or)	값이 하나라도 true가 존재하면 true로 결과값을 반환
&& (and)	값이 하나라도 false가 존재하면 false로 결과값을 반환
! (not)	값이 ture면 false로 결과 값을 반환

연산자 우선순위

1. ()

2. 단항 연산자 ( --, ++, !)

3. 산술 연산자 ( *, /, %, +, - )

4. 비교 연산자 ( <, <=, >, >=, ==, === !==, !=)

5. 논리 연산자 ( &&, || )

6. 대입 연산자 ( =, +=, -+, *=, /=, %= )

var d=10;
var e=20;
var m=30;
var n=40;
 
var result;
result = d>e || e>=m || m>n;
document.write(result, "<br>");
result = d>e || e>=m || m<=n;
document.write(result, "<br>");
result = d<=e && e>=m && m<=n;
document.write(result, "<br>"); 
result = d<=e && e<=m && m <=n;
document.write(result, "<br>");
result = !(d>e);
document.write(result, "<br><br>");

--> 결과값  false  /  ture  /  fasle  /  ture  /  ture

삼항 조건 연산자

조건식의 결과에 따라 실행 결과가 달라지는 삼항 연산자로, 연산을 위해 피연산자가 3개 필요합니다.

조건식 ? 자바스크립트 코드 1 : 자바스크립트 코드2;

var q=10;
var w=3;
 
var result = q<w ? "javascript" : "hello";
document.write(result, "<br>");

q(10) > w(3)가 ture 이므로 "javascript"가 result에 저장됩니다.

 ex> var result = q(10) < w(3)  라면 결과값을  false 이므로 "hello"가 저장됩니다.

--> 결과 값  javascript

총정리 실습! 적정 체중을 구하는 테스트기 만들기

실습 01.

var useHeight=180;
var useWeight=74;
 
//평균체중 = (신장 - 100) x 0.9
var normal_W = (useHeight - 100) * 0.9;
document.write(normal_W, "<br><br>");

-->  결과 값 72

실습 02.

var name = prompt("당신의 이름은?","");
var height = prompt("당신의 신장은?","0");
var weight = prompt("당신의 몸무게는?","0");
 
var normal_w = (height - 100) * 0.9;
var result = weight >= normal_w - 5 && weight <= normal_w + 5;
result = result ? "적정체중입니다." : "적정 체중이 아닙니다."
document.write(name + "님은" + result, "<br>");

weight >= normal_w - 5 && weight <= normal_w + 5;

&& and 연산자 = 둘중 하나라도 false이면 false

prompt가 이렇게 생김!