Difference between revisions of "Javascript"

Revision as of 11:20, 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

1. 1. ~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

1. 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
    },

1. 1. 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",

1. 1. react-babel

   npm init
   npm install --save react
   npm install --save-dev babel-loader
   mkdir public
   cd public
   touch index.html

1. 1. public/index.html

<!DOCTYPE html>

1. 1. 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>

ES6

https://leanpub.com/understandinges6/read#leanpub-auto-multiline-strings

https://ponyfoo.com/articles/es6-template-strings-in-depth

custom elements in es6

pojs

http://plainjs.com/javascript/?utm_source=javascriptweekly&utm_medium=email

promises

http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html?utm_source=javascriptweekly&utm_medium=email

reactive functional programming frp

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

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

   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.

javascript tutorial

http://www.javascript-coder.com/javascript-form/javascript-get-form.htm

DOM

http://www.w3schools.com/jsref/dom_obj_radio.asp

operators

@@ Line 12: / Line 12: @@
 https://ponyfoo.com/articles/es6-template-strings-in-depth
 ===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

Anonymous

Search