"javascript" via Ehsan in Google Reader

صفحه فیسبوک ۷Learn راه اندازی شد !

2012-02-12T14:31:51Z

.: چند مطلب تصادفی :.

آموزش جاوااسکریپت (قسمت ۲) متغیرها و فضای ذخیره سازی موقتی داده ها

2012-02-12T10:38:39Z

:: در ادامه ی مجموعه آموزش های ویدیویی زبان های برنامه نویسی تحت وب ، امروز دومین قسمت رو برای مشاهده در اختیار شما قرار میدیم . در آموزش امروز در رابطه با متغیر ها در زبان برنامه نویسی javascript صحبت میشه . همچنین نکات مفیدی در مورد چگونگی نامگذاری متغیر ها در جاوااسکریپت ، چگونگی استفاده از اونها و چند مثال مناسب آورده شده .

در آموزش ویدیویی قسمت دوم جاوااسکریپت در مورد مباحث زیر بحث میشه :

متغیر چیست ؟
دلایل استفاده از متغیرها
شیوه ی تعریف متغیر در زبان جاوااسکریپت و تفاوت اون با دیگر زبان ها
قوانین نامگذاری متغیرها در جاوااسکریپت
چگونگی مقداردهی به متغیرها
کلمات reserve و ذخیره شده در جاوااسکریپت
چند مثال مفید از جمله ساختن یک لینک با استفاده از مقادیر متغیرها

پیشنهاد میشه برای داشتن کیفیت کامل ، این ویدیو رو به صورت تمام صفحه (Full Screen) ببینید :

.: فقط اعضای سایت مجاز به دیدن این قسمت هستند :. در صورتی که عضو سایت هستید از فرم ورود موجود در منوی سمت چپ وارد شوید .
در غیر این صورت در کمتر از 1 دقیقه می توانید در سایت عضو شوید : (عضویت سریع در سایت)

.: مطالب مرتبط با این پست :.

تولید اعداد random و تصادفی در جاوااسکریپت

2012-02-11T17:09:59Z

:: در زبان های برنامه نویسی مختلف اعداد تصادفی اهمیت ویژه ای دارند . در خیلی از الگوریتم های پیشرفته ای که در علوم کامپیوتر استفاده میشه (مثل الگوریتم های ژنتیک) اعداد رندم نقش مهمی رو ایفا میکنند . بدلیل کاربرد زیادشون مخصوصا تو زبان جاوا اسکریپت و صفحات وب ، امروز شیوه ی تولید اعداد تصادفی رو در زبان جاوااسکریپت مفصلا توضیح میدیم .

:: اگر شما بخواید کدهای جاوااسکریپتی شبیه کد نمایش عکس تصادفی ، کد پخش موزیک رندم ، کد نمایش سخن و متن اتفاقی و امثال این کدها رو بنویسید ، حتما نیاز دارید تا عددی رو به صورت تصادفی تولید کنید که معمولا ایندکس آرایه ی نگه دارنده ی آدرس عکس ، موزیک یا نوشته ی تصادفی انتخاب شده هست .

:: تولید اعداد اعشاری تصادفی بین صفر و یک :

:: خوب ، بریم سر اصل مطلب . در javascript برای تولید اعداد random از متد ()Math.random استفاده میشه . متد ()Math.random یک عدد اعشاری بین ۰ و ۱ رو تولید میکنه . به طور مثال اگر شما کد زیر رو درون تگ body در صفحه ی وب قرار بدید یک عدد اعشاری بین ۰ و ۱ ، با بیش از ده رقم اعشار براتون چاپ میشه .

<script type="text/javascript">
    randomNumber = Math.random();
    document.write(randomNumber);
</script>

:: خروجی این کد (یک عدد تصادفی اعشاری بین ۰ و ۱) : (با رفرش صفحه عددی جدید می بینید)

در کد فوق عدد تصادفی توسط متد ()Math.random تولید شده و در متغیر randomNumber قرار میگیره و مقدار این متغیر توسط متد ()document.write در صفحه ی وب چاپ میشه .

:: تولید اعداد اعشاری تصادفی بین صفر و عددی دلخواه :

حالا اگربخواید اعداد بزرگتری رو به صورت رندم تولید کنید کافیه عدد تولید شده توسط متد رندم رو در حداکثر عدد دلخواهتون ضرب کنید . مثلا اگر میخواید یک عدد رندم بین ۰ تا ۱۰۰ تولید کنید ، همون کد بالا رو به شکل زیر داریم :

<script type="text/javascript">
    randomNumber = Math.random() * 100;
    document.write(randomNumber);
</script>

:: خروجی این کد (یک عدد تصادفی اعشاری بین ۰ و ۱۰۰) : (با رفرش صفحه عددی جدید می بینید)

:: تولید اعداد صحیح تصادفی بین صفر و عددی دلخواه :

برای اینکه اعداد تصادفی تولید شده رو از حالت اعشاری دربیارید و اعداد رو به صورت صحیح و بدون قسمت اعشاری داشته باشید باید از متد ()Math.floor استفاده کنید . این تابع یک عدد اعشاری رو به عنوان ورودی میگیره و خروجیش جزء صحیح اون عدد هست . جزء صحیح همون بزرگترین عدد صحیح کوچکتر از یک عدد اعشاریه . پس برای تولید اعداد صحیح بین ۰ تا یک عدد دلخواه مثل ۱۰۰ ، کد رو به شکل زیر داریم :

<script type="text/javascript">
    randomNumber = Math.floor(Math.random() * 100);
    document.write(randomNumber);
</script>

در این کد ابتدا یک عدد اعشاری بین ۰ و ۱ توسط تابع random تولید میشه ، بعد ضرب در ۱۰۰ میشه و سپس عدد حاصل ،که یک عدد اعشاری بین ۰ تا ۱۰۰ هست ، جزء صحیحش توسط متد floor گرفته میشه و در متغیر randomNumber قرار میگیره .
:: خروجی این کد (یک عدد تصادفی صحیح بین ۰ و ۱۰۰) : (با رفرش صفحه عددی جدید می بینید)

:: تولید اعداد صحیح تصادفی بین دو عدد دلخواه :

شاید دوست نداشته باشید عدد تصادفی از ۰ تا یه عدد دلخواه باشه . و بخواید مثلا عدد تولید شده بین ۸۰ تا ۱۰۰ باشه . انجام اینکار هم سادست . فرض کنید که می خواید اعداد تصادفی تولید شده بین دو عدد x و y باشه . کافیه عدد باند پایین یعنی x رو به عدد رندم تولید شده اضافه کنید و تابع رندم رو به جای اینکه در y ضرب کنید در y-x ضرب کنید . مثلا اگر بخواید اعداد تصادفی تولید شده بین ۸۰ و ۹۲ باشند ، کد رو باید به صورت زیر بنویسید :

<script type="text/javascript">
    randomNumber = 80 + Math.floor(Math.random() * 12);
    document.write(randomNumber);
</script>

12 همون اختلاف بین ۹۲ و ۸۰ هست ، و ۸۰ رو هم که با عدد تصادفی تولید شده جمع کردیم . در واقع حداقل می خواید ۸۰ رو داشته باشید به اضافه ی یک عدد تصادفی بین ۰ تا ۱۲ !
:: خروجی این کد (یک عدد تصادفی صحیح بین ۸۰ و ۹۲) : (با رفرش صفحه عددی جدید می بینید)

:: تابع تولید اعداد صحیح تصادفی بین دو عدد دلخواه :

:: در آخر هم یک تابع ساده براتون نوشتم که دیگه نخواید کد اضافه بزنید ! به راحتی می تونید کد زیر رو درون تگ head اضافه کنید :

<script type="text/javascript">
    function myRandom(start,end){
         randomNumber = start + Math.floor(Math.random() * (end-start));
         return randomNumber;
    }
</script>

و درون تگ body به همین راحتی از اون استفاده کنید(که در مثال زیر چهار بار برای دامنه های مختلف عددی استفاده شده) :

<script type="text/javascript">
    document.write(myRandom(0,3)+'<br>');
    document.write(myRandom(10,20)+'<br>');
    document.write(myRandom(100,1000)+'<br>');
    document.write(myRandom(1000,2000)+'<br>');
</script>

تگ br هم که استفاده شده برای نمایش هر عدد در یک خط جدید است .
:: خروجی کد (چهار عدد تصادفی در دامنه های ذکر شده در کد) : (با رفرش صفحه اعداد نو میبینید)

اگر این مقاله رو خوب خونده باشید ، می دونید که این تابع روش کارش چطور بوده .
:: دوستان عزیز ، برای نوشتن این مقالات وقت گذاشته شده و زحمت کشیده شده . لطفا در صورت انتشار این مطلب در وبگاهتون منبع رو ذکر کنید . با تشکر فراوان .
:: چیز دیگه مونده در مورد تولید اعداد تصادفی ؟

.: مطالب مرتبط با این پست :.

راستچین ، چپ چین و وسط چین کردن اشیاء و متن ها در صفحات Html

2012-02-10T08:55:19Z

:: خیلی از دوستان در سوال های مطرح شده پرسیده بودند که چطور عکس ، متن و یا شئ خاصی رو در صفحه وب به وسط بیارند و چینش افقی اونو وسطچین کنند . امروز در این پست به صورت کامل و مفصل در مورد چینش افقی انواع متن ، عکس و اشیاء در صفحات Html به روش های مختلف صحبت خواهیم کرد .

:: اول از همه بزارید در یک دسته بندی کلی تگ ها . المان های html رو به دوبخش تقسیم کنیم :

متن ها و المان های شبه متن مثل لینک ها و عکس ها
تگ ها و المان های بلاکی مثل جدول ها و تقسیم بندی ها (تگ div)

:: تگ ها و المان های بلاکی فرقشون با بقیه اینه که به صورت ضمنی قبل و بعدشون یک خط جدید ایجاد میشه . در واقع یعنی یک خط کامل رو در بر میگرین و پهناشون ۱۰۰ درصد هست . المان های بلاکی شامل پاراگراف ها ، لیست ها ، جدول ها ، فرم ها و هدینگها هستند .

:: برای اینکه موقعیت افقی هر کدوم از این دو دسته تگ ها رو تعیین کنید روش های مختلفی وجود داره .

:: روش اول : وسطچین کردن اشیاء ( کهنه و منسوخ شده ) :

در این روش از تگ center که در ورژن های قدیمی html وجود داشت استفاده میشه . بعد از ورود CSS دیگه از این تگ استفاده نمیشه . البته هنوز مرورگرها اونو support می کنن ولی به احتمال زیاد در نسخه های آینده برای استاندارد سازی صفحات وب این سری از تگ های html که منسوخ شدند (تگ هایی مثل center و font ) دیگه توسط مرورگرها پشتیبانی نمیشه تا طراحان رو به استفاده از CSS برای این کار ملزم کنند .

شما هر کدوم از تگهای html ، متن ها ، عکسها و … رو که درون تگ center قرار بدید ، اون شئ به صورت وسط چین در صفحه ی وب نماییش داده می شه . به طور مثال در کد زیر متن و عکس درون تگ center به وسط خط (از لحاظ افقی) منتقل میشن :

<center>
    welcome to 7learn.com web design tutorials ...
    <img src="image_url" />
</center>

در کل توصیه میشه که این نمونه تگ ها رو بدلیل منسوخ شدنش به کار نبرید . و از روش هایی که در ادامه می گیم استفاده کنید .

:: روش دوم : تعیین موقعیت افقی محتوای پاراگراف در html با استفاده از ویژگی align در تگ <p> :

در صفحات وب معمولا متن ها درون تگ <p> که همون تگ پاراگراف هست قرار می گیرند . برای اینکه چینش افقی متن یک پاراگراف تعیین بشه ، برای این تگ یک attribute به نام align تعریف شده که می تونه مقادیر center ، left و right رو دریافت کنه که به ترتیب متن درون پاراگراف رو چپ چین ، وسطچین و راست چین میکنه . البته ویژگی align مقدار justify رو هم میتونه بپذیره که باعث میشه اندازه ی تمام خط های متن درون پاراگراف یکسان بشه و متن از دو طرف صاف بشه و حالت منظم به خودش بگیره . در صورتی که برای ویژگی align مقداری تعیین نکنید به صورت پیشفرض براش مقدار left در نظر گرفته میشه .

تگ پاراگراف یک ویژگی دیگه به نام dir داره که مخفف direction (جهت) هست که برای پاراگراف هایی که متن درونشون از زبانهای راست به چپ نویس ، مثل فارسی هست باید مقدار rtl یعنی (right to left) و برای زبان هایی که نوشتن اونها از چپ به راست هست مثل انگلیسی باید مقدار ltr یعنی (left to right) رو بگیره . مقدار پیشفرض ویژگی dir هم که ltr هست ، یعنی مخصوص زبان هایی مثل انگلیسی .

:: چهار تا پاراگرافی که در زیر آوردم رو به صورت مثال می تونید ببینید . متن درون هر پاراگراف توضیح چینش همون پاراگراف هست :

<p>چپ چین و مناسب برای نوشته های چپ به راست</p>
<p dir="rtl">چپچین و مناسب زبان فارسی</p>
<p align="right">راست چپن و مناسب زبان انگلیسی</p>
<p dir="rtl" align="right">راستچین و مناسب فارسی</p>

در تگ p اگر ویژگی align و dir آورده نشه ، مقدار پیشفرضی که گفتیم (left و ltr) براش در نظر گرفته میشه !

:: روش سوم : استفاده از CSS برای تعیین موقعیت افقی محتوای تگ ها

امروزه دیگه سعی می شه تمامی خصوصیات و شیوه ی نمایش تگ ها رو با استفاده از CSS تنظیم کنند و شدیدا توصیه می شه که شما هم همین کارو انجان بدید . حتی برای پاراگراف ها !

:: ویژگی text-align در CSS دقیقا همون کار ویژگی align در پاراگراف ها رو انجام میده . همون مقادیر رو هم میتونه بپذیره . به جای ویژگی dir در تگ p هم یک ویژگی به نام direction در CSS وجود داره که این ویژگی هم مثل dir می تونه دو مقدار ltr و rtl رو بپذیره.

خوبی استفاده از ویژگی های CSS اینه که دیگه فقط مختص تگ p نیست و شما در هر تگی که این ویژگی ها رو به صورت CSS بکار ببرید ، میشه چینش محتوای درون اون تگ رو تعیین کرد .

همون چهار تا پاراگراف بالایی رو که با استفاده از ویژگی های html خود تگ p براتون آوردیم ، در زیر با استفاده از ویژگی های معادل در CSS نوشتم که از لحاظ شیوه ی نمایش و چینش هیچ فرقی با هم نمی کنند ولی استفاده از این روش استاندارد تر هست :

<p>چپ چین و مناسب برای نوشته های چپ به راست</p>
<p style="direction:rtl">چپچین و مناسب زبان فارسی</p>
<p style="text-align:right">راست چپن و مناسب زبان انگلیسی</p>
<p style="direction:rtl;text-align:right;">راستچین و مناسب فارسی</p>

:: یه نکته اینکه برای استفاده از ویژگی های CSS درون تگ های html ، باید از ویژگی style درون اون تگ استفاده کرد که ویژگی های CSS مختلف رو که با علامت semi-colon (;) از هم جدا شدند به عنوان مقدار می پذیره . (برای آشنایی کامل با چگونگی استفاده از ویژگی های CSS پیشنهاد می کنم حتما مطلب شیوه های مختلف استفاده از CSS در صفحات html و Syntax و قواعد نوشتاری زبان CSS رو بخونید) .
:: برای تعیین چپنش افقی عکس ها ، می تونید اون رو درون یک تگ پاراگراف که چینش رو براش تعیین کردید استفاده کنید .

:: روش چهارم : استفاده از CSS برای تعیین موقعیت افقی المان های بلاکی مثل جدول ها و تقسیم بندی های صفحه (تگ div)

معمولا دوستانی که در مورد چینش اشیاء مشکل داشتند ، بیشتر در مورد چینش جدول ها و تقسیم بندی های صفحه (تگ div) سوال می پرسیدند . در اینجا می خوایم روش درست و استاندارد انجام این کار رو براتون بگیم .

روش غیراستاندارد و غیر معمولی که بکار میره اینه که جدول ها و المان های بلاکی رو درون یک تگ دیگه قرار میدند و چینش تگ پدر رو تعیین می کنند تا محتوای درون اون رو به راست ، چپ یا وسط ببرند . این روش نادرسته و در بعضی از مرورگر ها پشتیبانی نمیشه .

:: برای این منظور باید از ویژگی های CSS برای همون تگی که می خوایم چینشش رو تعیین کنیم ، استفاده کنیم . برای راست چین و چپ چین کردن یک المان بلاکی باید از ویژگی float در CSS که به معنی شناور بودن هست در خود تگ استفاده کنیم . ویژگی float دو مقدار left و right رو می پذیره که باعث شناور شدن المان بلاکی در چپ یا راست میشه . به طور مثال در کدهای زیر جدول آورده شده به سمت راست صفحه منتقل میشه (محتواش راست چین نمیشه ، خودش به راست میره) و تگ div آورده شده در سمت چپ شناور میشه .

<table style="width: 200px;float: right;">
    <tr>
        <td>7Learn.com Web Tutorials</td>
    </tr>
</table>

<div style="width: 200px;float: left;">7Learn.com Web Tutorials</div>

در المان های بلاکی به صورت پیش فرض پهنای المان ۱۰۰ درصد هست . برای همین من با استفاده از ویژگی width مقدار ۲۰۰ پیکسل رو برای پهنای تگ جدول و div فوق تعیین کردم تا به چپ و راست رفتنشون مشخص باشه .

:: روش مرسوم و صحیح وسط چین کردن المان های بلاکی استفاده از ویژگی margin در CSS هست . ویژگی margin فاصله ی حاشیه ی یک تگ تا تگ پدرش (تگی که اون رو در بر داره) رو مشخص میکنه . شاید تعجب کرده باشید که چطور و چرا از این تگ برای وسط چین کردن المان بلاکی استفاده میشه ! خوب وقتی شما این فاصله رو از چپ و راست مقدار ۵۰ درصد قرار بدید ، در واقع یعنی اونو در وسط قرار دادید !

:: چون قصد دارم در آینده در مورد ویژگی margin و دو ویژگی padding و border در CSS یک مطلب مفصل بنویسم و تفاوت و کاربردهاشون رو بگم در اینجا مختصرا در مورد margin توضیح میدم . تگ margin چهار مقدار رو که با یک space از هم جدا میشن ، می پذیره که به ترتیب فاصله از بالا ، راست ، پایین و چپ تگ رو مشخص می کنه . به طور مثال در پاراگراف زیر فاصله از بالای پاراگراف ۱۰ پیکسل ، از راست ۷ پیکسل از پایین ۵ پیکسل و از چپ ۳ پیکسل هستش :

<p style="width: 200px;margin: 10px 7px 5px 3px">7Learn.com</p>

همونطور که گفتم شما میتونید به جای واحد pixel از درصد استفاده کنید . با قرار دادن مقدار ۵۰ درصد برای فاصله از چپ و راست ، المان رو به وسط میارید . همچنین برای انتقال یک المان بلاکی به وسط ، مرسوم هست که در تگ margin برای فاصله از بالا یک مقدار رو تعیین می کنند و به جای سه مقدار دیگه از کلمه ی auto استفاده می کنند . که اینکار به صورت پیشفرض فاصله از سه سمت دیگه رو ۵۰% در نظر میگیره .
همون تگ پاراگراف فوق رو با یکی از دو شیوه ی زیر با استفاده از تگ margin میشه به وسط منتقل کرد :

<p style="width: 200px;margin: 10px 50% 5px 50%">7Learn.com</p>

<p style="width: 200px;margin: 0 auto">7Learn.com</p>

:: برای به وسط آوردن جدول و تگ div ی که در بالا به چپ و راست شناورش کرده بودیم هم میشه به این شکل عمل کرد :

<table style="width: 200px;margin: 10px 50% 5px 50%;">
    <tr>
        <td>7Learn.com Web Tutorials</td>
    </tr>
</table>

<div style="width: 200px;margin: 5px auto">7Learn.com Web Tutorials</div>

:: ضمنا بر اساس طراحی تون می تونید به جای ۵۰ درصد از دو طرف ، از یک طرف مثلا ۳۰ درصد و از طرف دیگه ۷۰ درصد فاصله بدید . در این حالت شئ مورد نظر به سمتی که %۳۰ فاصله دادید مایل میشه !
امیدوارم که این مقاله هم بدردتون خورده باشه . برای دریافت مطالب دیگه یادتون نره مشترک فید ما بشید ، یا اینکه از باکس نارنجی رنگ زیر اشتراک ایمیلی بگیرید .

.: مطالب مرتبط با این پست :.

انواع مختلف گرد و خمیده کردن حاشیه ها در CSS 3

2012-02-09T08:24:29Z

:: تا قبل از اینکه CSS3 وارد عرصه ی وب بشه ، خمیده کردن حاشیه ها توسط ویژگی های استاندارد CSS مقدور نبود . البته بعضی از مرورگر ها مثل Firefox برای خودشون یک سری ویژگی ها در CSS معرفی کردند که با استفاده از اونها ، تغیرات مد نظر ، از جمله گرد کردن حاشیه ها فقط در همون مرورگر قابل رویت بود !

:: ولی از زمانی که CSS3 رسما پا به دنیای وب گذاشت ، با قابلیت های جدید و کاربردی ای که از خودش نشون داد ، تقریبا همه ی کمبودهای ورژن های قبلی CSS رو جبران کرد . هر چند که هنوز هم جا برای اضافه کردن امکانات جدید هست .

:: امروز می خوایم در مورد گرد و خمیده کردن حاشیه ی تمامی اشیاء Html از جمله عکس ها (<img>)، تقسیم بندی ها (<div>) و … صحبت کنیم .

:: شما باید به هر تگی از صفحه ی Html که می خواید حاشیه ی دایره ای و خمیده داشته باشه ، یک ویژگی class اضافه کنید و نام سلکتور CSS مورد نظر رو که در اینجا rounded هست اضافه کنید . برای آگاهی بیشتر در مورد سلکتورهای CSS و چگونگی استفاده از اونها حتما مطلب “Syntax و قواعد نوشتاری زبان CSS” رو بخونید .

خوب اول از همه بزارید به صورت تصویری ببینیم می خوایم چیکار کنید . در این مطلب ، تگی که قراره حاشیه ی اون رو خمیده و گرد کنیم یک عکسه که به شکل زیره :

<img src="http://7learn.com/imgs/roundedborders/flower0.jpg" />

:: که نمایش این تگ که یک عکس هستش به شکل زیره :

:: می خوایم بدون استفاده از نرم افزار های ویرایش تصویر مثل فتوشاپ و فقط با استفاده از ویژگی های جدید CSS3 حاشیه ها رو شبیه زیر گرد و خمیده کنیم :

:: خوب حتما منتظرید ببینید چطور می شه این کار رو انجام داد ؟ حاشیه های خمیده می تونه کمک بسیار زیادی به زیبایی صفحات وب کنه . و صفحات رو از اون حالت مرسوم مستطیلی قدیمی دربیاره . واقعا چنین خصوصیتی در CSS لازم بود . خوب برای اینکه برای شِئ خاصی حاشیه ی خمیده بزاریم اول باید کلاس CSS اونو در تگش مشخص کنیم . به طور خاص در این مطلب نام کلاسی که برای تگمون مشخص کردیم رو rounded می زاریم و اونو به تگ img که در بالا گفتیم می خوایم حاشیش رو گرد کنیم به صورت زیر اضافه می کنیم :

<img class="rounded" src="http://7learn.com/imgs/roundedborders/flower0.jpg" />

حالا باید سلکتور CSS خودمون (rounded.) رو بنویسیم و از اون استفاده کنیم :

.: مطالب مرتبط با این پست :.

آموزش جاوااسکریپت (قسمت ۱) معرفی جاوااسکریپت و شروع کدنویسی

2012-02-07T20:22:40Z

:: همونطور که قبلا بهتون وعده داده بودیم ازین پس آموزش های مربوط به طراحی وب رو به روشی جدیدتر در اختیار شما قرار خواهیم داد . آموزش های جدید به شکل ویدیویی و کاملا روان و کاربردی خواهند بود . از امروز استارت این آموزش ها زده میشه و اگه خدا بخواد به همین شکل ادامه پیدا میکنه . احساس کردم یادگیری طراحی وب و زبان های برنامه نویسی تحت وب به این شکل راحت تر ، کاربردی تر و عملی تره .

:: در اولین آموزش ویدیویی که براتون گذاشتیم به معرفی قابلیت ها و برخی از ویژگی های زبان جاوااسکریپت پرداختیم و در نهایت یک برنامه ی ساده رو که همون برنامه ی معروف Hello World هست ، براتون نوشتیم !

:: در اولین قسمت از مجموعه آموزش های ویدیویی طراحی وب در زمینه ی زبان Javascript ، به طرح و بحث در رابطه با موارد زیر پرداختیم :

جاوا اسکریپت چیست ؟
منظور از Client-Side بودن جاوااسکریپت چیست ؟
زبان های Server-Side چه تفاوتی با زبان های Client-Side دارند ؟
پیشنیاز های یادگیری زبان جاوااسکریپت چیست ؟
جاوااسکریپت چه ویژگی ها و قابلیت هایی رو به صفحات HTML اضافه می کنه ؟
نوشتن اولین برنامه ی جاوااسکریپت .
روشهای مختلف استفاده از کدهای جاوااسکریپت در بین کدهای HTML
استفاده از کدهای جاوااسکریپت به صورت مستقیم در کد Html
نوشتن کدهای جاوا اسکریپت در فایل جداگانه و لود کردن اون در صفحه Html
محل های قرارگیری کدهای جاوااسکریپت در میان کدهای Html

هم اکنون اعضای سایت می تونند از قسمت زیر ویدیوی این آموزش رو مشاهده کنند :

:: دوستان عزیز ، حتما نظرتون رو در مورد این شیوه ی جدید قرار دادن آموزش ها بیان کنید . در امتیاز دهی به این مطلب هم شرکت کنید. منتظر بازخوردهای شما در مورد این روش جدید هستم .

موفق باشید …

.: مطالب مرتبط با این پست :.

استفاده از سرویس Feedburner بدون فیلتر و انتقال به وبسایت شخصی

2012-02-06T16:20:18Z

:: حتما اطلاع دارید که سرویس بسیار کاربردی feedburner گوگل تو ایران فیلتره و وبمسترها برای استفاده از اون محدودند و خدایش خیلی ناراحت کننده است که چنین سرویس مفیدی رو فیلتر کردند . چندی پیش در یکی از وبسایت های ایرانی (وبسایت تورتک) مطلبی خوندم که توسط آقای ایزدی نوشته شده بود و خیلی مفید بود . بنده اینجا مطلبشون رو برای شما آوردم تا سریعتر این راه حل مفید رو که برای رهایی از فیلتر بودن خوراک های فیدبرنر هست به همه ی وبمستر های ایرانی برسونیم .

:: در این مطلب می خوایم آموزش کامل انتقال خوراک فیدبرنر به وبسایت شخصی خودتون رو قرار بدیم . با دسترسی بدون فیلتر به تمامی امکاناتی که feedburner در اختیار شما قرار میده !

:: به طور مثال آدرس فید ۷Learn توی فیدبرنر به صورت زیره :

http://feeds.feedburner.com/7learn/main

که اگه روش کلیک کنید می بینید که فیلتره . در صورتی که من اونو به وبسایت شخصیم انتقال دادم و الان آدرسش به صورت زیره ، و فیلتر نیست ! (حالا اگه کلیک کردید یادتون نره مشترک شیدا… مطالب جدید در راهه (-_-))

http://feeds.7Learn.com/7learn/main

ضمنا با وارد کردن این آدرس به جای آدرس اصلی که فیدبرنر به ما میده در تمامی اسکریپت های خود feedburner ، بدون فیلتر بودن ، میتونید از همه ی اون امکانات استفاده کنید . مثلا در اسکریپت FeedCount (که نمونه اش رو در منوی سمت چپ سایت و در زیر فرم اشتراک ایمیلی می بینید) آدرس جدید رو وارد کنید تا تعداد کسایی که مشترک فید شما شدند به راحتی نشون داده بشه . (اگر از آدرس خود فیدبرنر در این اسکریپت استفاده کنید ، بدلیل فیلتر بودن اون آدرس تصویر نشون داده نمیشه) .

:: خوب اگه شما هم دوست دارید از feedburner بدون فیلتربودن استفاده کنید و خوراکتون از طریق domain خودتون قابل دسترسی باشه مراحل زیر رو به ترتیب طی کنید :

.: مطالب مرتبط با این پست :.

ارسال پاسخ سوالات و دیدگاه ها به ایمیل شما

2012-02-03T14:49:46Z

:: در راستای تسریع در امر دریافت پاسخ سوال ها و دیدگاههایی که مطرح شده است قابلیت جدیدی به سایت افزوده شد . از این پس در صورتی که در بخش نظرات پاسخ دیدگاه یکی از کاربران داده شود ، این پاسخ بلافاصله از طریق ایمیل به شخص مطرح کننده ی سوال/دیدگاه ارسال می شود .

:: خوشبختانه یا متاسفانه تعداد سوالات مطرح شده بسیار بالاست و دوستانی که سوال یا درخواستی رو مطرح کردند لطفا به فکر بنده هم باشند . اینجا تک نفری نمی رسم همه ی سوالات رو به روز پاسخ بدم . درخواست های مطرح شده صف بندی میشن و به ترتیب در صورت امکان پاسخ داده میشن .

:: سوالاتتون رو هم از این به بعد فقط از طریق این صفحه مطرح کنید .

:: ضمنا بنده سعی دارم از این به بعد آموزش های طراحی وب رو با روشی جدید و جذابتر براتون بزارم . برای اطلاع از ارسال مطالب آموزشی جدید مشترک ایمیلی شوید تا بلافاصله پس از ارسال مطالب آنرا دریافت کنید .

موفق باشید .

.: مطالب مرتبط با این پست :.

ثبت رایگان لینک شما در بیش از ۵۰۰ سایت و افزایش رتبه و pagerank گوگل!

2012-02-01T15:39:14Z

:: عوامل مختلفی در بالا بردن رتبه و پیج رنک یک وبسایت موثر هستند که یکی از مهمترین اونها داشتن تعداد backlink های بالا از سایتهایی با رتبه بالا هست . اگر به دنبال امروز منبعی رو به شما معرفی می کنم که با عضویت رایگان در اون می تونید لینک سایتتون رو در بیش از ۵۰۰ سایت دیگه قرار بدید و تعداد backlink هاتون رو افزایش بدید !

:: Backlink همون لینکهایی هستند که دیگر سایت ها به شما داده اند .

اگر شما هم به دنبال افزایش رتبه و pagerank گوگل سایت خود به صورت کاملا رایگان هستید همین الان یه نگاهی به ابزار Backlink که به صورت کاملا رایگان هست بیاندازید .

من خودم این ابزار رو تست کردم و واقعا از نتیجه ی اون راضی بودم . در کمتر از ۱۰ دقیقه لینکم رو در بیش از ۴۷۰ صفحه ثبت کرد ! فکر نمی کردم که ابزار رایگانی به این خوبی برای اینکار وجود داشته باشه .

از لینک زیر می تونید وارد این سایت بشید:

کافیه پس از عضویت و ورود به سایت این ابزار، روی دکمه ی Create Backlinks کلیک کرده و چند دقیقه ای منتظر بمونید تا لینک های شما در سایت های دیگر ثبت شود و در نهایت نتیجه ی ثبت لینک شما نمایش داده شود !

این روش از طریق افزایش تعداد بک لینک ها منجر به افزایش رتبه و چیج رنک گوگل شما میشه . البته با خرید اکانت premium به قیمت ۴۷ دلار می تونید لینکتون رو در بیش از ۲۰۰۰ سایت دیگه ثبت کنید .

.: مطالب مرتبط با این پست :.

نرم افزار مترجم متن گوگل Client for Google Translate 3.1.83

گجت ساده و زیبای تاریخ شمسی برای ویندوز ۷ و ویستا

2012-02-01T05:48:05Z

:: امروز با یه گجت ساده ، زیبا و کاربردی خدمتتون رسیدم . گجت تاریخ شمسی که امروز براتون آماده کردم با ظاهری زیبا و محو در پس زمینه دسکتاپ شما ، نه فضایی از دسکتاپ رو اشغال می کنه و نه شلوغ و بدترکیبه ! فکر کردم به جای اینکه یه تقویم شمسی بزرگ که فضای زیادی از Desktop رو میگیره استفاده کنید ، یه گجت با اندازه کوچک و بهینه براتون آماده کنم ! همونطور که در تصویر زیر می بینید این گجت در پس زمینه ی Desktop شما محو میشه و نمای زیبا و پویایی به خودش میگیره .

این گجت هم اکنون توسط اعضای سایت قابل دریافت و نصب هست . برای نصب گجت هم ، کافیه پس از عضویت و ورود به سایت ، گجت رو از زیر دانلود و extract کرده و فایل SimplePersianDate v1.0.gadget رو باز کنید و install رو بزنید .

دانلود گجت تاریخ شمسی ساده ، ورژن ۱٫۰ ، برای ویندوز ۷ و ویستا :

به همین راحتی میتونید این گجت زیبا رو در دسکتاپ خود داشته باشید …

قبلا هم که گجت زیبای اوقات شرعی به افق تمامی مراکر استان ها رو براتون گذاشته بودیم . امیدواریم که این گجت ها مورد استفاده و رضایت شما قرار بگیره .

.: مطالب مرتبط با این پست :.

خونه تکونی بعد از ۴ سال …

2012-01-28T19:37:35Z

:: بالاخره بعد از چهار سال تصمیم گرفتم که یه تغیر اساسی توی سایت بدم . همونطور که می بینید قالب سایت رو عوض و یه سری امکانات بهش اضافه کردم . دیگه ظاهر سایت خیلی تکراری شده بود . تو طراحی ظاهر جدید سایت تصمیم گرفتم که قالبی روشنتر ، خواناتر و با استفاده از CSS3 زیباتر درست کنم که امیدوارم که از این تغیرات خوشتون اومده باشه .

:: تغیرات کلی در قالب و امکانات جدید به صورت زیره :

اضافه شدن نمایش تعداد بازدید هر مطلب
افزودن قابلیت امتیاز دهی به هر پست
بهینه تر شدن بخش نظرات با استفاده از نظرات و پاسخ های تودرتو
قابلیت عضویت در سایت برای دیدن مطالب مخصوص اعضا
فرم ورود به سایت در سمت چپ که مربوط به اعضای سایت است
و چند تغیر دیگر …

انشاءالله از این به بعد با جدیت بیشتر در خدمت شما عزیزان هستم …

.: مطالب مرتبط با این پست :.

تصاویر بزرگترین سایت های دنیا در هنگام آغاز به کار !

2012-01-03T07:52:41Z

:: دیروز داشتم وبگردی می کردم یه چند تا عکس از سایت های بزرگ دنیا مثل گوگل ، فیسبوک و … دیدم . گفتم بد نیست بزارمش اینجا شما هم ببینید . ببینید که این سایت ها چی بودند و چی شدند !!

Google : در سال ۱۹۹۸ ، پروژه تحقیقاتی که توسط Sergey Brin و Larry Page ، دو تن از دانشجویان دکترای دانشگاه Stanford انجام شد منجر به ایجاد سایت گوگل شد :

Facebook : در فبرریه سال ۲۰۰۴ شاید هیچ کس فکرشو نمی کرد که این سایت که توسط مارک زوکربرگ طراحی شد و در ابتدا فقط برای دانشگاه هاروارد در دسترس بود ، الان چنین غولی بشه و بتونه در شش هفت سال تعداد کاربرانش رو به بیش از ۷۵۰ میلیون نفر در سراسر دنی برسونه . تصورش رو بکنید ! از هر ۸ نفر در دنیا یک نفر عضو این سایته !!!

تصاویر دیگر سایت ها در ادامه مطلب …

Yahoo : یکی دیگه از سایتهایی که از دانشگاه استنفورد جرقه اش زده شد .

یاهو که مخفف Yet Another Hierarchical Officious Oracle هستش ، در سال ۱۹۹۵ توسط Jerry Yang و David Filo پایه ریزی شد .

YouTube : این سایت که الان میلیونها فایل ویدیویی و به اشتراک گذاشته رو میزبانی می کنه توسط سه تن از کارمندان قبلی PayPal به نام ، Chad Hurley, Steve Chen و Jawed Karim راه اندازی شد . اولین ویدیوی سایت هم توسط Jawed Karim آپلود شد که یک ویدیو ۱۹ ثانیه ای به نام me on the zoo بود .

Amazon : سال ۱۹۹۵ سایت آمازون توسط Jeff Bezos راه اندازی شد و کار خودش رو با فروش کتاب به صورت آنلاین شروع کرد …

Twitter : در سال ۲۰۰۶ سرویس میکروبلاگ توییتر که به کاربرانش اجازه می داد پستهای حداکثر ۱۴۰ کاراکتری (tweet) رو ارسال کنند و به اشتراک بگذارند ، توسط Jack Dorsey راه اندازی شد . این سرویس به سرعت محبوبیت فوق العاده ای رو کسب کرد تا جایی که در سال ۲۰۱۱ تعداد کاربرانش از ۳۰۰ میلیون نفر فراتر رفت . این سایت به سرویس اس ام اس روی اینترنت معروف شده !

منبع تصاویر

.: مطالب مرتبط با این پست :.

گجت اوقات شرعی برای ویندوز ۷ و ویستا

2011-12-29T13:16:02Z

:: امروز یک گجت کاربردی و زیبا برای اون دسته از افرادی که همواره می خوان اوقات شرعی دم دستشون باشه و نمازاشونو سر وقت بخونن آماده کردم . شما به سادگی ، با دریافت و نصب این گجت (gadget) می تونید اوقات شرعی رو با نمایی زیبا و به افق تمامی مراکز استان های کشور ، در desktopویندوز ۷ یا ویندوز ویستای خودتون داشته باشید .

: هم اکنون می توانید این گجت کاربردی را از لینک زیر دریافت و نصب کنید

پس از دریافت فایل ، روی آن دابل کلیک کرده و گزینه install را بزنید تا گجت نصب شده و در دسکتاپ شما به نمایش در آید .

:: گجت زیبای نمایش تاریخ شمسی با قابلیت محو بودن در پس زمینه رو هم می تونید از اینجا دریافت کنید .

.: مطالب مرتبط با این پست :.

تنظیم ویندوز برای خاموش شدن به صورت اتوماتیک

2011-11-21T12:40:01Z

:: شاید خیلی مواقع یه کاری با سیستمتون داشته باشید که مدتی طول بکشه و خودتون نخواید پشت سیستم باشید . مثلا می خواید از خونه برید بیرون ، و کامپیوترتون رو روشن بزارید تا کار مورد نظرتون رو انجام بده . کارهایی مثل دانلود و کپی و … .
در این پست می خوایم آموزش بدیم که چطور ویندوزتون رو تنظیم کنید که بعد از یک مدت خاصی به صورت اتوماتیک و خودکار خاموش بشه .

:: خاموش کردن خودکار ویندوز پس از مدت زمان مشخص
> در دسکتاپ ویندوز کلید WinKey + R (کلید R + ) رو بزنید تا پنجره Run باز بشه . این کار رو با کلیک روی Start و انتخاب گزینه ی Run در ویندوز xp هم میتونید انجام بدید .

> در پنجره Run در قسمت Open دستور زیر رو تایپ کنید :

shutdown.exe -s -f -t seconds

:: شما باید به جای seconds زمان باقی مانده تا خاموش شدن سیستم رو به ثانیه وارد کنید .

کار option های استفاده شده در دستور فوق به شکل زیر است :

s- : برای خاموش کردن سیستم باید وارد شود . (مخفف shutdown)

f- : اجبار ویندوز به خاموش شدن حتمی . (مخفف forced shutdown)

t- : تعیین زمان باقی مانده تا خاموش شدن خودکار ویندوز

:: مثلا اگر می خواید سیستمتون ۳۰ ثانیه دیگه خاموش بشه دستور رو به شکل زیر وارد کنید :

shutdown.exe -s -f -t 30 // دستور خاموش شدن پس از ۳۰ ثانیه

:: اگر می خواید ۴ و نیم ساعت دیگه خاموش بشه ، مقدار رو به ثانیه تبدیل کنید :

> 4.5 x 60 x 60 = ۱۶۲۰۰ // تبدیل ۴٫۵ ساعت به ثانیه

shutdown.exe -s -f -t 16200 // دستور خاموش شدن پس از ۴٫۵ ساعت

:: و به همین ترتیب از ماشین حساب ویندوز برای تبدیل زمان های مختلف به ثانیه استفاده کنید و زمان رو به ثانیه در دستور فوق قرار بدید .

:: لغو کردن عملیات خاموش شدن اتوماتیک

اگر به هر دلیلی از خاموش شدن خودکار سیستم منصرف شدید فقط کافیه دستور زیر رو در پنجره Run وارد کنید و Ok کنید .

shutdown.exe -a // دستور لغو خاموش شدن خودکار ویندوز

موفق باشید .

.: مطالب مرتبط با این پست :.

بازگشت دوباره و طراحی یک سیستم پاسخگویی به سوالات

2011-08-15T14:51:16Z

سلام بر همه ی دوستان

اول از همه این خبر رو بدم که به زودی فعالیت خودم رو در سایت از سر میگیرم و با جدیت بیشتری نسبت به قبل در خدمت شما هستم . در حال حاضر در حال طراحی سیستمی هستم که راحتتر پاسخگوی سوالات شما باشیم و به احتمال زیاد کمتر از یک ماه دیگه این سیستم روی سایت قرار می گیره .

از اونجایی که همیشه نظرات شما باعث پیشرفت ما بوده ، اینبار هم از شما درخواست پیشنهاد و راهنمایی داریم .

:: به نظر شما یک سیستم پاسخگویی به سوالات خوب ، چه امکاناتی باید داشته باشه ؟

منتظر پیشنهادات و نظرات شما برای طراحی بهتر سیستم هستیم .

ممنون

.: مطالب مرتبط با این پست :.

فارسی کردن بعضی از قسمت های ویندوز

2010-11-25T21:45:41Z

بسیاری از اسامی آیکون های توی کنترل پنل ، اسامی منوها و گزینه های اون و چیزهای زیاد دیگه در رجیستری ویندوز تعریف شدن .

کافیه شما بدونید در کدوم قسمت رجیسری تعریف شدن و برید اونها رو تغیر نام بدید یا نام فارسی براشون بگذارید . لذا توی این آموزش میگیم که به چه شکل می تونید برخی از قسمت های ویندوز رو فارسی کنید یا اینکه تغیر نام بدید .

برای انجام اینکار مراحل زیر رو طی کنید :

۱) روی منوی Start کلیک کنید و گزینه run رو انتخاب کنید .

۲) در پنجره run که باز میشه تایپ کنید regedit و اینتر بزنید . (تو ویستا و سون که گزینه run وجود نداره بعد از کلیک روی start در textbox زیر منوی باز شده تایپ کنید regedit و اینتر بزنید ) .

۳) پنجره رجیستری باز میشه . از قسمت سمت چپ پنجره به آدرس زیر برید :

- در ویندوز xp :

:: HKEY_CLASSES_USER\Software\Microsoft\Windows\ShellNoRoam\MUICache

- در ویندوز seven و ویستا :

:: HKEY_CLASSES_ROOT\Local Settings\MUICache\

حالا از سمت چپ پنجره ، با کلیک رو پوشه موجود در آدرس فوق و زیر پوشه های (زیر پوشه ها رو هم حتما چک کنید) اون ، در سمت راست گزینه هایی میاد که همون اسامی قسمتهایی از ویندوز هستند . از جمله اسامی آیکون های کنترل پنل ، برخی منو ها و …

با دبل کلیک روی گزینه هایی که در سمت راست می بینید می تونید اسم اونها رو تغیر بدید یا فارسی کنید .

نکته : قبل از اعمال این تغیرات سعی کنید از جاهایی که تغیر میدید یک فایل پشتیبان (backup) تهیه کنید . برای اینکار از سمت چپ روی پوشه ای که قصد دارید محتویاتش رو تغیر بدید راست کلیک کرده و گزینه ی export رو بزنید و فایل بک آپ رو در جایی از هاردتون ذخیره کنید . بعدا اگر خواستید تغیراتی که دادید به حالت اول برگردند ، کافیه روی فایل بک آپی که گرفتید دبل کلیک کنید و گزینه ی yes رو بزنید .

.: مطالب مرتبط با این پست :.

پاسخ به سوالات (۴)

2010-11-06T17:55:31Z

درود بر همه هموطنان عزیز.

متاسفانه فوت ناگهانی پدرم آنچان در من و خانوادم نفوذ روحی داشت که تا مدتی نتونستم دست به هیچ کاری بزنم. حتی نمیتونستم پشت سیستم بشینم. به هر حال بابت همه اظهار محبتهایی که دوستان در این مدت داشتند و همدردیهای قشنگی که داشتند تسلی خاطری بود که بازهم در خود وظیفه ببینم بیام خدمتتون. هم اینکه عذرخواهی کنم بابت تاخیرهای بوجود آمده هم تشکر کنم بابت همدردی. سوالات زیادی در این مدت شده بود که من به مهمترین و اساسی ترینشون جواب دادم. بقیه سوالات یا بهتر بگم بیشترشون در مورد ساین کردن گوشی بود و دریافت فایل سر و کی که متاسفانه برام مقدور نبود تحویلتون بدم و از این دوستان واقعا معذرت میخوام امیدوارم صمیمانه بنده رو ببخشن. خب میریم سر وقت سوالات:

******************

[سوال اول] مژده
shahnematollahi.mihanblog.com
سلام. خوبین؟
ممنون که اینقد کارشناسانه و با دلسوزی به سوالات جواب میدین.
من هم یه سوالی داشتم.
چرا وقتی از این کدها استفاده میشه و ما آهنگهای مورد نظر رو توش قرار میدیم، با فایرفاکس آهنگ شنیده نمیشه و حتما باید IE یا Opera باشه؟؟؟
شما کدی رو سراغ دارین که بشه توش آهنگ گذاشت بعد فایرفاکس بخونتش؟
ضمنا آهنگی که تو ۴shared باشه هم این کدها می خونه؟
پیشاپیش ممنون از راهنماییتون.

پاسخ:
درود بر شما. متشکرم از لطفتون. دوست عزیز شما بایستی فلش پلیر مخصوص فایرفاکس رو نصب کنید تا مشکلتون حل بشه. در مورد موزیک هم باید بگم در ۴shared نمیشه آپلود کرد چون که لینک مستقیم بهتون نمیده. میتونید در سایت www.20upload.com اپلود کنید موزیکتون رو

******************

[سوال دوم] سلیمان قراجه داغی
solei.blogfa.com
سلام دوست عزیز
من وبلاگ خودم رو تغییر دادم از پارسی بلاگ به بلاگفا
ایا من می تونم کلیه مطالب خودم رو به بلاگفا ببرم
اگه راهنمایی کنید ممنون میشم
پاسخ:
درود بر شما. دوست عزیز متاسفانه تا جایی اطلاع دارم نمیشه! این امکان برای وبلاگها مقدرو نیست. شما بایستی مطالبتون رو دونه دونه از وبلاگ قبلی کپی کنید به وبلاگ جدید. موفق باشید…

******************

[سوال سوم] محسن
mohsen@yahoo.com
سلام.آقا حمزه واقعا تسلیت می گم.واسه روح پدرت فاتحه فرستادم.آقا حمزه تو رو خدا کمکم کن.من یه ای دی اس ال گرفتم و یه مشکلی دارم و مامانم هی اینو تو سرم می کوبه.مشکلم اینه که من سرعت ۲۵۶ گرفتم اما الان که وصل می شم می بینم سرعت دانلودش از ۹۰ بیشتر نمی ره.آیا بید تنظیمات خاصی رو انجام داد؟تورو خدا به خاطر خوشنودی روح پدرت جوابمو بده و واسم تحقیق کن.قول می دم واسه بابات دعا کنم.تورو خدا کمکم کن.خیلی ناراحتم.اگه کمک کنی باباتم خوشش میاد.مرسی از لطف همیشگی شما.
پاسخ:
درود بر شما. ممنون از لطفی که به بنده دارید اما اینهمه قسم هم نمیدادید چوابتون داده میشد. ببین دوست عزیز سرعت اینترنت چیزی نیست که با دستکاری درست بشه! شما با ۲۵۶ سرعتتون ۹۰ هست در دانلود من با ۵۱۲ سرعت دانلودم ۸۰ هستش!!! برخی سرویس دهنده ها پول بیشتر میدن پهنای بیشتر میگیرن و به مشتری سرعت زیاد میدن و برخی هم مثل من و شما پول کمتر میدن و پهنای کمتر میگیرن! پس ربطی به سرعت منو شما و دستکاری نداره. سرویس دهندتون مسئول این کاره. موفق باشید و به مادرتون بگید سرکوفت نزنه از این بهتر نمیشه.

******************

[سوال چهارم] حمید
mikaell011114@yahoo.com
اقای حمزه این سومین باره که در خواست میدم اگر دانشجو هستی خیلی عالی امیدوارم همیشه موفق باشی ولی دلیل نمیشه که سخنی در بالای همین صحفه بنویسی و بعد از مدت زیادی به سایتت سر نزنی و ما رو معطل کنی به مدت زیاد امیدوارم در اینده روی حرفت پایبند باشی ببینم چکار میکنی موفق و پیروز باشی
پاسخ:
دوست عزیز درود بر شما. بنده و همکارانمون اینجاییم که کمک کنیم! بدون هیچ هزینه و پول و دریافت حق الزحمه ای! خب بنده و همکارمون هم درس داریم زندگی داریم و… ضمن اینکه مرگ ناگهانی پدرم دلیلی بر این تاخیر بوجود آمده بود که نتونم بموقع بیام اینجا! بنظرتون باید چکار میکردم؟ به هر حال یه کم حق بدید ممنونم. موفق باشید…

******************

[سوال پنجم] joe
zeezy@msn.com
یه سوال فنی داشتم !
چطوری میتونم پستهای وبلاگمو به سایتم منتقل کنم
فایل بک آپ بلاگفا رو از وبلاگم دارم
پاسخ:
درود بر شما. دوست عزیز متاسفانه هیچ یک از سیتمهای وبلاگ ایرانی پاسخگوی بک آپ شما از بللاگفا نیست!!! شما بایستی همه رو از اول یدونه یدونه وارد کنید. موفق باشید…

******************

[سوال ششم] arvin
oloompaye.mihanblog.com

سلام ببخشید یه سوالی داشتم من هرکاری میکنم رنک وبم بالا نمی ره وبلاگم هم حدود یه سالی هست که دارم اگه میشه راهنمایی کنید

پاسخ:

درود بر شما. دوست عزیز رنک همینطوری به دست نمیاد که!!! شما باید مطالبتون اول از هر چیز کپی از سایتهای دیگه نباشه! دوم اینکه باید طوری مطالبتون رو درج کنید که از کلمات کلیدی به خوبی استفاده کرده باشید که گوگل براحتی پید اتون کنه! سوم اینکه باید سعی کنی مطالبی بزاری که گوگل به اونا اهمیت بده و… در مورد رنک میتونی یه گشت و گذار تو اینترنت بکنی تا بیشتر متوجه بشی. اینجا جای توضیهح بیش از این نیست متاسفانه. فقط خواستم بهتون بگم با تاریخچه سایت رنکتون بالا نمیره به فعالیت شما رنک میده گوگل. موفق باشید…

******************

در آخر هم سعی میکنم سر همون یه هفته جواب سوالاتتون رو دوباره بدم تا با خیال راحت بتونید مشکلاتتون رو حل کنید.

بهروز باشید…

.: مطالب مرتبط با این پست :.

شیوه های مختلف استفاده از CSS در صفحات html

2010-11-02T03:58:22Z

در مطلب گذشته ی آموزش CSS ، به قواعد نحوی و Syntax این زبون پرداختیم که می تونید اون مطلب رو از اینجا مطالعه کنید . پیشنهاد می کنم قبل از خوندن این مطلب حتما این مقاله رو بخونید .
در این پست قصد داریم در مورد شیوه های مختلف استفاده از CSS در درون صفحات HTML صحبت کنیم .
به طور کلی به ۳ شکل می تونید از CSS برای تعیین شیوه نمایش تگها ، در میان کدهای HTML استفاده کنید :
1- استفاده از CSS در درون تگها (inline CSS)
2- نوشتن تمامی تنظیمات CSS درون تگ Style در header صفحه اچ تی ام ال
3- نوشتن سلکتورهای CSS در فایل جداگانه و الصاق آن به صفحه HTML

1- استفاده از CSS در درون تگها (inline CSS) :

شما می تونید تنظیمات و ویژگی های CSS رو در درون هر کدوم از تگ های Html بیارید تا اون تنظیمات روی تگ مربوطه اعمال بشه . برای اینکار باید ویژگی های CSS مورد نظر رو که می خواید روی تگ خاصی اعمال بشه درون ویژگی style اون تگ بیارید .
ویژگی Style برای همه تگ های Html قابل تعریفه و به عنوان مقدار ، در درون خود میتونه چندین تا از ویژگی های CSS رو که با علامت ; از هم جدا شدند بیاره !
برای درک بیشتر از چگونگی استفاده CSS در درون تگها ، چند تا مثال براتون میارم :

● مثال ۱) فرض کنید می خواید فقط یکی از پاراگراف های توی صفحتون رنگ متنش قرمز بشه .
- تگ داشتن یک پاراگراف معمولی به شکل زیره :

<p>7Learn.com</p>

حالا ما می خوایم با استفاده از CSS درون این تگ ، رنگ متنشو قرمز کنیم . در این صورت کد پاراگراف بالا به شکل زیر باید تغیر پیدا کنه .

<p style="color:red" >7Learn.com</p>

می بینید که فقط ویژگی style به این تگ اضافه شده و به عنوان مقدار یکی از ویژگیهای CSS که رنگ متنو مشخص می کنه آورده شده !
● مثال ۲) همون پاراگراف بالا رو می خوایم نوع فونتش رو Tahoma و اندازه فونت رو ۱۶ پیکسل کنیم . کدش مثل زیر میشه :

<p style="font-face:tahoma;font-size:12px;">7Learn.com</p>

ملاحظه می کنید که همه ی تنظیمات CSS مورد نظر رو درون خود تگ و به عنوان مقدار ویژگی style میاریم . استفاده ی به این شکل خیلی کار درستی نیست . مگر اینکه فقط در تگ خاصی بخواید تنظیمات رو اعمال کنید و این تنظیمات در تگهای دیگه به اشتراک گذاشته نشده باشن . اگه بخواید همه ی مواقع از این شیوه استفاده کنید بسیاری از مزایای CSS رو که در این مقاله گفته بودیم از دست خواهید داد !
:: صفحه html ی که شامل دو پاراگراف فوق باشه به شکل زیر میشه :

<html>
<head>
<title>7Learn.com Css Learning</title>
</head>

<body>
<p style="color:red" >7Learn.com</p>
<p style="font-face:tahoma;font-size:12px;">7Learn.com</p>
</body>
</html>

برای خوندن بقیه مقاله و دریافت ورژن PDF اون به ادامه مطلب مراجعه کنید :

دریافت این مقاله به فرمت PDF

2- نوشتن تمامی تنظیمات CSS درون تگ Style در header صفحه html

با استفاده از این روش شما می تونید همه یا برخی از سلکتورهای CSS رو در تگ <style> تعریف کنید و در تگهای مختلف html با آوردن ویژگی class که نام یک سلکتور رو میگیره ، تنظیمات مربوط به سلکتور خاصی رو ، روی اون تگ اعمال کنید .

تگ <style> در کد html باید درون تگ <head> قرار بگیره .

● مثال) همون مثالی که برای روش اول زدیم اینجا باید به این شکل پیاده سازی بشه :

<html>
<head>
<title>7Learn.com Css Learning</title>
<style>
.p1 {color:red}
.p2 {font-face:tahoma;font-size:12px;}
</style>
</head>

<body>
<p class="p1">7Learn.com</p>
<p class="p2">7Learn.com</p>
</body>
</html>

می بینید که سلکتورهای p1 و p2 رو در تگ <style> تعریف کردیم و با استفاده از ویژگی class گفتیم که تنظیمات p1 روی پاراگراف اولی و p2 روی پاراگراف دومی اعمال بشه .

حالا فرض کنید با این دو روشی که گفتیم می خوایم یه پاراگراف دیگه اضافه کنید که خصوصیات هر دو پاراگراف اول و دوم رو داشته باشه .

در روش اول باید همه تنظیمات CSS رو درون تگ پاراگراف جدید بیاریم :

<p style="color:red;font-face:tahoma;font-size:12px;"> 7Learn.com</p>

ولی در روش دوم براحتی از ترکیب دو تا سلکتور p1 و p2 استفاده میکنیم :

<p class="p1 p2" >7Learn.com</p>

و دیگه نیازی نیست کد تکراری و اضافی بنویسید .

وقتی تنظیمات CSS در صفحات html شما زیاد میشن کارایی روش دوم خیلی محسوس میشه . مخصوصا اگه تگهای مختلفی با تنظیمات مشترک در صفحه وجود داشته باشه ، استفاده از روش دوم باعث کاهش redundancy و جلوگیری از نوشتن کدهای تکراری میشه .

۳- نوشتن سلکتورهای CSS در فایل جداگانه و الصاق آن به صفحه HTML

این روش دقیقا شبیه روش قبلیه با این تفاوت که به جای نوشتن سلکتورهای CSS در تگ style اونها رو در یک فایل با پسوند css. مینویسیم و این فایل رو با تگ خاصی به صفحه html الصاق می کنیم .

برای چسبوندن یک فایل CSS جهت استفاده از سلکتورهای اون در یک صفحه html باید تگ زیر رو در header صفحه htmlتون در تگ <head> قرار بدید :

به جای cssFileURL باید آدرس فایل CSS رو قرار بدید .

● مثال) باز هم همون مثال بالا رو اینبار با روش سوم اینجا میاریم :

خوب فرض کنیم ما سلکتورهامون رو در فایلی به نام styles.css نوشتیم و اونرو آپلود کردیم و محتویات فایل و آدرس اونرو به صورت زیر داریم :

http://www.7learn.com/css/sytles.css

.p1 {color:red}
.p2 {font-face:tahoma;font-size:12px;}

و کد صفحه html ما که شامل دو تا پاراگراف معروفمون هستند به شکل زیر میشه :

<html>
<head>
<title>7Learn.com Css Learning</title>

<link rel="stylesheet" type="text/css" href="http://www.7learn.com/css/sytles.css">
</head>

<body>
<p class="p1">7Learn.com</p>
<p class="p2">7Learn.com</p>
</body>
</html>

با الصاق فایل CSS به صفحه html که شامل سلکتورهامون هستند ، شیوه استفاده از سلکتورها دقیقا شبیه روش قبلی و با استفاده از ویژگی class هست .

استفاده از فایهای css می تونه نگهداری و مدیریت فایل های CSSتون رو راحت تر کنه .

در کل بهتره که از روش دوم یا سوم استفاده کنید تا از تمام مزایای CSS بهره ببرید .

از جلسات بعدی دیگه شروع میکنم به توضیح و آموزش تنظیمات مختلف CSS برای شکل دهی و فرمت بندی صفحات html .

پس همچنان با ما باشید …

دریافت این مقاله به فرمت PDF

.: مطالب مرتبط با این پست :.

پدرم هم رفت کنار مهران و مهرداد!!! (داغ دو برادر و الان هم پدر)

2010-10-22T19:25:16Z

ساعت ۲۰:۳۰ روز پنجشنبه ۲۹ مهرماه ۱۳۸۹ اخبار معروف ۲۰:۳۰ شروع به پخش کرد. چون پنجشنبه ها برنامه خاصی بنام صرفا جهت اطلاع داشت در مورد مسئولین که من و پدرم خیلی دوسش داشتیم!!! پدرم با عجله نگاش کرد و فورا مادرم رو که مثل همیشه ناراحت روی زمین افتاده بود رو آماده کرد برن دکتر. نمیدونم چطوری رفتن که متوجهش نشدم!

ساعت ۲۰:۵۵ دقیقه! یه تلفن مشکو زنگ زد جوابشو ندادم ، چند بار زنگ زد و حرف نمیزد آخرشم فوحشش دادم و قطعش کردم که اس ام اس داد منم حامد بردار!!! برداشتم و گفتم چی شده؟ گفت که پدرت رو موتور زده!!!!!! گفتم یا ابولفضل و فورا لباس پوشیدم و با دو رفتم بیرون. همین که رسیدم سر کوچه محمود یکی از فامیلامون با یه تاکسی پیچید جلوم گفت خونت خراب شد بیا بریم! باور کنید فاصله یک کیلومتری بیمارستان حدود سه ساعت از نظرم گذشت. وقتی رسیدم دیدم عالم و آدم اونجا جمع هستن ، رفتم داخل دیدم مادرم غرق در خون و پدرم رو تخت بیمارستان داغون و دست و پاهاش کاملا شکسته و بیهوش رو تخت و چندین نفر شمغول شوک هستن که به هوشش بیارن. منو خواهرم که بعدا اومد فقط میزدیم تو سرمون. برخی از دوستان که توی بیمارستان کار میکنن اومدن و منو گرفتن برم بیرون ولی نرفتم میخواستم پدرم رو ببینم زنده میمونه! بعد از ده دقیقه دیدم همه وسایل رو از پدرم باز کردن!!!!!!!!!!!!! وای خدای من رفیق دوران جوونیم ، بهترین دوستم توی کل زندگیم ، کسی که حتی خلافهای جوان بودنمو بهش میگفتم ، داداشم ، خواهرم ، مادرم ، باور کنید فرشته خونمون رو از دست دادم!!! اونم دقیقا دو ماه قبل از سالگرد داداشم پدرم رو هم از دست دادم! باور کنید اشک امونم نمیده ، چشمام اونقدر میسوزن که کم دید شدم ، وای خدایا کاش پدرم رو میدیدید یا یه کم با روحیاتش آشنا بودید تا میدونستید من کی رو از دست دادم! پاهاش از چند جا شکسته بود چشماش کلا ورم کرده بود و از پشت سرش یه عالمه خون رفته بود که شهرداری روز بعدش شست اون منطقه رو!!! خدا بگم چکارت کنه اون کسی که با سرعت ۱۰۰ کیلومتر در ساعت ۹ شب خیابون یکطرفه رو میرفتی و فکر نکردی یه خانواده رو ویران کردی بخاطر دو دقیقه خوش بودنت خدا ازت نگذره خدا … ، بعدا از زبون مادرم شنیدم که موتوری میخواسته مادرم رو زیر کنه که پدرم خودشو میندازه جلو!!! در آخرین لحظاتم عشق به مادرم عشق ۴۵ سالشو فراموش نکرده بود و سرانجام هم جونشو بخاطر مادرم از دست داد. چون مادرم ناراحتی قلبی داره و با یه آی گفتن پدرم دست و پاشو گم میکرد. افسوس که نمیدونست خودش قبل از مادرم میمیره.

امسال دومین مصیبت به ما وارد شد و جمعا دو برادر و پدرم رو تا الان که فقط ۲۴ سال دارم از دست دادم!!! یه چیزی رو میخوام بگم شاید فکر کنید بده دارم میگم! ولی بخداوندی خدا به خودش قسم اینجا قسمش میدم یا همه ما رو بکشه یا اینطوری یکی یکی ما رو پر پر نکنه ، بخدا من و خانوادم دیگه تحمل مصیبت نداشتیم ، بخدا این مصیبت زورکی بر ما وارد شد! خدایا خدایا خدایا بس کن ما طاقت امتحان شدن نداریم ، خدایا ما طاقت صبر تو رو نداریم ، خدایا به کی بگیم دست از سرمون بردار ، خدایا به کی بگیم ولمون کن ، خدایا چکارت کردیم که اینهمه زجر به ما میدی! تو که میخواستی پدرم رو بکشی یکسال پیش میکشتی که غم فرزند دومشو نبینه! وای خدا وای خدا ازت گله دارم ، باهات از الان برای همیشه قهرم ، خدایا خدایا تو که دوسمون نداری ازمون متنفری حداقل به خودمون واگذارمون ، تا سر موعدمون برسه و خلاصمون کنی. یا الان بکش یا اونقدر نکش که روزی هزار بار آرزوی مرگ کنیم. دیگه برای من یکی فرق نداره ، زجه های خواهرامو شنیدی! خواهر کوچیکم هیچکس و جز پدرم نداشت ، تمام سنگ صبور خانواده پدرم بود که گرفتیش ، وای خدایا اونقدر دلم پره میخوام برم جایی هوار بکشم که دست از سر ما برداری. خدایا خدایا خدایا. خدایا و هزار خدایای دیگه!!! بخدا دیگه چشام نمیبینه منو ببخشید فقط اومدم بگم دیگه حوصله خودمم ندارم دیگه از زندگی سیرم ، پدری که آرزو داشت یکی از پسراشو در لباس دامادی ببینه! هرگز ندید… اون دو تا برادرم یکی در سن ۲۱ سالگی و دیگری در سن ۳۴ سالگی درگذشتن و هر دو ناکام ، خیلی ارزوها برای من داشت که من احمق ، من بیشعور هرگز جامه عمل نپوشوندم که اینطور الان اینهمه غصه بخورم.

تو رو خدا برای پدرم فاتحه بخونید که تا در دنیا بود هر چی زجر بود کشید و همیشه میخندید…

روحش شاد…

.: چند مطلب تصادفی :.

کد جاوااسکریپت آلبوم تصاویر تصادفی

2010-10-12T16:43:34Z

کد جاوا اسکریپت آلبوم تصاویر با نمایش ترتیبی و اسلایدی رو قبلا براتون گذاشته بودم که می تونید اونرو از اینجا دریافت کنید .

یکی از دوستان هم درخواست داده بود که کد این آلبوم رو به شکلی تغیر بدم که تصاویر در هر بار نمایش صفحه به صورت تصادفی نمایش داده بشه و با زدن دکمه Next هم یه عکس تصادفی از عکسهایی که آدرسشون رو توی کد گذاشتید به نمایش در بیاد .

من کد قبلی رو تغیر دادم و ورژن جدیدی از اون رو اینجا گذاشتم که عکس ها رو به شکل تصادفی و random نمایش میده .

:: نمایش نمونه ی این آلبوم رو می تونید در زیر ببینید . اگر صفحه رو رفرش کنید متوجه میشید که عکس نمایش داده شده به صورت تصادفی هست :

برای دریافت کد و استفاده از این آلبوم تصادفی در سایت یا وبلاگ خود به ادامه مطلب مراجعه کنید …

=> دریافت کد جاوااسکریپت آلبوم تصاویر تصادفی <=

و اما توضیحات مربوط به کد :

کد این آلبوم به شکل زیره :

:: در خطی که با رنگ قهوه ای مشخص کردم ، می تونید تیتر یا عنوان دلخواهی رو برای آلبوم خودتون مشخص کنید . تیتر شما در این خط باید درون " " قرار داشته باشد .

:: در قسمتی هم که با رنگ آبی مشخص شده شما می تونید هر تعداد تصویر که بخواهید به آلبومتان اضافه کنید . مثلا در کد بالا ۴ تصویر (تصاویر شماره ۰ تا ۳) قرار دارند . برای افزودن تصویر جدید (تصویر پنجم) این خط رو بعد از چهار خط آبی رنگ اضافه می کنیم :

photos_r[4]="ImageUrl"

که ImageUrl آدرس تصویر جدید هست .

دقت کنید که هر تصویر جدیدی که بخواید اضافه کنید ، شمارش باید یکی (فقط یکی) بیشتر از شماره ی تصویر آخری در کد باشه . در غیر این صورت در نمایش تصاویر ممکنه اخلال بوجود بیاد . مثلا در کد بالا که شماره آخرین تصویر ۳ است (به رنگ سبز) ، شماره تصویر جدید ۴ میشه ، بعدی ۵ و بعدش ۶ و …

:: در صورت تغیر بقیه ی قسمت های کد ، آلبوم یا تصاویر آن نمایش داده نمیشود .

=> دریافت کد جاوااسکریپت آلبوم تصاویر تصادفی <=

موفق و پیروز باشید .

.: مطالب مرتبط با این پست :.

کد جاوااسکریپت آلبوم تصاویر در سایت یا وبلاگ شما