{Memo8|Tool Kits} For Web Developer » Javascript http://www.memo8.com/toolkits ไว้เก็บ Script ไอเดีย ทิป เทคนิคต่างๆ สำหรับงานพัฒนาเว็บไซต์ทั้ง Design และ Programming Thu, 02 Sep 2010 08:23:33 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Javascript Check and Uncheck All Checkboxes. http://www.memo8.com/toolkits/archives/520 http://www.memo8.com/toolkits/archives/520#comments Thu, 08 Jul 2010 06:04:38 +0000 admin http://www.memo8.com/toolkits/?p=520 เป็น Function เล็กๆสำหรับ Check และ Uncheck ของ Checkbox ทั้งหมด โดยชื่อ Checkbox ในตัวอย่างนี้ใช้เป็น Array ครับ เหตุผลที่ใช้เพราะตอนเขียน PHP ต้องการรับค่าเป็น Array (แล้วแต่โปรแกรมที่ทำนะจ๊ะ) ดูตัวอย่างด้านล่างเลยดีกว่า

Head

<script language="JavaScript" type="text/javascript">
<!--
// - Check All Controller
function checkAllController(theForm,obj,checkName){
	if(obj.checked==true){
		eleArr=theForm.elements[checkName+'[]'];
		for (i=0;i<eleArr.length;i++){eleArr[i].checked= true ;}
	}else{
		eleArr=theForm.elements[checkName+'[]'];
		for (i=0;i<eleArr.length;i++){eleArr[i].checked= false ;}
	}
}
//-->
</script>

Body

<form action="" method="post" name="frmAdd" id="frmAdd">
<input type="checkbox" name="checkAll" id="checkAll" value="All" onclick="checkAllController(document.frmAdd,this,'checkArr')">All <br>
<input type="checkbox" name="checkArr[]" id="checkArr[]" value="1">1 <br>
<input type="checkbox" name="checkArr[]" id="checkArr[]" value="2">2 <br>
<input type="checkbox" name="checkArr[]" id="checkArr[]" value="3">3 <br>
<input type="checkbox" name="checkArr[]" id="checkArr[]" value="4">4 <br>
<input type="checkbox" name="checkArr[]" id="checkArr[]" value="5">5 <br>
</form>

Demo : http://www.memo8.com/lab/javascript/javascript-check-uncheck-all-checkboxes/demo.html
Download : http://www.memo8.com/lab/javascript/javascript-check-uncheck-all-checkboxes/demo.htmls

]]> http://www.memo8.com/toolkits/archives/520/feed 1 ฟังก์ชั่น javascript แปลงเลขทศนิยมเป็นเปอร์เซนต์ http://www.memo8.com/toolkits/archives/460 http://www.memo8.com/toolkits/archives/460#comments Wed, 14 Apr 2010 06:47:31 +0000 admin http://www.memo8.com/toolkits/?p=460 Script : Convert decimal to percent.

function convertDecimalToPercent(Decimal) {
 Percent =  (Decimal * 100);
 return Percent.toFixed(2);
}
]]> http://www.memo8.com/toolkits/archives/460/feed 0 Javascript กำหนดจำนวนตัวอักษร(Maxlength)ให้กับ Textarea http://www.memo8.com/toolkits/archives/130 http://www.memo8.com/toolkits/archives/130#comments Sat, 11 Apr 2009 06:45:05 +0000 admin http://www.memo8.com/toolkits/archives/130 สำหรับใครที่ต้องการกำหนดจำนวนตัวอักษรของ text area ให้เหมือน text input นั้นลอง script ตัวนี้เลยครับ support ทั้ง ie และ firefox
Javascript 

function ismaxlength(obj){

var mlength=obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : ""

if (obj.getAttribute && obj.value.length>mlength)

obj.value=obj.value.substring(0,mlength)

}

ตัวอย่าง

<textarea maxlength="40" onkeyup="return ismaxlength(this)"></textarea>

ที่มา: http://www.dynamicdrive.com/dynamicindex16/maxlength.htm

]]> http://www.memo8.com/toolkits/archives/130/feed 1 เปรียบเทียบวันที่ด้วย Javascript http://www.memo8.com/toolkits/archives/125 http://www.memo8.com/toolkits/archives/125#comments Fri, 20 Feb 2009 14:51:36 +0000 admin http://www.memo8.com/toolkits/archives/125 หากเราจะเปรียบเทียบกันโต้งๆก็คงไม่ได้เราต้องอาศัย Date Object ของ javascript ช่วยด้วย โดยรูปแบบจะเป็นแบบนี้

new Date(yyyy, mm, dd);

มาดูตัวอย่าง script กันผมใช้ javascript split methodช่วยแยก วันเดือนปีเก็บเป็น Array เพื่อใ่สเข้าไปใน Date Object

<HTML>

<HEAD>

<script language="JavaScript" type="text/JavaScript">function validateF(){

 var theForm = document.form1;

var StartDate  = theForm['StartDate'].value;

  var StartDateArr  =  StartDate.split("/");

  var StartDateF = new Date(StartDateArr[2],StartDateArr[1],StartDateArr[0]);

var StopDate  = theForm['StopDate'].value;

  var StopDateArr  =  StopDate.split("/");

  var StopDateF = new Date(StopDateArr[2],StopDateArr[1],StopDateArr[0]);

if (StopDateF < StartDateF){

   alert('วันที่เริ่มต้องน้อยกว่าวันที่สิ้นสุดนะจ๊ะ');

  }else{

   alert('นี่แหล่ะสิ่งที่มันควรจะเป็น อุอุ');

  }

}

</script>

</HEAD>

<BODY>

<FORM METHOD=POST ACTION="" NAME="form1">

Çѹ·ÕèàÃÔèÁ<INPUT TYPE="text" NAME="StartDate" ID="StartDate" VALUE="25/01/2009">

ÊÔé¹ÊØ´<INPUT TYPE="text" NAME="StopDate" ID="StopDate" VALUE="03/01/2009">

<INPUT TYPE="Button"  VALUE="Button" onclick="validateF();">

</FORM>

</BODY>

</HTML>

ตัวอย่างโปรแกรมที่ได้

]]> http://www.memo8.com/toolkits/archives/125/feed 0 ดึงค่าจาก Text Input ที่ตั้งชื่อเป็น Array ด้วย Javascript http://www.memo8.com/toolkits/archives/124 http://www.memo8.com/toolkits/archives/124#comments Fri, 20 Feb 2009 14:20:39 +0000 admin http://www.memo8.com/toolkits/archives/124 เอามาแป่ะกันลืมอย่างเคยอุอุ
ดูจาก code การทำงานก็คือ ถ้าคลิกที่ปุ่มก็จะไปเรียกฟังก์ชั่น getValueArray()เพื่อแสดงค่าใน Text Input ที่ตั้งชื่อเป็น Array ทั้งสองตัวครับ

<HTML>
<HEAD>

<script language="JavaScript" type="text/JavaScript">
function getValueArray(){
var arr = window.document.getElementsByName("ele[]");
var arr_length = arr.length;
for(i = 0; i < arr.length; i++){
alert(arr[i].value);

}
}
</script>

</HEAD>

<BODY>
<FORM METHOD=POST ACTION="" NAME="form1">
<INPUT TYPE="text" NAME="ele[]" ID="ele[]" VALUE="">
<INPUT TYPE="text" NAME="ele[]" ID="ele[]" VALUE="">
<INPUT TYPE="Button"  VALUE="Button" onclick="getValueArray();">
</FORM>
</BODY>
</HTML>

ตัวอย่างโปรแกรมที่ได้

]]> http://www.memo8.com/toolkits/archives/124/feed 0 Javascript ห้ามคลิกขวา http://www.memo8.com/toolkits/archives/98 http://www.memo8.com/toolkits/archives/98#comments Sun, 03 Aug 2008 11:49:06 +0000 admin http://www.memo8.com/toolkits/archives/98 Support Firefox และ IE จะว่าไปก็ไม่ได้ทำให้ชีวิตดีขึ้นหรอกไอ้ Script พวกนี้ แต่ถ้าลูกค้าขอก็ต้องจัดให้…

var message="";

function clickIE()

{if (document.all)

{(message);return false;}}

function clickNS(e) {

if

(document.layers||(document.getElementById&&!document.all))

{

if (e.which==2||e.which==3) {(message);return false;}}}

if (document.layers)

{document.captureEvents(Event.MOUSEDOWN);document.  onmousedown=clickNS;}

else

{document.onmouseup=clickNS;document.oncontextmenu  =clickIE;}

document.oncontextmenu=new Function("return false")

ที่มา : http://www.java-scripts.net/javascripts/Right-Click-Block.phtml

]]> http://www.memo8.com/toolkits/archives/98/feed 1 รวมลิงค์ Javascript Frameworks http://www.memo8.com/toolkits/archives/93 http://www.memo8.com/toolkits/archives/93#comments Sat, 12 Jul 2008 14:48:05 +0000 admin http://www.memo8.com/toolkits/archives/93 javascript-framework

หลายเดือนนี้ผมเขียนเว็บ Dynamic ค่อนข้างเยอะลูกเล่นแพรวพราว สิ่งที่ได้เรียนรู้อีกอย่างนึงคือ หากจะให้เว็บไซต์หวือหวามากๆ ผมว่ายังไงๆก็ต้องเป็น Flash อยู่ดี ครั้นจะมาเขียน Javascript หรือใช้การรวมเทคโนโลยี AJAX เข้าช่วย ก็สู้ Flash ไม่ได้ในเรื่อง Motion ที่นุ่มนวลกว่าแน่นอน  ผมยังจำได้สมัยทำงานแรกๆนั้น ก็ป้วนเปี้ยนอยู่กับ Flash กะว่าจะเขียน Action Script ให้ได้บ้าง แต่ไปๆมาๆ ก็เริ่มหางเหิน (เพราะเราไม่คู่กัน ฮ่าๆๆ) แต่บางครั้ง ลูกเล่นเล็กน้อยเพื่อให้เว็บดูใช้งานง่าย เช่น การลากวาง,แสดงเพจแบบแบ่งการโหลด , หรือต่างๆนาๆ ตรงนี้แหล่ะเหมาะกับ Javascript Javascript เขียนสนุกดีนะ แต่ก็ Sensitive  พอตัว แค่พิมพ์ผิดนิดเดียวเล่นเอาการแสดงผลเจ๊งได้ง่ายๆเลยทีเดียว ตัดบทเลยแล้วกัน มาดูรายการลิงค์ Javascript Frameworks กันดีกว่า

  1. http://script.aculo.us/
  2. http://www.prototypejs.org/
  3. http://www.mootools.net/
  4. http://jquery.com/
  5. http://www.mochikit.com/
  6. http://rialto.improve-technologies.com/wiki/
  7. http://dojotoolkit.org
  8. http://labs.adobe.com/technologies/spry/
  9. http://asp.net/ajax/
  10. http://sourceforge.net/projects/clean-ajax/

อ้างอิงลิงค์จากที่นี่ :

http://speckyboy.com/2008/04/01/top-10-javascript-frameworks-which-do-you-prefer/

]]> http://www.memo8.com/toolkits/archives/93/feed 1 ฟังก์ชั่น Get URL Parameters ด้วย Javascript http://www.memo8.com/toolkits/archives/90 http://www.memo8.com/toolkits/archives/90#comments Fri, 27 Jun 2008 17:33:14 +0000 admin http://www.memo8.com/toolkits/archives/90 function gup( name ){ name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); var regexS = "[\\?&]"+name+"=([^&#]*)"; var regex = new RegExp( regexS ); var results = regex.exec( window.location.href ); if( results == null ) return ""; else return results[1]; }

Example

gup( 'ParameterName');

ที่มา : http://www.netlobo.com/url_query_string_javascript.html

]]> http://www.memo8.com/toolkits/archives/90/feed 3 JavaScript Number Format v1.5.4 http://www.memo8.com/toolkits/archives/88 http://www.memo8.com/toolkits/archives/88#comments Tue, 24 Jun 2008 17:55:47 +0000 admin http://www.memo8.com/toolkits/archives/88 ฟังก์ชั่นไว้สำหรับจัดการกับรูปแบบตัวเลขครับ จัดการจุดทศนิยม หรือ เติมเครื่องหมายคอมม่าให้
Examples

<script type="text/javascript" src="numberFormat154.js"></script>
<script type="text/javascript">
var num = new NumberFormat(10901.375).toFormatted();
// num will equal 10,901.38
</script>

Download : NumberFormat154.js

]]> http://www.memo8.com/toolkits/archives/88/feed 1 ตรวจสอบว่าเปิดการใช้งาน Javascript อยู่หรือไม่? http://www.memo8.com/toolkits/archives/69 http://www.memo8.com/toolkits/archives/69#comments Fri, 07 Mar 2008 18:35:42 +0000 admin http://www.memo8.com/toolkits/archives/69 สืบเนื่องจากบทความ เปิด JavaScript ได้อย่างไร? นั่นสิแล้ว User จะรู้ได้ไงวะว่า กุต้องเปิด Javascript เราก็เลยต้องตั้งแจ้งเตือนไว้ที่หน้าเว็บเลย ดู script ตัวอย่าง

html

<noscript>
Browser ของคุณยังไม่ได้เปิด Javascript
</noscript>

เอาไปดัดแปลงต่อกันเอาเองนะ ^_^

]]> http://www.memo8.com/toolkits/archives/69/feed 10