Skip to content

Instantly share code, notes, and snippets.

@miranda-zhang
Last active April 2, 2019 18:19
Show Gist options
  • Save miranda-zhang/fc54e4086f8506530c20aebb4df28b8e to your computer and use it in GitHub Desktop.
Save miranda-zhang/fc54e4086f8506530c20aebb4df28b8e to your computer and use it in GitHub Desktop.

Jquery

https://www.w3schools.com/jquery/jquery_examples.asp

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

seletor

$("element") = getElementsByTagName()

Examples:

div
body
textarea
:checkbox

ajax

$.ajax({
    url: "https://ws/rest/",
    data: query, 
    type: 'POST',
    contentType: "application/xml",
    dataType: "text",
    headers: {
        "Authorization": "Basic " + btoa("username:password")
    },
    success : function(text) {
        $('textarea').val(text);
    },
    error : function (xhr, ajaxOptions, thrownError){  
        console.log(xhr.status);          
        console.log(thrownError);
    } 
});

contentType is the requested data type. dataType is the type to treat it as after receiving.

document ready

$(document).ready(function(){
    // If your script tags are in the head of your HTML page
    // then you need to make sure you call funtions after the DOM is loaded.
});

javascript

debug

debugger;
console.log(JSON.stringify({ x: 5, y: 6 }));// expected output: "{"x":5,"y":6}"

https://www.w3schools.com/Js/js_debugging.asp

Knockout

https://channel9.msdn.com/Events/MIX/MIX11/FRM08

ko is the a keyword.

viewModel defines the model.

ko.observable(initial_value) keeps track of the model attribute, use with data-bind

data-bind

http://knockoutjs.com/documentation/text-binding.html

JSONP

JSONP is a way to share data between different domains, as the only part of a website that isn’t subject to the same-origin policy this is the script tag. As the name suggests, it stems from JSON (“JavaScript Object Notation”), but with a wrapper around it (called “padding”). https://sacha.me/articles/jsonp/

<script src="http://example.com/people/1234?callback=awesome"></script>
awesome({"Id": 1234, "Name": "Foo", "Job": "Bar"});

CORS

Cross Origin Resource Sharing

For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts. For example, XMLHttpRequest and the Fetch API follow the same-origin policy. This means that a web application using those APIs can only request HTTP resources from the same origin the application was loaded from, unless the response from the other origin includes the right CORS headers.

ES6

https://webapplog.com/es6/

Nodejs

https://nodejs.org/en/

require

var foo = require('./foo.js');
var bar = require('../lib/bar.js');
var gamma = require('gamma');

Browserify

http://browserify.org/

requirejs

http://requirejs.org/docs/start.html

npm

package manager for JavaScript

npm init

npm init -y

package.json

{
  "name": "my_package",
  "description": "",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/ashleygwilliams/my_package.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/ashleygwilliams/my_package/issues"
  },
  "homepage": "https://github.com/ashleygwilliams/my_package"
}

npm install

https://docs.npmjs.com/getting-started/using-a-package.json

npm install <package_name> --save

npm update

https://docs.npmjs.com/updating-packages-downloaded-from-the-registry

npm outdated -g --depth=0
npm update -g
npm list -g

repl.it

https://repl.it

Unminify

https://unminify.com/

If dev tool pretty print fails.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment