Using JavaScript for Custom Purposes

Using javascript for custom purposes

This shows the two-way interaction between Javascript and c#.

Javascript calls a c# method
C# gets the result of an expression in Javascript

Type scriptType = Type.GetTypeFromCLSID(Guid.Parse("0E59F1D5-1FBE-11D0-8FF2-00A0D10038BC"));

dynamic obj = Activator.CreateInstance(scriptType, false);
obj.Language = "javascript";
obj.AddObject("MyClass",new JSAccessibleClass());

obj.Eval("MyClass.MsgBox('Hello World')"); //<--1
var result = obj.Eval("3+5"); //<--2

[ComVisible(true)]
public class JSAccessibleClass
{
    public void MsgBox(string s)
    {
        MessageBox.Show(s);
    }
}

Using custom HTML attributes for JavaScript purposes?

You should use classes and IDs for both javascript and CSS. Your colleague is wrong.

It helps to remember that you want to keep separation between data (html), presentation (css styling), and behavior (javascript). Classes and IDs are there for a reason, and it's not for styling (and not for javascript, either!). They are there to allow you to semantically mark up your document.

When writing proper HTML, your classes and IDs should reflect the actual content and purpose of the data those nodes contain. Then, when you need to style them, you can specify the proper styling for, say the .zip_code class. And when you need special behavior, you can use javascript to apply the required behavior to your .deletable list items.

Of course, sometimes in the real world, there are people who feel very strongly against things, and you end up having to go along with what they want. In this case, you may have to compromise with your colleague and use HTML5's data-* attributes, as someone else suggested. However, while this is a solution that will result in valid HTML, it is not what data-* attributes were designed for, so it isn't technically the correct solution.

What is the purpose of custom events in javascript?

I use it (shameless plug) to raise "resize" events on div elements and then use a separate binding framework (aurelia) to listen to those events.

the explicit code example is:

var element = this.element; // some element
var erd = erd({ strategy: 'scroll' });

var widthOld = element.offsetWidth;
var heightOld = element.offsetHeight;

this.callback = () => {
  var event = new CustomEvent("resize", {
    detail: {
      width: this.element.offsetWidth,
      height: this.element.offsetHeight,
      widthOld: widthOld,
      heightOld: heightOld
    }
  });
  element.dispatchEvent(event);
  widthOld = this.element.offsetWidth;
  heightOld = this.element.offsetHeight;
};

erd.listenTo(this.element, this.callback);

where erd is element-resize-detector that allows you to detect when any div changes shape.

Can I add a custom attribute to an HTML tag?

You can amend your !DOCTYPE declaration (i.e. DTD) to allow it, so that the [XML] document will still be valid:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
[
  <!ATTLIST tag myAttri CDATA #IMPLIED>
]>

#IMPLIED means it is an optional attribute, or you could use #REQUIRED, etc.

More information is in DTD - Attributes.

Custom counting method in JavaScript

The problem is because in a function, the return should be the last line.

The return statement ends function execution and specifies a value to be returned to the function caller. (MDN Docs)

Since the function execution ends, it means the code after the return statement is never executed.

I recommend debugging your code using a code execution visualizer

Here's part of your code. You tried to change the value of this.quantity after the return statement.

showStorage(param) {
    if(param != null){
        return this.quantity + param; // This doesn't change the value of this.quantity. It just returns that value + 10 (in your example). The value of `this.quantity` is always the same.

        // This line does not run because it's after the return statement
        this.quantity += param;
    }
        else {return this.quantity;}
    }
}

Here's a minimal fix. You need to increment the value of this.quantity, then return it.

showStorage(param) {
    if(param != null){
        this.quantity += param;
        return this.quantity;
    }
        else {return this.quantity;}
    }
}

Here's a refactor taking into account comments from Ivar and Cristian Traìna

showStorage(param) {
    if(param){ // an empty `param` is `undefined`, not `null` as the commenter said above.
        this.quantity += param;
    }
    return this.quantity;
}

Custom Hashable implementation in Javascript

class HashTable {
  constructor(size) {
    this.data = new Array(size);
  }

  _hash(key) {
    let hash = 0;
    for (let i = 0; i < key.length; i++) {
      hash = (hash + key.charCodeAt(i) * i) % this.data.length;
    }
    return hash;
  }

  set(key, value) {
    const address = this._hash(key);
    if (!this.data[address]) {
      this.data[address] = [];
    }

    for (let el of this.data[address]) {
      if (el[0] === key) {
        el[1] = value;
        return;
      }
    }
    this.data[address].push([key, value]);
  }
  get(key) {
    const address = this._hash(key);
    const currentNode = this.data[address];
    if (currentNode) {
      for (let arr of currentNode) {
        if (arr[0] === key) {
          return arr[1];
        }
      }
    }
    return undefined;
  }
}

const myHashTable = new HashTable(2);
myHashTable.set("cherry", 100);
myHashTable.set("cherry", 4);
console.log(myHashTable.get("cherry")); // returns 100 instead of 4
myHashTable.set("peach", 9);
console.log(myHashTable.get("peach"));
myHashTable.set("apple", 2);
console.log(myHashTable.get("apple"));

Using JavaScript for Custom Purposes