Javascript [ URI ]

양혜정·2024년 4월 13일
0

HTML/CSS/JS 실행

목록 보기
50/60
post-thumbnail

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문자열을 유효한 URI(Uniform Resource Identifier UTF-8로 인코딩)로 인코딩/디코딩 한다.</title>

<link rel="stylesheet" href="css/encodeURI_decodeURI.css">
<script type="text/javascript" src="js/encodeURI_decodeURI.js"></script>

</head>
<body>

    <div>
		<table>
			<tr>
				<td width="30%">문자열입력(한글)</td>
				<td><input type="text" id="inputText" size="70"/> </td>
			</tr>
			<tr>
				<td>URI로 인코딩된 값</td>
				<td id="encode_1"></td>
			</tr>
			<tr>
				<td>URI를 디코딩된 값</td>
				<td id="decode_1"></td>
			</tr>
			
			<tr>
				<td><button type="button" id="btnOK_1">변경</button></td>
				<td><button type="button" id="btnReset_1">다시</button></td>
			</tr>
		</table>
	</div>
	
	<div>	
		<table>
			<tr>
				<td width="30%">URI로 인코딩된 값 입력</td>
				<td><input type="text" id="encode_2" size="70"/> </td>
			</tr>
			<tr>
				<td>URI를 디코딩된 값</td>
				<td id="decode_2"></td>
			</tr>
			
			<tr>
				<td><button type="button" id="btnOK_2">변경</button></td>
				<td><button type="button" id="btnReset_2">다시</button></td>
			</tr>
		</table>
	</div>

</body>
</html>

JS

window.onload = function(){
	 
	 document.querySelector("input#inputText").focus();
	 
	 document.querySelector("button#btnOK_1").addEventListener('click', ()=>{ 
		 func_encodeURI_decodeURI();
	 });
	 
	 document.querySelector("button#btnReset_1").addEventListener('click', ()=>{ 
		 document.querySelector("input#inputText").value = "";
		 document.querySelector("td#encode_1").innerHTML = ""; 
		 document.querySelector("td#decode_1").innerHTML = "";
		 document.querySelector("input#inputText").focus();
	 });  
	 
	 document.querySelector("input#inputText").addEventListener('keydown', (e) => {
		 console.log(e.keyCode); // 엔터가 13 이다.
		 // event.keyCode 종류를 알려면 검색어로 "자바스크립트 keyCode" 구글링하면 나온다.
		 
		 if(e.keyCode == 13) { // 13 이 엔터 이다.
			 func_encodeURI_decodeURI();
		 }
	 });
	 
	 ///////////////////////////////////////////////////////////
	 
	 document.querySelector("button#btnOK_2").onclick = () => {
		 func_decodeURI(document.querySelector("input#encode_2").value);
	 };
	 
	 document.querySelector("input#encode_2").onkeydown = (e) => {
		 if(e.keyCode == 13) {
			 func_decodeURI(document.querySelector("input#encode_2").value);
		 }
	 };
	 
	 document.querySelector("button#btnReset_2").onclick = () => {
		 document.querySelector("input#encode_2").value = "";
		 document.querySelector("input#encode_2").focus();
		 document.querySelector("td#decode_2").innerHTML = "";
	 };
	 
 }// end of window.onload = function(){}------------------
 
 
 function func_encodeURI_decodeURI() {

	const inputText = document.querySelector("input#inputText").value;
	const encodeVal = encodeURI(inputText);
	               // encodeURI("문자열"); ==> "문자열"을 웹상에서 컴퓨터가 알아듣는 문자로 변환시켜준다. 
	               
	document.querySelector("td#encode_1").innerHTML = encodeVal;
	
	document.querySelector("td#decode_1").innerHTML = decodeURI(encodeVal); 
	                                               // decodeURI(encodeVal); ==> 웹상에서 컴퓨터가 알아듣는 문자를 사람이 알아볼수 있는 문자로 변환시켜준다.                
 }// end of function func_encodeURI_decodeURI(){}-----------
 
 
 function func_decodeURI(encodeURI_value) {
	 document.querySelector("td#decode_2").innerHTML = decodeURI(encodeURI_value);
 }// end of function func_decodeURI() {}------------------

CSS

@charset "UTF-8";

	div {
	   /* border: solid 1px gray; */
		width: 800px;
		margin: 0 auto;
		padding: 2%;
	}

	table {
		width: 100%;
		border-collapse: collapse;
	}
	
	td {
		border: solid 1px gray;
		height: 50px;
		text-align: center; 
	}

정리

  • 09_javascriptStandardObject -> 03_URI
    -> encodeURI_decodeURI.html, encodeURI_decodeURI.js, encodeURI_decodeURI.css
profile
양혜정
이전 포스트

Javascript [ Quiz ]

다음 포스트

Javascript [ Math ]

0개의 댓글