JSP - 헬퍼함수(Prototype.js) $F()와 $H()

$F()와 $H()

$F()와 $H()는 Prototype.js라는 JavaScript 라이브러리에서 제공되는 **헬퍼 함수(helper functions)**입니다. 이 라이브러리는 HTML DOM 조작, 이벤트 핸들링, AJAX, 그리고 다양한 유틸리티 기능들을 쉽게 구현할 수 있도록 도와줍니다.

1. $F() - 폼 요소의 값을 반환하는 헬퍼 함수

• 설명: $F()는 주어진 HTML 폼 요소의 value 속성을 반환하는 함수입니다. 이 함수는 폼 요소(예: <input>, <select> 등)의 값을 가져올 때 사용됩니다.
• 예시:설명: 위의 예시에서 $F('username')과 $F('password')는 각각 id가 username과 password인 입력 필드의 값을 가져옵니다. 이 값들은 alert 창에 표시됩니다.
• 예시:

<form id="loginForm">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" value="JohnDoe">

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" value="secret123">
    
    <input type="button" value="Submit" onclick="submitForm()">
</form>

<script type="text/javascript">
    // Prototype.js가 로드되어 있어야 함
    function submitForm() {
        var username = $F('username');
        var password = $F('password');
        alert("Username: " + username + "\nPassword: " + password);
    }
</script>

 

2. $H() - 객체를 Hash 객체로 변환하는 헬퍼 함수

• 설명: $H()는 객체를 Prototype.js의 Hash 객체로 변환하여 다양한 유틸리티 메서드를 사용할 수 있도록 합니다. 이 함수를 사용하면 객체의 데이터를 보다 쉽게 다룰 수 있습니다.
• 예시:

var person = { name: "John Doe", age: 30, email: "john@example.com" };
var hashPerson = $H(person);

// Hash 객체의 메서드 사용 예시
alert(hashPerson.get('name'));  // "John Doe"
alert(hashPerson.keys());       // ["name", "age", "email"]
alert(hashPerson.values());     // ["John Doe", 30, "john@example.com"]

// 새로운 값을 추가하거나 변경할 수도 있음
hashPerson.set('age', 31);
hashPerson.set('address', '123 Main St');
alert(hashPerson.toObject());   // {name: "John Doe", age: 31, email: "john@example.com", address: "123 Main St"}

• 설명: 이 예시에서는 일반 객체 person을 $H()를 사용해 Hash 객체로 변환했습니다. 이 Hash 객체는 get(), keys(), values(), set() 등의 메서드를 사용해 객체의 데이터를 쉽게 조작할 수 있게 합니다.

 

3. 다른 헬퍼 함수들

Prototype.js에서 제공하는 몇 가지 유용한 헬퍼 함수들도 있습니다:

$() - DOM 요소를 선택하는 헬퍼 함수

• 설명: $()는 주어진 id를 가진 DOM 요소를 선택합니다. 여러 개의 id를 전달하면 배열로 반환됩니다.
• 예시:

var element = $('myElementId');
element.style.color = 'red';

var elements = $('header', 'footer', 'mainContent');
elements.each(function(el) {
    el.style.display = 'none';
});

$A() - 배열로 변환하는 헬퍼 함수

• 설명: $A()는 주어진 객체를 배열로 변환합니다. 이는 유사 배열 객체 (예: arguments 객체나 NodeList)를 실제 배열로 변환할 때 유용합니다.
• 예시:

function logArguments() {
    var args = $A(arguments);
    args.each(function(arg) {
        console.log(arg);
    });
}

logArguments(1, 2, 3); // 1, 2, 3이 순서대로 출력됨

$w() - 문자열을 배열로 변환하는 헬퍼 함수

• 설명: $w()는 공백으로 구분된 문자열을 배열로 변환합니다.
• 예시:

var words = $w("apple banana cherry");
console.log(words); // ["apple", "banana", "cherry"]

결론

• $F(): HTML 폼 요소의 value 속성을 반환하는 유틸리티 함수입니다.
• $H(): 일반 객체를 Hash 객체로 변환하여 다양한 메서드를 통해 객체의 데이터를 쉽게 조작할 수 있게 해주는 유틸리티 함수입니다.
• 다른 헬퍼 함수들: $(id)는 DOM 요소를 선택하고, $A()는 객체를 배열로 변환하며, $w()는 문자열을 배열로 변환하는 데 사용됩니다.

이러한 헬퍼 함수들은 Prototype.js 라이브러리의 핵심 기능 중 일부이며, 자주 반복되는 작업을 단순화하고 코드를 더 간결하고 가독성 있게 작성할 수 있도록 도와줍니다.