JavaScript Commands
Anix provides a set of built-in JavaScript commands that make it easy to add interactivity to your pages without writing verbose JavaScript code. These commands are prefixed with `js:` and provide a concise way to handle common operations like event handling, DOM manipulation, and more.
On this page
Event Handling
Anix provides several commands for handling common DOM events:
js:click
Adds a click event listener to the selected element.
js:click(#myButton) {
alert('Button clicked!');
}
This generates the following JavaScript:
document.querySelector('#myButton').addEventListener('click', function() {
alert('Button clicked!');
});
js:hover and js:leave
Add mouseover and mouseout event listeners to the selected element.
white-space: pre-wrap;
word-wrap: break-word;
overflow-x: auto;
js:hover(.highlight) {
this.style.backgroundColor = 'yellow';
}
js:leave(.highlight) {
this.style.backgroundColor = '';
}
js:submit
Adds a submit event listener to a form, automatically preventing the default form submission.
white-space: pre-wrap;
word-wrap: break-word;
overflow-x: auto;
js:submit(#contactForm) {
const formData = new FormData(this);
console.log('Form submitted', Object.fromEntries(formData));
}
This generates JavaScript that includes `event.preventDefault()` to stop the default form submission.
js:change
Adds a change event listener to form elements like inputs, selects, etc.
white-space: pre-wrap;
word-wrap: break-word;
overflow-x: auto;
js:change(#country-select) {
console.log('Selected country:', this.value);
}
js:keyup
Adds a keyup event listener to detect when keys are released.
white-space: pre-wrap;
word-wrap: break-word;
overflow-x: auto;
js:keyup(#search-input) {
if (event.key === 'Enter') {
performSearch(this.value);
}
}
js:load
Adds a DOMContentLoaded event listener to run code when the page is fully loaded.
white-space: pre-wrap;
word-wrap: break-word;
overflow-x: auto;
js:load(document) {
console.log('Page loaded');
initializeApp();
}
DOM Selection
Anix provides commands for selecting DOM elements:
js:get
Selects a single element using querySelector.
white-space: pre-wrap;
word-wrap: break-word;
overflow-x: auto;
js:get(#main-content) {
textContent = 'New content';
}
You can also use it without a code block to just select an element:
white-space: pre-wrap;
word-wrap: break-word;
overflow-x: auto;
js:get(#counter);
js:getAll
Selects multiple elements using querySelectorAll.
white-space: pre-wrap;
word-wrap: break-word;
overflow-x: auto;
js:getAll(.list-item) {
forEach(item => item.classList.add('processed'));
}
Class Manipulation
Anix provides commands for manipulating element classes:
js:toggle
Toggles a class on the selected element.
white-space: pre-wrap;
word-wrap: break-word;
overflow-x: auto;
js:toggle(#menu, active)
This generates:
document.querySelector('#menu').classList.toggle('active');
js:addClass
Adds a class to the selected element.
white-space: pre-wrap;
word-wrap: break-word;
overflow-x: auto;
js:addClass(.card, highlighted)
js:removeClass
Removes a class from the selected element.
white-space: pre-wrap;
word-wrap: break-word;
overflow-x: auto;
js:removeClass(#notification, visible)
AJAX Requests
Anix provides a command for making AJAX requests using the Fetch API:
js:ajax
Makes a fetch request to the specified URL.
white-space: pre-wrap;
word-wrap: break-word;
overflow-x: auto;
js:ajax(/api/users) {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
}
This generates:
fetch('/api/users', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
});
Timing Functions
Anix provides a command for timing operations:
js:wait
Creates a setTimeout function with the specified delay.
white-space: pre-wrap;
word-wrap: break-word;
overflow-x: auto;
js:wait(2s) {
showNotification('Operation completed');
}
You can specify the time in milliseconds (ms) or seconds (s).
This generates:
setTimeout(function() {
showNotification('Operation completed');
}, 2000);
Syntax Variations
Anix JavaScript commands support different syntax variations:
Block Syntax
For commands that require a code block:
white-space: pre-wrap;
word-wrap: break-word;
overflow-x: auto;
js:click(#myButton) {
console.log('Button clicked');
this.disabled = true;
}
Inline Syntax
p.mb-3 "For simple commands that don't need a code block:"white-space: pre-wrap;
word-wrap: break-word;
overflow-x: auto;
js:toggle(#menu, active); js:addClass(.card, highlighted);
Multiline Syntax
For complex commands that span multiple lines:
white-space: pre-wrap;
word-wrap: break-word;
overflow-x: auto;
js:click(#loadMore) {
fetch('/api/items?page=' + currentPage)
.then(response => response.json())
.then(data => {
renderItems(data);
currentPage++;
})
.catch(error => console.error('Error:', error));
}
Best Practices
- Use CSS selectors that are specific enough to target the right elements.
- Keep JavaScript code blocks concise and focused on a single task.
- For complex JavaScript logic, consider using external JS files and importing them.
- Use the `this` keyword to refer to the element that triggered the event.
- For complex applications, consider using a more robust JavaScript framework alongside Anix.