웹개발 교육/JavaScript
[14일] JavaScript (8) - 이벤트, String 함수
ewok
2022. 8. 12. 18:20
js파일 import
JavaScript 파일을 별도로 만들어 html파일에 import 할 수 있다.
<head>
<!-- .js파일 import -->
<script src="myscript.js"></script>
</head>이벤트
자바스크립트는 주로 이벤트를 발생시킨 후 함수를 호출함으로써 실행한다
기본 이벤트의 종류
- onchange 다른 객체로 바뀌었을때
- onclick 클릭했을때
- onmouseover 마우스가 올려졌을때
- onmouseout 마우스가 나갔을때
- onkeydown 키보드 관련 이벤트
- onload 문서를 불러오는 작업이 끝났을 때
<form>
<input type="button" value="버튼1" onclick="alert('버튼1클릭')">
<hr>
<input type="button" value="아이티윌" onclick="location.href='https://www.itwill.co.kr/'">
<hr>
<input type="button" value="마우스" onmouseover="alert('마우스over')"
onmouseout="alert('마우스out')">
<hr>
<input type="text" onkeydown="alert('키보드누름')">
<textarea rows="5" cols="10" onkeydown="alert('키보드누름')"></textarea>
<hr>
<select onchange="alert('목록변경')">
<option>서울</option>
<option selected>제주</option>
<option>부산</option>
</select>
<hr>
</form><!-- 텍스트 입력상자에 커서가 들어왔을때 onfocus 이벤트 -->
<input type="text" onfocus="alert('커서들어옴')">
<hr>
<!-- 서버로 해당 폼을 전송할 때 이벤트 onsubmit -->
<input type="submit" value="전송1">onsubmit은 form 태그 안에 작성한다. form 전체가 전송되야 하기 때문이다.
<form name="myform" id="myform" method="get" action="ok.jsp" onsubmit="false">
<!--
onsubmit 이벤트는 해당 폼(myform)이 서버로 전송될 때
return값이 true이면 해당 폼이 전송된다
return값이 false이면 전송되지 않는다
--><!-- 폼을 서버로 전송하는 컨트롤 요소들 -->
<input type="submit" value="전송1">
<button>전송2</button>
<input type="image" src="../../images/search.png">폼을 전송하려면 onsubmit = "return true"여야 한다.
<form name="myform" id="myform" method="get" action="ok.jsp" onsubmit="return true">
마우스 이벤트
마우스를 올려놓는 곳에 따라 이미지가 변경되게 해보자
<body>
<h3>마우스 이벤트</h3>
<table border="1">
<tr>
<th onmouseover="show('r')">라이언</th> <!-- r, n, j는 임의로 정해서 사용하면 됨-->
<th onmouseover="show('n')">네오</th>
<th onmouseover="show('j')">제이지</th>
</tr>
<tr>
<td colspan="3">
<div id="ryan" style="display: block;">
<img src="../../images/k7.png">
</div>
<div id="neo" style="display: none;">
<img src="../../images/k5.png">
</div>
<div id="jayg" style="display: none;">
<img src="../../images/k3.png">
</div>
</td>
</tr>
</table>
<script>
function show(kind){
// alert(kind);
switch(kind){
case "r" : document.getElementById("ryan").style.display="block";
document.getElementById("neo").style.display="none";
document.getElementById("jayg").style.display="none";
break;
case "n" : document.getElementById("ryan").style.display="none";
document.getElementById("neo").style.display="block";
document.getElementById("jayg").style.display="none";
break;
case "j" : document.getElementById("ryan").style.display="none";
document.getElementById("neo").style.display="none";
document.getElementById("jayg").style.display="block";
break;
}//switch end
}//show() end
</script>
</body>
미니 계산기
그동안 배운 html, css, javascript를 이용하여 계산기를 만들어보자
먼저 계산기 모양을 만들어보자
<form>
<table border="1">
<tr>
<td colspan="4">
<input type="text" name="result" id="result" size="20" value="0" readonly class="txt">
</td>
</tr>
<tr>
<td><input type="button" value=" 7 " onclick="inputData(7)"></td>
<td><input type="button" value=" 8 " onclick="inputData(8)"></td>
<td><input type="button" value=" 9 " onclick="inputData(9)"></td>
<td><input type="button" value=" / " onclick="operator('/')"></td>
</tr>
<tr>
<td><input type="button" value=" 4 " onclick="inputData(4)"></td>
<td><input type="button" value=" 5 " onclick="inputData(5)"></td>
<td><input type="button" value=" 6 " onclick="inputData(6)"></td>
<td><input type="button" value=" * " onclick="operator('*')"></td>
</tr>
<tr>
<td><input type="button" value=" 1 " onclick="inputData(1)"></td>
<td><input type="button" value=" 2 " onclick="inputData(2)"></td>
<td><input type="button" value=" 3 " onclick="inputData(3)"></td>
<td><input type="button" value=" - " onclick="operator('-')"></td>
</tr>
<tr>
<td><input type="button" value=" 0 " onclick="inputData(0)"></td>
<td><input type="button" value=" . "></td>
<td><input type="button" value=" = " onclick="compute()"></td>
<td><input type="button" value=" + " onclick="operator('+')"></td>
</tr>
<tr>
<td colspan="2">
<input type="button" value=" ← " onclick="backpace()">
</td>
<td colspan="2">
<input type="button" value=" C " onclick="cls()">
</td>
</tr>
</table>
</form>
이제 계산기의 기능을 구현할 수 있도록 함수를 만들어보자
//1. c 버튼을 클릭하면 id=result에 0을 대입
function cls(){
document.getElementById("result").value = 0; //document.getElementById("result")을 통해 계산 결과가 출력되는 창에 접근. .value로 value값에 접근
}//cls() end//2. 클릭한 숫자 버튼에 맞는 숫자를 출력하기
function inputData(su){
// alert(su);
//전달받은 su변수값을 id=result에 대입
// document.getElementById("result").value += su;
//id = result 값을 숫자형으로 변환("0123" -> 123)
document.getElementById("result").value = Number(document.getElementById("result").value += su);
}//inputData() end//3.연산에 필요한 전역변수 선언하기
let op; //연산 기호
let num1; //사용자 입력한 첫 번째 수
let num2; //사용자 입력한 두 번째 수function operator(kind){
//4. 클릭한 연산 기호를 전역변수 op에 저장하기
// alert(kind);
op = kind;
//5. 현재 id=result가 가지고 있는 값을 num1에 저장하기
num1 = Number(document.getElementById("result").value);
//6. 두 번째 수를 입력받기 위해 id=result값을 초기화하기
cls();
}//operator() end// 참조 https://www.w3schools.com/jsref/jsref_eval.asp
function compute(){
//실제 계산을 해서 결과값 출력
//7. 계산에 필요한 두 번째 수를 num2에 저장하기
num2 = Number(document.getElementById("result").value);
//8. 계산해서 결과 출력하기
document.getElementById("result").value = eval(num1 + op + num2);
}//compute() end
String 함수
문자열에 관한 다양한 함수가 있다.
문자열의 글자 갯수를 알려주는 함수가 있고, n번째 글자가 무엇인지 알려주는 함수도 있다.
let str = "Gone With The wind";
document.write(str.length); //글자 갯수
document.write("<hr>");
document.write(str.charAt(0)); //"G" 0번째 글자
document.write("<hr>");
document.write(str.charAt(17)); //"d"
document.write("<hr>");
document.write(str.charAt(str.length-1)); //"d" 마지막 글자
document.write("<hr>");
document.write(str.toUpperCase()); //전부 대문자로 치환
document.write("<hr>");
document.write(str.toLowerCase()); //전부 소문자로 치환
document.write("<hr>");
document.write(str.replace("n", "N")); //"n" -> "N"으로 치환
document.write("<hr>");
// ★ ★ ★
document.write(str.substring(6, 12)); //6번째 ~ (12-1)번째까지 ith Th
document.write("<hr>");
document.write(str.substring(10, 13)); //"The"
document.write("<hr>");
//맨 앞 글자 자르기
document.write(str.substring(0,1));
document.write("<hr>");
//맨 마지막 글자 자르기
document.write(str.substring(str.length-1, str.length));
document.write("<hr>");
//문자열 분리하기
document.write(str.slice(10, 13)); //"The"
document.write("<hr>");
//문자열 합치기
let text1 = "Hello";
let text2 = "World";
let text3 = text1.concat(text2);
document.write(text3); //"HelloWorld"
document.write("<hr>");
//문자열 맨 앞, 맨 뒤 공백제거하기
let text4 = " Java Script ";
document.write("#" + text4.trim() + "#"); //"#Java Script#" 공백제거 확인용으로 앞뒤에 # 붙임
document.write("<hr>");
//4칸을 기준으로 빈칸은 0으로 앞에서부터 채우기
let text5 = "9";
document.write(text5.padStart(4, 0)); //0009
document.write("<hr>");
//4칸을 기준으로 빈칸은 0으로 뒤에서부터 채우기
let text6 = "8";
document.write(text6.padEnd(4, 0)); //8000
document.write("<hr>");