Difference between revisions of "Javascript"
(→ES6) |
|||
| Line 16: | Line 16: | ||
==ES6== | ==ES6== | ||
===template strings | ===template strings=== | ||
*<a href="https://gist.github.com/bryanerayner/68e1498d4b1b09a30ef6">bryanerayner/generateTemplateString.js</a> | *<a href="https://gist.github.com/bryanerayner/68e1498d4b1b09a30ef6">bryanerayner/generateTemplateString.js</a> | ||
*https://leanpub.com/understandinges6/read#leanpub-auto-multiline-strings | *https://leanpub.com/understandinges6/read#leanpub-auto-multiline-strings | ||
| Line 90: | Line 90: | ||
http://www.javascript-coder.com/javascript-form/javascript-get-form.htm | http://www.javascript-coder.com/javascript-form/javascript-get-form.htm | ||
[==DOM diff=== | |||
*https://github.com/Matt-Esch/virtual-dom | |||
===DOM=== | ===DOM=== | ||
*http://www.w3schools.com/jsref/dom_obj_radio.asp | *http://www.w3schools.com/jsref/dom_obj_radio.asp | ||
[http://www.devguru.com/technologies/ecmascript/quickref/comparison_operators.html operators] | [http://www.devguru.com/technologies/ecmascript/quickref/comparison_operators.html operators] | ||
===[[ajax]]=== | ===[[ajax]]=== | ||
Revision as of 12:33, 4 March 2016
interview questions
https://gist.github.com/DmitrySoshnikov/3928607cb8fdba42e712
mathworks
https://www.nczonline.net/blog/2010/01/26/answering-baranovskiys-javascript-quiz/
tooling tips
- http://moduscreate.com/optimizing-react-es6-webpack-production-build/
- https://github.com/babel/example-node-server
- https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9#.2rjiycn50
<markdown>
- ~8/10/16 wamp/www/sbdev0/geniot/client/hrs/client -> iot.sitebuilt.net/xtest
running in windows "start": "set NODE_ENV=development&& nodemon lib/index.js --exec babel-node --presets es2015,stage-2 --watch lib" you get
Unverified.js:63 Uncaught TypeError: _pushPath is not a function
- webpack dev server
- DOES NOT WORK in updating the bundle if index.html is outside of /dist. Keep yout index.html inside your /dist folder
- needs this for history api
devServer: {
historyApiFallback: true
},
- windows package.json quirks
"deploy": "NODE_ENV=production webpack -p --config webpack.production.config.js",
"deploy": "set NODE_ENV=production&& webpack -p --config webpack.production.config.js",
- react-babel
npm init npm install --save react npm install --save-dev babel-loader mkdir public cd public touch index.html
- public/index.html
<!DOCTYPE html>
- webpack.config.js
module.exports = { entry: "./app/components/Main.js", output: { filename: "public/bundle.js" }, module: { loaders: [ { test: /\\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: 'babel' } ] } };
</markdown>
webpack
router
- http://krasimirtsonev.com/blog/article/A-modern-JavaScript-router-in-100-lines-history-api-pushState-hash-url
- http://work.krasimirtsonev.com/git/navigo/
- http://grapnel.js.org/
spa
http://demo.tutorialzine.com/2015/02/single-page-app-without-a-framework/#product/1
immutable
https://blog.risingstack.com/the-react-js-way-flux-architecture-with-immutable-js/
ES6
template strings
- <a href="https://gist.github.com/bryanerayner/68e1498d4b1b09a30ef6">bryanerayner/generateTemplateString.js</a>
- https://leanpub.com/understandinges6/read#leanpub-auto-multiline-strings
- https://ponyfoo.com/articles/es6-template-strings-in-depth
- https://developers.google.com/web/updates/2015/01/ES6-Template-Strings?hl=en
- http://www.2ality.com/2015/01/template-strings-html.html
- http://www.benmvp.com/learning-es6-template-literals-tagged-templates/
custom elements in es6
- http://www.html5rocks.com/en/tutorials/webcomponents/customelements/
- https://h3manth.com/new/blog/2015/custom-elements-with-es6/
- https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements/Custom_Elements_with_Classes
pojs
http://plainjs.com/javascript/?utm_source=javascriptweekly&utm_medium=email
promises
reactive functional programming frp
- http://research.microsoft.com/en-us/um/people/lamport/pubs/state-machine.pdf
- http://codenugget.co/2015/03/05/declarative-vs-imperative-programming-web.html
- http://www.infoq.com/articles/no-more-mvc-frameworks
- http://www.ebpml.org/blog15/2015/12/why-i-no-longer-use-mvc-frameworks-part-2/
- https://www.reddit.com/r/programmingcirclejerk/
- http://www.ebpml.org/blog15/2016/01/sam-a-functional-approach-to-ui-construction/
- rxjs
- immutable objects
plunker, jsFiddle, & jsBin
java is sexy: bind, call, apply
detecting window size
window.onresize = function(event) {
...
};
or since better not to overwrite onresize
window.addEventListener('resize', function(event){
// do stuff here
});
for size
screen.height; screen.width;
or
alert(window.screen.availWidth); alert(window.screen.availHeight);
creating library
callback
javascript design patterns
http://www.i-programmer.info/programming/javascript/1038-javascript-jems-asynchronous-patterns.html
js frameworks
- http://coenraets.org/blog/2012/02/sample-application-with-angular-js/
- http://www.ekito.fr/people/?p=3224
react
https://github.com/securingsincity/backbone-react-ui
angularJS
backbone
mongodb
node
meteor
ember
plan
use yeoman
mkdir my-app cd my-app npm install generator-angular yo angular
in Gruntfile.js change connect: hsotname: from 'localhsot' to '10.0.1.24' so it will run on LAN
grunt serve
rewrite stuff2get using angular
<syntaxhighlight lang="javascript">
it('sends a timestamp to a sever every time you push a button', function() {});
</syntaxhighlight>
design patterns
javascript tutorials by Crockford
javascript OOP using Literal Notation
Literal Notation seems much more readable to me.
OOP single
In cases where you don't need multiple instances of a Class, then it is easy to create a object like this: <syntaxhighlight>
var obj={
tisel : new Array(),
tesel : "" ,
ulsel : '.prog-tes ul',
lisel : '.prog-tes ul li',
idx : 0,
arr : new Array(),
new : function(){
this.tesel="dog";
this.tisel[0]="cat";
return "frog";
}
};
obj.new();
</syntaxhighlight> You declare all your variables. Make a fake new or constructor to initalize.
OOP multiple instances
If you need multiple instances of a class (many objects) and you want to use literal notation then you could do it like this <syntaxhighlight>
anima=new Object();
anima.large = "elephant"
anima['small'] = "mouse";
feline=new Object();
feline=new Array();
feline[4]=anima;
function MyClass(animal,feline){
this.tesel=animal;
this.tisel=feline;
return "frog";
}
MyClass.prototype={
ulsel : '.prog-tes ul',
lisel : '.prog-tes ul li',
idx : 0,
arr : new Array(),
new : function(){
console.log(this.tesel);
this.tesel="jerk";
this.tisel[17]="drugs";
this.tisel[0]="rock";
}
};
obj=new MyClass(anima,feline);
</syntaxhighlight> The stuff above function Myclass is just junk to try to see the diffferences between arrays and objects.
JSON Objects and Arrays
Use objects ...but... Objects treat indexes like an association.
- arr[4]="dog" [ , , ,"dog"]
- obj[4]= object [4:"dog"]
_SESSION variables
The problem with having stuff happen on the server is that it always forgets what is going on from moment to moment. The server waits for a request, it could be from anywhere in the world. It doesn't know you from a whole in the wall. The only thing you can do to be remembered is stick stuff in _SESSION variables.
http://www.javascript-coder.com/javascript-form/javascript-get-form.htm [==DOM diff===
