Edge Rewrite
Jump to content

Draft:Magnet Javascript Extention Library

From Wikipedia, the free encyclopedia

= =


The Magnet Javascript Extention Library, aka MJEL, is an Open Source library designed for JavaScript, and is designed to simplify HTML Canvas, HTML DOM, and making custom tags for HTML. It condenses long lines or blocks of code into smaller chunks of code. MJEL is created by Magnet Games and their lead developer, going by the alias MelonPultVR.

HTML/JS Canvas Simplification

[edit]

MJEL was initially created to simplify canvas expressions, so people could make games and art. To be clear, you need to make the ID of your <canvas> element to "myCanvas" or it will not work

MJEL VS Vanilla JavaScript (Making a Line)

[edit]
HTML/JS Code:
[edit]
<html>
    <head>
        <title>example</title>
    </head>
    <body>
        <h1>Hello World!</h1>
        <canvas id="myCanvas" width="200px" height="200px"></canvas>
        <script>
            document.getElementById('myCanvas').getContext('2d').beginPath();
            document.getElementById('myCanvas').getContext('2d').moveTo(0,0);
            document.getElementById('myCanvas').getContext('2d').lineTo(200,200);
            document.getElementById('myCanvas').getContext('2d').stroke();
        </script>
    </body>
</html>
HTML/MJEL Code:
[edit]
<html>
    <head>
        <title>example</title>
        <script src="magnet-games.w3spaces.com/mjel.js"></script>
    </head>
    <body>
        <h1>Hello World!</h1>
        <canvas id="myCanvas" width="200px" height="200px"></canvas>
        <script>
            line(0,0,200,200)
        </script>
    </body>
</html>

While JS requires multiple long lines of code, MJEL only needs 1 short line of code.

MJEL VS Vanilla JavaScript: (Drawing Bezier Curves)

[edit]
HTML/JS Code
[edit]
<html>
    <head>
        <title>example</title>
    </head>
    <body>
        <h1>Hello World!</h1>
        <canvas id="myCanvas" width="200px" height="200px"></canvas>
        <script>
            document.getElementById('myCanvas').getContext('2d').beginPath();
            document.getElementById('myCanvas').getContext('2d').moveTo(0,0);
            document.getElementById('myCanvas').getContext('2d').bezierCurveTo(50, 150, 150, 50, 200, 200);
            document.getElementById('myCanvas').getContext('2d').stroke();
        </script>
    </body>
</html>
HTML/MJEL Code
[edit]
<html>
    <head>
        <title>example</title>
        <script src="magnet-games.w3spaces.com/mjel.js"></script>
    </head>
    <body>
        <h1>Hello World!</h1>
        <canvas id="myCanvas" width="200px" height="200px"></canvas>
        <script>
           bezier(0,0,50,150,150,50,200,200)
        </script>
    </body>
</html>

HTML DOM Simplification

[edit]

MJEL is designed to make HTML DOM simpler and easier to write and understand. Even though MJEL DOM is less useful than MJEL Canvas, it can still be used to simplify.

MJEL VS Vanilla JavaScript (Changing HTML elements)

[edit]
HTML/JS Code
[edit]
<html>
    <head>
        <title>example</title>
    </head>
    <body>
        <h1 id="demo">Hello World!</h1>
        <script>
            document.getElementById('demo').innerHTML = Hello Earth!
        </script>
    </body>
</html>
HTML/MJEL Code
[edit]
<html>
    <head>
        <title>example</title>
        <script src="magnet-games.w3spaces.com/mjel.js"></script>
    </head>
    <body>
        <h1 id="demo">Hello World!</h1>
        <script>
            changeHtml('demo', 'Hello Earth!')
        </script>
    </body>
</html>

HTML Custom Tags/HTML Functions

[edit]

MJEL can create Custom HTML Tags using hFunction()

HTML/MJEL Code
[edit]
<html>
    <head>
        <title>example</title>
        <script src="magnet-games.w3spaces.com/mjel.js"></script>
    </head>
    <body>
        <h1>Hello World!</h1>
        <fn-greet></fn-greet>
        <canvas id="myCanvas" width="200px" height="200px"></canvas>
        <script>
            hFunction('fn-greet','<h1>Hi</h1><h2>there</h2>')
        </script>
    </body>
</html>

References

[edit]

Magnet games' Official MJEL Site

MJEL Source Code

JavaScript

HTML Canvas

HTML DOM

HTML