[JS] 22-05-27 DOM과 자바스크립트 기본문법 ☑

728x90

1. 자바스크립트의 역할 :

AJAX : 서버와 통신하는 기술

덩어리를 만들어서 넣었다 뺐다 하는 방식이다. => 객체지향

자바스크립트는 DOM을 제어한다.

DOM: 브라우저 객체모델(BOM)중 하나이며, XML HTML 문서에 접근하기 위한 인터페이스이다.
넓은 의미로 웹 브라우저가 HTML페이지를 인식 하는 방식. DOM은 트리형식의 자료구조이다.

트리의 최상단 root에 html이 위치하며 하위노드에 head ,body가 위치하고 있으며
그 하위에 여러노드들이 포함 되어있다.
DOM이 없다면 웹페이지 또는 XML페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 가지지 못한다.

DOM이란 무엇인가?

웹브라우저는 "HTML해석 -> 렌더링 (화면에출력)" 하는 과정을 거친다.

HTML해석 (코드해석) 과정에서

요소들을 트리 형태로 구조화 해 표현하는 것을 DOM이라 한다.

브라우저는 DOM을 통해 화면에 웹 콘텐츠를 렌더링 한다.

"HTML 해석 -> DOM (HTML문서에대한 인터페이스) -> 렌더링 (화면에출력)"

DOM의 목적: JS를 사용해 이 문서에 대한 스크립트를 작성 할 수 있게 해주는데 목적이 있다.

요약하자면 ,

DOM은 HTML 문서에 대한 인터페이스이다.

DOM은 HTML 코드를 해석 -> 요소들을 트리형태로 구조화 해 표현 하는 방식

DOM은 자바스크립트를 사용해서 웹화면의 콘텐츠를 추가, 수정, 삭제하거나

이벤트를 처리 할 수 있도록 하는 프로그래밍 인터페이스이다.

원본HTML 문서형태와 다른 DOM차이점 :

항상유효한 HTML형식.

자바스크립트에 수정될수있는 동적모델.

가상요소를 포함하지않는다.

보이지않는요소를포함한다..

DOM 구조

DOM tree에서 DOM객체를 찾는 방법:

document.getElementsByTagName("태그이름") : 태그이름이 같은 모든 DOM객체들을 찾는다

document.getElementsByClassName("내가 지정한 태그 class이름"): class속성이 같은 모든 객체를 찾는다

document.getElementById("내가 지정한 태그 id이름") : id가 동일한 태그를 찾겠다

DOM tree에서 구성을 제어하는 방법:

document.createElement("태그이름") : 태그이름의 DOM 객체 생성 [시멘틱태그 제외]

부모.appendChild(DOM객체) : DOM 객체 삽입

부모.removeChild(떼어내고자하는 자식 객체) : tree에서 자식 DOM객체 삭제

document 열기/닫기:

document.open() : HTML 날리고 새로운 page 시작.

document.close() : 현재 browser에 출력된 HTML페이지 완성됨을 선언. 더이상 document.write()를 할 수 없다.

HTML 태그는 다음 5가지 요소로 구성되어있다:

1. element name (e.g., div, p, em, etc...)

2. 속성 (e.g., id="firstP", class="firstDiv", etc...)

3. CSS3 style (e.g., style="color:blue", etc...)

4. event listener (e.g., onclick="this.style.color='red'", etc...)

5. innerHTML (e.g., 태그이름의 시작과 끝 사이의 콘텐츠(화면에 그대로 출력되는 문자)

innerHTML은 잘쓰이지않음.

각각의 HTML 태그를 제어하기위해 아래와 같은 DOM객체의 구성요소를 사용한다:

1. property

2. method

3. collection

4. event listener

5. CSS3 style

아래 링크는 DOM에 대해 자세히 설명해놓은 글이다.

HTML & JavaScript

velog.io

DOM은 정확히 무엇일까? | WIT블로그

wit.nts-corp.com

작성방법

대소문자 구분하여 작성한다
문장은 세미콜론;으로 구분한다.
큰따옴표""와 작은따옴표''를 구분하여 사용한다

예: document.write("<div style='color:red;'> 자바스크립트 학습</div>")

문서내부에 코드를 작성하는 방법

<head>안에 들어가도되고, <body>안에 들어가도된다.
html 태그 안에 속성값으로 정의해도 된다

예: <button type="button" onclick="alert('자바스크립트')">버튼클릭</button>

별도로 작성한 후 HTML 문서에 참조하는 법 < script src=""></script>

데이터타입과 변수

데이터타입 종류

1. 기본형타입

2. 객체타입

2. 기본형타입 종류

number 숫자 (정수/실수)
string 문자열
boolean 블리언(참/거짓)
array 배열(데이터의 집합 : 객체로 취급)
object 객체 (관련된 데이터 및 기능을 저장하는 컨테이너 역할)
null 비어있는값 (객체값이없음)
undefined 데이터값이 정해지지 않음 (변수가 선언하여 존재지만 정의되지 않은 상태)

    <script>
        var num; //변수 값 없음
        var obj=null //객체 변수값 없음
        document.write(typeof 100+"<br>") //출력값: number
        document.write(typeof 10.5+"<br>") //출력값: number
        document.write(typeof "홍길동"+"<br>") //출력값: string
        document.write(typeof true+"<br>") //출력값: boolean
        document.write(typeof [1,2,3]+"<br>") //출력값: object
        document.write(typeof {name:'홍길동' , age:25}+"<br>") //출력값: object
        document.write(typeof num+"<br>") //출력값: undefined
        document.write(typeof obj+"<br>") //출력값: object
    </script>

document.write()는 괄호안에 있는 것을 글로 출력해준다.

typeof 연산자는 데이터 타입을 확인 시켜준다.

*연산자란? 주어진 식을 계산하여 결과를 얻어내는 과정을 연산이라고 하며, 연산을 수행하는 자를 연산자라고 한다.

object 객체 (관련된 데이터 및 기능을 저장하는 컨테이너 역할)

null 비어있는값 (객체값이없음)

undefined 데이터값이 정해지지 않음 (변수가 선언하여 존재지만 정의되지 않은 상태)

stack에서 (변수명저장) 선언하고 > heap에서 (메모리주소값 할당) 정의한다

undefined는 stack에 저장이 들어가 선언되었지만, heap에서 정의되지않은상태...

undefined는 메모리주소값이 할당되지않은것이다.

null일경우 메모리주소값이 없다.

변수명 작성규칙

쉽게 말하면 vscode 입력시 빨간 밑줄 생기면 안쓰면 된다 ^^!

변수 사용 방법

var x;
변수 x 선언
var y = 10;
변수 y 선언 및 초기값 할당
var x = y;
변수 y의 값을 변수 x에 저장
var a, b, c;
변수 a,b,c선언
var a = 10, b = 11, c = 12;
변수 a,b,c 선언 및 각각 다른 초기값 할당
var a=b=c=10;
변수 a,b,c 선언 및 같은 초기값 할당
var name = "홍길동", age=25;
변수 name, age 선언 및 각각 다른 초기값 할당
var total = a+b+c;
변수 a,b,c값을 더한 결과를 변수 total에 저장

<script>
        var num=10;
        document.write (" num 변수 : " + typeof num + " 타입<p/>");
        document.write ("---데이터값변경후 ---<p/>")
        var num="홍길동";
        document.write (" num 변수 : " + typeof num + " 타입<p/>");
</script>

변수의 메모리 수명

Javascript의 메모리 관리법

erwinousy.medium.com

전역변수와 지역변수

전역변수 : 코드 내 어느 위치에서든 선언하여 전 영역에서 사용할 수 있는 변수

지역변수 : 변수가 선언된 해당 블록에서 선언하여 범위 내에서만 유효하게 사용 할 수 있는 변수 (지역변수값은 함수외부에서 사용X)

지역변수는 함수 내에서 쓰이는 변수를 의미하고 전역변수를 프로그램 전체에서 쓰이는 변수를 의미한다.

  <script>
        var globValue1; //전역 변수선언
        globValue2; // 전역변수 선언, var 생략 

        function 함수 () {
            var locValue; //지역변수선언
            globValue; //함수내부에서 var 생략시 자동전역변수로 선언
            locValue=10; // 지역변수사용
        }

        globValue=10; //전역변수사용 
    </script>

<script>
function getGrade() { // 함수 정의
kor=95; // 자동 전역 변수
}
var kor=100; // 전역 변수
getGrade(); // 함수 호출
document.write("국어 점수 : " + kor + "<br>");
//출력결과 = 국어점수:95
</script>

kor =95; 라는 지역변수자리에있는 있는 var가 없는 변수를 메모리에서 데이터를 받아서 자동으로 전역변수로 수정하는 구조이다.

이해하기 쉽게 말하자면 , 함수 안에서 변수를 정의할 때 var을 사용하면 지역변수로 인식되고

var을 사용하지 않으면 전역변수를 찾아 그 값을 정의시킨다.

* var사용시 함수 내부에서 var 생략시 자동전역변수로 선언되는 것에 대해 꼭 유의하고, var를 생략하는 것을 지양해야한다.

* 그냥 var 말고 let 쓰자 ^^ var가 아닌 let을 써야하는 이유는 밑에 정리해두었다.

<script>
function getGrade() { // 함수 정의
var kor=95; // 지역 변수
}
getGrade(); // 함수 호출
document.write("지역 변수 값은 함수 외부에서 사용할 수 없습니다.<br>");
document.write("국어 점수 : " + kor + "<br>");
</script>

<script>
function getGrade() { // 함수 정의
var kor=95; // 지역 변수
return kor;
}
getKor=getGrade(); // 함수 호출
document.write("국어 점수 : " + getKor + "<br>");
//출력결과 = 국어점수:95
</script>

함수의 예약어 return

1. 값을 반환하는데 사용한다.

2. 지역변수를 알 수 있는데 사용할 수 있다.

3. 현재 진행중인 함수를 중지(탈출)할 수 있다.

* 함수 안에서 명령문들을 실행하다가 return을 만나면 함수를 빠져나가게 됩니다.

그리고 return문에 있는것을 반환하게된다.

★ var 사용을 지양하고 let 사용 지향 해야 하는 이유 ★

변수 선언하는 방식은

const [(상수를 선언하는키워드) 변하고 싶지 않은 값을 선언]

var

let 이 있다.

자바스크립트에는 특징이있는데, 바로 호이스팅이다.

호이스팅이란?

선언된 변수와 함수를 가져가서 메모리에 기억해둔다

[함수가 실행되기 전에 안에있는 변수들을 범위 최상단으로 끌어올리는 것]

아래는 자바스크립트의 호이스팅 예다.

아래와 같은 코드는 다른언어에서 아주 비정상적인데 ( top-bottom으로 흘러야하는데, a를 선언되기전에 a를썼기때문에.)

다른 언어에서는 에러가 나와야 되는데, 자바스크립트에서는 에러가 나오지않고 undefined 1이 나온다.

console.log(a)
var a = 1
console.log(a)

//출력값 : 
//undefined  
//1

게다가 var는 전역변수와 지역변수 개념이 애매하다.

for(var i = 1; i <5; i++){
console.log(i)
}
console.log(i)
//지역변수인데도 결과는 
//12345 까지 출력된다.

"함수"만 지역변수로 호이스팅하고, 나머지는 전역변수로 올려버린다.

또한

변수의 이름 중복까지 되버린다;;

var a = 1
console.log(a)
var a = 2
console.log(a)
//결과는 1,2 로 출력된다...

이런 문제점을 가진 var 때문에 자바스크립트를 만든 창시자도 문제성을 느끼고

let을 만들었다.

let도 호이스팅은 되지만 TDZ(Temporal Dead Zone) 를 만들어서

a가 호이스팅 된건 맞지만 a 선언문이 나오기 전까진 a에 접근 할 수 없다.

(일시적으로 Dead zone으로 만들어놓았기 때문에)

아래는 let로 수정한 예제들이다.

console.log(a)
let a = 1
console.log(a)
//에러메세지: 초기화전에 a에 접근할수없음

-----------------------------

for(let i = 1; i <5; i++){
console.log(i)
}
console.log(i)
//1234 까지 출력되고
//line4의 i는 정의되지 않는다고 에러메세지가 뜬다.

-----------------------------

let a = 1
console.log(a)
let b = 2
console.log(a)
//결과는 'a가 이미 선언이되었습니다' 라고  에러메세지가 뜬다.

결론 : var 쓰지말고 let을 사용하자 ^^ !

아래는 정리 참고 자료 링크이다

[자바스크립트] 변수 선언 방식 차이: var / let / const

curryyou.tistory.com

호이스팅 - 용어 사전 | MDN

developer.mozilla.org

호이스팅 설명 유튜브 영상

https://www.youtube.com/watch?v=fETYLCU2YYc&feature=emb_logo

첨부 이미지출처 : 한빛

728x90

저작자표시 비영리 변경금지

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

[JS] 22-05-30 자바스크립트 조건문 ☑ (0)	2022.06.02
[JS] 22-05-30 자바스크립트 연산자 ☑ (0)	2022.06.02
[JavaScript 생활코딩] 값으로서의 함수와 콜백 (0)	2022.06.01
[JavaScript -생활코딩] 유효범위 (0)	2022.06.01
[JavaScript -생활코딩] 정규표현식 (0)	2022.06.01

DOM이란 무엇인가?

전역변수와 지역변수

★ var 사용을 지양하고 let 사용 지향 해야 하는 이유 ★

호이스팅이란?

결론 : var 쓰지말고 let을 사용하자 ^^ !

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

티스토리툴바