[JavaScript] DOM | 변수 | 변수자료형

📌 DOM(Document Object Model)

: 웹 문서(HTML)의 모든 요소를 객체 형식으로 표현한 것 

 - > 문서내에 특정 요소에 접근하는 방법을 제공 

 

📌DOM을 이용한 HTML 요소 접근하기(해당 요소객체 가져오기)

🔊 id로 접근하기 : document.getElementById("id속성값");

🔊 name으로 접근하기 : document.getElementsByName("name속성값");

🔊 class로 접근하기 : document.getElementsByClassName("class속성값");

🔊 tag로 접근하기 : document.getElementsByTagName("태그명");

🔊 CSS 선택자로 접근하기 : 
    1) document.querySelector("CSS 선택자");
        -> 선택된 요소가 여러 개일 경우 첫번째 요소만! 접근 가능

    2) document.querySelectorAll("CSS 선택자");
        -> 선택된 요소 모두 접근

 

 

📌변수 선언 위치에 따른 구분

- Java

 public class Student{

            //필드 (멤버 변수)
            private String name; //인스턴스 변수
            public Static String schoolName; // 클래스변수, Static 변수
            
            //메소드
            public setName(String name/*메소드 지역 변수*/){
                this.name(name);
                int num = 10; //메소드 지역 변수

                if(){
                    int a = 20; //if 지역 변수 
                }
            }
        }

- Javascript

    var num1;     // 지역 변수 (선언된 후 같은 문서 내 어디서든 사용 가능)
        num2;     // 전역 변수 (변수명 앞에 아무런 키워드가 없으면 전역 변수가 된다.)

        function test(){
            var num3 //function 지역변수
            num4; // 전역 변수 (변수명 앞에 아무런 키워드가 없으면 전역 변수가 된다.)

            if(조건식){
                var num5; //function 지역변수 
                num6; //전역변수!
            }
           
        }
        
 * var / let/ const 와 변수를 선언할때 {} 벗어나 호출하게 되면 error가 발생한다.

 

📌변수 선언 방식 

🔊 var : 변수, 변수명 중복 가능 (덮어쓰기됨!), 함수 레벨 scope

🔊 let : 변수, 변수명 중복 불가 , 블록{} 레벨 scope -
🔊 const : 상수, 변수명 중복 불가 , 블록{} 레벨 scope

        1순위 : const
               ( JS는 특정 요소를 선택해서 사용하는 경우가 많아서 상수에 고정시켜둠 )
        2순위 : let
               ( 반복문처럼 변화는 값에 대해서 지정한다.  )
        3순위 : var 
               ( ES6 이후 부터 사용 빈도가 많이 적어짐)

 

📌자바스크립트의 자료형 

자바 스크립트는 변수 선언 시 별도의 자료형을 지정하지 않음.
 -> 변수에 대입되는 값(리터럴)에 의해서 자료형이 결정됨.

- string  (문자열)         - number  (숫자) -> 정수/실수 모두 포함          - boolean (논리값)         - object  (객체) -> 배열(Array),자바스크립트 객체{k:v, k:v}         - function(함수)         - undefined(정의되지 않은 변수) -> 변수가 선언만 됐지, 값이 대입되지 않음         (참고)         - null(참조하는게 없음) -> document.getElementByID("오타")(가장 흔한 경우)                                 -> id가 일치하는 요소가 없어서 참조할 수 없다.          (null은 타입보단 값(리터럴)의 개념)

 

➰ 원시타입과 참조타입 

🔊원시타입 : 데이터 복사가 일어날 때 메모리 공간을 새로 확보하여 독립적인 값을 저장한다.

     (주소값을 복사하지 않고 해당 값만 복사를 한다!)
 -> 숫자(Number) , Boolean, null, undifiend, 문자열(string), 

🔊 참조타입 : 메모리의 위치(주소)에 대한 간접적인 참조를 통해 메모리에 접근

---

📝 계산기 만들기

HTML

<h1>간이 계산기 만들기</h1>

    첫번째 값 : <input type="text" id="num1"> <br>
    두번째 값 : <input type="text" id="num2"> <br>

    <!-- 
        함수 호출 시 매개변수 this
        -> 이벤트가 발생한 요소 자체를 의미한다. 
        (여기서는 클릭된 연산자 버튼)
     -->

    <br>

    <button onclick="calculate(this)">+</button>
    <button onclick="calculate(this)">-</button>
    <button onclick="calculate(this)">*</button>
    <button onclick="calculate(this)">/</button>
    <button onclick="calculate(this)">%</button>

    <br><br>

    계산 결과 : <span id="result"></span>

script

function calculate(btn){

    //btn에는 this(클릭된 버튼 요소)가 전달되어짐
    //console.log(btn);

    //버튼의 내용(+, -, *, /, %)를 얻어옴
    const op = btn.innerText 

    //input에 입력된 값을 얻어와 바로 number 타입으로 변환 
    const num1 = Number(document.getElementById("num1").value);
    const num2 = Number(document.getElementById("num2").value);

	 //span 태그에 결과 출력
     //1.요소 먼저 가져와! document.getElementById("result")
     //2.안에 내용에 넣고 싶어! .innerText /innerHTML 
     //3. = 넣는 값! 넣어줘!
    document.getElementById("result").innerText = new Function("return " + num1+op+num2);

}

📝 카카오톡 채팅창 만들기  

HTML 

 <h3>카카오톡 채팅 화면 만들기</h3>

    <div id="chatting-bg">
        <p><span>추가 입력</span></p>
        <p><span>입력되는 체팅 출력</span></p>
        <p><span>입력되는 체팅 출력</span></p>
    </div>

    <!-- onkeydown : 키가 눌러졌을 때 (키보드을 누르자마자!)-->
    <!-- onkeypress : 키가 눌러지고 있을 때 (키보드을 누르고 있을때)-->
    <!-- 쭉 누르고 있을 경우 무분별한 함수 호출이 발생 -->
    

    <!-- onkeyup : 키가 올라올 때 (가장 많이 쓴다!)-->
    <input type="text" id="chatting-input" size="40" onkeyup="inputEnter()">
    <button onclick="readValue()">입력</button>

script

/* 카카오톡 체팅 만들기 */
function readValue(){

    // 체팅 입력에 사용되는 요소 모두 얻어오기
   const bg = document.getElementById("chatting-bg");
   const input = document.querySelector("#chatting-input");

   //input에 입력된 값이 있을 경우  
   if(input.value.trim().length>0){
        //문자열.trim() : 문자열 양 끝에 공백을 모두 제거
        //ex) "                    k          h         ".trim()->"k          h"

        //input에 입력된 값을 얻어와 bg에 추가(누적)
        bg.innerHTML += " <p><span>"+input.value+"</span></p>";

        //요소.scrollTop           : 요소 내부 현재 스크롤 위치 반환
        //요소.scrollTop = 위치    : 스크롤을 특정 위치 이동  
        //요소.scrollHeight = 위치 : 스크롤 전체 높이 

        //bg의 스크롤을 제일 밑으로 내리기
        bg.scrollTop = bg.scrollHeight;
   }


   //input에 작성된 값 변경하기 -> 빈문자열 == value 지우기
   input.value="";

   //input에 초점
   input.focus();


}

// input 태그 키가 눌러졌을때 엔터인 경우를 검사하는 함수 
function inputEnter(){

    console.log(event.key);//현재 눌러진 키를 반환

    if(event.key == "Enter"){ //눌러진 key가 Enter인 경우
        readValue();//함수호출
    }


}