Giter VIP home page Giter VIP logo

javascript-in-one-pic's Introduction

Javascript in one pic

[ Languages: English, 中文, 正體中文, Português, Español ]

Gitter chat button BitCoin donate button

Online version

Online Mindmap

TODO

  • Syntax highlight

Color notes

not recommended important warning

Preview

js in one pic

About this project

The original intent of this project was to note down the syntax and basic concepts of Javascript for personal use, also used as a syllabus for teaching at the same time. The effectiveness of using a Mind map diagram to summarize a programming language is totally unexpected, it looks like a catalogue of handbook talking about Javascript and filled with syntax details. With a single picture/file, Javascript programmers can not only have a overview of the whole picture of this language, but also could locate to practical syntax examples ASAP.

The original mindmap diagram is drawn with Mindnode and exported to PDF/PNG/OPML files along with a *.mm file which can be edited with FreeMind, another SVG file will be released after the whole project is finished(issues #9).

In addition to Javascript, Python3 & Golang versions are on the way! If you find this project helpful, please consider making a donation with bitcoin or other way 🍻

Related projects

TODO

  • Function(basic) - inside function: arguments, return;
  • Function - as value: callback;
  • Function - methods: apply/call/bind;
  • Array - methods: map/reduce;
  • Object(OOP) - constructor, properties;
  • Object(OOP) - inheritance;
  • Scope;
  • Function - closures;
  • Operators - bitwise;
  • Flow control - try/catch;
  • ES6;

References

  1. Professional JavaScript for Web Developers
  2. JavaScript Garden
  3. JavaScript | MDN
  4. 图解Javascript上下文与作用域

License

See the LICENSE file for license rights and limitations (MIT).

javascript-in-one-pic's People

Contributors

alicona avatar appleboy avatar claylevering avatar gitter-badger avatar lennonjesus avatar mii9000 avatar nonemoticoner avatar peterdavehello avatar peterood avatar rainyear avatar thearunster avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

javascript-in-one-pic's Issues

Should re-organize directory structure for multiple languages

Let say others want to add different languages, so the directory js in one pic.mindnode should be updated to reflect the change. I suggest like this:

[LANG]
|    |---project-js-in-one-pic.mindnode
|    |---project-js-in-one-pic.pdf
|    |---project-js-in-one-pic.png
|    |---project-js-in-one-pic.svg
|
|---README-[LANG].md
|---README.md

This way, all other forked projects can be easily synced and fit into the upstream project.

Colored background causes expensive printing

I'd like this work a lot, and plan to print it on an A0 (33" * 46") printer. However, my printer driver is kinda feature-less, and so it really wants to print the background. I do not want to be wasteful, apart from misusing the most expensive liquid on earth.

Can the background be removed please? Thanks in advance!

Math object

Is the Math object not a standard? I believe it's in most JS environments, at least browser wise.

Horizontal alternative

I know it's a bit of a pain to do it, but a horizontal version would be cool so we can print it and put it in the wall of our desks.

Awesome work, thank you.

Why not differ between Expressions, Statements and prototypes?

I don't know if I like the representation of Objects and their data type categories. The issue I have in mind is mostly related to VM internals, such as Garbage Collection and memory allocation. For example, var x = 3 will allocate runtime memory while var x = new Number(3) will allocate heap memory. Therefore, x must be cleared afterwards with the null trick or traced by the lifetime-GC.

Also, switch/case uses expressions, not statements. What does that mean? This is possible:

var myvariable = 'somecontent';

switch(myvariable) {
    case (function() {
      console.log('expression!');
      return 'somecontent';
    })():
      console.log('It worked!');
    break;
}

Such things are really hard to show when focussing on data types, as pretty much everything in ECMA is related to the difference of expressions and statements.

the example code for array.reduce can't get the expected result

the example code for array.reduce can't get the expected result.
in order to get the expected result 0, the second line should change + to - .

[55, 44, 33, 22, 11].reduce(function(p, c, i, arr){
//return p + c/(arr. length-i);
return p - c/(arr. length-i);
}, 55); // 0

Use a different example for parseInt("2.5").

Using parseInt("2.5"); // 2 as an example does not make it clear whether the interpreter floors or rounds the value.
As it will actually floor the value, using parseInt("2.7"); // 2 will surely avoid any confusion.

ES6 Features

Will you be adding new ES6 features? Particularly let and const?

Other languages-in-on-pic?

Amazing work, but when I looked at this what I thought was, I would really like to have one for other languages too! 😆

Feel free to close this issue if you think it's off the scope, but maybe someone that knows can point to similar resources for other languages.

Regards

Comments are not identifiers

The dark green branch going to the top says "Identifier" and then branches out in to several things, including...comments. Comments are not identifiers.

arguments are an array

Great stuff! I learned a few things.
I noticed you have written function's arguments variable as an object, but it is an Array.

SVG version

Can we have a SVG version of the image please

A more informative README for the uninitiated

It would be fantastic to have a readme with more information related to the history, intent, creation and tools surrounding this project. Other projects of a similar nature would be of interest too.

Additionally, information regarding how one could go about replicating this project for another language would, personally, be wonderful!

Am I right in assuming this was the software used to generate the map: https://mindnode.com/ ? Judging purely by some of the file extensions.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.