Archive

文章標籤 ‘javascript’

jQuery 學習筆記(一) -hello world

2008年12月29日 2 則評論

先前有稍為看了一下jQuery，因為目前愈來愈需要美感的網頁，所以還是認真點學習這些簡化Javascript 的framework吧!

歷程
jQuery 由美國人John Resig創建，至今已吸引了來自世界各地的眾多javascript高手加入，到目前為止(2008-12-29)最新的release 版本為 v1.2.6 ， 最小化後的檔案約30.3KB，以下為相關jquery基本連結。


jQuery是繼prototype之後又一個優秀的Javascrīpt框架。其宗旨是WRITE LESS,DO MORE,寫更少的代碼,做更多的事情。它能快速,簡潔的使用HTML documents, handle events, perform animations,並且能把Ajax交互應用到網頁, jQuery 能夠改變並減化你寫JavaScript的方式及程式碼。
它是輕量級的 js 庫(壓縮後只有30k) ，這是其它的 js 庫所不jquery及的，它兼容 CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。

而目前在網路上，jQuery的使用案例及教學手冊文件等都非常充足，而學習jQuery前最好對xml力Css,Javascript,Html,DOM都有基本概念，這樣上手才會快一點。

小弟評估了jQuery及Prototype之後，才想把主力放在jQuery上，理由改天有空再寫囉!!

基本使用方式 :

1.要記得載入jQuery的函式庫
2.jQuery程式碼必須在以下的地方撰寫
 
A.$(document).ready() 就像是jQuery的window.onload()

$(document).ready(function(){
  將jQuery 程式碼寫在這
});


B.這種方式也可以，但同時寫時A會先執行

$(function(){
將jQuery 程式碼寫在這
});


3.如何取得物件

A.抓取所有的<a /> tag物件

$(”a”)


B.此為抓取指定的ID，只要ID或NAME為this_id都會被抓出來

$(”#this_id”)


C. 此為抓取指定的class，只要css 裡有包含指定的sytle名稱就會被抓出來

$(”.this_style”)


D. 先小結A+B+C，他們還可以結合使用喔!!

$(”a#this_id”)   //找出 <a />tag,物件名稱為this_id的

$(”a.this_style”)   //找出 <a />tag,calss 名稱為this_style的 (感謝shian指導修正)


E.還有比較不容易搞混的取得物件方式，下例是為抓取this_id名稱的input物件

$(”input[@name:this_id]“)


F.也可以用這種方式取得，此為抓取type=checkbox的物件

$(”input[@type=checkbox]“)


G.還有一種叫層級的取法，以這個div > p會得到<p>two</p>

HTML Code:     <p>one</p> <div><p>two</p></div> <p>three</p>
$(”div > p“)

還有很多種取得方式，詳細請再去參考文件，除了官網的文件蠻充足的(可惜都英文的)外；這裡還有簡體版的jQuery API 使用手冊 ，對DOM操作不太熟悉的，可以看一下jQuery 學習筆記 (6) — 操作 DOM 物件這篇，寫的淺顯易懂，應該很容易可以上手

再來當然要寫一個hello world囉:
先瞭解一下如何讀取及加入html code
在<body>裡加入一段html碼

$(”<div><p>Hello</p></div>”).appendTo(”body”);

結果會在<body>加入<div><p>Hello</p></div></body>
再來我們要取得物(div)裡的html，以上述例子再繼續執行$(”div”).html() 結果會取得:<p>Hello</p>

而我們也可以在已知物件加入html code

$(”div”).html(”<p>Hello World</p>”)

這樣我們想要的結果就會顯示出來啦，完整如以下範例

<html>
  <script src=”js/jquery-1.2.6.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function(){
       $(“div”).html(“<p>Hello World</p>”);
});
</script>
</head>
<body>
<div><p>two</p></div>
</body>
</html>

參考資訊:
http://www.hudong.com/versionview/DdncDAFtRA3V,XA,ndwfwoBUw
http://blog.shian.tw/jquery-base.html
http://wiki.jquery.org.cn/doku.php?id=jquery%E4%B8%AD%E6%96%87%E6%8C%87%E5%AF%BC:15%E5%A4%A9%E5%AD%A6%E4%BC%9Ajquery

Categories: Java Script Tags: , ,

網頁圖片比例縮小(CSS,javascript)

2008年12月24日 2 則評論

目前在開發一些網路應用的程式，都要提供上傳圖片功能，
但教育使用者上傳前縮圖至理想的尺寸及限制容量大小實在是一件很不容易的事

所以與其要教育使用者，還是自己變通一下吧
限制容量就不在本文的範圍啦，直接跳重點如何在顯示時等比例縮小圖片

以HTML來說，如果限制的圖的長寬，當圖片大於此長寬而且又非和限制的等比例時就會造成圖片變形
此時，我們透過css或是javascript進行等比例縮小，以CSS的作法，如下設定

<style type=”text/css” >
.album-pic img {
vertical-align: middle;
max-width:100px;   /* FF IE7 */
max-height:100px; /* FF IE7 */
_width:expression(this.width > 100 && this.width > this.height ? 100: auto); /* IE6 */
_height:expression(this.height > 100 ? 100 : auto); /* IE6 */
}
</style>

這個設定是支援CSS3的，目前慣用的瀏覽器都有支援，但IE6及IE7和Firefox的寫法不一樣，為求呈現效果一致所以都寫上去求平安囉!!
使用時只要加上這個css 就可以啦，使用方式如下:

<div class=”album-pic“>
  <img
src=”pic/demo.jpg” />
</div>

再來介紹用Javascript該如何調整，首頁先說明縮圖的function:

<script language=”javascript”>
var flag=false; 
function MyImage(Img){ 
   var image=new Image(); 
   image.src=Img.src; 
   width=236;//預先設置的所期望的寬的值
   height=170;//預先設置的所期望的高的值
   if(image.width>width||image.height>height){//現有圖片只有寬或高超了預設值就進行js控制
     w=image.width/width;
     h=image.height/height;
       if(w>h){//比值比較大==>寬比高大
           Img.width=width; //定下寬度為width的寬度
           Img.height=image.height/w; //以下為計算高度
       }else{//高比寬大
           Img.height=height; //定下寬度為height高度
           Img.width=image.width/h; //以下為計算高度
       }
   }
} 
</script>

使用時只要照下面用法即可


<img src='/demo.jpg'
onload='javascript:MyImage(this);' border='0'>

雖然都寫上，但建議使用時還是透過css會好一點，因為程式碼精簡外，效能也是css的比較好啦!!

參考資料:
http://www.phpip.com/design/2008/0905/css_10682.html
http://bbs.d8sun.com.cn/thread-1455-1-10.html

Categories: WebDesign Tags: , ,

移除Html 的Tag 完全手冊(Javascript,Java,C#,PHP)

2008年12月16日 2 則評論

移除Html的Tag 標籤，最近有需要用到，所以整理以下各語言相關的作法

Javascript:

function RemoveHTML( strText )
{
var regEx = /<[^>]*>/g;
return strText.replace(regEx, “”);
}

C# for .Net:

public string RemoveHTMLInServer(string in_HTML)
       {
           return Regex.Replace(in_HTML, “<(.|\n)*?>”, “”);
       }

Java:

public String reFormat(String content) {
content = content.replaceAll(“(?is)\\s\\s”, ” “);
content = content.replaceAll(“(?is)</?br>”, “\n”);
content = content.replaceAll(“(?is)</?p>”, “\n”);
content = content.replaceAll(“(?is)&nbsp;”, “”);
content = content.replaceAll(“(?is)</?[a-z][a-z0-9]*[^<>]*>”, “”);
content = content.replaceAll(“<!–/?.*–>”, “”);
content = content.replaceAll(“　”, “”);
content = content.trim();
return content;
}

PHP:

函數strip_tags的功能是刪除html標記，他的第二個參數是一個保留的html標記列表  
  如：  
  只保留<b>則strip_tags($text,”<b>”)  
  只保留<b><br><p>則strip_tags($text,”<b><br><p>”)  

參考資料:
http://www.cnblogs.com/time-is-life/archive/2008/02/13/1067790.html
http://topic.csdn.net/t/20050221/16/3795604.html

Categories: 專業技術 Tags: , , ,

防範惡意程式　無名小站全面禁加Javascript(IThome,2008/10/14)

2008年10月15日 尚無評論

剛看到這則，應該是樹大招風造成的啦，當禁止後，我想應該使用者反應會很強烈吧，因為就是那些javascript小東東才有辦法讓自己的blog更活潑熱鬧點，還有也有許多web 2.0應用是透過javascript帶來的，看來當開放後再關閉一定會有很大的反對聲音。不知會不會因此所以環境遭受巨變，而造成部落遷徙呀~呵!!小弟覺得，還是要適度的開放，才能讓blog發展的更好!!

此外，這則裡提到資安人員的話真的是很好笑，看似專業但又失專業，禁用Javascript可以說是最全面的保障措施，這種話隨便人都可以說的，小弟認為要學學大考中心，先前出來說電腦絕對安全不會被駭客入侵，因為電腦網路線是沒有插的….^^  

防範惡意程式　無名小站全面禁加Javascript   文/趙郁竹 2008-10-14

資安組織chroot日前發出一份公告，指出無名小站存在XSS漏洞，這很有可能才是無名緊急修改政策的真正原因。

無名小站週一貼出公告，今天（10/14）中午開始全面禁止新增、修改Javascript語法。根據無名表示，此舉為考量網友使用安全，不過使用者往後將不得再新增小時鐘、音樂播放、聯播貼紙、聯播廣告等利用Javascript放置的外掛程式。

無名小站在公告中指出，為了避免有心人士藉由惡意程式語法散佈病毒或木馬程式，今天開始網誌邊欄和網誌敘述將不提供新增置放Javascript語法之功能。不過據了解，資安組織chroot日前發出一份公告，指出無名小站存在跨站腳本攻擊漏洞（XSS, Cross-Site Scripting），這很有可能才是無名緊急修改政策的真正原因。

Yahoo!奇摩公關經理吳苑如回應表示，透過語法可進行的惡意攻擊很多，如果駭客攻擊的是網站平台，平台可以有效控制；不過若是攻擊瀏覽者，就難以預防。因此雖然禁用Javascript會造成使用者些許不便，卻是較能保障網友瀏覽安全的做法。

事實上，無名在今年3月時已經開始修改語法使用規定，除了網誌邊欄和網誌敘述外，不得新增、修改Javascript。這次全面禁用Javascript，也是上一波管理政策的延伸。吳苑如強調，以前置入的語法還會繼續運作，只是不能修改、新增，工程人員未來會在確認安全無虞之後逐步開放邊欄可運用的Javascript。

對於無名以此種方式強化平台安全性，不願具名的資安專家表示，禁用Javascript可以說是最全面的保障措施，雖然可透過後台機制解決，「不過就算防了999項，只要漏了一項還是會出事。」他說，從資安角度來看，對於無名的做法他相當認同。

但也有其他資安專家持不同看法，專門揭露台灣網站被植入惡意連結、存在XSS或其他安全漏洞的部落客邱春樹（Roger）就認為，無名直接限制Javascript對於使用者影響太大，並非最好的處理方式，應該可以從無名本身系統防護進行檢視。不過透過Javascript植入惡意程式的確是網站很容易遇到的問題，可以說相當普遍。

目前也有業者採用和無名相同做法，如wordpress也是完全限制javascript。痞客幫（Pixnet）則未限制，而是從系統面加強安全性。Pixnet日前才因安全考量進行後台大改版，在後端程式碼、網站架構都提升了安全性。並將前後台網域拆開，也可降低遭XSS攻擊的風險。

Categories: 新知 Tags: ,

用Javascript達到信用卡或序號填寫時自動跳下欄位的方法

2008年8月12日 尚無評論

要達到填寫信用卡或序號時，只要填滿就會自動跳下一欄位
我們要借助Javascript才有辦法達到此效果

首頁我們在html 先把要輸入的欄位列出

信用卡卡號
<input type=text name=pan_no1 size=4 value=”” maxlength=4 onKeyUp=”setBlur(this,'pan_no2');”>-
<input type=text name=pan_no2 size=4 value=”” maxlength=4 onKeyUp=”setBlur(this,'pan_no3');”>-
<input type=text name=pan_no3 size=4 value=”” maxlength=4 onKeyUp=”setBlur(this,'pan_no4');”>-
<input type=text name=pan_no4 size=4 value=”” maxlength=4 >  

再來寫個 Javascript，判斷該欄位填入的長度是不是等於maxLength如果是就跳下一個欄位

<script>
  function setBlur(obj,target2)
  {
     var target =document.getElementById(target2);

       if( obj.value.length ==obj.getAttribute('maxlength'))
           {
               target.focus();
           }
       return;
  }
</script>

Categories: Java Script Tags: ,
分頁: 上一頁 1 2 3 下一頁