【jQuery】避免冒泡事件

利用jQuery製作網頁Tab效果的時候
想要利用 $('.class').click(function(event) {}) 這個函式來處理時
被卡住
看一下HTML部分

<div class="menu">
    <ul>
        <li><a target="#">Menu</a>
          <ul>
            <li><a target="a.html">list-1</a></li>
            <li><a target="b.html">list-2</a></li>
            <li><a target="c.html">list-3</a></li>
          </ul>
        </li>
    </ul>
</div>

後來去查了jQuery API發現因為有冒泡事件的發生
導致第二層選單的Tab效果在IE 9可以正常運作
但是在Google Chrome會發生錯誤
後來找到一個方法來解決冒泡事件
就是

event.stopPropagation()

先看一下jQuery API如何描敘他
Prevents the event from bubbling up the DOM tree,
preventing any parent handlers from being notified of the event.
把這個方法放進 click function 內，就可以解決Chrome失效的問題
來看一下完成之後的jQuery code

$('.menu li').click(function(event) {
    var $this = $(this);
    /* 找到連結a中的targer標籤值 */
    _clickTab = $this.find('a').attr('target'); 
    if (_clickTab=="#")
        ;
    else
        $("#content").load(_clickTab);
    event.stopPropagation();
})

【HTML5】RGraph demos bar01

本文介紹使用HTML5 canvas標籤搭配RGraph函式
先看一下RGraph官網介紹
Title:Build faster websites with RGraph

內文
RGraph is a HTML5 charts library written in Javascript
that uses the HTML5 canvas tag to draw
and supports over twenty different types of charts.

<script>
        window.onload = function ()
        {
            var data = [5,4,1,6,8,5,3]; //data也可以是二維陣列           

            // Create the br chart. The arguments are the ID of the canvas tag and the data
            var bar = new RGraph.Bar('cvs', data);
            bar.Set('chart.labels', ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']); //橫座標項目
            bar.Set('chart.background.barcolor1', 'white');
            bar.Set('chart.background.barcolor2', 'white');
            bar.Set('chart.background.grid', true); //是否顯示格線
            // bar.Set('chart.colors', ['red']); //控制長條圖顏色

            // Now call the .Draw() method to draw the chart
            bar.Draw();
        }
</script>

HTML的部分就很簡單
主要是使用HTML 5的canvas標籤

<h1>A basic Bar chart</h1>
<canvas id="cvs" width="600" height="250">[No canvas support]</canvas>

下圖則是執行結果

【jQuery】讀取和寫入 HTML tag

最近在寫jQuery與Ajax遇到了問題
解決問題以後，記錄下來。
主要是利用Ajax處理刷新select選取參數
以及更改input text的值。
簡介jQuery寫法：
$("tag"),tag為html標籤
$("#id"),id為html tag的id
$("#id").val()可以獲取該tag的值

HTML標籤部分：

<select id="select1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<input id="text1" type="text" />
<button>OK</button>

1.變更HTML select tag的選取參數
jQuery程式碼：

$(document).ready(function(){
  $("button").click(function(){
    $("#select1")[0].selectedIndex = 3;
  });
});

未按鈕前：

執行jQuery程式碼後：

2.變更HTML input text的value值
jQuery程式碼：

$(document).ready(function(){
  $("button").click(function(){
    $("#text1").val("text change");
  });
});

執行jQuery程式碼後：

【Javascript】在表單submit之前進行欄位驗證

function subForm(theform){
   if(document.form1.money.value.length == 0){
    alert("請輸入金額");
    document.form1.money.focus();
    return false;
   }
   if(checkDate(document.form1.startdate.value)==false){
          document.form1.startdate.focus();
       return false;
   }
   return true;
}

function checkDate(str) {
    var date = Date.parse(str);
        if(isNaN(date)) {
            alert("請輸入合法日期！");
            return false;
        }
    return true;
}

在form表單送出之前，
利用Javascript進行欄位的檢查
第一個if判斷式檢查欄位不可為空
第二個if判斷式檢查日期字串
方法是把使用者輸入的字串丟入 JavaScript 函式 Date.parse 裡

為了避免form表單檢查有誤還送出資料
所以加了onsubmit="return subForm()"
這樣檢查發現有欄位驗證有誤會return false
這樣form就不會submit出去
檢查無誤就return true
這時form才會submit

【phpMyAdmin】修改帳號密碼登入方式

來到phpMyAdmin的資料夾下
把 config.sample.inc.php 檔案複製後變更名稱為 config.inc.php
再進行設定

/* 設定phpmyadmin的認證方式(config、http、cookie) */
 $cfg['Servers'][$i]['auth_type'] = 'config';            //不需輸入密碼即可登入
 $cfg['Servers'][$i]['auth_type'] = 'http';              //有變動到資料庫就要輸入一次密碼，彈出一個對話方塊來登入帳號密碼
 $cfg['Servers'][$i]['auth_type'] = 'cookie';            //利用cookie方式只要輸入一次密碼即可(預設值)，登入畫面為Web介面
/* 若使用認證方式為 cookie 則必須設定 blowfish 加密演算法亂數值 */
 $cfg['blowfish_secret'] = '';                           //預設值
 $cfg['blowfish_secret'] = 'qwerzxcv5566';               //隨便給亂數

【phpMyAdmin】變更MySQL的密碼

使用phpmyadmin更改Mysql密碼的方法
1.適用phpMyAdmin ver.3.1.1
首頁→Actions→更改密碼

2.適用phpMyAdmin ver.2.9.2
首頁→權限→編輯root使用者
變更完成後，記得重新讀取權限，否則新密碼不會生效

3.下SQL語法
UPDATE user SET password=password('new_pwd') where user='root';
FLUSH PRIVILEGES; //刷新Mysql資料庫

【JAVA】Class String compareTo

今天簡單介紹一下JAVA裡面的String類別底下的一個方法
就是compareTo，會想介紹這個方法是因為我一開始只知道
這個方法用於比較字串，正確的話就會回傳0，但我不清楚
如果錯誤的話，回傳的值表示什麼意思。

查了一下Java SE 7的API
public int compareTo(String anotherString)
如果字串一樣的話，毫無疑問會回傳0。
但如果不一樣呢，
compareTo會逐一比較兩個字串，
當出現了第一個不一樣的 character 時，
該character位於字串的位置 k，k 也就是 index
則回傳以下結果：
this.charAt(k) - anotherString.charAt(k)

或是比較完比較短的字串仍沒有發現相異的字元時，
則會回傳以下結果：
this.length( ) - anotherString.length( )

舉例而言：

String a = "abc";
String b = "abcde";
String c = "abcF";
System.out.println(a.compareTo(b));
System.out.println(b.compareTo(a));
System.out.println(c.compareTo(a));
System.out.println(c.compareTo(b));
System.out.println(c.charAt(3)-b.charAt(3));

執行結果：

首先 a.compareTo(b) 會回傳 a.length( ) - b.length( ) 所以 3 - 5 = -2
同理可推 b.compareTo(a) 則回傳 b.length( ) - a.length( ) 回傳 2
c.compareTo(a) 則是 c.length( ) - a.length( ) 所以 4 - 3 = 1
c.compareTo(b) 因為第一個相異的字元的index為3
所以會回傳 c.charAt(3) - b.charAt(3) = -30
至於-30怎麼來的，
上網查了一下應該是轉成Unicode之後的計算結果。