คลังเก็บป้ายกำกับ: javascript

ใช้ bcrypt กับ mongodo ด้วยกันบน node.js … ใช้ Q ด้วย

  1. โปรแกรมนี้ไปเปิด database เอาข้อมูลของ user ชื่อ foo ออกมา
  2. เสร็จแล้วก็สร้าง password hash โดยที่ไม่ได้เอาข้อมูลของ user มาทำอะไรเลย :-P … แล้วจะรีบ query มาทำไม -_-!
  3. เสร็จแล้วก็ save ข้อมูลของ user ที่มี password hash ลงไปใน mongodb แล้วก็ปิดมันซะ 
var Q = require('q');
var bcrypt = require('bcrypt-nodejs');

var mongo = require('mongodb'),
  Server = mongo.Server,
  Db = mongo.Db;

var server = new Server('localhost', 27017, {auto_reconnect: true});
var db_ = new Db('annotedw', server, {safe: true});
var coll_; 
var user_;

Q.ncall(db_.open, db_).then(
	function(db) {
		console.log("OPEN");
		return Q.ncall(db.collection, db, 'user');
	}
)
.then(
	function(coll) {
		console.log("COLL");
		coll_ = coll;
		return Q.ncall(coll.findOne, coll, {'username': 'foo'});
	}
)
.then(
	function(item) {
		user_ = item;
		console.log("CALL HASH");
		return Q.ncall(bcrypt.hash, bcrypt, "password", null, null);
	}
)
.then(
	function(hash) {
		console.log("HASH", hash);
		user_.password_hash = hash;
		return Q.ncall(coll_.update, coll_, {_id: user_._id}, user_);
	}
).then(
	function(update_result) {
		console.log("UPDATE RESULT", update_result);
		db_.close();
	}
)
.fail(
	function(error) {
		console.log("ERROR", error);
	}
);

Q + bcrypt-nodejs

ลองเรียก bcrypt โดยใช้ Q ดู ก็ไม่ยาก ใช้ท่ามาตรฐานได้เหมือนกัน

var Q = require('q');
var bcrypt = require('bcrypt-nodejs');

Q.ncall(bcrypt.hash, bcrypt, "password", null, null)
.then(
	function(hash) {
		console.log("HASH", hash);
		return Q.ncall(bcrypt.compare, bcrypt, "password", hash);
	}
)
.then(
	function(result) {
		console.log("Comparision result:", result);
	}
)
.fail(
	function(err) {
		console.log("ERROR", err);
	}
);

MongoDB Node.js และ Q

ผมจะเขียน web app บน Node.js ให้ไปเปิด database ที่ใช้ MongoDB แต่ว่าเขียนไปแล้วงง function ที่มันซ้อนกันอย่างมาก ก็เลยหาตัวช่วยดูอยู่หลายอย่าง สุดท้ายคิดว่าใช้ Q น่าจะง่ายที่สุดก็เลยลองเขียนดู แต่ว่าเป็น command line นะ 

var Q = require('q');
var mongo = require('mongodb'),
  Server = mongo.Server,
  Db = mongo.Db;

var server = new Server('localhost', 27017, {auto_reconnect: true});
var db_ = new Db('annotedw', server, {safe: true});

Q.ncall(db_.open, db_).then(
	function(db) {
		return Q.ncall(db.collection, db, 'corpus');
	}
)
.then(
	function(coll) {
		return Q.ncall(coll.findOne, coll);
	}
)
.then(
	function(item) {
		console.log(item);
		db_.close();
	}
)
.fail(
	function(err) {
		console.log("Error: ", err);
	}
);

ผม save ไฟล์ข้างบนไว้ใน mongotry.js

เวลาเรียกก็ใช้ node mongotry.js แล้วก็ได้ผลแบบข้างล่าง

{ _id: 508ec1e02ca65709fc00000c,
  corpus_id: 12,
  create: Fri Jan 01 2010 00:00:00 GMT+0700 (ICT),
  name: 'KIN_1' }

มันก็พิมพ์ข้อมูลออกมา 1 item ตามต้องการ

สิ่งที่ผมมักจะลืมเวลาใช้ xhtml + svg + javascript

  1. ลืมใช้ xhtml ดูเหมือนว่า svg จะใส่ลงไปใน html 4 ธรรมดาลำบากกว่า xhtml
  2. ลืมเปลี่ยน content-type เวลาส่ง text/html มาเฉยๆ เหมือนมันเจ๊ง ฯ ก็เลยส่ง application/xhtml+xml ไปแทน
  3. ลืมใช้ header ที่ถูกต้อง หลังมาผมปะอันนี้ไปเลย 
    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. ผมมักจะเขียน Javascript ด้วย ก็มักจะลืม //<![CDATA[
  5. ลืมว่าใส่ tag ของ svg อย่างไร หลังๆ ผมก็ copy อันนี้มาปะเลย 
    <svg width="3cm" height="3cm" id="treeview"
     xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
  6. อย่างอื่นๆ ก็คงลืม แบบลืมไปแล้วว่าลืม

Range ใน Javascript

Range นี้ผมใช้ตอนอยากจะดูว่า ข้อความ อะไรที่ถูกเลือกอยู่บ้าง เวลาใช้ก็เขียนแบบนี้

var sel = window.getSelection();
if(sel.rangeCount > 0) 
    var r = sel.getRangeAt(0);

เขียน code แบบนี้ก็จะได้ r ที่เป็น range ออกมา อ่อผมใช้กับ Firefox 3.0.x และ Opera 10.x นะครับ IE 6-8 เข้าใจว่าใช้ไม่ได้ ส่วน chrome กับ safari ก็ยังไม่ได้ศึกษาเท่าไหร่

พอได้ range มา ผมก็รู้ได้ว่า element ไหน โดนเลือกตัวเริ่ม ตัวไหนตัวปิดโดยดูจาก r.startContainer และ r.endContainer ตามลำดับ แต่ว่าใน container อาจจะเป็น Text ก็อาจจะถูกเลือกแค่บางตัวในนั้นก็ต้องมาดู r.startOffset และ r.endOffset อีก

เท่านี้ก็คงพอใช้งานได้แล้ว …

javascript: __noSuchMethod__

ใน parrot vm เรียกว่า fallback มั้ง. ประมาณว่าเราส่ง message (เรียก method) ไปที่ object แล้วมันไม่มี method ชื่อที่เราเรียกแล้วจะทำอะไรต่อ … ถ้าเป็น C++ หรือ Java ก็คง compile ไม่ผ่าน หรือเปล่า? ไม่ค่อยแน่ใจ. ถ้าเป็น ecmascript/javascript ก็อาจจะเกิด runtime error แต่ว่าเราก็ทำอะไรได้มากกว่านั้นโดยใช้ __noSuchMethod__ นี้ล่ะ. http://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Object/noSuchMethod

มันคงเอาไปใช้ทำอะไรแบบ model.findByName, model.findById, model.findByLastName หรือชื่อ method ที่เปลี่ยนไปมามากมาย โดยอาจจะเปลี่ยนตาม column ของ database ในตัวอย่างนี้ จะเขียน method ดักไว้หมดก็คงไม่ไหว (แต่ไม่ทำแบบนี้ก็ได้นะ) … แน่นอนจบซะงั้น.

ป.ล. ผมไม่เคยอยากรู้มาก่อนเลย จนกระทั่ง nf ถาม

เพิ่มเติม: nf แจ้งว่าใช้กับ webkit ไม่ได้. สงสัยจะไม่ใช่ standard T_T … แต่ก็มีคน request ใน webkit https://bugs.webkit.org/show_bug.cgi?id=18058.

แยก double click กับ click ทีเดียวบน html + ecmascript ไม่ง่ายอย่างที่คิด

อัน code นี้เข้าไป. การทำงานของมันคือเมื่อ click ก็ให้พิมพ์ click ออกมา. ถ้า double-click ก็พิมพ์ “double click” ออกมาง่ายๆ.  ผมแอบไปหวังว่าพอ double click แล้ว event click มันก็ไม่ควรจะออกมา ไม่งั้นก็จะแยกแยะไม่ได้. แต่มันไม่เป็นงั้น เวลา double click สิ่งที่ได้คือ “click click double-click”. ก็เลยไม่ใช้ละ double click ยาก  เลี่ยงๆ ไปใช้ shift + click  ก่อนแล้วกัน ไว้ค่อยหาทางแก้ไปเรื่อยๆ.

$(document).ready(function() {
    $("#but").click(function(ev) {
        $("#watch").each(function() {
            $(this).html($(this).text() + " click");
        });
    });

    $("#but").dblclick(function(ev) {
        $("#watch").each(function() {
            $(this).html($(this).text() + " double-click");
        });
    });
});

TinyMCE 3 plugin for JQuery

$.fn.tinymce = function(options){
    return this.each(function(){ tinyMCE.execCommand("mceAddControl", false, this.id); });
}

function initMCE()
{
    tinyMCE.init({mode : "none",
                  theme : "advanced",
                  theme_advanced_toolbar_location : "top",
                  theme_advanced_toolbar_align : "left",
                  theme_advanced_statusbar_location : "bottom",
                  theme_advanced_resizing : true});
}

initMCE();

Reference:

Firefox 3 *เร็ว* ขึ้นอีก

อ่านข่าวมากจาก http://cybernetnews.com/2008/02/25/firefox-3-performance-gets-a-boost/ โดยผ่าน http://slashdot.org/article.pl?sid=08/02/27/2049258&from=rss  เขาลองทดสอบ Firefox และ Web browser อื่นๆ บน Windows โดยใช้ SunSpider Javascript Benchmark ปรากฎว่า Firefox 3 เร็วกว่า web browser อื่นๆมากรวมทั้ง Firefox 2 และ Opera.

ที่น่าแปลกใจคือใน benchmark นี่เร็วว่า IE 7 เกือบๆ 10 เท่า เร็วกว่า Firefox 2 เกิน 4 เท่า. น่าสงสัยว่าทดสอบอะไรบ้าง ก็เลยตามไปดูที่ http://webkit.org/perf/sunspider-0.9/sunspider.html นี่ ก็ปรากฎว่าเขาทดสอบ javascript แบบเน้นๆ เลย ไม่รวมพวก DOM หรืออะไรอื่นๆ.  Javascript เร็วขึ้น ก็น่าจะทำให้เล่นเว็บเร็วขึ้นบ้าง แต่ก็ยังมีปัจจัยสำคัญอื่นๆอีก อย่างการ render html หรือว่าการใช้ DOM ที่ benchmark นี้ไม่ได้วัด.