꿈 많은 사람의 이야기

세로형

Notice

[contact] 컨택 정보 공지

Recent Posts

Recent Comments

Link

11-22 17:53

« 2024/11 »
일	월	화	수	목	금	토
					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

Tags more

Archives

Today

Total

관리 메뉴

꿈 많은 사람의 이야기

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

javascript

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

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

728x170

자바스크립트를 이용해서 화면에 뭔가 써줄라면
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

위 예제를 보면 주석과 같은 결과가 나오게 된다.
이러한 것들을 조심해줘야 한다.
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

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

그리드형

저작자표시

'javascript' 카테고리의 다른 글

자바스크립트 NaN, isNan() 메소드 (0)	2017.08.16
자바스크립트 이벤트(mouseover, mouseenter, onclick, over시 이미지 변경), 문자열 (0)	2017.08.16
자바스크립트 계산기 만들기 (0)	2017.08.16
자바스크립트 object, null, undefined, 함수(function) (0)	2017.08.16
자바스크립트 기초(html id 갖고오기, html 값 바꾸기, css 바꾸기, document 객체) (0)	2017.08.09