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

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

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

در این بخش قرار است از یک فرم html ورودی دریافت کنیم. در مثال ها انواع رویداد ها (event) را نیز بررسی می کنیم.

ما برای مثال های خود دو فایل ایجاد می کنیم:

• index.html
• script.js

ادامه ی مطلب را ببینید.

بعد از یه وقفه ی چند روزه بالاخره اومدم با یه مطلب خیلی عالی.

اگر مطلب قبلی را نخوانده اید ، بخوانید!

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

در این مطلب می خواهیم کمی پیشرفته تر کار کنیم. در برنامه ای که مقدار ورودی و متغیر وجود نداشته باشد ، کار ها خیلی ساکن (static) می شوند. ما می خواهیم با افزودن مقدار ورودی و متغیر ها کار خود را کمی پویا تر کنیم.

به ادامه ی مطلب بروید.

سلام. بالاخره قرار کد نویسی رو شروع کنیم! من که خیلی ذوق دارم. شما چطور؟

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

در مورد چگونگی اجرای کد قبلا در این مطلب توضیح داده ام.

نمایش یک پیغام ساده

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

برای خواندن مطلب به طور کامل به ادامه ی مطلب بروید.

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

این مطلب ادامه ی دو مطلب قبلی است:

• مقدمه
• اجرای کد ها
  

برای مطالعه ی مطلب به ادامه ی مطلب بروید.

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

در هر برنامه نویسی ای ، ما چیزی با عنوان syntax (سینتکس) داریم. این syntax را می توان تقریبا دستور زبان برنامه نویسی معرفی کرد. یعنی این که syntax به ما می گوید که چطور باید کد ها را بنویسیم و چطور از امکانات زبان برنامه نویسی استفاده کنیم. پس خیلی مهم است که با syntax هر برنامه نویسی آشنا شوید تا در نوشتن کد ها به خطا بر نخورید. syntax آموزش خاصی ندارد. شما با یاد گرفتن بخش های مختلف کدنویسی هر زبان ، با آن آشنا می شوید.

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

• index.html
• scripts.js

برای مطالعه ی مطلب به ادامه ی مطلب بروید.

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

هر کاراکتر در کامپیوتر با عددی مشخص می شود که آن عدد همان کد کاراکتر است. در اصل کامپیوتر کاراکتر ها را فقط با عدد آن ها می شناسد و نمی داند مثلا حرف "a" چیست. بلکه می داند عدد آن 97 است. جالب تر این که کامپیوتر حتی همین 97 را هم نمی شناسد و با اعداد دودویی آن را تشخیص می دهد.

کد کاراکتر چیست؟

تمام کاراکتر هایی که ما استفاده می کنیم ، در جدول هایی بسیار بزرگ جمع آوری شده اند و به صورت قراردادی این کد ها به آن ها تعلق گرفته است که وقتی ما صفحه ای پر از کاراکتر را می بینیم ، کامپیوتر برای نمایش تمام این کاراکتر ها از آن جدول ها استفاده می کند. سیستم ها به طور پیشفرض از جدول ascii برای نمایش کاراکتر ها استفاده می کنند که جدول بسیار محدودی است و بسیاری از کاراکتر هایی که شاید به درد ما بخورند ، از جمله حروف فارسی را ندارند. اگر شما می توانید الان این حروف فارسی را ببینید به خاطر این است که کامپیوتر شما از جدولی به غیر از این جدول استفاده کرده است. جدول utf-8 جدولی کامل تر است که به دلیل استفاده از اعداد در مبنای 16 ، ظرفیت بسیار بیشتری دارد. این جدول شامل حروف فارسی و بسیاری کاراکتر های دیگر نیز هست.

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

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

نکته: برای اجرای کد های C# می توانید از نرم افزار visual studio استفاده کنید.

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

بازی رمزگشایی

مرحله ی یک بازی رمزگشایی

من در بازی عضو شدم و این مرحله را باز کردم. این مرحله 10 امتیاز دارد و آسان به حساب می آید.

در دو مطلب قبلی ای که در سایت منتشر شد ، من سعی کردم تا حدودی کاربران را با رمزگذاری (encryption) و مبهم کردن (obfuscation) آشنا کنم.

برای خواندن مطالب قبلی در این باره از این لینک ها استفاده کنید:

آموزش مبهم کردن کد های جاوا اسکریپت

مقدمه ای بر رمزگذاری و مبهم کردن کد

امروز با بازی رمزگشایی در سایت ابزارها قالب میزبان شما هستیم. این بازی نمونه ی ایرانی ندارد. از این به بعد باید منتظر بازی های تحت وب این چنینی از سایت ما باشید.

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

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

هر کسی که تا به حال کد جاوا اسکریپت نوشته باشد ، می داند که این زبان open source (منبع باز) است. منبع باز بودن یک زبان برنامه نویسی هم محاسنی دارد و هم معایبی. یکی از معایب منبع باز بودن این است که همه می توانند ، کد شما را ببینند و از آن استفاده کنند و این یعنی کپی رایت هیچ معنی ای ندارد. شاید برای بعضی ها مشکلی نداشته باشد که کد هایشان را در اختیار همه بگذارند ، اما ممکن است شما دوست نداشته باشید کد هایتان برای همه قابل فهم باشد. برای حل این مشکل ما نیاز داریم کد های خود را Encryption (رمزگذاری) یا obfuscation (مبهم) کنیم.

در مطلب قبلی متدی از جی کوئری معرفی کردم به نام animate. کار این تابع در جی کوئری ایجاد انیمیشن بر روی ویژگی های سی اس اس است. در مطلب قبلی گفته بودم که امکان ایجاد انیمیشن بر روی تمام ویژگی های Css با استفاده از این تابع نیست. اما نگفتم که چه توابعی امکان انیمیشنی شدن را دارند. امروز در این مطلب می خواهم مواردی که امکان استفاده از انیمیشن را دارند بگذارم.

شکل کلی تابع animate

<<<code>>>

$(selector).animate( { "cssProperty":value , ... }, animationTime ); // time is in milisecond

<<</code>>>

برای دیدن مواردی استفاده ی این تابع به ادامه ی مطلب بروید.

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

دامنه چیست؟

دامنه یا domain آدرسی متنی است که به آی پی هایی از اینترنت اختصاص داده می شود. اگر دامنه نبود ما برای دیدن هر سایتی مجبور بودیم آدرس آی پی آن را وارد کنیم. همان طور که می دانید آی پی ها چهار عدد هستند که با نقاطی از هم جدا می شوند (مثل 192.168.0.1) و حفظ کردن آن ها به هیچ وجه راحت نیست. اما با وجود دامین دیگر کسی لازم نیست این آی پی ها را حفظ باشد تا بتواند سایت های محبوب خود را ببیند. وبلاگ ها به جای دامنه ، زیر دامنه (sub-domain) دارند و این زیر دامنه ها را به طور رایگان به صاحب وبلاگ ها ارائه می کنند. اما اگر شما بخواید یک دامنه ی شخصی برای خود داشته باشید باید چه کار کنید؟

برای مشاهده ی مطلب به طور کامل به ادامه ی مطلب بروید.

خیلی ها هستند که می خواهند در صفحهات سایت خود ورودی های (input) اختصاصی داشته باشند. به این معنی که تمام مواردی که برای ورودی ها وجود دارد برای سایت آن ها به طور کاملا اختصاصی طراحی شده باشد. در این کار تغییر دادن حالت ورودی های متن ، آدرس وب ، عدد و ... کار ساده ای است و به راحتی می تواند با سی اس اس این کار را انجام داد. اما تغییر دادن دکمه های checkbox  و  radion کمی مشکل تر است.

ادامه ی متن در ادامه ی مطلب.

کسانی که با سی اس اس کار کرده اند به احتمال زیاد با ویژگی Position روبرو شده اند. در صفحات وب از این ویژگی بسیار استفاده می شود و شما خیلی راحت می توانید آن را پیدا کنید. اما از آن جایی که این ویژگی کمی نامفهوم به نظر می رسد ، تصمیم گرفتم آن را در یک مطلب نسبتا کوتاه توضیح دهم.

ویژگی Position

این ویژگی ، مشخص کننده ی مکان قرار گیری شی نسبت به صفحه است. مثلا ثابت یا متناسب ...

متن کامل در ادامه ی مطلب.

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

اگر با برنامه نویسی ای مثل C# کار کرده باشید باید بدانید که این برنامه نویسی به دلیل داشتن امکان Namespace که برای هر فایل ایجاد می شود ، چنین مشکلی ندارد و متغیر های هر قسمت را به طور خودکار از دیگر قسمت ها جدا می کند. اما ما در جاوا اسکریپت باید خودمان این کار را انجام بدهیم. البته باید بگویم که این کار بسیار جالب است. (من که از کار کردن با کلاس های Javscript کلی لذت می برم)

کلاس چیست؟

خیلی ساده شروع می کنم. کلاس چیست؟

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

مطلب را در ادامه ی مطلب دنبال کنید.

من قبلا در مطلب توابع انیمیشنی جی کوئری درباره ی تابع های موجود در جی کوئری برای ایجاد انیمیشن های ساده توضیح داده بودم. اما به تازگی یکی از کاربران سوالی در مورد نوعی انیمیشن پرسید که مربوط به slide ها می شد. (یعنی slideUp , slideDown , slideToggle)

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

برای مشاهده ی مطلب به طور کامل به ادامه ی مطلب بروید.

در جاوا اسکریپت متدی در کلاس window وجود دارد به نام open که چهار مقدار می گیرد:

<<<code>>>

window.open( URL,[name],[specs],[replace] )

<<</code>>>

مقادیری که [] دارند اختیاری هستند.

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

برای دیدن مطلب به طور کامل به ادامه ی مطلب بروید.

این مطلب کوتاه را نوشتم تا توضیح دهم که صفحات پویا و ایستا به چه معنی هستند و چه تفاوتی با هم دارند.

برای دیدن مطلب به طور کامل به ادامه ی مطلب بروید.

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

شاید تا به حال با کلمه ی cache (تلفظ: کَش) روبرو شده باشید. این کلمه مربوط به یکی از امکانات مرورگر ها است که اگر علاقه داشته باشید می توانید در این باره متن زیر را بخوانید.

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

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

برای مطالعه ی مطلب به طور کامل به ادامه ی مطلب بروید.