Experience Javascript

[havietduc91]

• Draggable and dropable
  • Demo
  • Chạy thử
  • Include plugin
  • Thực hiện được các action cơ bản
  • Cơ bản
    • Demo thả câu hỏi vào trong ô trống câu trả lời
    • Drop and drag
    • Sau khi thả câu hỏi vào
    • Thả từ từ ô trống này sang ô trống khác
    • Thả từ ô trống về với box chứa các câu hỏi
  • Nâng cao:
    • Tạo màu và hiệu ứng cho các action

[havietduc91]

• Về nhà tìm hiểu thêm về angular js va node js
• http://alistapart.com/article/fauxabsolutepositioning

[havietduc91]

http://eloquentjavascript.net/

[havietduc91]

Đọc sách

---

Rút ra được các bài học

• Đọc toàn bộ quyển sách và tổng kết
  • Chapter 1: Primitive and Reference Types
  • Chapter 2: Functions
  • Chapter 3: Understanding Objects
  • Chapter 4: Contructors and Prototypes
  • Chapter 5: Inheritance
  • Chapter 6: Object Patterns
• Nắm được tổng quan về JS
  • Cấu trúc của JS

[havietduc91]

Thuật ngữ Literals được hiểu như nào?

• Đang được hiểu như 1 cách định nghĩa khác, ngắn gọn hơn của hàm, form, regular expression
• Sự khác nhau giữa primitive wrapper types và primitive types
  • primitive wrapper types có 3 kiểu String, Number, Boolean
  • primitive types có 5 kiểu String, Number, Boolean, Null và Undefine
• Tìm hiểu kỹ hơn về regular expressions
• function’s arity?
• Trong javascript thì kiểu hàm ko sử dụng tham số và sử dụng tham số đều trả về kết quả, chỉ khác nhau của độ dài hàm, độ dài hàm phụ thuộc vào số tham số.
• Nên khai báo tham số hay là ko khai báo?
  • Cái này tùy thuộc vào yêu cầu bài toán, nếu chúng ta biết trước độ dài các biến thì truyền tham số vào, còn với các hàm mà độ dài biến thay đổi thì chúng ta nên sử dụng kiểu hàm ko sử dụng tham số mà sử dụng argument.length
• Preventing Object Modification?
• Sự khác nhau giữa using the Object constructor and using an object literal khi khai báo Object http://stackoverflow.com/questions/4597926/what-is-the-difference-between-new-object-and-object-literal-notation If you have a lot of objects and/or a lot of methods, the literal way can lead to quite big memory waste.

[havietduc91]

Tìm hiểu sự khác nhau giữa cách đếm và hiển thị thuộc tính

var property;
for (property in object) {
   console.log("Name: " + property);
   console.log("Value: " + object[property]);
}

và

var properties = Object.keys(object);
// if you want to mimic for-in behavior
var i, len;
for (i=0, len=properties.length; i < len; i++){
  console.log("Name: " + properties[i]);
  console.log("Value: " + object[properties[i]]);
}

[havietduc91]

Cần phân biệt rõ ràng giữa property data và property Accessor

[havietduc91]

Tìm hiểu IIFE, immediately-invoked-function expression và ISS (có thể là một)

http://benalman.com/news/2010/11/immediately-invoked-function-expression/

[havietduc91]

• Về đọc lại thứ tự các biểu thức trong javascript

[havietduc91]

Việc sử dụng hàm private trong 1 closure!

Đó là việc dùng

return {
    init: init,
    myPublic: publicMethod
};

Có thể xem trong ví dụ sau

var init = function() { console.log('init'); };

var abcModule = (function() {

var init = function() {
    privateMethod();
}

var publicMethod = function() {

};

var privateMethod = function() {

};

return {
    init: init,
    myPublic: publicMethod
};

})();

Hàm này có thể sử dụng ở ngoài closure abcModule.init(); abcModule.myPublic();

Ko thể gọi được hàm này abcModule.privateMethod();

[havietduc91]

Tối về tìm hiểu

• Tìm hiểu về
  • Các object trong javascript
  • regular expression
  • Tìm hiểu nhiều hơn về code js thuần

[havietduc91]

Lỗi không sort được table sorter

• Khởi tạo phần debug của table sort .tablesorter({'debug': true})
• Sau đó bật console của chrome sẽ xuất hiện đoạn sau

column:0 parser:digit
column:1 parser:text
column:2 parser:text
column:3 parser:digit
column:4 parser:digit
column:5 parser:isoDate
column:6 parser:digit
column:7 parser:digit
column:8 parser:isoDate
column:9 parser:isoDate
column:10 parser:isoDate
column:11 parser:text
column:12 parser:text

Với trường hợp parser là digit mà sort cho text thì sẽ không được Ở trường hợp này là - thì nó nhận là số nên ko sort được, nếu thay là ― thì oki

[havietduc91]

Detecting the File Download Dialog In the Browser

One possible solution uses JavaScript on the client.

The client algorithm:

Generate a random unique token. Submit the download request, and include the token in a GET/POST field. Show the "waiting" indicator. Start a timer, and every second or so, look for a cookie named "fileDownloadToken" (or whatever you decide). If the cookie exists, and its value matches the token, hide the "waiting" indicator. The server algorithm:

Look for the GET/POST field in the request. If it has a non-empty value, drop a cookie (e.g. "fileDownloadToken"), and set its value to the token's value.

http://stackoverflow.com/questions/1106377/detect-when-browser-receives-file-download http://gruffcode.com/2010/10/28/detecting-the-file-download-dialog-in-the-browser/

Call backendReportModule

    <script>
        $(document).ready(function() {
            //Setup modal module
            modalModule.init();

            //Setup backend export import module
            backendReportModule.init();
        });
    </script>

var backendReportModule = (function () {
    var fileDownloadCheckTimer;

    $('#modal-status #close').on('click', function(){
        window.clearInterval(fileDownloadCheckTimer);
        window.stop();
    });

    /**
     * Check download is success to close waiting export modal
     */
    function checkDownloadSuccess() {
        var token = new Date().getTime(); //use the current timestamp as the token value
        $('#export-file-token').val(token);

        fileDownloadCheckTimer = window.setInterval(function () {
            var cookieValue = getCookie('exportFileToken');
            if (cookieValue == token)
                finishDownload();
        }, 1000);
    };

    function getCookie(cName) {
        var parts = document.cookie.split(cName + "=");
        if (parts.length == 2) return parts.pop().split(";").shift();
    };

    function expireCookie(cName) {
        document.cookie =
          encodeURIComponent(cName) +
          "=deleted; expires=" +
          new Date( 0 ).toUTCString();
    };

    function finishDownload() {
        window.clearInterval(fileDownloadCheckTimer);
        expireCookie( "exportFileToken" ); //clears this cookie value
        modalModule.hide();
    };

    var init = function (url) {
        $("#report-file").on('click', function(e) {
            //Show waiting report modal
            modalModule.setMessage('ファイルを出力中...');
            modalModule.show(true);

            checkDownloadSuccess();
            $('#BackendReportForm_export').trigger('click');
        });
    };

    return {
        init: init
    };
}).call(this);

Submit button

<div class="text-right">
                    <button type="button" class="btn btn-success btn-wide" id="report-file">
                        {{ form.export.vars.label }} <i class="glyphicon glyphicon-download-alt"></i></button>
                    <button type="submit" class="btn btn-success btn-wide" id="{{ form.export.vars.id }}" name="{{ form.export.vars.full_name }}" style="display: none">
                        {{ form.export.vars.label }} <i class="glyphicon glyphicon-download-alt"></i></button>
                </div>

Modal

        <!-- Modal -->
    <div id="modal-status" class="modal fade" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content pt30 pb20">
                <div class="modal-body text-center">
                    <p id="message" class="font-xl mb0"></p>
                </div>
                <div class="modal-footer">
                    <a class="btn btn-default" id="close" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> キャンセル</a>
                </div>
            </div>
        </div>
    </div>

PHP server side

Set export file token when download file is success

         const EXPORT_FILE_TOKEN = 'exportFileToken';
        if (!empty($exportFileToken)) {
            setcookie(self::EXPORT_FILE_TOKEN, $exportFileToken, false);
        }