Draft:Magnet Javascript Extention Library


= =


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

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)

HTML/JS Code:
<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:
<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)

HTML/JS Code
<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
<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

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)

HTML/JS Code
<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
<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

MJEL can create Custom HTML Tags using hFunction()

HTML/MJEL Code
<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

Magnet games' Official MJEL Site

MJEL Source Code

JavaScript

HTML Canvas

HTML DOM

HTML

Content Disclaimer

Informasi ini disarikan dari Wikipedia dan disajikan kembali untuk tujuan edukasi. Konten tersedia di bawah lisensi CC BY-SA 3.0. Kami tidak bertanggung jawab atas ketidakakuratan data yang bersumber dari kontribusi publik tersebut.

  1. The information displayed on this website is sourced in part or in whole from Wikipedia and has been adapted for the purpose of restating it. We strive to provide accurate and relevant information, however:
  2. There is no guarantee of absolute accuracy. Wikipedia is an open, collaborative project that can be edited by anyone, so information is subject to change.
  3. It is not intended to constitute professional advice. The content displayed is for informational and educational purposes only. For important decisions (e.g., medical, legal, or financial), please consult a professional.
  4. Content copyright. Wikipedia is licensed under the Creative Commons Attribution-ShareAlike License (CC BY-SA). This means that content may be reused with appropriate attribution and shared under a similar license.
  5. Responsible use. Any risk arising from the use of information from this website is entirely the responsibility of the user.