01_js.js
// 메세지 출력 함수
function goMessage(mode){
alert("외부 함수 호출 잘 되나요?");
// id가 p1인 태그 찾기..
// 문서 중에 요소가 id인 이름이 p1인 것을 찾기
// document.getElementById("p1").innerHTML = "임의의 값 넣기!"
// document.getElementById(mode).innerHTML 로 바꿔주면
// p1 누르면 p1 실행, p2 누르면 p2 실행
document.getElementById(mode).innerHTML = "임의의 값 넣기!" + mode;
}
01_javascript
<!DOCTYPE html>
<html>
<head>
<title>::: 01_javascript :::</title>
<script type = "text/javascript">
// 메세지 출력 함수 생성하기
function goMessage(mode){
// alert("함수가 호출되었습니다.");
// id가 p1인 태그 찾기..
// 문서 중에 요소가 id인 이름이 p1인 것을 찾기
// document.getElementById("p1").innerHTML = "임의의 값 넣기!"
// document.getElementById(mode).innerHTML 로 바꿔주면
// p1 누르면 p1 실행, p2 누르면 p2 실행
document.getElementById(mode).innerHTML = "임의의 값 넣기!" + mode;
}
</script>
</head>
<body>
<h3>01_JavaScript</h3>
<p id = "p1">
이곳에 자바스크립트 함수를 이용해서 내용 입력1
</p>
<p id = "p2">
이곳에 자바스크립트 함수를 이용해서 내용 입력2
</p>
<!-- 아래 버튼 클릭하면 goMessage() 함수 호출
: 호출 후에 안내창을 통해 "호출되었습니다" 띄우기 -->
<button type = "button"
onclick = "goMessage('p1')">p1 입력</button>
<button type = "button"
onclick = "goMessage('p2')">p2 입력</button>
</body>
</html>
02_javascript
<!DOCTYPE html>
<html>
<head>
<title>::: 02_javascript :::</title>
<script type = "text/javascript"
src = "./js/01_js.js"></script>
</script>
</head>
<body>
<h3>02_JavaScript</h3>
<p id = "p1">
이곳에 자바스크립트 함수를 이용해서 내용 입력1
</p>
<p id = "p2">
이곳에 자바스크립트 함수를 이용해서 내용 입력2
</p>
<!-- 아래 버튼 클릭하면 goMessage() 함수 호출
: 호출 후에 안내창을 통해 "호출되었습니다" 띄우기 -->
<button type = "button"
onclick = "goMessage('p1')">p1 입력</button>
<button type = "button"
onclick = "goMessage('p2')">p2 입력</button>
</body>
</html>
03_javascript
<!DOCTYPE html>
<html>
<head>
<title>::: 03_javascript :::</title>
</head>
<body>
<h3>자바스크립트로 텍스트 작성하기</h3>
<!-- 자바스크립트로 작성하기 -->
<!-- write(): 텍스트 작성, 태그 적용, 연산 가능 -->
<script type = "text/javascript">
document.write("내용을 작성합니다.");
document.write("<br/>줄바꿈 되나요?");
document.write("<br/>");
document.write(10 + 20);
document.write("<br/>");
document.write("<input type = 'test' value = 'test'>");
</script>
<br/>
<!-- onclick 이벤트를 통해 내용 작성하기 -->
<button onclick = "document.write('내용 작성!')">클릭!</button>
<br/>
<p id = "p1">여기에 innerHtml 내용 넣기</p>
<script type = "text/javascript">
document.getElementById("p1").innerHTML = 10 * 10;
</script>
</body>
</html>'HTML + CSS + JavaScript > JavaScript' 카테고리의 다른 글
| [JavaScript 기초] (6) (0) | 2023.03.08 |
|---|---|
| [JavaScript 기초] (5) (0) | 2023.03.08 |
| [JavaScript 기초] (4) (0) | 2023.03.08 |
| [JavaScript 기초] (3) (0) | 2023.03.06 |
| [JavaScript 기초] (2) (0) | 2023.03.06 |