세로형
Recent Posts
Recent Comments
Link
03-29 00:03
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Archives
Today
Total
관리 메뉴

꿈 많은 사람의 이야기

자바스크립트 기초(연산, 변수, 비교(==, ===), innerText, innerHTML) 본문

javascript

자바스크립트 기초(연산, 변수, 비교(==, ===), innerText, innerHTML)

이수진의 블로그 2017. 8. 16. 08:45

자바스크립트를 이용해서 화면에 뭔가 써줄라면
document.write()를 이용하면 된다.

<script>
document.write(5 + 6);
</script>

이런식으로 하면 된다.
제대로 봐보면

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
    <h2>My First Web Page</h2>
    <p>My First Paragraph.</p>
    <p id="demo"></p>
<script>
    document.getElementById("demo").innerHTML =5+6;
</script>
</body>
</html>
Colored by Color Scripter

와 같은 방식으로 객체에 접근을 해서 해당 HTML 을 5+6 즉 11의 값을 출력하게 해준다.

innerText, innerHTML

그리고 innerText도 있는데 innerHTML 과의 차이를 한번 봐보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   
   <p>JavaScript code blocks are written between { and }</p>
    <button type="button" onclick="myFunction()">Click Me!</button>
    <p id="demo1"></p>
    <p id="demo2"></p>
    <p id="demo3"></p>
    <p id="demo4"></p>
    
</body>
</html>
 
 
<script>
function myFunction() {
    document.getElementById("demo1").innerHTML ="Hello Dolly!";
    document.getElementById("demo2").innerHTML ="How are you?";
    document.getElementById("demo3").innerHTML ="<h1>Haaaaa!</h1>";
    document.getElementById("demo4").innerText ="<h1>sdafgdfgly!</h1>";
}
</script>
Colored by Color Scripter

위 예제를 보면 innerHTML과 innerText 가 있다. 버튼을 클릭하면 myFunction() 함수가 호출되는데 결과값은 아래와 같다.

 

즉 HTML은 안에 <h1>과 같은 HTML 탭이 존재하면 그것들은 무시하고 그냥 text를 출력한다. 
하지만 innerText를 하면 그 안에 속해있는 태그까지 전부 출력해준다.

동등 비교 연산

그리고 자바스크립트에선 비교할 때 ==와 ===가 존재한다. 
자바스크립트에서 == 는 (5 == ‘5’); 와 같은 것들도 타입이 다른 데이터 참 결과
===로 하면 false 로 나옴왜냐하면 타입까지도 비교해준다.
이런게 신기한 기능이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
    document.write(5=='5');  //true
    document.write("<br>");  
    document.write(5==5);  //true
    document.write("<br>");  
    
    document.write(5=='5');  //true
    document.write("<br>");  
    document.write(5==='5');  //false
    document.write("<br>");  
    document.write(5==='6');  //false
    document.write("<br>");  
    document.write(5=='5');  //true
    document.write("<br>");  
</script>
    
Colored by Color Scripter

위 예제를 보면 주석과 같은 결과가 나오게 된다.
이러한 것들을 조심해줘야 한다.
java나 다른 언어에서 == 로 사용하다가 자바스크립트로 오면 이런것이 혼란하다.


변수

자바에서는 변수를 var로 통일한다.
String, int, double 이러한 것들이 없고 그냥 var로 통일한다.
그리고 var a = 안에 뭐가 들어가냐에 따라 타입이 결정된다.
숫자가 들어가면 숫자가, 문자열이 들어가면 문자열 타입이 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<body>
    <p id="demo"></p>
    <p id="demo2"></p>
    <p id="demo3"></p>
<script>
    var pi = 3.14;
    var person = "John Doe";
    var answer = 'Yes I am!';
    document.getElementById("demo").innerHTML = pi;
    document.getElementById("demo2").innerHTML = person;
    document.getElementById("demo3").innerHTML = answer;
 
    document.write(typeof(pi)+"<br>");
    document.write(typeof(person)+"<br>");
    document.write(typeof(answer)+"<br>");
</script>
</body>
</html>
 
Colored by Color Scripter

 

 



처럼 말이다.

그리고 var을 붙이냐 안붙이냐의 차이로 전역변수냐 지역변수냐가 결정된다. var가 붙으면 일반적으로 지역변수이고 var가 붙지 않으면 전역변수가 된다.
아래 예제를 보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<body>
 
    <p id="demo"></p>
<script>
    var x =5;
    var y =6;
    var z = x + y;
    function myFunc()
    {
        x =100;  //전역변수!
        var d = x *10;   //지역변수!
        document.getElementById("demo").innerHTML = d;  //1000이 출력
    }
    myFunc();
    document.write("x -> "+x);
    document.write("<br>");
    //document.write("d -> "+d);  출력이안됌!
</script>
</body>
</html>
Colored by Color Scripter

그래서 전역 변수는 다른 function 같은 곳에서 사용할 수 있다.

그리고 만약에 var x = 100; 으로사용하다가
x = "abc"로 사용하게 되면
데이터 타입이 숫자였던 것이 문자열로 바뀌게 된다. 

또한 아래와 같은 차이점이 존재한다.

var x = 16 + 4 + "Volvo";
Result:
20Volvo
 
 
그리고
 
var x = "Volvo" + 16 + 4;
Result:
Volvo164

첫 번째는 숫자를 더하고 문자열로 만든것이다.
두 번째는 문자열을 먼저 더하고 만들기 때문에 문자열화 되었다.


반응형
그리드형
Comments