Javascript [ Function ]

button 태그

• 버튼 태그
• event : onclick(클릭), onmouseover(버튼위로 올리면), ondblclick(더블클릭)

<button type="button" onclick="myFunction()">클릭하세요.</button>
<button type="button" onmouseover="myFunction()">마우스를 올리세요.
</button>
<button type="button" ondbclick="myFunction()">더블클릭하세요.</button>

Function

• script 내의 혹은 js 파일 내의 생성
  주의. 함수명은 명령어를 입력하면 안된다!!

function 함수명(){
	document.getElementById("id명").innerTEXT="글자~~";
	document.getElementById("demo").innerHTML
	="<span style='color:red;'>글자</span>";
}

• document : 문서 전체
• getElementById : 지정한 이름
• innerTEXT : 글자 표시
• innerHTML : 글자의 HTML 스타일 적용 가능

"<span style='color:red;'>글자</span>"
- "<></>" 이면 style 안 은 ' (홑 따옴표)를 사용해야 한다.
- '<></>' 이면 style 안은 " (쌍 따옴표)를 사용해야 한다.
같은 등호를 사용하고 싶을 경우 \을 붙여서 사용하면 된다.

---

script 의 위치

1. head 내의 위치
   -> html의 해석순서가 위에서 부터 내려오므로 함수만 적용 가능하다.
   -> window.onload 를 사용할 경우 함수 외에도 적용 가능

2. body 맨 마지막의 위치

<script type="text/javascript">
	function 함수명(){~~~}
</script>

3. html 파일과 분리된 외부경로(확장자 .js) 로 저장
   -> head 와 body 위치 상관없이 호출 가능하다.

<script type="text/javascript" src="상대주소"></script>

---

Window.onload

• 브라우저에 페이지 로딩이 끝나면 자동적으로 호출되어지는 것
  자동적으로 호출되어 실행해야 할 명령어들을 function( ) { } 안에 기술
  -> script 내 또는 js 파일 내의 선언 가능

window.onload = function(){
	~~~~
}

---

Function 함수 내 메소드

document.write()

• 기존 내용을 모두 지우고 새로운 문서를 작성

function 함수명(){
	document.write("")
}

Window.alert() / alert()

• 버튼 클릭 시 알림창이 뜬다.
• 일반적으로 window 는 생략된다.

funciton 함수명(){
	window.alert("알림창 글씨");
  	/* 또는 */
  	alert("알림창 글씨");
}

console.log()

• 확인용 알림창
• F12 (개발자 도구) 를 눌러서 콘솔에서 확인하는 것

함수의 종료

• return;

---

정리

• 01_where_to
  -> 01_javascript_in_head.html, 02_javascript_in_body.html, 03_javascript_external_file.html, 04_window_onload_1.html, 05_window_onload_2.html, 03.js, 05.js

• 02_output
  -> 01_innerHtml.html, 02_document_write.html, 03_window_alert.html, 04_console_log.html, 01.js, 02.js, 03.js, 04.js