No.js

No.js is an extremely lightweight javascript library that makes you do DOM manipulations without writing any javascript at all. All you'll need to add are html attributes instead and No.js does the magic for you.

No.js takes away the burden of repeatedly writing trivial UI related javascript code. You'd simply not write any javascript at all! Hence the name "No.js"

(Please note that even though No.js allows you write no javascript, No.js itself is written in Javascript.)

USE CASE

Imagine you are building an interactive page that does simple DOM manipulations in response to user interactions.

You want to add a css class to some tag when a user hovers on some other tag. Here are the ways you may do it:

With jQuery

With vanilla javascript

With No.js

WHY USE No.js?

1. It saves the stress of writing any javascript at all. You may only need to write javascript code when you need to do things like number calculations, make ajax calls etc.

2. You don't have to load a heavy libraries to do little DOM manipulations. No.js is very lightweight (1KB), this is probably as light as the vanilla javascript code you might have otherwise written.

3. It is very intuitive and easy to understand. With a near english syntax.

4. It encourages writing less Javascript and more CSS. With the ease of triggering class/attribute changes, it becomes easier to add interactive feedbacks to css classes, than writing javascript animations

5. It does not require prior Javascript knowledge. You basically don't need any javascript knowledge to do DOM manipulations easily

WHAT No.js DOESN'T DO

No.js only helps with simple DOM manipulations like changing attribute, removing a DOM, etc. It doesn't help with features like number calculations, making ajax calls etc. In this case you may need to add a different library to help with it, or resort to vanilla javascript.

INSTALLATION

npm install nojs

or download here

Then link it to the bottom of your web page like so:

Or you can link directly to the remote distribution like so:

FULL REFERENCE

Every html tag that includes No.js tag attributes must also include the attribute no-js

All tag attributes take the form:

on-[eventType]-[action]-[propertyType]="[target] [propertyName(optional)] [propertyValue(optional)]"

Where:

1. eventType is any of these javascript events

2. action can either be add, remove, set, reset, toggle or switch

3. propertyType can be attribute, class, id, text, value or dom

Here is a list of all possible tag instructions:

Remove/Set attributes

on-[eventType]-set-attribute="[target] [attributeName] [attributeValue]"

on-[eventType]-remove-attribute="[target] [attributeName]"

Example:

Remove/Add/Set/Toggle/Switch classes

on-[eventType]-add-class="[target] [className]"

on-[eventType]-set-class="[target] [className]"

on-[eventType]-remove-class="[target] [className]"

on-[eventType]-toggle-class="[target] [className]"

Example:

on-[eventType]-switch-class="[target] [className]"

Example:

Remove/Set id

on-[eventType]-set-id="[target] [idValue]"

on-[eventType]-remove-id="[target]"

Example:

Remove DOM

on-[eventType]-remove-dom="[target]"

Example:

Set/Reset value

on-[eventType]-set-value="[form input target] [value]"

on-[eventType]-reset-value="[form input target]"

Example:

Set text

on-[eventType]-set-text="[target] [textValue]"

Example:

Target the current tag In the situation where the target element is the same as the origination element, you simply add the -self suffix to the attribute and exclude the target from the arguments like so.

on-[eventType]-add-class-self="[className]"

Example:

This is a new library and has plenty room for improvement. Please report issues here.

Also feel free to send in Pull Requests. :)