I. 브라우저 플랫폼
1. 브라우저 플랫폼
(1) 브라우저 플랫폼
언어는 플랫폼으로 프로그램 만들기 -> 플랫폼은 브라우저 -> 브라우저 직접 이용할수 없어서, 이용 도와주는 API를 이용한다 -> DOM BOM CSSOM 을 이용함 [하단 보충 참고]
<이용관계>
언어(JavaScript) -> API(DOM) -> 플랫폼(브라우저)
이 중 DO CSS가 UI(동적문서)이다. 어떤 프로그램도 사용자와 상호작용위한 인터페이스가 중요 이것이 GUI다
브라우저는 윈도우 형태 어플만들수 잇는 GUI제공해주는것임 (과거 윈도우 시스템)
사용자 입출력 처리하기위해 DO CSS가 존재한다.
틀을 제공해주는 객체가 window객체이다.
window는 다양한 것들이 있는데, 그 중에서 화면에 사용자에게 입출력 받을수있는것이 document객체이다.
통객체가 아니라 안에 수 많은 태그가 존재한다.
(2) 최상위객체인 window객체 : window객체의 Members 사용자와 상호작용을 위한 기본 도구
[DOM BOM 차이 필수! : 보충 참고]
메소드와 프로퍼티가 있다.
메소드의 경우 한국에서 많이 이용하는 것이 alert() / prompt() /confirm()이 있다.
1) 대화상자를 이용한 출력 alert() : 덧셈결과를 alert()로 출력하기
2) 대화상자를 이용한 입력 prompt()
사실 7이 아니라 3,4 가 따로나옴 왜냐하면 문자열로 받음
3) 데이터 형식 변환하기
문자 <->숫자
바꾸는것은 언어가제공? 플랫폼이제공? => 언어가 제공함!
컬렉션은? => 언어(why: CPU메모리로 충분)
그래픽, 출력등? => 외부 API 즉 플랫폼 API이용해야함
MDN에서 parseInt()이용하면 됨 그러면 숫자로 바뀜
x = parseInt(x);
다시 x에 넣기 가능
parseInt("abc") // Returns NaN
parseInt("12abc") // Returns 12
이런경우 한줄로 있으면 sbustring 쓸 필요없이 숫자만 자동으로 나온다. (레퍼런스 꼭 보자)
3) 게시글 삭제를 확인하기 : 확인을 위한 대화상자 confirm
클릭에 따라 true false가 전달된다.
II. 이벤트 기반의 윈도우 프로그래밍
1. 스크립트 코드의 작성 영역 : 또 다른 스크립트 코드 영역
스크립트 코드는 두가지의 경우 실행이 가능하다
<script>영역이나 <input onXXX= " "/>에서 실행할 때 이다.
특히 onXXX에서 이곳이 이벤트 영역
그런데 이곳 영역의 코드가 길어지면은 hmtl css js코드가 혼동 될수도 있음
그래서 이벤트 기반 프로그래밍은 이렇게 하는거보다 더 바람직한 방법이 있음
III. 페이지 로드 이벤트
1. 이벤트와 함수 호출 : 코드를 나누어 작성하기
button 이 길다.
html사이 스크립트 코드 찾기 힘들어서 JS영역 따로 준비하는게 나음
그래서 위와 같이 함수화 시켜서 별도로 호출이 가능한 방법이 존재한다.
가독성 유지보수에 용이할수 있다.
2. 스크립트 작성방식 : 버튼 객체의 value속성 이용하기
그러나... 문제가 존재한다. 코드가 두군데 흩어져있다.
흩어져있다 함은 찾아나서야할 범위가 넓다.
그렇다면...
html은 각 태그 식별위해서 id라는 속성으로 이름을 부여가 가능하다.
문서객체가 만들어질때 id로 접근할수있지않을까?
btnPrint 객체 이름 이용해서 속성의 value에 입력 출력 가능함,
input이 메모리 올라가면 id를 매개해서 다른 것으로 접근할수도 있지않을까?
이게 가능할까? 가능함
그럼에도 불구하고 먼거리에 있다는것은 변치않는다.
care 범위가 멀다는 점...
그러나 이런 경우라도 함수 외부에서 btnPrint.value = 1; 을 이용해서 함수 태그에 함수 선언을 하지 않더라도,
함수에 접근하는 방법이 있을 수있지 않을까? (페이지 실행할 때 가능하게끔하는 ...)
즉 함수 밖에서 가능하다면, 태그에서 함수를 아예 빼버리고 위에서 정의하는 방법을 보자
안의 btnPrint.value = 1; 는 클릭할 때 실행하는 코드이고
밖의 btnPrint.value = 1; 는 페이지 열릴 때 실행되는 코드이다. 실행되는지 확인해보자
그러나 안된다.
스크립트 코드의 위치에 따라서 메모리 올라갔는지 여부라서, 함수 뒤에 있으면 메모리에 없다
함수앞에 있으면 가능하다.
3.자바스크립트를 위한 입/출력객체 : HTML요소들을 객체화 하는 로드과정이 포함 됨
메모리와 화면이 동기화 되는것이고, 메모리에 하는것을 자바스크립트로한다.
4. 스크립트 작성 방식 : 객체 생성과 사용 시점의 문제
(1) load
메모리 읽혀지는 과정에서 아직 load되지 않은 것을 한다고 문제 됐는데,
스크립트를 가장 아래에 할수도 있지만 , 우리는 이벤트 기반으로 작성하는 것을 좋아한다.
자기가 가지고 있는 자식들이 load 됐는지 보든 것이 있다
이것이 onload 이다.
로드 됐을 때 실행하는 것으로 보는것이다.
(2) body load VS window load
body load는
코드가 올라가면 바디가 로드 되었다고 한다.
바디는 CSS,JS 관심없다 body안에 html들이 메모리 올라갔는지만 관심임
window는 문서의 리소스가 모두 로드 되었는지에 관심이 있다.
우리는 바디보다는 window onload 속성 이용 주로한다.
앞서 문제를 해결하기 위해서는 window onload속성을 이용한다
(3) window load
window.onload = function(){
btnPrint.value = 1;
}이거는 로드 다되고 실행하는 것이다. 그래서 문제없이 된다.
아까 보다는 개선되었다.
5.스크립트 작성 방식 : 이벤트 속성의 코드 영역
위 태그에 onclick 없애는 것은 아래처럼한다.
window.onload = function(){
btnPrint.onclick = function() {
printresult();
}
}
이제 태그안에 지우고 여기에 넣어서 가능하다.
6.스크립트 작성 방식 : 함수 호출하기와 위임(대입)하기
window.onload = function(){
btnPrint.onclick =
printresult();
}이렇게 하면 되는가? 이거는 안된다.
빼는지 여부는 큰 차이가있다.
원래 형태는 함수의 참조변수가 대입되는 것으로서 printresult()가 실행되지 않는다.
그런데 본 형태는 실행해서 결과 값이 onclick에 대입된다.
printresult() 를 제거하면 변수에 불과하다.
window.onload = function(){
btnPrint.onclick =
printresult; //() 제거
}이렇게 하면 함수를 대입하는것이 된다.
이렇게 하는 것이 바람직하다.
즉 () 넣으면 안된다.
위아래 왔다갔다 하기 어렵다 외부파일로만들자
6.스크립트 외부파일
view 와 control 코드 분리 : dom.html 과 dom.js 파일
<!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>
<script src="./dom.js"></script>
<body>
</body>
</html>연줄이 끊어지는데 이러기 위해서 별도로 src를 해준다.
IV. 다중 초기화 함수 처리방법
파일나눴다는 것은 여러의미있다 스크롤 길어서 뿐만아니라
재사용, 집중화 목적으로 나눈다.
1. view 와 control 코드 분리 : dom.html 과 dom.js 파일 각 파일의 초기화 코드가 충돌하는 문제
라이브러리 여러개를 들고와서 window.onload에 두번 함수가 들어간다
실행상 마지막만 초기화 가능하다.
이런 경우 event에 함수 대입시에는 set 뿐만 아니라 add 방법도 있다.
set은 대체될수있다. 즉 전역객체 속성에 대입하면 대체할때 문제된다.
전역객체 이벤트에서는 이렇게 쓰면안된다.
나 혼자 독식하려고 세팅하면 안된다. 이런경우 이벤트 리스너를 이용한다.
위이미지보다 아래이미지처럼 해야한다
위의 경우에는 실컷 다 add해도 또 set해버려서 대체해버리게된다.
window.addEventListener("load", function(){
btnPrint.onclick = printresult;
}2. 전역공간
페이지에서 나혼자 쓰는게 아니면 전역공간에 두는것은 바람직하지 않음
내꺼 쓰세요 다만 충돌안나게 하세요 라는 건 녹록치않다.
그래서 지역화가 필요하다 폐쇄된공간이 바람직하다.
printSum()을 함수안에 넣으면 지역내에서만 잘 쓸수있다.
window.addEventListener("load", function(){
btnPrint.onclick = printresult;
function printSum(){
var x = prompt(' x : ');
var y = prompt(' y : ');
x = parseInt(x);
y = parseInt(y);
console.log(x+y);
}
});이렇게 printSum()을 함수 안에 넣으면 여기서만 이용시 유용하게 가능하다.
1. 보충
(1) DOM
What (정의) : 웹문서 로드 후 파싱(디코딩)하고, 브라우저가 이해할수 있는 구조로 구성 후, 메모리에 올리는 것을 의미한다.
Why (존재이유) : 웹문서(텍스트)자체는 브라우저가 이해할 수 없기 때문에 브라우저(플랫폼)가 용이하게 웹문서를 읽게 하기위해서
How (방법) : 웹문서의 Element, Attribute, Text 각각을 객체(언어)로 만들고, 객체의 부자관계를 표현하는 트리구조로 구성한다.
(2) DOM API
What (정의) : 자바스크립트 객체로 제공된 것으로 프로그래밍언어가 자신에 대해서 접근 수정이 가능하다.
Why (존재이유) : 정적인 웹페이지를 동적인 웹페이지로 변경하기 위해서
How (방법) : 메모리상에 올라간 DOM을 변경해야한다.
e.g. (예) :
(3) BOM
What (정의) : 웹 브라우저관련 객체들의 집합을 의미한다
Why (존재이유) : 웹브라우저의 객체들을 조작하기 위해서이다.
How (방법) : window객체로 alert, confirm등의 메소드에 접근이 가능하다
e.g. (예) :
(4) DOM VS BOM
두개의 가장 큰 차이는 DOM은 웹문서 객체에 대한 제어,변경/
BOM은 브라우저관련 객체에 대한 제어,변경을한다
2. 회고
'배움 __IL > addtionalFrontEnd' 카테고리의 다른 글
| TIL : 웹퍼블리싱 HTML 4회 (8,9) (0) | 2023.01.07 |
|---|---|
| TIL : 웹퍼블리싱 HTML 3회 (6,7) (0) | 2023.01.06 |
| TIL : DOM 2회 (0) | 2023.01.05 |
| TIL : 웹퍼블리싱 HTML 2회 (5) (0) | 2023.01.04 |
| TIL : 웹퍼블리싱 HTML 1회 :SIMPLE (1~4) (1) | 2023.01.04 |