Archive for the 'Javascript' Category


Javascript Check and Uncheck All Checkboxes.

บันทึกโดย TaTump วันที่ 8 July 2010 | 148 views

เป็น 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

ฟังก์ชั่น javascript แปลงเลขทศนิยมเป็นเปอร์เซนต์

บันทึกโดย TaTump วันที่ 14 April 2010 | 131 views

Script : Convert decimal to percent.

function convertDecimalToPercent(Decimal) {
 Percent =  (Decimal * 100);
 return Percent.toFixed(2);
}

Javascript กำหนดจำนวนตัวอักษร(Maxlength)ให้กับ Textarea

บันทึกโดย TaTump วันที่ 11 April 2009 | 698 views

สำหรับใครที่ต้องการกำหนดจำนวนตัวอักษรของ 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

เปรียบเทียบวันที่ด้วย Javascript

บันทึกโดย TaTump วันที่ 20 February 2009 | 673 views

หากเราจะเปรียบเทียบกันโต้งๆก็คงไม่ได้เราต้องอาศัย 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>

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

ดึงค่าจาก Text Input ที่ตั้งชื่อเป็น Array ด้วย Javascript

บันทึกโดย TaTump วันที่ 20 February 2009 | 683 views

เอามาแป่ะกันลืมอย่างเคยอุอุ
ดูจาก 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>

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

Javascript ห้ามคลิกขวา

บันทึกโดย TaTump วันที่ 3 August 2008 | 743 views

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

รวมลิงค์ Javascript Frameworks

บันทึกโดย TaTump วันที่ 12 July 2008 | 361 views

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/

ฟังก์ชั่น Get URL Parameters ด้วย Javascript

บันทึกโดย TaTump วันที่ 28 June 2008 | 1,082 views
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

JavaScript Number Format v1.5.4

บันทึกโดย TaTump วันที่ 25 June 2008 | 820 views

ฟังก์ชั่นไว้สำหรับจัดการกับรูปแบบตัวเลขครับ จัดการจุดทศนิยม หรือ เติมเครื่องหมายคอมม่าให้
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

ตรวจสอบว่าเปิดการใช้งาน Javascript อยู่หรือไม่?

บันทึกโดย TaTump วันที่ 8 March 2008 | 3,137 views

สืบเนื่องจากบทความ เปิด JavaScript ได้อย่างไร? นั่นสิแล้ว User จะรู้ได้ไงวะว่า กุต้องเปิด Javascript เราก็เลยต้องตั้งแจ้งเตือนไว้ที่หน้าเว็บเลย ดู script ตัวอย่าง

html

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

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

Page 1 of 3123»