함수(function)
- 동작해야 할 목적대로 명령을 묶어놓은 것
- 자바스크립트에는 이미 여러 함수가 만들어져 있어서 가져다 사용할 수 있다.(alert( )나 write( ))
함수의 선언 및 호출
- 함수는 호출하지 않으면 실행되지 않고, 호출시에만 실행된다.
- 함수의 매개변수 타입은 굳이 적지 않아도 된다.(js는 동적타입이기 때문에 변수에 어느타입이나 다 들어갈 수 있다)
<script>
var num;
document.write(num, "<br/>"); // undefined
var num1 = 10;
document.write(num1, "<br/>"); // 10(숫자형)
var num2 = true;
document.write(num2, "<br/>"); // true(논리형)
var num3 = "number";
document.write(num3); // string
</script>
예제) 버튼을 누르면 gugudan 함수 실행
예제) (1)함수명이 없는 이벤트 생성, (2)innerHTML로 선택자의 내용 변경
<body>
<input type="button" value="click1" onclick="gugudan(5)"/>
<input type="button" value="click2" id="btn"/>
<div id="result"></div>
<script>
// btn이 생성되고 나서 실행됨. 선택자를 선택하고 변수에 넣어주기
var btnClick = document.querySelector("#btn")
btnClick.onclick = function() { // 함수명이 없는 이벤트(변수에 바로 넣고 실행)
document.getElementById("result").innerHTML = "<h1>구구단</h1>";
} // innerHTML로 선택자의 내부에 구구단 <h1>을 추가했다.
function gugudan(dan) {
var gugu="";
for(var i=2; i<=9; i++) {
gugu += dan + "+" +i+ "=" + dan*i + "<br/>";
}
//document.write(gugu); -> document.write는 새로운 페이지로 이동
document.querySelector("#result").innerHTML = gugu;
} // innerHTML로 선택자의 내부에 gugu 함수를 추가했다. 새로운 페이지로 이동 xx
</script>
</body>
</html>
이벤트(Event)
- 웹 브라우저나 사용자가 행하는 동작
- 웹 문서 영역안에서 이루어지는 동작만 가리킴
[마우스 이벤트]
| onclick | 사용자가 HTML요소를 클릭할 때 이벤트 발생 |
| ondbclick | 사용자가 HTML요소를 더블클릭할 때 이벤트 발생 |
| onmouseover | 마우스 포인터가 요소로 옮겨질 떄 이벤트 발생(하위 객체도 각각 마우스오버 이벤트 발생) |
| onmouseout | 마우스 포인터가 요소를 벗어날 때 이벤트 발생(하위 객체도 각각 마우스오버 이벤트 발생) |
| onmousenter | 마우스오버시 하위 객체가 별도로 이벤트가 발생하지 않음(하위객체에 영향 주지 않음) |
| onmouseleave | 마우스아웃시 하위 객체가 별도로 이벤트가 발생하지 않음(하위객체에 영향 주지 않음) |
| onmouseup | 사용자가 요소 위에 놓인 마우스버튼에서 손을 땔 때 이벤트 발생 |
| onmousedown | 사용자가 요소 위에서 마우스 버튼을 눌렀을 때 이벤트 발생 |
| onmousemove | 사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트 발생 |
[폼(form) 이벤트]
| onblur | 폼 요소에 포커스를 잃었을 떄 이벤트 발생 |
| onfocus | 폼 요소에 포커스(마우스커서)가 놓였을 떄 이벤트 발생 |
| onsubmit | submit 버튼을 클릭했을 때 이벤트 발생 |
| onreset | 폼이 리셋되었을 때 이벤트 발생 |
| onchange | 목록이나 체크상태 등이 변경되면 이벤트 발생(값을 넣고 포커스가 다른 곳으로 옮겨지면 발생) |
[키보드 이벤트]
| onkeyup | 사용자가 키에서 손을 땔 때 이벤트 발생(텍스트가 입력된 후 이벤트 실행) |
| onkeydown | 사용자가 키를 누르는 동안 이벤트 발생(텍스트가 입력되기 전 이벤트 실행) |
| onkeypress | 사용자가 키를 눌렀을 때 이벤트 발생 |
[문서 로딩 이벤트]
| onabort | 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트 발생 |
| onerror | 문서가 정확히 로딩되지 않았을 때 이벤트 발생 |
| onload | 문서 로딩이 끝나면 이벤트 발생 |
| onresize | 문서 화면 크기가 바뀌었을 때 이벤트 발생 |
| onscroll | 문서 화면이 스크롤되었을 때 이벤트 발생 |
| onunload | 문서에서 벗어날 떄 이벤트 발생 |
[마우스 이벤트 예제]
| onmouseover | 마우스 포인터가 요소로 옮겨질 떄 이벤트 발생(하위 객체도 각각 마우스오버 이벤트 발생) |
| onmouseout | 마우스 포인터가 요소를 벗어날 때 이벤트 발생(하위 객체도 각각 마우스오버 이벤트 발생) |
| onmousenter | 마우스오버시 하위 객체가 별도로 이벤트가 발생하지 않음(하위객체에 영향 주지 않음) |
| onmouseleave | 마우스아웃시 하위 객체가 별도로 이벤트가 발생하지 않음(하위객체에 영향 주지 않음) |
1. html 파일
1) mouseover와 mouseout이 중첩되어 있을 때
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mouse</title>
<style>
body{width:730px;}
#d1{height:200px; padding:30px; background:pink;}
#d2{height:100px; padding:20px; background:beige;}
#h1 {background:lightblue; text-align: center; padding:10px;}
</style>
</head>
<body>
<div id="d1" onmouseover = "console.log('마우스오버')" onmouseout = "console.log('마우스아웃')">
<div id="d2">
<h1 id="h1">마우스 오버</h1>
</div>
</div>
</body>
</html>
- d1에서 안쪽d2와 h1에 들어갈 때마다 mouseover, mouseout 이벤트가 발생된다.
- d1에서만 mouseover,mouseout이벤트를 정의했지만 그 밑에 자손요소들도 모두 이벤트가 발생되었다.
2) mouseenter와 mouseleave이 중첩되어 있을 때
<script>
var cnt = 0;
function enterTest(){
document.querySelector("#h1").innerHTML = "마우스 오버("+ cnt++ +")";
}
</script>
</head>
<body>
<div id="d1" onmouseenter = "enterTest()" onmouseleave = "console.log('mouseleave 이벤트 발생')">
<div id="d2">
<h1 id="h1">마우스 오버</h1>
</div>
</div>
</body>
</html>
- d1에서만 mouseenter 이벤트가 실행되고 안쪽d2와 h1에 들어갈 때는 실행되지 않는다.
- d1바깥으로 벗어날 때만 mouseleave 이벤트 실행
3) this를 사용해서 이벤트 실행
- 이미지를 넣고 this를 사용해서 mouseenter일 때 다른 이미지 mouseleave일 때 다른 이미지
- this는 현재 코드가 있는 태그(현재 위치한 태그)를 의미한다.
<img src="../img/dog3.jpg" onmouseenter = "this.src='../img/dog4.jpg'" onmouseleave = "this.src='../img/dog5.jpg'"/>[폼 이벤트 예제]
| onblur | 폼 요소에 포커스(마우스커서)를 잃었을 떄 이벤트 발생 |
| onfocus | 폼 요소에 포커스(마우스커서)가 놓였을 떄 이벤트 발생 |
| onsubmit | submit 버튼을 클릭했을 때 이벤트 발생 |
| onreset | 폼이 리셋되었을 때 이벤트 발생 |
| onchange | 목록이나 체크상태 등이 변경되면 이벤트 발생(값을 넣고 포커스가 다른 곳으로 옮겨지면 발생) |
1) onfocus와 onblur
- form 요소 안에 아이디와 이름을 만들고 각각 onfocus할 때 배경이미지를 추가하거나 글자색을 바꾸고 onblur를 할때 배경이미지를 추가하기
<script>
function changeBack() {
document.querySelector("#id").style.background="beige";
}
function changeColor() {
document.getElementById("name").style.color = "orange";
}
function test(i) {
i.style.background="lightgreen";
}
</script>
</head>
<body>
<form>
아이디 : <input type="text" id = "id" onfocus="changeBack()" onblur="this.style.background='pink'">
이름 : <input type="text" id = "name" onfocus="changeColor()" onblur="test(this)">
</form>
</body>
</html>더보기
아이디에 커서를 올렸을 때
이름에 커서를 올렸을 때
다른 곳에다 커서를 올려놓았을 때
2) onreset과 onchange
- onreset을 누르게 되면 적었던 내용이 모두 사라지게 된다.
- onchange는 값이 바뀔 때마다 실행된다.
<script>
....
function resetTest() {
document.querySelector("#r").value = "리셋!";
}
</script>
</head>
<body>
<form onsubmit="" onreset="resetTest()">
....
이름 : <input type="text" name = "name" id = "name" onfocus="changeColor()" onblur="test(this)"
onchange = "console.log('onchange실행')">
<input type="reset" id="r" value="다시쓰기"/>
</form>
</body>
</html>더보기
아이디와 이름을 쓰고 다시쓰기를 누르면
onreset이벤트가 실행되면서 value가 리셋!으로 바뀐다.
값을 적고
다시쓰기 버튼을 누르지 않고 다른 곳에 커서를 놔둬도 onchange실행
3) onchange 예제
<script>
function changeValue() {
document.querySelector("#blank").innerHTML = "값이 변경되었습니다."
}
</script>
</head>
<body>
<select onchange = "changeValue(), console.log('값의 변경')">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id="blank"></div>
</body>
</html>
[키보드 이벤트]
| onkeydown | 사용자가 키를 누르는 동안 이벤트 발생 |
| onkeypress | 사용자가 키를 눌렀을 때 이벤트 발생 |
| onkeyup | 사용자가 키에서 손을 땔 때 이벤트 발생 |
- 연락처를 넣을 칸을 만들어서 숫자가 아니면 입력되지 못하게 하는 함수 구현 (keydown이벤트 사용)
| event.keyCode | 현재 누른키의 키 값을 가진다.(입력한 문자의 아스키코드값 반환) |
| keyCode-> event내장객체에 현재 누른 키의 키 값을 가지고 있다. | |
| event.returnValue | true값과 false값 반한 |
더보기
<script>
function checkNumber() {
console.log(event.keyCode);
}
</script>
</head>
<body>
<form>
연락처 : <input type="text" id="tel" onkeydown ="checkNumber()"/><br/>
</form>
</body><script>
function checkNumber() {
var key = event.keyCode;
event.returnValue = key>=48 && key<=57 || key>=95 || key<=105 || key==8 || key==9 || key==37 || key==39 || key==46;
}
</script>- 아스키코드 숫자는 48~57 백스페이스는 8 탭키 9 왼쪽방향키 37 오른쪽방향키 39 delete 46
- 텐키 숫자는 95~105
- 한글은 유니코드 구성, keycode()는 유니코드 인식 못함
function checkNumber() {
var key = event.keyCode;
if(key>=48 && key<=57 || key>=95 || key<=105 || key==8 || key==9 || key==37 || key==39 || key==46){
event.returnValue = true;
} else { // 숫자 외의 키를 누른 경우
event.returnValue = false;
}
}예제1) 함수를 만들고 onmouseover 이벤트를 이용해서 html 태그의 속성을 사용
<body> <!-- 마우스를 올리면 htmlCtr()호출! -->
<img src="../img/nature.jpg" width=400px id="img" onmouseover="htmlCtr()"/>
<script>
function htmlCtr() {
document.getElementById("img").src="../img/img1.jpg";
document.querySelector("#img").style.border="2px solid red";
document.getElementById("img").title = "이미지 위에 마우스가 올라가져 있어요!";
}
</script>
</body>
예제2) 함수를 만들고 onmouseout 이벤트를 이용해서 html 태그의 속성을 사용
<body> <!-- 마우스를 이미지에서 벗어나면 imgChange()호출! -->
<img src="../img/nature.jpg" width=400px id="img" onmouseover="htmlCtr()" onmouseout="imgChange()"/>
<script>
function htmlCtr() {
// 일회용이 아니라 반복적으로 하는 경우는 변수 생성해서 하는게 좋음
// 위의 예제와 동일
var obj = document.getElementById("img")
obj.src="../img/img1.jpg";
obj.style.border="2px solid red";
obj.title = "이미지 위에 마우스가 올라가져 있어요!";
}
function imgChange() {
document.querySelector("#img").src="../img/nature.jpg";
}
</script>
</body>더보기
- 마우스를 이미지에서 떼면 처음 이미지로 바뀐다. 하지만 스타일은 그대로 적용!
'멀티캠퍼스 풀스택 과정 > 프론트엔드' 카테고리의 다른 글
| 프론트엔드3-4. JavaScript의 내장객체 String, Math, Array (0) | 2022.02.09 |
|---|---|
| 프론트엔트3-3. login form 만들기 / 이메일 분리하기 (0) | 2022.02.09 |
| 프론트엔드3-1. JavaScript 기본(입출력방법과 Dom요소의 선택) (0) | 2022.02.09 |
| 프론트엔드2-3. tab메뉴 만들기 (0) | 2022.02.08 |
| 프론트엔드2-2. 반응형 웹(미디어쿼리)과 meta 태그 (0) | 2022.02.07 |
