Function $
This function is a simple wrapper around
document.getElementById(). It's a shorthand for getting an HTML element by its ID. So, if you have an element in your HTML like
you can get a reference to it using
This is a common practice to shorten code and make it more readable.
Function $_
This function is more complex and serves a dual purpose: getting the value of an element and setting the value of an element. It takes the element's ID as the first argument. The second argument is optional.
- Getting the value (when 2nd argument is NOT provided):
- It first gets the element using the $-function.
- If the element exists:
- If the element is a checkbox or radio button, it returns "1" if it's checked and "0" if it's not.
- Otherwise, if the element has a value property (like input fields, select boxes, etc.), it returns the value of that property.
- If the element doesn't have a value property (like a <div> or <span>), it returns the element's innerHTML.
- If the element doesn't exist, it effectively returns null.
- Setting the value (when 2nd argument is provided):
- 2nd argument is used as internal variable to be returned (if not modified).
- It first gets the element using the $-function.
- If the element exists:
- If the element is a checkbox or radio button:
- It checks the value of 2nd argument. If it's "N", "F", or "off", it unchecks the element. If it's "Y", "T", "on", or a truthy value (using eval("("+v+")")), it checks the element. This 'eval' is potentially dangerous if 2nd argument comes from user input, as it can execute arbitrary JavaScript. It's generally better to avoid 'eval' and use more robust methods for type checking.
- It then modifies internal variable to be "1" or "0" depending on the checkbox/radio button's new state.
- Otherwise, if the element has a value property, it sets the value property to value of 2nd argument.
- Otherwise (if no value property), it sets the element's innerHTML to value of 2nd argument.
- Finally, it returns the internal variable (if it's not modified then it still has value of 2nd argument in it).
Function $$
This function seems to be a selector function. It uses $R.select (will be described later) to retrieve elements based on a selector string and cache result for later faster retreaval (cache could be claned by function $R.clear). Argument is treated as a prefix or mask with * and function returns array of elements with ID matching requested prefix/mask.
Function $$$
This function retrieves elements using function $$ (so it still expects prefix or mask as an input) and then extracts the ID of each element using the $map function (will be described later). It returns an array of the element IDs.
Example:
Code: Select all
<input type="text" id="myInput" value="Initial Value">
<div id="myDiv">Some text</div>
<input type="checkbox" id="myCheckbox">
<script type="text/javascript" src="Rgrid.js"></script>
<script>
console.log($("myInput")); // Returns the input element
console.log($_("myInput")); // Returns "Initial Value"
$_("myInput", "New Value"); // Sets the input value to "New Value"
console.log($_("myInput")); // Returns "New Value"
console.log($_("myDiv")); // Returns "Some text"
$_("myDiv", "New HTML"); // Sets the div's content to "New HTML"
console.log($_("myDiv")); // Returns "New HTML"
console.log($_("myCheckbox")); // Returns "0" (assuming it's unchecked)
$_("myCheckbox", "on"); // Checks the checkbox
console.log($_("myCheckbox")); // Returns "1"
console.log($$("my")); // Returns array that consists of 3 element
console.log($$$("my")); // Returns array [ "myInput", "myDiv", "myCheckbox"]
</script>
Line including Rgrid.js and last 2 tests were added by me, but everything else in this example was written by Gemini - pretty impressive
To be continued...
history