Displaying articles with tag javascript

A quick facebook connect guide

Posted by PunNeng, Tue Feb 17 01:32:00 UTC 2009

Here is a quick todo
http://wiki.developers.facebook.com/index.php/TryingOutFacebook_Connect

There is a tricky part. It is when you are logged in, you have to make the page reload automatically.
Fortunately, there is a javascript helper
http://www.somethingtoputhere.com/therunaround/fbconnect.js

Usage:

put these codes below to your page, it will render the link to log in.

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
<script src="/javascripts/fbconnect.js" type="text/javascript"></script>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<a href="#" onclick="FB.Connect.requireSession(); return false;" >
  <!-- this can be a text link or image tag -->
  <input type="image" value="facebook" src="/images/buttons/btn_facebook.gif"  />
</a>
<script type="text/javascript"> FB.init("YOUR_APP_KEY", "xd_receiver.htm"); </script>

<script type="text/javascript">
  FB.Connect.ifUserConnected(function(){
   // will be invoked if user is connected and refresh the site to the callback url(explain below)
   window.onload = function() { facebook_onload(true); };
  },
  function(){
   // will be invoked if user is not connected
   window.onload = function() { facebook_onload(false); };
  }
  )
</script>

Changing the callback url:

in fbconnect.js, there are codes:

  1
  2
  3
function refresh_page() {
  window.location = 'index.php';
}

index.php is needed to be changed to the callback path.
This method will be called after the user is connected.

Getting the facebook id:

When it's redirected to the url above, the facebook id or the user details should be in the session of the site. You need to echo the session to see what keys are in the session.

0 comments | Filed Under: General | Tags: javascript

Javascript : Lowpro

Posted by PunNeng, Mon Sep 24 23:13:00 UTC 2007

คราวนี้ไม่เกี่ยวกับ prototype โดยตรง แต่ยังเกี่ยวอยู่

เวลาต้องใส่ event ให้กับ html dom ก็แค่เพิ่ม event ให้มัน เช่น onclick="alert()"
แต่ถ้าเราเอามันออกได้ โดยที่การทำงานยังเหมือนเดิม code เราคงจะดูสะอาดไม่น้อย
ผมมีตัวช่วย มันคือ Lowpro

อันที่จริงมันเป็นชุดของ javascript ที่อยู่ใน Rails plugin ที่ชื่อว่า UJS(Unobtrusive Javascript)

วิธีใช้งานก็ไปโหลดมาก่อน ตาม link ที่ให้ไป แล้วก็ include ให้อยู่หลัง prototype

  1
  2
  3
<script src="/javascripts/prototype.js" type="text/javascript"></script>
<script src="/javascripts/lowpro.js" type="text/javascript"></script>
<script src="/javascripts/application.js" type="text/javascript"></script>

application.js คือ file ที่เราจะใส่ code เราไป

มาดูที่ผมใช้บ่อยๆ ก่อน

  1
  2
  3
Event.onReady(function() {
  // $('id').doSomething();
});

Event.onReady จะรับ callback function ไป เมื่อ page โหลดทุกอย่างจบแล้ว callback function นี้ จะถูกเรียก

หรือ

  1
  2
  3
  4
  5
  6
  7
  8
Event.addBehavior({
  'a.header:click' : function(e) {
    // link to homepage
  },
  'a.header:mouseover' : function(e) {
    // switch to over stage
  }
});

อันนี้ก็ใส่พฤติกรรมให้มัน ถ้า a.header ถูกคลิกแล้วให้ link ไปยัง homepage หรือถ้าถูก rollover ให้เปลี่ยนเป็น highlight หรืออะไรก็ได้

ถ้าจะเอาตัวอย่างเต็มๆ ผมแนะนำที่นี่เลย

0 comments | Filed Under: General | Tags: javascript

Prototype : Module and Class

Posted by PunNeng, Sun Sep 16 03:39:00 UTC 2007

มาดูโครงสร้างง่ายๆ ของการเขียนโปรแกรมเชิง prototype ก่อน

Module

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
var Site = {
  footerStatus:"showed",
  showFooter = function() { // showFooter = function(var1,var2,...)
    $('#footer').show();
    this. footerStatus = "show";
  },
  hideFooter = function(){
    $('#footer').hide();
    this. footerStatus = "hide";
  }
  // you can use .toggle() as well.
}

ยังดีว่าผมยังเคยเขียนเชิง prototype กับ ActionScript มาก่อน ไม่งั้นคงจะแอบงงอยู่บ้าง สำหรับคนไม่คุ้น ดูกันจริงๆ มันก็ไม่ต่างจากการเขียนเชิง Object-oriented สมัยใหม่สักเท่าไหร่หรอก พอถูไถไปได้บ้าง ไม่ยากๆ

ในตัวอย่าง ก็แยกให้เป็น module ซะเลย เป็นการแบ่งหน้าที่ของ module อย่างชัดเจน จุดที่ผมลืมบ่อยๆ เห็นจะเป็น comma ที่เป็นตัวแบ่ง function ครับ ลืมตลอด =='
เวลาเรียกใช้งานก็ง่ายๆ

Class

อีกหนึ่งส่วนสำคัญของการเขียนโปรแกรมเลย :)

อย่าลืม include prototype.js มาก่อนนะ ไม่งั้นเรียก Class ไม่เจอ

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
var Animal = Class.create();
Animal.prototype = {
  initialize: function(){
    this.alive = true;
    this.full = false;
  },
  eat: function(food){
    if(food == "sticky-rice"){
      this.full = true;
      alert(this.full);
      return this.full;
    }
    return false;
  }
}
var myPet = new Animal();
myPet.eat("pizza");
myPet.eat("sticky-rice");  // alert "true"

Extend

การต่อเติมก็สำคัญ :)

  1
  2
  3
  4
  5
  6
  7
  8
Object.extend(Animal.prototype, {
    dieNow: function() {
      this.alive = false;
      alert(this.alive);
    }
  }
);
myPet.dieNow(); // alert "false"

addMethods

ก็ไว้เพิ่ม method(หรือใครจะเรียก function) ให้กับ Dom element ในหน้าเว็บ

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
Element.addMethods({
  say: function(element, word){
    if(!word)
      alert(element.innerHTML);
    else
      alert(word);
  }
});
$('footer').say();
$('footer').say("hello");

argument ตัวแรก ถูกบังคับให้เป็น element ของ Dom ตัว parameter ที่เราส่งไปเลยเป็น argument ตัวที่สอง

เบาะๆ แค่นี้ก่อน ผมง่วง =='

ข้อมูลจาก video ของปี๊บโด้ด

1 comment | Filed Under: General | Tags: javascript

Prototype :: Selector

Posted by PunNeng, Wed Sep 12 01:54:00 UTC 2007

ปฎิเสธไม่ได้ว่าการทำงานกับ Javascript จะต้องเข้าไปยุ่งเกี่ยวกับ DOM อย่างแน่นอน code อย่าง

document.getElementById('id');
// or
document.getElementsByTagName('tag-name');

จะต้องถูกเรียกใช้อย่างแน่นอน
แต่ถ้ามีวิธีที่ง่ายกว่าล่ะ !!!

Selector - Id

$('id')
// $('header');

ตัวอย่าง

$('header').hide();
$('header').show();
// or can set to variable
var header = $('header');
header.hide();

ใน Prototype function hide/show/toggle เป็นอีก function ที่ใช้บ่อยมาก ซึ่งมันจะไปสั่งให้ DOM ก้อนน้ันๆ ทำการเปลี่ยนค่า display ของ style นั่นแหละ ดีกว่าทีี่จะต้องไปใช้ .style.display = value;

จริงๆ สามารถเรียกได้อีกอย่างคือ การเรียกผ่าน Element class

Element.hide('id');

ก็ได้

Selector - Tag name(CSS Selector)

$$('tag-name')
// $$('div#footer');
// $$('li.nav');

มันจะ return มาเป็น array

$$('li.nav').first().hide();
$$('a').invoke('hide');

invoke ไว้ใช้สำหรับการสั่งให้ทุก element ใน array เรียก function ที่เราใส่ไป
หรือจะ loop ในแต่ละ element ก็ได้

$$('a').each( function(element) { element.hide; element...; ...;} )

ประกาศแบบ inline ก็ได้
block หน้าตาแบบนี้ดูคุ้นๆ แฮะ นึกไม่ออกว่าเหมือนภาษาอะไร ;p
มาดูหน้าตาอย่างอื่นต่อ

$$('div#header a, div#footer a')
$$('a[title=back]')
$$('div[id]')

ไม่ว่าจะโลภมาก อยากเลือกที่ละหลายๆ tag หรือว่าจะเลือกโดย attribute หรือแม้กระทั่ง เลือกเฉพาะ tag ที่ประกาศเฉพาะ attribute ก็ทำได้

ข้อมูลจาก api ของ Prototype ครับ

ปล. ยังไม่จบนะครับ

0 comments | Filed Under: General | Tags: javascript

Prototype Javascript Framework

Posted by PunNeng, Wed Sep 05 00:46:00 UTC 2007

ช่วงนี้ดูเหมือนผมจะได้ใช้ Prototype เป็นตัวตายตัวแทนของ javascript เสียแล้ว เลยเอามาเขียนเสียหน่อย

จริงๆ มันก็คือ javascript นี่แหละ แต่มีการเตรียม library อะไรต่างๆ นานา ไว้ให้ อีกอย่างนึงที่ผมว่าเจ๋งคือ มันมี function ที่ดูง่ายๆ อย่าง $() หรือ $$() เป็นต้น หรือแม้กรทั่งการใช้ block แนวๆ Ruby ก็มีให้เห็น ใครเป็นแฟน Ruby อยู่ คงจะชอบใจ

มุมมองการเขียน ก็เป็นการเขียนเชิง Prototype (ซึ่งเป็นที่มาของการตั้งชื่อว่า Prototype นี่แหละ) ซึ่งไม่ต่างอะไรจากการมองเชิง Object-oriented เท่าไหร่ เรื่องความแตกต่าง ยังจะเอาไว้ก่อน เดี๋ยวกันจะกลายเป็น Prototype vs Object-oriented ไปเสียก่อน ซึ่งจริงๆ แล้ว Javascript เอง ก็เป็นภาษาเชิง Prototype ในตัวเองอยู่แล้ว(OO ด้วย)

จุดที่แข็งที่สุดของ Prototype นี้ เห็นจะหนีไม่พ้น library ที่เตรียมไว้ใช้งานกับ DOM หลากหลายชนิด เช่น $() หรือ $$() ที่ว่าไปข้างบน หรือ

  1
  2
  3
Element.hide('comments'); 
var div_height = Element.getHeight(my_div);
Element.addClassName('contactform', 'pending');

อีกส่วนนึงที่ลืมไปไม่ได้คือ AJAX
โดยใช้งานผ่าน Ajax.request เช่น

  1
  2
  3
  4
  5
  6
  7
  8
  9
new Ajax.Request('/some_url',
  {
    method:'get',
    onSuccess: function(transport){
      var response = transport.responseText || "no response text";
      alert("Success! \n\n" + response);
    },
    onFailure: function(){ alert('Something went wrong...') }
  });

ยังไม่หมด ยังต่อ JSON ได้อีก

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
$H({name: 'Violet', occupation: 'character', age: 25 }).toJSON();
//-> '{"name": "Violet", "occupation": "character", "age": 25}'


var Person = Class.create();
Person.prototype = {
  initialize: function(name, age) {
    this.name = name;
    this.age = age;
  },  
  toJSON: function() {
    return ('My name is ' + this.name + 
      ' and I am ' + this.age + ' years old.').toJSON();
  }
};
var john = new Person('John', 49);
Object.toJSON(john);
//-> '"My name is John and I am 49 years old."'

library ยังมีอีกเพียบครับ ต้องลอง!!

ถ้าใครเคยใช้ Scriptaculous หรือ Rico หรือ Ajax ของ Rails เอง ก็จะต้องผ่านตากับ Prototype มาแน่นอน เพราะมันต้องใช้ Prototype เป็นฐานการทำงาน ส่วนในอุตสาหกรรมจริงๆ ดูได้ที่นี่

ข้อมูลจาก Prototype Tips and Tutorials

ปล. มาโฆษณาชวนเชื่อครับ ส่วน howto คงไว้คราวหน้าครับ

0 comments | Filed Under: General | Tags: javascript

codegent: we're hiring