웹 화면 구현 기본
window 객체
window['document']
document -> 화면을 담당하는 객체
window 안에 document 객체가 있는 것이다!
window.resizeTo().... 윈도우(브라우저) 사이즈를 리사이즈 하는 것이다.
tab이 여러개일 때에는 안된다. 그리고 우선 window.open()으로 열고 해야지 가능한 코드이다.
alert() : 악용되는 사례, 무한 반복 되는 경우도 있다. 바이러스 같은 경우.
alert의 경우에는 window를 앞에 사용하지 않고 생략해서 사용도 가능하다.
window는 엄청 중요한 객체이다! funcion 함수 () { ... } 콘솔 창에서 이렇게 정의하면 함수() 이것만 치면 콘솔에서 실행이 가능하다.
함수 안에서는 안되는데, 바깥에 window에 선언하면 불러오기가 된다. 이 이유는 다음에 더 자세히 다룰 예정.
doument 객체와 DOM
window.document이지만, 생략 가능
document를 치면, HTML 문서와 관련되어 있는 것을 알 수 있다.
js와 HTML은 원래 서로의 언어가 따로 있기 때문에 서로 알아듣지 못한다.
이것을 연결해 주는 것이 document이다. 여러가지 객체와 속성 메서드들이 존재한다.
document object model : HTML 태그들이 document js Object 이것들을 연결시켜주는 것!
자식 안에 자식... body안에 여러가지 태그들과 js Object들이 존재한다.
script 태그 사용법
|
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>숫자야구</title>
</head>
<body>
</body>
</html>
|
외부 파일을 script src로 html에 연결해서 구성하는 화면을 만들 수 있다.
JS로 HTML 태그 만들기
|
1
2
3
4
5
6
7
8
9
10
11
|
var body = document.body;
var word = document.createElement('div');
word.textContent = "끝말잇기"
var inputs = document.createElement('input')
document.body.append(inputs);
var btn = document.createElement('button')
btn.textContent = "입력";
document.body.append(btn);
|
html에 js로 새로운 태그를 만들어서 body에 추가한다.
태그를 js로 제어하는 모습이다. 이전에서 웹 프로그래밍에서 다뤘던 부분이므로 크게 어렵지 않아서 패스했다.
다음 강의는 이벤트 리스너 공부를 마지막으로 숫자 야구 프로그램을 제작하는 진도에 바로 돌입할 예정이다.
'Undergraduate Records' 카테고리의 다른 글
| [3회차] 주소창 대회 준비-2 : js 처리 (1) | 2020.01.16 |
|---|---|
| [3회차 계획] 주소창 대회 준비- 2 (0) | 2020.01.16 |
| 끝말잇기 게임 만들기 (0) | 2020.01.16 |
| [2회차] 대회 준비, UI 만들기 (0) | 2020.01.09 |
| [2회차 계획] 주니어 소프트웨어 창의 대회 준비 (0) | 2020.01.09 |
