Difference between revisions of "JavaScript"

From Freephile Wiki
Jump to navigation Jump to search
(Info on ECMAScript 6)
(New page: * MediaWiki/js * User Scripts ala Grease Monkey or Userscripts.org [http://phiffer.org Dan Phiffer] wrote this little greasemonkey script that turns any mediawiki article into a sl...)
(9 intermediate revisions by 2 users not shown)
Line 1: Line 1:
Get [[wp:Greasemonkey]] ([https://addons.mozilla.org/en-US/firefox/addon/748 here]) so that you can have your browser be even more useful.  You might even want to use [http://monkey.coolspacer.com/ Super Greasemonkey] if you like using the awesome [http://jquery.com/ JQuery] library.  I'm hoping that Super Greasemonkey makes it into the official version, and that you can specify in your script which JQuery library to run (like Google's hosted JQuery scripts) making it easier to keep compatibility with the JQuery API version and also avoiding the need to bundle JQuery.
+
* [[MediaWiki/js]]
 +
* [[User Scripts]] ala Grease Monkey or Userscripts.org
 +
[http://phiffer.org Dan Phiffer] wrote this little greasemonkey script that turns any mediawiki article into a slide presentation
 +
<source lang="javascript">
 +
// ==UserScript==
 +
// @name          Wikipedia Presentation
 +
// @namespace      http://phiffer.org/
 +
// @description    Turn a Wikipedia article into a presentation
 +
// ==/UserScript==
  
* [[MediaWiki/js]] talks about using JavaScript in MediaWiki
+
var wikipedia_presentation = {
* User Scripts are JavaScripts that you insert into your web browser such as Greasemonkey scripts. Userscripts.org is the open source repository of Grease Monkey scripts.
+
    setup: function() {
* [[MediaWiki/Presentation]] describes methods to produce presentations from your wiki
+
       
 +
        this.sections = [];
 +
        this.pos = 0;
 +
       
 +
        var body = document.getElementsByTagName('body')[0];
 +
        this.orig_markup = body.innerHTML;
 +
        var markup = body.innerHTML;
 +
        var start = 0;
 +
        var end = markup.indexOf('<span class="editsection"');
 +
        while (end != -1) {
 +
            start = markup.indexOf('</span>', end);
 +
            end = markup.indexOf('<span class="editsection"', start);
 +
            if (end == -1) {
 +
                end = markup.indexOf('<div class="printfooter">', start);
 +
                this.sections.push(markup.substr(start, end - start));
 +
                end = -1;
 +
            }
 +
            this.sections.push(markup.substr(start, end - start));
 +
        }
 +
        if (this.sections.length > 0) {
 +
            var div = document.getElementById('bodyContent');
 +
            var link = div.insertBefore(document.createElement('a'), div.firstChild);
 +
            link.innerHTML = 'Start presentation';
 +
            link.setAttribute('href', '#presentation');
 +
            link.addEventListener('click', this.start, false);
 +
        }
 +
    },
 +
   
 +
    start: function() {
 +
        var body = document.getElementsByTagName('body')[0];
 +
        body.innerHTML = '';
 +
        body.style.textAlign = 'center';
 +
       
 +
        var prev = body.appendChild(document.createElement('a'));
 +
        prev.innerHTML = '&larr; Prev';
 +
        prev.setAttribute('href', '#prev');
 +
        prev.style.font = '11px verdana, sans-serif';
 +
        prev.addEventListener('click', function() {
 +
          wikipedia_presentation.prev();
 +
        }, false);
 +
       
 +
        body.appendChild(document.createTextNode(' / '));
 +
       
 +
        var stop = body.appendChild(document.createElement('a'));
 +
        stop.innerHTML = 'Exit';
 +
        stop.setAttribute('href', '#exit');
 +
        stop.style.font = '11px verdana, sans-serif';
 +
        stop.addEventListener('click', function() {
 +
          wikipedia_presentation.stop();
 +
        }, false);
 +
       
 +
        body.appendChild(document.createTextNode(' / '));
 +
       
 +
        var next = body.appendChild(document.createElement('a'));
 +
        next.innerHTML = 'Next &rarr;';
 +
        next.setAttribute('href', '#next');
 +
        next.style.font = '11px verdana, sans-serif';
 +
        next.addEventListener('click', function() {
 +
          wikipedia_presentation.next();
 +
        }, false);
 +
       
 +
        var slide = body.appendChild(document.createElement('div'));
 +
        slide.setAttribute('id', 'wikipedia_presentation');
 +
        slide.style.width = '500px';
 +
        slide.style.margin = '100px auto';
 +
        slide.style.textAlign = 'left';
 +
        slide.style.font = '2em verdana, sans-serif';
 +
       
 +
        slide.innerHTML = wikipedia_presentation.sections[0];
 +
        var items = slide.getElementsByTagName('li');
 +
        for (var i = 1; i < items.length; i++) {
 +
            items[i].style.display = 'none';
 +
        }
 +
       
 +
        document.addEventListener('keypress', wikipedia_presentation.keypress, false);
 +
    },
 +
   
 +
    stop: function() {
 +
        var body = document.getElementsByTagName('body')[0];
 +
        body.innerHTML = wikipedia_presentation.orig_markup;
 +
        body.style.textAlign = 'left';
 +
        wikipedia_presentation.setup();
 +
        document.removeEventListener('keypress', wikipedia_presentation.keypress, false);
 +
    },
 +
   
 +
    keypress: function(event) {
 +
        if (event.keyCode == 39) {
 +
            wikipedia_presentation.next();
 +
        } else if (event.keyCode == 37) {
 +
            wikipedia_presentation.prev();
 +
        }
 +
    },
 +
   
 +
    prev: function() {
 +
        this.pos--;
 +
        if (this.pos == -1) {
 +
            this.pos = this.sections.length - 1;
 +
        }
 +
        var slide = document.getElementById('wikipedia_presentation');
 +
        slide.innerHTML = wikipedia_presentation.sections[this.pos];
 +
    },
 +
   
 +
    next: function() {
 +
       
 +
        var slide = document.getElementById('wikipedia_presentation');
 +
        var items = slide.getElementsByTagName('li');
 +
       
 +
        var hidden = 0;
 +
        for (var i = 0; i < items.length; i++) {
 +
            if (items[i].style.display == 'none') {
 +
                hidden++;
 +
            }
 +
        }
 +
       
 +
        if (hidden > 0) {
 +
            items[items.length - hidden].style.display = 'list-item';
 +
            return;
 +
        }
 +
       
 +
        this.pos++;
 +
        if (this.pos == this.sections.length) {
 +
            this.pos = 0;
 +
        }
 +
        slide.innerHTML = wikipedia_presentation.sections[this.pos];
 +
        var items = slide.getElementsByTagName('li');
 +
        for (var i = 1; i < items.length; i++) {
 +
            items[i].style.display = 'none';
 +
        }
 +
       
 +
    }
 +
};
  
== JavaScript Libraries ==
+
wikipedia_presentation.setup();
JQuery is included with [[Drupal]], and is also used in many other projects.
 
In this slideshow, you can [http://slideshow.rubyforge.org/jquery.html compare JQuery with Prototype]
 
  
 
+
</source>
=== [http://underscorejs.org/ Underscore.js] ===
 
 
 
Underscore is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects. It�s the answer to the question: �If I sit down in front of a blank HTML page, and want to start being productive immediately, what do I need?� � and the tie to go along with jQuery's tux and Backbone's suspenders.
 
 
 
== JavaScript Callbacks ==
 
A great explanation of what are Callbacks and how to use them: http://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/
 
 
 
== JavaScript SourceMaps ==
 
Debug minified sources in FireFox or Chrome
 
 
 
* [https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ tutorial]
 
* [https://developer.mozilla.org/en-US/docs/Tools/Debugger/Source_map_errors Debugging Source map errors]
 
 
 
== JavaScript 6 ==
 
 
* Basic overviews:
 
** [https://github.com/lukehoban/es6features https://github.com/lukehoban/es6features]
 
** [https://blog.pragmatists.com/top-10-es6-features-by-example-80ac878794bb https://blog.pragmatists.com/top-10-es6-features-by-example-80ac878794bb]
 
* Outstanding book:
 
** [http://exploringjs.com/es6/ http://exploringjs.com/es6/]
 
* The "Can I use?"...
 
** [https://kangax.github.io/compat-table/es6/ https://kangax.github.io/compat-table/es6/]
 
* Sandbox:
 
** [https://es6console.com/ https://es6console.com/]
 
  
 
[[Category:JavaScript]]
 
[[Category:JavaScript]]
 
[[Category:Wiki]]
 
[[Category:Wiki]]
[[Category:Front-end]]
 
[[Category:Back-end]]
 
[[Category:Server]]
 
[[Category:Node]]
 
[[Category:Node.js]]
 
[[Category:Source]]
 
[[Category:Programming]]
 
[[Category:Code]]
 

Revision as of 12:19, 5 December 2008

Dan Phiffer wrote this little greasemonkey script that turns any mediawiki article into a slide presentation

// ==UserScript==
// @name           Wikipedia Presentation
// @namespace      http://phiffer.org/
// @description    Turn a Wikipedia article into a presentation
// ==/UserScript==

var wikipedia_presentation = {
    setup: function() {
        
        this.sections = [];
        this.pos = 0;
        
        var body = document.getElementsByTagName('body')[0];
        this.orig_markup = body.innerHTML;
        var markup = body.innerHTML;
        var start = 0;
        var end = markup.indexOf('<span class="editsection"');
        while (end != -1) {
            start = markup.indexOf('</span>', end);
            end = markup.indexOf('<span class="editsection"', start);
            if (end == -1) {
                end = markup.indexOf('<div class="printfooter">', start);
                this.sections.push(markup.substr(start, end - start));
                end = -1;
            }
            this.sections.push(markup.substr(start, end - start));
        }
        if (this.sections.length > 0) {
            var div = document.getElementById('bodyContent');
            var link = div.insertBefore(document.createElement('a'), div.firstChild);
            link.innerHTML = 'Start presentation';
            link.setAttribute('href', '#presentation');
            link.addEventListener('click', this.start, false);
        }
    },
    
    start: function() {
        var body = document.getElementsByTagName('body')[0];
        body.innerHTML = '';
        body.style.textAlign = 'center';
        
        var prev = body.appendChild(document.createElement('a'));
        prev.innerHTML = '&larr; Prev';
        prev.setAttribute('href', '#prev');
        prev.style.font = '11px verdana, sans-serif';
        prev.addEventListener('click', function() {
           wikipedia_presentation.prev();
        }, false);
        
        body.appendChild(document.createTextNode(' / '));
        
        var stop = body.appendChild(document.createElement('a'));
        stop.innerHTML = 'Exit';
        stop.setAttribute('href', '#exit');
        stop.style.font = '11px verdana, sans-serif';
        stop.addEventListener('click', function() {
           wikipedia_presentation.stop();
        }, false);
        
        body.appendChild(document.createTextNode(' / '));
        
        var next = body.appendChild(document.createElement('a'));
        next.innerHTML = 'Next &rarr;';
        next.setAttribute('href', '#next');
        next.style.font = '11px verdana, sans-serif';
        next.addEventListener('click', function() {
           wikipedia_presentation.next();
        }, false);
        
        var slide = body.appendChild(document.createElement('div'));
        slide.setAttribute('id', 'wikipedia_presentation');
        slide.style.width = '500px';
        slide.style.margin = '100px auto';
        slide.style.textAlign = 'left';
        slide.style.font = '2em verdana, sans-serif';
        
        slide.innerHTML = wikipedia_presentation.sections[0];
        var items = slide.getElementsByTagName('li');
        for (var i = 1; i < items.length; i++) {
            items[i].style.display = 'none';
        }
        
        document.addEventListener('keypress', wikipedia_presentation.keypress, false);
    },
    
    stop: function() {
        var body = document.getElementsByTagName('body')[0];
        body.innerHTML = wikipedia_presentation.orig_markup;
        body.style.textAlign = 'left';
        wikipedia_presentation.setup();
        document.removeEventListener('keypress', wikipedia_presentation.keypress, false);
    },
    
    keypress: function(event) {
        if (event.keyCode == 39) {
            wikipedia_presentation.next();
        } else if (event.keyCode == 37) {
            wikipedia_presentation.prev();
        }
    },
    
    prev: function() {
        this.pos--;
        if (this.pos == -1) {
            this.pos = this.sections.length - 1;
        }
        var slide = document.getElementById('wikipedia_presentation');
        slide.innerHTML = wikipedia_presentation.sections[this.pos];
    },
    
    next: function() {
        
        var slide = document.getElementById('wikipedia_presentation');
        var items = slide.getElementsByTagName('li');
        
        var hidden = 0;
        for (var i = 0; i < items.length; i++) {
            if (items[i].style.display == 'none') {
                hidden++;
            }
        }
        
        if (hidden > 0) {
            items[items.length - hidden].style.display = 'list-item';
            return;
        }
        
        this.pos++;
        if (this.pos == this.sections.length) {
            this.pos = 0;
        }
        slide.innerHTML = wikipedia_presentation.sections[this.pos];
        var items = slide.getElementsByTagName('li');
        for (var i = 1; i < items.length; i++) {
            items[i].style.display = 'none';
        }
        
    }
};

wikipedia_presentation.setup();