bind() method

The .bind() method can be used to modify the value of this for the function it’s called on. This can be extremely useful when you have a class function that needs its instance set to this when treating one of its own methods as a callback. The event listener API overrides this, making it difficult to use the variable in the desired context. With <func>.bind(<val>), you can specify what the value of this should take on when that method is called (effectively wrapping the original function with the new this context).

Attributes

• If you need an absolute value of a some numeric property of a DOM element, the getComputedStyle(<DOM element>) function could be your friend. This ensures that, even if you set something like the width or margin or whatever using CSS calc, you will get the absolute value in pixels (with px as a string appended, so this will need to be stripped and parsed as an integer if needed).

Variable Declaration

• var :: default variable declaration (variable declarations are hoisted to top of scope by interpreter). var’s are function-scoped (limited to function it’s defined in) but not block-scoped (limited to block it’s defined in).
• let :: variable declaration that is block-scoped (ie scoped by an if statement); is not hoisted
• const :: variable declaration that does not allow for over-writing the variable; doesn’t allow declaration without assignment. Is block-scoped like let; is not hoisted
• the reason let and const are often preferable is because they allow you to define a more specific scope (ie block-scoped), which in general results in less confusion and improved maintainability.

DOM Selection

• Using querySelector - detail usage

Creating DOM Elements

Built-in Functions

Filter, forEach, replace, split etc (ie d3 filtering techniques)

Function Closures

Preserving Data Across Async Callbacks

Getting Data From DOM

You can always use a form, and when the submit button is clicked, send the form data to a Javascript function or to a PHP file. But in reality, no one wants to do that. What you can do, like you did with the Monte Carlo tic-tac-toe, is simply attach a click listener to a button and once it’s pressed, let JS handle getting DOM data and/or performing GET/POST requests.

API Requests

• GET Request
• POST Request
• AJAX Request:
• CORS Chat: CORS stands for Cross Origin Resource Sharing. It’s a protocol that uses additional headers to allow a web app on one domain to access resources located at a different origin/domain. An app makes a CORS request when it requests a resource at a different origin. Now, I’ve had trouble understanding what CORS is for some time, mainly because nobody will just explain it clearly and why I get errors. Basically, I’ve tried building applications that access an API using Javascript’s Fetch, ie strictly client-side, no backend making the requests. Occasionally I run into an issue with CORS, where the browser tells me there’s no access-allow-control-origin on the server or something. I always figured I just didn’t understand CORS and my headers were messed up. As it turns out, some API’s are literally configured not to allow non-server requests (ie client side). On top of that, the Fetch API is enforced by the browser to follow the same-origin policy, which is straightforward enough: a web app using the Fetch API can only access resources from the same origin it was loaded from; otherwise, the response from the remote origin we want access to must include the correct CORS headers. So that basically explains it to me; the idea of CORS is to let different origins/domains share resources securely and the browser will enforce this when trying to access a remote resource. When an API doesn’t have an Access-Control-Allow-Origin header (which specifies what origins can request resources) or proper CORS config, then client-side requests are simply rejected as no header is configured and thus no origins are assumed to be allowed. This does not prevent server-side applications from accessing the API, however, namely a request with python will likely work just fine. Look no further than this answer.