DOM(Document Object Model)
- 문서에 대한 모든 객체를 담고있는 객체
- 요소에 대한 접근
- getElementsByTagName //태그 이름
- getElementsById // id 이름
- getElementsByClassName // 클래스 이름 등으로 가져올 수 있다
BOM(Browser Object Model)
- 브라우저에 대한 모든 내용을 담고 있는 객체
- 뒤로가기, 현재 열려있는 정보를 객체화 시킨다.
우선 제일먼저 해야할 것은 기능을 활성화시키는 것이다.
#cd /var/www/html 으로 이동한 후 #vi JavaScript.html 을 설정하여 안에 들어가서 편집한다.
Apache의 홈디렉토리인 var/www 아래에 html으로 이동한 수 #vi JavaScript.html 로 편집하는 것이다.
기본적인 문서 형식으로 작성해보자,
java와 second java를 출력한다.
url을 입력할 때 ip주소 + vi의 위치를 같이 입력하면 내가 vi에 입력했던 것이 출력된다.
#vi JavaScript.html에서 편집을 했으니 위에 주소에도 vi의 위치를 입력한다.
글로하면 이해가 좀 어려우니 사진을 통해 알아보자
여기까진 그냥 문서 내용을 출력하는거라 별 어려움이 없을것이다.
하지만 이제 기능을 추가하는 것을 알아보자.
우선 가장 기본적인 기능을 알아보자
function mouse_over() 로 인해 <h1>java</h1>인 java에 마우스를 갖다 댈 경우 OnMouseOver 이라는 문장이 출력된다.
function mouse_out()로 인해 <h1>java</h1>인 java에 마우스를 뗄 경우 OnMouseOut 이라는 문장이 출력된다.
<script></script>에서 마우스 기능과 alert를 설정한 후,
<body></body> 에서 그 기능만 그대로 가져와 java 라는 문장에 기능을 부여한것이다.
그래서 java라는 출력값에 마우스를 갖다 댈 때와 뗄 때 기능이 부여되는 것이다.
주의할점은 메소드 같은 경우에는 대소문자를 구별하니까 신경써야 한다.
getElementsByTagName 는 태그이름을 가져올 수 있다. 즉 h1이라는 태그에 기능을 부여한다는 의미이다.
x[0].setAttribute("Style","color:red"); //마우스를 갖다 대면 글자 색이 빨간색으로 변함
x[0].innerText = "OnMouseOut!!!"; //마우스를 갖다 대면 글자가 OnMouseOut로 변환.
x[0] 이 가르키는건 <h1>의 배열같은것. 한개라서 0이다.
x= document.getElementsByTagName('h1'); //태그이름을 가져온다.
[0].setAttribute("Style","color:blue"); //마우스를 떼면 글자가 파란색.
위에 기능에서 문장 하나만 더 추가한것이다.
x[0].innerText = "OnMouseOut!!" 을 통해 java라는 출력값에 마우스를 갖다대면
글자가 OnMouseOut!! 으로 바뀐다.
<h1 onmouseover="mouse_over()" onmouseout="mouse_out()"> java</h1>에서 기능을 부여하는게 아니라 불러오는것
아깐 마우스의 기능을 부여했다면 이것은 키보드의 기능을 부여하는것이다
화살표 이동방향 키를 눌렀을 때 기능이 부여되는 것이다,
방향키를 누르면 저렇게 숫자가 나온다.
이건 직접 입력할 수 있도록 기능을 부여한것이다.
'Web 모의해킹' 카테고리의 다른 글
| 웹보안) 데이터베이스 개념 및 연동 (0) | 2018.03.08 |
|---|---|
| 웹보안) 사용자 인증 (0) | 2018.03.08 |
| 웹보안) GET 방식을 이용한 웹 브라우저 (0) | 2018.02.21 |
| 웹보안) 리눅스를 이용한 문서 실행시키기 (0) | 2018.02.13 |
| 웹보안) HTML (0) | 2018.02.13 |