자바스크립트는 뭐 다양한 기능이 존재하지만 기본적으로 HTML 태그의 id 값에 접근해서 DOM 객체를 생성한 뒤 해당 값에 접근하여 css, html text 값 등을 바꿀 수 있다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> button{ width: 100px; height : 50px; font-size: 18pt; } </style> <body> <p id="area">안녕하세요</p> <button onclick="document.getElementById('area').innerHTML='자바스 립트'">내용바꾸기</button> <p></p><br> <hr> <button onclick="document.getElementById('myIng').src='../images/im age02.PNG'">on</button> <button onclick="document.getElementById('myIng').src='../images/im age01.PNG'">off</button> <img src="../images/image01.PNG" id="myIng"> </body> </html> Colored by Color Scripter |
위 예제처럼 말이다.
저 방식은 html 태그 안에 직접 써놓는 inline 방식인데 저렇게 써도 상관은 없지만 유지보수 측면에서 script 영역을 따로 설정하는 것이 좋다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> button{ width: 100px; height : 50px; font-size: 18pt; } </style> <body> <p id="area">안녕하세요</p> <button onclick="document.getElementById('area').innerHTML='자바스크립트'">내용바꾸기</button> <p></p><br> <hr> <button id="onBtn">on</button> <button id="offBtn">off</button> <img src="../images/image01.PNG" id="myIng"> </body> </html> <script> var onBtn =document.getElementById("onBtn"); var offBtn =document.getElementById("offBtn"); var myImg =document.getElementById("myIng"); onBtn.onclick=function () { myImg.src ="../images/image02.PNG"; }; offBtn.onclick=function () { myImg.src ="../images/image01.PNG"; }; </script> Colored by Color Scripter |
위 소스가 script 영역을 따로 설정해서 하는 방식이다. 보통 위와 같은 방법을 많이 쓴다고 한다.
이와 같이 자바스크립트는 기본적으로 해당 객체를 만들어 접근하고 값을 수정하고, 애니메이션을 넣는 등의 효과를 넣어줄 수 있다.
즉 객체를 갖고 온다는 측면에서 웹에서 사용하는 객체 기반의 스크립트 프로그래밍 언어라고도 말할 수 있다. 이게 매우 중요한 개념이다.
그리고 자바스크립트는 인터프리터 개념이다. java 같은 compile 방법이 아니라(한번에 번역을 해서 진행) 한줄 한줄 실행하는 방법으로 진행한다.
또한 기본적으로 window는 최상위 객체이다. java에서 최상위는 object라고 하면 여기선 window가 최상위 객체이다.
다른 특징은 함수안에 함수가 존재할 수 있고 또한 변수가 함수를 담을 수도 있다. 이것도 객체지향 프로그래밍이라서 그러하다. 자바스크립트는 그냥 거의다 객체라고 보면 되기 때문에 이러한 것들이 가능하다.
예를 들어
<button id="onBtn">on</button>
var onBtn =document.getElementById("onBtn");
onBtn.onclick=function () {
myImg.src ="../images/image02.PNG";
};
를 봐보자. html 코드에 button을 만드는데 id 값이 onBtn이다.
스크립트 영역에서 document 객체를 이용해 html의 아이디 값을 가지고 온다. 그리고 해당 객체를 통해 함수를 만든다!
onclick이라는 것은 클릭 했을때 나오는 이벤트 이고 클릭하게 되면 해당 함수가 실행된다.
document객체는 다음과 같다.
웹 브라우저가 HTML 문서를 적재하면 document 객체가 되는데 이것을 가지고 올 수 있는 것이 document 객체이다. 이 객체는 HTML 태그들 중 최상위 노드이며
document.write() //브라우저에 글을씀
document.getElementsByClassName() //클래스 이름에 해당하는 객체를 가지고옴
document.getElementsByName() //이름에 해당하는 객체를 가지고옴
등의 기능을 담당한다.
또한 스타일에 대한 접근을 하려면
var demo =document.getElementById('demo');
var btn =document.getElementById('btn');
btn.onclick=function () {
//console.dir(demo.style);
demo.style.fontSize ='35pt';
demo.style.color ='red';
demo.style.border ='1px solid blue';
};
처럼 style에 접근을 해서 color, border 등을 바꿔 줄 수 있다.
따라서 자바스크립트를 잘 하려면 css 구조도 어느정도 파악하고 있어야 한다. display를 none으로 해서 화면을 없애 준다거나의 등등 다양한 기능을 넣어 줄 수 있기 때문이다.
그리고 script 영역, inline 영역에 다 써줄 수도 있지만
미리 script 영역에 함수를 만들어서 클릭시 호출 할 수도 있다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <script> function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } </script> </head> <body> <h1>A Web Page</h1> <p id="demo">A Paragraph</p> <button type="button" onclick="myFunction()">Try it</button> </body> </html> Colored by Color Scripter |
위와 같이 말이다.
클릭시 myFunction()이라는 함수를 호출한다.
그리고 외부 JS 파일을 만들어서 사용할 수도 있다.
처럼 외부에 JS파일을 만든다. 해당 파일 안에는
function myFunc(){
alert('myFunc 메소드 호출');
}
의 내용이 담겨 있다.
그리고 아래와 같이 호출 할 수 있다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="Study_6_14.js"></script><!--외부 파일을 링크 --> <script> myFunc(); //외부파일에 선언된 function을 호출. </script> <button onclick="myFunc()">클릭해보렴</button> <!-- 외부 파일 함수 호출 --> </body> </html> Colored by Color Scripter |
<script src>를 통해 외부 js파일을 갖고와서 사용하면 되는 것이다.
여기까지 기초 정리 첫번째 끝.
'javascript' 카테고리의 다른 글
| 자바스크립트 NaN, isNan() 메소드 (0) | 2017.08.16 |
|---|---|
| 자바스크립트 이벤트(mouseover, mouseenter, onclick, over시 이미지 변경), 문자열 (0) | 2017.08.16 |
| 자바스크립트 계산기 만들기 (0) | 2017.08.16 |
| 자바스크립트 object, null, undefined, 함수(function) (0) | 2017.08.16 |
| 자바스크립트 기초(연산, 변수, 비교(==, ===), innerText, innerHTML) (0) | 2017.08.16 |
