5. 함수, onclick, onmouse, onfocus, onkey, Date(), Number(), Math, miniproject06

https://github.com/upcake/Class_Examples

교육 중에 작성한 예제들은 깃허브에 올려두고 있습니다. 

gif 파일은 클릭해서 보는 것이 정확합니다.

---

▲예제 1. 매개 변수, return, 재귀 함수, 전역 변수, 지역 변수

 - myFunc(x, y)에서 x와 y를 매개 변수라 하고 인수 값을 전달받아서 함수 식에 적용하는 역할을 한다.

 - 함수 내의 return은 함수에서 출력된 결과와 함께 함수가 실행된 행으로 되돌아가는 역할을 한다.

 - return 밑의 함수 내용은 작동하지 않는다.

 - 재귀 함수는 함수 내에서 자기 자신을 다시 부르는 함수를 말한다.

 - 전역 변수는 함수 밖에서 선언된 변수, 지역 변수는 함수 내에서 선언된 변수를 뜻한다.

 - 지역 변수는 함수 밖에서 쓸 수 없다.

 

 

▲예제 2 - 1. onclick, onmouseover, onfocus 활용하여 배경색 바꾸는 버튼 만들기

 - onclick="함수();" 클릭할 때 함수를 작동한다.

 - onmouseover="함수();" 마우스를 위에 올릴 때 함수를 작동한다.

 - onfocus="함수();"  키보드 초점이 맞춰졌을 때 함수를 작동한다.

 

▲예제 2 - 2. 버튼 작동 화면

 

 

▲예제 3 - 1. onmouseover, onmouseout

 - onmouseover="함수();" 마우스를 위에 올릴 때 함수를 작동한다.

 - onmouseout="함수();" 마우스가 밖으로 나갈 때 함수를 작동한다.

 

▲예제 3 - 2. 작동 화면

 

 

▲예제 4. onkeydown

 - document.onkeydown = function(e) {} 아무 키나 입력되었을 때 함수를 작동하게 한다.

 

 

▲예제 5. Date()

 - getMonth() : 현재 월 - 1

 - getDate() : 현재 일

 - getDay() : 현재 요일

 

 

▲예제 6. Number()

 - Number.MAX_VALUE : 표현 가능한 가장 큰 수

 - Number.MIN_VALUE : 표현 가능한 가장 작은 수

 - Number.NaN : 숫자가 아닌 경우의 표기

 - Number.POSITIVE_INFINITY : 양의 무한대 수 표기

 - Number.NEGATIVE_INFINITY : 음의 무한대 수 표기

 - parseInt() : 정수 타입으로 캐스팅하는데 숫자로 바꿀 수 있는 부분 중 정수부만 가져옴

 - parseFloat() : 실수 타입인 float 타입으로 캐스팅하는데 숫자로 바꿀 수 있는 부분 중 소수부만 가져옴

 

 

▲예제 7. Math

 - Math.max(a, b, c, d) : a, b, c, d 중 가장 큰 수

 - Math.min(a, b, c, d) : a, b, c, d 중 가장 작은 수 

 - Math.round(x) :  x를 정수로 반올림

 - Math.floor(x) : x의 소수부를 버림

 - Math.ceil(x) : x의 소수부를 올림, 페이징 기법에서 자주 사용한다.

 - Math.random() : 0부터 0.999... 까지의 임의의 수

 - Math.PI : 상수 PI

 

 

▲문제. 가위바위보 맞추기

▲문제. 작동 화면