<?if: x % 2 === 0 ?>
<p>X is an Even number</p>
<?else-if: x % 2 === 1 ?>
<p>X is an Odd number</p>
<?else?>
<p>Neither condition was true</p>
<?end?>
Do you want to create web applications like James Bond, with maximum efficiency and minimal hassle? Look no further than XJSX! This powerful framework lets you write JavaScript directly in your HTML, making it easier to create dynamic web pages and interfaces.
See HISTORY.md for a list of changes and releases.
XJSX offers a unique approach to web development that allows developers to write code that resembles JavaScript directly within HTML. This approach results in cleaner, more maintainable code and reduces the need for constantly switching between HTML and JavaScript, developers can focus on writing efficient code that is easier to understand, modify, and maintain.
XJSX is based on two simple syntax patterns. You can use either of these options to incorporate JavaScript functionality into your HTML:
A:
<?keyword: parameter?> B:
<!--?keyword: parameter?-->Option B is also recommended, as both patterns are treated as comments by HTML rendering engines.
To start using XJSX, simply include the source file or URL in your HTML head:
<html>
<head>
<script src="xjsx.js"></script>
</head>
</html>Download XJSX
here
XJSX includes a range of powerful keywords that enable you to take your web development to the next level. These currently include:
if,else-if,else, andend– create conditional statements like those in JavaScriptfetch,then,catch, andend– access and manipulate data using the Fetch APIfor-eachandend– loop through elements as in JavaScript's forEach() methodonandend- Bind event listeners to the XJSX documentupdate- This is triggered any time a variable value change.use-template– easily import and use HTML templatesconsole-log- Output messages to the console for debugging and troubleshooting purposesparse-json– quickly parse JSON dataprint– render dynamic content to the pageeval- Evaluate a string of code at runtime and execute it within the current XJSX scriptdata- Rerender the XJSX document in response to a specified event
To use these keywords in your XJSX-enabled HTML, simply incorporate them using the pattern shown below:
<?keyword: parameter?>Ready to see XJSX in action? Here are a few examples of how you can use XJSX to create dynamic, responsive HTML pages:
Use the print keyword to output dynamic content in your HTML. For example:
<h1>
Hello <?print: "World"?>
</h1>This will render as:
<h1>
Hello World
</h1>Use the update keyword to update the variable value anything variable is changed by any event.
<script>
let variable = "Hello World";
let button = document.querySelector("button");
button.onclick = function (){
if(variable == "Hello World"){
variable = "Changed";
}else{
variable = "Hello World";
}
}
</script>
<?update: variable ?>
<button>click me to change variable value</button>
or
<script>
let variable = "Hello World";
function Function(e) {
let input = e;
variable = input.value;
}
</script>
<input onkeyup="Function(this)" value="Hello World"/>
<?update: variable ?>Use the parse-json keyword to parse a JSON string into an object that can be accessed in your HTML. For example:
<script>
var jsonString = '{"name":"XJSX"}';
</script>
<?parse-json: jsonString?>
<h1>
Welcome to <?print: jsonString.name?>
</h1>This will render as:
<h1>
Welcome to XJSX
</h1>The console-log keyword is similar to the console.log function in JavaScript. It allows you to log messages to the console. For example:
<?console-log: "hello world!"?>Use the use-template keyword to insert a template element into your HTML. For example:
<template id="greeting">
<h1>Hello World!!</h1>
</template>
<?use-template: "greeting"?>This will render as:
<h1>Hello World!!</h1>Use the if, else-if, else, and end keywords to conditionally render HTML based on JavaScript expressions. For example:
<?if: x < 0 ?>
<h1>X is lesser than 0</h1>
<?else-if: x === 0 ?>
<h1>X is equal to 0</h1>
<?else?>
<h1>Neither condition was true</h1>
<?end?>Use the fetch, then, catch, and end keywords to make API requests and handle responses. For example:
<?fetch: "https://jsonplaceholder.typicode.com/todos/1" ?>
<h1>Loading...</h1>
<?then: response?>
<h1><?print: response?></h1>
<?catch?>
<h1>Error loading data</h1>
<?end?>Use the for-each and end keywords to loop over arrays and output HTML for each element. For example:
<?for-each: [1, 2, 3]; value, index?>
<p>Value: <?print: value?>, Index: <?print: index?></p>
<?end?>This will render as:
<p>Value: 1, Index: 0</p>
<p>Value: 2, Index: 1</p>
<p>Value: 3, Index: 2</p>refer here for the complete doc.
The on and end keyword is used to add event listeners to the document. Here's an example:
<?on: "load"?>
<p>Page loaded!</p>
<?end?>In the above example, we're using the on keyword to add an event listener for the "load" event of the document. When the page is loaded, the XJSX element containing the "Page loaded!" message will be rendered
The data keyword is used to listen for events and update the XJSX element when the event is emitted. Here's an example:
<script>
var emit = XJSX.event.emit;
emit("data/name", "Elon Musk");
</script>
<h1> <?data: "name"?> </h1>
This will render as:
<h1> Elon Musk </h1>
In this example, the XJSX element will rerender every time the "data/name" event is emitted
The eval keyword is used to evaluate JavaScript code in an XJSX document, similar to the eval() function in JavaScript. Here's an example:
<?eval: "var x=10;"?>In the above example, we're using the eval keyword to create a variable x with the value of 10.
When using XJSX, it's crucial to ensure that you correctly incorporate it into an HTML tag.
Wrong:
<?if: x > 0 ?>
<h1>Hello
<?else?>
World</h1>
<?end?>Right:
<?if: x > 0 ?>
<h1>Hello</h1>
<?else?>
<h1>World</h1>
<?end?>The XJSX global object is a JavaScript object that has been added to the XJSX library to provide additional functionality to the developers using it. The object is defined as window.XJSX and it has several properties and methods that can be accessed and used by the developer in their code.
console.log(window.XJSX);Read more about it here
Xjsx is a framework that allows you to write JavaScript-like code in your HTML files. It's a reverse version of JSX, which lets you write HTML-like code in your JavaScript files. Xjsx can help simplify your code and make it more readable by keeping all the logic in one place.
refer the following repo https://github.com/Owens94819/XJSX-DEMO
XJSX is a lightweight JavaScript framework that enables developers to write HTML templates using JavaScript syntax. It provides a set of keywords that allow developers to write conditional statements, loops, and interact with the DOM API. XJSX helps to simplify HTML code and makes it more expressive, especially when dealing with dynamic data.
The framework is easy to install and use. With a simple HTML script tag, you can include XJSX in your project and start writing XJSX templates right away. Additionally, XJSX supports many of the JavaScript features that developers are already familiar with, such as template literals and JSON parsing.
Overall, XJSX is a powerful tool that can help you write cleaner, more expressive, and efficient code for your web applications.
- Why did the developer use XJSX for their project? Because they wanted to write JavaScript without all the drama!
- Why did the developer switch to XJSX? Because they were tired of constantly switching between HTML and JavaScript!
This project is licensed under the GPL-3.0 License.