HTML5 data-*

這是 HTML5 新加入的屬性,讓你可以自己定義要存放在 element 中的資料,而不需要干擾 class, id, type, name 這些屬性的設置

例如:

== 原本 ==

<button id="good-1" onclick="getId(this);">
<button id="good-2" onclick="getId(this);">

<script>
  function getId(good){
    var id = good.id.split('-')[1];
  }
</script>

== 改寫 ==

<button id="good-1" data-id="1" onclick="getId(this);">
<button id="good-2" data-id="2" onclick="getId(this);">

<script>
  function getId(good){
    // native js
    good.getAttribute('data-id');

    // jQeury
    good.attr('good-id');
    good.data('id')    
  }
</script>

同一個 element 的 data-* 會被存放在一個叫做 dataset 的 object 中,我們可以透過 JavaScript 呼叫 element 的 getAttribute() 來存取對應的資料內容:good.getAttribute('data-id'),也可以呼叫此 element 的 dataset:good.dataset

为什么我们要用 data-* 呢,一个最大的好处是我们可以把所有自定义属性在 dataset 对象中统一管理,遍历啊神马的都哦很方便,而不至于零零散散了,所以用用还是不错的。

Reference:

  1. http://muki.tw/tech/html5-jquery-access-data/
  2. https://www.renfei.org/blog/html5-introduction-2-data-attribute.html

Access-Control-Allow-Origin (Cross Domain)

我設計了一個 JS 程式,呼叫 Facebook Graph API 來存取檔案後,直接將資料傳送到另一台地腦上的 PHP 程式來寫入資料庫

Client JS

<head>
    <meta charset='utf-8'>
</head>
<body>
Facebook Event Request/Writer<br>
<script src="http://connect.facebook.net/zh_TW/all.js"></script>
    <script>
      // setup  for Facebook Javascript SDK
      window.fbAsyncInit = function() {
        FB.init({
          appId      : '*',
          xfbml      : true,
          version    : 'v2.0'
        });
      };
    </script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="fb-root"></div>
<script>
var outputString = "";

function request(){
var event_id = document.getElementById('evnt').value;

    FB.getLoginStatus(function(response){
        if(response.status == 'connected'){
            var uid = response.authResponse.userID;
            accessToken = '*';

        FB.api('/'+event_id, function(response){
            var write_data = {
                 'id': response.id,
                 'desc': response.description,                 
                 'start': response.start_time,
                 'end': response.end_time,
                 'update': response.updated_time,
                 'date': response.is_date_only,
                 'privacy': response.privacy,
                 'ocate': response.owner.category,
                 'oname': response.owner.name,
                 'oid': response.owner.id
            };

           // Face a Cross Domain Problem: Access-Control-Allow-Origin disable
           $.get("http://*.*.164.163/floodfire/write_events.php", write_data, function(data){
                    console.log(data);
                });
            });// end of FB.api()
        }// end of if(response.status == 'connected')
    });// end of FB.getLoginStatus()
}//end of request
</script>
<div>
    Event ID: <input id='evnt' type="text" name="event_id">
    <button type="button" onclick="request()">Request</button>
</div>
</body>

Server PHP

<?php
require("dbconfig.php");
$id = $_POST['id'];
$description = $_POST['desc'];
$start_time = $_POST['start'];
$end_time = $_POST['end'];
$updated_time = $_POST['update'];
$is_date_only = $_POST['date'];
$privacy = $_POST['privacy'];
$owner_category = $_POST['ocate'];
$owner_name = $_POST['oname'];
$owner_id = $_POST['oid'];
/*query string*/

$sql = "INSERT INTO `events` VALUES ('$id', '$description', '$start_time', '$end_time', '$updated_time', '$is_date_only', '$privacy', '$owner_category', '$owner_name', '$owner_id');";
/*query*/

echo mysql_query($sql) or die(mysql_error($conn));
?>

用 JS 傳遞資料時,在瀏覽器的主控台顯示錯誤訊息:
XMLHttpRequest cannot load http://..164.163/floodfire/write_events.php?id=751622344863838&desc=%…%E8%8B%97%E6%A0%97%E9%9D%92%E5%B9%B4%E8%81%AF%E7%9B%9F&oid=481213905297826.
No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://fancy.cs.nccu.edu.tw&#8217; is therefore not allowed access.

一開始這個問題,只是在 Server 端的 PHP 加入 header(“Access-Control-Allow-Origin: *"); 就好了
但是前兩筆都可以過,第3筆一直仍然無法過 Access-Control-Allow-Origin
問學弟阿亮想說應該就是 cross domain 的傳輸限制,但我怎麼設定就是不行
後來在同機器上測同一筆,照理說可以,也真的沒有 Access-Control-Allow-Origin
但是卻出現 414 Request-URI Too Large
我在猜想會不會是因為這樣才被檔
結果回去另一台,第3筆還是不行,但是第1、2筆仍可以
甚至拿掉了 server 端 PHP 的 header(“Access-Control-Allow-Origin: *"); 還是可以 (可能因為我有啟用 mod_header?)
所以應該就是因為 Request 太長導致
後來我把這件事跟阿亮講
他一看我說是 Too Large 就知道我是用 get
哈哈哈!

 // Face a Cross Domain Problem: Access-Control-Allow-Origin disable
 $.post("http://1*.*.164.163/floodfire/write_events.php", write_data, function(data){
    console.log(data);
});

阿亮說 用 nodejs+express 就可以解決 cross-domain 的問題了

寫入資料儘量用 POST 或 PUT
POST 通常是用來提交數據,所以可容納較長數據
GET 設計上是用來對伺服器傳遞要取得資源的參數,所以資料長度很小
PUT通常是和DELETE 一起用來對資料做修改,PUT 沒有就新增,已有就更新,DELETE 刪除

Simple Demo of Screen Ruler in Web Design

今天看搜到了這個有用的工具 – Screen Ruler,很簡單的一行 CSS Code,就可以在瀏覽器的邊緣刻劃出尺規,對於設計網頁版面很外行的我而言算是個福音!

螢幕快照 2014-05-04 下午7.56.56.png

不過實際做了一個 div 來測了一下,發現位移會有點誤差,大約在 7 pixel 左右,也許是我的螢幕問題或是網頁版面設計本身的障礙,但是長度上是精準的

screen-ruler.png