This is just a simple Javascript library I have built as a personal project called QuickJS my goal is to put most of the Javascript language inside a library. Please note I may release this on its own website eventually but right now it is just a personal project that in all honesty I have built in a few days time. So feel free yourself to help build onto this project if you see fit Thanks.

 

Edit:

Project now moved to github

 

https://github.com/webdeveloper73/QuickJs

 

 

QuickJS Example 1(QOn Method)

 

The QOn method basically handles firing off different on events.

Here are a list of some events the QOn method can handle

 

1. keydown(Same as onkeydown js event)
2. keypress(Same as onkeypress js event)
3. keyup(Same as onkeyup js event)
4. submit(Same as onsubmit js event)
5. blur(Same as onblur js event)
6. click(Same as onclick js event)
7. change(Same as onchange js event)
8. select(Same as onselect js event)

 

<script>
//Besure DOM is ready
       QuickJs.QReady(function(){  

        QuickJs.QOn('DivId','click',function(){
        alert("DIV CLICKED");    
        });
 
        });
</script>

You can also call these events independently without using QOn like this

 

<script>
//Besure DOM is ready
       QuickJs.QReady(function(){  
      
        QuickJs.QClick('DivId',function(){
        alert("DIV CLICKED");    
        });
 
        });
</script>

 

QuickJS Example 2(QEachClass)

 

Sometimes you will need the ability to change elements with the same CSS class name such as

to do this I provided a method called QEachClass

 

<script>
//Besure DOM is ready
       QuickJs.QReady(function(){  
      
        QuickJs.QEachClass('Class',function(){
       //JS Code to run
        });
 
        });
</script>

please note methods like QCss handles this automatically

QuickJs.txt

Edited September 3, 201312 yr by webdesigner93

Oh and an example would be

 

       <script>
        QuickJs.QReady(function(){   
         QuickJs.QHtml('output','HELLO WORLD');
        });
        </script>

 

this will first check to besure the DOM is fully loaded using the QuickJs QReady method and then it will search for the div with the ID of output and populate that div with the words HELLO WORLD

Awesome

Awesome

Thank u

This looks like a very useful lightweight tool you are developping. You certainly have a very modern and modular aproach to programming. You make it very easy for users of your script to pass the needed arguments to the functions because of your well explained comments. Do you think its still necessary with the ActiveXObject in the conditional statement though? As i understand all browsers ecxept IE 5 an 6 uses the XMLHttpRequest object.

Anyway: Thanks a lot. This can be very usefull for many of us

This looks like a very useful lightweight tool you are developping. You certainly have a very modern and modular aproach to programming. You make it very easy for users of your script to pass the needed arguments to the functions because of your well explained comments. Do you think its still necessary with the ActiveXObject in the conditional statement though? As i understand all browsers ecxept IE 5 an 6 uses the XMLHttpRequest object.

Anyway: Thanks a lot. This can be very usefull for many of us

Yes i guess i could of left out the ActiveXObject. But i always got so use to including it in my js code it became a habbit. Plus it only takes one sec to write the else statement for it so not really a whole lot of wasted effort But im glad you like the code im deff still expanding on it a lot but atleast i have a starting point finished

So ive added a lot of new methods to the above library some include

 

1)QToggle(Toggles between hide and show)

2)QJsonParse(Parses JSON Request)

3)QReady(Checks to be sure DOM is ready and loaded)

4)QTrim(Trims whitespace from beginning and end of string)

5)QSubmit(Binds form to the js event onsubmit)

6)QSerialize(Put together string of form elements for submission)

7)QKeyDown(Binds element to onkeydown event)

8 QImgPreloader(Takes array of image urls as parameter and preloads those images)

 

a simple example of for instance making an ajax request would be

 

<html>
<head>
<title>Sending Ajax Request</title>
<script src="QuickJs/QuickJs.js"></script> 
<script>
        //Besure DOM is ready
        QuickJs.QReady(function(){   
        //Perform ajax request only on submit
         QuickJs.QSubmit('form',function(){
         //Perform ajax request
         QuickJs.QAjax('form','testAjax.php','output');
         });   
        });
        </script>
<body>
<!--FORM GOES HERE-->
</body>
</head>
</html>

Edited August 28, 201312 yr by webdesigner93

At the risk of giving you a whole bunch of extra work, I think the idea of passing the element's ID in as a string is a bad one; I think the library being flexible enough for a CSS selector or even an element itself would be much better.

 

As an example, quite often in my websites I add a class to an element to identify it for JavaScript interaction, something like "do-show" or "do-refresh." This allows me to bind the same functionality to multiple elements or delegate the event to anything with that class.

 

It's also worth thinking of the DOM as a toll road: if I can travel it once (and store the reference to the other side) then I don't need to pay the toll again. By the looks of things, if I wanted to bind 2 events to an element using your library, I'd have to find the element by ID twice. It would be nicer and more efficient if I could find it ones then bind the events to the reference.

 

It also looks like I can only bind a single event to each element.

 

Your library's a good start and I like the idea of something small and simple to use rather than some of the more monstrously larger libraries, but I think it needs more work before it's ready.

At the risk of giving you a whole bunch of extra work, I think the idea of passing the element's ID in as a string is a bad one; I think the library being flexible enough for a CSS selector or even an element itself would be much better.

 

As an example, quite often in my websites I add a class to an element to identify it for JavaScript interaction, something like "do-show" or "do-refresh." This allows me to bind the same functionality to multiple elements or delegate the event to anything with that class.

 

It's also worth thinking of the DOM as a toll road: if I can travel it once (and store the reference to the other side) then I don't need to pay the toll again. By the looks of things, if I wanted to bind 2 events to an element using your library, I'd have to find the element by ID twice. It would be nicer and more efficient if I could find it ones then bind the events to the reference.

 

It also looks like I can only bind a single event to each element.

 

Your library's a good start and I like the idea of something small and simple to use rather than some of the more monstrously larger libraries, but I think it needs more work before it's ready.

I started out just allowing the use of ID selectors instead of class selectors but their is a method that i built to allow the use of multiple classes which is this method.

 

/**
* Handles looping through each given CSS class
* @param {String} element
* @param {String} callback
*/
    QEachClass: function(element, callback) {
        var ClassName = document.getElementsByClassName(element);
        if (ClassName[0] !== undefined) {
            for (var i = 0; i < ClassName.length; i++) {
                callback(ClassName[i]);
            }

        } else {
            console.log("QuickJs Failed: QEachClass method:Undefined parameter");
        }

    },

i just haven't implemented the use of the above method inside every other method that currently only accepts an elements ID, but i have started changing this for example the QCss method allows a style change of a single element or multiple elements with the same class name

 

 /**
* Handles setting a css property
* @param {String} element
* @param {String} sName
* @param {String} val
*/
    QCss: function(element, sName, val) {
        var ElemName = document.getElementById(element);

        /**
* Check if we are setting a css class as our element
* or a css ID. If we are setting a class
* we need to loop through all existing elements with the
* same class name
*/
        if (this.QDoesClassExist(element) === true) {

            //Loop through CSS classes
            this.QEachClass(element, function(e) {
                e.style[sName] = val;
            });

        } else {
            //Set the style for a single css ID only
            ElemName.style[sName] = val;
        }

        return this;



    },

anyways point is im slowly but surely improving on the library itself and hope people like you will continue to still provide useful feedback

New method added for binding multiple events to a element

 

/**
* Binds event to element
* use QBind if you want to bind multiple events to a single element
* Example:
* //Array of events
* var myArray = ["click","keydown"];
* //Now bind the events
* QuickJs.QBind('MyElement',myArray,function(){
* alert('Event Fired');
* });
* @param {String} element
* @param {String} callback
*/
QBind: function(element,event,callback){
if(event instanceof Array){

for(var i = 0; i < event.length; i++)
{
this.QOn(element,event[i],function(){
callback();
});

}

}else{
//An array was not used so just fire off the single event
this.QOn(element,event,function(){
callback();
});
}
}, 

Example:

 

//Array of events
var myArray = ["click","keydown"];
//Now bind the events
QuickJs.QBind('MyElement',myArray,function(){
alert('Event Fired');
});

Edited November 13, 201312 yr by webdesigner93

awsome

Ah.. cool guys this looks some what pretty and good also thanks for sharing this content., also i'd use the examples for my clarification. realy a awesome post.

Small and simple coding its very useful stuff to everyone thanks for the update.