Tag Archives: JavaScript

CURRRRGGHHHSSSS

AKA CORS

I thought I had CORS all figured out. Of course, like all things programming, the more you think you know the sooner something is going to blow your world wide open. As a guy who codes for the web a lot, these errors are get under my skin. They’re annoying when you know you put a line of code in your server to allow all origins. They’re even more so annoying when the browser (or framework you’re using) tells you that you CAN’T use a wildcard and just allow ALL origins.

Let me leave this link right here: https://enable-cors.org/index.html

If you’re having CORS trouble on your server, it would behoove you to click that link there and finally be done with it. If you’re using ASP.NET chances are you’re using a Windows server and you’ll be able to use either the ASP.NET or IIS6/7 solutions.

My current favorite method for handling CORS with ASP.NET applications ( especially if you’re using SIGNALR and UseCors(CorsOptions.AllowAll) isn’t what you need, as browsers still puke with this in place )

<system.webServer>
     <httpProtocol>
         <customHeaders>
             <add name="Access-Control-Allow-Origin" value="http://localhost:58547" />
             <add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS, PUT, DELETE, TOKEN" />
             <add name="Access-Control-Allow-Credentials" value="true"/>
         </customHeaders> 
     </httpProtocol>
 </system.webServer>

This goes in your web.config with <configuration> as its parent element. You can use a wild card in place of the

"http://localhost:58547"

You CANNOT add another origin to the Access-Control-Allow-Origin. Why? No idea. But if you try, you’ll get an error like this

The ‘Access-Control-Allow-Origin’ header contains multiple values ‘http://localhost:58547, http://wolf-mywebsite.com&#8217;, but only one is allowed. Origin ‘http://wolf-mywebsite.com&#8217; is therefore not allowed access.


 

JavaScript: Creating Custom Constructors

This post is going to be about what I’ve learned throughout codeacademy’s tutorial section on creating custom constructors called ‘Construction Junction’

Custom Constructors: Allows properties to be set for an object upon it’s creation.

  • Custom constructors are useful in reducing the amount of code required when creating Objects.
  • A constructor is basically a template for Objects that allows you to create the Objects and set the values in a very simplistic manner.

Creating a Custom Constructor

The constructor is created by using the function parameter, naming the constructor so you can call it, and the Object will use upon creation.

function Person(name,age) {
  this.name = name;
  this.age = age;
}

Something worth noting is that the keyword “this” is being used here. The “this” keyword is what allows us to create Objects with different names because it calls the properties relative to the current object’s name.

Calling the constructor to create an object

The constructor can now be used to create Person objects, which will reduce the amount of code having to be written.

var bob = new Person("Bob Smith", 30);
var susan = new Person("Susan Jordan", 25);

The name of the bob object is defined by ‘var bob’
The Person constructor is then called by using the ‘new’ keyword and specifying the constructor: ‘new Person();’
The Person constructor defines two properties, name and age, which are set equal to the parameters provided: (“Bob Smith”, 30); The first parameter here makes bob.name equal to “Bob Smith” and bob.age equal to the value of 30.

When using object constructor notation the code requires 3 lines of code to create each object, where our customer constructor requires only 1 line.

var bob = new Object();
bob.name = "Bob Smith";
bob.age = 30;

Imagine if we had an object that had 10 or more properties being stored within it, that would be a lot of lines of code required to be used. By using the custom constructor you can severely reduce the amount of code required.

Here is an example I created that uses 6 properties in the Object. Each Object and it’s properties can be easily defined using one line of code per Object.

function Dog(name, age, breed, color, preowned, disposition) {
    this.name = name;
    this.age = age;
    this.breed = breed;
    this.color = color;
    this.preowned = preowned;
    this.disposition = disposition;
}

//Only one line of code required to create each object, this reduces the total lines of code required 
//even if we're only creating two objects!

var Sunny = new Dog("Sunny", 4, "Pit", "blue", 0, "Happy");
var Killer = new Dog("Killer", 2, "Chihuahua", "brown", 1, "Hostile");

Even when our Object only has 6 properties, the reduction in the lines of code required is impressive. Here the same result achieved by creating the Sunny and Killer Objects using the Object Constructor method

var Sunny = new Object();
Sunny.name = "Sunny;
Sunny.age = 4;
Sunny.breed = "Pit";
Sunny.color = "blue";
Sunny.preowned = 0;
Sunny.disposition = "Happy;

var Killer = new Object();
Killer.name = "Killer";
Killer.age = 2;
Killer.breed = "Chihuahua";
Killer.color = "brown";
Killer.preowned = 1;
Killer.disposition = "Hostile";

Using the Person Custom Constructor, I created the two Objects using 10 lines of code. (blank lines included)
Using the Object Constructor method, we used 15 lines of code. (blank lines included)

5 lines of code between two Objects doesn’t seem big, but if we added one more object then the Custom Constructor method would require one more line of code to add the Object, the Object Constructor would require another 8 lines of code.

How to declare a property without adding it to the constructor’s parameters

In all the previous examples I’ve had all the properties defined using parameters in the Constructor’s function

function constructorName(parameter1, parameter2, parameter3)

We then passed the values into the parameters by defining them when we create each object

var objectName = new constructorName(parameter1, parameter2, parameter3);

By defining the properties using the parameters in this method, it allows us to set different values for the properties for each Object.

What if we wanted to create a property that contained a static value across every Object we create using this constructor?

This can be easily done by declaring the value inside the function with a static value and not creating a parameter value for it. Here is an example using the Person Constructor again in which a property contains a static value.

function Person(name,age) {
  this.name = name;
  this.age = age;
  this.species = "Homo Sapiens";
}

The example above creates a property called this.species in the Object that set to “Homo Sapiens”. So say we create two objects, sally and holden using the above constructor. Since the parameters defined in the Constructor are name and age, these are the only properties we declare when calling it [the constructor].

var sally = new Person("Sally Bowles", 39);
var holden = new Person("Holden Caulfield", 16);

Even though we only declared the name and age properties, sally and holden both contain a third property called species which is equal to “Homo Sapiens” because we defined this value when we created the Constructor.

The properties contained by the Object Sally created using the constructor:
sally.name = ” Sally Bowles”
sally.age = 39
sally.species = “Homo Sapiens” [The property we declared in the Constructor]

The properties contained by the Object holden created using the constructor:
holden.name = “Holden Caulfield”
holden.age = 16
holden.species = “Homo Sapiens” [The property we declared in the Constructor]

Constructors with Methods

So as it turns out, constructors not only have the ability to set the properties of an Object via defining parameters or  declaring them directly in the constructor, Constructors also have the ability to define methods! This allows the Object to have its own methods as soon as it’s created.

Here is an example of defining a method in the constructor. The constructor will contain a method that calculates the area of a rectangle based upon two provided parameters, height and width.

function Rectangle(height, width) {
  this.height = height;
  this.width = width;
  this.calcArea = function() {
      return this.height * this.width;
  };

The method in the example is named calcArea and again, it calculates and returns the area of a rectangle based upon the provided height and width parameters. So when we create an Object using this constructor, there will be a value contained at objectName.calcArea based upon the value returned by the calculation,

You can create a variable and set the value to be equal to that of which was returned by the method in our Object (objectName.calcArea).

var rex = new Rectangle(7,3);
var area = rex.calcArea();

The first line creates an Object called rex using the Rectangle(); constructor we defined above, the value 7 is passed in for height and the value 3 is passed in for width. The method calcArea that was defined in the constructor now takes the two values that were passed in for the constructors parameters and multiplies them to calculate the area of a rectangle. We can therefore create a new variable called area and set it equal to the value returned by method rex.calcArea();

This is the final example that codeacademy provides to illustrate the ease of adding similar objects  as well as how to obtain a value calculated by a method

//This function creates our constructor
function Rabbit(adjective) {
    this.adjective = adjective;
    this.describeMyself = function() {
        console.log("I am a " + this.adjective + " rabbit");
    };
}

// now we can easily make all of our rabbits
var rabbit1 = new Rabbit("fluffy");
var rabbit2 = new Rabbit("happy");
var rabbit3 = new Rabbit("sleepy");

//This is how we can invoke a method in our Object. The method in our constructor writes to 
//the console "I am a " + thePassedParameter + " rabbit" which is what is displayed when we call the 
//method.
rabbit1.describeMyself();
rabbit2.describeMyself();
rabbit3.describeMyself();

This is just a quick run-down on what constructors are and we can do using custom constructors, all in one place.

  • Constructors are used to create objects, one method is to use the Object constructor. The Object constructor becomes tedious however when creating multiple objects and having to add the properties each and every time.
  • We can create our own Custom Constructors in order to set the properties for an Object right when it’s created.
  • Custom Constructors can be comprised of defined parameters, properties with set values, as well as methods.