티스토리 뷰

JavaScript

Javascript: function, events

carrot62 2020. 7. 27. 22:53

JavaScript 함수

함수 형식:

function name(parameter1, parameter2, parameter3) {	//parameter 값이 없을 경우 비워둬도 된다
  // code to be executed
}
  • return
  • functionname: 함수 object을 의미하고
        이 값을 출력 할 경우 함수 안에 정의 되어 있는 내용이 그대로 출력된다
  • functionname( ): 함수의 결과를 의미한다
  • object 안에서도 함수를 정의 할 수 있다 (object method)
// object method을 참조할 때:
objectName.methodName()

JavaScript Events

이벤트 형식:

<element event='some JavaScript'>
  • onclick
  • onchange: HTML element가 바뀌었을 때
  • onmouseover
  • onmouseout
  • onkeydown: 사용자가 키보드 키를 눌렀을때
  • onload: 브라우저가 페이지 로딩을 다 끝낸 후에
<!DOCTYPE html>
<html>
<body>

<p>Click the button to display the date.</p>

<button onclick="displayDate()">The time is?</button>	<!--함수를 이용해서 action을 정의하는 경우-->	

<script>
function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

<p id="demo"></p>

</body>
</html> 

<div onmouseover="this.style.backgroundColor='red'">myDIV.</div>
<!-- style을 바꿀수도 있다-->
  • JS에서 style property를 작성할 때 font-size: fontSize, background-color: backgroundColor
    이런 식으로 "-"를 생략하고 다음 문자를 대문자로 바꾼다

 

'JavaScript' 카테고리의 다른 글

JavaScript BOM  (0) 2020.07.29
JavaScript: Element의 동적 추가와 삭제  (0) 2020.07.29
JavaScript HTML DOM: Event listener  (1) 2020.07.28
JavaScript forms  (0) 2020.07.28
JavaScript 기초  (0) 2020.07.27