웹개발 교육/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>

 

이벤트

자바스크립트는 주로 이벤트를 발생시킨 후 함수를 호출함으로써 실행한다

기본 이벤트의 종류

  1. onchange         다른 객체로 바뀌었을때
  2. onclick              클릭했을때
  3. onmouseover   마우스가 올려졌을때
  4. onmouseout     마우스가 나갔을때
  5. onkeydown       키보드 관련 이벤트
  6. 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>

 

id에 배열로도 접근이 가능

 

미니 계산기

그동안 배운 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>");