# HTML Code Injections ## ``` ### External JavaScript File ```
``` ### Dynamically ``` const script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'https://securebancard.transactiongateway.com/token/Collect.js'; script.setAttribute('data-tokenization-key', 'your-token-code-here'); script.setAttribute('data-variant', 'inline'); script.onload = () => this.onScriptLoaded(); document.body.appendChild(script); })); ``` # Imports and Exports Here’s a cheatsheet to show you the different ways of exporting and the corresponding way to import it. It really distills to 3 types: name, default, and list. Just make sure your export matches your import way and you will have no problem. ``` // Name Export | Name Import export const name = 'value' import { name } from '...' ``` ``` // Default Export | Default Import export default 'value' import anyName from '...' ``` ``` // Rename Export | NameImport export { name as newName } import { newName } from '...' ``` ``` // Name + Default | Import All export const name = 'value' export default 'value' import * as anyName from '...' ``` ``` // Export List + Rename | Import List + Rename export { name1, name2 as newName2 } import { name1 as newName1, newName2 } from '...' ``` # Functions ## Dynamic Functions `this["function_name_as_a_string"](parameters);` ## Arrow Functions `const variable_name = (parameters) => { your_code_here };` ## Anonymous Functions `const variable_name = function(parameters) { your_code_here }` ## Spread Syntax The spread `(...)` syntax allows an iterable, such as an array or string, to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected. In an object literal, the spread syntax enumerates the properties of an object and adds the key-value pairs to the object being created. ([Link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)) ## && Expression `true && expression` always evaluates to `expression`, and `false && expression` always evaluates to false. # Console ## Logging Hacks https://www.sitepoint.com/beyond-console-log-level-up-your-debugging-skills/ # Comments https://en.wikipedia.org/wiki/JSDoc ``` /** * Returns x raised to the n-th power. * * @param {number} x The number to raise. * @param {number} n The power, must be a natural number. * @return {number} x raised to the n-th power. */ function pow(x, n) { ... } ``` # HTTP Requests ``` const baseURL = 'https://example.com/rest/api/2/search?'; const options = '&maxResults=20'; const username = 'api'; const token = '550e8400-e29b-41d4-a716-446655440000'; // Add basic authentication header data. let headers = new Headers(); headers.set('Authorization', 'Basic ' + btoa(username + ":" + token)); // Fetch data from API. async function getIssues() { let response = await fetch(baseURL + jql + options, { method: 'get', headers: headers }); let data = await response.json(); console.log(data); ``` # JSON ## Finding Keys ``` let JSON = { fname : "John", lname : "doe", age: 23 } for (let key in JSON) console.log('key', key); ``` Output: ``` > "fname" > "lname" > "age" ``` # REGEX ## Instantiate ``` const re = /foo/; const val = 'Hello'; let result = val.search(re); ``` ## String Functions ``` const matches = 'aBC'.match(/[A-Z]/g); // Output: Array [B, C] ``` ``` const index = 'aBC'.search(/[A-Z]/); // Output: 1 ``` ``` const next = 'aBC'.replace(/a/, 'A'); // Output: ABC ``` ``` const result = /^dim/.test("dimValue"); // Output: true ```