-->

網頁

顯示具有 JavaScript 標籤的文章。 顯示所有文章
顯示具有 JavaScript 標籤的文章。 顯示所有文章

2013/12/31

Javascript 斷行造成 parse 錯誤

當宣告一個有換成的字串,部份程式語言允許可以在引號中直接加入換行:
var foo = "space 
inside"

但上面語句在 javascript 執行會產生 syntax error。

在 javascript 中,語句結束不一定要加上分號,直譯器會判斷在適當的位置加上「;」。所以上述的程式會被 javascript 解讀成:
var foo = { prop: "some;
thing"};


其他:
[JavaScript] 自動補上分號的機制造成非預期的回傳值
http://wbkuo.pixnet.net/blog/post/162042779

2013/12/16

Chrome 透過 console.dir() 取得 javascript 物件屬性

若不曉得物件中有哪一些屬性、方法可以使用,可以透過 console.dir() 將其列出。
var foo = ['1', '2', 3];
console.dir(foo);

Chrome 會屬性、方法印出:



若不曉得傳入物件的詳細定義,這招很方便。但只有在 Chrome 上印出的資訊會這麼詳細,Firefox 和 nodejs console 上,印出來的就和 console.log() 差不多。

感謝 Eason 指點。

2013/11/01

Interesting XSS Sample

比較常見的 XSS 多安插 javascript 程式在 HTML 元素中:
<img src="javascript:alert('XSS')">

最近發現有趣的攻擊方式:
<img/src=x oooooo/oooooooooo/onerror="top.location='http://zeroplex.blogspot.com'" >

這對程式碼本身並不具危險性,但瀏覽器開啟上面那一段 HTML 時,卻會自動重新導向到 zeroplex.blogspot.com

主要原因是,瀏覽器都有提供語法自動補齊、修正功能。眼尖的人應該會發現,上面那一段語法,使用 Chrome 的開發者工具 (非檢視原始碼) 開啟時,會被自動修成 (top.location 改掉以便 debug):




恐怖的是,瀏覽器將最後面的語法修道可以執行,因此 %lt;img src="x"> 時,瀏覽器無法擷取圖片,造成 error,而觸發了後半部 onError 事件,執行 top.localtion="http://zeroplex.blogspot.com" 而跳到我的部落格頁面

2012/10/14

jQuery.tmpl

之前提到用 jQuery 的 clone() 複製一列表格,再用 text() 修改該列的文字內容,但這個方法會經過多次 DOM 處理,效率不高。

經過阿育推薦後,發現 jQuery.tmpl() 樣板引擎還不賴,用起來不難且程式碼看起來會乾淨很多。


先定義表格一列的樣板:
<table id="target-table"> </table>

<script type="text/x-jquery-tmpl" id="row-template">
  <tr>
    <td>${name}</td>
    <td>${comment}</td>
  </tr>
</script>

在樣板中文字內容的位置使用 ${VARIABLE} 取代,tmpl() 會解析樣板內容並將資料填入。

接著透過 tmpl() 處理新增一列至表格最後方:
var data = {
   name: 'zeroplex',
   comment: 'some text'
};

$.tmpl( $('#row-template').html(), data)
    .insertAfter('#target-table > tbody > tr:last');

tmpl() 會自動將第二個傳入的參數對應到樣板變數,data.name 會被帶入 ${name}、data..comment 被帶入 ${comment},最後將處理完畢的資料放入原始頁面中。


Reference:.tmpl() - jQuery API
http://api.jquery.com/tmpl/

2012/09/01

jQuery 在表格新增一列

學 javascript 沒多久,剛開始只是很簡單的置換文字、為元素加上類別,短短幾行沒什麼感覺。到了開始動態新增表格資料時,javascript 程式碼裡面參雜 HTML 就越看越噁心。
function addRow( data ){
   $('#user-list > tbody ').append(
         '<tr> ' + 
            '<td>' + id + '</td>' +
            '<td>' + username + '</td>' +
            '<td>' + email + '</td>' +
         '</tr>'
      );
}

這樣的寫法除了可讀性很低以外,之後若修改表格結構以及 CSS 樣式時,必須同時修改樣板以及 javascript 內容,不容易維護。

今天翻了翻 jQuery docs,發現幾個方法拿出來用可以把 HTML 和 javascript 切割的頗乾淨。

先定義一列當作表格樣板,可以在 CSS 將這一列隱藏:
<table border="1">
  <tbody>
    <tr id="template" style="display: none;">
      <td class="id some-other-class"> </td>
      <td class="username"> </td>
      <td class="email"> </td>
    </tr>
  </tbody>
</table>

新增一列時,將 template 複製一份出來,再依照 class 名稱將資料填入不同欄位:
function addRow(){
  $('tr:last').after( $('#template').clone().removeAttr('id') );
  $('tr:last > td.id').text( id );
  $('tr:last > td.username').text( username );
  $('tr:last > td.email').text( email );
}


2012/07/01

animate on jQuery

初學 jQuery 第一個感想就是 selector 非常好用,加上 effects 功能後,可以說是懶人的一大福音。

在 effects 中有看到 slide down / up,區塊會上下滑動,但沒看到左右滑動的,所以自己試著刻一個。

<style>
#box {
   width: 200px;
   display:  inline;
}
</style>

$('#box').animate(   {
      width: '0px',
      display: 'none'
   } , 'slow'  };

不過發現 box 不會消失,用開發人員工具去看 display 屬性沒有被改變。後來看了文件才發現是自己耍蠢。

jQuery 建立動畫特效的方式,是依照 duration 以及物件屬性的數字差,並在固定時間間隔對屬性的數值做遞增、遞減,是「數值」遞增、遞減,display 屬性值並非數字,所以 jQuery 沒辦法處理。


ps. 用了 jQuery 以後就不會寫 Javascript 了 .... Orz

2011/06/11

轉貼:開元中最好的 web 開發資源

CoolShell.cn 網站上整理了不少網頁開發相關資源,包括:
  • 學習 HTML5 編成與設計
  • Server 端工具
  • PHP Framework 與工具
  • 資料庫
  • API 與即時資訊處理 (在線數據)
  • 線上軟體開發與媒體工具
  • 程式資源與版本管理工具
  • JavaScript Framework
  • JavaScript 移動與觸摸相關 framework
  • jQuery 外掛與相關資源
  • HTML5 視訊播放器
  • JavaScript 音訊處理與視覺化工具
  • JavaScript 2D、3D 圖形
  • JavaScript 與 HTML5 API (接口?)
  • 其他 JavaScript 工具
  • Client 端工具
  • CSS3 與字型資料
  • 網站樣板

忘了貼網址 XD

开源中最好的Web开发的资源