자바스크립트는 <head>와 <body>태그안에 작성할 수 있습니다.
1. <body>사이에 작성
<body>안에 스크립트를 넣어보겠습니다.
<!DOCTYPE html>
<html>
<body>
<p id="demo">A Paragraph</p>
<script type="text/javascript">
function changeText(){
document.getElementById("demo").innerHTML="My First JavaScript";
}
</script>
<input type="button" onclick=" changeText()" value="click"></input>
</body>
</html>
id값을 demo로 주었는데 거기에 태그안에 있는 텍스트를 교체해 주는 예제입니다.
2.<head>사이에 작성
<head>사이에 스크립트를 작성해도 됩니다.
함수부분을 상단으로 올려보겠습니다.
역시 같은 결과를 나타냅니다.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function changeText(){
document.getElementById("demo").innerHTML="My First JavaScript";
}
</script>
</head>
<body>
<p id="demo">A Paragraph</p>
<input type="button" onclick=" changeText()" value="click"></input>
</body>
</html>
3.외부파일을 별도로 작성
이번에는 외부에 자바스크립트를 써 보겠습니다.
먼저 html파일을 이렇게 작성해 줍니다.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="where3.js"></script>
</head>
<body>
<p id="demo">A Paragraph</p>
<input type="button" onclick="changeText()" value="click"></input>
</body>
</html>
그리고 외부에 where3.js 라고 별도로 자바스크립트 파일을 작성합니다.
function changeText(){
document.getElementById("demo").innerHTML="My First Javascript";
}
역시 똑같은 결과를 보여줍니다.
'WEB_TECH > javascript' 카테고리의 다른 글
| String객체 (0) | 2012.09.13 |
|---|---|
| javascript 객체기반언어 (0) | 2012.08.17 |
| Try...Catch 구문 (0) | 2012.08.17 |
| 이벤트 (0) | 2012.08.17 |
| 자바스크립트 함수 Function (0) | 2012.08.17 |
| pop up boxes (0) | 2012.08.17 |
| 반복문 (0) | 2012.08.17 |
| 조건문 (0) | 2012.08.17 |
| 연산자 (0) | 2012.08.17 |
| 자바스크립트 어떻게 작성할까요? (0) | 2012.08.17 |