i-js

ATTENTION!

This article is over 4 years old, it may be outdated!

i-js

Published on 10/14/2013 | 14.10.12013 HE

Today I decided to dig deeper into JavaScript and experiment a bit with scope, query selection and the general manipulation of the DOM. To do so I set up an object to store all my functions - this is not necessary but definitely more fun.

After naming my Object $ (because I new this from jQuery and I thought it would look cool) I renamed it to I and here comes the fun part: While learning JS I build i.js - a tiny JS “Framework” that enables you to write JS nearly the same you’d speak. For example you may thing: “I want to get the Object with the class name test” - to get this, simply write the following:

I.WantA.classname("test");

This will return you the element that has the class test. Not so cool? Well, let’s bring Events to the game!

// Spoken: "I want to add an Event that when you click on the 
// element with the ID js-removeClass a FUNCTION triggers"
I.WantTo.addEvent("click", "js-removeClass",function(){
	I.WantTo.removeClass("output","lorem");
});

The above script does the following:

  • When js-removeClass is clicked
  • the class lorem will be removed from an element with the class output

You can find a working Demo on CodePen or directly on my site. If you want to contribute more functions I’d be very happy!

Beside of this useless but fun Framework I also wrote a kinda useful function: _match(). _match() takes any value and checks if it’s a ID, a class or an Tag Name. When it matches one of these it returns the correct element.

var _match = function(el) {
    a = document.querySelector("."+el);
    b = document.getElementById(el);
    c = document.getElementsByTagName(el);
    if(a != null) {
        return a;
    }
    if(b != null) {
        return b;
    }
    if(c != undefined) {
        return c[0];
    }
};

Categories

Tags

Like this?

This website contains no advertisement, no tracking, no paid articles, and no shady-things-whatsoever. It is just content, provided free of charge and with accessibility in mind.

If you would like to support me in providing content - and code - for free or if this page has helped you or your company, consider supporting me directly.

You can support me via:

A colorful image of me wearing my DIY mask. The image has a colorful glitch effect.

Kevin Gimbel

is a DevOps Engineer and avid (Video) Gamer. He’s also interested in Sci-Fi, Cyberpunk, and dystopian books.

Wearing a mask is a good idea!

You can find out more about me if you wish.