Archive for the ‘JavaScript’ Category

« Older Entries

Firefox的JavaScript主控台

點閱人數：28次 2013-02-28 by ㄚ琪,Last modified: 2013-02-25

在JavaScript & jQuery：The Missing Manual 國際中文版(第二版)→第一部 JavaScript新手入門→第一章 第一個JavaScript程式→Firefox的JavaScript主控台這裡，ㄚ琪讀到了Firefox的JavaScript主控台是非常棒的除錯工具。既然如此當然要讓朋友們知道囉，不過書中像是直接使用英文版的Firefox做解說，對於國人來說應該會有點不適應吧，我們就以Windows的Firefox 17.0.1的中文版來示範吧。

這次使用的例子為complete_fadeIn.html，我們稍微把$(‘body’).hide().fadeIn(3000);這一行改成$(‘body’).fadeIn(‘slow);看看Firefox如何來除錯？

要開啟JavaScript主控台，點選工具→網頁開發者→錯誤主控台

看來有很多的錯誤，但應該有可能是其他的問題造成的，我們直接看到行號11，有個箭頭直接告訴你錯誤的地方，看來還真方便。

它也可以顯示CSS的錯誤，這裡很多的錯誤有些就是這一類的錯誤。

另外也順便透露Chrome的JavaScript的主控台好了。

點選第二列最右邊的圖示→工具→JavaScript控制台，開啟主控台後點選Console就可以看到錯誤訊息了。

不過像這樣的Uncaught SyntaxError: Unexpected token ILLEGAL 錯誤訊息應該沒有人懂，哈哈。

免費列印

Tags:
Posted in JavaScript | No Comments »

※2012※在Blogger上加上Facebook「讚」按鈕

點閱人數：509次 2012-06-15 by ㄚ琪,Last modified: 2013-01-11

首先，進到Facebook的Core Concepts › Social Plugins › Like Button，在Step 1 – Get Like Button Code這裡填寫相關資料

那個URL to Like不用管，因為之後會再改。Send Buttonㄚ琪也不選，不過你可以試試看，它會多一個寄送的按鈕。Show faces，ㄚ琪也不選，選擇的話會出現按Like人的圖示。

按Get Code按鈕

請注意，This script uses the app ID of your app請依你自己建立的應用程式來選擇。

黃色框框內的內容不要用，因為丟到Blogger的Template無法使用，改使用這樣的代碼：

<div id=’fb-root’/><script src=’http://connect.facebook.net/en_US/all.js#appId=？？？？？&amp;xfbml=1′/>

這個appId就是黃色框框內appId那串數字，當然不要照這圖來抄，不能跑可不要怪我。

或是<div id=’fb-root’/><script src=’http://connect.facebook.net/zh_TW/all.js#appId=？？？？？&amp;xfbml=1′/>

這是給中文用的。

接著到Blogger的Template

很重要: 修改 Template前請先備份存檔


修改步驟

1.版面配置 (Template) → 修改 HTML (Edit HTML) → 把 展開小裝置範本 (Expand Widget Template) 打勾 來編輯範本的完整 HTML

2.將第一部分的程式碼，貼到  <body expr:class=’&quot;loading&quot; + data:blog.mobileClass’>之後的下一行 


3. 將按鈕置於文章標題前:
在 <h3 class=’post-title’> 代碼前加入以下代碼，也有可能是<data:post.title/>這樣的代碼，不過會有很大一段的看不懂的代碼，請小心服用：

<div class=”fb-like” data-href=”http://ijx.blogspot.com” data-send=”false” data-width=”450″ data-show-faces=”false”></div>

data-href改成expr:data-href，http://ijx.blogspot.com改成data:post.url

或許你也可以找<p><data:post.body/></p>這樣的代碼，放入按鈕程式碼，不同的置法，會顯示在不同位置，也請小心服用。

其他部落格程式碼請參考官網說明: Like Button – Facebook

↓ 按鈕樣式如下

免費列印

Tags: , , ,
Posted in JavaScript | No Comments »

用Eclipse開發jQuery

點閱人數：2,988次 2010-04-20 by ㄚ琪,Last modified: 2013-01-04

今天手上有了巧用jQuery這本書，看到1.5 用Eclipse開發jQuery這裡，訝異說Eclipse也可以開發jQuery喔！趕緊用心看這一章！

看了之後，才知道還有3種，課本的Eclipse版本較舊，我貼我新的版本照片給各位瞧瞧：

1.JSDT

2010-04-20_150755

Name:隨意打

Location:http://download.eclipse.org/webtools/updates

2010-04-20_152441

2010-04-20_153432

比較特別的是有一個認證的需要，只有勾選了，不然就沒戲唱了！

2.JSEclipse

2010-04-20_155512

按Add鈕操作就省略了！

Location:http://download.macromedia.com/pub/labs/jseclipse/autoinstall/site.xml

2010-04-20_155551

也是有一個特別的安全警告，一樣是OK，不然也是沒戲唱！

3.Spket

2010-04-20_160223

Location:http://www.spket.com/update/

2010-04-20_160432

Spket是免費的商業用版本，所以呢？就出來這張畫面，也只能接受了，不然也是沒戲唱！

2010-04-20_160741

2010-04-20_160757

要配置Spket進行jQuery開發，基本上動作跟課本說的一樣，所以就不贅言，只貼圖：

2010-04-20_161537

Windows->Preference->Spket->在JavaScript Profile處 New

2010-04-20_161558

Add Library

2010-04-20_161845

Add File 找你的jQuery.js檔位置

2010-04-20_162016

 

閱讀本文之前可先閱讀下載jQuery之後再讀jQuery文件。

免費列印

Tags: , , , , , ,
Posted in JavaScript, 文章導讀 | 2 Comments »

喜歡JavaScript & jQuery：The Missing Manual 國際中文版(第二版)

點閱人數：72次 2012-12-14 by ㄚ琪,Last modified: 2012-12-14

JavaScript & jQuery：The Missing Manual 國際中文版(第二版)

ㄚ琪為何會喜歡JavaScript & jQuery：The Missing Manual 國際中文版(第二版)呢？各位可以看看工作達人上的熱門文章，jQuery UI入門跟jQuery UI 的 Demos展示及說明文件都在榜上有名，做為一個撰寫工作及程式相關的部落格，在這裡可以發現一些跡象，就是大家對jQuery應該很熱衷才是，所以能夠借來這一本書再從jQuery上充電學習，應該是讓人很高興的事才是，先來看看博客來的簡介吧↓↓↓↓↓↓↓

書架上不能沒有的一本書

　　答案就在這裡！

雖然透過JavaScript可開發出各式各樣的動畫和互動特效，讓HTML網頁更生動精彩—但不少網站開發者都覺得JavaScript是種難學的程式語言。本書以淺顯易懂的方式詳述許多JavaScript基礎知識，並教你如何善用jQuery函式庫（預先整理好許多複雜JavaScript程式的函式庫）省下大量時間精力。讓你不用撰寫太多程式碼，就可以快速開發出互動性不亞於一般桌面應用程式的專業網站。

你不可不知的重要訣竅

◆如何開發出互動性佳的網頁，並利用JavaScript的事件(event)機制回應網站訪客的各項操作

◆如何利用動畫和特效，開發下拉式選單、彈出式視窗、動態投影片撥放…等功能

◆如何讓使用者操作介面更為豐富，讓網站更好用、更吸引人

◆如何善用網站表單(web form)取得訪客輸入的資訊，確保網站表單簡單易用，並針對訪客輸入的資訊提供更精準的回覆

◆如何利用Ajax技術，讓瀏覽器不用重新載入整張網頁即可和網站伺服器互動

◆藉由生動、一步步詳盡解說的教學範例，協助你建立自己的網站專案

目錄：

誌謝
前言

第一部 JavaScript新手入門
第一章 第一個JavaScript程式
第二章 JavaScript基礎程式語法
第三章 程式邏輯與流程控制

第二部 jQuery新手入門
第四章 jQuery簡介
第五章 動作與回應：善用事件(Event)讓網頁更加生動
第六章 動畫與特效

第三部 各項網頁功能的建置
第七章 更生動的圖片呈現
第八章 更清晰的網站導覽機制
第九章 網頁表單(Web Form)功能再進化
第十章 更豐富的網站介面

第四部 Ajax：與網站伺服器互動
第十一章 Ajax簡介
第十二章 Flickr與Google Maps

第五部 程式開發小技巧與錯誤排解
第十三章 jQuery進階學習
第十四章 Java Script進階學習
第十五章 錯誤排解與除錯技術

附錄A JavaScript相關資源
索引

免費列印

Tags: , , ,
Posted in JavaScript, 文章導讀 | No Comments »

jQuery教學資源

點閱人數：393次 2012-11-14 by ㄚ琪,Last modified: 2012-11-13

首先，ㄚ琪要自賀一下jQuery UI的文章已經躍升到第二位了，這是除了jQuery UI官方網站外的華文部落格，我們應該感到高興，但是我們不能自滿，因為jQuery UI只是jQuery介面的外掛程式之一而已，既然如此我們應該做大到成為jQuery的華文最大部落格之一才是，哇，好大的口氣啊，這回ㄚ琪滿腦子還在想休假旅遊的事（一點也不想要工作的感覺）說，有點簡直癡人說夢吧，不管怎說，就讓ㄚ琪列一下jQuery的教學資源吧，當然在這之前先看一下下載jQuery之後再讀jQuery文件。

在http://docs.jquery.com/Tutorials有很多語言的教學文章，大家可以先來這裡學學，當然為了滿足華人們愛讀中文的口味，ㄚ琪會想辦法把它翻出來的，不過我們也會列出其他語言的文章，不過ㄚ琪應該只能譯英文的吧，所以如果有懂其他語言的專家，也歡迎一起來翻譯吧。

英文教學

一般教學

這些教學涵蓋了jQuery函式庫的基本原理 – 涵蓋各式各樣的主題。

介面

雜項

使用jQuery跟…

教學來源

這些網站致力於定期提供一些jQuery的教學。

jQuery API 教學

這些教學請直接看jQuery API裡的不同觀念，並且深入地討論。

jQuery核心

尋訪(Traversing)跟選擇器

操控、屬性跟CSS

事件

Ajax

外掛程式開發

工具

這些導覽檢視用不同的工具跟應用程式來使用jQuery。

Web服務

法文教學

jQuery.info

Babylon-Design

Les Intégristes

WebInventif.fr

LePotlatch.org

ChezNeg – Le blog d’un développeur web

Le blog technique de Loïc Bar

Snoupix.com

Webjax.eu

portail sur jQuery

NoShade.net

西班牙文教學

  • Haciendo Tablas Cebra Facilmente by Jack Born
    Esta es una traducció del artí “Zebra Striping Made Easy” de Jack Born. Pequeño tutorial a través de ejemplos sencillos de código para hacer tablas tipo cebra.
    Tags: Traversing, Selectors, CSS, Events
  • VideoTutorial Nº1 Curso de JQuery En este primer VideoTutorial hacemos una introducción en la que vemos cuales son las ventajas del uso de este tipo de frameworks, así como las funcionalidades que nos ofrece. Terminamos creando el primero proyecto con jQuery y explicando la sintaxis y estructura básica que utiliza. De momento publicados 14 videotuoriales del Curso.
  • Manual de jQuery publicado por DesarolloWeb.com

荷蘭文教學

波蘭文教學

  • jQuery – to łatwe! - jeden z pierwszych w Polsce, przystępnie napisany kurs jQuery dla początkujących

土耳其文教學

简体中文辅导

繁體中文教學

日文教學

韓文教學

義大利文教學

印尼文教學

by gawibowo:

by web valuer:

by gedex:

by Yudhi Armyndharis:

俄文教學

Уроки, документация и примеры по jQuery:

葡萄牙文教學

越南文教學

泰文教學

สอนการใช้งาน Effect ภาษาไทย

DITEY

希伯來文教學

מאות דוגמאות ,jQuery מדריך לימוד ודוקומנטציה – Xhtml.co.il בית הספר

立陶宛文教學

阿拉伯文教學

免費列印

Tags: , ,
Posted in JavaScript | No Comments »

jQuery UI入門

點閱人數：16,303次 2010-02-05 by ㄚ琪,Last modified: 2012-11-08

閱讀本文之前請先下載jQuery之後先讀jQuery文件。

jQuery UI是什麼?

jQuery UI是一個建立在jQuery JavaScript函式庫上的小工具跟互動式函式庫，你可以用來建立高互動的web應用程式，本指南的目的是讓你提高jQuery UI工作速度，跟著下面開始吧。

從查閱示範開始

要感覺一下jQuery UI的功能，可以查閱jQuery UI 的 Demos展示及說明文件。

在範例那裡，導覽列出所有jQuery UI提供的互動跟小工具，選一個互動或是小工具，你會看到特定外掛的幾個範例組態，每個範例允許你檢視原始碼，改變佈景，將網址加入書籤，舉一個例，查閱小工具的可折疊內容展示頁。

建構你自訂的jQuery UI下載

一旦你對jQuery UI有基礎的瞭解，你就可以準備嘗試一下！現在是你絞盡腦汁到jQuery UI 網站的Download Builder下載一份jQuery UI的時候了，jQuery UI的下載生成器允許你選擇想要下載的部份來取得你專案自訂的版本，這裡有三個步驟來建構你自訂的jQuery UI下載：

步驟 1：選擇你需要的部份

下載生成器的主要欄位列出jQuery UI所有的分類：核心、互動、小工具跟效果，jQuery UI的有些部份依賴另一個部份，只要勾選你要下載的小工具的核選框，任何需要的小工具也會自動被勾選，如果有不相依的情況，也會有警告出現，你選擇的部份會自動結合進入自訂的jQuery UI javascript的檔案叫做jquery-ui-1.7.1.custom.min.js

JQuery-UI---Configure-your-download.png

2010-02-26_101209

步驟 2：選擇一個佈景 (或是使用你自己的自訂佈景)

在下載生成器的右邊欄位，你會發現有一個欄位有很多預先設計好的佈景可以選擇給你的小工具用，你可以選擇我們提供的佈景，也可以使用ThemeRoller設計你自己的佈景（後面有更多的介紹）。

進階佈景設定：下載生成器的佈景部份也提供了一些進階的組態設定給你的佈景，假如你計畫使用多重佈景在單一頁面上，這些欄位就會派上用場，假如你只是在一個頁面上使用一個佈景，你可以完全忽略這些設定。

步驟 3：選一個jQuery UI版本

在下再生成器這裡最後一個步驟選擇一個版本編號，這是很重要的一個步驟因為jQuery UI版本被設計來配合特定版本的jQuery，目前的版本是：jQuery UI 1.7.1：跟jQuery 1.3搭配以及 jQuery UI 1.6：跟jQuery 1.2.6搭配。

按下Download！

你已經完成了下載生成器的設定！按下download按鈕，你會得到一個你選擇部份的自訂zip檔案，順著那些步驟，在這裡你也可以取得預設的jQuery UI 1.7 ( zip ~240k )下載，這個檔案包含UI 1.7的所有部份跟Smoothness佈景。

下載之後：介紹使用jQuery UI

一旦你下載了 jQuery UI，你會得到一個zip有下列的檔案：

  • /css/
  • /development-bundle/
  • /js/
  • index.html

基本概觀：在web網頁上使用jQuery UI

用文字編輯器打開index.html，你會看到連結：你的佈景、jQuery跟jQuery UI，一般來說，你會需要將這3個檔案放在任何要使用jQuery UI小工具跟互動的網頁上：

<link type="text/css" href="css/themename/jquery-ui-1.7.1.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>

一旦你放入了必要檔案，你就可以加些jQuery的工具在你的頁面上，舉例來說，要作一個日期選取的小工具，你可以文字輸入的元素到你的頁面上然後呼叫.datepicker()，項這樣： HTML: <input type="text" name="date" id="date" />

JS:

$('#date').datepicker();

Datepickerexample.png

就是這樣！

所有jQuery UI小工具跟互動展示，可以查閱jQuery UI 的 Demos展示及說明文件。

自訂你需要的jQuery UI

jQuery UI允許你用幾個方法來自訂，你已經見過下載生成器如何允許你自訂你的jQuery UI那一份來收入你要的部份，但是還有一個別的方法可以自訂你要實作的的程式碼。

基本的jQuery UI：使用選項

每一個jQuery UI外掛都有一個預設的配置可以迎合最基本常用的使用情況，但是假如你想要一個不同預設組態的外掛，你可以使用”options”來覆蓋每一個預設組態，這些選項的參數是一些傳進jQuery UI小工具的特性，舉例來說，滑塊的小工具有個定位的選項，它允許你指定滑塊應該是水平或垂直方向的，要載你的頁面上設定滑塊的選項，你只要使用一個參數傳入，像這樣：

$('#mySliderDiv').slider({
      orientation: 'vertical'
});

你可以傳入很多不同你要的選項，每個選項後加一個逗號（除了最後一個之外）：

$('#mySliderDiv').slider({
      orientation: 'vertical',
      min: 0,
      max: 150,
      value: 50
});

只要記得要大括號{}刮起你的選項，你就可以弄得很好，當然，上面的例子僅僅提到你可以對jQuery UI作什麼，要取得jQuery UI小工具詳細的資訊，請瀏覽jQuery UI 文件說明。

視覺化自訂：設計一個jQuery UI佈景

假如你想要設計你自己的佈景jQuery UI有一個很炫的應用程式可以達到這個目的，叫做ThemeRoller，你可以按下在jQuery UI導覽裡的design a custom theme來取得，或只是進入這一頁：ThemeRoller.com（註：參閱本頁ThemeRoller中文說明）。

ThemeRoller提供了自訂的介面來設計jQuery UI小工具的所有元素，當你在左邊欄位調整”levers”，右邊的小工具就會反應你的設計，ThemeRoller的Gallery標籤提供很多預先設計好的佈景(這跟下載生成器提供的一樣）the same ones offered by the download builder) 讓你調整或下載使用。

Themerollerexample.png

下載你的佈景

當你在ThemeRoller那頁按下”Download theme”按鈕，你會直接到下載生成器，並且在佈景下拉選單中有一個自訂的佈景自動被選，可以在那裡進一步地設定你的下載套件，一旦你下載了，你就會看到example.html這一頁是照你自訂佈景的樣式做的。

快速提示：假如你也想要編輯你的佈景，只要開啟CSS檔，在43行那裡有這樣說著 “To view and modify this theme, visit …” 該網址會打開ThemeRoller的佈景來編輯。

支援：我可以得到什麼幫助？

JQuery UI使用者跟開發者資源在Support Center持續更新中。

徵求開發者！

想加入jQuery UI團隊嗎？我們很愛你的幫助！拜訪UI Development Center有關於如何加入的詳細資料。

回顧我們的開發指南有關於如何發展jQuery UI小工具的資訊。

免費列印

Tags: ,
Posted in JavaScript, 翻譯 | 2 Comments »

« Older Entries

廠商贊助

贊助廠商連結請點我

熱門文章

懶得上網看文章！

就來訂閱我的電子報吧！

輸入你的電子郵件地址：

發送者為 FeedBurner

近期文章

關於工作的連結

Careerjet,找工作的搜尋引擎

隨便看看

鳥鳴啾啾

與我交誼！做我的粉絲！

廣告贊助

sponsoredreviews
Text Link
discountclick
buyblogreviews1

其它

快上www.blognews.com.tw，就有機會天天免費吃大餐！

最新的回應

Blogroll



Check Google Page Rank

  • 分類
    • Creative Commons Attribution-NonCommercial-ShareAlike 2.5 台灣
    This work by ㄚ琪 is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 台灣.

    无觅相关文章插件，快速提升流量