변수 Variable / 출력

FrontEnd/JavaScript

by H_Develop 2022. 6. 28. 17:50

메모리에는 정수, 실수, 문자 등 다양한 데이터들이 저장.
벼수는 데이터가 저장되는 메모리 공간. a=3 이면 3을 a에 대입한다는 뜻.
데이터 값을 저장하고 있는 메모리공간을 java 주소값, c언어 포인터 등으로 부름

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
            
    <script>    // compile 사용하는 프로그램은 변수를 미리 선언, cpu가 미리 변수를 위한 메모리 공간을 할당함.
                // interpreter 을 사용하는 script 들이 있고, 미리 선언하지 않고 사용하는 시점에서 바로 구동. 대신 느림
        var a;  // 변수 선언
        a = 3;  // 3을 a에 대입 / 같다라는 표현, equal 은  a==3; 으로 사용
        document.write(a); // document.write() 함수는 변수나 데이터 값을 화면에 출력

    </script>
    
</body>
</html>

출력
1. document.write() 함수 사용하여 브라우저에 출력하는 방법
2. window.alert() 함수를 사용하여 경고창을 띄우는 방법
3. console.log() 함수를 사용하여 콘솔에서 log(event에 대한 기록)의 인자를 출력하는 방법
4. innerHtml 사용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {color : red;}
    </style>
</head>
<body>
    <script>
        var name="홍길동";
        window.alert(name); // alert(name) / document.write(name) 으로 사용해도 가능

        var a=10; b=20;
        c = a+b;
        document.write("document"+c);

        console.log(10+20); // 개발자 도구 > consol 누르면 나옴
    </script>

    <h3>
        innerHTML을 이용해서 HTML 요소에 내용 추가하기
    </h3>
    <p id="a"></p>
    <p id="name">홍길동</p> <!-- name 값을 부여 홍길동 대시 갑돌이 출력-->

    <script>
        document.getElementById("a").innerHTML = "안녕들 하셔요" 	// a = 안녕들 하셔요 / 대입
        document.getElementById("name").innerHTML = "갑돌이"
    </script>

</body>
</html>

입력
자바스크립트에서는 prompt() 함수를 이용하여 사용자가 키보드로 입력하는 데이터를 변수에 저장시킨다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        var name= prompt("이름을 입력하세요")
        document.write(name); // 입력된 값 출력
    </script>

</body>
</html>

데이터 형

변수는 숫자, 문자열, 배열, 불리언(True/False), 객체(클레스가 있음) 등의 데이터 형이 있다.
var age= 20; 숫자
var email = "good_guys@naver.com"; 문자열
var colors = ["red","green","blue"] 배열
var ok = true; boolean
var member = {name:"Hong", age:30, address:"Incheon"} 객체
숫자number : 정수형(Integer)과 실수형(float) 두가지가 있다.
문자열String : 하나 또는 여러개의 문자를 말한다. ' ' 이나 " " 를 사용하여 묶는다.
불리언boolean : 데이터형이 True 또는 False 중 하나의 값만 가질 수 있다.
배열array : 하나의 변수_명에 여러개의 동일한 타입의 데이터형을 저장할 수 있는 데이터형이다.
배열의 요소(element)는 0부터 시작된다.
객체object : 각 요소가 키(key):값(value) 로 구성되어있다. 그리고 요소는 { } 로 감싼다.
member={name:"홍길동", age:25, email:"hong@naver.com"}에서
name, age, email이 키이고, "홍길동",25,"hong@naver.com"이 값이다.
요소는 객체.속성으로, members.name, members.age, members.email 으로 접근한다.

boolean , array

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        var x = 7;
        var y = 7;
        var z = 9;
        document.write(x==y);
        document.write("<br>");
        document.write(x==z);
        document.write("<br>");

        var colors = ["빨강","노랑","파랑"];
        document.write(colors);
        document.write("<br>");
        document.write(colors[0]); // 첫번째 요소 출력
        document.write("<br>");
        document.write(colors[2]); // 세번째 요소 출력
    </script>
</body>
</html>

object

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // var score={kor:80,eng:90,math:100};	// 내코드

        // document.write("총 합 : ");
        // document.write(score.kor+score.eng+score.math);
        // document.write("<br>");

        // document.write("평균 : ");
        // var sum_score=score.kor+score.eng+score.math;
        // document.write(sum_score/3);

        var score={kor:80,eng:90,math:100}	// 선생님 코드
        total = score.kor+score.eng+score.math;
        avg = total / 3;
        
        document.write("합계 : " + total + "<br>");
        document.write("평균 : " + avg);
    </script>
</body>
</html>

'FrontEnd > JavaScript' 카테고리의 다른 글

형변환 및 예제 (0)	2022.06.30
연산자 (Arithmetic, Assignment, String, Comparison, Logical) (0)	2022.06.28
주석문, alert() (0)	2022.06.28
기계어로 번역 방식 / 컴파일(compile), 인터프리터(interpreter) (0)	2022.06.28
JavaScript 개념 / 불켜기 불끄기 (0)	2022.06.28