<?xml version="1.0" encoding="UTF-8"?> <rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" ><channel><title>وبلاگ سعید زبردست &#187; برنامه نویسی وب</title> <atom:link href="http://zebardast.ir/category/%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%86%d9%88%db%8c%d8%b3%db%8c/%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%86%d9%88%db%8c%d8%b3%db%8c-%d9%88%d8%a8/feed/" rel="self" type="application/rss+xml" /><link>http://zebardast.ir</link> <description>دسته نوشته ها و مقالاتی در زمینه علوم کامپیوتر و تجربیات شخصی</description> <lastBuildDate>Fri, 18 May 2012 15:59:30 +0000</lastBuildDate> <language>fa</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <generator>http://wordpress.org/?v=3.3.2</generator><image><title>وبلاگ سعید زبردست</title> <url>http://0.gravatar.com/avatar/9fb25dddd365836466bd8051be993fa8.png?s=48</url><link>http://zebardast.ir</link> </image> <item><title>معرفی و آموزش پیاده‌سازی Apache Lucene</title><link>http://zebardast.ir/%d9%85%d8%b9%d8%b1%d9%81%db%8c-%d9%88-%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%be%db%8c%d8%a7%d8%af%d9%87%e2%80%8c%d8%b3%d8%a7%d8%b2%db%8c-apache-lucene/</link> <comments>http://zebardast.ir/%d9%85%d8%b9%d8%b1%d9%81%db%8c-%d9%88-%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%be%db%8c%d8%a7%d8%af%d9%87%e2%80%8c%d8%b3%d8%a7%d8%b2%db%8c-apache-lucene/#comments</comments> <pubDate>Sat, 14 Apr 2012 14:55:47 +0000</pubDate> <dc:creator>سعید زبردست</dc:creator> <category><![CDATA[برنامه نویسی]]></category> <category><![CDATA[برنامه نویسی وب]]></category> <category><![CDATA[جاوا]]></category> <category><![CDATA[نرم افزار آزاد و متن باز]]></category> <category><![CDATA[Apache Lucene]]></category> <category><![CDATA[جستجو]]></category> <category><![CDATA[خزنده وب]]></category><guid isPermaLink="false">http://zebardast.ir/?p=1865</guid> <description><![CDATA[سلام، — Apache Lucene حدود یک سال و نیم قبل در مطلبی به معرفی خزنده‌های وب (Web crawlers) و آموزش راه اندازی یک خزنده وب ساده به زبان جاوا پرداختم. در طول این مدت افراد بسیاری در مورد خزنده‌های وب با من تماس گرفتند و سوالات مختلفی در مورد این خزنده‌ها داشتند. در این مطلب [...] مطلب مرتبطی یافت نشد.]]></description> <content:encoded><![CDATA[<p>سلام،</p><div class="autocap alignleft" style="width: 300px;"><div><img src="http://zebardast.ir/wp-content/uploads/2012/03/Apache-Lucene.png" alt="" title="Apache Lucene" width="300" height="46" class=" size-full wp-image-1901" /><p class="autocap-text"><span class="hide">— </span>Apache Lucene</p></div></div><p>حدود یک سال و نیم قبل در مطلبی به <a href="http://zebardast.ir/%D8%AE%D8%B2%D9%86%D8%AF%D9%87-%D9%88%D8%A8-web-crawler/" title="خزنده وب (Web Crawler)">معرفی خزنده‌های وب (Web crawlers)</a> و آموزش راه اندازی یک خزنده وب ساده به زبان جاوا پرداختم. در طول این مدت افراد بسیاری در مورد خزنده‌های وب با من تماس گرفتند و سوالات مختلفی در مورد این خزنده‌ها داشتند. در این مطلب به معرفی و آموزش Apache Lucene که به منظور جستجو فایل‌های متین استفاده می شود، می پردازم. همچنین در آینده به بررسی ۳ محصول Hadoop, Apache Solr و Apache Nutch خواهم پرداخت.</p><h3>Apache Lucene</h3><p>آپاچی لوسن کتابخانه ای برای راه اندازی موتورهای جستجوی متن می باشد. این کتابخانه آزاد بوده و تحت لایسنس Apache Licene 2.0 منتشر می شود. این کتابخانه به زبان جاوا (Java) نوشته شده و سپس به زبان های Delphi, Perl, C#, C++, Python, Ruby, و PHP پیاده سازی (پورت) شده است.<br /> این کتابخانه این امکان را برای شما فراهم می آورد تا هر نوع موتور جستجوی متنی مانند موتور جستوی وب، لوکال (محلی) ویا فقط ویژه یک وب سایت را ایجاد نمایید. در نظر داشته باشید که Apache Lucene فقط برای جستجو استفاده می‌شود و برای جمع‌آوری اطلاعات و تحلیل آن‌ها نیاز به ابزارهای دیگری مانند Solr و Nutch دارید.<br /> برای دریافت این کتابخانه به <a href="https://lucene.apache.org/core/downloads.html" title="دانلود کتابخانه آپاچی لوسن" target="_blank">صفحه دانلود آپاچی لوسن</a> مراجعه نمایید. همچنین می توانید نسخه فعلی (۳.۶.۰) را از آدرس زیر دریافت نمایید:<br /> • <a href="http://apache.mirror.nexicom.net/lucene/java/3.6.0/lucene-3.6.0.zip" title="دانلود کتابخانه آپاچی لوسن نسخه ۳.۶.۰" target="_blank">دانلود کتابخانه آپاچی لوسن نسخه ۳.۶.۰</a></p><h3>استفاده از کتابخانه Apache Lucene</h3><p>در ادامه مراحل مختلف برای آماده‌سازی و انجام جستجو را بررسی کرده و در انتها سورس کامل این کلاس را مشاهده خواهید کرد.</p><h4>مرحله اول: ایندکس کردن اطلاعات</h4><p>قبل از هر چیز شما باید اطلاعاتی را که قصد جستجو در آن‌ها را دارید ایندکس نمایید. ایندکس کردن اطلاعات فواید زیادی دارد که یکی از مهم‌ترین آن‌ها مرتب‌سازی و افزایش سرعت جستجو است.<br /> ایندکس اطلاعات در لوسن توسط دو کلاس Document و Field صورت می پذیرد. Document سند شما و Field اطلاعات مرتبط با سند مانند عنوان، محتوا و&#8230;  است. این وظیفه شماست که اطلاعات خود از جمله رشته‌ها، انواع فایل‌ها، اطلاعات ذخیره شده در پایگاه داده و&#8230; را به کلاس Document تبدیل و ایندکس نمایید. در زیر تعامل Index, Document و Field را مشاهده می کنید:<br /><center></p><table class="ltr" cellpadding="5" bgcolor="lightblue"><tbody><tr><td align="left" colspan="2">&nbsp;Index&nbsp;</td></tr><tr><td><table cellpadding="10" bgcolor="lightgreen"><tbody><tr><td>Document 1</p><table cellpadding="5" bgcolor="yellow"><tbody><tr><td>Field A (name/value)</td></tr></tbody></table><p></p><table cellpadding="5" bgcolor="yellow"><tbody><tr><td>Field B (name/value)</td></tr></tbody></table></td></tr></tbody></table></td><td><table cellpadding="10" bgcolor="lightgreen"><tbody><tr><td>Document 2</p><table cellpadding="5" bgcolor="yellow"><tbody><tr><td>Field A (name/value)</td></tr></tbody></table><p></p><table cellpadding="5" bgcolor="yellow"><tbody><tr><td>Field B (name/value)</td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table><p></center></p><p>بعد از آماده سازی Document باید توسط کلاس IndexWriter، ایندکس را ذخیره می کنیم. پارامتر اول در فراخوانی IndexWriter دایکتوری ذخیره‌سازی ایندکس را مشاهده می‌کند.<br /> با کدهای زیر چند عبارت را در حافظه دسترسی تصادفی (RAM) ذخیره کردیم:</p><pre class="brush: java; title: ; notranslate">
Directory index = new RAMDirectory();
IndexWriterConfig config = new IndexWriterConfig(Version.LUCENE_36, analyzer);

IndexWriter w = new IndexWriter(index, config);
addDoc(w, &quot;Lucene in Action&quot;);
addDoc(w, &quot;Lucene for Dummies&quot;);
addDoc(w, &quot;Managing Gigabytes&quot;);
addDoc(w, &quot;The Art of Computer Science&quot;);
w.close();
</pre><p>متد addDoc رشته‌ها را به ایندکس اضافه می کند:</p><pre class="brush: java; title: ; notranslate">
private static void addDoc(IndexWriter w, String value) throws IOException {
    Document doc = new Document();
    doc.add(new Field(&quot;title&quot;, value, Field.Store.YES, Field.Index.ANALYZED));
    w.addDocument(doc);
  }
}
</pre><h4>مرحله دوم: ایجاد کوئری (Query)</h4><p>در این برنامه ما عبارت مورد نظر برای جستجو را از ورودی (stdin) دریافت می‌کنیم:</p><pre class="brush: java; title: ; notranslate">
String querystr = args.length &gt; 0 ? args[0] : &quot;lucene&quot;;
Query q = new QueryParser(Version.LUCENE_36, &quot;title&quot;, analyzer).parse(querystr);
</pre><h4>مرحله سوم: انجام جستجو</h4><p>در این مرحله کوئری (جستار؟) ساخته شده را بر روی ایندکس جستجو می کنیم. همچنین از کلاس TopScoreDocCollector برای بدست آوردن ۱۰ نتیجه مرتبط‌تر استفاده کرده ایم:</p><pre class="brush: java; title: ; notranslate">
int hitsPerPage = 10;
IndexReader reader = IndexReader.open(index);
IndexSearcher searcher = new IndexSearcher(reader);
TopScoreDocCollector collector = TopScoreDocCollector.create(hitsPerPage, true);
searcher.search(q, collector);
ScoreDoc[] hits = collector.topDocs().scoreDocs;
</pre><h4>مرحله چهارم: مشاهده نتایج</h4><p>در انتها نتایج بدست آمده را نمایش می‌دهیم:</p><pre class="brush: java; title: ; notranslate">
System.out.println(&quot;Found &quot; + hits.length + &quot; hits.&quot;);
for(int i=0;i&lt;hits.length;++i) {
    int docId = hits[i].doc;
    Document d = searcher.doc(docId);
    System.out.println((i + 1) + &quot;. &quot; + d.get(&quot;title&quot;));
}
</pre><p>همین!</p><h3>کلاس HelloLucene</h3><p>در زیر کلاس HelloLucene را یکجا مشاهده می فرمایید:</p><pre class="brush: java; title: ; notranslate">
import java.io.IOException;

import org.apache.lucene.analysis.standard.StandardAnalyzer;
import org.apache.lucene.document.Document;
import org.apache.lucene.document.Field;
import org.apache.lucene.index.IndexReader;
import org.apache.lucene.index.IndexWriter;
import org.apache.lucene.index.IndexWriterConfig;
import org.apache.lucene.queryParser.ParseException;
import org.apache.lucene.queryParser.QueryParser;
import org.apache.lucene.search.*;
import org.apache.lucene.store.Directory;
import org.apache.lucene.store.RAMDirectory;
import org.apache.lucene.util.Version;

public class HelloLucene {
    public static void main(String[] args) throws IOException, ParseException {
        // 0. Specify the analyzer for tokenizing text.
        //    The same analyzer should be used for indexing and searching
        StandardAnalyzer analyzer = new StandardAnalyzer(Version.LUCENE_36);

        // 1. create the index
        Directory index = new RAMDirectory();

        IndexWriterConfig config = new IndexWriterConfig(Version.LUCENE_36, analyzer);

        IndexWriter w = new IndexWriter(index, config);
        addDoc(w, &quot;Lucene in Action&quot;);
        addDoc(w, &quot;Lucene for Dummies&quot;);
        addDoc(w, &quot;Managing Gigabytes&quot;);
        addDoc(w, &quot;The Art of Computer Science&quot;);
        w.close();

        // 2. query
        String queryStr = args.length &gt; 0 ? args[0] : &quot;lucene&quot;;

        // the &quot;title&quot; arg specifies the default field to use
        // when no field is explicitly specified in the query.
        Query q = new QueryParser(Version.LUCENE_35, &quot;title&quot;, analyzer).parse(queryStr);

        // 3. search
        int hitsPerPage = 10;
        IndexReader reader = IndexReader.open(index);
        IndexSearcher searcher = new IndexSearcher(reader);
        TopScoreDocCollector collector = TopScoreDocCollector.create(hitsPerPage, true);
        searcher.search(q, collector);
        ScoreDoc[] hits = collector.topDocs().scoreDocs;

        // 4. display results
        System.out.println(&quot;Found &quot; + hits.length + &quot; hits.&quot;);
        for (int i = 0; i &lt; hits.length; ++i) {
            int docId = hits[i].doc;
            Document d = searcher.doc(docId);
            System.out.println((i + 1) + &quot;. &quot; + d.get(&quot;title&quot;));
        }

        // searcher can only be closed when there
        // is no need to access the documents any more.
        searcher.close();
    }

    private static void addDoc(IndexWriter w, String value) throws IOException {
        Document doc = new Document();
        doc.add(new Field(&quot;title&quot;, value, Field.Store.YES, Field.Index.ANALYZED));
        w.addDocument(doc);
    }
}
</pre><h3>منابع</h3><ul class="ltr"><li><a href="http://www.lucenetutorial.com/lucene-in-5-minutes.html" title="Lucene in 5 minutes" target="_blank">Lucene in 5 minutes</a></li><li><a href="www.javacodegeeks.com/2010/05/introduction-to-apache-lucene-for-full.html" title="An Introduction to Apache Lucene for Full-Text Search" target="_blank">An Introduction to Apache Lucene for Full-Text Search</a></li><li><a href="www.avajava.com/tutorials/lessons/how-do-i-use-lucene-to-index-and-search-text-files.html" title="How do I use Lucene to index and search text files?" target="_blank">How do I use Lucene to index and search text files?</a></li><li><a href="www.javacodegeeks.com/2010/05/did-you-mean-feature-lucene-spell.html" title=""Did you mean" feature with Apache Lucene Spell-Checker" target="_blank">&#8220;Did you mean&#8221; feature with Apache Lucene Spell-Checker</a></li><li><a href="http://oak.cs.ucla.edu/cs144/projects/lucene/index.html" title="A Short Introduction to Lucene" target="_blank">A Short Introduction to Lucene</a></li></ul><p>شاد و پیروز باشید <img src='http://zebardast.ir/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /></p><p><a class="a2a_button_google_plus" href="http://www.addtoany.com/add_to/google_plus?linkurl=http%3A%2F%2Fzebardast.ir%2F%25d9%2585%25d8%25b9%25d8%25b1%25d9%2581%25db%258c-%25d9%2588-%25d8%25a2%25d9%2585%25d9%2588%25d8%25b2%25d8%25b4-%25d9%25be%25db%258c%25d8%25a7%25d8%25af%25d9%2587%25e2%2580%258c%25d8%25b3%25d8%25a7%25d8%25b2%25db%258c-apache-lucene%2F&amp;linkname=%D9%85%D8%B9%D8%B1%D9%81%DB%8C%20%D9%88%20%D8%A2%D9%85%D9%88%D8%B2%D8%B4%20%D9%BE%DB%8C%D8%A7%D8%AF%D9%87%E2%80%8C%D8%B3%D8%A7%D8%B2%DB%8C%20Apache%20Lucene" title="Google+" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/google_plus.png" width="16" height="16" alt="Google+"/></a><a class="a2a_button_facebook" href="http://www.addtoany.com/add_to/facebook?linkurl=http%3A%2F%2Fzebardast.ir%2F%25d9%2585%25d8%25b9%25d8%25b1%25d9%2581%25db%258c-%25d9%2588-%25d8%25a2%25d9%2585%25d9%2588%25d8%25b2%25d8%25b4-%25d9%25be%25db%258c%25d8%25a7%25d8%25af%25d9%2587%25e2%2580%258c%25d8%25b3%25d8%25a7%25d8%25b2%25db%258c-apache-lucene%2F&amp;linkname=%D9%85%D8%B9%D8%B1%D9%81%DB%8C%20%D9%88%20%D8%A2%D9%85%D9%88%D8%B2%D8%B4%20%D9%BE%DB%8C%D8%A7%D8%AF%D9%87%E2%80%8C%D8%B3%D8%A7%D8%B2%DB%8C%20Apache%20Lucene" title="Facebook" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/facebook.png" width="16" height="16" alt="Facebook"/></a><a class="a2a_button_twitter" href="http://www.addtoany.com/add_to/twitter?linkurl=http%3A%2F%2Fzebardast.ir%2F%25d9%2585%25d8%25b9%25d8%25b1%25d9%2581%25db%258c-%25d9%2588-%25d8%25a2%25d9%2585%25d9%2588%25d8%25b2%25d8%25b4-%25d9%25be%25db%258c%25d8%25a7%25d8%25af%25d9%2587%25e2%2580%258c%25d8%25b3%25d8%25a7%25d8%25b2%25db%258c-apache-lucene%2F&amp;linkname=%D9%85%D8%B9%D8%B1%D9%81%DB%8C%20%D9%88%20%D8%A2%D9%85%D9%88%D8%B2%D8%B4%20%D9%BE%DB%8C%D8%A7%D8%AF%D9%87%E2%80%8C%D8%B3%D8%A7%D8%B2%DB%8C%20Apache%20Lucene" title="Twitter" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/twitter.png" width="16" height="16" alt="Twitter"/></a><a class="a2a_button_identi_ca" href="http://www.addtoany.com/add_to/identi_ca?linkurl=http%3A%2F%2Fzebardast.ir%2F%25d9%2585%25d8%25b9%25d8%25b1%25d9%2581%25db%258c-%25d9%2588-%25d8%25a2%25d9%2585%25d9%2588%25d8%25b2%25d8%25b4-%25d9%25be%25db%258c%25d8%25a7%25d8%25af%25d9%2587%25e2%2580%258c%25d8%25b3%25d8%25a7%25d8%25b2%25db%258c-apache-lucene%2F&amp;linkname=%D9%85%D8%B9%D8%B1%D9%81%DB%8C%20%D9%88%20%D8%A2%D9%85%D9%88%D8%B2%D8%B4%20%D9%BE%DB%8C%D8%A7%D8%AF%D9%87%E2%80%8C%D8%B3%D8%A7%D8%B2%DB%8C%20Apache%20Lucene" title="Identi.ca" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/identica.png" width="16" height="16" alt="Identi.ca"/></a><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fzebardast.ir%2F%25d9%2585%25d8%25b9%25d8%25b1%25d9%2581%25db%258c-%25d9%2588-%25d8%25a2%25d9%2585%25d9%2588%25d8%25b2%25d8%25b4-%25d9%25be%25db%258c%25d8%25a7%25d8%25af%25d9%2587%25e2%2580%258c%25d8%25b3%25d8%25a7%25d8%25b2%25db%258c-apache-lucene%2F&amp;title=%D9%85%D8%B9%D8%B1%D9%81%DB%8C%20%D9%88%20%D8%A2%D9%85%D9%88%D8%B2%D8%B4%20%D9%BE%DB%8C%D8%A7%D8%AF%D9%87%E2%80%8C%D8%B3%D8%A7%D8%B2%DB%8C%20Apache%20Lucene" id="wpa2a_2">اشتراک‌گذاری</a></p><p>مطلب مرتبطی یافت نشد.</p>]]></content:encoded> <wfw:commentRss>http://zebardast.ir/%d9%85%d8%b9%d8%b1%d9%81%db%8c-%d9%88-%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%be%db%8c%d8%a7%d8%af%d9%87%e2%80%8c%d8%b3%d8%a7%d8%b2%db%8c-apache-lucene/feed/</wfw:commentRss> <slash:comments>6</slash:comments> </item> <item><title>راهنمای سریع جاوا اسکریپت</title><link>http://zebardast.ir/%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-%d8%b3%d8%b1%db%8c%d8%b9-%d8%ac%d8%a7%d9%88%d8%a7-%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa/</link> <comments>http://zebardast.ir/%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-%d8%b3%d8%b1%db%8c%d8%b9-%d8%ac%d8%a7%d9%88%d8%a7-%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa/#comments</comments> <pubDate>Thu, 19 Jan 2012 14:15:56 +0000</pubDate> <dc:creator>سعید زبردست</dc:creator> <category><![CDATA[جاوا اسکریپت]]></category> <category><![CDATA[آموزش سریع]]></category> <category><![CDATA[برنامه نویسی]]></category> <category><![CDATA[راهنما]]></category><guid isPermaLink="false">http://zebardast.ir/?p=1700</guid> <description><![CDATA[— JavaScript سلام، امروزه با توجه به استفاده گسترده از زبان جاوا اسکریپت (JavaScript)، دانستن آن برای هر توسعه دهنده وبی لازم است. این مقاله در یک نگاه و به طور خلاصه زبان جاوا اسکریپت و مفاهیم وی را معرفی کرده و در ادامه نحوه نگارش (Syntax) کدهای آن را آموزش می دهد. همچنین برای [...] <strong>مطالب مرتبط:</strong><ol><li><a href='http://zebardast.ir/%d8%ad%d8%b0%d9%81-%da%a9%d9%88%da%a9%db%8c-%d8%af%d8%b1-%d8%ac%d8%a7%d9%88%d8%a7-%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa/' rel='bookmark' title='حذف کوکی در جاوا اسکریپت'>حذف کوکی در جاوا اسکریپت</a></li><li><a href='http://zebardast.ir/%d9%85%d9%82%d8%af%d9%85%d9%87-%d8%a7%db%8c-%d8%a8%d8%b1%d8%a7%db%8c-%d8%ac%d8%a7%d9%88%d8%a7-%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa/' rel='bookmark' title='مقدمه ای برای جاوا اسکریپت'>مقدمه ای برای جاوا اسکریپت</a></li><li><a href='http://zebardast.ir/querystring-%d8%af%d8%b1-%d8%ac%d8%a7%d9%88%d8%a7-%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa/' rel='bookmark' title='QueryString در جاوا اسکریپت'>QueryString در جاوا اسکریپت</a></li></ol>]]></description> <content:encoded><![CDATA[<div class="autocap alignleft" style="width: 200px;"><div><img src="http://zebardast.ir/wp-content/uploads/2012/01/JavaScript.jpg" alt="" title="JavaScript" width="200" class=" size-full wp-image-1826" /><p class="autocap-text"><span class="hide">— </span>JavaScript</p></div></div><p>سلام،</p><p>امروزه با توجه به استفاده گسترده از زبان جاوا اسکریپت (<a href="http://en.wikipedia.org/wiki/JavaScript" title="JavaScript" target="_blank">JavaScript</a>)، دانستن آن برای هر توسعه دهنده وبی لازم است. این مقاله در یک نگاه و به طور خلاصه زبان جاوا اسکریپت و مفاهیم وی را معرفی کرده و در ادامه نحوه نگارش (Syntax) کدهای آن را آموزش می دهد. همچنین برای درک بیشتر دستورات جاوا اسکریپت نمونه کدهایی در بین بخش‌های مختلف ارائه شده است.</p><h3>مقدمه</h3><p>جاوااسکریپت زبانی است که توسط NetScape تولید شده است. هدف از این زبان پویانمایی اشیا داخل صفحات HTML می باشد. <a href="/tag/%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA/" title="جاوا اسکریپت" target="_blank">جاوا اسکریپت</a> کاملا با <a href="/tag/جاوا/" title="جاوا" target="_blank">زبان برنامه نویسی جاوا</a> فرق دارد. اگر چه ساختار این زبان به سی پلاس پلاس و جاوا شباهت دارد؛ که این امر برای سهولت یادگیری در نظر گرفته شده است. از همینرو دستورهای متداول مانند if, for, try..catch و &#8230; در این زبان هم یافت می‌گردند.<br /> کاربرد گسترده این زبان در سایتها و صفحات اینترنی می‌باشد و به کمک این زبان می‌توان به اشیاء داخل صفحات HTML دسترسی پیدا کرد و آنها را تغییر داد. به همین علت برای پویا نمایی در سمت کاربر، از این زبان استفاده می‌شود.</p><h3>نحوه نگارش مستقیم کدهای جاوا اسکریپت در HTML</h3><p>کدهای جاوا اسکریپت در صفحات HTML داخل تگ script قرار می گیرند. از خصیصه type برای مشخص کردن زبان اسکریپت نوشه شده استفاه می شود. <code>&lt;script type=&quot;text/javascript&quot;&gt;</code> محل شروع کدهای جاوا اسکرپیت و <code>&lt;/script&gt;</code> محل پایان کدهای جاوا اسکریپت را مشخص می کنند. مانند:</p><pre class="brush: xml; title: ; notranslate">
&lt;html&gt;
&lt;body&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
document.write(&quot;Hello World!&quot;);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre><p>خروجی کد بالا نوشته‌ی !Hello World می باشد.</p><h3>اسکریپت خارجی</h3><p>گاهی اوقات شما نیاز به اجرای یک کد جاوا اسکریپت در صفحات مختلف (بدون نگارش در تک تک صفحات) دارید. و یا کد شما بسیار طولانی است و هنگام کد نویسی در صفحه html شما را دچار مشکل می کند. در این صورت با استفاده از اسکریپت خارجی مشکل شما حل می شود. برای نگارش اسکریپت خارجی ابتدا یک فایل با فرمت js. ایجاد کنید. می توانید پسوند یک فایل txt را به js. تغییر دهید. سپس این فایل را توسط یک ویرایشگر متن مانند Notepad باز کنید. کدهای جاوا اسکریپت خود را بدون تگ <code>&lt;script&gt;</code> در آن قرار دهید و سپس فایل را ذخیره کنید (با پسوند js.)<br /> برای فراخوانی اسکریپت خارجی از خصیصه src تگ <code>&lt;script&gt;</code> استفاده کنید. مانند زیر که xxx.js آدرس فایل جاوا اسکریپت است:</p><pre class="brush: xml; title: ; notranslate">&lt;html&gt;
&lt;head&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
&lt;script src=&quot;xxx.js&quot;&gt;&lt;/script&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre><h3>سمی‌کالن <code>(;)</code>، فضاهای سفید و حساس به حروف (Case Sensitive)</h3><p>در جاوا اسکریپت دستورات اجرایی با سمی‌کالن (Semicolon) یا همان ; از هم جدا می شوند. با وجود اینکه استفاده از سمی‌کولن، در صورتی که دستورات در خطوط جداگانه نوشته شده باشند، اختیاریست، نوشتن آن بسیار توصیه می شود. بد نیست مطلب «<a href="http://zebardast.ir/معاهده%E2%80%8Cهای-کد-نویسی-coding-conventions/" title="معاهده‌های کدنویسی" target="_blank">معاهده‌های کدنویسی</a>» را مطالعه کنید.<br /> فضاها سفید در جاوا اسکرپیت مانند اغلب زبان‌های برنامه نویسی هنگام اجرا در نظر گرفته نمی شوند. مگر اینکه مقدار یک متغیر رشته ای (String) باشند.<br /> زبان جاوا اسکریپت به کوچکی و بزرگی حروف حساس می باشد. به عنوان مثال bgColor با bgcolor برای نیست.</p><h3>توضیحات (Comments)</h3><p>توضیحات می توانند به صورت تک خطی و یا چند خطی باشند. مانند:</p><pre class="brush: jscript; title: ; notranslate">
// این یک توضیح یک خطی است!

/*
این یک توضیح
چند خطی است.
*/
</pre><h3>متغیرها (Variables)</h3><p>برای تعریف متغیر کافیست نام دلخواه خود را بنویسید. استفاده از کلمه var قبل از نام متغیر اختیاری است، مگر در موارد زیر:</p><ul><li> زمانی که نام یک متغیر محلی در داخل یک تابع با نام یک متغیر سراسری (Global) یکی باشد، متغیر محلی باید با var تعریف شود. در این مواقع شما در داخل تابع خود دسترسی به متغیر سراسری ندارید. هم چنین متغیرهای محلی فقط در داخل خود تابع قابل دستیابی می باشند.</li><li> در توابع بازگشتی استفاده از var الزامیست.</li></ul><h4>نمونه تعریف متغیر در جاوا اسکریپت</h4><pre class="brush: jscript; title: ; notranslate">
x = 42
var x = 42
</pre><h3>انواع داده‌ها در جاوا اسکریپت</h3><p>شما می تواند داده‌هایی از نوع زیر را در جاوا اسکریپ تعریف کنید:</p><ul><li> شی (Object)</li><li> تابع (Function)</li><li> رشته (String)</li><li> عدد (Number)</li><li> نوع داده منطقی (Boolean)</li></ul><p>در صورتی که متغییری تعریف نشده باشد، نوع آن متغیر undefined است. برای دستیابی به نوع یک متغیر می توانید از تابع typeof استفاده کنید. در زیر نمونه تعریف متغیرها و استفاده از تابع typeof را مشاهده می کنید:</p><pre class="brush: jscript; title: ; notranslate">
var aDate = new Date()
var aPowerFunc = new Function(&quot;x&quot;, &quot;return x * x&quot;)
var aString = &quot;I am a string&quot;
var aNumber = 42
var aBoolean = true

alert(typeof aPowerFunc); // typeof aPowerFunc is object
alert(typeof aDate); // typeof aDate is object
alert(typeof aString); // typeof aString is string
alert(typeof aNumber); // typeof aNumber is number
alert(typeof aBoolean); // typeof aBoolean is boolean
alert(typeof nonExistVar); // typeof nonExistVar is undefined
alert(typeof Date); // typeof Date is function. predefined object Date
</pre><h3>آرایه ها (Arrays)</h3><p>روش‌های مختلفی برای تعریف آرایه در جاوا اسکریپت وجود دارد. در زیر نمونه‌هایی از تعریف آرایه‌ها ارائه شده است:</p><pre class="brush: jscript; title: ; notranslate">
beans = [&quot;Java beans&quot;,&quot;Coffee beans&quot;,&quot;Cacao beans&quot;];
myCars = new Array(&quot;Jaguar&quot;, &quot;Mercedes&quot;, &quot;Rolls Royce&quot;);
noOfEntries = myCars.length; // طول آرایه
myCD = new Array(42) // تعریف آرایه ای به نام myCD با 42 عضو
myCD[0] = &quot;Queen&quot; //اولین عنصر آرایه
myCD[1] = &quot;Carlos Santana&quot;
myCD[2] = &quot;Mozart&quot;
myCD[3] = &quot;Chopin&quot;
...
myCD[41] = &quot;Shubidua&quot; //آخرین عنصر آرایه
// تعریف آرایه با کلیدهای مشخص - Associative Array ویا همان Property Maps
assoarr = {color1: &quot;green&quot;, color2: &quot;yellow&quot;, color3: &quot;white&quot;};
</pre><h3>اشیا (Objects)</h3><p>تعریف یک شی مانند تعریف یک تابع می باشد. مانند:</p><pre class="brush: jscript; title: ; notranslate">
function objDef(name) {
this.objvar = name
}
// creation of an instance of the above defined object &quot;class&quot; myObj = new objDef(&quot;Saeid&quot;)
</pre><h3>متدها و خصوصیات (Methods, Properties)</h3><p>متد همان تابع تعریف شده در یک شی و خصیصه، مقادیر متغیرهای آن می‌باشد. مانند:</p><pre class="brush: jscript; title: ; notranslate">
//Property
//objectName.propertyName = value
//Method
//objectName.methodName = function

function calcArea(radius) {
return(radius * radius * Math.PI);
}

function circle(color, radius) {
this.fillColor = color;
this.area = calcArea(radius);
}

var myCircle = new circle('green', 2);
alert(myCircle.fillColor);
alert(myCircle.area);
</pre><h3>عملگرها در جاوا اسکریپت</h3><p>در زیر عملگرها بر اساس نوع عملیات و داده مورد استفاده دسته‌بندی شده‌اند.</p><table cellspacing="0" cellpadding="0" class="info"><caption>انواع عملگرها برای اعداد</caption><thead><tr><th width='100'>عملگر</th><th>توضیحات</th></tr></thead><tbody><tr><td class="ltr">+</td><td>جمع</td></tr><tr><td class="ltr">-</td><td>تفریق</td></tr><tr><td class="ltr">++</td><td>افزایش مقدار متغییر به اندازه یک واحد</td></tr><tr><td class="ltr">&#8211;</td><td>کاهش مقدار متغییر به اندازه یک واحد</td></tr><tr><td class="ltr">*</td><td>ضرب</td></tr><tr><td class="ltr">/</td><td>تقسیم</td></tr><tr><td class="ltr">%</td><td>باقیمانده</td></tr></tbody></table><table cellspacing="0" cellpadding="0" class="info"><caption>انواع عملگرها برای رشته‌ها</caption><thead><tr><th width='100'>عملگر</th><th>توضیحات</th></tr></thead><tbody><tr><td class="ltr">+</td><td>الحاق دو یا چند رشته</td></tr><tr><td class="ltr">+=</td><td>الحاق محتوای یک رشته با یک یا چند رشته و اختصاص دادن مقدار به رشته اول</td></tr></tbody></table><table cellspacing="0" cellpadding="0" class="info"><caption>انواع عملگرهای منظقی</caption><thead><tr><th width='100'>عملگر</th><th>توضیحات</th></tr></thead><tbody><tr><td class="ltr">&#038;&#038;</td><td>و (AND)</td></tr><tr><td class="ltr">||</td><td>یا (OR)</td></tr><tr><td class="ltr">!</td><td>خِلاف (NOT)</td></tr><tr><td class="ltr">==</td><td>مساوی با (equal)</td></tr><tr><td class="ltr">!=</td><td>نامساوی با (not equal)</td></tr><tr><td class="ltr">===</td><td>دقیقا مساوی با (از نظر مقدار و نوع داده)</td></tr><tr><td class="ltr">!==</td><td>نامساوی با (از نظر ارزش) <strong>ویا</strong> نامساوی (از نظر نوع)</td></tr><tr><td class="ltr">&gt;</td><td>بزرگتر از</td></tr><tr><td class="ltr">&gt;=</td><td>بزرگتر از ویا مساوی با (بزرگترمساوی)</td></tr><tr><td class="ltr">&lt;</td><td>کوچکتر</td></tr><tr><td class="ltr">&lt;=</td><td>کوچکتر از ویا مساوی با (کوچکتر مساوی)</td></tr></tbody></table><table cellspacing="0" cellpadding="0" class="info"><caption>انواع عملگرها برای تخصیص</caption><thead><tr><th width='100'>عملگر</th><th>توضیحات</th></tr></thead><tbody><tr><td class="ltr">=</td><td>اختصاص دادن یک مقدار به متغیر</td></tr><tr><td class="ltr">+=</td><td>الحاق محتوای متغیر سمت چپ عملگر با یک متغیر و اختصاص دادن مقدار به متغیر سمت چپ</td></tr><tr><td class="ltr">-=</td><td>تفریق یک متغیر از متغیر سمت چپ عملگر و اختصاص دادن مقدار بدست آمده به متغیر سمت چپ</td></tr><tr><td class="ltr">*=</td><td>ضرب یک متغیر در متغیر سمت چپ عملگر و اختصاص دادن مقدار بدست آمده به متغیر سمت چپ</td></tr><tr><td class="ltr">/=</td><td>تقسیم متغیر سمت چپ عملگر و اختصاص دادن مقدار بدست آمده به متغیر سمت چپ</td></tr><tr><td class="ltr">%=</td><td>تقسیم متغیر سمت چپ عملگر و اختصاص دادن باقیمانده تقسیم به متغیر سمت چپ</td></tr></tbody></table><table cellspacing="0" cellpadding="0" class="info"><caption>سایر عملگرها</caption><thead><tr><th width='100'>عملگر</th><th>توضیحات</th></tr></thead><tbody><tr><td class="ltr">new</td><td>ایجاد یک شی</td></tr><tr><td class="ltr">delete</td><td>حذف یک شی</td></tr><tr><td class="ltr">this</td><td>اشاره به شی جاری</td></tr><tr><td class="ltr">typeof</td><td>دستیابی به نوع متغیر عملوند</td></tr><tr><td class="ltr">void</td><td>ارزیابی یک عبارت بودن بازیابی مقدار آن</td></tr></tbody></table><h3>عبارت‌های شرطی (Conditional Statements)</h3><p>در زیر نحوه نگارش عبارت‌های شرطی با if و switch ارائه شده است.</p><h4>عبارت شرطی با if</h4><pre class="brush: jscript; title: ; notranslate">
// if ساده
if (condition) {
 statements
}

// if همراه با else
if (condition) { statements
} else {
statements
}

// if خلاصه یک خطی
condition ?  expr1 :  expr2
</pre><h4>عبارت شرطی با switch</h4><pre class="brush: jscript; title: ; notranslate">
switch (expression){ case label:
statement;
  break;
 case label2:
statement;
  break;
 default :  statement;
}
</pre><h3>حلقه ها (Loops)</h3><p>در جاوا اسکریپت امکان نوشتن حلقه ها به چهار صورت امکان پذیر است.</p><h4>حلقه for</h4><pre class="brush: jscript; title: ; notranslate">
for(var i=0; i &lt; array.length; i++){
 ...
}
</pre><h4>حلقه do &#8230; while</h4><pre class="brush: jscript; title: ; notranslate">
var i=0; do {
i+=1;
} while (i &lt; 5)
</pre><h4>حلقه while</h4><pre class="brush: jscript; title: ; notranslate">
n=8
while( n &gt; 0) {
n--
}
</pre><h4>حلقه while</h4><p>این حلقه بر روی خصوصیات یک شی اعمالی را انجام می دهد:</p><pre class="brush: jscript; title: ; notranslate">
student1 = new Student(&quot;Hans Christian&quot;, &quot;Andersen&quot;, 1805); for (props in student1) {
  document.write(student1.props)
}
</pre><h4>دستور break و continue</h4><p>مانند سایر زبان‌های برنامه‌نویسی دستور break حلقه را قطع کرده و برنامه را به بعد از حلقه منتقل می‌کند. دستور continue نیز مانند break حلقه جاری را قطع می‌کند و در ادامه دور بعدی حلقه را اجرا می کند. مانند:</p><pre class="brush: jscript; title: ; notranslate">
while(i &gt; 0){ if(a[i]==&quot;Orange&quot;)
break; i--;
}
while(i &gt; 0){
 if(a[i]!=&quot;Orange&quot;)
  continue;
oranges++;
}
</pre><h3>معرفی بعضی از اشیا موجود در جاوا اسکریپت</h3><p>مهمترین آبجکت‌های جاوا اسکریپت عبارتند از:</p><pre class="brush: jscript; title: ; notranslate">
Date
Array
Boolean
Function
Math
Number
RegExp
String
</pre><p>در ادامه تعدادی از این اشیا بررسی شده اند.</p><h4>شی Date</h4><table cellspacing="0" cellpadding="0" class="info"><caption>برخی از متدهای شی Date</caption><thead><tr><th width='100'>متد</th><th>توضیحات</th></tr></thead><tbody><tr><td class="ltr"><code>getDate()</code></td><td>بازیابی روز ماه جاری (۱-۳۱)</td></tr><tr><td class="ltr"><code>getDay()</code></td><td>بازیابی شماره روز هفته جاری (۰-۶)</td></tr><tr><td class="ltr"><code>getYear()</code></td><td>سال جاری دو رقمی بین ۰ تا ۹۹ برای سالهای قبل از ۱۹۹۹ و چهار رقمی برای سال‌های بعد از آن</td></tr><tr><td class="ltr"><code>getFullYear()</code></td><td>سال جاری چهار رقمی</td></tr><tr><td class="ltr"><code>getHours()</code></td><td>ساعت (۰-۲۳)</td></tr><tr><td class="ltr"><code>getMonth()</code></td><td>ماه (۰-۱۱) &#8211; این شماره از ماه جاری یک ماه کمتر است.</td></tr><tr><td class="ltr"><code>getSeconds()</code></td><td>ثانیه جاری (۰-۵۹)</td></tr><tr><td class="ltr"><code>getTime()</code></td><td>تعداد میلی‌ثانی‌های گذشته از تاریخ ۱ ژانویه ۱۹۷۰</td></tr><tr><td class="ltr"><code>setDate(),<br /> setHours(),<br /> . . .</code></td><td>مقداردهی به تاریخ و زمان مورد نظر</td></tr><tr><td class="ltr"><code>parse()</code></td><td>دستیابی به زمان طی شده از ۱ ژانویه ۱۹۷۰ تا زمان مورد نظر در واحد میلی‌ثانیه</td></tr><tr><td class="ltr"><code>toString()</code></td><td>تبدیل تاریخ به رشته</td></tr></tbody></table><p>برای استفاده از شی Date می توانید مانند زیر عمل کنید:</p><pre class="brush: jscript; title: ; notranslate">
now = new Date // تاریخ جاری
nowDay = now.getDay() // (0-6)
nowHour = now.getHour() // (0-23)
</pre><h4>شی Boolean</h4><p>استفاده از شی Boolean بسیار ساده می باشد. در زیر نمونه تعریف آن آمده است:</p><pre class="brush: jscript; title: ; notranslate">
x = true; // مقدار منطقی true
y = false; // مقدار منطقی false
z = new Boolean(false); // مقدار این شی false است.
z2 = new Boolean(&quot;false&quot;); // مقدار ای شی true است! دقت کنید که هر رشته ای که به شی Boolean پاس شود مقدار ای شی را true می کند.
z3 = new Boolean(true); // مقدار این شی true است.
</pre><h4>شی Math</h4><p>همانطور که از اسم این شی مشخص است، کاربرد آن بیشتر در محاسبات و عبارت‌های ریاضی است.</p><table cellspacing="0" cellpadding="0" class="info"><caption>برخی از متدهای شی Math</caption><thead><tr><th width='100'>متد یا عبارت</th><th>توضیحات</th></tr></thead><tbody><tr><td class="ltr"><code>abs</code></td><td>قدرمطلق</td></tr><tr><td class="ltr"> <code>sin, cos, tan</code><br /> <code>acos, asin, atan</code></td><td>توابع مثلثاتی</td></tr><tr><td class="ltr"><code>min, max</code></td><td>بدست آورن کمترین و بیشترین مقدار</td></tr><tr><td class="ltr"><code>round</code></td><td>گردکردن مقدار</td></tr><tr><td class="ltr"><code>sqrt</code></td><td>بدست آوردن جذر یک عدد</td></tr><tr><td class="ltr"><code>pow</code></td><td>توان. اولین مقدار، پایه توان و دومین مقدار نمای آن می باشد. به عنوان مثال <code>Math.pow(x,y)</code> برابر است با <code>x<sup>y</sup></code></td></tr><tr><td class="ltr"><code>random</code></td><td>ایجاد یک عدد رندوم بین صفر و یک.</td></tr><tr><td class="ltr"><code>Math.E</code></td><td>مقدار ثابت عدد e (فرمول اولر یا اویلر) حدود ۲,۷۱۸</td></tr><tr><td class="ltr"><code>Math.PI</code></td><td>مقدار ثابت عدد پی. حدود ۳,۱۴۱۵۹</td></tr></tbody></table><p>نمونه استفاده از آبجکت Math:</p><pre class="brush: jscript; title: ; notranslate">
a = Math.PI * r*r; with(Math){
a = PI * r*r;
x = sin(y);
}
</pre><h4>شی String</h4><table cellspacing="0" cellpadding="0" class="info"><caption>برخی از متدهای شی String</caption><thead><tr><th width='100'>متد</th><th>توضیحات</th></tr></thead><tbody><tr><td class="ltr"><code>bold</code></td><td>مانند تگ &lt;bold&gt; رشته را درشت‌تر می‌کند.</td></tr><tr><td class="ltr"><code>italics</code></td><td>مانند تگ &lt;i&gt; عمل می کند.</td></tr><tr><td class="ltr"><code>concat</code></td><td>الحاق ۲ یا چند رشته</td></tr><tr><td class="ltr"><code>charAt</code></td><td>دستیابی به کاراکتر از طریق ایندکس (اندیس) آن در رشته</td></tr><tr><td class="ltr"><code>fontcolor</code></td><td>مانند تگ &lt;font&gt; به صورت &lt;font color=color&gt; عمل می‌کند.</td></tr><tr><td class="ltr"><code>fontsize</code></td><td>مانند تگ &lt;font&gt; به صورت &lt;font size=size&gt; عمل می‌کند.</td></tr><tr><td class="ltr"><code>indexOf</code></td><td>پیدا کردن اولین محل یافت شده از یک رشته در رشته دیگر. در صورتی که این جستجو نتیجه‌ای در بر نداشته باشد، مقدار <code>-۱</code> بازگردانده خواهد شد.</td></tr><tr><td class="ltr"><code>lastIndexOf</code></td><td>مانند indexOf با این تفاوت که آخرین محل یافت شده در جستجو را نشان می‌دهد.</td></tr><tr><td class="ltr"><code>length</code></td><td>طول رشته را نشان می‌دهد.</td></tr><tr><td class="ltr"><code>link</code></td><td>برای ایجاد لینک مانند تگ &lt;a&gt;</td></tr><tr><td class="ltr"><code>big</code></td><td>مانند تگ &lt;big&gt;</td></tr><tr><td class="ltr"><code>small</code></td><td>مانند تگ &lt;small&gt;</td></tr><tr><td class="ltr"><code>strike</code></td><td>مانند تگ &lt;strike&gt;</td></tr><tr><td class="ltr"><code>sub</code></td><td>مانند تگ &lt;sub&gt;</td></tr><tr><td class="ltr"><code>substring</code></td><td>دستیابی به یک زیررشته از رشته مورد نظر.</td></tr><tr><td class="ltr"><code>toLowerCase</code></td><td>تبدیل رشته به حروف کوچک</td></tr><tr><td class="ltr"><code>toUpperCase</code></td><td>تبدیل رشته به حروف بزرگ</td></tr><tr><td class="ltr"><code>replace</code></td><td>برای جایگزینه یک رشته در رشته دیگر کاربرد دارد.</td></tr><tr><td class="ltr"><code>split</code></td><td>برای جداکردن رشته بر اساس یک الگو (جداکننده) کاربرد دارد.</td></tr></tbody></table><p>مثال‌هایی از استفاده شی String و متدهای آن در زیر ارائه شده است:</p><pre class="brush: jscript; title: ; notranslate">
var message = &quot;Simple String&quot;;
message[0]; // مقدار &quot;S&quot; باز می‌گرداند.
document.write(message.bold()); // محتوای متغییر را به صورت درشت چاپ می‌کند.
message.charAt(0); // همان message[0] می‌باشد.
message.concat(&quot; enhanced&quot;); // مقدار &quot;Simple String enhanced&quot; را باز می‌گرداند.
message.length; // طول عبارت که همان عدد ۱۳ می باشد را باز می‌گرداند
message.indexOf(&quot;Simple&quot;); // عدد ۰ را باز می‌گرداند.
message.lastIndexOf(&quot;String&quot;); // عدد ۷ را باز می‌گرداند.
message.substring(2,5); // رشته &quot;mple&quot; را باز می‌گرداند.
document.write(message.replace(&quot;Simple&quot;, &quot;Complex&quot;)); // مقدار &quot;Complex String&quot; را باز می‌گرداند.
</pre><h3>رویدادها (Events)</h3><p>منظور از رویداد، انتفاقی است که در سمت کاربر و براساس فعالیت‌های آن رخ می‌دهد. در زیر تعدادی از رویدادها مهم ارائه شده‌اند. دقت نمایید که فراخوانی آن‌ها در تگ‌های خاصی امکان پذیر است. به عنوان مثال رویداد onSubmit در تگ &lt;form&gt; فراخوانده می‌شود.</p><table cellspacing="0" cellpadding="0" class="info"><caption>تعدادی از رویدادهای مهم در جاوا اسکریپت</caption><thead><tr><th width='100'>رویداد</th><th>زمان رخ دادن و فراخوانی</th></tr></thead><tbody><tr><td class="ltr"><code>onSubmit</code></td><td>هنگام ثبت شدن فرم</td></tr><tr><td class="ltr"><code>onReset</code></td><td>هنگام زدن دکمه reset فرم</td></tr><tr><td class="ltr"><code>onChange</code></td><td>هنگام تغییر یک مقدار</td></tr><tr><td class="ltr"><code>onSelect</code></td><td>هنگام انتخاب یک متن در تگ &lt;input&gt; یا &lt;textarea&gt;</td></tr><tr><td class="ltr"><code>onBlur</code></td><td>هنگام خارج شدن از فوکوس یک فیلد</td></tr><tr><td class="ltr"><code>onFocus</code></td><td>هنگام فوکوس (انتخاب) یک فیلد</td></tr><tr><td class="ltr"><code>onKeydown</code></td><td>هنگام فشردن یک کلید به پایین</td></tr><tr><td class="ltr"><code>onKeyup</code></td><td>بعد از فشردن و رها کردن یک کلید</td></tr><tr><td class="ltr"><code>onKeypress</code></td><td>هنگام فشردن یک کلید (مجموع onKeydown و onKeyup)</td></tr><tr><td class="ltr"><code>onMouseover</code></td><td>زمانی که نشانگر ماوس بر روی منطقه تگ مورد نظر می رود.</td></tr><tr><td class="ltr"><code>onMouseout</code></td><td>هنگامی که نشانگر ماوس از منطقه تگ مورد نظر خارج می شود.</td></tr><tr><td class="ltr"><code>onMousemove</code></td><td>هنگام حرکت دادن نشانگر ماوس در یک منطقه</td></tr><tr><td class="ltr"><code>onClick</code></td><td>هنگام کلیک کردن</td></tr><tr><td class="ltr"><code>onDblclick</code></td><td>هنگام دابل کلیک کردن</td></tr><tr><td class="ltr"><code>onLoad</code></td><td>هنگام بارگزاری صفحه</td></tr><tr><td class="ltr"><code>onUnload</code></td><td>هنگام بستن صفحه مورد نظر</td></tr><tr><td class="ltr"><code>onResize</code></td><td>هنگام تغییر دادن سایز صفحه (پنچره) مورد نظر</td></tr><tr><td class="ltr"><code>onError</code></td><td>هنگام رخ دادن یک خطا جاوا اسکریپتی</td></tr></tbody></table><h3>پی‌نوشت</h3><p>همانطور که در ابتدای مقاله گفته شد این مقاله فقط به طور کلی جاوا اسکریپت و دستورات آن را معرفی کرده است. در صورتی که علاقمند به آشنایی بیشتر و دقیق‌تر این زبان هستید، می توانید به منابع معرفی شده در انتهای همین مطلب مراجعه نمایید.</p><h3>منابع</h3><ul><li><a href="http://fa.wikipedia.org/wiki/%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA" title="جاوا اسکریپت" target="_blank">جاوا اسکریپت</a> (ویکی پدیای فارسی)</li><li class='ltr'><a href="http://www.w3schools.com/jsref/default.asp" title="JavaScript and HTML DOM Reference" target="_blank">JavaScript and HTML DOM Reference</a></li><li class='ltr'><a href="http://javascript.infogami.com/Javascript_in_Ten_Minutes" title="Javascript in Ten Minutes" target="_blank">Javascript in Ten Minutes</a></li><li class='ltr'><a href="http://sage.math.washington.edu/home/agc/lit/javascript/javascriptcheatsheet.pdf" title="JavaScript cheat sheet" target="_blank">JavaScript cheat sheet</a></li></ul><p>شاد و پیروز باشید <img src='http://zebardast.ir/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /></p><p><a class="a2a_button_google_plus" href="http://www.addtoany.com/add_to/google_plus?linkurl=http%3A%2F%2Fzebardast.ir%2F%25d8%25b1%25d8%25a7%25d9%2587%25d9%2586%25d9%2585%25d8%25a7%25db%258c-%25d8%25b3%25d8%25b1%25db%258c%25d8%25b9-%25d8%25ac%25d8%25a7%25d9%2588%25d8%25a7-%25d8%25a7%25d8%25b3%25da%25a9%25d8%25b1%25db%258c%25d9%25be%25d8%25aa%2F&amp;linkname=%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C%20%D8%B3%D8%B1%DB%8C%D8%B9%20%D8%AC%D8%A7%D9%88%D8%A7%20%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA" title="Google+" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/google_plus.png" width="16" height="16" alt="Google+"/></a><a class="a2a_button_facebook" href="http://www.addtoany.com/add_to/facebook?linkurl=http%3A%2F%2Fzebardast.ir%2F%25d8%25b1%25d8%25a7%25d9%2587%25d9%2586%25d9%2585%25d8%25a7%25db%258c-%25d8%25b3%25d8%25b1%25db%258c%25d8%25b9-%25d8%25ac%25d8%25a7%25d9%2588%25d8%25a7-%25d8%25a7%25d8%25b3%25da%25a9%25d8%25b1%25db%258c%25d9%25be%25d8%25aa%2F&amp;linkname=%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C%20%D8%B3%D8%B1%DB%8C%D8%B9%20%D8%AC%D8%A7%D9%88%D8%A7%20%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA" title="Facebook" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/facebook.png" width="16" height="16" alt="Facebook"/></a><a class="a2a_button_twitter" href="http://www.addtoany.com/add_to/twitter?linkurl=http%3A%2F%2Fzebardast.ir%2F%25d8%25b1%25d8%25a7%25d9%2587%25d9%2586%25d9%2585%25d8%25a7%25db%258c-%25d8%25b3%25d8%25b1%25db%258c%25d8%25b9-%25d8%25ac%25d8%25a7%25d9%2588%25d8%25a7-%25d8%25a7%25d8%25b3%25da%25a9%25d8%25b1%25db%258c%25d9%25be%25d8%25aa%2F&amp;linkname=%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C%20%D8%B3%D8%B1%DB%8C%D8%B9%20%D8%AC%D8%A7%D9%88%D8%A7%20%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA" title="Twitter" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/twitter.png" width="16" height="16" alt="Twitter"/></a><a class="a2a_button_identi_ca" href="http://www.addtoany.com/add_to/identi_ca?linkurl=http%3A%2F%2Fzebardast.ir%2F%25d8%25b1%25d8%25a7%25d9%2587%25d9%2586%25d9%2585%25d8%25a7%25db%258c-%25d8%25b3%25d8%25b1%25db%258c%25d8%25b9-%25d8%25ac%25d8%25a7%25d9%2588%25d8%25a7-%25d8%25a7%25d8%25b3%25da%25a9%25d8%25b1%25db%258c%25d9%25be%25d8%25aa%2F&amp;linkname=%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C%20%D8%B3%D8%B1%DB%8C%D8%B9%20%D8%AC%D8%A7%D9%88%D8%A7%20%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA" title="Identi.ca" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/identica.png" width="16" height="16" alt="Identi.ca"/></a><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fzebardast.ir%2F%25d8%25b1%25d8%25a7%25d9%2587%25d9%2586%25d9%2585%25d8%25a7%25db%258c-%25d8%25b3%25d8%25b1%25db%258c%25d8%25b9-%25d8%25ac%25d8%25a7%25d9%2588%25d8%25a7-%25d8%25a7%25d8%25b3%25da%25a9%25d8%25b1%25db%258c%25d9%25be%25d8%25aa%2F&amp;title=%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C%20%D8%B3%D8%B1%DB%8C%D8%B9%20%D8%AC%D8%A7%D9%88%D8%A7%20%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA" id="wpa2a_4">اشتراک‌گذاری</a></p><p><strong>مطالب مرتبط:</strong><ol><li><a href='http://zebardast.ir/%d8%ad%d8%b0%d9%81-%da%a9%d9%88%da%a9%db%8c-%d8%af%d8%b1-%d8%ac%d8%a7%d9%88%d8%a7-%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa/' rel='bookmark' title='حذف کوکی در جاوا اسکریپت'>حذف کوکی در جاوا اسکریپت</a></li><li><a href='http://zebardast.ir/%d9%85%d9%82%d8%af%d9%85%d9%87-%d8%a7%db%8c-%d8%a8%d8%b1%d8%a7%db%8c-%d8%ac%d8%a7%d9%88%d8%a7-%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa/' rel='bookmark' title='مقدمه ای برای جاوا اسکریپت'>مقدمه ای برای جاوا اسکریپت</a></li><li><a href='http://zebardast.ir/querystring-%d8%af%d8%b1-%d8%ac%d8%a7%d9%88%d8%a7-%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa/' rel='bookmark' title='QueryString در جاوا اسکریپت'>QueryString در جاوا اسکریپت</a></li></ol></p>]]></content:encoded> <wfw:commentRss>http://zebardast.ir/%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-%d8%b3%d8%b1%db%8c%d8%b9-%d8%ac%d8%a7%d9%88%d8%a7-%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa/feed/</wfw:commentRss> <slash:comments>6</slash:comments> </item> <item><title>شروع کار با Google Maps API</title><link>http://zebardast.ir/%d8%b4%d8%b1%d9%88%d8%b9-%da%a9%d8%a7%d8%b1-%d8%a8%d8%a7-google-maps-api/</link> <comments>http://zebardast.ir/%d8%b4%d8%b1%d9%88%d8%b9-%da%a9%d8%a7%d8%b1-%d8%a8%d8%a7-google-maps-api/#comments</comments> <pubDate>Sun, 09 Jan 2011 08:08:59 +0000</pubDate> <dc:creator>سعید زبردست</dc:creator> <category><![CDATA[جاوا اسکریپت]]></category> <category><![CDATA[نقشه]]></category> <category><![CDATA[گوگل]]></category> <category><![CDATA[گوگل مپ]]></category><guid isPermaLink="false">http://zebardast.ir/?p=1229</guid> <description><![CDATA[سلام خیلی از ما با سرویس نقشه های گوگل (Google Maps) آشنا هستیم. این سرویس در ویکی پدیا اینگونه تعریف شده است: گوگل مپس (به انگلیسی: Google Maps، به معنی: نقشه‌های گوگل) یک محصول وب از شرکت گوگل است. در گوگل مپس، نقشه‌های دقیق و کاملی از زمین ارائه می‌گردد. گوگل مپس از فن‌آوری‌هایی چون [...] <strong>مطالب مرتبط:</strong><ol><li><a href='http://zebardast.ir/google-ajax-search-api/' rel='bookmark' title='Google AJAX Search API، یک موتور جستجو در وبلاگ شما'>Google AJAX Search API، یک موتور جستجو در وبلاگ شما</a></li><li><a href='http://zebardast.ir/google-apps-for-your-domain/' rel='bookmark' title='Google Apps for Your Domain'>Google Apps for Your Domain</a></li><li><a href='http://zebardast.ir/%d8%b3%d8%a7%d8%ae%d8%aa-%d9%85%d9%88%d8%aa%d9%88%d8%b1-%d8%ac%d8%b3%d8%aa%d8%ac%d9%88%db%8c-%d8%b4%d8%ae%d8%b5%db%8c-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-google-co-op/' rel='bookmark' title='ساخت موتور جستجوی شخصی با استفاده از Google Co-op'>ساخت موتور جستجوی شخصی با استفاده از Google Co-op</a></li></ol>]]></description> <content:encoded><![CDATA[<p>سلام <img src='http://zebardast.ir/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /><br /> خیلی از ما با سرویس نقشه های گوگل (Google Maps) آشنا هستیم. این سرویس در <a href="https://secure.wikimedia.org/wikipedia/fa/wiki/%DA%AF%D9%88%DA%AF%D9%84_%D9%85%D9%BE%D8%B3">ویکی پدیا</a> اینگونه تعریف شده است:</p><blockquote><p>گوگل مپس (به انگلیسی: Google Maps، به معنی: نقشه‌های گوگل) یک محصول وب از شرکت گوگل است. در گوگل مپس، نقشه‌های دقیق و کاملی از زمین ارائه می‌گردد. گوگل مپس از فن‌آوری‌هایی چون Tele Atlas استفاده می‌کند.</p></blockquote><p>گوگل مپس این امکان را برای مدیران و برنامه نویسان وب سایت ها فراهم کرده است تا با استفاده از <a href="https://code.google.com/apis/maps/"><abbr title="رابط برنامه‌نویسی نرم‌افزار - Application Programming Interface ">API</abbr> آن</a>، نقشه های موجود را به دلخواه در وب سایت خود نمایش دهند. در حال حاضر، گوگل رابط های زیر را ارائه می کند:</p><div class="ltr"><ul><li><a href="https://code.google.com/apis/maps/documentation/javascript/">Maps JavaScript API</a></li><li><a href="https://code.google.com/apis/maps/documentation/flash/">Maps API for Flash</a></li><li><a href="https://code.google.com/apis/earth/">Google Earth API</a></li><li><a href="https://code.google.com/apis/maps/documentation/staticmaps/">Static Maps API</a></li><li><a href="https://code.google.com/apis/maps/documentation/webservices/index.html">Web Services</a></li></ul></div><p>در ادامه شروع کار با Google Maps JavaScript API <abbr title="نسخه ۳">V3</abbr> را با هم بررسی می کنیم.</p><p>برای استفاده از این سرویس در وب سایت یا وبلاگ خود، قبل از هر چیز باید کلید لازم برای ارتباط دامنه خود با گوگل را بدست بیاورید. البته این کلید فقط در برخی مواقع ضروری است. دریافت این key با <a href="https://code.google.com/apis/maps/signup.html">ثبت نام در Google Maps API</a> براحتی از طرف گوگل برای شما نمایش داده می شود.</p><p><strong>ساده ترین نوع پیاده سازی (برنامه Hello, World)</strong></p><pre class="brush: xml; title: ; notranslate">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1.0, user-scalable=no&quot;/&gt;
    &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=UTF-8&quot;/&gt;
    &lt;style type=&quot;text/css&quot;&gt;
        html {
            height: 100%
        }
        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
        #map_canvas {
            height: 100%
        }
    &lt;/style&gt;
    &lt;title&gt;Google Maps JavaScript API v3 Example: Map Simple&lt;/title&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;http://maps.google.com/maps/api/js?sensor=false&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
        function initialize() {
            var myLatlng = new google.maps.LatLng(35.695964, 51.417704);
            var myOptions = {
                zoom: 8,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById(&quot;map_canvas&quot;), myOptions);
        }
    &lt;/script&gt;
&lt;/head&gt;
&lt;body onload=&quot;initialize()&quot;&gt;
&lt;div id=&quot;map_canvas&quot;&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre><p>کدهای بالا خیلی گویا هستند ولی چند نکته برای توجه وجود دارد:<br /> • با استفاده از &lt;!DOCTYPE html&gt; مشخص کردیم که مرورگر این صفحه را با استانداردهای html5 پردازش کند.<br /> • کدهای مربوط به API را در داخل تگ script قرار دادیم.<br /> • یک div با شناسه &#8220;map_canvas&#8221; برای نشان دادن نقشه در نظر گرفتیم.<br /> • با استفاده از اتریبیوت onload تگ body، نقشه را initialize یا مقداردهی اولیه کردیم.<br /> اطلاعات بیشتر در <a href="https://code.google.com/apis/maps/documentation/javascript/tutorial.html">Google Maps Javascript API V3 Tutorial</a> ارائه شده است.</p><p>همین مراحل برای نمایش نقشه زیر کافیست:</p><div style="text-align:center"> <iframe style="border: 1px solid #888" src ="http://zebardast.ir/wp-content/uploads/2011/01/google-map-simple.html" width="576" height="300"></p><p>خطا، مرورگر شما از iframe پشتیبانی نمی کند.</p><p></iframe></div><p>یکی از کارهایی که در حال انجام آن هستم، پیاده سازی مراکز پوشش اینترنت توسط یکی از شرکت های ارائه دهنده خدمات اینترنتیست. نمونه اولیه این کار را در زیر مشاهده می فرمایید:</p><p><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><br /><script type="text/javascript" src="http://zebardast.ir/wp-content/uploads/2011/01/google-map-overlay-sample.js"></script></p><div style="text-align:center"><div id="map_canvas" style="width:576px; height:300px; border: 1px solid #888"></div><div class="ltr"> Opacity: <a href="javascript:overlay.setOpacity(25)">25%</a> &nbsp; <a href="javascript:overlay.setOpacity(50)">50%</a> &nbsp; <a href="javascript:overlay.setOpacity(100)">100%</a></div></div><p><script type="text/javascript">
<!--
window.onload = initialize;
//--></script></p><p><strong>پیوندها</strong></p><div class="ltr"><ul><li><a href="http://goo.gl/maps/uPHs">Google Maps</a></li><li><a href="https://code.google.com/apis/maps/">Google Maps API Family</a></li><li><a href="https://code.google.com/apis/maps/signup.html">Sign Up for the Google Maps API</a></li><li><a href="https://code.google.com/apis/maps/documentation/javascript/basics.html">Google Maps Javascript API V3 Basics</a></li><li><a href="https://code.google.com/apis/maps/documentation/javascript/tutorial.html">Google Maps Javascript API V3 Tutorial</a></li><li><a href="https://code.google.com/apis/maps/documentation/javascript/demogallery.html">Google Maps Javascript API V3 Demo Gallery</a></li></ul></div><p><strong>پی نوشت</strong><br /> در صورتی که موفق به دیدن نقشه ها نشدید، از فیلترشکن برای دیدن آنها استفاده کنید. به دلیل تحریم، بعضی از خدمات گوگل بر روی کاربران ساکن ایران، محدود می باشد.</p><p>همیشه شاد، و موفق باشید <img src='http://zebardast.ir/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /></p><p><a class="a2a_button_google_plus" href="http://www.addtoany.com/add_to/google_plus?linkurl=http%3A%2F%2Fzebardast.ir%2F%25d8%25b4%25d8%25b1%25d9%2588%25d8%25b9-%25da%25a9%25d8%25a7%25d8%25b1-%25d8%25a8%25d8%25a7-google-maps-api%2F&amp;linkname=%D8%B4%D8%B1%D9%88%D8%B9%20%DA%A9%D8%A7%D8%B1%20%D8%A8%D8%A7%20Google%20Maps%20API" title="Google+" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/google_plus.png" width="16" height="16" alt="Google+"/></a><a class="a2a_button_facebook" href="http://www.addtoany.com/add_to/facebook?linkurl=http%3A%2F%2Fzebardast.ir%2F%25d8%25b4%25d8%25b1%25d9%2588%25d8%25b9-%25da%25a9%25d8%25a7%25d8%25b1-%25d8%25a8%25d8%25a7-google-maps-api%2F&amp;linkname=%D8%B4%D8%B1%D9%88%D8%B9%20%DA%A9%D8%A7%D8%B1%20%D8%A8%D8%A7%20Google%20Maps%20API" title="Facebook" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/facebook.png" width="16" height="16" alt="Facebook"/></a><a class="a2a_button_twitter" href="http://www.addtoany.com/add_to/twitter?linkurl=http%3A%2F%2Fzebardast.ir%2F%25d8%25b4%25d8%25b1%25d9%2588%25d8%25b9-%25da%25a9%25d8%25a7%25d8%25b1-%25d8%25a8%25d8%25a7-google-maps-api%2F&amp;linkname=%D8%B4%D8%B1%D9%88%D8%B9%20%DA%A9%D8%A7%D8%B1%20%D8%A8%D8%A7%20Google%20Maps%20API" title="Twitter" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/twitter.png" width="16" height="16" alt="Twitter"/></a><a class="a2a_button_identi_ca" href="http://www.addtoany.com/add_to/identi_ca?linkurl=http%3A%2F%2Fzebardast.ir%2F%25d8%25b4%25d8%25b1%25d9%2588%25d8%25b9-%25da%25a9%25d8%25a7%25d8%25b1-%25d8%25a8%25d8%25a7-google-maps-api%2F&amp;linkname=%D8%B4%D8%B1%D9%88%D8%B9%20%DA%A9%D8%A7%D8%B1%20%D8%A8%D8%A7%20Google%20Maps%20API" title="Identi.ca" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/identica.png" width="16" height="16" alt="Identi.ca"/></a><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fzebardast.ir%2F%25d8%25b4%25d8%25b1%25d9%2588%25d8%25b9-%25da%25a9%25d8%25a7%25d8%25b1-%25d8%25a8%25d8%25a7-google-maps-api%2F&amp;title=%D8%B4%D8%B1%D9%88%D8%B9%20%DA%A9%D8%A7%D8%B1%20%D8%A8%D8%A7%20Google%20Maps%20API" id="wpa2a_6">اشتراک‌گذاری</a></p><p><strong>مطالب مرتبط:</strong><ol><li><a href='http://zebardast.ir/google-ajax-search-api/' rel='bookmark' title='Google AJAX Search API، یک موتور جستجو در وبلاگ شما'>Google AJAX Search API، یک موتور جستجو در وبلاگ شما</a></li><li><a href='http://zebardast.ir/google-apps-for-your-domain/' rel='bookmark' title='Google Apps for Your Domain'>Google Apps for Your Domain</a></li><li><a href='http://zebardast.ir/%d8%b3%d8%a7%d8%ae%d8%aa-%d9%85%d9%88%d8%aa%d9%88%d8%b1-%d8%ac%d8%b3%d8%aa%d8%ac%d9%88%db%8c-%d8%b4%d8%ae%d8%b5%db%8c-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-google-co-op/' rel='bookmark' title='ساخت موتور جستجوی شخصی با استفاده از Google Co-op'>ساخت موتور جستجوی شخصی با استفاده از Google Co-op</a></li></ol></p>]]></content:encoded> <wfw:commentRss>http://zebardast.ir/%d8%b4%d8%b1%d9%88%d8%b9-%da%a9%d8%a7%d8%b1-%d8%a8%d8%a7-google-maps-api/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>خزنده وب (Web Crawler)</title><link>http://zebardast.ir/%d8%ae%d8%b2%d9%86%d8%af%d9%87-%d9%88%d8%a8-web-crawler/</link> <comments>http://zebardast.ir/%d8%ae%d8%b2%d9%86%d8%af%d9%87-%d9%88%d8%a8-web-crawler/#comments</comments> <pubDate>Sun, 27 Jun 2010 05:15:00 +0000</pubDate> <dc:creator>سعید زبردست</dc:creator> <category><![CDATA[برنامه نویسی]]></category> <category><![CDATA[برنامه نویسی وب]]></category> <category><![CDATA[جاوا]]></category> <category><![CDATA[علوم کامپیوتر]]></category> <category><![CDATA[Web Crawler]]></category> <category><![CDATA[جستجو]]></category> <category><![CDATA[خزنده وب]]></category><guid isPermaLink="false">http://zebardast.ir/?p=1076</guid> <description><![CDATA[سلام مطلب امروز ضمن آشنا کردن شما با Web crawler و معماری آن، سورس خزنده وب ساده ای به زبان جاوا را ارائه می دهد. خزنده وب (Web Crawler) چیست؟ خزنده وب که بیشتر ما آن را با عنوان Web crawler می شناسیم به برنامه کامپیوتری اطلاق می شود که World Wide Web (وب جهان گستر) را [...] <strong>مطالب مرتبط:</strong><ol><li><a href='http://zebardast.ir/%d9%85%d8%b9%d8%b1%d9%81%db%8c-%d9%88-%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%be%db%8c%d8%a7%d8%af%d9%87%e2%80%8c%d8%b3%d8%a7%d8%b2%db%8c-apache-lucene/' rel='bookmark' title='معرفی و آموزش پیاده‌سازی Apache Lucene'>معرفی و آموزش پیاده‌سازی Apache Lucene</a></li><li><a href='http://zebardast.ir/%d9%85%d8%b9%d8%a7%d9%87%d8%af%d9%87%e2%80%8c%d9%87%d8%a7%db%8c-%da%a9%d8%af-%d9%86%d9%88%db%8c%d8%b3%db%8c-coding-conventions/' rel='bookmark' title='معاهده‌های کدنویسی (Coding conventions)'>معاهده‌های کدنویسی (Coding conventions)</a></li><li><a href='http://zebardast.ir/%d8%a8%d8%af%d8%b3%d8%aa-%d8%a2%d9%88%d8%b1%d8%af%d9%86-%da%a9%d8%b4%d9%88%d8%b1-%db%8c%da%a9-%d8%a2%d8%af%d8%b1%d8%b3-ip-%d8%a8%d9%87-%da%a9%d9%85%da%a9-mysql/' rel='bookmark' title='بدست آوردن کشور یک آدرس IP به کمک MySQL'>بدست آوردن کشور یک آدرس IP به کمک MySQL</a></li></ol>]]></description> <content:encoded><![CDATA[<p>سلام <img src='http://zebardast.ir/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /></p><p>مطلب امروز ضمن آشنا کردن شما با <a href="http://en.wikipedia.org/wiki/Web_crawler">Web crawler</a> و معماری آن، سورس خزنده وب ساده ای به زبان جاوا را ارائه می دهد.</p><h3>خزنده وب (Web Crawler) چیست؟</h3><p>خزنده وب که بیشتر ما آن را با عنوان Web crawler می شناسیم به برنامه کامپیوتری اطلاق می شود که World Wide Web (وب جهان گستر) را به صورت مرتب و سلسله مراتبی بازدید کرده و اطلاعات آن را مورد پردازش قرار می دهد. از Web crawler ها با عناوین دیگری مانند ants, automatic indexers, bots, Web spiders و Web robots نیز یاد می شود.</p><h3>کاربرد ها</h3><p>۱- موتورهای جستجو</p><p>موتورهای جستجو و برخی از سایت ها دارای خزنده ها ویا روبات هایی هستند که برای گردآوری اطلاعات وب سایت ها و نیز بروز نگه داشتن اطلاعات مورد استفاده قرار می گیرند. مهم ترین کار بعد از گردآوری اطلاعات، ایندکس کردن آن ها برای پردازش سریع هنگام جستجو است. این خزنده ها معمولا در بازه های زمانی منظمی اطلاعات را بروز کرده و با نسخه های قبلی مقایسه می کنند.</p><p>۲- مدیریت فنی وب سایت</p><p>مدیریت فنی وب سایت بخشی از کار این خزنده هاست که شامل یافتن لینک های شکسته (Broken Link) ، اعتبار سنجی (Validation) کدهای HTML، فایل های CSS و &#8230; می باشد.</p><p>۳- جمع آوری اطلاعات خاص</p><p>کاربرد دیگر خزنده های  وب جمع آوری اطلاعات خاصی مانند آدرس های ایمیل است. معمولا هدف از اینکار ارسال هرزنامه (spam) می باشد. برای جلوگیری از ثبت آدرس ایمیل توسط این خزنده ها، می توانید آدرس ایمیل خود را به صورت saeidREMOVEME AT جیمیل و یا موارد مشابه دیگر بنویسید.</p><h3>نحوه کار</h3><p>به صورت عمومی نحوه کار Web crawler ها به این صورت است که ابتدا لیستی از URL ها (آدرس های وب) که به عنوان seed شناخته می شوند را برای بازدید پردازش می کنند. هنگام پردازش این آدرس ها، لیست لینک ها و آدرس های موجود در صفحات آن ها را گردآوری کرده و به لیست ابتدایی اضافه می کنند. بقیه اطلاعات را نیز با توجه به نیاز و هدف خود ذخیره  و پردازش می نمایند.</p><h3>معماری خزنده وب</h3><p>خزنده وب بخش اصلی و مرکزی هر موتور جستجویی را تشکیل می دهد. به همین جهت الگوریتم و معماری آن ها به شدت مخفی نگه داشته می شود. با این وجود معماری سطح بالای (High-level architecture) آن به شکل زیر می باشد:</p><div class="autocap aligncenter" style="width: 500px;"><div><img class=" size-full wp-image-1109" title="معماری سطح بالای یک خزنده وب استاندارد (عکس از ویکی پدیا)" src="http://zebardast.ir/wp-content/uploads/2010/06/WebCrawlerArchitecture.png" alt="" width="500" height="382" /><p class="autocap-text"><span class="hide">— </span>معماری سطح بالای یک خزنده وب استاندارد (عکس از ویکی پدیا)</p></div></div><h3>عادی کردن آدرس (URL normalization)</h3><p>منظور از عادی کردن آدرس، یکی کردن آدرس هایی می باشد که دارای خروجی یکسانی هستند. هدف از این کار جلوگیری از جمع آوری اطلاعات یکسان از چندین URL می باشد. URL normalization با نام URL canonicalization نیز شناخته می شود که همان فرآیند تغییر آدرس برای استاندارد شدن می باشد.</p><h3>مراحل فرایند عادی کردن آدرس</h3><p>• تبدیل آدرس به حروف کوچک</p><pre>HTTP://www.Example.com/ → http://www.example.com/</pre><p>• افزودن / به آدرس در صورت نیاز</p><pre>http://www.example.com → http://www.example.com/</pre><p>• حذف آدرس ایندکس دایرکتوری</p><pre>http://www.example.com/default.asp → http://www.example.com/
http://www.example.com/a/index.html → http://www.example.com/a/</pre><p>• بزرگ کردن حروف encode شده یا همان حروف بعد از علامت ٪</p><pre>http://www.example.com/a%c2%b1b → http://www.example.com/a%C2%B1b</pre><p>• حذف بخش زاید</p><pre>http://www.example.com/bar.html#section1 → http://www.example.com/bar.html</pre><p>• حذف و تبدیل آی پی به دامنه</p><pre>http://208.77.188.166/ → http://www.example.com/</pre><p>• اعمال محدودیت بر روی پروتکل ها مانند تبدیل https به http</p><pre>https://www.example.com/ → http://www.example.com/</pre><p>• حذف پورت پیش فرض (پورت ۸۰ به صورت پیش فرض برای http می باشد)</p><pre>http://www.example.com:80/bar.html → http://www.example.com/bar.html</pre><p>• حذف / های تکراری</p><pre>http://www.example.com:80/bar.html → http://www.example.com/bar.html</pre><p>• حذف . ها (dot-segments)</p><pre>http://www.example.com/../a/b/../c/./d.html → http://www.example.com/a/c/d.html</pre><p>• حذف www از اول دامنه</p><pre>http://www.example.com/ → http://example.com/</pre><p>• مرتب کردن متغییرهای صفحه فعال</p><pre>http://www.example.com/display?lang=en&amp;article=fred
 → http://www.example.com/display?article=fred〈=en</pre><p>• حذف متغییرهای اختیاری از <strong><span style="font-weight: normal;">query-string</span> </strong></p><pre>http://www.example.com/display?id=123&amp;fakefoo=fakebar
 → http://www.example.com/display?id=123</pre><p>• حذف متغییرهای پیش فرض از query-string</p><pre>http://www.example.com/display?id=&amp;sort=ascending
 → http://www.example.com/display</pre><p>• حذف علامت ? هنگامی که query-string خالی باشد</p><pre>http://www.example.com/display? → http://www.example.com/display</pre><p>• استانداردکردن encoding کاراکترها</p><pre>http://www.example.com/display?category=foo/bar+baz
 → http://www.example.com/display?category=foo%2Fbar%20baz</pre><h3>شناسایی خزنده وب</h3><p>خزنده های وب معمولا با استفاده از فیلد User-agent داده HTTP request خود را معرفی می کنند. شما با استفاده از لاگ وب سرور خود می توانید لیست این Web crawler های را مشاهده کنید. فیلد User agent ممکن است شامل URL ای باشد که به سایت سازنده خزنده اشاره می کند.</p><p>Spambot ها و سایر خزنده های مخرب معمولا فیلد User agent را به صورت غیر واقعی با اطلاعاتی مانند نام یک مرورگر پر می کنند.</p><h3>فایل robots.txt</h3><p>این فایل برای دادن اطلاعات اولیه در زمینه وب سایت مورد پردازش به خزنده های وب استفاده می گردد. به عنوان مثال با این فایل می توانید دسترسی خزنده های وب به بعضی زیر شاخه ها محدود کنید. دستورات زیر در فایل robots.txt از دسترسی خزنده ها به دایرکتوری /tmp/ جلوگیری می کند:</p><pre>User-agent: *
Disallow: /tmp/</pre><p>* فایل robots.txt یک استاندارد می باشد. به همین جهت خزنده وب (معمولا خزنده مخرب) می تواند آن را نادیده بگیرد.</p><h3>معروف ترین خزنده های وب غیر آزاد</h3><p>در زیر لیست معروف ترین خزنده های وب را مشاهده می کنید:</p><ul class="ltr"><li><a href="http://en.wikipedia.org/wiki/Yahoo!_Slurp">Yahoo! Slurp</a></li><li><a href="http://en.wikipedia.org/wiki/Msnbot">Msnbot</a></li><li>FAST Crawler</li><li><a href="http://en.wikipedia.org/wiki/Googlebot">Googlebot</a></li><li><a href="http://en.wikipedia.org/wiki/Methabot">Methabot</a></li><li><a href="http://arachnode.net/">arachnode.net</a></li><li>PolyBot</li><li>RBSE</li><li><a href="http://en.wikipedia.org/wiki/WebCrawler">WebCrawler</a></li><li>World Wide Web Worm</li><li><a href="http://en.wikipedia.org/wiki/WebFountain">WebFountain</a></li><li>WebRACE</li></ul><h3>معروف ترین خزنده های متن باز</h3><ul class="ltr"><li><a title="Aspseek" href="http://en.wikipedia.org/wiki/Aspseek">Aspseek</a></li><li><a href="http://code.google.com/p/crawler4j/">crawler4j</a></li><li><a title="DataparkSearch" href="http://en.wikipedia.org/wiki/DataparkSearch">DataparkSearch</a></li><li><a href="http://en.wikipedia.org/w/index.php?title=Ebot&amp;action=edit&amp;redlink=1">Ebot</a></li><li><a title="Wget" href="http://en.wikipedia.org/wiki/Wget">GNU Wget</a></li><li><a title="Grub (search engine)" href="http://en.wikipedia.org/wiki/Grub_(search_engine)">GRUB</a></li><li><a title="Heritrix" href="http://en.wikipedia.org/wiki/Heritrix">Heritrix</a></li><li><a class="mw-redirect" title="Ht-//dig" href="http://en.wikipedia.org/wiki/Ht-//dig">ht://Dig</a></li><li><a title="HTTrack" href="http://en.wikipedia.org/wiki/HTTrack">HTTrack</a></li><li><a title="ICDL crawling" href="http://en.wikipedia.org/wiki/ICDL_crawling">ICDL Crawler</a></li><li><a title="MnoGoSearch" href="http://en.wikipedia.org/wiki/MnoGoSearch">mnoGoSearch</a></li><li><a title="Nutch" href="http://en.wikipedia.org/wiki/Nutch">Nutch</a></li><li><a class="mw-redirect" title="Open Search Server" href="http://en.wikipedia.org/wiki/Open_Search_Server">Open Search Server</a></li><li><a title="Pavuk" href="http://en.wikipedia.org/wiki/Pavuk">Pavuk</a></li><li><a title="YaCy" href="http://en.wikipedia.org/wiki/YaCy">YaCy</a></li></ul><h3>سورس خزنده وب به زبان جاوا</h3><p>سایت sun در سال ۱۹۹۸ مقاله ای آموزشی با عنوان &#8220;<a href="http://java.sun.com/developer/technicalArticles/ThirdParty/WebCrawler/" target="_blank">Writing a Web Crawler in the Java Programming Language</a>&#8221; را ارائه داد. در آن مقاله ضمن توضیح دادن Web crawler سورس برنامه آن نیز در اختیار عموم قرار گرفت. البته این برنامه خیلی ساده و در مرحله ابتدایی می باشد. شما باید با توجه به نیازهای خود آن را تغییر داده و مورد استفاده قرار دهید.</p><p>• دانلود <a href="http://java.sun.com/developer/technicalArticles/ThirdParty/WebCrawler/WebCrawler.java">سورس خزنده وب به زبان جاوا</a> (<a href="http://zebardast.ir/wp-content/uploads/2010/06/WebCrawler.txt">لینک کمکی</a>)</p><h3>کاربرد خزنده وب برای من</h3><p>برای سایت هایی که از نرم افزار های آماده مثل وردپرس استفاده نشده است و نیاز به موتور جستجو احساس می شد، با استفاده از خزنده ای که نوشتم، اطلاعات کل وب سایت مورد نظر را در داخل یک جدول در پایگاه داده ذخیره کردم. سپس توابعی برای جستجو بهینه بر روی داده ها در MySQL نوشتم و با استفاده از آن ها بخش جستجوی وب سایت مورد نظر را راه اندازی کردم. نمونه این جستجو ها در سایت های زیر فعال می باشد:</p><p>• <a href="http://datak-telecom.net/" target="_blank">داتک تله کام</a></p><p>• <a href="http://www.efstelecom.com/" target="_blank">ارتباطات فرادانش سامان</a></p><h3>منابع</h3><ul class="ltr"><li><a href="http://en.wikipedia.org/wiki/Web_crawler">Web crawler</a></li><li><a href="http://en.wikipedia.org/wiki/URL_normalization">URL normalization</a></li><li><a href="http://en.wikipedia.org/wiki/Robots_exclusion_standard">Robots exclusion standard</a></li></ul><p>موفق باشید <img src='http://zebardast.ir/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /></p><p><a class="a2a_button_google_plus" href="http://www.addtoany.com/add_to/google_plus?linkurl=http%3A%2F%2Fzebardast.ir%2F%25d8%25ae%25d8%25b2%25d9%2586%25d8%25af%25d9%2587-%25d9%2588%25d8%25a8-web-crawler%2F&amp;linkname=%D8%AE%D8%B2%D9%86%D8%AF%D9%87%20%D9%88%D8%A8%20%28Web%20Crawler%29" title="Google+" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/google_plus.png" width="16" height="16" alt="Google+"/></a><a class="a2a_button_facebook" href="http://www.addtoany.com/add_to/facebook?linkurl=http%3A%2F%2Fzebardast.ir%2F%25d8%25ae%25d8%25b2%25d9%2586%25d8%25af%25d9%2587-%25d9%2588%25d8%25a8-web-crawler%2F&amp;linkname=%D8%AE%D8%B2%D9%86%D8%AF%D9%87%20%D9%88%D8%A8%20%28Web%20Crawler%29" title="Facebook" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/facebook.png" width="16" height="16" alt="Facebook"/></a><a class="a2a_button_twitter" href="http://www.addtoany.com/add_to/twitter?linkurl=http%3A%2F%2Fzebardast.ir%2F%25d8%25ae%25d8%25b2%25d9%2586%25d8%25af%25d9%2587-%25d9%2588%25d8%25a8-web-crawler%2F&amp;linkname=%D8%AE%D8%B2%D9%86%D8%AF%D9%87%20%D9%88%D8%A8%20%28Web%20Crawler%29" title="Twitter" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/twitter.png" width="16" height="16" alt="Twitter"/></a><a class="a2a_button_identi_ca" href="http://www.addtoany.com/add_to/identi_ca?linkurl=http%3A%2F%2Fzebardast.ir%2F%25d8%25ae%25d8%25b2%25d9%2586%25d8%25af%25d9%2587-%25d9%2588%25d8%25a8-web-crawler%2F&amp;linkname=%D8%AE%D8%B2%D9%86%D8%AF%D9%87%20%D9%88%D8%A8%20%28Web%20Crawler%29" title="Identi.ca" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/identica.png" width="16" height="16" alt="Identi.ca"/></a><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fzebardast.ir%2F%25d8%25ae%25d8%25b2%25d9%2586%25d8%25af%25d9%2587-%25d9%2588%25d8%25a8-web-crawler%2F&amp;title=%D8%AE%D8%B2%D9%86%D8%AF%D9%87%20%D9%88%D8%A8%20%28Web%20Crawler%29" id="wpa2a_8">اشتراک‌گذاری</a></p><p><strong>مطالب مرتبط:</strong><ol><li><a href='http://zebardast.ir/%d9%85%d8%b9%d8%b1%d9%81%db%8c-%d9%88-%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d9%be%db%8c%d8%a7%d8%af%d9%87%e2%80%8c%d8%b3%d8%a7%d8%b2%db%8c-apache-lucene/' rel='bookmark' title='معرفی و آموزش پیاده‌سازی Apache Lucene'>معرفی و آموزش پیاده‌سازی Apache Lucene</a></li><li><a href='http://zebardast.ir/%d9%85%d8%b9%d8%a7%d9%87%d8%af%d9%87%e2%80%8c%d9%87%d8%a7%db%8c-%da%a9%d8%af-%d9%86%d9%88%db%8c%d8%b3%db%8c-coding-conventions/' rel='bookmark' title='معاهده‌های کدنویسی (Coding conventions)'>معاهده‌های کدنویسی (Coding conventions)</a></li><li><a href='http://zebardast.ir/%d8%a8%d8%af%d8%b3%d8%aa-%d8%a2%d9%88%d8%b1%d8%af%d9%86-%da%a9%d8%b4%d9%88%d8%b1-%db%8c%da%a9-%d8%a2%d8%af%d8%b1%d8%b3-ip-%d8%a8%d9%87-%da%a9%d9%85%da%a9-mysql/' rel='bookmark' title='بدست آوردن کشور یک آدرس IP به کمک MySQL'>بدست آوردن کشور یک آدرس IP به کمک MySQL</a></li></ol></p>]]></content:encoded> <wfw:commentRss>http://zebardast.ir/%d8%ae%d8%b2%d9%86%d8%af%d9%87-%d9%88%d8%a8-web-crawler/feed/</wfw:commentRss> <slash:comments>20</slash:comments> </item> <item><title>درباره HTML 5</title><link>http://zebardast.ir/%d8%af%d8%b1%d8%a8%d8%a7%d8%b1%d9%87-html-5/</link> <comments>http://zebardast.ir/%d8%af%d8%b1%d8%a8%d8%a7%d8%b1%d9%87-html-5/#comments</comments> <pubDate>Tue, 08 Apr 2008 18:55:14 +0000</pubDate> <dc:creator>سعید زبردست</dc:creator> <category><![CDATA[زبان (X)HTML]]></category> <category><![CDATA[html]]></category><guid isPermaLink="false">http://itpencil.wordpress.com/?p=484</guid> <description><![CDATA[سلام HTML5 نسخه شماره ۵ زبان اصلی World Wide Web یعنی HTML است. این نسخه در تاریخ ۲۲ ژانویه ۲۰۰۸ بوسیله کنسرسیوم وب جهانی (w3c) منتشر شد. ایده ابتدایی این نسخه از HTML در سال ۲۰۰۴ در Web Hypertext Application Technology Working Group یا همان WHATWG کلید خورد. این گروه کاری شامل شرکت های بزرگی [...] <strong>مطالب مرتبط:</strong><ol><li><a href='http://zebardast.ir/%da%a9%d8%aa%d8%a7%d8%a8-%d8%a7%d9%84%da%a9%d8%aa%d8%b1%d9%88%d9%86%db%8c%da%a9%db%8c-%d8%a2%d9%85%d9%88%d8%b2%d8%b4-html/' rel='bookmark' title='از سیر تا پیاز HTML در کتاب الکترونیکی آموزش html'>از سیر تا پیاز HTML در کتاب الکترونیکی آموزش html</a></li><li><a href='http://zebardast.ir/html-%d8%af%d8%b1-%d8%a8%d8%b1%d8%a7%d8%a8%d8%b1-xhtml/' rel='bookmark' title='تفاوت های HTML با XHTML'>تفاوت های HTML با XHTML</a></li><li><a href='http://zebardast.ir/html-%da%86%db%8c%d8%b3%d8%aa%d8%9f/' rel='bookmark' title='HTML چیست؟'>HTML چیست؟</a></li></ol>]]></description> <content:encoded><![CDATA[<p><img src="http://itpencil.files.wordpress.com/2008/04/html_48_48.png" alt="html" align="left" /><br /> سلام <img src='http://zebardast.ir/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /></p><p>HTML5 نسخه شماره ۵ زبان اصلی World Wide Web یعنی HTML است. این نسخه در تاریخ ۲۲ ژانویه ۲۰۰۸ بوسیله کنسرسیوم وب جهانی (w3c) منتشر شد.<br /> ایده ابتدایی این نسخه از HTML در سال ۲۰۰۴ در Web Hypertext Application Technology Working Group یا همان WHATWG کلید خورد. این گروه کاری شامل شرکت های بزرگی مانند AOL، Apple، Google، IBM، Microsoft، Mozilla، Nokia، Opera و &#8230; می باشد.</p><p><strong>نشانه های جدید</strong><br /> HTML 5 عناصر و ویژگی های جدیدی به تگ ها (tag) ها اضافه کرده است. از لحاظ تکنیکی بعضی از این تگ ها به div  و span شبیه هستند. به عنوان مثال تگ جدید nav و تگ جدید footer از این دسته هستند.<br /> بعضی دیگر از تگ های جدید مخصوص موتور های جستجو (برای ایندکس کردن اطلاعات) ، دستگاه های دارای صفحه کوچک (مانند موبایل) و یا خواننده های صوتی می باشند مانند تگ های جدید audio و video.<br /> همچنین بعضی از عناصر حذف شده اند. مانند تگ center.</p><p><strong>تفاوت ها با HTML 4</strong><br /> لیست تعدادی از تفاوت های HTML 5 با HTML 4 به طور خلاصه (تعداد کمی از نمونه ها نمایش داده شده است) عبارتند از:<br /> • عناصر جدید &#8211; section, video, progress, nav, meter, time, aside, canvas<br /> • عناصر صفحه &#8211; header, section, footer, figure<br /> • ویژگی های جدید برای تگ Input &#8211; date/time, email, url<br /> • ویژگی های جدید &#8211;  ping, charset, async<br /> • ویژگی های عمومی (به تمامی عناصر قابل اعمال هستند) &#8211; id, tabindex,repeat<br /> • عناصر حذف شده &#8211; center, font, strike<br /> برای مشاهده تمامی تفاوت های HTML 5  با 4 کافیست به صفحه <a href="http://www.w3schools.com/tags/html5.asp">HTML 5 Reference</a> مراجعه کنید.</p><p><strong>میزان پشتیبانی مرورگر ها از استاندارد های HTML 5</strong><br /> برای مشاهده آخرین بررسی ها در رابطه با پشتیبانی مرورگر ها از استاندارد های HTML 5 می توانید به لینک های زیر مراجعه نمایید:</p><p dir="ltr" align="left">• <a href="http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers">Implementations in Web browsers</a><br /> • <a href="http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)">Comparison_of_layout_engines</a></p><p>موفق باشید</p><p><a class="a2a_button_google_plus" href="http://www.addtoany.com/add_to/google_plus?linkurl=http%3A%2F%2Fzebardast.ir%2F%25d8%25af%25d8%25b1%25d8%25a8%25d8%25a7%25d8%25b1%25d9%2587-html-5%2F&amp;linkname=%D8%AF%D8%B1%D8%A8%D8%A7%D8%B1%D9%87%20HTML%205" title="Google+" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/google_plus.png" width="16" height="16" alt="Google+"/></a><a class="a2a_button_facebook" href="http://www.addtoany.com/add_to/facebook?linkurl=http%3A%2F%2Fzebardast.ir%2F%25d8%25af%25d8%25b1%25d8%25a8%25d8%25a7%25d8%25b1%25d9%2587-html-5%2F&amp;linkname=%D8%AF%D8%B1%D8%A8%D8%A7%D8%B1%D9%87%20HTML%205" title="Facebook" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/facebook.png" width="16" height="16" alt="Facebook"/></a><a class="a2a_button_twitter" href="http://www.addtoany.com/add_to/twitter?linkurl=http%3A%2F%2Fzebardast.ir%2F%25d8%25af%25d8%25b1%25d8%25a8%25d8%25a7%25d8%25b1%25d9%2587-html-5%2F&amp;linkname=%D8%AF%D8%B1%D8%A8%D8%A7%D8%B1%D9%87%20HTML%205" title="Twitter" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/twitter.png" width="16" height="16" alt="Twitter"/></a><a class="a2a_button_identi_ca" href="http://www.addtoany.com/add_to/identi_ca?linkurl=http%3A%2F%2Fzebardast.ir%2F%25d8%25af%25d8%25b1%25d8%25a8%25d8%25a7%25d8%25b1%25d9%2587-html-5%2F&amp;linkname=%D8%AF%D8%B1%D8%A8%D8%A7%D8%B1%D9%87%20HTML%205" title="Identi.ca" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/identica.png" width="16" height="16" alt="Identi.ca"/></a><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fzebardast.ir%2F%25d8%25af%25d8%25b1%25d8%25a8%25d8%25a7%25d8%25b1%25d9%2587-html-5%2F&amp;title=%D8%AF%D8%B1%D8%A8%D8%A7%D8%B1%D9%87%20HTML%205" id="wpa2a_10">اشتراک‌گذاری</a></p><p><strong>مطالب مرتبط:</strong><ol><li><a href='http://zebardast.ir/%da%a9%d8%aa%d8%a7%d8%a8-%d8%a7%d9%84%da%a9%d8%aa%d8%b1%d9%88%d9%86%db%8c%da%a9%db%8c-%d8%a2%d9%85%d9%88%d8%b2%d8%b4-html/' rel='bookmark' title='از سیر تا پیاز HTML در کتاب الکترونیکی آموزش html'>از سیر تا پیاز HTML در کتاب الکترونیکی آموزش html</a></li><li><a href='http://zebardast.ir/html-%d8%af%d8%b1-%d8%a8%d8%b1%d8%a7%d8%a8%d8%b1-xhtml/' rel='bookmark' title='تفاوت های HTML با XHTML'>تفاوت های HTML با XHTML</a></li><li><a href='http://zebardast.ir/html-%da%86%db%8c%d8%b3%d8%aa%d8%9f/' rel='bookmark' title='HTML چیست؟'>HTML چیست؟</a></li></ol></p>]]></content:encoded> <wfw:commentRss>http://zebardast.ir/%d8%af%d8%b1%d8%a8%d8%a7%d8%b1%d9%87-html-5/feed/</wfw:commentRss> <slash:comments>8</slash:comments> </item> <item><title>راهنمای سریع Apache Virtual Host</title><link>http://zebardast.ir/%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-%d8%b3%d8%b1%db%8c%d8%b9-apache-virtual-host/</link> <comments>http://zebardast.ir/%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-%d8%b3%d8%b1%db%8c%d8%b9-apache-virtual-host/#comments</comments> <pubDate>Sun, 28 Oct 2007 07:12:58 +0000</pubDate> <dc:creator>سعید زبردست</dc:creator> <category><![CDATA[برنامه نویسی وب]]></category> <category><![CDATA[سیستم عامل اوبونتو (UBUNTU)]]></category> <category><![CDATA[آپاچی]]></category><guid isPermaLink="false">http://itpencil.wordpress.com/2007/10/28/%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-%d8%b3%d8%b1%db%8c%d8%b9-apache-virtual-host/</guid> <description><![CDATA[سلام * این راهنما به طور خلاصه Virtual Host (هاست مجازی؟) را معرفی و کمی از تنظیمات آن را برای شما ارائه می دهد. * این راهنمای برای کابران لینوکس (به ویژه اوبونتو) ایجاد گردیده است ولی می توان با تفییراتی در ویندوز نیز از آن استفاده کرد. * این راهنما برای وب سایت های [...] <strong>مطالب مرتبط:</strong><ol><li><a href='http://zebardast.ir/%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-%d8%b3%d8%b1%db%8c%d8%b9-%d8%ac%d8%a7%d9%88%d8%a7-%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa/' rel='bookmark' title='راهنمای سریع جاوا اسکریپت'>راهنمای سریع جاوا اسکریپت</a></li><li><a href='http://zebardast.ir/linux-commands/' rel='bookmark' title='مرجع دستورات خط فرمان لینوکس'>مرجع دستورات خط فرمان لینوکس</a></li><li><a href='http://zebardast.ir/ubuntu-quick-reference/' rel='bookmark' title='راهنمای سریع دستورات برای شروع کار با اوبونتو'>راهنمای سریع دستورات برای شروع کار با اوبونتو</a></li></ol>]]></description> <content:encoded><![CDATA[<p><img src='http://itpencil.files.wordpress.com/2007/10/apache_48.png' alt='Apache HTTP Server' align="left" /><br /> سلام</p><p>* این راهنما به طور خلاصه Virtual Host (هاست مجازی؟) را معرفی و کمی از تنظیمات آن را برای شما ارائه می دهد.<br /> * این راهنمای برای کابران لینوکس (به ویژه اوبونتو) ایجاد گردیده است ولی می توان با تفییراتی در ویندوز نیز از آن استفاده کرد.<br /> * این راهنما برای وب سایت های به اصطلاح name-based آماده شده است.</p><p>از Virtual Host برای راه اندازی بیش از یک وب سایت (مانند: www.company1.com و www.company2.com) بر روی یک سرور استفاده می شود. کاربرد دیگر Virtual Host در سیستم عامل لینوکس که بسیار مورد استفاده قرار می گیرد، ایجاد یک دایرکتوری در پوشه خانگی کاربر است. این پوشه به جای /var/www مورد استفاده قرار می گیرد.<br /> فرض می کنید که شما قصد ایجاد یکی دایرکتوری برای سایتی مانند example.com در پوشه خانگی خود را دارید.</p><p>برای ساخت یک Virtual Host ابتدا دستور زیر را وارد کنید:</p><pre>sudo nano /etc/apache2/sites-available/local.example.com</pre><p>سپس عبارت های زیر را در آن بنویسید:</p><pre>
NameVirtualHost 127.0.15.1:80
&lt;VirtualHost 127.0.15.1:80&gt;
        ServerAdmin webmaster@example.com
        DocumentRoot /home/USER/www/example.com
        ServerName local.example.com
        &lt;Directory /home/saeitt/www/example.com/&gt;
                Options FollowSymLinks
                AllowOverride All
        &lt;/Directory&gt;
        ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/
        ErrorLog /home/USER/www/example.com/error.log
        # Possible values include: debug, info, notice, warn, error, crit,
        # alert, emerg.
        LogLevel warn
        CustomLog /home/USER/www/example.com/access.log combined
        ServerSignature On
&lt;/VirtualHost&gt;
</pre><p>* به جای 127.0.15.1 یک آی پی دلخواه بنویسید.<br /> * به جای USER نام دایرکتوری یوزر خود در پوشه home را بنویسید. این نام به صورت پیش فرض همان نام کاربری شما است.</p><p>سپس با زدن دکمه Ctrl+x و وارد کردن y فایل ذخیره کنید.<br /> تا این مرحله شما یک Virtual Host نسبتا ساده را ایجاد کرده اید. برای فعال کردن این Virtual Host مراحل زیر را انجام دهید.</p><p>دستورات زیر را وارد کنید:</p><pre>
cd ../sites-enabled/
sudo ln -s ../sites-available/local.example.com
</pre><p>فایل تنطیمات مربوط به هاست ها را برای تنظیم آی پی ۱۲۷.۰.۱۵.۱ به دامنه local.example.com ویرایش می کنید:</p><pre>
sudo nano /etc/hosts
</pre><p>خط زیر را به آخر این فایل اضافه کنید:</p><pre>
127.0.15.1 local.example.com
</pre><p>سپس با زدن دکمه Ctrl+x و وارد کردن y فایل ذخیره کنید.</p><p>در آخر دستور زیر را برای رستارت کردن وب سرور آپاچی به کار برید:</p><pre>
sudo /etc/init.d/apache2 restart
</pre><p>در صورتی که دایرکتوری example.com را نداشته باشید، با خطای زیر مواجه می شوید:</p><pre>
Warning: DocumentRoot [/home/USER/www/example.com] does not exist
</pre><p>* لطفا دایرکتوری را بسازید و دوباره آپاچی را رستارت کنید:</p><pre>
mkdir /home/USER/www
mkdir /home/USER/www/example.com
sudo /etc/init.d/apache2 restart
</pre><p>ساخت Virtual Host به اتمام رسید. برای تست کردن آدرس http://local.example.com/ را در مرورگر خود وارد کنید.</p><p><strong>لینک ها:</strong><br /> • <a href="http://wiki.ubuntu-ir.org/VirtualHost">راهنمای Virtual Host</a> (ویکی کاربران اوبونتو)<br /> • <a href="http://httpd.apache.org/docs/2.0/en/vhosts/">Apache Virtual Host documentation</a></p><p><strong>پی نوشت:</strong><br /> * این راهنما <a href="http://forum.ubuntu.ir/index.php?topic=2545.0">به درخواست علی عزیز</a> ایجاد شده است. بزودی راهنمای کامل تر و جامع تری را می نویسم.<br /> * به لطف بعضی مسئولان، اوبونتو امسال عرفه ای در الکامپ ندارد.<br /> * پیج رنک مداد آی تی ۴ شد.</p><p>موفق باشید</p><p><a class="a2a_button_google_plus" href="http://www.addtoany.com/add_to/google_plus?linkurl=http%3A%2F%2Fzebardast.ir%2F%25d8%25b1%25d8%25a7%25d9%2587%25d9%2586%25d9%2585%25d8%25a7%25db%258c-%25d8%25b3%25d8%25b1%25db%258c%25d8%25b9-apache-virtual-host%2F&amp;linkname=%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C%20%D8%B3%D8%B1%DB%8C%D8%B9%20Apache%20Virtual%20Host" title="Google+" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/google_plus.png" width="16" height="16" alt="Google+"/></a><a class="a2a_button_facebook" href="http://www.addtoany.com/add_to/facebook?linkurl=http%3A%2F%2Fzebardast.ir%2F%25d8%25b1%25d8%25a7%25d9%2587%25d9%2586%25d9%2585%25d8%25a7%25db%258c-%25d8%25b3%25d8%25b1%25db%258c%25d8%25b9-apache-virtual-host%2F&amp;linkname=%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C%20%D8%B3%D8%B1%DB%8C%D8%B9%20Apache%20Virtual%20Host" title="Facebook" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/facebook.png" width="16" height="16" alt="Facebook"/></a><a class="a2a_button_twitter" href="http://www.addtoany.com/add_to/twitter?linkurl=http%3A%2F%2Fzebardast.ir%2F%25d8%25b1%25d8%25a7%25d9%2587%25d9%2586%25d9%2585%25d8%25a7%25db%258c-%25d8%25b3%25d8%25b1%25db%258c%25d8%25b9-apache-virtual-host%2F&amp;linkname=%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C%20%D8%B3%D8%B1%DB%8C%D8%B9%20Apache%20Virtual%20Host" title="Twitter" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/twitter.png" width="16" height="16" alt="Twitter"/></a><a class="a2a_button_identi_ca" href="http://www.addtoany.com/add_to/identi_ca?linkurl=http%3A%2F%2Fzebardast.ir%2F%25d8%25b1%25d8%25a7%25d9%2587%25d9%2586%25d9%2585%25d8%25a7%25db%258c-%25d8%25b3%25d8%25b1%25db%258c%25d8%25b9-apache-virtual-host%2F&amp;linkname=%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C%20%D8%B3%D8%B1%DB%8C%D8%B9%20Apache%20Virtual%20Host" title="Identi.ca" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/identica.png" width="16" height="16" alt="Identi.ca"/></a><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fzebardast.ir%2F%25d8%25b1%25d8%25a7%25d9%2587%25d9%2586%25d9%2585%25d8%25a7%25db%258c-%25d8%25b3%25d8%25b1%25db%258c%25d8%25b9-apache-virtual-host%2F&amp;title=%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C%20%D8%B3%D8%B1%DB%8C%D8%B9%20Apache%20Virtual%20Host" id="wpa2a_12">اشتراک‌گذاری</a></p><p><strong>مطالب مرتبط:</strong><ol><li><a href='http://zebardast.ir/%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-%d8%b3%d8%b1%db%8c%d8%b9-%d8%ac%d8%a7%d9%88%d8%a7-%d8%a7%d8%b3%da%a9%d8%b1%db%8c%d9%be%d8%aa/' rel='bookmark' title='راهنمای سریع جاوا اسکریپت'>راهنمای سریع جاوا اسکریپت</a></li><li><a href='http://zebardast.ir/linux-commands/' rel='bookmark' title='مرجع دستورات خط فرمان لینوکس'>مرجع دستورات خط فرمان لینوکس</a></li><li><a href='http://zebardast.ir/ubuntu-quick-reference/' rel='bookmark' title='راهنمای سریع دستورات برای شروع کار با اوبونتو'>راهنمای سریع دستورات برای شروع کار با اوبونتو</a></li></ol></p>]]></content:encoded> <wfw:commentRss>http://zebardast.ir/%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-%d8%b3%d8%b1%db%8c%d8%b9-apache-virtual-host/feed/</wfw:commentRss> <slash:comments>15</slash:comments> </item> <item><title>اعمال چندین کلاس به یک عنصر (تگ) HTML</title><link>http://zebardast.ir/%d8%a7%d8%b9%d9%85%d8%a7%d9%84-%da%86%d9%86%d8%af%db%8c%d9%86-%da%a9%d9%84%d8%a7%d8%b3-%d8%a8%d9%87-%db%8c%da%a9-%d8%b9%d9%86%d8%b5%d8%b1-%d8%aa%da%af-html/</link> <comments>http://zebardast.ir/%d8%a7%d8%b9%d9%85%d8%a7%d9%84-%da%86%d9%86%d8%af%db%8c%d9%86-%da%a9%d9%84%d8%a7%d8%b3-%d8%a8%d9%87-%db%8c%da%a9-%d8%b9%d9%86%d8%b5%d8%b1-%d8%aa%da%af-html/#comments</comments> <pubDate>Thu, 17 May 2007 19:10:39 +0000</pubDate> <dc:creator>سعید زبردست</dc:creator> <category><![CDATA[سی اس اس (css)]]></category><guid isPermaLink="false">http://itpencil.wordpress.com/2007/05/17/%d8%a7%d8%b9%d9%85%d8%a7%d9%84-%da%86%d9%86%d8%af%db%8c%d9%86-%da%a9%d9%84%d8%a7%d8%b3-%d8%a8%d9%87-%db%8c%da%a9-%d8%b9%d9%86%d8%b5%d8%b1-%d8%aa%da%af-html/</guid> <description><![CDATA[سلام گاهی اوقات نیاز به اعمال چندین کلاس به یک عنصر دارید. مثلا فرض کنید که یک کلاس برای بردر (قاب؟) های کم رنگ، یک کلاس دیگر برای بک گراند (پس زمینه؟) های پر رنگ و یک کلاس دیگر برای فونت ها ایجاد کرده باشید. برای ترکیب این کلاس ها و استفاده آنها کافیست نام [...] <strong>مطالب مرتبط:</strong><ol><li><a href='http://zebardast.ir/%d9%86%d8%ad%d9%88%d9%87-%d9%86%da%af%d8%a7%d8%b1%d8%b4-%d8%af%d8%b3%d8%aa%d9%88%d8%b1%d8%a7%d8%aa-css/' rel='bookmark' title='نحوه نگارش دستورات css'>نحوه نگارش دستورات css</a></li><li><a href='http://zebardast.ir/%da%a9%d8%aa%d8%a7%d8%a8-%d8%a7%d9%84%da%a9%d8%aa%d8%b1%d9%88%d9%86%db%8c%da%a9%db%8c-%d8%a2%d9%85%d9%88%d8%b2%d8%b4-html/' rel='bookmark' title='از سیر تا پیاز HTML در کتاب الکترونیکی آموزش html'>از سیر تا پیاز HTML در کتاب الکترونیکی آموزش html</a></li><li><a href='http://zebardast.ir/html-%da%86%db%8c%d8%b3%d8%aa%d8%9f/' rel='bookmark' title='HTML چیست؟'>HTML چیست؟</a></li></ol>]]></description> <content:encoded><![CDATA[<p>سلام</p><p>گاهی اوقات نیاز به اعمال چندین کلاس به یک عنصر دارید. مثلا فرض کنید که یک کلاس برای بردر (قاب؟) های کم رنگ، یک کلاس دیگر برای بک گراند (پس زمینه؟) های پر رنگ و یک کلاس دیگر برای فونت ها ایجاد کرده باشید.<br /> برای ترکیب این کلاس ها و استفاده آنها کافیست نام آنها را در ویژگی class یک عنصر با فاصله از هم جدا کرده و بنویسید. مانند:</p><p dir="ltr" align="left"> &lt;p class=&#8221;cl1 cl2 cl3&#8243;&gt;</p><p>موفق باشید</p><p><a class="a2a_button_google_plus" href="http://www.addtoany.com/add_to/google_plus?linkurl=http%3A%2F%2Fzebardast.ir%2F%25d8%25a7%25d8%25b9%25d9%2585%25d8%25a7%25d9%2584-%25da%2586%25d9%2586%25d8%25af%25db%258c%25d9%2586-%25da%25a9%25d9%2584%25d8%25a7%25d8%25b3-%25d8%25a8%25d9%2587-%25db%258c%25da%25a9-%25d8%25b9%25d9%2586%25d8%25b5%25d8%25b1-%25d8%25aa%25da%25af-html%2F&amp;linkname=%D8%A7%D8%B9%D9%85%D8%A7%D9%84%20%DA%86%D9%86%D8%AF%DB%8C%D9%86%20%DA%A9%D9%84%D8%A7%D8%B3%20%D8%A8%D9%87%20%DB%8C%DA%A9%20%D8%B9%D9%86%D8%B5%D8%B1%20%28%D8%AA%DA%AF%29%20HTML" title="Google+" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/google_plus.png" width="16" height="16" alt="Google+"/></a><a class="a2a_button_facebook" href="http://www.addtoany.com/add_to/facebook?linkurl=http%3A%2F%2Fzebardast.ir%2F%25d8%25a7%25d8%25b9%25d9%2585%25d8%25a7%25d9%2584-%25da%2586%25d9%2586%25d8%25af%25db%258c%25d9%2586-%25da%25a9%25d9%2584%25d8%25a7%25d8%25b3-%25d8%25a8%25d9%2587-%25db%258c%25da%25a9-%25d8%25b9%25d9%2586%25d8%25b5%25d8%25b1-%25d8%25aa%25da%25af-html%2F&amp;linkname=%D8%A7%D8%B9%D9%85%D8%A7%D9%84%20%DA%86%D9%86%D8%AF%DB%8C%D9%86%20%DA%A9%D9%84%D8%A7%D8%B3%20%D8%A8%D9%87%20%DB%8C%DA%A9%20%D8%B9%D9%86%D8%B5%D8%B1%20%28%D8%AA%DA%AF%29%20HTML" title="Facebook" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/facebook.png" width="16" height="16" alt="Facebook"/></a><a class="a2a_button_twitter" href="http://www.addtoany.com/add_to/twitter?linkurl=http%3A%2F%2Fzebardast.ir%2F%25d8%25a7%25d8%25b9%25d9%2585%25d8%25a7%25d9%2584-%25da%2586%25d9%2586%25d8%25af%25db%258c%25d9%2586-%25da%25a9%25d9%2584%25d8%25a7%25d8%25b3-%25d8%25a8%25d9%2587-%25db%258c%25da%25a9-%25d8%25b9%25d9%2586%25d8%25b5%25d8%25b1-%25d8%25aa%25da%25af-html%2F&amp;linkname=%D8%A7%D8%B9%D9%85%D8%A7%D9%84%20%DA%86%D9%86%D8%AF%DB%8C%D9%86%20%DA%A9%D9%84%D8%A7%D8%B3%20%D8%A8%D9%87%20%DB%8C%DA%A9%20%D8%B9%D9%86%D8%B5%D8%B1%20%28%D8%AA%DA%AF%29%20HTML" title="Twitter" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/twitter.png" width="16" height="16" alt="Twitter"/></a><a class="a2a_button_identi_ca" href="http://www.addtoany.com/add_to/identi_ca?linkurl=http%3A%2F%2Fzebardast.ir%2F%25d8%25a7%25d8%25b9%25d9%2585%25d8%25a7%25d9%2584-%25da%2586%25d9%2586%25d8%25af%25db%258c%25d9%2586-%25da%25a9%25d9%2584%25d8%25a7%25d8%25b3-%25d8%25a8%25d9%2587-%25db%258c%25da%25a9-%25d8%25b9%25d9%2586%25d8%25b5%25d8%25b1-%25d8%25aa%25da%25af-html%2F&amp;linkname=%D8%A7%D8%B9%D9%85%D8%A7%D9%84%20%DA%86%D9%86%D8%AF%DB%8C%D9%86%20%DA%A9%D9%84%D8%A7%D8%B3%20%D8%A8%D9%87%20%DB%8C%DA%A9%20%D8%B9%D9%86%D8%B5%D8%B1%20%28%D8%AA%DA%AF%29%20HTML" title="Identi.ca" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/identica.png" width="16" height="16" alt="Identi.ca"/></a><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fzebardast.ir%2F%25d8%25a7%25d8%25b9%25d9%2585%25d8%25a7%25d9%2584-%25da%2586%25d9%2586%25d8%25af%25db%258c%25d9%2586-%25da%25a9%25d9%2584%25d8%25a7%25d8%25b3-%25d8%25a8%25d9%2587-%25db%258c%25da%25a9-%25d8%25b9%25d9%2586%25d8%25b5%25d8%25b1-%25d8%25aa%25da%25af-html%2F&amp;title=%D8%A7%D8%B9%D9%85%D8%A7%D9%84%20%DA%86%D9%86%D8%AF%DB%8C%D9%86%20%DA%A9%D9%84%D8%A7%D8%B3%20%D8%A8%D9%87%20%DB%8C%DA%A9%20%D8%B9%D9%86%D8%B5%D8%B1%20%28%D8%AA%DA%AF%29%20HTML" id="wpa2a_14">اشتراک‌گذاری</a></p><p><strong>مطالب مرتبط:</strong><ol><li><a href='http://zebardast.ir/%d9%86%d8%ad%d9%88%d9%87-%d9%86%da%af%d8%a7%d8%b1%d8%b4-%d8%af%d8%b3%d8%aa%d9%88%d8%b1%d8%a7%d8%aa-css/' rel='bookmark' title='نحوه نگارش دستورات css'>نحوه نگارش دستورات css</a></li><li><a href='http://zebardast.ir/%da%a9%d8%aa%d8%a7%d8%a8-%d8%a7%d9%84%da%a9%d8%aa%d8%b1%d9%88%d9%86%db%8c%da%a9%db%8c-%d8%a2%d9%85%d9%88%d8%b2%d8%b4-html/' rel='bookmark' title='از سیر تا پیاز HTML در کتاب الکترونیکی آموزش html'>از سیر تا پیاز HTML در کتاب الکترونیکی آموزش html</a></li><li><a href='http://zebardast.ir/html-%da%86%db%8c%d8%b3%d8%aa%d8%9f/' rel='bookmark' title='HTML چیست؟'>HTML چیست؟</a></li></ol></p>]]></content:encoded> <wfw:commentRss>http://zebardast.ir/%d8%a7%d8%b9%d9%85%d8%a7%d9%84-%da%86%d9%86%d8%af%db%8c%d9%86-%da%a9%d9%84%d8%a7%d8%b3-%d8%a8%d9%87-%db%8c%da%a9-%d8%b9%d9%86%d8%b5%d8%b1-%d8%aa%da%af-html/feed/</wfw:commentRss> <slash:comments>2</slash:comments> </item> <item><title>حل مشکل سایز فیلد password در IE</title><link>http://zebardast.ir/password-field-solution-in-ie/</link> <comments>http://zebardast.ir/password-field-solution-in-ie/#comments</comments> <pubDate>Mon, 05 Feb 2007 11:41:03 +0000</pubDate> <dc:creator>سعید زبردست</dc:creator> <category><![CDATA[زبان (X)HTML]]></category> <category><![CDATA[سی اس اس (css)]]></category><guid isPermaLink="false">http://itpencil.wordpress.com/2007/02/05/password-field-solution-in-ie/</guid> <description><![CDATA[سلام یکی از اشکلات IE در نمایش فیلد های password فرم ها می باشد. به تصویر زیر توجه کنید: برای حل این مشکل کافیست تا به همه فیلد های خود (برای داشتن اندازه ی برابر) کد استایل زیر را اضافه نمائید: style=&#8221;font-family:&#8217;arial&#8217;;&#8221; البته arial هر مقداری می تواند باشد. مهم اعمال خصیصه font-family می باشد.(این [...] <strong>مطالب مرتبط:</strong><ol><li><a href='http://zebardast.ir/%d9%85%d9%82%d8%af%d9%85%d9%87-mysql/' rel='bookmark' title='مقدمه MySQL'>مقدمه MySQL</a></li><li><a href='http://zebardast.ir/firefox-wallpaper/' rel='bookmark' title='گالری فایرفاکس'>گالری فایرفاکس</a></li><li><a href='http://zebardast.ir/%d8%b1%d8%a7%d9%87-%d8%a7%d9%86%d8%af%d8%a7%d8%b2%db%8c-php-%d8%af%d8%b1-%d9%88%db%8c%d9%86%d8%af%d9%88%d8%b2-%d9%82%d8%b3%d9%85%d8%aa-%d8%af%d9%88%d9%85/' rel='bookmark' title='راه اندازی PHP در ویندوز قسمت دوم'>راه اندازی PHP در ویندوز قسمت دوم</a></li></ol>]]></description> <content:encoded><![CDATA[<p>سلام</p><p>یکی از اشکلات <acronym title="Internet Explorer">IE</acronym> در نمایش فیلد های password فرم ها می باشد. به تصویر زیر توجه کنید:</p><div><img src='http://dev.cheshmak.net/wp-content/uploads/2007/02/password-field-solution.jpg' alt='password field solution in IE' /></div><p>برای حل این مشکل کافیست تا به همه فیلد های خود (برای داشتن اندازه ی برابر) کد استایل زیر را اضافه نمائید:</p><div class="inner_post_code"> style=&#8221;font-family:&#8217;arial&#8217;;&#8221;</div><p>البته arial هر مقداری می تواند باشد. مهم اعمال خصیصه <font>font-family</font> می باشد.(این اعمال می تواند توسط کلاس ها، تگ ها و &#8230; صورت گیرد.)</p><p>به عکس زیر توجه کنید:</p><div><img src='http://dev.cheshmak.net/wp-content/uploads/2007/02/password-field-solution-fixed.jpg' alt='password field fixed in IE' /></div><p>موفق باشید</p><p><a class="a2a_button_google_plus" href="http://www.addtoany.com/add_to/google_plus?linkurl=http%3A%2F%2Fzebardast.ir%2Fpassword-field-solution-in-ie%2F&amp;linkname=%D8%AD%D9%84%20%D9%85%D8%B4%DA%A9%D9%84%20%D8%B3%D8%A7%DB%8C%D8%B2%20%D9%81%DB%8C%D9%84%D8%AF%20password%20%D8%AF%D8%B1%20IE" title="Google+" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/google_plus.png" width="16" height="16" alt="Google+"/></a><a class="a2a_button_facebook" href="http://www.addtoany.com/add_to/facebook?linkurl=http%3A%2F%2Fzebardast.ir%2Fpassword-field-solution-in-ie%2F&amp;linkname=%D8%AD%D9%84%20%D9%85%D8%B4%DA%A9%D9%84%20%D8%B3%D8%A7%DB%8C%D8%B2%20%D9%81%DB%8C%D9%84%D8%AF%20password%20%D8%AF%D8%B1%20IE" title="Facebook" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/facebook.png" width="16" height="16" alt="Facebook"/></a><a class="a2a_button_twitter" href="http://www.addtoany.com/add_to/twitter?linkurl=http%3A%2F%2Fzebardast.ir%2Fpassword-field-solution-in-ie%2F&amp;linkname=%D8%AD%D9%84%20%D9%85%D8%B4%DA%A9%D9%84%20%D8%B3%D8%A7%DB%8C%D8%B2%20%D9%81%DB%8C%D9%84%D8%AF%20password%20%D8%AF%D8%B1%20IE" title="Twitter" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/twitter.png" width="16" height="16" alt="Twitter"/></a><a class="a2a_button_identi_ca" href="http://www.addtoany.com/add_to/identi_ca?linkurl=http%3A%2F%2Fzebardast.ir%2Fpassword-field-solution-in-ie%2F&amp;linkname=%D8%AD%D9%84%20%D9%85%D8%B4%DA%A9%D9%84%20%D8%B3%D8%A7%DB%8C%D8%B2%20%D9%81%DB%8C%D9%84%D8%AF%20password%20%D8%AF%D8%B1%20IE" title="Identi.ca" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/identica.png" width="16" height="16" alt="Identi.ca"/></a><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fzebardast.ir%2Fpassword-field-solution-in-ie%2F&amp;title=%D8%AD%D9%84%20%D9%85%D8%B4%DA%A9%D9%84%20%D8%B3%D8%A7%DB%8C%D8%B2%20%D9%81%DB%8C%D9%84%D8%AF%20password%20%D8%AF%D8%B1%20IE" id="wpa2a_16">اشتراک‌گذاری</a></p><p><strong>مطالب مرتبط:</strong><ol><li><a href='http://zebardast.ir/%d9%85%d9%82%d8%af%d9%85%d9%87-mysql/' rel='bookmark' title='مقدمه MySQL'>مقدمه MySQL</a></li><li><a href='http://zebardast.ir/firefox-wallpaper/' rel='bookmark' title='گالری فایرفاکس'>گالری فایرفاکس</a></li><li><a href='http://zebardast.ir/%d8%b1%d8%a7%d9%87-%d8%a7%d9%86%d8%af%d8%a7%d8%b2%db%8c-php-%d8%af%d8%b1-%d9%88%db%8c%d9%86%d8%af%d9%88%d8%b2-%d9%82%d8%b3%d9%85%d8%aa-%d8%af%d9%88%d9%85/' rel='bookmark' title='راه اندازی PHP در ویندوز قسمت دوم'>راه اندازی PHP در ویندوز قسمت دوم</a></li></ol></p>]]></content:encoded> <wfw:commentRss>http://zebardast.ir/password-field-solution-in-ie/feed/</wfw:commentRss> <slash:comments>2</slash:comments> </item> <item><title>توضیحات شرطی &#8211; Conditional Comments</title><link>http://zebardast.ir/%d8%aa%d9%88%d8%b6%db%8c%d8%ad%d8%a7%d8%aa-%d8%b4%d8%b1%d8%b7%db%8c-conditional-comments/</link> <comments>http://zebardast.ir/%d8%aa%d9%88%d8%b6%db%8c%d8%ad%d8%a7%d8%aa-%d8%b4%d8%b1%d8%b7%db%8c-conditional-comments/#comments</comments> <pubDate>Wed, 31 Jan 2007 09:13:33 +0000</pubDate> <dc:creator>سعید زبردست</dc:creator> <category><![CDATA[زبان (X)HTML]]></category><guid isPermaLink="false">http://itpencil.wordpress.com/2007/01/31/%d8%aa%d9%88%d8%b6%db%8c%d8%ad%d8%a7%d8%aa-%d8%b4%d8%b1%d8%b7%db%8c-conditional-comments/</guid> <description><![CDATA[سلام مقدمه گاهی اوقات در طراحی سایت، شما به مشکل مغایرت طراحی در دو مرورگر فایرفاکس و اینترنت اکسپلورر برخورد می کنید. مثلا text-align در فایرفاکس درست دیده می شود ولی اینترنت اکسپلورر آن را اشتباه نمایش می دهد. البته در صورت کد نویسی صحیح اینگونه مشکلات کمتر پیش می آید. Conditional Comments، توضیحات شرطی [...] <strong>مطالب مرتبط:</strong><ol><li><a href='http://zebardast.ir/%d9%81%d8%b6%d8%a7%db%8c-%d8%b3%d9%81%db%8c%d8%af-%d9%88-%d8%aa%d9%88%d8%b6%db%8c%d8%ad%d8%a7%d8%aa/' rel='bookmark' title='فضای سفید و توضیحات'>فضای سفید و توضیحات</a></li><li><a href='http://zebardast.ir/css-text-indent-property-3/' rel='bookmark' title='خاصیت توو رفتگی سر سطر (CSS text-indent Property)'>خاصیت توو رفتگی سر سطر (CSS text-indent Property)</a></li><li><a href='http://zebardast.ir/%d8%af%d8%b1%d8%a8%d8%a7%d8%b1%d9%87-html-5/' rel='bookmark' title='درباره HTML 5'>درباره HTML 5</a></li></ol>]]></description> <content:encoded><![CDATA[<p>سلام</p><p><strong>مقدمه</strong><br /> گاهی اوقات در طراحی سایت، شما به مشکل مغایرت طراحی در دو مرورگر فایرفاکس و اینترنت اکسپلورر برخورد می کنید. مثلا text-align در فایرفاکس درست دیده می شود ولی اینترنت اکسپلورر آن را اشتباه نمایش می دهد. البته در صورت کد نویسی صحیح اینگونه مشکلات کمتر پیش می آید.<br /> Conditional Comments، توضیحات شرطی خاصی می باشند که همانند یک اکستنشن در IE نسخه 5 به بالا کار می کنند. Conditional Comments به شما قابلیت تشخیص مرورگر IE و نسخه آن را می دهند.</p><p><strong>نحوه استفاده</strong><br /> در زیر یک توضیح ساده که در بین کدهای x-html نوشته می شود را مشاهده می کنید:</p><pre lang="bash" escaped="true">&lt;!-- This text will be ignored by the browser. --&gt;</pre><p>ساده ترین دستور زبان <span>Conditional Comments</span> مانند زیر است:</p><pre lang="bash" escaped="true">&lt;!--[if IE]&gt;
This text will be shown by IE/win ver. 5.0 and higher.
 &lt;![endif]--&gt;</pre><p><span id="more-172"></span><br /> برای اعمال دستورات بر روی نسخه خاصی از IE می توانید نسخه آن را به صورت زیر بعد از [if IE بنویسید(در اینجا نسخه های 5 اعمال شده اند. مانند 5, 5.1, 5.5 و ...):</p><pre lang="bash" escaped="true">&lt;!--[if IE 5]&gt;
The major version number of this browser is 5.
&lt;![endif]&#8211;&gt;</pre><p>(در اینجا نسخه 5.5 اعمال شده است)</p><pre lang="bash" escaped="true">&lt;!--[if IE <strong>5.5000</strong>]&gt;
You are using IE/win 5.5.
 &lt;![endif]--&gt;</pre><p>همچنین این دستورات قابلیت استفاده از عمگلر هایی مانند  &lt;, &gt; و ...  را دارند که در زیر معرفی شده اند:<br /> lt : کوچکتر <span>less than</span><br /> lte : کوچکتر یا مساوی <span>less than or equal</span><br /> gt : بزرگتر <span>greater than</span><br /> gte : بزرگتر یا مساوی <span>greater than or equal</span></p><p>نحوه نگارش این عملگرها در دستور زبان Conditional Comments به صورت زیر است:</p><pre lang="bash" escaped="true">&lt;!--[if gte IE 6]&gt;
This text will be shown by IE/win ver. 6.0 and higher.
 &lt;![endif]--&gt;</pre><p>عملگر نفی (!) نیز قابل استفاده است:</p><pre lang="bash" escaped="true">&lt;!--[if !gte IE 6]&gt;
 This text will be shown by IE/win ver. 6.0 and higher.
 &lt;![endif]--&gt;</pre><p>و یا:</p><pre lang="bash" escaped="true">&lt;!--[if !IE]&gt;
This text will be not be shown by any version  of IE/win that understands conditional comments. It won't be shown by  any other browsers either because they will treat this as a normal  comment.
 &lt;![endif]--&gt;</pre><p>آخرین کدی که در بالا نوشته شده است به معنی اعمل دستورات در مرورگری به جز IE است.</p><p><strong>نمونه کد کامل برای <acronym title="Extensible HyperText Markup Language">X</acronym>-<acronym title="Hyper Text Markup Language">HTML</acronym></strong></p><pre lang="bash" escaped="true">

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;Conditional comments&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!--[if !IE]&gt;        &lt;p&gt;This is page is not being viewed with Internet Explorer
 for Windows version 5.0 or higher.&lt;/p&gt;      &lt;!--&lt;![endif]--&gt;
&lt;!--[if IE]&gt;        &lt;p&gt;This is page is being viewed with Internet Explorer
 for Windows version 5.0 or higher.&lt;/p&gt;      &lt;![endif]--&gt;
&lt;/body&gt;
&lt;/html&gt;</pre><p><strong>نمونه کد کامل برای <acronym title="Cascading Style Sheets">CSS</acronym></strong></p><pre lang="bash" escaped="true">&lt;head&gt;
&lt;title&gt;Conditional comments&lt;/title&gt;
&lt;link rel="sytlesheet" type="text/css" href="style.css"&gt;
&lt;!--[if IE 5]&gt;
 &lt;link rel="sytlesheet" type="text/css" href="bugFixForIE5x.css"&gt;
    &lt;![endif]--&gt;
&lt;/head&gt;</pre><p><a href="http://en.wikibooks.org/wiki/Conditional_Comments">منبع</a> (<a href="http://en.wikibooks.org/wiki/Conditional_Comments">source</a>)<br /> موفق باشید</p><p><a class="a2a_button_google_plus" href="http://www.addtoany.com/add_to/google_plus?linkurl=http%3A%2F%2Fzebardast.ir%2F%25d8%25aa%25d9%2588%25d8%25b6%25db%258c%25d8%25ad%25d8%25a7%25d8%25aa-%25d8%25b4%25d8%25b1%25d8%25b7%25db%258c-conditional-comments%2F&amp;linkname=%D8%AA%D9%88%D8%B6%DB%8C%D8%AD%D8%A7%D8%AA%20%D8%B4%D8%B1%D8%B7%DB%8C%20%E2%80%93%20Conditional%20Comments" title="Google+" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/google_plus.png" width="16" height="16" alt="Google+"/></a><a class="a2a_button_facebook" href="http://www.addtoany.com/add_to/facebook?linkurl=http%3A%2F%2Fzebardast.ir%2F%25d8%25aa%25d9%2588%25d8%25b6%25db%258c%25d8%25ad%25d8%25a7%25d8%25aa-%25d8%25b4%25d8%25b1%25d8%25b7%25db%258c-conditional-comments%2F&amp;linkname=%D8%AA%D9%88%D8%B6%DB%8C%D8%AD%D8%A7%D8%AA%20%D8%B4%D8%B1%D8%B7%DB%8C%20%E2%80%93%20Conditional%20Comments" title="Facebook" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/facebook.png" width="16" height="16" alt="Facebook"/></a><a class="a2a_button_twitter" href="http://www.addtoany.com/add_to/twitter?linkurl=http%3A%2F%2Fzebardast.ir%2F%25d8%25aa%25d9%2588%25d8%25b6%25db%258c%25d8%25ad%25d8%25a7%25d8%25aa-%25d8%25b4%25d8%25b1%25d8%25b7%25db%258c-conditional-comments%2F&amp;linkname=%D8%AA%D9%88%D8%B6%DB%8C%D8%AD%D8%A7%D8%AA%20%D8%B4%D8%B1%D8%B7%DB%8C%20%E2%80%93%20Conditional%20Comments" title="Twitter" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/twitter.png" width="16" height="16" alt="Twitter"/></a><a class="a2a_button_identi_ca" href="http://www.addtoany.com/add_to/identi_ca?linkurl=http%3A%2F%2Fzebardast.ir%2F%25d8%25aa%25d9%2588%25d8%25b6%25db%258c%25d8%25ad%25d8%25a7%25d8%25aa-%25d8%25b4%25d8%25b1%25d8%25b7%25db%258c-conditional-comments%2F&amp;linkname=%D8%AA%D9%88%D8%B6%DB%8C%D8%AD%D8%A7%D8%AA%20%D8%B4%D8%B1%D8%B7%DB%8C%20%E2%80%93%20Conditional%20Comments" title="Identi.ca" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/identica.png" width="16" height="16" alt="Identi.ca"/></a><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fzebardast.ir%2F%25d8%25aa%25d9%2588%25d8%25b6%25db%258c%25d8%25ad%25d8%25a7%25d8%25aa-%25d8%25b4%25d8%25b1%25d8%25b7%25db%258c-conditional-comments%2F&amp;title=%D8%AA%D9%88%D8%B6%DB%8C%D8%AD%D8%A7%D8%AA%20%D8%B4%D8%B1%D8%B7%DB%8C%20%E2%80%93%20Conditional%20Comments" id="wpa2a_18">اشتراک‌گذاری</a></p><p><strong>مطالب مرتبط:</strong><ol><li><a href='http://zebardast.ir/%d9%81%d8%b6%d8%a7%db%8c-%d8%b3%d9%81%db%8c%d8%af-%d9%88-%d8%aa%d9%88%d8%b6%db%8c%d8%ad%d8%a7%d8%aa/' rel='bookmark' title='فضای سفید و توضیحات'>فضای سفید و توضیحات</a></li><li><a href='http://zebardast.ir/css-text-indent-property-3/' rel='bookmark' title='خاصیت توو رفتگی سر سطر (CSS text-indent Property)'>خاصیت توو رفتگی سر سطر (CSS text-indent Property)</a></li><li><a href='http://zebardast.ir/%d8%af%d8%b1%d8%a8%d8%a7%d8%b1%d9%87-html-5/' rel='bookmark' title='درباره HTML 5'>درباره HTML 5</a></li></ol></p>]]></content:encoded> <wfw:commentRss>http://zebardast.ir/%d8%aa%d9%88%d8%b6%db%8c%d8%ad%d8%a7%d8%aa-%d8%b4%d8%b1%d8%b7%db%8c-conditional-comments/feed/</wfw:commentRss> <slash:comments>5</slash:comments> </item> <item><title>واحد های CSS</title><link>http://zebardast.ir/css-units/</link> <comments>http://zebardast.ir/css-units/#comments</comments> <pubDate>Sun, 28 Jan 2007 11:42:40 +0000</pubDate> <dc:creator>سعید زبردست</dc:creator> <category><![CDATA[سی اس اس (css)]]></category><guid isPermaLink="false">http://itpencil.wordpress.com/2007/01/28/css-units/</guid> <description><![CDATA[سلام CSS دارای واحد هایی جهت استفاده است که گاه باعث سردرگمی افراد می شود. این واحد ها که تعداد آنها 12 عدد می باشد، در دو بخش عمومی و رنگ ها تقسیم بندی می شوند. بخش عمومی واحد توضیحات % درصد in اینچ cm سانتی متر mm میلی متر em 1em برابر با سایر [...] <strong>مطالب مرتبط:</strong><ol><li><a href='http://zebardast.ir/%d9%82%d8%a8%d9%84-%d8%a7%d8%b2-%d8%a7%d9%86%d8%aa%d8%ae%d8%a7%d8%a8-%d9%88%d8%a7%d8%ad%d8%af/' rel='bookmark' title='قبل از انتخاب واحد'>قبل از انتخاب واحد</a></li><li><a href='http://zebardast.ir/%d8%a8%d8%b9%d8%af-%d8%a7%d8%b2-%d8%a7%d9%86%d8%aa%d8%ae%d8%a7%d8%a8-%d9%88%d8%a7%d8%ad%d8%af/' rel='bookmark' title='بعد از انتخاب واحد'>بعد از انتخاب واحد</a></li><li><a href='http://zebardast.ir/%d8%b9%da%a9%d8%b3-%d9%87%d8%a7%db%8c-%d8%a7%d9%86%d8%aa%d8%ae%d8%a7%d8%a8-%d9%88%d8%a7%d8%ad%d8%af/' rel='bookmark' title='عکس های انتخاب واحد'>عکس های انتخاب واحد</a></li></ol>]]></description> <content:encoded><![CDATA[<p>سلام<br /> <acronym title="Cascading Style Sheets">CSS</acronym> دارای واحد هایی  جهت استفاده است که گاه باعث سردرگمی افراد می شود. این واحد ها که تعداد آنها 12 عدد می باشد، در دو بخش عمومی و رنگ ها تقسیم بندی می شوند.</p><table><tr><td><strong>بخش عمومی</strong></p><table cellspacing="3" dir="rtl" align="left" style="border:1px solid #FFCC00;line-height:22px;background:#f5f5f5;" width="100%" cellpadding="3"><tr align="left"><th width="25%" align="right">واحد</th><th width="75%" align="right">توضیحات</th></tr><tr align="left"><td valign="top" dir="ltr" align="right">%</td><td valign="top" dir="rtl" align="right">درصد</td></tr><tr align="left" style="background:#f0f0f0;"><td valign="top" dir="ltr" align="right">in</td><td valign="top" dir="rtl" align="right">اینچ</td></tr><tr align="left"><td valign="top" dir="ltr" align="right">cm</td><td valign="top" dir="rtl" align="right">سانتی متر</td></tr><tr align="left" style="background:#f0f0f0;"><td valign="top" dir="ltr" align="right">mm</td><td valign="top" dir="rtl" align="right">میلی متر</td></tr><tr align="left"><td valign="top" dir="ltr" align="right">em</td><td valign="top" dir="rtl" align="right">1em برابر با سایر فونت فعلی می باشد. 2em برابر با 2 برابر سایز فونت فعلی می باشد.. مثلا اگر سایز فونت فعلی 12pt باشد، آنگاه 2em به معنی 24pt است. em یکی اتز کاربردیترین واحدد های css می باشد که برای سادگی در دادن اندازه های نسبی به کار می رود.</td></tr><tr align="left" style="background:#f0f0f0;"><td valign="top" dir="ltr" align="right">ex</td><td valign="top" dir="rtl" align="right">ex به معنی x-height است. x-height همان ارتفاع فعلی کاراکتر x است.</td></tr><tr align="left"><td valign="top" dir="ltr" align="right">pt</td><td valign="top" dir="rtl" align="right">پوینت (point). (یک pt برابر با <font>1/72</font> اینچ است)</td></tr><tr align="left" style="background:#f0f0f0;"><td valign="top" dir="ltr" align="right">pc</td><td valign="top" dir="rtl" align="right">پیکا (pica).  (یک pc بابر با 12pt است)</td></tr><tr align="left"><td valign="top" dir="ltr" align="right">px</td><td valign="top" dir="rtl" align="right">پیکسل (pixels). (کوچکترین نقطه در مونیتور)</td></tr></table></td></tr><tr><td><h3>رنگ ها</h3><table cellspacing="3" dir="rtl" align="left" style="border:1px solid #FFCC00;line-height:22px;background:#f5f5f5;" width="100%" cellpadding="3"><tr align="left"><th width="25%" align="right">واحد</th><th width="75%" align="right">توضیحات</th></tr><tr align="left" style="background:#f0f0f0;"><td valign="top" dir="ltr" align="right"><i>نام رنگ</i></td><td valign="top" dir="rtl" align="right">نام یک رنگ. مانند red که همان قرمز است. به نکته زیر جدول توجه نمایید.</td></tr><tr align="left"><td valign="top" dir="ltr" align="right">rgb(x,x,x)</td><td valign="top" dir="rtl" align="right">مقدار RGB (مانند <font>rgb(255,0,0)</font>)</td></tr><tr align="left" style="background:#f0f0f0;"><td valign="top" dir="ltr" align="right">rgb(x%, x%, x%)</td><td valign="top" dir="rtl" align="right">مقدار RGB بر حسب درصد (مانند <font>rgb(100%,0%,0%)</font>)</td></tr><tr align="left"><td valign="top" dir="ltr" align="right">#rrggbb</td><td valign="top" dir="rtl" align="right">عددی بر مبنای 16 (مانند <font>#ff0000</font>)</td></tr></table></td></tr></table><p><em>نکته</em><br /> 16 رنگ RGB مهم در ویندوز عبارتند از:<br /> <strong><span style="color:aqua;background:white;">aqua</span></strong>, <strong><span style="color:black;background:white;">black</span></strong>, <strong><span style="color:blue;background:white;">blue</span></strong>, <strong><span style="color:fuchsia;background:white;">fuchsia</span></strong>, <strong><span style="color:gray;background:white;">gray</span></strong>, <strong><span style="color:green;background:white;">green</span></strong>, <strong><span style="color:lime;background:white;">lime</span></strong>, <strong><span style="color:maroon;background:white;">maroon</span></strong>, <strong><span style="color:navy;background:white;">navy</span></strong>, <strong><span style="color:olive;background:white;">olive</span></strong>, <strong><span style="color:purple;background:white;">purple</span></strong>, <strong><span style="color:red;background:white;">red</span></strong>, <strong><span style="color:silver;background:white;">silver</span></strong>, <strong><span style="color:teal;background:white;">teal</span></strong>, <strong><span style="color:white;background:silver;">white</span></strong>, and <strong><span style="color:yellow;background:silver;">yellow</span></strong></p><p>موفق باشید</p><p><a class="a2a_button_google_plus" href="http://www.addtoany.com/add_to/google_plus?linkurl=http%3A%2F%2Fzebardast.ir%2Fcss-units%2F&amp;linkname=%D9%88%D8%A7%D8%AD%D8%AF%20%D9%87%D8%A7%DB%8C%20CSS" title="Google+" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/google_plus.png" width="16" height="16" alt="Google+"/></a><a class="a2a_button_facebook" href="http://www.addtoany.com/add_to/facebook?linkurl=http%3A%2F%2Fzebardast.ir%2Fcss-units%2F&amp;linkname=%D9%88%D8%A7%D8%AD%D8%AF%20%D9%87%D8%A7%DB%8C%20CSS" title="Facebook" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/facebook.png" width="16" height="16" alt="Facebook"/></a><a class="a2a_button_twitter" href="http://www.addtoany.com/add_to/twitter?linkurl=http%3A%2F%2Fzebardast.ir%2Fcss-units%2F&amp;linkname=%D9%88%D8%A7%D8%AD%D8%AF%20%D9%87%D8%A7%DB%8C%20CSS" title="Twitter" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/twitter.png" width="16" height="16" alt="Twitter"/></a><a class="a2a_button_identi_ca" href="http://www.addtoany.com/add_to/identi_ca?linkurl=http%3A%2F%2Fzebardast.ir%2Fcss-units%2F&amp;linkname=%D9%88%D8%A7%D8%AD%D8%AF%20%D9%87%D8%A7%DB%8C%20CSS" title="Identi.ca" rel="nofollow" target="_blank"><img src="http://zebardast.ir/wp-content/plugins/add-to-any/icons/identica.png" width="16" height="16" alt="Identi.ca"/></a><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fzebardast.ir%2Fcss-units%2F&amp;title=%D9%88%D8%A7%D8%AD%D8%AF%20%D9%87%D8%A7%DB%8C%20CSS" id="wpa2a_20">اشتراک‌گذاری</a></p><p><strong>مطالب مرتبط:</strong><ol><li><a href='http://zebardast.ir/%d9%82%d8%a8%d9%84-%d8%a7%d8%b2-%d8%a7%d9%86%d8%aa%d8%ae%d8%a7%d8%a8-%d9%88%d8%a7%d8%ad%d8%af/' rel='bookmark' title='قبل از انتخاب واحد'>قبل از انتخاب واحد</a></li><li><a href='http://zebardast.ir/%d8%a8%d8%b9%d8%af-%d8%a7%d8%b2-%d8%a7%d9%86%d8%aa%d8%ae%d8%a7%d8%a8-%d9%88%d8%a7%d8%ad%d8%af/' rel='bookmark' title='بعد از انتخاب واحد'>بعد از انتخاب واحد</a></li><li><a href='http://zebardast.ir/%d8%b9%da%a9%d8%b3-%d9%87%d8%a7%db%8c-%d8%a7%d9%86%d8%aa%d8%ae%d8%a7%d8%a8-%d9%88%d8%a7%d8%ad%d8%af/' rel='bookmark' title='عکس های انتخاب واحد'>عکس های انتخاب واحد</a></li></ol></p>]]></content:encoded> <wfw:commentRss>http://zebardast.ir/css-units/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> </channel> </rss>
<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using disk: basic
Page Caching using disk: enhanced
Database Caching 27/122 queries in 0.051 seconds using disk: basic
Object Caching 7089/7170 objects using disk: basic

Served from: zebardast.ir @ 2012-05-22 01:18:30 -->
