bozhink/Code-Chunks
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
<h1 id="javascript-applications">JavaScript-Applications</h1> <p>JavaScript Applications Course Repository</p> <p>The <strong>JavaScript Applications</strong> course introduces first steps for build web front-end application, using a back-end server (Node.js/Business clouds/etc…). The topics covered include HTTP, AJAX (both native and with frameworks), asynchronous paradigms using callbacks and promises and more…</p> <p>All homeworks for the course are test-driven, i.e. each task has a predefined set of unit tests. <a href="https://github.com/TelerikAcademy/JavaScript-UI-and-DOM/blob/master/README.md#user-content-preparing-the-local-machine-for-unit-testing-with-mocha-and-chai">Here</a> you can find information how to setup your machine for local testing</p> <h2 id="course-program">Course Program</h2> <h4 id="course-introduction-view-online">1. Course Introduction (view online)</h4> <ul> <li><p>Examination</p></li> <li><p>Trainers</p></li> <li><p>Course program</p></li> <li><p>Tools needed for the course</p> <ul> <li><p>Code Editors: Sublime text/Atom.io/Visual Studio Code/Web Storm</p></li> <li><p>Platforms: Node.js and JavaScript IO</p></li> <li><p>Servers: Microsoft IIS, WAMP, MAMP, XAMPP</p></li> </ul></li> </ul> <h4 id="best-practices-for-writing-javascript-view-online">2. Best practices for writing JavaScript (view online)</h4> <ul> <li><p>Naming in JavaScript</p></li> <li><p>Global scope</p></li> <li><p>What is the value of <code>this</code>?</p></li> <li><p>Function and “block” scopes</p> <ul> <li><p><code>var</code> and <code>let</code></p></li> </ul></li> <li><p><code>use strict</code></p></li> <li><p>JavaScript Execution</p></li> </ul> <h4 id="amd-and-systemjs-view-online">3. AMD and SystemJS (view online)</h4> <ul> <li><pre><code>[Asynchronous Module Definition (AMD)](https://github.com/amdjs/amdjs-api/blob/master/AMD.md)</code></pre></li> <li><p>Creating modules with <a href="https://github.com/systemjs/systemjs">SystemJS</a></p></li> <li><p>Loading modules</p></li> <li><p>Creating dependencies</p></li> <li><p>Supported types of modules</p></li> </ul> <h4 id="underscore.js-overview-view-online">4. Underscore.js Overview (view online)</h4> <ul> <li><p>What is <a href="http://underscorejs.org">Underscore.js</a>?</p></li> <li><p>Collections and Array extensions:</p> <ul> <li><p><code>_.map()</code>, <code>_.each()</code>, <code>_.pluck()</code>, <code>_.sortBy()</code>, <code>_.groupBy()</code>, <code>_.first()</code>, <code>_.last()</code> etc…</p></li> </ul></li> <li><p>Function extensions:</p> <ul> <li><p><code>_.memoize()</code>, <code>_.compose()</code></p></li> </ul></li> <li><p>Object extensions:</p> <ul> <li><p><code>_.keys(obj)</code>, <code>_.values(obj)</code>, <code>_.extend(obj, props)</code></p></li> </ul></li> <li><p>Utility functions:</p> <ul> <li><p><code>_.times(count, callback)</code>, <code>_.mixin(obj)</code></p></li> </ul></li> <li><p>Templates</p></li> <li><p>Chaining</p></li> </ul> <h4 id="web-storages-view-online">5. Web Storages (view online)</h4> <ul> <li><p><code>localStorage</code></p></li> <li><p><code>sessionStorage</code></p></li> <li><p><code>cookies</code></p></li> <li><p>Polyfills for <code>localStorage</code> and <code>sessionStorage</code></p></li> </ul> <h4 id="promises-and-asynchronous-programming-view-online">6. Promises and asynchronous programming (view online)</h4> <ul> <li><p>Async programming</p></li> <li><p>Callbacks</p></li> <li><p>Promises</p> <ul> <li><p>Native with polyfill</p></li> <li><p>Using a library: Bluebird, RSVP, Q</p></li> </ul></li> <li><p>Async operations with ES 2015 function generators</p></li> </ul> <h4 id="http-and-ajax-view-online">7. HTTP and AJAX (view online)</h4> <ul> <li><p>What is HTTP?</p></li> <li><p>Request-response model</p></li> <li><p>HTTP Methods</p></li> <li><p>HTTP request:</p> <ul> <li><p>Headers</p></li> <li><p>Body</p></li> <li><p>Methods</p></li> </ul></li> <li><p>HTTP response</p> <ul> <li><p>Headers</p></li> <li><p>Body</p></li> </ul></li> <li><p>AJAX</p> <ul> <li><p>AJAX principle</p></li> <li><p>Performing AJAX</p></li> <li><p>Types of data</p> <ul> <li><p>HTML, XML/RSS, plain text, JSON</p></li> </ul></li> </ul></li> </ul> <h4 id="consuming-web-services-and-ajax">8. Consuming web services and AJAX</h4> <ul> <li><p>Creating HTTP requests using:</p> <ul> <li><p>Native JavaScript</p></li> <li><p>jQuery.ajax</p></li> </ul></li> <li><p>Build UI based on received data from a web service</p></li> </ul> <h4 id="business-clouds-for-persistent-data">9. Business clouds for persistent data</h4> <ul> <li><p>Creating an application with a ready-to-use server</p></li> <li><p>Samples:</p> <ul> <li><p><a href="http://www.telerik.com/backend-services">Telerik Backend Services</a></p></li> <li><p><a href="https://www.parse.com/">Parse</a></p></li> <li><p><a href="http://azure.microsoft.com/en-us/services/app-service/mobile/">Microsoft Mobile App Services</a></p></li> </ul></li> </ul> <h4 id="unit-testing-with-mocha-chai">10. Unit testing with Mocha & Chai</h4> <ul> <li><p>Setup of Mocha and Chai</p></li> <li><p><a href="https://mochajs.org/#reporters">Mocha reporters</a></p></li> <li><p>Unit testing DOM</p> <ul> <li><p>With <a href="https://github.com/tmpvar/jsdom">jsdom</a></p></li> <li><p>With <a href="http://phantomjs.org/">PhantomJS</a></p></li> </ul></li> <li><p>Setting up Mocha with Karma</p></li> <li><p>Spy objects and mocking</p></li> <li><p>Code coverage with <a href="https://github.com/gotwarlost/istanbul">Istanbul</a></p></li> </ul> <h4 id="creating-simple-spa-applications-with-sammy.js-and-jquery">11. Creating Simple SPA applications with Sammy.js and jQuery</h4> <ul> <li><p>What is a SPA application?</p></li> <li><p><a href="http://sammyjs.org/">Sammy.js</a> overview</p> <ul> <li><p>Creating routes</p> <ul> <li><p>i.e. ‘pages’</p></li> </ul></li> <li><p>Using Templates</p> <ul> <li><p>Handlebars, Mustache, etc…</p></li> </ul></li> </ul></li> <li><p>Creating a simple SPA app using Sammy.js</p></li> </ul> <h4 id="app-architecture-workshop">12. App architecture workshop</h4> <ul> <li><p>Creating a complete web app with:</p> <ul> <li><p>Backend data from business cloud</p></li> <li><p>AJAX</p></li> <li><p>Handlebars.js, System.js, jQuery</p></li> <li><p>Using promises</p></li> </ul></li> </ul> <h4 id="exam-preparation">13. Exam preparation</h4> <h4 id="teamwork-defense">14. Teamwork Defense</h4> <h4 id="exam">15. Exam</h4> <h2 id="preparing-the-local-machine-for-unit-testing-with-mocha-and-chai">Preparing the local machine for Unit testing with Mocha and Chai</h2> <ul> <li><p>Install <a href="https://iojs.org/en/index.html">JavaScript I/O</a></p> <ul> <li><p>Try if it is working by typing in CMD/Terminal <code>$ iojs -v</code> (should produce result)</p></li> </ul></li> </ul> <h2 id="preparing-for-the-tests-for-each-homework">Preparing for the tests for each homework</h2> <ul> <li><p>Checkout the repository for the particular homework</p></li> <li><p>Open CMD/Terminal and navigate to the checked-out repository with the homework</p></li> <li><p>Run <code>npm install</code> in CMD/Terminal</p> <ul> <li><p>A folder <code>node_modules</code> should appear</p></li> </ul></li> <li><p>You are ready to run the tests</p></li> </ul> <h2 id="running-the-tests">Running the tests</h2> <ul> <li><p>Navigate to the folder of the particular homework in CMD/Terminal</p></li> <li><p>Requirements:</p> <ul> <li><p>JavaScript files must be called task-1.js, task-2.js etc..</p></li> <li><p>Each .js file must contain <code>module.exports=[name of the object/function]</code></p></li> </ul></li> <li><p>Run <code>npm test</code></p> <ul> <li><p>Test results should appear on the CMD/Terminal</p></li> </ul></li> </ul> <h2 id="upload-in-bgcoder.com">Upload in BGCoder.com</h2> <ul> <li><p>Go to the specific homework</p></li> <li><p>Select the task you will be sending</p></li> <li><p>Wrap your result in:</p> <pre><code>function solve() { return [your solution object/function]; }</code></pre></li> </ul>
About
Not a project. Only usefull samples.
Resources
Stars
Watchers
Forks
Releases
No releases published
Packages 0
No packages published