JavaScript 代码测试相关的函数库和框架。
4 | -------------------------------------------------------------------------------- /i18n/zh-tw/partials/testing-tools.html: -------------------------------------------------------------------------------- 1 |JavaScript 程式測試相關的函式庫及框架。
4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014 William Oliveira 2 | 3 | http://creativecommons.org/licenses/by-nc-sa/3.0/ 4 | -------------------------------------------------------------------------------- /public/assets/img/gulp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/js-the-right-way/master/public/assets/img/gulp.png -------------------------------------------------------------------------------- /public/assets/img/npm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/js-the-right-way/master/public/assets/img/npm.png -------------------------------------------------------------------------------- /public/assets/img/tagtree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/js-the-right-way/master/public/assets/img/tagtree.png -------------------------------------------------------------------------------- /public/assets/img/bower-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/js-the-right-way/master/public/assets/img/bower-logo.png -------------------------------------------------------------------------------- /public/assets/img/brunch-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/js-the-right-way/master/public/assets/img/brunch-logo.png -------------------------------------------------------------------------------- /public/assets/img/devfreecasts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/js-the-right-way/master/public/assets/img/devfreecasts.png -------------------------------------------------------------------------------- /public/assets/img/grunt-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/js-the-right-way/master/public/assets/img/grunt-logo.png -------------------------------------------------------------------------------- /public/assets/img/rollup-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/js-the-right-way/master/public/assets/img/rollup-logo.png -------------------------------------------------------------------------------- /public/assets/img/todomvc-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/js-the-right-way/master/public/assets/img/todomvc-logo.png -------------------------------------------------------------------------------- /public/assets/img/webpack-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/js-the-right-way/master/public/assets/img/webpack-logo.png -------------------------------------------------------------------------------- /public/assets/img/yeoman-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/js-the-right-way/master/public/assets/img/yeoman-logo.png -------------------------------------------------------------------------------- /i18n/ko-kr/partials/testing-tools.html: -------------------------------------------------------------------------------- 1 |JavaScript로 작성된 프로그램을 테스트하는 데에 필요한 여러 가지 라이브러리들과 프레임워크들을 소개합니다.
4 | -------------------------------------------------------------------------------- /public/assets/img/broccoli-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/js-the-right-way/master/public/assets/img/broccoli-logo.png -------------------------------------------------------------------------------- /i18n/en-us/partials/testing-tools.html: -------------------------------------------------------------------------------- 1 |Various libraries and frameworks to do tests in JavaScript.
4 | -------------------------------------------------------------------------------- /i18n/fa-ir/partials/testing-tools.html: -------------------------------------------------------------------------------- 1 |Various libraries and frameworks to do tests in JavaScript.
4 | -------------------------------------------------------------------------------- /i18n/pt-br/partials/testing-tools.html: -------------------------------------------------------------------------------- 1 |Várias bibliotecas e frameworks para fazer testes em JavaScript.
4 | -------------------------------------------------------------------------------- /public/assets/img/browserify-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/js-the-right-way/master/public/assets/img/browserify-logo.png -------------------------------------------------------------------------------- /i18n/es-es/partials/testing-tools.html: -------------------------------------------------------------------------------- 1 |Varias librerias y frameworks para realizar pruebas en JavaScript.
4 | -------------------------------------------------------------------------------- /i18n/de-de/partials/testing-tools.html: -------------------------------------------------------------------------------- 1 |Verschiedene Bibliotheken und Frameworks, um Tests in JavaScript auszuführen.
4 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "JS The Right Way", 3 | "icons": [], 4 | "start_url": "index.html", 5 | "display": "standalone", 6 | "orientation": "portrait" 7 | } 8 | -------------------------------------------------------------------------------- /i18n/zh-cn/partials/welcome.html: -------------------------------------------------------------------------------- 1 |4 | 这是一份为 JavaScript 新手准备的指南，同时也包含了可以给高手学习的最佳资料 5 |
6 | 7 |8 | 虽然本网站的名字是 the right way,但并不代表是学习 JavaScript 的唯一方法。 9 |
10 | 11 |12 | 我们只是将一些顶尖开发者的文章、提醒和技巧收集于此。由于它是由一些非常厉害的网名身上收集而来，故称之为 'the right way'或是最佳做法。 13 |
14 | -------------------------------------------------------------------------------- /i18n/zh-tw/partials/welcome.html: -------------------------------------------------------------------------------- 1 |4 | 這是一份為 JavaScript 新手準備的指南，同時也包含了可以給老手學習的最佳範本。 5 |
6 | 7 |8 | 雖然本網站的名字是 the right way ，但並不表示是撰寫 JavaScript 的“唯一方法“。 9 |
10 | 11 |12 | 我們只是將一些頂尖開發者的文章、提醒及技巧收集於此。由於它是由一些厲害非常的鄉民身上所收集而來，故稱之為“the right way“或是最佳做法。 13 |
14 | -------------------------------------------------------------------------------- /i18n/ko-kr/partials/welcome.html: -------------------------------------------------------------------------------- 1 |4 | 이 안내 문서는 JavaScript를 처음 시작하는 개발자와 더 나은 방법들을 익히고자 하는 숙련된 개발자 모두를 위해 작성되었습니다. 5 |
6 | 7 |8 | 이 문서의 이름과 달리, 이 안내 문서는 JavaScript를 하기 위한 "유일한 길"을 의미하지는 않습니다. 9 |
10 | 11 |12 | 우리는 단지 실력 있는 개발자들로부터 모든 기사, 팁, 트릭을 여기 한 페이지에 모아놓았을 뿐입니다. 비범한 사람들에게서 나온 것들이기 때문에, 이것이 "정석", 또는 가장 좋은 방법이라고 이야기할 수 있습니다. 13 |
14 | -------------------------------------------------------------------------------- /i18n/zh-tw/partials/code-style.html: -------------------------------------------------------------------------------- 1 |4 | JavaScript 和其他程式語言一樣，有各種版本的編碼風格指引。或許大家常會推薦 Google Code Style Guide for JavaScript，但我們更推薦 Idiomatic.js 5 |
6 | 7 |10 | 現今最好的 JavaScript 編碼檢查工具為 JSHint。我們強烈建議盡可能使用檢查工具來確認你的編碼風格及設計模式的正確性。 11 |
12 | -------------------------------------------------------------------------------- /i18n/zh-cn/partials/code-style.html: -------------------------------------------------------------------------------- 1 |4 | JavaScript 和其他编程语言一样，有各种版本的编程风格指南。或许大家会推荐 Google Code Style Guide for JavaScript，但我们更推荐 Idiomatic.js 5 |
6 | 7 |10 | 现在最好的 JavaScript 代码检查工具为 JSHint。我们强烈建议尽可能的使用检查工具来确认你的编码风格以及设计模式的正确性。 11 |
12 | -------------------------------------------------------------------------------- /i18n/README.md: -------------------------------------------------------------------------------- 1 | # Do you want this project in your language? 2 | 3 | ### Feel free to contribute! :+1: 4 | 5 | 6 | To translate this project to another language, you need to copy the ***default language directory*** and then translate it. 7 | - en-us/ - Default language. 8 | 9 | The **.json file is the main file of translation's structure**, be sure that this file have the **same name of your parent directory**. 10 | 11 | The application will export the files in **'Public/language'** name-based on json filename. 12 | -------------------------------------------------------------------------------- /i18n/fa-ir/partials/welcome.html: -------------------------------------------------------------------------------- 1 |4 | بهرتین شیوههای معرفی جاوااسکریپت به توسعهدهندههای جدید و کمک به توسعهدهندههای با تجربه، در این راهنما در نظر گرفته شده است. 5 |
6 | 7 |8 | با توجه به نام انتخاب شده، این راهنما لزما به معنی "تنها راه" یادگیری جاوااسکریپت نیست. 9 |
10 | 11 |12 | ما فقط تمامی مقالهها، نکتهها و ترفندها را از توسعهدهندههای برتر در اینجا جمعآوری کردیم، به دلیل اینکه این مجموعه استثنایی است ما به آن "از راه درستش" (the right way) میگوییم. 13 |
14 | -------------------------------------------------------------------------------- /i18n/en-us/partials/welcome.html: -------------------------------------------------------------------------------- 1 |4 | This is a guide intended to introduce new developers to JavaScript and help experienced developers learn more about its best practices. 5 |
6 | 7 |8 | Despite the name, this guide doesn't necessarily mean "the only way" to do JavaScript. 9 |
10 | 11 |12 | We just gather all the articles, tips, and tricks from top developers and put it here. Since it comes from exceptional folks, we could say that it is "the right way", or the best way to do so. 13 |
14 | -------------------------------------------------------------------------------- /i18n/de-de/partials/welcome.html: -------------------------------------------------------------------------------- 1 |4 | Dies ist ein Leitfaden, der Entwicklern beim Einstieg in JavaScript helfen soll und erfahrenen Entwicklern mit Best-Practices helfen soll. 5 |
6 | 7 |8 | Trotz des Namens steht dieser Leitfaden nicht für "den einzigen Weg", den man mit JavaScript gehen kann. 9 |
10 | 11 |12 | Wir sammeln lediglich all diese Artikel, Tipps und Tricks von namhaften Entwicklern und fügen sie hier ein. Da sie von ausgezeichneten Leuten stammen, können wir sagen, dass es "der richtige Weg" oder der beste Weg ist. 13 |
14 | -------------------------------------------------------------------------------- /i18n/ko-kr/partials/code-style.html: -------------------------------------------------------------------------------- 1 |4 | 다른 언어들과 마찬가지로 JavaScript에도 다양한 코딩 스타일 규칙이 있습니다. 아마도 가장 많은 이들이 사용하고, 추천하는 것은 구글 JavaScript 코드 스타일 규칙일 것입니다. 하지만 우리는 당신에게 Idiomatic.js 를 읽어볼 것을 추천합니다. 5 |
6 | 7 |10 | 요즘 JavaScript 코드 검사를 위한 가장 좋은 도구는 JSHint입니다. 우리는 당신이 어디서든지 린트 도구로 코드 스타일과 패턴 점검을 하는 것을 추천합니다. 11 |
12 | -------------------------------------------------------------------------------- /i18n/pt-br/partials/welcome.html: -------------------------------------------------------------------------------- 1 |4 | Esse é um guia com a intenção de apresentar novos desenvolvedores ao JavaScript e ajudar desenvolvedores experientes a aprenderem mais sobre as melhores práticas. 5 |
6 | 7 |8 | Apesar do nome, esse guia não significa necessariamente "o único caminho" em JavaScript. 9 |
10 | 11 |12 | Nós apenas juntamos todos os artigos, dicas e artimanhas dos desenvolvedores top e colocamos aqui. Uma vez que esse material vem de pessoas excepcionais, nós podemos dizer que é "a forma certa", ou a melhor forma de fazer. 13 |
14 | -------------------------------------------------------------------------------- /i18n/en-us/partials/code-style.html: -------------------------------------------------------------------------------- 1 |4 | As every language, JavaScript has many code style guides. Maybe the most used and recommended is the Google Code Style Guide for JavaScript, but we recommend you read Idiomatic.js. 5 |
6 | 7 |10 | Nowadays the best tool for linting your JavaScript code is JSHint. We recommend that whenever possible you verify your code style and patterns with a Lint tool. 11 |
12 | -------------------------------------------------------------------------------- /i18n/fa-ir/partials/code-style.html: -------------------------------------------------------------------------------- 1 |4 | As every language, JavaScript has many code style guides. Maybe the most used and recommended is the Google Code Style Guide for JavaScript, but we recommend you read Idiomatic.js. 5 |
6 | 7 |10 | Nowadays the best tool for linting your JavaScript code is JSHint. We recommend that whenever possible you verify your code style and patterns with a Lint tool. 11 |
12 | -------------------------------------------------------------------------------- /i18n/es-es/partials/welcome.html: -------------------------------------------------------------------------------- 1 |4 | Esta es una guía que busca introducir a nuevos desarrolladores en JavaScript y que busca también que los desarrolladores más experimentados conozcan un poco más sobre las mejores prácticas. 5 |
6 | 7 |8 | A pesar del nombre de esta guía, no significa que sea necesariamente "la única forma" para realizar JavaScript. 9 |
10 | 11 |12 | Nosotros solo hemos reunidos todos los artículos, consejos, y trucos de los principales desarrolladores y colocado aquí. Ya que viene de personas excepcionales, nosotros podemos decir que esta es la "la forma correcta", la mejor forma de escribir código en JavaScript. 13 |
14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |  2 | 3 | Feel free to contribute! 4 | 5 | ## Where 6 | 7 |4 | Como todo lenguaje, JavaScript tiene muchas guías de estilo. Quizas la más usada y recomendada es la Guía de Estilo de Google para JavaScript, pero nosotros te recomendamos leer Idiomatic.js. 5 |
6 | 7 |10 | Actualmente la mejor herramienta para realizar linting (análisis) del código en JavaScript es JSHint. Nosotros recomendamos que siempre que sea posible se verifique el estilo y los patrones del código con una herramienta de análisis del código. 11 |
12 | -------------------------------------------------------------------------------- /i18n/de-de/partials/code-style.html: -------------------------------------------------------------------------------- 1 |4 | Auch JavaScript hat, so wie jede Programmiersprache, viele unterschiedliche Leitfäden für den Code-Style. Der womöglich am meisten verwendete und weiterempfohlene ist der Google Code-Style-Guide für JavaScript, aber wir empfehlen dir Idiomatic.js zu lesen. 5 |
6 | 7 |10 | Mittlerweile hat sich als Tool für die Code-Analyse (Linting) von JavaScript-Code JSHint bewährt. Wir empfehlen euch, euren Code-Style und Entwurfsmuster durchgehend mit einem Lint-Tool zu überprüfen. 11 |
12 | -------------------------------------------------------------------------------- /i18n/pt-br/partials/code-style.html: -------------------------------------------------------------------------------- 1 |4 | Assim como todas as linguagens, JavaScript tem muitos guias de estilo de código. Talvez o mais usado e recomendado seja o Google Code Style Guide for JavaScript, mas recomendamos a leitura do Idiomatic.js. 5 |
6 | 7 |10 | Nos dias de hoje, a melhor ferramenta para analise de código em JavaScript é o JSHint. Nós recomendamos que sempre que possível você verifique o seu estilo de código e padrões com uma ferramenta de análise (Lint Tool). 11 |
12 | -------------------------------------------------------------------------------- /i18n/ko-kr/partials/licence.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 
4 |
5 |
6 | JavaScript: The Right Way by William Oliveira.
이 저작물은 크리에이티브 커먼즈 저작자표시-비영리-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다.
원문: http://jstherightway.org.
7 |
2 |
3 |
4 |
5 |
6 | JavaScript: The Right Way by William Oliveira.
Licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.
Based on work at http://jstherightway.org.
7 |
2 |
3 |
4 |
5 |
6 | JavaScript: The Right Way by William Oliveira.
Licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.
Based on work at http://jstherightway.org.
7 |
2 |
3 |
4 |
5 |
6 | JavaScript: The Right Way by William Oliveira.
Licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.
Based on work at http://jstherightway.org.
7 |
2 |
3 |
4 |
5 |
6 | JavaScript: The Right Way by William Oliveira.
Licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.
Based on work at http://jstherightway.org.
7 |
2 |
3 |
4 |
5 |
6 | JavaScript: A forma certa por William Oliveira.
Licenciado sobre Creative Commons Atribuição-NãoComercial 4.0 Internacional.
Baseado no trabalho em http://jstherightway.org.
7 |
2 |
3 |
4 |
5 |
6 | JavaScript: La Forma Correcta por William Oliveira.
Licenciado bajo Creative Commons Attribution-NonCommercial 4.0 International License.
Basado en el trabjo en http://jstherightway.org.
7 |
2 |
3 |
4 |
5 |
6 | JavaScript: Der richtige Weg von William Oliveira.
Lizenziert unter einer Creative Commons Namensnennung - Nicht kommerziell 4.0 International Lizenz.
Basierend auf der Arbeit an http://jstherightway.org.
7 |
4 | 由网景公司在 1995 年给网景浏览器2.0创建的一个当做 HTML 扩展，JavaScript 最初主要的功能就是操作 HTML 文档和验证表单。 在取得这么大的名声之前，JavaScript 被叫做 Mocha，当它第一次发布 beta 版本时它的官方名字是 LiveScript，当被 Sun Microsystems 发布时，被称作这个名字一直到今天。 由于相似的名字，人们老是把 JavaScript 和 Java搞混。虽然两者都有编程的语法结构，但是他们是不同的语言。 和C、C#、Java不同， JavaScript 是一个静态语言，也就是说他需要一个“解释器”，JavaScript的解释器就是浏览器。 5 |
6 | 7 |10 | ECMAScript 是 JavaScript 的标准。截至2012年止，所有最新流行的浏览器都可以支持 ECMAScript 5.1。老的浏览器至少会支持 ECMAScript 3。2015年6月 ES6/ES2015 规范已完成。前往阅读 ECMAScript 2015 规范 Ecma International. 11 |
12 | 13 |14 | JavaScript 的最佳参考版本、参考资料及最新消息可以前往 Mozilla Developer Network. 15 |
16 | 17 |20 | Document Object Model (DOM) 是 HTML 及 XML 文档的 API。它提供了文件的结构化展现，让你可以使用脚本语言（如 JavaScript）來更改它的內容及视觉展现。其他更详细的內容 Mozilla Developer Network - 文件对象模型（DOM）. 21 |
22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "js-the-right-way", 3 | "version": "0.0.0", 4 | "description": "", 5 | "main": "index.html", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/braziljs/js-the-right-way.git" 12 | }, 13 | "author": "William Oliveira", 14 | "license": "CC BY-NC-SA 3.0", 15 | "bugs": { 16 | "url": "https://github.com/braziljs/js-the-right-way/issues" 17 | }, 18 | "homepage": "http://jstherightway.org", 19 | "devDependencies": { 20 | "grunt": "^0.4.4", 21 | "grunt-contrib-clean": "^0.6.0", 22 | "grunt-contrib-connect": "^0.9.0", 23 | "grunt-contrib-copy": "^0.8.0", 24 | "grunt-contrib-cssmin": "^0.9.0", 25 | "grunt-contrib-htmlmin": "^0.4.0", 26 | "grunt-contrib-imagemin": "^0.9.4", 27 | "grunt-contrib-uglify": "^0.4.0", 28 | "grunt-contrib-watch": "^0.6.1", 29 | "html-entities": "^1.1.2", 30 | "html-minifier": "^0.7.2", 31 | "mustache": "^2.1.2", 32 | "node.extend": "^1.1.5" 33 | }, 34 | "dependencies": {} 35 | } 36 | -------------------------------------------------------------------------------- /i18n/zh-tw/partials/getting-started.html: -------------------------------------------------------------------------------- 1 |4 | 由 Netscape 於1995年為了 Netscape Navigator 針對 HTML 所開發的擴充套件，JavaScript 主要的功能為操作 HTML 文件及表單驗證。 5 | 6 | 在贏得今日的廣為人知的名字前，JavaScript 原名為 Mocha。在它發布第一次測試版時，官方將它命名為 LiveScript，最後在 Sun Microsystems 公布發行版時，被重新命名為今日廣為人知的名字。 7 | 8 | 由於 JavaScript 名字相近於 Java，所以常讓人搞混。雖然兩者在名字組成上有部分相同，但並不是相同的語言。 9 | 10 | 不同於 C、C# 及 Java，JavaScript 是直譯式語言。這意味者它需要一個“直譯器“。就 JavaScript 而言，瀏覽器就是它的直譯器。 11 |
12 | 13 |16 | ECMAScript 是 JavaScript 的準則。截至2012年止，所有最新流行的瀏覽器都可以支援 ECMAScript 5.1。舊的瀏覽器至少會支援 ECMAScript 3。2015年6月 ES6/ES2015 準則已完成。前往閱讀 ECMAScript 2015 準則 Ecma International. 17 |
18 | 19 |20 | JavaScript 的最佳參考版本、參考資料及最新消息可以前往 Mozilla Developer Network. 21 |
22 | 23 |26 | Document Object Model (DOM) 是 HTML 及 XML 文檔的 API。它提供了文件的結構化呈現，讓你可以使用腳本語言（如 JavaScript）來更改它的內容及視覺呈現。其他更詳盡的內容 Mozilla Developer Network - 文件物件模型（DOM）. 27 |
28 | -------------------------------------------------------------------------------- /i18n/ko-kr/README.md: -------------------------------------------------------------------------------- 1 | # 한국어 번역에 참여하는 방법 2 | 3 | 기본 룰 4 | ------- 5 | 6 | 1. 파일의 indentation, syntax가 손상되지 않도록 신경쓰면서 문장을 번역합니다. 7 | 2. 번역된 문장은 반드시 존댓말이어야합니다. 8 | 3. [부산대 맞춤법 검사기](http://speller.cs.pusan.ac.kr/)를 통과하도록 합시다. 다만, 라이브러리/프레임워크 이름이나, IT방면에서 고유어 수준으로 사용되는 단어는 제외합니다. (프레임워크, 템플릿 등) 9 | 4. `grunt server`로 실행해본 후 실제 사이트에 문제가 없는지 확인해봅니다. 10 | 5. PR을 올린 후 반드시 1명 이상 다른 사람의 리뷰를 받아서 문장이 어색한지 않은지 확인 받습니다. 11 | 12 | 13 | 단어 규칙 14 | --------- 15 | 16 | 다음 단어들은 다음과 같이 통일합니다. 단, 책 이름, 게시물 이름 등의 외부 리소스의 제목에는 적용하지 않습니다. 17 | 18 | | 권장하지 않는 단어 | 권장하는 단어 | 비고 | 19 | |--------------------|---------------|------| 20 | | 자바스크립트, JS, Javascript | JavaScript | 대소문자에 유의해주세요 | 21 | | 오픈 소스 | 오픈소스 | 일관성을 위한 통일입니다 | 22 | | 어플리케이션 | 애플리케이션 | 맞춤법 관련 | 23 | | 브라우져 | 브라우저 | 맞춤법 관련 | 24 | | 데스크탑 | 데스크톱 | 맞춤법 관련 | 25 | | UI, 유저 인터페이스 | 사용자 인터페이스 | 일관성을 위한 통일입니다 | 26 | | 블럭 | 블록 | 맞춤법 관련 | 27 | | html5 | HTML5 | 단, 라이브러리명이 소문자인 경우는 제외 | 28 | | css | CSS | 단, 라이브러리명이 소문자인 경우는 제외 | 29 | | 현대적인, modern | 모던 | 일관성을 위한 통일입니다 | 30 | | 꼼수, trick | 트릭 | 일관성을 위한 통일입니다 | 31 | 32 | 33 | 인명 34 | ---- 35 | 36 | 읽는 방법을 정확히 알 수 없으므로 인명은 모두 번역하지 않습니다. 37 | 38 | 39 | 인용 40 | ---- 41 | 42 | 본문에서 링크하고 있는 내용의 전체 번역본이 있는 경우에 한하여 번역본을 링크합니다. 43 | 번역본을 링크할 경우에는 그 제목도 번역본의 제목과 일치시켜주세요. 44 | -------------------------------------------------------------------------------- /i18n/ko-kr/partials/getting-started.html: -------------------------------------------------------------------------------- 1 |4 | JavaScript는 1995년에 Netscape Navigator 2.0의 확장 기능으로써 Netscape사에 의해 개발되었습니다. JavaScript의 주사용 목적은 HTML의 조작과 입력 서의 검사였습니다. 5 | 6 | 이 이름이 지금처럼 유명해지기 전에는 JavaScript는 Mocha라고 불렸습니다. 베타 버전이 배포되었을 때는 공식적으로 LiveScript라 불리었고, Sun Microsystems에 의해 정식 버전이 배포되었을 때는 우리가 지금 알고 있는 이름으로 변경되었습니다. 7 | 8 | 비슷한 이름 때문에 Java와 JavaScript를 혼동하는 사람들이 많습니다. 두 언어 모두 프로그래밍 언어적인 어휘 구조로 되어 있지만 같은 언어는 아닙니다. 9 | 10 | C, C#, Java와는 다르게, JavaScript는 인터프리터 언어입니다. 인터프리터가 필요하다는 뜻인데, JavaScript의 경우 인터프리터는 브라우저입니다. 11 |
12 | 13 |16 | JavaScript의 표준은 ECMAScript입니다. 2012년 현재, 모든 모던 브라우저는 ECMAScript 5.1을 완벽히 지원합니다. 조금 더 오래된 브라우저는 최소 ECMAScript 3를 지원합니다. 2015년 6월 현재, ES6/ES2015의 사양이 승인되었습니다. ECMAScript 2015 언어 사양은 Ecma International에서 자세히 볼 수 있습니다. 17 |
18 | 19 |20 | 자바스크립트에 대한 정보, 참고자료, 뉴스 등은 Mozilla Developer Network에서 볼 수 있습니다. 21 |
22 | 23 |26 | 문서 객체 모델(DOM)은 HTML과 XML 문서의 API입니다. DOM은 문서의 구조를 표현하고, 문서의 내용을 수정할 수 있게 하며, JavaScript 등의 스크립트 언어로 시각화하여 보여줄 수 있습니다. 더 많은 정보는 Mozilla Developer Network - DOM을 참조하세요. 27 |
28 | -------------------------------------------------------------------------------- /i18n/fa-ir/partials/getting-started.html: -------------------------------------------------------------------------------- 1 |4 | جاوااسکریپت در سال ۱۹۹۵ توسط نتاسکیپ (Netscape) جهت گسترش HTML برای Netscape Navigator 2.0 ایجاد شده است، جاوااسکریپت به عنوان عملکرد اصلی به کار گیری documents در HTML و همچنین اعتبار سنجی فرم بود. 5 | 6 | جاوااسکریپت را در ابتدا آقای برندان ایچ (Brendan Eich) در شرکت نتاسکیپ با نام Mocha طراحی نمود. این نام بعدا در نسخه بتا به LiveScript و نهایتاً به جاوااسکریپت تغییر یافت. 7 | 8 | علیرغم اشتباه عمومی، زبان جاوا اسکریت با زبان جاوا متفاوت است، اگر چه هر دو زبان برنامهنویسی هستند. 9 | 10 | 11 |
12 | 13 |16 | استاندارد جاوااسکریپت اکمااسکریپت (ECMAScript) است که از سال ۲۰۱۲ تمامی مرورگرهای مدرن استاندارد اکمااسکریپت نسخه ۵.۱ را به صورت کامل پشتیبانی میکنند، همچنین مرورگرهای قدیمیتر نسخه ۳ از اکمااسکریپت را پشتیبانی میکنند. از ماه June سال ۲۰۱۵ اکمااسکریپت ۶ (ES6) یا همان اکمااسکریپت ۲۰۱۵ (ES2015) مورد قبول واقع شده است.توضیحات تکمیلی در مورد اکمااسکریپت ۶ را می توانید در Ecma International مشاهده نمایید. 17 |
18 | 19 |20 | Mozilla Developer Networkمرجع خوبی برای نسخهها، منابع و اخبار جاوااسکریپت میباشد. 21 |
22 | 23 |26 | مدل شیءگرای سند یا دام (DOM - Document Object Model) یک API برای HTML و XHTML می باشد که قابلیت تغییرات محتوا را فراهم میکند. توضیحات بیشتر در Mozilla Developer Network - DOM میباشد. 27 |
28 | -------------------------------------------------------------------------------- /i18n/pt-br/partials/getting-started.html: -------------------------------------------------------------------------------- 1 |4 | Criado pela Netscape em 1995 como uma extensão do HTML para o navegador Netscape Navigator 2.0, o JavaScript teve como função principal a manipulação de documentos HTML e a validação de formulários. 5 | 6 | Antes de ganhar seu nome tão famoso hoje em dia, o JavaScript foi chamado de Mocha. Quando saiu pela primeira vez em uma versão beta foi chamado oficialmente de LiveScript e finalmente quando foi liberado pela Sun Microsystems foi batizado pelo nome que hoje nós conhecemos. 7 | 8 | Devido à similaridade de nomes, algumas pessoas confundem o JavaScript com o Java. Embora ambos tenham a estrutura léxica da programação, elas não são a mesma linguagem. 9 | 10 | Diferente do C, C# e do Java, o JavaScript é uma linguagem interpretada. Isso significa que ele precisa de um "interpretador". No caso do JavaScript, o interpretador é o navegador. 11 |
12 | 13 |16 | O padrão do JavaScript é o ECMAScript. Em 2012 todos os navegadores modernos passaram a dar suporte ao ECMAScript 5.1. Navegadores antigos suportam pelo menos o ECMAScript 3. Uma sexta revisão desses padrões está em andamento. 17 |
18 | 19 |20 | Uma boa referência para versões, referências e novidades sobre o JavaScript pode ser encontrada no 21 | Mozilla Developer Network. 22 |
23 | 24 |27 | O Modelo de Objetos de Documentos é uma API para documentos HTML e XML. Ele fornece uma representação estrutural do documento, permitindo que você modifique seu conteúdo e sua apresentação visual usando linguagens de script como o JavaScript. Leia mais em Mozilla Developer Network - Referência do DOM. 28 |
29 | -------------------------------------------------------------------------------- /i18n/en-us/partials/getting-started.html: -------------------------------------------------------------------------------- 1 |4 | Created by Netscape in 1995 as an extension of HTML for Netscape Navigator 2.0, JavaScript had as its main function the manipulation of HTML documents and form validation. 5 | 6 | Before winning this name so famous nowadays, JavaScript was called Mocha. When it first shipped in beta releases, it was officially called LiveScript and finally, when it was released by Sun Microsystems, was baptized with the name by which it is known today. 7 | 8 | Because of the similar names, people confuse JavaScript with Java. Although both have the lexical structure of programming, they are not the same language. 9 | 10 | Different from C, C# and Java, JavaScript is an interpreted language. It means that it needs an "interpreter". In case of JavaScript, the interpreter is the browser. 11 |
12 | 13 |16 | The JavaScript standard is ECMAScript. As of 2012, all modern browsers fully support ECMAScript 5.1. Older browsers support at least ECMAScript 3. As of June 2015 the spec for ES6/ES2015 has been approved. Following the new annual release cycle, ES7/ES2016 has been adopted in June 2016. See the ECMAScript 2016 Language Specification at Ecma International. 17 |
18 | 19 |20 | A good reference to versions, references and news about JavaScript can be found at the Mozilla Developer Network. 21 |
22 | 23 |26 | The Document Object Model (DOM) is an API for HTML and XML documents. It provides a structural representation of the document, enabling you to modify its content and visual presentation by using a scripting language such as JavaScript. See more at Mozilla Developer Network - DOM. 27 |
28 | -------------------------------------------------------------------------------- /i18n/es-es/partials/getting-started.html: -------------------------------------------------------------------------------- 1 |4 | Creado por Netscape en 1995 como una extensión de HTML para Netscape Navigator 2.0, JavaScript ha tenido como función principal la manipulación de los documentos HTML y la validación de formularios. 5 | 6 | Antes de ganar su nombre muy famoso en estos días, JavaScript fue llamado Mocha. Cuando fue lanzada su primera publicación beta, fue oficialmente llamado LiveScript y finalmente, cuando fue publicado por Sun Microsystems, fue bautizado con el nombre por el cual es conocido hoy. 7 | 8 | A causa de los nombres similares, las personas confunden JavaScript con Java. Aunque ambos tienen la estructura léxica de programación, ellos son lenguajes muy diferentes. 9 | 10 | Diferente de C, C# y Java, JavaScript es un lenguaje interpretado. Significa que este requiere un "interpreter". En el caso de JavaScript, el interpreter es el navegador. 11 |
12 | 13 |16 | El estándar de JavaScript es ECMAScript. A partir del 2012, todos los navegadores modernos soportan completamente ECMAScript 5.1. Los navegadores antiguos soportan al menos ECMAScript 3. En Junio de 2015 la especificación para la versión ES6/ES2015 fue aprobada. Puedes revisar las especificaciones de la version 2015 de ECMAScript en Ecma International. 17 |
18 | 19 |20 | Una buena referencia sobre las versiones, documentación, noticias y demás sobre JavaScript puede encontrarse en la Red de Desarrolladores de Mozilla. 21 |
22 | 23 |26 | El Modelo de Objetos del Documento (DOM) es un API para documentos HTML y XML. Este prevee una representación estructural del documento, permitiéndole modificar su contenido y presentación visual mediante el uso de un lenguaje de scripting tal como JavaScript. Ver mas en Red de Desarrolladores de Mozilla - DOM. 27 |
28 | -------------------------------------------------------------------------------- /i18n/de-de/partials/getting-started.html: -------------------------------------------------------------------------------- 1 |4 | Erstellt von Netscape im Jahre 1995 als eine Erweiterung von HTML für den Netscape Navigator 2.0, waren die grundlegenden Funktionen von JavaScript die Manipulation von HTML-Dokumenten und die Formularvalidierung. 5 | 6 | Bevor der Name zu seinem heutigen Bekanntheitsgrad gelangt ist, wurde JavaScript früher Mocha genannt. Als zunächst Beta-Versionen davon erschienen sind, wurde es offiziell LiveScript gennant und schließlich, als es von Sun Microsystems veröffentlicht wurde, hat es den heutigen Namen angenommen. 7 | 8 | Wegen der ähnlichen Namen, wird JavaScript oft mit Java verwechselt. Obwohl beide die lexikalische Struktur einer Programmiersprache haben, handelt es nicht um dieselbe Programmiersprache. 9 | 10 | Anders als C, C# und Java, ist JavaScript eine interpretierte Programmiersprache. Sie braucht also einen "Interpreter". Im Fall von JavaScript, ist der Browser der Interpreter. 11 |
12 | 13 |16 | Der JavaScript-Standard ist ECMAScript. Nach dem Stand von 2012 unterstützen alle modernen Browser ECMAScript 5.1 vollständig. Ältere Browser unterstützen zumindest ECMAScript 3. Nach dem Stand vom Juni 2015 wurde die Spezifikation für ES6/ES2015 verabschiedet. Die ECMAScript 2015 Spezifikation ist verfügbar auf Ecma International. 17 |
18 | 19 |20 | Eine gute Sammlung für Versionen, Referenzen und Neuigkeiten über JavaScript findet man im Mozilla Developer Network. 21 |
22 | 23 |26 | Das Document Object Model (DOM) ist eine API für HTML- und XML-Dokumente. Es liefert eine strukturelle Representation des Dokuments. Damit ist es möglich, den Inhalt und die visuelle Präsentation des Dokuments mit einer Skriptsprache wie JavaScript zu verändern. Erfahre mehr unter Mozilla Developer Network - DOM. 27 |
28 | -------------------------------------------------------------------------------- /public/assets/js/vendor/jquery.scrollstop.js: -------------------------------------------------------------------------------- 1 | /* http://james.padolsey.com/javascript/special-scroll-events-for-jquery/ */ 2 | 3 | (function(){ 4 | 5 | var special = jQuery.event.special, 6 | uid1 = "D" + (+new Date()), 7 | uid2 = "D" + (+new Date() + 1); 8 | 9 | special.scrollstart = { 10 | setup: function() { 11 | 12 | var timer, 13 | handler = function(evt) { 14 | 15 | var _self = this, 16 | _args = arguments; 17 | 18 | if (timer) { 19 | clearTimeout(timer); 20 | } else { 21 | evt.type = "scrollstart"; 22 | jQuery.event.dispatch.apply(_self, _args); 23 | } 24 | 25 | timer = setTimeout( function(){ 26 | timer = null; 27 | }, special.scrollstop.latency); 28 | 29 | }; 30 | 31 | jQuery(this).bind("scroll", handler).data(uid1, handler); 32 | 33 | }, 34 | teardown: function(){ 35 | jQuery(this).unbind( "scroll", jQuery(this).data(uid1) ); 36 | } 37 | }; 38 | 39 | special.scrollstop = { 40 | latency: 300, 41 | setup: function() { 42 | 43 | var timer, 44 | handler = function(evt) { 45 | 46 | var _self = this, 47 | _args = arguments; 48 | 49 | if (timer) { 50 | clearTimeout(timer); 51 | } 52 | 53 | timer = setTimeout( function(){ 54 | 55 | timer = null; 56 | evt.type = "scrollstop"; 57 | jQuery.event.dispatch.apply(_self, _args); 58 | 59 | 60 | }, special.scrollstop.latency); 61 | 62 | }; 63 | 64 | jQuery(this).bind("scroll", handler).data(uid2, handler); 65 | 66 | }, 67 | teardown: function() { 68 | jQuery(this).unbind( "scroll", jQuery(this).data(uid2) ); 69 | } 70 | }; 71 | 72 | })(); -------------------------------------------------------------------------------- /i18n/zh-cn/partials/good-parts.html: -------------------------------------------------------------------------------- 1 |4 | JavaScriot 虽然和其他语言在面向对象上面有些不同的地方，但仍然具有面向对象的编程能力。 5 |
6 | 7 |8 | 资源: JavaScript 面向对象编程介绍 9 |
10 | 11 |14 | 匿名函数是在代码运行时动态声明的函数。之所以叫做匿名函数是因为他跟其他函数不同，它并没有函数名称。 15 |
16 | 17 |18 | 资源: JavaScript anonymous functions 19 |
20 | 21 |24 | 函数是 JavaScript 的一等对象。这意味着 JavaScript 中的函数只是一种特殊类型的对象，并拥有一般对象所具备的能力。 25 |
26 | 27 |28 | 资源: Functions are first class objects in JavaScript 29 |
30 | 31 |34 | 对于许多前端开发者而言，JavaScript 是他们所使用的第一个脚本语言和/或解释语言, 对这些开发者来说，弱类型的概念和含义或许像第二天性一样自然; 然而现在网页应用的需求爆炸式增长，致使越来越多的后端开发者必须顾及客户端技术, 大部分此类开发者有强类型语言的背景, 例如 C# 或 Java,因此并不熟悉弱类型语言所带来的高度自由及潜在的缺陷。 35 |
36 | 37 |38 | 资源: Understanding Loose Typing in JavaScript 39 |
40 | 41 |44 | 作用域： 在 JavaScript 中，函数是我们在声明变量时, 实际的作用域分隔符, 也就是说常见的循环及表达式（如 if, for, while, switch 及 try）并“不能“指定作用域, 这一点有别于大部分的程序语言。因此函数中的这些区块会共享作用域, 这样使得在这些区块内部声明只属于这些函数块的变量行为可能是危险的。 45 |
46 | 47 |48 | 变量提升： 在运行时，所有的变量及函数声明将会被移到函数的起始位置（它的作用域）- 这就是所谓的变量提升。这么说，在作用域的一开始就声明所有变量，以避免因未声明就操作变量造成的未预期错误是一个好的实践。 -这是一个习惯使用支持块级作用域语言的开发者经常遇到的问题。 49 |
50 | 51 |52 | 资源: JavaScript Scoping and Hoisting 53 |
54 | 55 |58 | 函数绑定最有可能是 JavaScript 初学者最少关心的问题, 但当你意识到你需要一个解决方案以在另一个函数中保持 this 的上下文环境时, 你可能会了解到你真需要的其实是函数原型绑定（Function.prototype.bind()）。 59 |
60 | 61 |62 | 资源: Understanding JavaScript’s Function.prototype.bind 63 |
64 | 65 |68 | 闭包是引用独立(自由)变量的函数。换句话说, 闭包中定义的函数会“记住”它被创建时的环境。理解这个概念很重要, 因为它在开发过程中是有用的, 类似模拟的私有方法。它也可以帮助你学习如何避免一些常见的错误，例如在循环中使用闭包。 69 | 70 |
71 | 72 |73 | 资源: MDN - Closures 74 |
75 | 76 |79 | ECMAScript 5 的严格模式是一种可选的使用严格变量的 JavaScript 方式。严格模式并非只是一个子集：它特意地在语法上有别于一般的代码。各家浏览器对严格模式的支持也不同, 所以开启严格模式时建议进行功能测试。严格模式的代码与非严格模式的代码是可以并存的, 所以可以自由決定严格模式部分的多少。 80 |
81 | 82 |83 | 来源: MDN - Strict mode 84 |
85 | 86 |
89 | 一个立即调用函数表达式是采用 JavaScript 的函数作用域产生一个词法作用域的模式。立即调用函数可避免变量从其所在的块内提升到上面的块, 以避免污染全局环境, 并可使用公共方法访问它,同事保留隐私。
90 | 这种模式被称为自执行匿名函数，但 @cowboy (Ben Alman) 为它定义了语义上更合适的名字 IIFE 。
91 |
94 | 资源: Immediately-Invoked Function Expression (IIFE) 95 |
96 | -------------------------------------------------------------------------------- /i18n/zh-tw/partials/good-parts.html: -------------------------------------------------------------------------------- 1 |4 | JavaScript 即使跟其他語言在物件導向方面有些爭論的地方，但仍具有強烈物件導向的編程能力。 5 |
6 | 7 |8 | 來源: JavaScript 物件導向介紹 9 |
10 | 11 |14 | 匿名函式是在程式運行時動態宣告的函式。之所以稱為匿名函式是因為它跟其他一般函式不同，它並沒有給予指定的函式名稱。 15 |
16 | 17 |18 | 來源: JavaScript anonymous functions 19 |
20 | 21 |24 | 函式（function）是 JavaScript 的第一級物件。這意味著 JavaScript 中的函式（function）只是一種特殊型態的物件，並且能做到一般物件所能執行的行為。 25 |
26 | 27 |28 | 來源: Functions are first class objects in JavaScript 29 |
30 | 31 |34 | 對於許多前端開發者而言，JavaScript 是他們所使用的第一個腳本語言或是直譯語言。對這些開發者來說，弱型別變數的概念跟影響或許像是第二天性一般自然。然而現在網頁應用程式的爆炸性成長需求，使得後端開發者必需涉足客戶端技術。這類的開發者大部分都有強型別的語言背景，例如 C# 或是 Java，因此並不熟悉弱型別變數所給予的高度自由及潛在的陷阱。 35 |
36 | 37 |38 | 來源: Understanding Loose Typing in JavaScript 39 |
40 | 41 |44 | 作用域： 在 JavaScript 中，函式是我們在宣告變量時，實際的作用域分隔符，也就是說常見的迴圈及條件式（如 if, for, while, switch 及 try）並“不能“指定作用域，這一點是有別於大部分的程式語言。因此函式中的這些區塊將會共享相同的作用域。這樣使得在這些區塊內部宣告只屬於這些區塊的變量的行為變成可能是危險的。 45 |
46 | 47 |48 | 變量提升： 在運行時，所有的變數及函式宣告將會被移至各函式的起始位置（即函式的作用域）- 這就是所謂的變量提升。雖然如此，但是良好的習慣還是在作用域的一開始就先宣告所有變量，避免因未宣告就操作變量造成未預期的錯誤。 - 這是一個習慣有區塊作用域語言開發者的常見問題。 49 |
50 | 51 |52 | 來源: JavaScript Scoping and Hoisting 53 |
54 | 55 |58 | 剛開始學習 JavaScript 時，你可能不需花什麼時間在處理函式綁定上面，但你漸漸會遇到如何在另一個函式中保留 this 內容的問題，最終你會了解，你真正需要的其實是 函式原型綁定（Function.prototype.bind()）。 59 |
60 | 61 |62 | 來源: Understanding JavaScript’s Function.prototype.bind 63 |
64 | 65 |68 | 閉包是參照獨立（自由）變量的函式。換句話說，閉包中所定義的函式會“保留“它被產生出來時的環境。 69 | 了解這個概念是很重要的，因為它在開發過程中是有用的，類似私有方法的功能。它也可以幫助你學習如何避免一些常見的錯誤，例如在迴圈中使用閉包。 70 |
71 | 72 |73 | 來源: MDN - Closures 74 |
75 | 76 |79 | ECMAScript 5 的嚴格模式是用來限制一些 JavaScript 不嚴謹的寫法。嚴格模式並非只是一個子集：它特地在語義上有別於一般的程式碼。各家瀏覽器對於嚴格模式有不同的支援度，所以在使用嚴格模式時，建議要進行功能測試。嚴格模式的程式碼與非嚴格模式的程式碼是可以並存的，所以可以自由決定嚴格模式部分的多寡。 80 |
81 | 82 |83 | 來源: MDN - Strict mode 84 |
85 | 86 |
89 | 立即調用函式是指使用 JavaScript 的函式來限制作用域範圍的模式。立即調用函式可以阻止區塊內的變量提升，保護區塊內的變量不被其他作用範圍的變量污染，同時也允許宣告公開方法來操作區塊中的私有變量。
90 | 這種模式被稱為自執行匿名函式，但 @cowboy (Ben Alman) 為它定義了語義上更適合的字彙 IIFE 。
91 |
94 | 來源: Immediately-Invoked Function Expression (IIFE) 95 |
96 | -------------------------------------------------------------------------------- /public/assets/js/core.js: -------------------------------------------------------------------------------- 1 | var App = (function (window, document, $) { 2 | 3 | 'use strict'; 4 | 5 | var users = [ 6 | 'BrendanEich', 7 | 'isaacs', 8 | 'rdworth', 9 | 'fat', 10 | 'michalbe', 11 | 'afabbro', 12 | 'addyosmani', 13 | 'joezimjs', 14 | 'douglascrockford', 15 | 'paulirish', 16 | 'tj', 17 | 'guille', 18 | 'nzakas', 19 | 'jeresig', 20 | 'substack', 21 | 'dherman', 22 | 'creationix', 23 | 'mrdoob', 24 | 'codepo8', 25 | 'rwaldron', 26 | 'darkwing', 27 | 'bevacqua', 28 | 'sindresorhus', 29 | 'getify', 30 | 'ericelliott', 31 | 'aaronfrost', 32 | 'jhusain', 33 | 'ryanflorence', 34 | 'gaearon', 35 | 'rauschma' 36 | ], 37 | userIsDone, 38 | URL = 'https://api.github.com/'; 39 | 40 | return { 41 | // Init function 42 | init: function () { 43 | this.getGithubUsers(); 44 | this.getGithubContrib(); 45 | $('img.lazy').lazyload(); 46 | }, 47 | // Getting and appending users of github 48 | getGithubUsers: function () { 49 | var i = 0, 50 | length = userIsDone = users.length, 51 | str = '', 52 | $whoto; 53 | 54 | // Callback function 55 | function cb(result) { 56 | userIsDone -= 1; 57 | str += ''; 61 | // Checking if all callbacks were called 62 | if (userIsDone === 0) { 63 | $whoto = $('#whotofollow .users'); 64 | $whoto.append(str); 65 | $whoto.find('img.lazy').lazyload(); 66 | } 67 | } 68 | 69 | // Doing the requests for each user 70 | for (; i < length; i += 1) { 71 | $.get(URL + 'users/' + users[i] + 72 | '?client_id=5feee647eb6cc3d1f984&client_secret=9ed0c553e278d047a264c3abd26f385144d51ac4', 73 | cb); 74 | } 75 | }, 76 | // Getting the project's contributors 77 | getGithubContrib: function () { 78 | var $footer; 79 | 80 | // Callback function 81 | function cb(result) { 82 | var i = 0, 83 | length = result.length, 84 | str = '', 85 | obj; 86 | 87 | for (; i < length; i += 1) { 88 | obj = result[i]; 89 | 90 | str += ''; 94 | } 95 | 96 | $footer = $('#footer .users'); 97 | $footer.append(str); 98 | $footer.find('img.lazy').lazyload(); 99 | } 100 | 101 | // Doing the request 102 | $.get(URL + 103 | 'repos/braziljs/js-the-right-way/contributors?client_id=5feee647eb6cc3d1f984&client_secret=9ed0c553e278d047a264c3abd26f385144d51ac4', 104 | cb) 105 | } 106 | } 107 | 108 | }(window, document, jQuery)); 109 | 110 | // Starting the Application 111 | App.init(); 112 | -------------------------------------------------------------------------------- /scripts/tasks/i18n.js: -------------------------------------------------------------------------------- 1 | /* 2 | * i18n 3 | * 4 | * Make/render the index file for each language 5 | * Copyright (c) 2015 Allan Esquina, contributors 6 | * Licensed under the MIT license. 7 | */ 8 | 9 | 'use strict'; 10 | 11 | module.exports = function (grunt) { 12 | var path = require('path'); 13 | var extend = require('node.extend'); 14 | var mustache = require('mustache'); 15 | var Entities = require('html-entities').AllHtmlEntities; 16 | var htmlMinify = require('html-minifier').minify; 17 | var entities = new Entities(); 18 | 19 | // Constants 20 | var JSON_PATH = path.join(__dirname, '../../i18n'); 21 | var TEMPLATE_PATH = path.join(__dirname, '../../templates'); 22 | var PUBLIC_PATH = path.join(__dirname, '../../public'); 23 | var TEMPLATE_FILE = 'index.html'; 24 | var DEFAULT_LANGUAGE = 'en-us.json'; 25 | 26 | // Read the i18n directory and render a template with the json's data 27 | var generate = function () { 28 | var template = grunt.file.read(path.join(TEMPLATE_PATH, TEMPLATE_FILE)); 29 | var data, t, label; 30 | var defaultData = grunt.file.readJSON(path.join(JSON_PATH, DEFAULT_LANGUAGE.replace('.json', ''),DEFAULT_LANGUAGE)); 31 | 32 | 33 | grunt.file.recurse( JSON_PATH, function (abspath, rootdir, subdir, filename){ 34 | 35 | if(filename.indexOf('.json') !== -1) { 36 | data = getData(path.join(JSON_PATH, filename.replace('.json', ''), filename), filename.replace('.json', '')); 37 | 38 | // Extend from default language 39 | data = extend(true, defaultData, data); 40 | 41 | data.dropdown = { 42 | options: data.languages.map(function (lang) { 43 | var buf; 44 | if(lang.url !== filename.replace('.json', '')) { 45 | 46 | buf = {name:lang.name, url: DEFAULT_LANGUAGE.replace('.json', '') === lang.url ? '' : lang.url}; 47 | } else { 48 | label = lang.name; 49 | buf = false; 50 | } 51 | return buf; 52 | }).filter(function (l) { 53 | return l; 54 | }), 55 | label: label 56 | }; 57 | 58 | // Paths 59 | var prop = grunt.cli.tasks.indexOf('dist') !== -1 ? 'dist' : 'dev'; 60 | data.paths = grunt.config.get('application')[prop]; 61 | 62 | t = mustache.to_html(template, data); 63 | save(TEMPLATE_FILE, filename, entities.decode(t)); 64 | 65 | // Save the index file on the Public derectory with the default language 66 | if(DEFAULT_LANGUAGE === filename) { 67 | save(TEMPLATE_FILE, '', entities.decode(t)); 68 | } 69 | } 70 | }); 71 | } 72 | 73 | // Save a file with the rendered template 74 | var save = function (name, dest, content) { 75 | try { 76 | grunt.log.write('Creating file ' + path.join(PUBLIC_PATH, dest.replace('.json', ''), name) + '\n'); 77 | grunt.file.write(path.join(PUBLIC_PATH, dest.replace('.json', ''), name), htmlMinify(content)); 78 | } catch (e) { 79 | grunt.log.write(e); 80 | } 81 | } 82 | 83 | // Parse @link files if exists 84 | var getData = function (filename, lang) { 85 | var data = grunt.file.readJSON(filename); 86 | var re = /{{@link=([^\s]+)}}/, res; 87 | data = (function r(o) { 88 | var tmp; 89 | if( typeof o === "object" ) { 90 | for (var v in o) { 91 | if (o.hasOwnProperty(v)) { 92 | o[v] = r(o[v]); 93 | } 94 | } 95 | } 96 | else { 97 | res= re.exec(o); 98 | if(res) { 99 | tmp = grunt.file.read(path.join(JSON_PATH,lang,res[1])); 100 | o = tmp !== '' ? tmp : 'File ' + path.join(JSON_PATH,lang,res[1]) + ' not found.' 101 | } 102 | } 103 | return o; 104 | }(data)); 105 | return data 106 | } 107 | 108 | grunt.registerTask('i18n', function () { 109 | grunt.log.write('Translating...\n'); 110 | generate.call(); 111 | }); 112 | } 113 | -------------------------------------------------------------------------------- /i18n/ko-kr/partials/good-parts.html: -------------------------------------------------------------------------------- 1 |4 | JavaScript는 객체지향 프로그래밍에 강력한 호환성을 제공하고 있지만, 그런데도 타 객체 지향 언어와 비교했을 때 다른 점으로 인해 자주 논의됩니다. 5 |
6 | 7 |8 | 참고: Introduction to Object-Oriented JavaScript 9 |
10 | 11 |14 | 익명 함수는 실행 시간 중에 동적으로 선언되는 함수입니다. 이런 함수를 익명함수라 하는데 다른 평범한 함수와는 달리 이름이 주어지지 않기 때문입니다. 15 |
16 | 17 |18 | 참고: JavaScript anonymous functions 19 |
20 | 21 |24 | JavaScript에서 함수는 1급 객체입니다. 다시 말해 JavaScript 함수는 특별한 타입의 객체로, 일반적인 객체가 할 수 있는 모든 일을 할 수 있다는 뜻입니다. 25 |
26 | 27 |28 | 참고: Functions are first class objects in JavaScript 29 |
30 | 31 |34 | 많은 Front-end 개발자들에게 JavaScript는 처음으로 접하는 인터프리터 언어이자 스크립트 언어입니다. 이 개발자들에게 느슨한 타입의 변수라는 개념과 논리적 함축은 아주 자연스러운 것입니다. 하지만 모던 웹 애플리케이션에 대한 수요가 폭발적으로 증가함에 따라 클라이언트 측 기술에 발을 디딘 Back-end 개발자들도 점점 많아지고 있는데, C#이나 Java 같은 강한 타입의 언어에 친숙한 이 사람들에게는 느슨한 타입의 변수들이 주는 자유로움이나 잠재적인 함정들이 익숙하지 않습니다. 35 |
36 | 37 |38 | 참고: Understanding Loose Typing in JavaScript 39 |
40 | 41 |44 | 스코핑: JavaScript에서는 함수가 사실상의 변수들의 스코프 범위입니다. 그 말인즉슨, 루프나 조건문(if, for, while, switch, try 같은)의 블록은 다른 언어들과는 다르게 스코프 범위가 아닙니다. 그러므로 함수와 그 함수 내에 있는 블록들은 같은 스코프를 사용합니다. 따라서 변수가 블록 내에서만 존재 할거라 생각하고 변수를 선언하는 것은 위험할 수도 있습니다. 45 |
46 | 47 |48 | 호이스팅: 실행을 시작하면 모든 변수와 함수의 선언은 각 함수(스코프)의 가장 위로 옮겨집니다. 이것이 바로 호이스팅(hoisting)입니다. 이것 때문에, 첫 줄 이후에 선언된 변수들은 호이스팅으로 인해 선언한 곳 전부터 존재하게 됩니다. 실수를 피하고자 모든 변수를 제일 첫 줄에 함께 선언하는 것은 좋은 습관입니다. 이것은 블록 스코프 기반 언어를 사용하던 프로그래머들이 흔하게 겪는 문제입니다. 49 |
50 | 51 |52 | 참고: JavaScript Scoping and Hoisting 53 |
54 | 55 |58 | 함수 바인딩은 처음 JavaScript를 시작할 때에는 거의 신경 쓸 일이 없을지도 모릅니다. 하지만 다른 함수 내에서 this의 context를 유지해야 할 일이 생겼을 때 당신이 정말 필요로 하는 것은 Function.prototype.bind()라는 걸 알게 될 겁니다. 59 |
60 | 61 |62 | 참고: Understanding JavaScript’s Function.prototype.bind 63 |
64 | 65 |68 | 클로저는 독립적인(자유로운) 변수들을 가리키는 함수입니다. 다시 말하자면, 클로저 안에서 정의한 함수는 그 함수가 만들어진 환경을 '기억'합니다. private 메소드를 흉내 내는 것 이외에도 개발 시에 유용하게 쓰이는 개념이므로 이해하는 것이 중요합니다. 또한, 반복문 안에서 클로저를 생성하는 것처럼, 흔히 하는 실수들을 어떻게 피할 수 있는지 배우는 데도 도움이 됩니다. 69 |
70 | 71 |72 | 참고: MDN - Closures 73 |
74 | 75 |78 | ECMAScript 5의 strict 모드는 JavaScript의 제한된 변형을 사용하는 방법입니다. 단순히 부분집합은 아닙니다: 의도적으로 일반 코드와 다른 의미를 가집니다. Strict 모드를 지원하지 않는 브라우저는 지원하는 브라우저와 다르게 Strict 모드 코드를 실행하므로, Strict 모드에 대해 적절하게 지원되는지 기능 테스트가 없다면 신뢰할 수 없습니다. Strict 모드와 비 Strict 모드의 코드는 동시에 존재할 수 있으므로, 계속해서 Strict 모드를 명시해야 합니다. 79 |
80 | 81 |82 | 참고: MDN - Strict mode 83 |
84 | 85 |88 | 즉시 실행 함수 표현은 JavaScript의 함수 스코핑을 사용해서 렉시컬 스코프를 생성하는 패턴입니다. 즉시 실행 함수 표현은 블록 내에서 변수가 호이스팅되는걸 방지하거나 전역 환경이 오염되는 것을 보호하는 데 사용되기도 하며, 동시에 함수 내에서 정의된 변수를 private로 만들며 메소드만 접근하도록 만들 수도 있습니다. 89 | 이 패턴은 자기실행 익명 함수(self-executing anonymous function)이라고 불리기도 하지만, @cowboy (Ben Alman)이 패턴에 대해 의미상으로 더 정확한 단어로 IIFE를 소개했습니다. 90 |
91 | 92 |93 | 참고: Immediately-Invoked Function Expression (IIFE) 94 |
95 | -------------------------------------------------------------------------------- /i18n/ko-kr/partials/patterns.html: -------------------------------------------------------------------------------- 1 | 2 |5 | JavaScript는 자기만의 독자적인 디자인 패턴을 가지고 있는 한편, 많은 고전적인 디자인 패턴 또한 구현할 수 있습니다. 6 |
7 | 8 |9 | JavaScript 디자인 패턴에 대해 배우는 좋은 방법은 Addy Osmani의 오픈소스 책 Learning JavaScript Design Patterns와 아래에 있는 중요한 패턴들의 문서를 기본으로 삼는 것입니다. 10 |
11 | 12 |24 | 생성패턴 25 |
26 | 27 |42 | 구조패턴 43 |
44 | 45 |55 | 행위패턴 56 |
57 | 58 |5 | 雖然 JavaScript 包含了自身語言獨有的設計模式，但許多經典的設計模式仍然可以實作。 6 |
7 | 8 |9 | Addy Osmani 的開源書 Learning JavaScript Design Patterns 是很好的學習範本，下面大多數的連結都出自本書。 10 |
11 | 12 |24 | 創建型設計模式 25 |
26 | 27 |42 | 結構型設計模式 43 |
44 | 45 |55 | 行為型設計模式 56 |
57 | 58 |5 | 虽然 JavaScript 有其独有的设计模式，但许多经典的设计模式仍然是可以实现的。 6 | 7 |
8 | 9 |10 | Addy Osmani 的开源书 Learning JavaScript Design Patterns 是很好的学习资料，下面大多数的链接都出自本书。 11 |
12 | 13 |25 | 创建型设计模式 26 |
27 | 28 |43 | 结构性设计模式 44 |
45 | 46 |56 | 行为设计模式 57 |
58 | 59 |5 | While JavaScript contains design patterns that are exclusive to the language, many classical design patterns can also be implemented. 6 |
7 | 8 |9 | A good way to learn about these is Addy Osmani’s open source book Learning JavaScript Design Patterns, and the links below are (in the majority) based on it. 10 |
11 | 12 |24 | Creational Design Patterns 25 |
26 | 27 |42 | Structural Design Patterns 43 |
44 | 45 |55 | Behavioral Design Patterns 56 |
57 | 58 |5 | While JavaScript contains design patterns that are exclusive to the language, many classical design patterns can also be implemented. 6 |
7 | 8 |9 | A good way to learn about these is Addy Osmani’s open source book Learning JavaScript Design Patterns, and the links below are (in the majority) based on it. 10 |
11 | 12 |24 | Creational Design Patterns 25 |
26 | 27 |42 | Structural Design Patterns 43 |
44 | 45 |55 | Behavioral Design Patterns 56 |
57 | 58 |5 | Apesar de o JavaScript possuir padrões de projeto exclusivos da linguagem, outros padrões clássicos também podem ser implementados. 6 |
7 | 8 |9 | Uma boa maneira de aprendê-los é ler o livro de código aberto Learning JavaScript Design Patterns do Addy Osmani. A maioria dos links abaixo são baseados nesse livro. 10 |
11 | 12 |24 | Creational Design Patterns 25 |
26 | 27 |42 | Structural Design Patterns 43 |
44 | 45 |55 | Behavioral Design Patterns 56 |
57 | 58 |5 | Während JavaScript einige exklusive Entwurfsmuster besitzt, können viele klassische Entwurfsmuster ebenfalls implementiert werden. 6 |
7 | 8 |9 | Ein guter Weg, mehr darüber zu erfahren, ist Addy Osmani’s frei erhältliches Buch "Learning JavaScript Design Patterns", auf dem die meisten der unten aufgelisteten Links basieren. 10 |
11 | 12 |24 | Creational Design Patterns 25 |
26 | 27 |42 | Structural Design Patterns 43 |
44 | 45 |55 | Behavioral Design Patterns 56 |
57 | 58 |5 | Mientras JavaScript contiene patrones de diseño que son exclusivos para el lenguaje, muchos patrones de diseño de otros lenguajes pueden ser también implementados. 6 |
7 | 8 |9 | Una buena forma de aprender acerca de estos patrones es el libro de Addy Osmani de código abierto Aprender Patrones de Diseño en JavaScript. Los enlaces referenciados son (en su mayoría) basados en este. 10 |
11 | 12 |24 | Patrones de Diseño Creacionales 25 |
26 | 27 |42 | Patrones de Diseno Estructural 43 |
44 | 45 |55 | Patrones de Diseno de Comportamiento 56 |
57 | 58 |4 | JavaScript has strong object-oriented programming capabilities, even though some debates have taken place due to the differences in object-oriented JavaScript compared to other languages. 5 |
6 | 7 |8 | Source: Introduction to Object-Oriented JavaScript 9 |
10 | 11 |14 | Anonymous functions are functions that are dynamically declared at runtime. They’re called anonymous functions because they aren’t given a name in the same way as normal functions. 15 |
16 | 17 |18 | Source: JavaScript anonymous functions 19 |
20 | 21 |24 | Functions in JavaScript are first class objects. This means that JavaScript functions are just a special type of object that can do all the things that regular objects can do. 25 |
26 | 27 |28 | Source: Functions are first class objects in JavaScript 29 |
30 | 31 |34 | For many front-end developers, JavaScript was their first taste of a scripting and/or interpretive language. To these developers, the concept and implications of loosely typed variables may be second nature. However, the explosive growth in demand for modern web applications has resulted in a growing number of back-end developers that have had to dip their feet into the pool of client-side technologies. Many of these developers are coming from a background of strongly typed languages, such as C# or Java, and are unfamiliar with both the freedom and the potential pitfalls involved in working with loosely typed variables. 35 |
36 | 37 |38 | Source: Understanding Loose Typing in JavaScript 39 |
40 | 41 |44 | Scoping: In JavaScript, functions are our de facto scope delimiters for declaring vars, which means that usual blocks from loops and conditionals (such as if, for, while, switch and try) DON'T delimit scope, unlike most other languages. Therefore, those blocks will share the same scope as the function which contains them. This way, it might be dangerous to declare vars inside blocks as it would seem the var belongs to that block only. 45 |
46 | 47 |48 | Hoisting: On runtime, all var and function declarations are moved to the beginning of each function (its scope) - this is known as Hoisting. Having said so, it is a good practice to declare all the vars altogether on the first line, in order to avoid false expectations with a var that got declared late but happened to hold a value before - this is a common problem for programmers coming from languages with block scope. 49 |
50 | 51 |52 | Source: JavaScript Scoping and Hoisting 53 |
54 | 55 |58 | Function binding is most probably the least of your concerns when beginning with JavaScript, but when you realize that you need a solution to the problem of how to keep the context of this within another function, then you might realize that what you actually need is Function.prototype.bind(). 59 |
60 | 61 |62 | Source: Understanding JavaScript’s Function.prototype.bind 63 |
64 | 65 |68 | Closures are functions that refer to independent (free) variables. In other words, the function defined in the closure 'remembers' the environment in which it was created in. 69 | It is an important concept to understand as it can be useful during development, like emulating private methods. It can also help to learn how to avoid common mistakes, like creating closures in loops. 70 |
71 | 72 |73 | Source: MDN - Closures 74 |
75 | 76 |79 | ECMAScript 5's strict mode is a way to opt in to a restricted variant of JavaScript. Strict mode isn't just a subset: it intentionally has different semantics from normal code. Browsers not supporting strict mode will run strict mode code with different behavior from browsers that do, so don't rely on strict mode without feature-testing for support for the relevant aspects of strict mode. Strict mode code and non-strict mode code can coexist, so scripts can opt into strict mode incrementally. 80 |
81 | 82 |83 | Source: MDN - Strict mode 84 |
85 | 86 |
89 | An immediately-invoked function expression is a pattern which produces a lexical scope using JavaScript's function scoping. Immediately-invoked function expressions can be used to avoid variable hoisting from within blocks, protect against polluting the global environment and simultaneously allow public access to methods while retaining privacy for variables defined within the function.
90 | This pattern has been referred to as a self-executing anonymous function, but @cowboy (Ben Alman) introduced the term IIFE as a more semantically accurate term for the pattern.
91 |
94 | Source: Immediately-Invoked Function Expression (IIFE) 95 |
96 | -------------------------------------------------------------------------------- /i18n/fa-ir/partials/good-parts.html: -------------------------------------------------------------------------------- 1 |4 | JavaScript has strong object-oriented programming capabilities, even though some debates have taken place due to the differences in object-oriented JavaScript compared to other languages. 5 |
6 | 7 |8 | Source: Introduction to Object-Oriented JavaScript 9 |
10 | 11 |14 | Anonymous functions are functions that are dynamically declared at runtime. They’re called anonymous functions because they aren’t given a name in the same way as normal functions. 15 |
16 | 17 |18 | Source: JavaScript anonymous functions 19 |
20 | 21 |24 | Functions in JavaScript are first class objects. This means that JavaScript functions are just a special type of object that can do all the things that regular objects can do. 25 |
26 | 27 |28 | Source: Functions are first class objects in JavaScript 29 |
30 | 31 |34 | For many front-end developers, JavaScript was their first taste of a scripting and/or interpretive language. To these developers, the concept and implications of loosely typed variables may be second nature. However, the explosive growth in demand for modern web applications has resulted in a growing number of back-end developers that have had to dip their feet into the pool of client-side technologies. Many of these developers are coming from a background of strongly typed languages, such as C# or Java, and are unfamiliar with both the freedom and the potential pitfalls involved in working with loosely typed variables. 35 |
36 | 37 |38 | Source: Understanding Loose Typing in JavaScript 39 |
40 | 41 |44 | Scoping: In JavaScript, functions are our de facto scope delimiters for declaring vars, which means that usual blocks from loops and conditionals (such as if, for, while, switch and try) DON'T delimit scope, unlike most other languages. Therefore, those blocks will share the same scope as the function which contains them. This way, it might be dangerous to declare vars inside blocks as it would seem the var belongs to that block only. 45 |
46 | 47 |48 | Hoisting: On runtime, all var and function declarations are moved to the beginning of each function (its scope) - this is known as Hoisting. Having said so, it is a good practice to declare all the vars altogether on the first line, in order to avoid false expectations with a var that got declared late but happened to hold a value before - this is a common problem for programmers coming from languages with block scope. 49 |
50 | 51 |52 | Source: JavaScript Scoping and Hoisting 53 |
54 | 55 |58 | Function binding is most probably the least of your concerns when beginning with JavaScript, but when you realize that you need a solution to the problem of how to keep the context of this within another function, then you might realize that what you actually need is Function.prototype.bind(). 59 |
60 | 61 |62 | Source: Understanding JavaScript’s Function.prototype.bind 63 |
64 | 65 |68 | Closures are functions that refer to independent (free) variables. In other words, the function defined in the closure 'remembers' the environment in which it was created in. 69 | It is an important concept to understand as it can be useful during development, like emulating private methods. It can also help to learn how to avoid common mistakes, like creating closures in loops. 70 |
71 | 72 |73 | Source: MDN - Closures 74 |
75 | 76 |79 | ECMAScript 5's strict mode is a way to opt in to a restricted variant of JavaScript. Strict mode isn't just a subset: it intentionally has different semantics from normal code. Browsers not supporting strict mode will run strict mode code with different behavior from browsers that do, so don't rely on strict mode without feature-testing for support for the relevant aspects of strict mode. Strict mode code and non-strict mode code can coexist, so scripts can opt into strict mode incrementally. 80 |
81 | 82 |83 | Source: MDN - Strict mode 84 |
85 | 86 |
89 | An immediately-invoked function expression is a pattern which produces a lexical scope using JavaScript's function scoping. Immediately-invoked function expressions can be used to avoid variable hoisting from within blocks, protect against polluting the global environment and simultaneously allow public access to methods while retaining privacy for variables defined within the function.
90 | This pattern has been referred to as a self-executing anonymous function, but @cowboy (Ben Alman) introduced the term IIFE as a more semantically accurate term for the pattern.
91 |
94 | Source: Immediately-Invoked Function Expression (IIFE) 95 |
96 | -------------------------------------------------------------------------------- /i18n/pt-br/partials/good-parts.html: -------------------------------------------------------------------------------- 1 |4 | JavaScript tem fortes capacidades de programação orientada a objetos, apesar de ocorrerem algumas discussões devido às diferenças da orientação a objetos no JavaScript em comparação com outras linguagens. 5 |
6 | 7 |8 | Fonte: Introdução ao JavaScript Orientado a Objeto 9 |
10 | 11 |14 | Funções anônimas são funções que são declaradas dinamicamente em tempo de execução. Elas são chamadas de funções anônimas devido ao fato de não receberem um nome, como as funções tradicionais. 15 |
16 | 17 |18 | Fonte: JavaScript anonymous functions 19 |
20 | 21 |24 | Funções em JavaScript são funções de primeira classe. Isso significa que no JavaScript as funções são um tipo especial de objeto que podem fazer todas as coisas que um objeto normal pode fazer. 25 |
26 | 27 |28 | Fonte: Functions are first class objects in JavaScript 29 |
30 | 31 |34 | Para muitos desenvolvedores front-end, o JavaScript foi o primeiro gostinho de uma linguagem de script e/ou de linguagem interpretada. Para esses desenvolvedores, os conceitos e implicações de variáveis de tipagem fraca podem ser naturais. Entretanto, o crescimento explosivo na demanda por aplicações web modernas resultou no crescimento do número de desenvolvedores back-end que tiveram que enfiar seus pés nas tecnologias de client-side. Muitos desses desenvolvedores estão chegando com conhecimentos de uma linguagem fortemente tipada, como c# ou Java, e não estão familiarizados com a liberdade e as armadilhas envolvidas em trabalhar com variáveis de tipagem fraca. 35 |
36 | 37 |38 | Fonte: Understanding Loose Typing in JavaScript 39 |
40 | 41 |44 | Escopos: Em JavaScript, funções são nosso delimitador de escopo de facto para declaração de variáveis, o que significa que blocos usuais de loops e estruturas condicionais (como if, for, while, switch e try) NÃO delimitam escopos, diferente de muitas outras linguagens. Portanto, esses blocos irão compartilhar do mesmo escopo que a função que os contém. Dessa forma, pode ser perigoso declarar variáveis dentro de blocos, já que irá parecer que a variável pertence apenas ao bloco. 45 |
46 | 47 |48 | Elevação (hoisting): Em tempo de execução, todas as variáveis e declarações de funções são movidas para o início de cada função (seu próprio escopo) - isso é conhecido como elevação (hoisting). Dito isso, é uma boa prática declarar todas as variáveis juntas na primeira linha, a fim de evitar falsas expectativas em relação a uma variável que foi declarada depois mas que acabou recebendo um valor antes - esse é um problema comum para programadores vindos de linguagens com escopos em blocos. 49 |
50 | 51 |52 | Fonte: JavaScript Scoping and Hoisting 53 |
54 | 55 |58 | Binding de funções será provavelmente a última de suas preocupações quando estiver começando com o JavaScript, mas quando você perceber que precisa de uma solução para o problema de como manter o contexto do 'this' dentro de outra função, então você pode se dar conta do que realmente precisa é a função Function.prototype.bind(). 59 |
60 | 61 |62 | Fonte: Understanding JavaScript’s Function.prototype.bind 63 |
64 | 65 |68 | Closures (fechamentos) são funções que se referem a variáveis livres (independentes). Em outras palavras, a função definida no closure "lembra" do ambiente em que ela foi criada. 69 | 70 | Esse é um importante conceito a ser entendido, pois pode ser muito útil durante o desenvolvimento, como emulando métodos privados. Também pode ajudar a aprender como evitar erros comuns, como criando closures em loops. 71 |
72 | 73 |74 | Fonte: MDN - Closures 75 |
76 | 77 |80 | O modo rigoroso do ECMAScript 5 é um modo de optar por uma variação restrita do JavaScript. O modo rigoroso não é apenas um subconjunto, ele intencionalmente tem a semântica diferente do código normal. Navegadores que não suportam o modo rigoroso irão executar o código com o comportamento diferente de navegadores que suportam, então não confie no modo restrito sem contar com testes de funcionalidades em aspectos relevantes do modo restrito. Modo rigoroso de código e não rigoroso podem coexistir, então scripts podem optar pelo modo rigoroso incrementalmente. 81 |
82 | 83 |84 | Fonte: MDN - Strict mode 85 |
86 | 87 |
90 | Uma função imediata é um padrão que produz um escopo léxico usando os escopos de função do JavaScript. Funções imediatas podem ser usadas para evitar a elevação de variáveis (hoisting) dentro de blocos, protegendo o ambiente global de ser poluído e simultanamente permite o acesso público a métodos enquanto retém a privacidade para as variáveis declaradas dentro da função.
91 | Esse padrão tem sido referenciado como função anônima de auto execução, mas @cowboy (Ben Alman) introduziu o termo IIFE como um termo mais semântico para o padrão.
92 |
95 | Fonte: Immediately-Invoked Function Expression (IIFE) 96 |
97 | -------------------------------------------------------------------------------- /i18n/es-es/partials/good-parts.html: -------------------------------------------------------------------------------- 1 |4 | JavaScript tiene un fuerte enfoque de programación orientada a objetos, a pesar de algunos debates que tienen lugar debido a las diferencias de la orientacion a objetos en Javascript comparado con otros lenguajes. 5 |
6 | 7 |8 | Fuente: Introducción a JavaScript Orientado a Objetos 9 |
10 | 11 |14 | Funciones anómimas que son declaradas dinámicamente en tiempo de ejecución. Son llamadas anónimas porque no poseen un nombre de la misma manera que las funciones normales. 15 |
16 | 17 |18 | Fuente: Funciones anónimas 19 |
20 | 21 |24 | Las funciones en JavaScript son objetos de primera clase. Esto significa que las funciones son simplemente un tipo de objeto especial, con las cuales se pueden hacer las mismas cosas que cualquier otro objeto podria hacer. 25 |
26 | 27 |28 | Fuente: Las funciones son objetos de primera clase en JavaScript 29 |
30 | 31 |34 | Para muchos desarrolladores front-end, JavaScript fue su primera experiencia en lenguajes de scripting y/o interpretados. Para estos desarrolladores, el concepto y las implicaciones de las variables de tipado blando quizas son de segunda naturaleza. Como siempre, el crecimiento explosivo en demanda para aplicaciones web modernas, ha resultado en un crecimiento en el número de desarrolladores back-end que han tenido que meter sus manos en tecnologías del lado del cliente. Muchos de estos programadores llegan experiencia en lenguajes de tipado fuerte, tales como C# o Java, y le resultan desconocidas las libertades y las potenciales trampas envueltas en el trabajo con variables de tipado blando. 35 |
36 | 37 |38 | Fuente: Understanding Loose Typing in JavaScript 39 |
40 | 41 |44 | Scoping o Alcance: En JavaScript, las funciones son nuestras delimitadoras del alcance de facto al momento de la declaración de variables, lo cual significa que los bloques que son de bucles y condicionales (tales como if, for, while, switch y try) NO delimitan el alcance, a diferencia de la mayoría de otros lenguajes. Por lo tanto, estos bloques compartirán el mismo alcance que la función que las contiene. De esta forma, podría ser peligroso declarar variables dentro de bloques si se requiere que las variables sólo sean vistas en el bloque que pertenecen. 45 |
46 | 47 |48 | Hoisting o Elevación: En ejecución, todas las declaraciones var y function son movidas para el comienzo de cada función (su alcance) - esto es conocido como Elevación. Dicho esto, es buena practica declarar todas las variables juntas en la primera línea, con el fín de evitar falsas expectativas con las variables que han sido declaradas luego de la asignación de su valor - esto es un problema común con programadores que llegan de lenguajes con alcance de bloques. 49 |
50 | 51 |52 | Fuente: Alcance y Elevación en JavaScript 53 |
54 | 55 |58 | La Función de Vinculación es probablemente la última de las preocupaciones de un principiante con JavaScript, pero cuando se entiende que necesita una solución al problema de cómo mantener el contexto de 'this' dentro de otra función, entonces puede darse cuenta que de hecho necesita de la función bind Function.prototype.bind(). 59 |
60 | 61 |62 | Fuente: Understanding JavaScript’s Function.prototype.bind 63 |
64 | 65 |68 | Las Clausuras o closures son funciones que hacen referencia a variables independientes (libres). En otras palabras, la función definida en el closure 'recuerda' el ambiente en el cual esta fue creado. 69 | Esto es un importante concepto para entender, así como útil durante el desarrollo, por ejemplo emular métodos privados. Esto puede también ayuda a aprender como evitar errores, como crear closures en bucles. 70 |
71 | 72 |73 | Fuente: MDN - Clausuras 74 |
75 | 76 |79 | El modo estricto de ECMAScript 5 es una manera de optar por una forma restringida de JavaScript. El modo estricto no es solo un subconjunto: este tiene intencionalmente una semántica diferente del código normal. Los navegadores que no soportan el modo estricto correran el código de forma distinta con aquellos navegadores que lo soportan, entonces no confie en el modo estricto sin realizar una prueba de características, asegurando el soporte de los aspectos relevantes del modo estricto. El código en modo estricto y en modo no estrícto pueden coexistir, de esta forma, scripts pueden optar entrar al modo estrícto de forma incremental. 80 |
81 | 82 |83 | Fuente: MDN - Modo Estricto 84 |
85 | 86 |
89 | Una expresión de función inmediatamente invocada es un patrón el cual produce un scope lexico usando las funciones de scoping de Javascript. La Expresión de función imadiatamente invocada puede ser usada para evitar el hoisting de las variables con los bloques, protege contra la contaminación del ambiente global y simultáneamente permite acceder a los métodos publicos al tiempo que conserva la privacidad en las variables definidas dentro de la función.
90 | Este patrón ha sido referido como una función anónima autoejecutable, pero @cowboy (Ben Alman) introduce el termino IIFE como un término semántico más exacto para el patrón.
91 |
94 | Fuente: Expresión de Función Inmediatamente Invocada (IIFE) 95 |
96 | -------------------------------------------------------------------------------- /i18n/de-de/partials/good-parts.html: -------------------------------------------------------------------------------- 1 |4 | JavaScript hat große Möglichkeiten für objektorientierte Programmierung auch wenn es einige Diskussionen bezüglich der Unterschiede von objektorientierten JavaScript zu anderen Programmiersprachen gegeben hat. 5 |
6 | 7 |8 | Quelle: Einführung in objektorientiertes JavaScript 9 |
10 | 11 |14 | Anonyme Funktionen sind Funktionen, die dynamisch zur Laufzeit deklariert werden. Sie werden anonyme Funktionen genannt, weil ihnen im Gegensatz zu normalen Funktionen kein Name vergeben wird. 15 |
16 | 17 |18 | Quelle: JavaScript anonymous functions 19 |
20 | 21 |24 | Funktionen sind in JavaScript First-Class-Objekte. Das bedeutet, dass JavaScript-Funktionen einfach nur ein spezieller Typ von Objekten sind, die wie normale Objekte behandelt werden. 25 |
26 | 27 |28 | Quelle: Functions are first class objects in JavaScript 29 |
30 | 31 |34 | Viele Frontend-Entwickler haben ihre erste Erfahrung mit einer Skript- und/oder interpretierten Sprache mit JavaScript gemacht. Für jene Entwickler mag das Konzept und die Folgen von Variablen mit "loose typing" eher zweiter Natur sein. Jedoch hat der rasant steigende Bedarf nach modernen Webapplikationen zur Folge, dass viele Backend-Entwickler in clientseitige Technologien eintauchen. Viele von ihnen kommen aus einem Bereich, in dem Sprachen mit "strong typing" wie z.B. C# oder Java verbreitet sind und sind daher nicht vertraut mit der Freiheit und zugleich den möglichen Fallstricken, die das Arbeiten mit "loose typing" mit sich bringen. 35 |
36 | 37 |38 | Quelle: Understanding Loose Typing in JavaScript 39 |
40 | 41 |44 | Scoping: In JavaScript sind Funktionen unsere de facto Trennzeichen von Gültigkeitsbereichen (Scopes) für das Deklarieren von Variablen, was wiederum bedeutet, dass die üblichen Blöcke von Schleifen und Bedingungen (wie if, for, while, switch und try) keinen neuen Gültigkeitsbereich (Scope) erzeugen wie in vielen anderen Sprachen. Daher teilen sich diese Blöcke denselben Gültigkeitsbereich wie die Funktion, von der sie umgeben werden. Auf diese Weise kann es gefährlich sein, Variablen innerhalb von Blocks zu definieren, weil es so scheinen mag, als ob die Variable nur zu dem Block gehöre. 45 |
46 | 47 |48 | Hoisting: Während der Laufzeit werden alle Variablen- und Funktionen-Deklarationen an den Beginn jeder Funktion (ihren Gültigkeitsbereich) gestellt - dieses Verfahren ist als "Hoisting" bekannt. Vor diesem Hintergrund ist es eine gute Praxis, Variablen allesamt in der ersten Zeile zu deklarieren, um falschen Erwartungen mit Variablen vorzubeugen, die später deklariert wurden, aber bereits vorher einen Wert beinhalten. Für viele Entwickler, die aus einer Sprache mit blockweisen Gültigkeitsbereichen kommen, ist dies ein häufiger Fallstrick. 49 |
50 | 51 |52 | Quelle: JavaScript Scoping and Hoisting 53 |
54 | 55 |58 | 59 | Die Bindung von Funktionen ist sehr wahrscheinlich das kleinste Problem beim Einstieg in JavaScript. Wenn man jedoch eine Lösung für das Problem sucht, wie man den Kontext vom Schlüsselwort this in einer anderen Funktion beibehält, dann wird man wahrscheinlich auf Function.prototype.bind() kommen. 60 |
61 | 62 |63 | Quelle: Understanding JavaScript’s Function.prototype.bind 64 |
65 | 66 |69 | Closures sind Funktionen, die auf unabhängige (freie) Variablen verweisen. In anderen Worten: Die Funktion, welche innerhalb einer Closure definiert wurde, merkt sich, in welcher Umgebung sie erstellt wurde. 70 | Dies ist ein wichtiges Konzept, welches man verstehen sollte, weil es während der Entwicklung hilfreich sein kann, um bspw. private Methoden zu emulieren. Es kann ebenfalls dabei helfen, häufige Fehler zu vermeiden, wie bspw. Closures in Schleifen zu erstellen. 71 |
72 | 73 |74 | Quelle: Closures (Funktionsabschlüsse) 75 |
76 | 77 |80 | ECMAScript 5's strikter Modus (Strict Mode) ist eine Möglichkeit, um eine etwas eingeschränktere Variante von JavaScript zu betreten. Der strikte Modus ist nicht einfach nur ein untergeordneter Modus: er hat absichtlich eine andere Semantik als normaler Code. Bei Browsern, die den strikten Modus nicht unterstützen, wird sich Code im strikten Modus anders verhalten als bei Browsern mit Unterstützung. Daher sollte man sich nicht auf den strikten Modus verlassen, ohne die relevanten Aspekte des Modus auf die Unterstützung der entsprechenden Features zu testen. Es kann auch neben Code für den strikten Modus zusätzlich noch Code für den nicht-strikten Modus existieren, damit Skripte bei Möglichkeit den strikten Modus verwenden können. 81 |
82 | 83 |84 | Quelle: Strict Mode 85 |
86 | 87 |
90 | Ein unmittelbar aufgerufener Funktionsausdruck (Immediately-Invoked Function Expression - IIFE) ist ein Muster, welches einen lexikalischen Gültigkeitsbereich mittels einer JavaScript-Funktion erzeugt. Diese Ausdrücke können dazu genutzt werden, das Hoisting von Variablen innerhalb eines Blocks zu verhindern, sich gegen das Zumüllen der globalen Umgebung zu schützen und zeitgleich öffentlichen Zugang zu Methoden zu schaffen, während die Variablen nur innerhalb ihrer Funktion aufgerufen werden können, also privat bleiben.
91 |
92 | Dieses Muster wurde oft als selbstausführende anonyme Funktion (self-executing anonymous function) bezeichnet, jedoch hat @cowboy (Ben Alman) den Begriff IIFE als semantisch passenderen Begriff für das Muster eingeführt.
93 |
96 | Quelle: Immediately-Invoked Function Expression (IIFE) 97 |
98 | -------------------------------------------------------------------------------- /public/assets/css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.0 | MIT License | git.io/normalize */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS text size adjust after orientation change, without disabling 6 | * user zoom. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | -ms-text-size-adjust: 100%; /* 2 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | } 14 | 15 | /** 16 | * Remove default margin. 17 | */ 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | 26 | /** 27 | * Correct `block` display not defined in IE 8/9. 28 | */ 29 | 30 | article, 31 | aside, 32 | details, 33 | figcaption, 34 | figure, 35 | footer, 36 | header, 37 | hgroup, 38 | main, 39 | nav, 40 | section, 41 | summary { 42 | display: block; 43 | } 44 | 45 | /** 46 | * 1. Correct `inline-block` display not defined in IE 8/9. 47 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 48 | */ 49 | 50 | audio, 51 | canvas, 52 | progress, 53 | video { 54 | display: inline-block; /* 1 */ 55 | vertical-align: baseline; /* 2 */ 56 | } 57 | 58 | /** 59 | * Prevent modern browsers from displaying `audio` without controls. 60 | * Remove excess height in iOS 5 devices. 61 | */ 62 | 63 | audio:not([controls]) { 64 | display: none; 65 | height: 0; 66 | } 67 | 68 | /** 69 | * Address `[hidden]` styling not present in IE 8/9. 70 | * Hide the `template` element in IE, Safari, and Firefox < 22. 71 | */ 72 | 73 | [hidden], 74 | template { 75 | display: none; 76 | } 77 | 78 | /* Links 79 | ========================================================================== */ 80 | 81 | /** 82 | * Remove the gray background color from active links in IE 10. 83 | */ 84 | 85 | a { 86 | background: transparent; 87 | } 88 | 89 | /** 90 | * Improve readability when focused and also mouse hovered in all browsers. 91 | */ 92 | 93 | a:active, 94 | a:hover { 95 | outline: 0; 96 | } 97 | 98 | /* Text-level semantics 99 | ========================================================================== */ 100 | 101 | /** 102 | * Address styling not present in IE 8/9, Safari 5, and Chrome. 103 | */ 104 | 105 | abbr[title] { 106 | border-bottom: 1px dotted; 107 | } 108 | 109 | /** 110 | * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. 111 | */ 112 | 113 | b, 114 | strong { 115 | font-weight: bold; 116 | } 117 | 118 | /** 119 | * Address styling not present in Safari 5 and Chrome. 120 | */ 121 | 122 | dfn { 123 | font-style: italic; 124 | } 125 | 126 | /** 127 | * Address variable `h1` font-size and margin within `section` and `article` 128 | * contexts in Firefox 4+, Safari 5, and Chrome. 129 | */ 130 | 131 | h1 { 132 | font-size: 2em; 133 | margin: 0.67em 0; 134 | } 135 | 136 | /** 137 | * Address styling not present in IE 8/9. 138 | */ 139 | 140 | mark { 141 | background: #ff0; 142 | color: #000; 143 | } 144 | 145 | /** 146 | * Address inconsistent and variable font size in all browsers. 147 | */ 148 | 149 | small { 150 | font-size: 80%; 151 | } 152 | 153 | /** 154 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 155 | */ 156 | 157 | sub, 158 | sup { 159 | font-size: 75%; 160 | line-height: 0; 161 | position: relative; 162 | vertical-align: baseline; 163 | } 164 | 165 | sup { 166 | top: -0.5em; 167 | } 168 | 169 | sub { 170 | bottom: -0.25em; 171 | } 172 | 173 | /* Embedded content 174 | ========================================================================== */ 175 | 176 | /** 177 | * Remove border when inside `a` element in IE 8/9. 178 | */ 179 | 180 | img { 181 | border: 0; 182 | } 183 | 184 | /** 185 | * Correct overflow displayed oddly in IE 9. 186 | */ 187 | 188 | svg:not(:root) { 189 | overflow: hidden; 190 | } 191 | 192 | /* Grouping content 193 | ========================================================================== */ 194 | 195 | /** 196 | * Address margin not present in IE 8/9 and Safari 5. 197 | */ 198 | 199 | figure { 200 | margin: 1em 40px; 201 | } 202 | 203 | /** 204 | * Address differences between Firefox and other browsers. 205 | */ 206 | 207 | hr { 208 | -moz-box-sizing: content-box; 209 | box-sizing: content-box; 210 | height: 0; 211 | } 212 | 213 | /** 214 | * Contain overflow in all browsers. 215 | */ 216 | 217 | pre { 218 | overflow: auto; 219 | } 220 | 221 | /** 222 | * Address odd `em`-unit font size rendering in all browsers. 223 | */ 224 | 225 | code, 226 | kbd, 227 | pre, 228 | samp { 229 | font-family: monospace, monospace; 230 | font-size: 1em; 231 | } 232 | 233 | /* Forms 234 | ========================================================================== */ 235 | 236 | /** 237 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 238 | * styling of `select`, unless a `border` property is set. 239 | */ 240 | 241 | /** 242 | * 1. Correct color not being inherited. 243 | * Known issue: affects color of disabled elements. 244 | * 2. Correct font properties not being inherited. 245 | * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. 246 | */ 247 | 248 | button, 249 | input, 250 | optgroup, 251 | select, 252 | textarea { 253 | color: inherit; /* 1 */ 254 | font: inherit; /* 2 */ 255 | margin: 0; /* 3 */ 256 | } 257 | 258 | /** 259 | * Address `overflow` set to `hidden` in IE 8/9/10. 260 | */ 261 | 262 | button { 263 | overflow: visible; 264 | } 265 | 266 | /** 267 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 268 | * All other form control elements do not inherit `text-transform` values. 269 | * Correct `button` style inheritance in Firefox, IE 8+, and Opera 270 | * Correct `select` style inheritance in Firefox. 271 | */ 272 | 273 | button, 274 | select { 275 | text-transform: none; 276 | } 277 | 278 | /** 279 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 280 | * and `video` controls. 281 | * 2. Correct inability to style clickable `input` types in iOS. 282 | * 3. Improve usability and consistency of cursor style between image-type 283 | * `input` and others. 284 | */ 285 | 286 | button, 287 | html input[type="button"], /* 1 */ 288 | input[type="reset"], 289 | input[type="submit"] { 290 | -webkit-appearance: button; /* 2 */ 291 | cursor: pointer; /* 3 */ 292 | } 293 | 294 | /** 295 | * Re-set default cursor for disabled elements. 296 | */ 297 | 298 | button[disabled], 299 | html input[disabled] { 300 | cursor: default; 301 | } 302 | 303 | /** 304 | * Remove inner padding and border in Firefox 4+. 305 | */ 306 | 307 | button::-moz-focus-inner, 308 | input::-moz-focus-inner { 309 | border: 0; 310 | padding: 0; 311 | } 312 | 313 | /** 314 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 315 | * the UA stylesheet. 316 | */ 317 | 318 | input { 319 | line-height: normal; 320 | } 321 | 322 | /** 323 | * It's recommended that you don't attempt to style these elements. 324 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 325 | * 326 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 327 | * 2. Remove excess padding in IE 8/9/10. 328 | */ 329 | 330 | input[type="checkbox"], 331 | input[type="radio"] { 332 | box-sizing: border-box; /* 1 */ 333 | padding: 0; /* 2 */ 334 | } 335 | 336 | /** 337 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 338 | * `font-size` values of the `input`, it causes the cursor style of the 339 | * decrement button to change from `default` to `text`. 340 | */ 341 | 342 | input[type="number"]::-webkit-inner-spin-button, 343 | input[type="number"]::-webkit-outer-spin-button { 344 | height: auto; 345 | } 346 | 347 | /** 348 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 349 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 350 | * (include `-moz` to future-proof). 351 | */ 352 | 353 | input[type="search"] { 354 | -webkit-appearance: textfield; /* 1 */ 355 | -moz-box-sizing: content-box; 356 | -webkit-box-sizing: content-box; /* 2 */ 357 | box-sizing: content-box; 358 | } 359 | 360 | /** 361 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 362 | * Safari (but not Chrome) clips the cancel button when the search input has 363 | * padding (and `textfield` appearance). 364 | */ 365 | 366 | input[type="search"]::-webkit-search-cancel-button, 367 | input[type="search"]::-webkit-search-decoration { 368 | -webkit-appearance: none; 369 | } 370 | 371 | /** 372 | * Define consistent border, margin, and padding. 373 | */ 374 | 375 | fieldset { 376 | border: 1px solid #c0c0c0; 377 | margin: 0 2px; 378 | padding: 0.35em 0.625em 0.75em; 379 | } 380 | 381 | /** 382 | * 1. Correct `color` not being inherited in IE 8/9. 383 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 384 | */ 385 | 386 | legend { 387 | border: 0; /* 1 */ 388 | padding: 0; /* 2 */ 389 | } 390 | 391 | /** 392 | * Remove default vertical scrollbar in IE 8/9. 393 | */ 394 | 395 | textarea { 396 | overflow: auto; 397 | } 398 | 399 | /** 400 | * Don't inherit the `font-weight` (applied by a rule above). 401 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 402 | */ 403 | 404 | optgroup { 405 | font-weight: bold; 406 | } 407 | 408 | /* Tables 409 | ========================================================================== */ 410 | 411 | /** 412 | * Remove most spacing between table cells. 413 | */ 414 | 415 | table { 416 | border-collapse: collapse; 417 | border-spacing: 0; 418 | } 419 | 420 | td, 421 | th { 422 | padding: 0; 423 | } 424 | -------------------------------------------------------------------------------- /public/assets/js/vendor/jquery.lazyload.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Lazy Load - jQuery plugin for lazy loading images 3 | * 4 | * Copyright (c) 2007-2015 Mika Tuupola 5 | * 6 | * Licensed under the MIT license: 7 | * http://www.opensource.org/licenses/mit-license.php 8 | * 9 | * Project home: 10 | * http://www.appelsiini.net/projects/lazyload 11 | * 12 | * Version: 1.9.7 13 | * 14 | */ 15 | 16 | (function($, window, document, undefined) { 17 | var $window = $(window); 18 | 19 | $.fn.lazyload = function(options) { 20 | var elements = this; 21 | var $container; 22 | var settings = { 23 | threshold : 0, 24 | failure_limit : 0, 25 | event : "scroll", 26 | effect : "show", 27 | container : window, 28 | data_attribute : "original", 29 | skip_invisible : false, 30 | appear : null, 31 | load : null, 32 | placeholder : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" 33 | }; 34 | 35 | function update() { 36 | var counter = 0; 37 | 38 | elements.each(function() { 39 | var $this = $(this); 40 | if (settings.skip_invisible && !$this.is(":visible")) { 41 | return; 42 | } 43 | if ($.abovethetop(this, settings) || 44 | $.leftofbegin(this, settings)) { 45 | /* Nothing. */ 46 | } else if (!$.belowthefold(this, settings) && 47 | !$.rightoffold(this, settings)) { 48 | $this.trigger("appear"); 49 | /* if we found an image we'll load, reset the counter */ 50 | counter = 0; 51 | } else { 52 | if (++counter > settings.failure_limit) { 53 | return false; 54 | } 55 | } 56 | }); 57 | 58 | } 59 | 60 | if(options) { 61 | /* Maintain BC for a couple of versions. */ 62 | if (undefined !== options.failurelimit) { 63 | options.failure_limit = options.failurelimit; 64 | delete options.failurelimit; 65 | } 66 | if (undefined !== options.effectspeed) { 67 | options.effect_speed = options.effectspeed; 68 | delete options.effectspeed; 69 | } 70 | 71 | $.extend(settings, options); 72 | } 73 | 74 | /* Cache container as jQuery as object. */ 75 | $container = (settings.container === undefined || 76 | settings.container === window) ? $window : $(settings.container); 77 | 78 | /* Fire one scroll event per scroll. Not one scroll event per image. */ 79 | if (0 === settings.event.indexOf("scroll")) { 80 | $container.bind(settings.event, function() { 81 | return update(); 82 | }); 83 | } 84 | 85 | this.each(function() { 86 | var self = this; 87 | var $self = $(self); 88 | 89 | self.loaded = false; 90 | 91 | /* If no src attribute given use data:uri. */ 92 | if ($self.attr("src") === undefined || $self.attr("src") === false) { 93 | if ($self.is("img")) { 94 | $self.attr("src", settings.placeholder); 95 | } 96 | } 97 | 98 | /* When appear is triggered load original image. */ 99 | $self.one("appear", function() { 100 | if (!this.loaded) { 101 | if (settings.appear) { 102 | var elements_left = elements.length; 103 | settings.appear.call(self, elements_left, settings); 104 | } 105 | $("127 | {{description}} 128 |
129 | {{/testingTools.links}} 130 | 131 |148 | {{description}} 149 |
150 | {{/links}} 151 | {{/frameworks.cat}} 152 |169 | {{description}} 170 |
171 | {{/gameEngines.links}} 172 | 173 |185 | {{name}} 186 |
187 | {{/links}} 188 |211 | {{description}} 212 |
213 | 214 | {{/links}} 215 | {{/credit}} 216 | 217 | {{#box}} 218 |222 | {{name}} 223 |
224 | {{/links}} 225 | 226 |242 | {{name}} 243 |
244 | {{/podcasts.links}} 245 |281 | {{name}} 282 |
283 | {{/paasProviders.links}} 284 | 285 |
313 | William Oliveira
314 |
315 |
316 |
317 | 
318 | Allan Esquina
319 |
320 | {{footer.contribDesc}}
327 | 328 |