html 태그 요소를 자바스크립트 함수 파라미터로 사용하기 함수의 인자값으로 사용하기

자바스크립트를 개발할 때 파라미터 인자값으로 html 태그 요소를 그대로 전달하여 사용할 수 있다. 함수의 파라미터는 어떤 값을 보내도 상관없지만 파라미터를 어떤 형태로 보내는지에 따라 편할 수도 그렇지 않을 수도 있다. 태그 요소가 아닌 값을 보내도 상관없다. 다만 html 태그 요소 자체를 파라미터로 전달한다면 html 태그의 속성에 접근하여 값을 가공하는 것이 편해진다.

html 태그 요소를 자바스크립트 함수 파라미터로 사용하기
함수의 인자값으로 사용

자바스크립트를 사용하여 html 태그에 접근하고 태그가 가지고 있는 값을 사용하는 것은 빈번하게 일어난다.

get 과 set 의 동작은 수시로 이루어지고 개발자는 이런 동작을 만드는데 고민을 하게 된다.

달리 생각하면 고민할 것도 없지만 기술이란 것이 모르면 고생 알면 세상 편하다.

자바스크립트로 함수를 만들 때 인자값을 사용할 수 있다. 값을 받고 값을 가공하여 출력을 한다.

이 떄 함수로 보내는 파라미터를 어떻게 보낼지 혹은 html 태그에 어떻게 접근시킬지 고민이 될 때가 있다.

차라리 html 태그에 지정한 아이디를 지정하여 html 객체 자체를 인자값으로 전송하면 코딩이 조금은 수월해 진다.

자바스크립트 함수와 파라미터 인자값

모든 프로그래밍 언어는 함수를 만들어 사용할 수 있다.

함수는 최소한의 프로그램 단위로 특정 작업을 하도록 만들 수 있다.

함수는 입력 조작 출력의 과정을 거치게 되는데 입력값이 있어도 그만 없어도 그만이다.

단, 입력값이 존재할 경우 파라미터 인자값을 어떻게 보내야 할지 고민이 될 때가 있다.

파라미터 인자값은 보통 값으로 보내기도 하지만, 객체 자체를 전달할 수도 있다.

아래는 자바스크립트 함수를 나타낸다.

둘 다 같은 코드이며 편한대로 사용하면 된다. 본인의 경우 언제부턴가 두번째 경우를 더 많이 사용하게 되었다.

<script>
	function fnJavaScript ([인자값], [객체]) { ~ }
</script>

<script>
	var fnJavaScript = function ([인자값], [객체]) { ~ }
</script>

파라미터 객체 전달하기

자바스크립트 함수에 인자값으로 html 객체 파라미터를 전달해 보도록 한다.

객체 자체를 파라미터로 지정하면 코딩이나 개발에 편의성이 있지만 나중에는 메모리에 대한 고민이 될 수도 있다.

하드웨어 성능도 빠르게 높아지는데 사소한 고민일 수 있지만 너무 고민하지 말자.

아래는 html 객체를 파라미터로 전달하는 코드이다.

<div>
    <input type="button" value="바닐라JsId" onclick="return fnPrintBoxJs('printBox');">
    <script>
        var fnPrintBoxJs = function(objectParam) {
            var htmlObj = document.getElementById(objectParam);
            console.log(htmlObj);
            console.log(htmlObj.id);
        }
    </script>
</div>
<div>
    <input type="button" value="바닐라JsObj" onclick="return fnPrintBoxJsObj(document.getElementById('printBox'));">
    <script>
        var fnPrintBoxJsObj = function(objectParam) {
            var htmlObj = objectParam;
            console.log(htmlObj);
            console.log(htmlObj.id);
        }
    </script>
</div>

위의 코드는 일반적인 자바스크립트 코드 ( 바닐라 JS ) 형태이며, 첫번째는 html 태그의 아이디를 파라미터로, 두번째는 html 태그 요소 객체를 파라미터로 전달하고 있다.

자바스크립트 파라미터 아이디 전달
funtion 함수명 ( 'html_요소_아이디' )
자바스크립트 파라미터 html 요소 객체 전달
function 함수명 ( document.getElementById('html_요소_아이디') )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div>
    <input type="button" value="JqueryId" onclick="return fnPrintBoxJq('#printBox');">
    <script>
        var fnPrintBoxJq = function(objectParam) {
            var htmlObj = $(objectParam);
            console.log(htmlObj);
            console.log(htmlObj.attr('id'));
        }
    </script>
</div>
<div>
    <input type="button" value="JqueryObject" onclick="return fnPrintBoxJqObj($('#printBox'));">
    <script>
        var fnPrintBoxJqObj = function(objectParam) {
            var htmlObj = objectParam;
            console.log(htmlObj);
            console.log(htmlObj.attr('id'));
        }
    </script>
</div>

위의 코드는 jquery 를 사용했다. 첫번째는 html 태그의 아이디를 파라미터로, 두번째는 html 태그 요소 객체를 파라미터로 전달하고 있다.

JQuery 파라미터 아이디 전달
funtion 함수명 ( 'html_요소_아이디' )
JQuery 파라미터 html 요소 객체 전달
function 함수명 ( $('html_요소_아이디') )

전체 코드와 결과화면

위의 코드를 보면 뭔 말도 안되는 내용을 작성했나 싶기도 하다.

결과적으로 사용하는 사람의 선택이지만 본인의 경우 귀찮은 작업을 싫어하는 자유도가 어느정도 존재하는 코딩을 하게 되어 이런 형태의 코딩을 하는 것일지도 모른다.

어쨌든 개발에 편하면 그만이요, 최적화는 추후에 업그레이드를 하면 그만이다.

<!-- html5 웹문서 명시 -->
<!DOCTYPE html>
<html lang="ko">
	<head>
		<!-- 반응형 meta 명시 -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>테스트-자바스크립트</title>
	</head>
	<body>
		<div>
			<span id="screenW"></span>
			<span>X</span>
			<span id="screenH"></span>
		</div>
		<div>
			<input type="button" value="바닐라JsId" onclick="return fnPrintBoxJs('printBox');">
			<script>
				var fnPrintBoxJs = function(objectParam) {
					var htmlObj = document.getElementById(objectParam);
					console.log(htmlObj);
					console.log(htmlObj.id);
				}
			</script>
		</div>
		<div>
			<input type="button" value="바닐라JsObj" onclick="return fnPrintBoxJsObj(document.getElementById('printBox'));">
			<script>
				var fnPrintBoxJsObj = function(objectParam) {
					var htmlObj = objectParam;
					console.log(htmlObj);
					console.log(htmlObj.id);
				}
			</script>
		</div>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
		<div>
			<input type="button" value="JqueryId" onclick="return fnPrintBoxJq('#printBox');">
			<script>
				var fnPrintBoxJq = function(objectParam) {
					var htmlObj = $(objectParam);
					console.log(htmlObj);
					console.log(htmlObj.attr('id'));
				}
			</script>
		</div>
		<div>
			<input type="button" value="JqueryObject" onclick="return fnPrintBoxJqObj($('#printBox'));">
			<script>
				var fnPrintBoxJqObj = function(objectParam) {
					var htmlObj = objectParam;
					console.log(htmlObj);
					console.log(htmlObj.attr('id'));
				}
			</script>
		</div>
		<div id="printBox"></div>
	</body>
	<script>
		$(document).ready( function() { /* Load Comp. without resources */ });
		$(window).on('load', function() { /* Load Comp. with resources */ fnBrowserInnerSize(); });
	</script>
	<script>
		/** 웹브라우저 크기 변경 이벤트 */ 
		window.onresize = function() { fnBrowserInnerSize(); };
		/** 웹브라우저의 문서 크기 화면 표시 */ 
		var fnBrowserInnerSize = function() { $("#screenW").text(window.innerWidth); $("#screenH").text(window.innerHeight);};
	</script>
</html>

코드는 길어보이지만 하나씩 보면 어떻게 동작하는지 금방 확인이 가능하다.

위의 코드에서 중요한 것은 자바스크립트 함수의 파라미터 html 요소 객체를 그대로 전달하여 사용한다는 것이다.

결과 화면을 보자.

저작자표시 비영리 변경금지

'programming > TroubleShootInG' 카테고리의 다른 글

html 태그 name 선택과 접근 document 객체 jquery 비교 (0)	2022.12.01
TOAST UI Editor / 토스트 ui 에디터 html 설정하기 setHTML 메서드 사용하기 (0)	2022.11.29
TOAST UI Editor / 토스트 ui 에디터 html 가져오기 getHTML 메서드 사용하기 (0)	2022.11.28
TOAST UI / 토스트 ui 에디터 붙이기 네이버 CDN 사용 (0)	2022.11.27
네이버 토스트 UI 종류 홈페이지 제작 웹개발에 필요한 오픈 소스 프로젝트 (0)	2022.11.27

html 태그 요소를 자바스크립트 함수 파라미터로 사용하기 함수의 인자값으로 사용하기