PERSIAN
DEVELOPER
NETWORK
ج
ا
م
ع
ت
ر
ی
ن
م
ج
م
و
ع
ه
د
ا
ک
ی
و
م
ن
ت
ب
ر
ن
ا
م
ه
ن
و
ی
س
ی
و
ب
ب
ه
ز
ب
ا
ن
ف
ا
ر
س
ی
تست کد
تمام مستندات
آموزش HTML
اصول اولیه HTML
HTML چیست؟
آناتومی یک عنصر HTML
ایجاد اولین عنصر HTML شما
عناصر تودرتو
عناصر خالی
ویژگی ها
افزودن ویژگیها به یک عنصر
ویژگی های بولی
حذف علامت نقل قول در اطراف مقادیر ویژگیها
نقل قول تکی یا دوتایی؟
آناتومی یک سند HTML
فضای خالی در HTML
ارجاعات کاراکتری: اضافه کردن کاراکترهای ویژه در HTML
کامنت های HTML
متا دیتای صفحه وب
سربرگ HTML چیست؟
افزودن عنوان
فراداده: عنصر <meta>
مشخص کردن کدگذاری کاراکتر سند شما
افزودن نویسنده و توضیحات
بررسی کاربرد توضیحات در موتورهای جستجو
انواع دیگر فراداده
اضافه کردن آیکونهای شخصی ساز به سایت
اعمال CSS و جاوا اسکریپت به HTML
تنظیم زبان اصلی سند
سرفصلها و پاراگرافها
سرفصلها و پاراگرافها
اجرای سلسله مراتب ساختاری
چرا به ساختار نیاز داریم؟
چرا به معناشناسی نیاز داریم؟
تأکید و اهمیت
تأکید و اهمیت چیست؟
تأکید
اهمیت قوی
ایتالیک، بولد، زیرخطدار…
لیست ها
لیست های نامرتب
مرتب
لیست های تودرتو
لیست های توضیحات
مثال لیست توضیحات
چندین توضیح برای یک آیتم
ویژگی های پیشرفتهی متن
نقل قول ها
نقل قول های بلوکی
نقل قول های درون خطی
نقل قول ها <cite>
اختصارات
علامتگذاری اطلاعات تماس
بالانویس و زیرنویس
نمایش کد کامپیوتر
علامتگذاری زمانها و تاریخها
ساختاردهی اسناد
بخشهای اساسی یک سند
سرصفحه ها
نوار ناوبری
محتوای اصلی
نوار کناری
پاورقی
HTML برای ساختاردهی محتوا
عناصر طرحبندی HTML با جزئیات بیشتر
بستهبندیهای غیرمعنایی
شکست خطوط و خطکش افقی
<br>: عنصر شکست خط
<hr>: عنصر شکست موضوعی
ساختاردهی یک وبسایت پایه
ایجاد لینکها
هایپرلینک چیست؟
آناتومی یک لینک
لینکهای سطح بلوک
لینکهای تصویر
افزودن اطلاعات پشتیبانی با ویژگی عنوان
مقدمهای سریع بر URLها و مسیرها
همان دایرکتوری
حرکت به سمت پایین و زیرشاخهها
بازگشت به دایرکتوریهای والد
پیوند دادن نسبت به دایرکتوری ریشه
لینک دادن با URL های کامل
لینکهای داخلی و خارجی
قطعات سند
چگونه URL ها به مسیرهای فایل تبدیل می شوند؟
بهترین شیوههای لینک
از متن لینک واضح استفاده کنید
لینک دادن به منابع غیر HTML - علائم راهنمایی واضح بگذارید
هنگام پیوند به یک فایل دانلود، از ویژگی دانلود استفاده کنید
چه زمانی لینکها را در تب جدید باز کنیم؟
ایجاد منوی ناوبری
لینکهای ایمیل
مشخص کردن جزئیات
تصاویر
چگونه یک تصویر را در صفحه وب قرار دهیم؟
متن جایگزین
عرض و ارتفاع
تغییر اندازه تصاویر
عنوانهای تصویر
داراییهای رسانهای و مجوزها
آشنایی با انواع مجوزها
مالکیت عمومی/CC0
جستجوی تصاویر دارای مجوز مجاز
حاشیهنویسی تصاویر با شکلها و زیرنویس شکلها
تصاویر پس زمینه CSS
ویدئو و صوت HTML
ویدئو و صدا در وب
عنصر <video>
استفاده از چندین قالب منبع برای بهبود سازگاری
محتویات یک فایل رسانهای
پشتیبانی از فایلهای رسانهای در مرورگرها
سایر ویژگیهای <video>
عنصر <audio>
نمایش مسیر خطی ویدیوها
اصول اولیه جدول HTML
جدول چیست؟
یک جدول چگونه کار میکند؟
چه زمانی باید از جداول HTML اجتناب کنید؟
اضافه کردن سرفصل با عناصر <th>
چرا سرفصلها مفید هستند؟
اجازه دادن به سلولها برای گسترش در چندین ردیف و ستون
گروه بندی ستون ها با <colgroup> و <col>
دسترسیپذیری جدول HTML
استفاده از سرستونها و سر سطرها
اضافه کردن عنوان به جدول با استفاده از <caption>
افزودن ساختار با <thead> و <tbody> و <tfoot>
افزودن ساختار به جدول ثبت هزینهها
ویژگی scope
ویژگیهای id و headers
فرمها و دکمهها در HTML
تعامل با کاربران
دکمهها
آناتومی یک فرم
عنصر <form>
ساختاربندی فرمها
عناصر <input>
ویژگیهای required و value در عمل
ورودیهای فیلد متنی تخصصی
عناصر <label>
برچسبهای فرم صریح و ضمنی
عنصر <button>
نکتهای فرعی در مورد دسترسیپذیری
انواع دیگر کنترل
دکمههای رادیویی
غیرفعال کردن کنترلهای فرم
کادرهای انتخاب
منوهای کشویی
فیلدهای ورودی متن چند خطی
اعتبارسنجی فرم
اشکالزدایی HTML
اشکال زدایی ترسناک نیست
HTML و اشکالزدایی
استفاده از بازرس DOM
نوبت شما: مطالعه HTML با استفاده از DOM inspector
اعتبارسنجی HTML
تفسیر پیامهای خطا
گنجاندن گرافیکهای برداری در HTML
گرافیک برداری چیست؟
SVG چیست؟
اضافه کردن SVG به صفحات شما
راه سریع: عنصر img
عیبیابی و پشتیبانی از مرورگرهای مختلف
چگونه کد SVG را در HTML خود قرار دهیم
نحوه جاسازی SVG با iframe
از object تا iframe - فناوریهای عمومی جاسازی
تاریخچه کوتاهی از جاسازی
iframe ها با جزئیات
نگرانیهای امنیتی
فقط در صورت لزوم جاسازی کنید
از HTTPS استفاده کنید
همیشه از ویژگی sandbox استفاده کنید
پیکربندی دستورالعملهای CSP
عناصر <embed> و <object>
آموزش CSS مبتدی
CSS چیست؟
استایلهای پیشفرض مرورگر
CSS برای چیست؟
اصول اولیه سینتکس CSS
CSS چگونه به HTML اعمال میشود؟
شروع کار با CSS
شروع با مقداری HTML
اضافه کردن CSS به سند
استایل دهی خارجی
قرار دادن استایلشیتها در مکانهای مختلف
استایل دهی داخلی
استایلهای درونخطی
استفاده از انتخابگرهای رایج
انتخاب عناصر HTML
اضافه کردن کلاس
استایلدهی به چیزها بر اساس موقعیت آنها در سند
استایلدهی به چیزها بر اساس حالت (state)
ترکیب انتخابگرها و ترکیبکنندهها
سایر ویژگیهای سینتکس CSS
توابع
تابع calc
توابع تبدیل
قوانین @
ویژگیهای مختصرنویسی
کامنتهای CSS
فضای خالی در CSS
انتخابگرهای CSS پایه
انتخابگر (selector) چیست؟
انتخابگرهای نوع (Type)
انتخابگرهای کلاس (Class)
هدف قرار دادن کلاسها روی عناصر خاص
انتخاب عنصری که بیش از یک کلاس دارد
انتخابگرهای شناسه (ID)
لیستهای انتخابگر
انتخابگرهای نامعتبر در فهرستهای انتخابگر
انتخابگر جهانی
استفاده از انتخابگر سراسری برای خواناتر کردن انتخابگرهایتان
انتخابگرهای ویژگی
انتخابگرهای حضور و ارزش
انتخابگرهای تطبیق زیررشته
شبه کلاسها و شبه عناصر
شبه کلاس چیست؟
مثال پایهای از شبه کلاس
شبه کلاسهای تعامل کاربر
شبه عنصر چیست؟
ترکیب شبه کلاسها و شبه عناصر
تولید محتوا با before و after
آیکونهای محتوای تولید شده
اشکال تولید شده
ترکیبکنندهها
ترکیبکنندهی نسلی
ترکیبکننده فرزند
ترکیبکنندهی sibling بعدی مستقیم
ترکیبکنندهی sibling بعدی غیرمستقیم
ترکیب ترکیبکنندهها با انتخابکنندهها
مدل جعبهای
جعبههای بلوکی و درونخطی
انواع نمایشگر داخلی و خارجی
نمونههایی از انواع مختلف نمایشگر
مدل جعبهای CSS چیست؟
قطعات یک جعبه
مدل جعبهای استاندارد CSS
مدل جعبهای جایگزین CSS
استفاده از ابزارهای توسعه مرورگر برای مشاهده مدل جعبهای
مارجینها، فاصلهگذاری و حاشیهها
مارجین margin
فروپاشی مارجین
مرزها (حاشیه ها) border
پدینگ padding
مدل جعبهای و جعبههای درونخطی
استفاده از نمایش: inline-block
رسیدگی به مغایرت ها
قوانین متناقض
آبشاری cascade
مشخصه specificity
وراثت inheritance
درک چگونگی تعامل مفاهیم با یکدیگر
درک وراثت
کنترل وراثت
تنظیم مجدد تمام مقادیر ویژگیها
درک آبشار
ترتیب منبع
مشخصه
مثالی عمیقتر از جزئیات
شناسهها در مقابل کلاسها
استایلهای درونخطی
مهم!
تأثیر مکان CSS
ترتیب اعلانهای برتر
مقادیر و واحدهای CSS
مقدار CSS چیست؟
اعداد، طولها و درصدها
طولها
واحدهای طول مطلق
واحدهای طول نسبی
بررسی یک مثال
em و rem
درصدها
اعداد
رنگ color
کلمات کلیدی رنگی
مقادیر RGB هگزادسیمال
مقادیر RGB
یک مثال RGB با opacity
استفاده از hue برای مشخص کردن یک رنگ
HWB
HSL
تصاویر image
موقعیت position
رشتهها string و شناسهها id
توابع
توابع ریاضی
اندازه بندی آیتم ها در CSS
اندازه طبیعی یا ذاتی آیتم ها
تنظیم اندازه خاص
استفاده از درصدها
مارجین و پدینگ درصدی
حداقل و حداکثر اندازهها
حداکثر عرض روی تصاویر max-width
واحدهای viewport
پسزمینهها و حاشیهها
رنگهای پسزمینه
تصاویر پس زمینه
کنترل تکرار پسزمینه
اندازه بندی تصویر پس زمینه
قرار دادن تصویر پس زمینه
پسزمینههای گرادیان
تصاویر پس زمینه چندگانه
پیوست پسزمینه
استفاده از ویژگی مختصر نویسی background
ملاحظات دسترسی پس زمینه
حاشیه ها
گوشههای گرد
محتوای سرریز شده
overflow یا سرریز چیست؟
CSS تلاش میکند از «از دست رفتن دادهها» جلوگیری کند
ویژگی overflow
پنهان کردن محتوای سرریز شده
اسکرول محتوای سرریز شده
نمایش دادن اسکرول بار فقط درصورت نیاز
سرریز ناخواسته در طراحی وب
تصاویر، رسانهها و عناصر فرم
عناصر جایگزین شده
اندازه بندی تصاویر
مدیریت مشکلات نمایش تصویر با object-fit
عناصر جایگزین شده در طرح بندی
عناصر فرم
استایلدهی به عناصر ورودی متن
نرمالسازی رفتار فرم
وراثت و عناصر فرم
عناصر فرم و اندازهبندی جعبهای
سایر تنظیمات مفید
درست کردن همه چیز با "reset"
استایلدهی جداول
یک جدول HTML معمولی
شروع استایلدهی به جدول
بهروزرسانی فونت
فاصله گذاری
ترازبندی
اضافه کردن حاشیه
نوار گورخری
استایل دادن به کپشن ها
نکات ریز استایلدهی جداول
اشکالزدایی CSS
نحوه دسترسی به DevTools مرورگر
DOM در مقابل منبع نمایش
بررسی CSS اعمال شده
ویرایش مقادیر
افزودن یک ویژگی جدید
درک مدل جعبهای
حل مسائل مربوط به مشخصهها
مشکلات اشکالزدایی در CSS
از مشکل یک قدم عقب بروید
آیا HTML و CSS معتبری دارید؟
آیا ویژگی و مقدار توسط مرورگری که در آن آزمایش میکنید پشتیبانی میشوند؟
آیا چیز دیگری CSS شما را نادیده گرفته است؟
یک مورد آزمایشی کوچکشده از مشکل ایجاد کنید
جلوههای پیشرفته استایلدهی
سایه Box shadow
یک box shadow ساده
box shadow در تعداد
سایر ویژگیهای box shadow
فیلترها
حالتهای ترکیبی
حالت ترکیبی پسزمینه background-blend-mode
حالت ترکیبی mix-blend-mode
اشکال CSS
-webkit-background-clip: text
لایههای آبشاری
بررسی مفهوم آبشار
منشأ و آبشار
منشأ و ویژگی
مروری بر لایههای آبشاری
ترتیب اولویت لایه آبشاری
مسائلی که لایههای آبشاری میتوانند حل کنند
مسائلی که لایههای آبشاری تو در تو میتوانند حل کنند
ایجاد لایههای آبشاری
دستور @layer در قاعده برای لایههای نامگذاری شده
قاعدهی بلوک @layer برای لایههای نامگذاری شده و ناشناس
ایجاد لایه و media query
وارد کردن استایل شیتها به لایههای نامگذاری شده و ناشناس با استفاده از @import
مروری بر لایههای آبشاری تو در تو
مزایای لانه سازی لایه ها
ایجاد لایههای آبشاری تو در تو
تعیین اولویت بر اساس ترتیب لایهها
ترتیب اولویت لایههای آبشاری منظم
ترتیب اولویت لایههای آبشاری تو در تو
مدیریت جهتهای مختلف متن
حالتهای نوشتاری چیستند؟
حالتهای نوشتاری و طرحبندی بلوکی و درونخطی
جهت
ویژگیها و مقادیر منطقی
ویژگیهای منطقی حاشیه، مرز و فاصلهگذاری
مقادیر منطقی
آیا باید از ویژگیهای فیزیکی استفاده کنید یا منطقی؟
سازماندهی CSS شما
آیا پروژه شما راهنمای سبک کدنویسی دارد؟
ثابت قدم باشید
قالببندی CSS قابل خواندن
CSS خود را کامنت کنید
بخشهای منطقی را در فایل استایل خود ایجاد کنید
از انتخابگرهای بیش از حد خاص خودداری کنید
استایلشیتهای بزرگ را به چندین استایلشیت کوچکتر تقسیم کنید
ابزارهای دیگری که میتوانند کمک کنند
روشهای CSS
OOCSS
BEM
سایر سیستمهای رایج
ساخت سیستمهایی برای CSS
تعریف متغیرها
کامپایل کردن استایلشیتهای کامپوننت
آموزش CSS پیشرفته
استایلدهی اولیه متن و فونت
استایلدهی به متن در CSS شامل چه مواردی میشود؟
فونتها
رنگ
خانوادههای فونت
فونت های در دسترس
فونتهای پیشفرض
استک های فونت
یک مثال از خانواده فونت
اندازه فونت
سبک فونت، وزن فونت، تبدیل متن و تزئین متن
سایههای متن
سایههای متعدد
طرحبندی متن
ترازبندی متن
ارتفاع خط
فاصله گذاری حروف و کلمات
سایر ویژگی هایی که ارزش بررسی دارند
خلاصه نویسی فونت
استایلدهی به لیستها
یک مثال ساده از لیست
مدیریت فاصلهگذاری لیستها
سبکهای خاص لیست
استایلهای گلولهای
موقعیت گلوله
استفاده از تصویر گلوله شخصی ساز
خلاصه نویسی به سبک لیست
کنترل شمارش لیست
start
reversed
value
استایلدهی به لینکها
حالتهای یک لینک
سبکهای پیشفرض
استایلدهی به لینکها
لینکهای خودتان را استایلدهی کنید
قرار دادن آیکون روی لینکها
استایلدهی به لینکها به عنوان دکمه
فونتهای وب
خلاصه خانوادههای فونت
فونتهای وب
افزودن فونتهای وب خودتان
پیدا کردن فونتها
تولید کد مورد نیاز
پیادهسازی کد در نسخه آزمایشی شما
استفاده از یک سرویس فونت آنلاین
font-face با جزئیات بیشتر
مقدمهای بر طرحبندی CSS
جریان طرحبندی عادی
عناصر به طور پیشفرض چگونه چیدمان میشوند؟
مثال جریان عادی
نادیده گرفتن جریان عادی
سایر تکنیکهای چیدمان
float ها
پسزمینه float
مثالی از نوع float
شناور کردن جعبه
تجسم شناور
پاک کردن شناورها
جعبههای پاکسازی که دور یک شناور پیچیده شدهاند
مشکل
display: flow-root
موقعیت یابی
معرفی موقعیتیابی position
موقعیتیابی استاتیک static
موقعیتیابی نسبی relative
معرفی بالا، پایین، چپ و راست
موقعیتیابی مطلق absolute
زمینههای موقعیتیابی
معرفی z-index
موقعیتیابی ثابت fixed
موقعیتیابی چسبنده sticky
مثال پایه
فهرست scroll
فلکسباکس
چرا فلکس باکس؟
معرفی یک مثال ساده
مشخص کردن عناصری که باید به عنوان flexbox طرحبندی شوند
The flex model
ستونها یا ردیفها؟
بسته بندی
خلاصهسازی جریان flex
اندازهبندی انعطافپذیر آیتمهای flex
flex: خلاصهنویسی در مقابل طولانینویسی
تراز افقی و عمودی
ترتیب دهی به آیتم های فلکس
flexbox تو در تو
طرح بندی شبکه ای CSS
طرح شبکهای چیست؟
ایجاد شبکه در CSS
تعریف یک شبکه
شبکههای انعطافپذیر با واحد fr
شکاف بین خطوط
تکرار فهرست مسیرها
شبکههای ضمنی و صریح
تابع minmax
تعداد ستونهایی که جا میشوند
جایگذاری مبتنی بر خط
موقعیتیابی با grid-template-areas
شبکهها و زیرشبکههای تودرتو
چارچوبهای شبکهای
طراحی وب واکنشگرا
پیش درآمدی بر طراحی واکنشگرا: طراحی وب موبایل
معرفی طراحی وب واکنشگرا
media query ها
فناوریهای طرحبندی واکنشگرا
Flexbox
شبکه CSS
تصاویر/رسانههای واکنشگرا
تایپوگرافی واکنشگرا
استفاده از مدیا کوئریها برای تایپوگرافی واکنشگرا
استفاده از واحدهای viewport برای تایپوگرافی واکنشگرا
متا تگ viewport
اصول media query ها
اصول اولیه مدیا کوئری ها
انواع رسانه
قوانین مربوط به ویژگیهای رسانهای
عرض و ارتفاع
جهت گیری
استفاده از دستگاههای اشارهگر
استفاده از سینتکس محدودهای
مدیا کوئری های پیچیدهتر
منطق "and" در کوئریهای رسانهای
منطق "or" در کوئریهای رسانهای
منطق "not" در کوئریهای مدیا
نحوه انتخاب نقاط شکست
طراحی واکنشگرا متناسب با موبایل (mobile-first)
طراحی موبایل-محور خودتان را بسازید
شروع به کار
ایجاد طرح دو ستونه برای عرضهای متوسط
اضافه کردن ستون سوم برای صفحات نمایش عریضتر
متای viewport
آیا واقعاً به یک media query نیاز دارید؟
طرحبندی چند ستونی
طرح سه ستونه
تنظیم عرض ستون
استایل دادن به ستونها
ستونهای پوشا
ستونها و قطعه قطعه شدن
جعبههای تکهتکه شده
تنظیم شکست های درونی
مثالهای عملی موقعیتیابی
یک جعبه اطلاعات تببندیشده
تنظیمات عمومی
استایلدهی به تبهای ما
استایل دادن به پنلها
جاوا اسکریپت
یک جعبه اطلاعات با تبهای ثابت
اضافات HTML
تغییرات در CSS موجود
استایلدهی به محتوای اصلی
یک پنل مخفی کشویی
استایل دادن به دکمه
استایل دادن به پنل
تنظیم وضعیت بررسیشده
آموزش جاوا اسکریپت مبتدی
جاوا اسکریپت چیست؟
تعریف کلی
خب، واقعاً چه کاری میتواند انجام دهد؟
جاوا اسکریپت در صفحه شما چه کاری انجام میدهد؟
امنیت مرورگر
ترتیب اجرای جاوا اسکریپت
کد interpreted در مقابل کد compiled
کد سمت سرور در مقابل کد سمت کلاینت
کد پویا (dynamic) در مقابل کد ایستا (static)
چگونه جاوا اسکریپت را به صفحه خود اضافه کنیم؟
جاوا اسکریپت داخلی
جاوا اسکریپت خارجی
کنترلکنندههای درونخطی جاوااسکریپت
به جای آن از addEventListener استفاده کنید
استراتژیهای بارگذاری اسکریپت
کامنت ها
اولین نگاه به جاوا اسکریپت
معرفی مثال «بازی حدس اعداد» ما
فکر کردن مثل یک برنامهنویس
خلاصه اولیه معماری
راه اندازی اولیه
اضافه کردن متغیرها برای ذخیره دادههایمان
توابع Functions
رشتههای متنی Strings
شرط ها Conditionals
رویدادها Events
تکمیل قابلیتهای بازی
حلقهها Loops
چه مشکلی پیش آمد؟ عیبیابی جاوا اسکریپت
انواع ارور
یک مثال ارور
رفع ارورهای گزارش شده در کنسول
رفع ارور زمان اجرا
رفع یک ارور املایی دیگر
یک ارور منطقی
طی شدن مسیر منطقی
سایر ارورهای رایج
بازی بعد از اولین حدس اشتباه تمام میشود
خطای املایی: وجود نداشتن ) بعد از لیست ورودی های ارزش به تابع
خطای املایی: وجود نداشتن : بعد از شناسه ویژگی
خطای املایی: } بعد از بدنه تابع وجود ندارد
خطای املایی: جای عبارت (expression)، استرینگ است یا خطای املایی: استرینگ شامل یک پرش به خط جدید بدون املای درست است
ذخیره اطلاعات مورد نیاز - متغیرها
ابزارهایی که نیاز دارید
متغیر چیست؟
مثال متغیر
بدون متغیر
تعریف یک متغیر
مقداردهی اولیه یک متغیر
نکتهای در مورد متغیر var
بهروزرسانی یک متغیر
نگاهی گذرا به قوانین نامگذاری متغیرها
انواع متغیر
اعداد numbers
رشتهها string
بولیها booleans
آرایهها arrays
اشیاء objects
تایپ پویا
ثابتها در جاوا اسکریپت constants
چه زمانی از const و چه زمانی از let استفاده کنیم؟
ریاضیات پایه در جاوا اسکریپت - اعداد و اپراتور ها
همه عاشق ریاضی هستند
انواع اعداد
برای من همه اینها عدد اند
متدهای مفید اعداد
تبدیل به انواع داده عددی
اپراتورهای حسابی
اولویت اپراتورها
اپراتورهای افزایش و کاهش
اپراتورهای انتساب
اندازه بندی جعبه canvas
اپراتورهای مقایسهای
مدیریت متن - رشتهها در جاوا اسکریپت
قدرت کلمات
تعریف رشته ها string
علامت نقل قول تکی، علامت نقل قول دوتایی و علامت نقل قول معکوس
جاسازی جاوا اسکریپت
اتصال در متن
اتصال با استفاده از "+"
گنجاندن عبارات در رشتهها
رشتههای چندخطی
گنجاندن نقل قولها در رشتهها
اعداد در مقابل رشتهها
متدهای رشتهای مفید
رشتهها به عنوان اشیاء
پیدا کردن طول یک رشته
بازیابی یک کاراکتر رشتهای خاص
بررسی اینکه آیا یک رشته حاوی زیررشته است یا خیر
پیدا کردن موقعیت یک زیر رشته در یک رشته
استخراج یک زیررشته از یک رشته
تغییر حالت
بهروزرسانی بخشهایی از یک رشته
چالشهای یادگیری
فیلتر کردن پیامهای تبریک
اصلاح حروف بزرگ
ساخت رشتههای جدید از قطعات
آرایهها
آرایه چیست؟
ایجاد آرایهها
پیدا کردن طول یک آرایه
دسترسی و تغییر آیتمهای آرایه
پیدا کردن شماره آیتمها در یک آرایه
اضافه کردن آیتم ها
حذف موارد
دسترسی به هر مورد
تبدیل بین رشتهها و آرایهها
تصمیمگیری در کد شما - شرطها
به یه شرط!
دستورات if...else
سینتکس پایه if...else
یک مثال واقعی
else if
نکتهای در مورد اپراتورهای مقایسهای
تو در تو سازی if...else
عملگرهای منطقی: AND، OR و NOT
دستورات سوئیچ
یک مثال سوئیچ
اپراتور سه تکه
مثال اپراتور سه تکه
حلقه ها در کد
چرا حلقهها مفید هستند؟
مثال کد حلقه
با حلقه و بدون حلقه
حلقه زدن روی یک مجموعه
حلقه for...of
map و filter
حلقه for استاندارد
محاسبه مربعها
پیمایش مجموعهها با حلقه for
خروج از حلقهها با break
رد کردن تکرارها با continue
while و do...while
از کدام نوع حلقه باید استفاده کنید؟
توابع - بلوکهای کد قابل استفاده مجدد
توابع رو از کجا پیدا کنم؟
توابع داخلی مرورگر
توابع و متدها
فراخوانی توابع
پارامترهای تابع
پارامترهای اختیاری
پارامترهای پیشفرض
توابع بی نام و توابع پیکانی
مثال تابع بی نام
توابع پیکانی arrow functions
نمونه زنده تابع arrow
دامنه تابع و تداخلات
نگاهی گذرا بر حلقه و دامنه شرطی
تابع خودتان را بسازید
بیایید یک تابع بسازیم
تابع پایه
فراخوانی تابع
بهبود تابع با پارامترها
یک پارامتر پیچیدهتر
مقادیر برگشتی تابع
مقادیر بازگشتی چیستند؟
نحوه برگرداندن یک مقدار
پیادهسازی مقادیر بازگشتی تابع
چند تا تابع خودت اضافه کن!
مقدمهای بر رویدادها
رویداد چیست؟
یک مثال: مدیریت یک رویداد کلیک
استفاده از addEventListener
گوش دادن به رویدادهای دیگر
حذف شنوندگان رویداد
اضافه کردن چندین شنونده برای یک رویداد واحد
سایر مکانیزمهای شنونده رویداد
ویژگیهای کنترلکننده رویداد
کنترلکنندههای رویداد درونخطی - از اینها استفاده نکنید
اشیاء رویداد
ویژگیهای اضافی اشیاء رویداد
جلوگیری از رفتار پیشفرض
رویداد ها فقط مختص صفحات وب نیستند
حباب رویداد
تنظیم یک شنونده (listener) روی عنصر والد
مثال حبابی
مثال پخش کننده ویدیو
رفع مشکل با stopPropagation
ثبت رویداد
نمایندگی رویداد
target و currentTarget
اصول اولیه شیء جاوا اسکریپت
اصول اولیه شیء
نمادگذاری نقطهای
اشیاء به عنوان ویژگیهای اشیاء دیگر
نمادگذاری با براکت
تنظیم اعضای شیء
«this» چیست؟
معرفی سازندهها
تمام این مدت داشتید از اشیاء استفاده میکردید
مقدمهای بر اسکریپتنویسی DOM
بخشهای مهم یک مرورگر وب
مدل شیء سند
انجام برخی دستکاریهای اولیه DOM
ایجاد و قرار دادن گرههای جدید
جابجایی و حذف عناصر
دستکاری استایلها
ایجاد درخواستهای شبکه با جاوا اسکریپت
مشکل اینجا چیست؟
Fetch API
دریافت محتوای متنی
مثال خود را از یک سرور ارائه دهید
فروشگاه قوطی
API مربوط به XMLHttpRequest
کار با JSON
json چیست؟
ساختار JSON
آرایهها به صورت JSON
محدودیتهای سینتکس JSON
کار با یک مثال JSON
شروع به کار
تابع سطح بالا
پر کردن هدر
ایجاد کارتهای اطلاعات قهرمانان
فراخوانی تابع سطح بالا
تبدیل بین اشیاء و متن
اشکالزدایی و مدیریت ارور در جاوا اسکریپت
خلاصهای از انواع خطاهای جاوا اسکریپت
کد خود را لینت کنید
افزونههای ویرایشگر کد
مشکلات رایج جاوا اسکریپت
کنسول جاوا اسکریپت مرورگر
API کنسول
console.error و call stack
رفع ارور
استفاده از اشکالزدای جاوا اسکریپت
مدیریت ارورهای جاوا اسکریپت در کد شما
شرطیها
نمایش خطاهای سفارشی
try...catch
تشخیص ویژگی
پیدا کردن کمک
آموزش جاوا اسکریپت پیشرفته
شئ و پروتوتایپ آن
زنجیره پروتوتایپ
ویژگیهای سایهای
تنظیم پروتوتایپ
استفاده از Object.create
با استفاده از سازنده constructor
ویژگی شخصی
پروتوتایپ ها و وراثت
برنامهنویسی شیءگرا
کلاسها و نمونهها
وراثت
کپسوله سازی
OOP و جاوا اسکریپت
کلاسها در جاوااسکریپت
کلاسها و سازندهها
حذف سازندهها
وراثت
کپسوله سازی
متدهای خصوصی
جاوا اسکریپت ناهمزمان
برنامهنویسی همزمان
یک تابع همگام با اجرای طولانی مدت
مشکل توابع همگام با اجرای طولانی مدت
گردانندههای رویداد
Callback ها
نحوه استفاده از promise
استفاده از fetch API
زنجیر کردن promiseها
گرفتن ارورها
اصطلاحات promise
ترکیب چندین promise
async و await
نحوه پیادهسازی یک API مبتنی بر promise
پیادهسازی API مربوط به alarm
بستهبندی setTimeout
سازندهی Promise
استفاده از API مربوط به alarm
استفاده از async و await با API مربوط به alarm
معرفی workerها
استفاده از web worker
تولیدکنندهی همزمان عدد اول
تولیدکنندهی عدد اول با worker
انواع دیگر worker
ابزار و نرم افزارها
چگونه از گیتهاب استفاده کنم؟
انتشار محتوا
تنظیمات اولیه گیتهاب
آمادهسازی کد برای آپلود
نگاهی گذرا به رابطهای خط فرمان
ایجاد یک مخزن (repo) برای کد شما
آپلود فایلهای شما در گیتهاب
دانش بیشتر در مورد گیتهاب
چگونه مطمئن شویم که وبسایت ما به درستی کار میکند؟
در مرورگر خود تست کنید
تصویر کجاست؟
وضعیتهای HTTP
رفع خطای ۴۰۴
ارور های رایج
غلط املایی در آدرس
خطاهای ۴۰۴
خطاهای جاوا اسکریپت
موارد بیشتر برای بررسی
سرعت اجرا
آیا سرور به اندازه کافی پاسخگو است؟
یک چک لیست ساده
چگونه یک سرور تست محلی راهاندازی کنیم؟
فایلهای محلی در مقابل فایلهای راه دور
مشکل در آزمایش فایلهای محلی
اجرای یک سرور HTTP محلی ساده
استفاده از یک افزونه در ویرایشگر کد شما
استفاده از Node.js
استفاده از پایتون
اجرای زبانهای سمت سرور به صورت محلی
چگونه فایلهای خود را روی یک سرور وب آپلود کنیم؟
خلاصه
SFTP
ورود به سیستم
اینجا و آنجا: نمای محلی و از راه دور
آپلود روی سرور
آیا واقعاً آنلاین هستند؟
Rsync
ابزارهای رابط کاربری گرافیکی Rsync
GitHub
روشهای دیگر برای آپلود فایلها
ابزارهای توسعهدهنده مرورگر چیست؟
نحوه باز کردن ابزارهای توسعه (devtools) در مرورگر
بررسی DOM inspector
بررسی ویرایشگر CSS
اشکالزدای جاوا اسکریپت
بررسی دیباگر
فهرست فایلها
کد منبع
عبارات و نقاط توقف را تماشا کنید
اطلاعات بیشتر
کنسول جاوا اسکریپت
اطلاعات بیشتر
راهنمای HTML
راهنمای HTML برای سینتکس و اعمال رایج
عناصر درونخطی
عناصر بلوک
استفاده از اعتبارسنجی فرم HTML و API اعتبارسنجی محدودیت
محدودیتهای ذاتی و اساسی
انواع input معنایی
ویژگیهای مرتبط با اعتبارسنجی
فرآیند اعتبارسنجی محدودیت
محدودیتهای پیچیده با استفاده از API اعتبارسنجی محدودیت
محدودیت ترکیب چندین فیلد: اعتبارسنجی کد پستی
محدود کردن حجم فایل قبل از آپلود
استایلدهی بصری اعتبارسنجی محدودیتها
دسته بندی محتوا
محتوای فراداده metadata
محتوای جریان flow
محتوای بخشبندی section
محتوای عنوان heading
محتوای جملهبندی شده phrase
محتوای جاسازیشده embed
محتوای تعاملی interactive
محتوای ملموس palpable
عناصر بدون دسته بندی
عناصر پشتیبان اسکریپت
محتوای مرتبط با فرم
مدل محتوای شفاف
استفاده از فرمتهای تاریخ و زمان در HTML
مثالها
مبانی
سال شمارها
سالهای کبیسه
ماههای سال
روزهای ماه
رشتههای هفته
رشتههای ماه
رشتههای تاریخ
رشتههای زمانی
رشتههای تاریخ و زمان محلی
رشتههای تاریخ و زمان سراسری
رشته اختلاف در منطقههای زمانی
مشکلات مربوط به تاریخ
مشکل Y2K38 (اغلب سمت سرور)
مشکل Y10k (اغلب از سمت کلاینت)
استفاده از میکرودیتا در HTML
واژگان
محلی سازی
ویژگیهای سراسری
مثال
استفاده از میکروفرمتها در HTML
نحوه کار میکروفرمتها
موارد استفاده از میکروفرمتها
پیشوندهای میکروفرمت
h-card
مثال h-card تو در تو
h-entry
مثال h-entry پاسخ تجزیهشده
h-feed
h-event
مثال h-event تجزیهشده
مثالهایی از ویژگیهای rel در میکروفرمتها
rel=author
rel=license
rel=nofollow
درک ویژگیها و حالتهای استاندارد
مرورگرها چگونه تشخیص میدهند که از کدام حالت استفاده کنند؟
XHTML
چطور ببینم از کدام حالت استفاده شده است؟
استفاده از تصاویر واکنشگرا در HTML
چرا تصاویر واکنشگرا؟
چگونه تصاویر واکنشگرا (ریسپانسیو) ایجاد کنیم؟
تغییر وضوح: اندازههای مختلف
تغییر وضوح: اندازه یکسان، وضوحهای متفاوت
جهت هنری
چرا نمیتوانیم این کار را فقط با استفاده از CSS یا جاوا اسکریپت انجام دهیم؟
پیادهسازی تصاویر واکنشگرای خودتان
مرجع عناصر HTML
عنصر <a>
امتحانش کنید
ویژگیها
ویژگیهای منسوخشده
متن لینک ضعیف و غیرقابل دسترسی
متن لینک قوی و قابل دسترسی
رویدادهای onclick
لینکهای خارجی و لینک دادن به منابع غیر HTML
لینکی که یک برگه/پنجره جدید باز میکند
لینک به یک منبع غیر HTML
لینک پرش
سایز
مجاورت
لینک دادن به یک URL مطلق
لینک دادن به URL های نسبی
لینک دادن به یک عنصر در همان صفحه
لینک دادن به یک آدرس ایمیل
لینک دادن به شماره تلفنها
استفاده از ویژگی دانلود برای ذخیره <canvas> به عنوان PNG
نمونه برنامه نقاشی با لینک ذخیره
امنیت و حریم خصوصی
خلاصه فنی
نقشهای مجاز ARIA
عنصر <abbr>
امتحانش کنید
ویژگیها
موارد استفاده رایج
ملاحظات دستوری
استایل پیشفرض
دسترسیپذیری
علامتگذاری یک اختصار از نظر معنایی
اختصارات استایلدهی
فراهم کردن امکان گسترش
تعریف یک اختصار
عنصر <acronym> (منسوخ)
ویژگیها
رابط DOM
مثال
استایل پیشفرض
عنصر <address>
امتحانش کنید
ویژگیها
یادداشتهای استفاده
مثال
عنصر <area>
امتحانش کنید
ویژگیها
تصویر با نواحی قابل کلیک
عنصر <article>
Try it
ویژگیها
یادداشتهای استفاده
مثال
عنصر <aside>
امتحانش کنید
ویژگیها
یادداشتهای استفاده
استفاده از <aside>
عنصر <audio>
امتحانش کنید
ویژگیها
رویدادها
یادداشتهای استفاده
استایلدهی با CSS
تشخیص اضافه شدن و حذف شدن آهنگها
دسترسیپذیری
کاربرد اولیه
عنصر <audio> به همراه عنصر <source>
<audio> با چندین عنصر <source>
عنصر <b>
امتحانش کنید
ویژگیها
یادداشتهای استفاده
مثال
عنصر <base>
ویژگیها
چندین عنصر <base>
لینک های درون صفحهای
هدف ممکن است شامل خط جدید ASCII، تب یا < نباشد
Open Graph
مثال
عنصر <bdi>
امتحانش کنید
ویژگیها
بدون bdi و فقط با LTR
بدون bdi با متن RTL
استفاده از bdi با متن LTR و RTL
عنصر <bdo>
امتحانش کنید
ویژگیها
مثال
یادداشتها
عنصر <big> (منسوخ)
ویژگیها
استفاده از big
استفاده از اندازه فونت در CSS
رابط DOM
عنصر <blockquote>
امتحانش کنید
ویژگیها
یادداشتهای استفاده
مثال
عنصر <body>
ویژگیها
ویژگیهای رویداد
ویژگیهای منسوخشده
مثال
عنصر <br>
امتحانش کنید
ویژگیها
ویژگیهای منسوخشده
استایلدهی با CSS
دسترسیپذیری
br ساده
عنصر <button>
امتحانش کنید
ویژگیها
یادداشتها
دکمههای آیکون
سایز
مجاورت
اطلاعات حالت ARIA
استایلهای دکمه
کلیک و فوکوس
ایجاد یک دکمه پایه
استفاده از مقدار request-close برای ویژگی command
HTML
عنصر <canvas>
ویژگیها
محتوای جایگزین
تگ پایانی <canvas>
اندازهگذاری canvas با استفاده از CSS در مقابل HTML
حداکثر اندازه canvas
استفاده از canvas خارج از صفحه
دسترسی پذیری: محتوای جایگزین
مثال
عنصر <caption>
امتحانش کنید
ویژگیها
ویژگیهای منسوخشده
یادداشتهای استفاده
مثال
جدول با عنوان
HTML
عنصر <center> (منسوخ)
رابط DOM
مثال ۱
مثال ۲ (جایگزین CSS)
مثال ۳ (جایگزین CSS)
عنصر <cite>
امتحانش کنید
ویژگیها
یادداشتهای استفاده
مثال
عنصر <code>
امتحانش کنید
ویژگیها
مثال
یادداشتها
عنصر <col>
امتحانش کنید
ویژگیها
ویژگیهای منسوخشده
یادداشتهای استفاده
مثال
عنصر <colgroup>
امتحانش کنید
ویژگیها
ویژگیهای منسوخشده
یادداشتهای استفاده
مثال
عنصر <data>
امتحانش کنید
ویژگیها
مثال
عنصر <datalist>
امتحانش کنید
ویژگیها
دسترسیپذیری
انواع متنی
انواع تاریخ و زمان
نوع محدوده
نوع رنگ
عنصر <dd>
امتحانش کنید
ویژگیها
مثال
عنصر <del>
امتحانش کنید
ویژگیها
دسترسیپذیری
مثال
عنصر <details>
امتحانش کنید
ویژگیها
رویدادها
یک مثال افشای اطلاعات اولیه
ایجاد یک جعبه افشای اطلاعات عمومی
چندین جعبه افشای نامگذاری شده
سفارشیسازی ظاهر
عنصر <dfn>
امتحانش کنید
ویژگیها
یادداشتهای استفاده
مشخص کردن اصطلاح مورد تعریف
لینکها به عناصر <dfn>
شناسایی اولیه یک اصطلاح
پیوند به تعاریف
استفاده از اختصارات و تعاریف در کنار هم
عنصر <dialog>
ویژگیها
توضیحات
کنترل دیالوگها با استفاده از جاوا اسکریپت
دیالوگهای مودال با استفاده از دستورات invoker
دیالوگهای غیرمودال با استفاده از دستورات popover
بستن dialog
استایلدهی CSS
یادداشتهای تکمیلی
دسترسیپذیری
ویژگیهای HTML رابط برنامهنویسی کاربردی فرمان Invoker
ویژگیهای HTML API مربوط به Popover
استفاده از ویژگی open در dialog
ایجاد یک دیالوگ modal
مدیریت مقدار برگشتی از کادر dialog
بستن یک dialog با ورودی فرم الزامی
مقایسه رفتارهای مختلف closedby
انیمیشن در دیالوگها
transition برای عنصر dialog
انیمیشنهای keyframe دیالوگ
عنصر <dir> (منسوخ)
رابط DOM
ویژگیها
عنصر <div>
امتحانش کنید
ویژگیها
یادداشتهای استفاده
دسترسیپذیری
یک مثال اساسی
یک مثال استایل شده
عنصر <dl>
امتحانش کنید
ویژگیها
دسترسیپذیری
مثال تکجمله و توضیح
مثال چندین اصطلاح، یک توضیح
مثال یک اصطلاح، چندین توصیف
مثال اصطلاحات و توضیحات متعدد
فراداده
قرار دادن گروههای نام-مقدار در عناصر div
یادداشتها
عنصر <dt>
امتحانش کنید
ویژگیها
مثال
عنصر <em>
امتحانش کنید
ویژگیها
یادداشتهای استفاده
<i> در مقابل <em>
مثال
عنصر <embed>
امتحانش کنید
ویژگیها
یادداشتهای استفاده
دسترسیپذیری
مثال
عنصر <fencedframe> (آزمایشی)
ویژگیها
سیاستهای دسترسی موجود برای fencedframe
فوکوس کردن در fencedframe
موقعیتیابی و مقیاسبندی
دسترسیپذیری
مثال
عنصر <fieldset>
امتحانش کنید
ویژگیها
استایلدهی با CSS
مثال
فیلدست غیرفعال
عنصر <figcaption>
امتحانش کنید
ویژگیها
مثال
عنصر <figure>
امتحانش کنید
ویژگیها
یادداشتهای استفاده
تصاویر
قطعه کدها
نقل قولها
اشعار
عنصر <font> (منسوخ)
ویژگیها
رابط DOM
عنصر <footer>
امتحانش کنید
ویژگیها
یادداشتهای استفاده
دسترسیپذیری
مثال
عنصر <form>
امتحانش کنید
ویژگیها
ویژگیهای ارسال فرم
مثال
عنصر <frame> (منسوخ)
ویژگیها
یک سند frameset
عنصر <frameset> (منسوخ)
ویژگیها
مثال
عنصر <geolocation> (آزمایشی)
ویژگیها
توضیحات
ارتباط با API موقعیت جغرافیایی
تنظیم زبان دکمه
محتوای جایگزین
مسدود کردن <geolocation>
محدودیتهای استایلدهی
محدودیتهای دسترسی
محدودیتهای ارزش
محدودیتهای پیچیده
ویژگیهایی که میتوانند به طور معمول تنظیم شوند
دسترسیپذیری
مثال استفاده اولیه
عنصر های <h1>-<h6>
امتحانش کنید
ویژگیها
یادداشتهای استفاده
از استفاده از چندین عنصر <h1> در یک صفحه خودداری کنید
تعیین اندازه فونت یکنواخت برای <h1>
ناوبری
برچسبگذاری محتوای بخش
همه سرفصلها
عنصر <head>
ویژگیها
مثال
عنصر <header>
امتحانش کنید
یادداشتهای استفاده
کاربرد تاریخی
ویژگیها
دسترسیپذیری
سربرگ صفحه
سربرگ مقاله
عنصر <hgroup>
امتحانش کنید
ویژگیها
یادداشتهای استفاده
مثالها
عنصر <hr>
امتحانش کنید
ویژگیها
مثال
عنصر <html>
ویژگیها
دسترسیپذیری
مثال
عنصر <i>
امتحانش کنید
ویژگیها
یادداشتهای استفاده
مثال
عنصر <iframe>
امتحانش کنید
ویژگیها
ویژگیهای منسوخشده
اسکریپت نویسی
ناوبری بالا در فریمهای با مبدا متقابل
موقعیتیابی و مقیاسبندی
رفتار رویدادهای error و load
دسترسیپذیری
یک <iframe> ساده
جاسازی کد منبع در <iframe>
عنصر <img>
امتحانش کنید
فرمتهای تصویر پشتیبانیشده
خطاهای بارگذاری تصویر
ویژگیها
ویژگیهای منسوخشده
استایلدهی با CSS
نوشتن توضیحات جایگزین معنادار
شناسایی SVG به عنوان تصویر
ویژگی عنوان
مثال متن جایگزین
لینک تصویری
استفاده از ویژگی srcset
استفاده از ویژگیهای srcset و sizes
نگرانیهای امنیتی و حریم خصوصی
صفحه اصلی
تمام مستندات
تست کد
درباره سایت
تمام مستندات
>
آموزش HTML
• اصول اولیه HTML
- HTML چیست؟
- آناتومی یک عنصر HTML
- ایجاد اولین عنصر HTML شما
- عناصر تودرتو
- عناصر خالی
- ویژگی ها
- افزودن ویژگیها به یک عنصر
- ویژگی های بولی
- حذف علامت نقل قول در اطراف مقادیر ویژگیها
- نقل قول تکی یا دوتایی؟
- آناتومی یک سند HTML
- فضای خالی در HTML
- ارجاعات کاراکتری: اضافه کردن کاراکترهای ویژه در HTML
- کامنت های HTML
• متا دیتای صفحه وب
- سربرگ HTML چیست؟
- افزودن عنوان
- فراداده: عنصر <meta>
- مشخص کردن کدگذاری کاراکتر سند شما
- افزودن نویسنده و توضیحات
- بررسی کاربرد توضیحات در موتورهای جستجو
- انواع دیگر فراداده
- اضافه کردن آیکونهای شخصی ساز به سایت
- اعمال CSS و جاوا اسکریپت به HTML
- تنظیم زبان اصلی سند
• سرفصلها و پاراگرافها
- سرفصلها و پاراگرافها
- اجرای سلسله مراتب ساختاری
- چرا به ساختار نیاز داریم؟
- چرا به معناشناسی نیاز داریم؟
• تأکید و اهمیت
- تأکید و اهمیت چیست؟
- تأکید
- اهمیت قوی
- ایتالیک، بولد، زیرخطدار…
• لیست ها
- لیست های نامرتب
- مرتب
- لیست های تودرتو
- لیست های توضیحات
- مثال لیست توضیحات
- چندین توضیح برای یک آیتم
• ویژگی های پیشرفتهی متن
- نقل قول ها
- نقل قول های بلوکی
- نقل قول های درون خطی
- نقل قول ها <cite>
- اختصارات
- علامتگذاری اطلاعات تماس
- بالانویس و زیرنویس
- نمایش کد کامپیوتر
- علامتگذاری زمانها و تاریخها
• ساختاردهی اسناد
- بخشهای اساسی یک سند
- سرصفحه ها
- نوار ناوبری
- محتوای اصلی
- نوار کناری
- پاورقی
- HTML برای ساختاردهی محتوا
- عناصر طرحبندی HTML با جزئیات بیشتر
- بستهبندیهای غیرمعنایی
- شکست خطوط و خطکش افقی
- <br>: عنصر شکست خط
- <hr>: عنصر شکست موضوعی
- ساختاردهی یک وبسایت پایه
• ایجاد لینکها
- هایپرلینک چیست؟
- آناتومی یک لینک
- لینکهای سطح بلوک
- لینکهای تصویر
- افزودن اطلاعات پشتیبانی با ویژگی عنوان
- مقدمهای سریع بر URLها و مسیرها
- همان دایرکتوری
- حرکت به سمت پایین و زیرشاخهها
- بازگشت به دایرکتوریهای والد
- پیوند دادن نسبت به دایرکتوری ریشه
- لینک دادن با URL های کامل
- لینکهای داخلی و خارجی
- قطعات سند
- چگونه URL ها به مسیرهای فایل تبدیل می شوند؟
- بهترین شیوههای لینک
- از متن لینک واضح استفاده کنید
- لینک دادن به منابع غیر HTML - علائم راهنمایی واضح بگذارید
- هنگام پیوند به یک فایل دانلود، از ویژگی دانلود استفاده کنید
- چه زمانی لینکها را در تب جدید باز کنیم؟
- ایجاد منوی ناوبری
- لینکهای ایمیل
- مشخص کردن جزئیات
• تصاویر
- چگونه یک تصویر را در صفحه وب قرار دهیم؟
- متن جایگزین
- عرض و ارتفاع
- تغییر اندازه تصاویر
- عنوانهای تصویر
- داراییهای رسانهای و مجوزها
- آشنایی با انواع مجوزها
- مالکیت عمومی/CC0
- جستجوی تصاویر دارای مجوز مجاز
- حاشیهنویسی تصاویر با شکلها و زیرنویس شکلها
- تصاویر پس زمینه CSS
• ویدئو و صوت HTML
- ویدئو و صدا در وب
- عنصر <video>
- استفاده از چندین قالب منبع برای بهبود سازگاری
- محتویات یک فایل رسانهای
- پشتیبانی از فایلهای رسانهای در مرورگرها
- سایر ویژگیهای <video>
- عنصر <audio>
- نمایش مسیر خطی ویدیوها
• اصول اولیه جدول HTML
- جدول چیست؟
- یک جدول چگونه کار میکند؟
- چه زمانی باید از جداول HTML اجتناب کنید؟
- اضافه کردن سرفصل با عناصر <th>
- چرا سرفصلها مفید هستند؟
- اجازه دادن به سلولها برای گسترش در چندین ردیف و ستون
- گروه بندی ستون ها با <colgroup> و <col>
• دسترسیپذیری جدول HTML
- استفاده از سرستونها و سر سطرها
- اضافه کردن عنوان به جدول با استفاده از <caption>
- افزودن ساختار با <thead> و <tbody> و <tfoot>
- افزودن ساختار به جدول ثبت هزینهها
- ویژگی scope
- ویژگیهای id و headers
• فرمها و دکمهها در HTML
- تعامل با کاربران
- دکمهها
- آناتومی یک فرم
- عنصر <form>
- ساختاربندی فرمها
- عناصر <input>
- ویژگیهای required و value در عمل
- ورودیهای فیلد متنی تخصصی
- عناصر <label>
- برچسبهای فرم صریح و ضمنی
- عنصر <button>
- نکتهای فرعی در مورد دسترسیپذیری
- انواع دیگر کنترل
- دکمههای رادیویی
- غیرفعال کردن کنترلهای فرم
- کادرهای انتخاب
- منوهای کشویی
- فیلدهای ورودی متن چند خطی
- اعتبارسنجی فرم
• اشکالزدایی HTML
- اشکال زدایی ترسناک نیست
- HTML و اشکالزدایی
- استفاده از بازرس DOM
- نوبت شما: مطالعه HTML با استفاده از DOM inspector
- اعتبارسنجی HTML
- تفسیر پیامهای خطا
• گنجاندن گرافیکهای برداری در HTML
- گرافیک برداری چیست؟
- SVG چیست؟
- اضافه کردن SVG به صفحات شما
- راه سریع: عنصر img
- عیبیابی و پشتیبانی از مرورگرهای مختلف
- چگونه کد SVG را در HTML خود قرار دهیم
- نحوه جاسازی SVG با iframe
• از object تا iframe - فناوریهای عمومی جاسازی
- تاریخچه کوتاهی از جاسازی
- iframe ها با جزئیات
- نگرانیهای امنیتی
- فقط در صورت لزوم جاسازی کنید
- از HTTPS استفاده کنید
- همیشه از ویژگی sandbox استفاده کنید
- پیکربندی دستورالعملهای CSP
- عناصر <embed> و <object>
آموزش CSS مبتدی
• CSS چیست؟
- استایلهای پیشفرض مرورگر
- CSS برای چیست؟
- اصول اولیه سینتکس CSS
- CSS چگونه به HTML اعمال میشود؟
• شروع کار با CSS
- شروع با مقداری HTML
- اضافه کردن CSS به سند
- استایل دهی خارجی
- قرار دادن استایلشیتها در مکانهای مختلف
- استایل دهی داخلی
- استایلهای درونخطی
- استفاده از انتخابگرهای رایج
- انتخاب عناصر HTML
- اضافه کردن کلاس
- استایلدهی به چیزها بر اساس موقعیت آنها در سند
- استایلدهی به چیزها بر اساس حالت (state)
- ترکیب انتخابگرها و ترکیبکنندهها
- سایر ویژگیهای سینتکس CSS
- توابع
- تابع calc
- توابع تبدیل
- قوانین @
- ویژگیهای مختصرنویسی
- کامنتهای CSS
- فضای خالی در CSS
• انتخابگرهای CSS پایه
- انتخابگر (selector) چیست؟
- انتخابگرهای نوع (Type)
- انتخابگرهای کلاس (Class)
- هدف قرار دادن کلاسها روی عناصر خاص
- انتخاب عنصری که بیش از یک کلاس دارد
- انتخابگرهای شناسه (ID)
- لیستهای انتخابگر
- انتخابگرهای نامعتبر در فهرستهای انتخابگر
- انتخابگر جهانی
- استفاده از انتخابگر سراسری برای خواناتر کردن انتخابگرهایتان
• انتخابگرهای ویژگی
- انتخابگرهای حضور و ارزش
- انتخابگرهای تطبیق زیررشته
• شبه کلاسها و شبه عناصر
- شبه کلاس چیست؟
- مثال پایهای از شبه کلاس
- شبه کلاسهای تعامل کاربر
- شبه عنصر چیست؟
- ترکیب شبه کلاسها و شبه عناصر
- تولید محتوا با before و after
- آیکونهای محتوای تولید شده
- اشکال تولید شده
• ترکیبکنندهها
- ترکیبکنندهی نسلی
- ترکیبکننده فرزند
- ترکیبکنندهی sibling بعدی مستقیم
- ترکیبکنندهی sibling بعدی غیرمستقیم
- ترکیب ترکیبکنندهها با انتخابکنندهها
• مدل جعبهای
- جعبههای بلوکی و درونخطی
- انواع نمایشگر داخلی و خارجی
- نمونههایی از انواع مختلف نمایشگر
- مدل جعبهای CSS چیست؟
- قطعات یک جعبه
- مدل جعبهای استاندارد CSS
- مدل جعبهای جایگزین CSS
- استفاده از ابزارهای توسعه مرورگر برای مشاهده مدل جعبهای
- مارجینها، فاصلهگذاری و حاشیهها
- مارجین margin
- فروپاشی مارجین
- مرزها (حاشیه ها) border
- پدینگ padding
- مدل جعبهای و جعبههای درونخطی
- استفاده از نمایش: inline-block
• رسیدگی به مغایرت ها
- قوانین متناقض
- آبشاری cascade
- مشخصه specificity
- وراثت inheritance
- درک چگونگی تعامل مفاهیم با یکدیگر
- درک وراثت
- کنترل وراثت
- تنظیم مجدد تمام مقادیر ویژگیها
- درک آبشار
- ترتیب منبع
- مشخصه
- مثالی عمیقتر از جزئیات
- شناسهها در مقابل کلاسها
- استایلهای درونخطی
- مهم!
- تأثیر مکان CSS
- ترتیب اعلانهای برتر
• مقادیر و واحدهای CSS
- مقدار CSS چیست؟
- اعداد، طولها و درصدها
- طولها
- واحدهای طول مطلق
- واحدهای طول نسبی
- بررسی یک مثال
- em و rem
- درصدها
- اعداد
- رنگ color
- کلمات کلیدی رنگی
- مقادیر RGB هگزادسیمال
- مقادیر RGB
- یک مثال RGB با opacity
- استفاده از hue برای مشخص کردن یک رنگ
- HWB
- HSL
- تصاویر image
- موقعیت position
- رشتهها string و شناسهها id
- توابع
- توابع ریاضی
• اندازه بندی آیتم ها در CSS
- اندازه طبیعی یا ذاتی آیتم ها
- تنظیم اندازه خاص
- استفاده از درصدها
- مارجین و پدینگ درصدی
- حداقل و حداکثر اندازهها
- حداکثر عرض روی تصاویر max-width
- واحدهای viewport
• پسزمینهها و حاشیهها
- رنگهای پسزمینه
- تصاویر پس زمینه
- کنترل تکرار پسزمینه
- اندازه بندی تصویر پس زمینه
- قرار دادن تصویر پس زمینه
- پسزمینههای گرادیان
- تصاویر پس زمینه چندگانه
- پیوست پسزمینه
- استفاده از ویژگی مختصر نویسی background
- ملاحظات دسترسی پس زمینه
- حاشیه ها
- گوشههای گرد
• محتوای سرریز شده
- overflow یا سرریز چیست؟
- CSS تلاش میکند از «از دست رفتن دادهها» جلوگیری کند
- ویژگی overflow
- پنهان کردن محتوای سرریز شده
- اسکرول محتوای سرریز شده
- نمایش دادن اسکرول بار فقط درصورت نیاز
- سرریز ناخواسته در طراحی وب
• تصاویر، رسانهها و عناصر فرم
- عناصر جایگزین شده
- اندازه بندی تصاویر
- مدیریت مشکلات نمایش تصویر با object-fit
- عناصر جایگزین شده در طرح بندی
- عناصر فرم
- استایلدهی به عناصر ورودی متن
- نرمالسازی رفتار فرم
- وراثت و عناصر فرم
- عناصر فرم و اندازهبندی جعبهای
- سایر تنظیمات مفید
- درست کردن همه چیز با "reset"
• استایلدهی جداول
- یک جدول HTML معمولی
- شروع استایلدهی به جدول
- بهروزرسانی فونت
- فاصله گذاری
- ترازبندی
- اضافه کردن حاشیه
- نوار گورخری
- استایل دادن به کپشن ها
- نکات ریز استایلدهی جداول
• اشکالزدایی CSS
- نحوه دسترسی به DevTools مرورگر
- DOM در مقابل منبع نمایش
- بررسی CSS اعمال شده
- ویرایش مقادیر
- افزودن یک ویژگی جدید
- درک مدل جعبهای
- حل مسائل مربوط به مشخصهها
- مشکلات اشکالزدایی در CSS
- از مشکل یک قدم عقب بروید
- آیا HTML و CSS معتبری دارید؟
- آیا ویژگی و مقدار توسط مرورگری که در آن آزمایش میکنید پشتیبانی میشوند؟
- آیا چیز دیگری CSS شما را نادیده گرفته است؟
- یک مورد آزمایشی کوچکشده از مشکل ایجاد کنید
• جلوههای پیشرفته استایلدهی
- سایه Box shadow
- یک box shadow ساده
- box shadow در تعداد
- سایر ویژگیهای box shadow
- فیلترها
- حالتهای ترکیبی
- حالت ترکیبی پسزمینه background-blend-mode
- حالت ترکیبی mix-blend-mode
- اشکال CSS
- -webkit-background-clip: text
• لایههای آبشاری
- بررسی مفهوم آبشار
- منشأ و آبشار
- منشأ و ویژگی
- مروری بر لایههای آبشاری
- ترتیب اولویت لایه آبشاری
- مسائلی که لایههای آبشاری میتوانند حل کنند
- مسائلی که لایههای آبشاری تو در تو میتوانند حل کنند
- ایجاد لایههای آبشاری
- دستور @layer در قاعده برای لایههای نامگذاری شده
- قاعدهی بلوک @layer برای لایههای نامگذاری شده و ناشناس
- ایجاد لایه و media query
- وارد کردن استایل شیتها به لایههای نامگذاری شده و ناشناس با استفاده از @import
- مروری بر لایههای آبشاری تو در تو
- مزایای لانه سازی لایه ها
- ایجاد لایههای آبشاری تو در تو
- تعیین اولویت بر اساس ترتیب لایهها
- ترتیب اولویت لایههای آبشاری منظم
- ترتیب اولویت لایههای آبشاری تو در تو
• مدیریت جهتهای مختلف متن
- حالتهای نوشتاری چیستند؟
- حالتهای نوشتاری و طرحبندی بلوکی و درونخطی
- جهت
- ویژگیها و مقادیر منطقی
- ویژگیهای منطقی حاشیه، مرز و فاصلهگذاری
- مقادیر منطقی
- آیا باید از ویژگیهای فیزیکی استفاده کنید یا منطقی؟
• سازماندهی CSS شما
- آیا پروژه شما راهنمای سبک کدنویسی دارد؟
- ثابت قدم باشید
- قالببندی CSS قابل خواندن
- CSS خود را کامنت کنید
- بخشهای منطقی را در فایل استایل خود ایجاد کنید
- از انتخابگرهای بیش از حد خاص خودداری کنید
- استایلشیتهای بزرگ را به چندین استایلشیت کوچکتر تقسیم کنید
- ابزارهای دیگری که میتوانند کمک کنند
- روشهای CSS
- OOCSS
- BEM
- سایر سیستمهای رایج
- ساخت سیستمهایی برای CSS
- تعریف متغیرها
- کامپایل کردن استایلشیتهای کامپوننت
آموزش CSS پیشرفته
• استایلدهی اولیه متن و فونت
- استایلدهی به متن در CSS شامل چه مواردی میشود؟
- فونتها
- رنگ
- خانوادههای فونت
- فونت های در دسترس
- فونتهای پیشفرض
- استک های فونت
- یک مثال از خانواده فونت
- اندازه فونت
- سبک فونت، وزن فونت، تبدیل متن و تزئین متن
- سایههای متن
- سایههای متعدد
- طرحبندی متن
- ترازبندی متن
- ارتفاع خط
- فاصله گذاری حروف و کلمات
- سایر ویژگی هایی که ارزش بررسی دارند
- خلاصه نویسی فونت
• استایلدهی به لیستها
- یک مثال ساده از لیست
- مدیریت فاصلهگذاری لیستها
- سبکهای خاص لیست
- استایلهای گلولهای
- موقعیت گلوله
- استفاده از تصویر گلوله شخصی ساز
- خلاصه نویسی به سبک لیست
- کنترل شمارش لیست
- start
- reversed
- value
• استایلدهی به لینکها
- حالتهای یک لینک
- سبکهای پیشفرض
- استایلدهی به لینکها
- لینکهای خودتان را استایلدهی کنید
- قرار دادن آیکون روی لینکها
- استایلدهی به لینکها به عنوان دکمه
• فونتهای وب
- خلاصه خانوادههای فونت
- فونتهای وب
- افزودن فونتهای وب خودتان
- پیدا کردن فونتها
- تولید کد مورد نیاز
- پیادهسازی کد در نسخه آزمایشی شما
- استفاده از یک سرویس فونت آنلاین
- font-face با جزئیات بیشتر
• مقدمهای بر طرحبندی CSS
- جریان طرحبندی عادی
- عناصر به طور پیشفرض چگونه چیدمان میشوند؟
- مثال جریان عادی
- نادیده گرفتن جریان عادی
- سایر تکنیکهای چیدمان
• float ها
- پسزمینه float
- مثالی از نوع float
- شناور کردن جعبه
- تجسم شناور
- پاک کردن شناورها
- جعبههای پاکسازی که دور یک شناور پیچیده شدهاند
- مشکل
- display: flow-root
• موقعیت یابی
- معرفی موقعیتیابی position
- موقعیتیابی استاتیک static
- موقعیتیابی نسبی relative
- معرفی بالا، پایین، چپ و راست
- موقعیتیابی مطلق absolute
- زمینههای موقعیتیابی
- معرفی z-index
- موقعیتیابی ثابت fixed
- موقعیتیابی چسبنده sticky
- مثال پایه
- فهرست scroll
• فلکسباکس
- چرا فلکس باکس؟
- معرفی یک مثال ساده
- مشخص کردن عناصری که باید به عنوان flexbox طرحبندی شوند
- The flex model
- ستونها یا ردیفها؟
- بسته بندی
- خلاصهسازی جریان flex
- اندازهبندی انعطافپذیر آیتمهای flex
- flex: خلاصهنویسی در مقابل طولانینویسی
- تراز افقی و عمودی
- ترتیب دهی به آیتم های فلکس
- flexbox تو در تو
• طرح بندی شبکه ای CSS
- طرح شبکهای چیست؟
- ایجاد شبکه در CSS
- تعریف یک شبکه
- شبکههای انعطافپذیر با واحد fr
- شکاف بین خطوط
- تکرار فهرست مسیرها
- شبکههای ضمنی و صریح
- تابع minmax
- تعداد ستونهایی که جا میشوند
- جایگذاری مبتنی بر خط
- موقعیتیابی با grid-template-areas
- شبکهها و زیرشبکههای تودرتو
- چارچوبهای شبکهای
• طراحی وب واکنشگرا
- پیش درآمدی بر طراحی واکنشگرا: طراحی وب موبایل
- معرفی طراحی وب واکنشگرا
- media query ها
- فناوریهای طرحبندی واکنشگرا
- Flexbox
- شبکه CSS
- تصاویر/رسانههای واکنشگرا
- تایپوگرافی واکنشگرا
- استفاده از مدیا کوئریها برای تایپوگرافی واکنشگرا
- استفاده از واحدهای viewport برای تایپوگرافی واکنشگرا
- متا تگ viewport
• اصول media query ها
- اصول اولیه مدیا کوئری ها
- انواع رسانه
- قوانین مربوط به ویژگیهای رسانهای
- عرض و ارتفاع
- جهت گیری
- استفاده از دستگاههای اشارهگر
- استفاده از سینتکس محدودهای
- مدیا کوئری های پیچیدهتر
- منطق "and" در کوئریهای رسانهای
- منطق "or" در کوئریهای رسانهای
- منطق "not" در کوئریهای مدیا
- نحوه انتخاب نقاط شکست
- طراحی واکنشگرا متناسب با موبایل (mobile-first)
- طراحی موبایل-محور خودتان را بسازید
- شروع به کار
- ایجاد طرح دو ستونه برای عرضهای متوسط
- اضافه کردن ستون سوم برای صفحات نمایش عریضتر
- متای viewport
- آیا واقعاً به یک media query نیاز دارید؟
• طرحبندی چند ستونی
- طرح سه ستونه
- تنظیم عرض ستون
- استایل دادن به ستونها
- ستونهای پوشا
- ستونها و قطعه قطعه شدن
- جعبههای تکهتکه شده
- تنظیم شکست های درونی
• مثالهای عملی موقعیتیابی
- یک جعبه اطلاعات تببندیشده
- تنظیمات عمومی
- استایلدهی به تبهای ما
- استایل دادن به پنلها
- جاوا اسکریپت
- یک جعبه اطلاعات با تبهای ثابت
- اضافات HTML
- تغییرات در CSS موجود
- استایلدهی به محتوای اصلی
- یک پنل مخفی کشویی
- استایل دادن به دکمه
- استایل دادن به پنل
- تنظیم وضعیت بررسیشده
آموزش جاوا اسکریپت مبتدی
• جاوا اسکریپت چیست؟
- تعریف کلی
- خب، واقعاً چه کاری میتواند انجام دهد؟
- جاوا اسکریپت در صفحه شما چه کاری انجام میدهد؟
- امنیت مرورگر
- ترتیب اجرای جاوا اسکریپت
- کد interpreted در مقابل کد compiled
- کد سمت سرور در مقابل کد سمت کلاینت
- کد پویا (dynamic) در مقابل کد ایستا (static)
- چگونه جاوا اسکریپت را به صفحه خود اضافه کنیم؟
- جاوا اسکریپت داخلی
- جاوا اسکریپت خارجی
- کنترلکنندههای درونخطی جاوااسکریپت
- به جای آن از addEventListener استفاده کنید
- استراتژیهای بارگذاری اسکریپت
- کامنت ها
• اولین نگاه به جاوا اسکریپت
- معرفی مثال «بازی حدس اعداد» ما
- فکر کردن مثل یک برنامهنویس
- خلاصه اولیه معماری
- راه اندازی اولیه
- اضافه کردن متغیرها برای ذخیره دادههایمان
- توابع Functions
- رشتههای متنی Strings
- شرط ها Conditionals
- رویدادها Events
- تکمیل قابلیتهای بازی
- حلقهها Loops
• چه مشکلی پیش آمد؟ عیبیابی جاوا اسکریپت
- انواع ارور
- یک مثال ارور
- رفع ارورهای گزارش شده در کنسول
- رفع ارور زمان اجرا
- رفع یک ارور املایی دیگر
- یک ارور منطقی
- طی شدن مسیر منطقی
- سایر ارورهای رایج
- بازی بعد از اولین حدس اشتباه تمام میشود
- خطای املایی: وجود نداشتن ) بعد از لیست ورودی های ارزش به تابع
- خطای املایی: وجود نداشتن : بعد از شناسه ویژگی
- خطای املایی: } بعد از بدنه تابع وجود ندارد
- خطای املایی: جای عبارت (expression)، استرینگ است یا خطای املایی: استرینگ شامل یک پرش به خط جدید بدون املای درست است
• ذخیره اطلاعات مورد نیاز - متغیرها
- ابزارهایی که نیاز دارید
- متغیر چیست؟
- مثال متغیر
- بدون متغیر
- تعریف یک متغیر
- مقداردهی اولیه یک متغیر
- نکتهای در مورد متغیر var
- بهروزرسانی یک متغیر
- نگاهی گذرا به قوانین نامگذاری متغیرها
- انواع متغیر
- اعداد numbers
- رشتهها string
- بولیها booleans
- آرایهها arrays
- اشیاء objects
- تایپ پویا
- ثابتها در جاوا اسکریپت constants
- چه زمانی از const و چه زمانی از let استفاده کنیم؟
• ریاضیات پایه در جاوا اسکریپت - اعداد و اپراتور ها
- همه عاشق ریاضی هستند
- انواع اعداد
- برای من همه اینها عدد اند
- متدهای مفید اعداد
- تبدیل به انواع داده عددی
- اپراتورهای حسابی
- اولویت اپراتورها
- اپراتورهای افزایش و کاهش
- اپراتورهای انتساب
- اندازه بندی جعبه canvas
- اپراتورهای مقایسهای
• مدیریت متن - رشتهها در جاوا اسکریپت
- قدرت کلمات
- تعریف رشته ها string
- علامت نقل قول تکی، علامت نقل قول دوتایی و علامت نقل قول معکوس
- جاسازی جاوا اسکریپت
- اتصال در متن
- اتصال با استفاده از "+"
- گنجاندن عبارات در رشتهها
- رشتههای چندخطی
- گنجاندن نقل قولها در رشتهها
- اعداد در مقابل رشتهها
• متدهای رشتهای مفید
- رشتهها به عنوان اشیاء
- پیدا کردن طول یک رشته
- بازیابی یک کاراکتر رشتهای خاص
- بررسی اینکه آیا یک رشته حاوی زیررشته است یا خیر
- پیدا کردن موقعیت یک زیر رشته در یک رشته
- استخراج یک زیررشته از یک رشته
- تغییر حالت
- بهروزرسانی بخشهایی از یک رشته
- چالشهای یادگیری
- فیلتر کردن پیامهای تبریک
- اصلاح حروف بزرگ
- ساخت رشتههای جدید از قطعات
• آرایهها
- آرایه چیست؟
- ایجاد آرایهها
- پیدا کردن طول یک آرایه
- دسترسی و تغییر آیتمهای آرایه
- پیدا کردن شماره آیتمها در یک آرایه
- اضافه کردن آیتم ها
- حذف موارد
- دسترسی به هر مورد
- تبدیل بین رشتهها و آرایهها
• تصمیمگیری در کد شما - شرطها
- به یه شرط!
- دستورات if...else
- سینتکس پایه if...else
- یک مثال واقعی
- else if
- نکتهای در مورد اپراتورهای مقایسهای
- تو در تو سازی if...else
- عملگرهای منطقی: AND، OR و NOT
- دستورات سوئیچ
- یک مثال سوئیچ
- اپراتور سه تکه
- مثال اپراتور سه تکه
• حلقه ها در کد
- چرا حلقهها مفید هستند؟
- مثال کد حلقه
- با حلقه و بدون حلقه
- حلقه زدن روی یک مجموعه
- حلقه for...of
- map و filter
- حلقه for استاندارد
- محاسبه مربعها
- پیمایش مجموعهها با حلقه for
- خروج از حلقهها با break
- رد کردن تکرارها با continue
- while و do...while
- از کدام نوع حلقه باید استفاده کنید؟
• توابع - بلوکهای کد قابل استفاده مجدد
- توابع رو از کجا پیدا کنم؟
- توابع داخلی مرورگر
- توابع و متدها
- فراخوانی توابع
- پارامترهای تابع
- پارامترهای اختیاری
- پارامترهای پیشفرض
- توابع بی نام و توابع پیکانی
- مثال تابع بی نام
- توابع پیکانی arrow functions
- نمونه زنده تابع arrow
- دامنه تابع و تداخلات
- نگاهی گذرا بر حلقه و دامنه شرطی
• تابع خودتان را بسازید
- بیایید یک تابع بسازیم
- تابع پایه
- فراخوانی تابع
- بهبود تابع با پارامترها
- یک پارامتر پیچیدهتر
• مقادیر برگشتی تابع
- مقادیر بازگشتی چیستند؟
- نحوه برگرداندن یک مقدار
- پیادهسازی مقادیر بازگشتی تابع
- چند تا تابع خودت اضافه کن!
• مقدمهای بر رویدادها
- رویداد چیست؟
- یک مثال: مدیریت یک رویداد کلیک
- استفاده از addEventListener
- گوش دادن به رویدادهای دیگر
- حذف شنوندگان رویداد
- اضافه کردن چندین شنونده برای یک رویداد واحد
- سایر مکانیزمهای شنونده رویداد
- ویژگیهای کنترلکننده رویداد
- کنترلکنندههای رویداد درونخطی - از اینها استفاده نکنید
- اشیاء رویداد
- ویژگیهای اضافی اشیاء رویداد
- جلوگیری از رفتار پیشفرض
- رویداد ها فقط مختص صفحات وب نیستند
• حباب رویداد
- تنظیم یک شنونده (listener) روی عنصر والد
- مثال حبابی
- مثال پخش کننده ویدیو
- رفع مشکل با stopPropagation
- ثبت رویداد
- نمایندگی رویداد
- target و currentTarget
• اصول اولیه شیء جاوا اسکریپت
- اصول اولیه شیء
- نمادگذاری نقطهای
- اشیاء به عنوان ویژگیهای اشیاء دیگر
- نمادگذاری با براکت
- تنظیم اعضای شیء
- «this» چیست؟
- معرفی سازندهها
- تمام این مدت داشتید از اشیاء استفاده میکردید
• مقدمهای بر اسکریپتنویسی DOM
- بخشهای مهم یک مرورگر وب
- مدل شیء سند
- انجام برخی دستکاریهای اولیه DOM
- ایجاد و قرار دادن گرههای جدید
- جابجایی و حذف عناصر
- دستکاری استایلها
• ایجاد درخواستهای شبکه با جاوا اسکریپت
- مشکل اینجا چیست؟
- Fetch API
- دریافت محتوای متنی
- مثال خود را از یک سرور ارائه دهید
- فروشگاه قوطی
- API مربوط به XMLHttpRequest
• کار با JSON
- json چیست؟
- ساختار JSON
- آرایهها به صورت JSON
- محدودیتهای سینتکس JSON
- کار با یک مثال JSON
- شروع به کار
- تابع سطح بالا
- پر کردن هدر
- ایجاد کارتهای اطلاعات قهرمانان
- فراخوانی تابع سطح بالا
- تبدیل بین اشیاء و متن
• اشکالزدایی و مدیریت ارور در جاوا اسکریپت
- خلاصهای از انواع خطاهای جاوا اسکریپت
- کد خود را لینت کنید
- افزونههای ویرایشگر کد
- مشکلات رایج جاوا اسکریپت
- کنسول جاوا اسکریپت مرورگر
- API کنسول
- console.error و call stack
- رفع ارور
- استفاده از اشکالزدای جاوا اسکریپت
- مدیریت ارورهای جاوا اسکریپت در کد شما
- شرطیها
- نمایش خطاهای سفارشی
- try...catch
- تشخیص ویژگی
- پیدا کردن کمک
آموزش جاوا اسکریپت پیشرفته
• شئ و پروتوتایپ آن
- زنجیره پروتوتایپ
- ویژگیهای سایهای
- تنظیم پروتوتایپ
- استفاده از Object.create
- با استفاده از سازنده constructor
- ویژگی شخصی
- پروتوتایپ ها و وراثت
• برنامهنویسی شیءگرا
- کلاسها و نمونهها
- وراثت
- کپسوله سازی
- OOP و جاوا اسکریپت
• کلاسها در جاوااسکریپت
- کلاسها و سازندهها
- حذف سازندهها
- وراثت
- کپسوله سازی
- متدهای خصوصی
• جاوا اسکریپت ناهمزمان
- برنامهنویسی همزمان
- یک تابع همگام با اجرای طولانی مدت
- مشکل توابع همگام با اجرای طولانی مدت
- گردانندههای رویداد
- Callback ها
• نحوه استفاده از promise
- استفاده از fetch API
- زنجیر کردن promiseها
- گرفتن ارورها
- اصطلاحات promise
- ترکیب چندین promise
- async و await
• نحوه پیادهسازی یک API مبتنی بر promise
- پیادهسازی API مربوط به alarm
- بستهبندی setTimeout
- سازندهی Promise
- استفاده از API مربوط به alarm
- استفاده از async و await با API مربوط به alarm
• معرفی workerها
- استفاده از web worker
- تولیدکنندهی همزمان عدد اول
- تولیدکنندهی عدد اول با worker
- انواع دیگر worker
ابزار و نرم افزارها
• چگونه از گیتهاب استفاده کنم؟
- انتشار محتوا
- تنظیمات اولیه گیتهاب
- آمادهسازی کد برای آپلود
- نگاهی گذرا به رابطهای خط فرمان
- ایجاد یک مخزن (repo) برای کد شما
- آپلود فایلهای شما در گیتهاب
- دانش بیشتر در مورد گیتهاب
• چگونه مطمئن شویم که وبسایت ما به درستی کار میکند؟
- در مرورگر خود تست کنید
- تصویر کجاست؟
- وضعیتهای HTTP
- رفع خطای ۴۰۴
- ارور های رایج
- غلط املایی در آدرس
- خطاهای ۴۰۴
- خطاهای جاوا اسکریپت
- موارد بیشتر برای بررسی
- سرعت اجرا
- آیا سرور به اندازه کافی پاسخگو است؟
- یک چک لیست ساده
• چگونه یک سرور تست محلی راهاندازی کنیم؟
- فایلهای محلی در مقابل فایلهای راه دور
- مشکل در آزمایش فایلهای محلی
- اجرای یک سرور HTTP محلی ساده
- استفاده از یک افزونه در ویرایشگر کد شما
- استفاده از Node.js
- استفاده از پایتون
- اجرای زبانهای سمت سرور به صورت محلی
• چگونه فایلهای خود را روی یک سرور وب آپلود کنیم؟
- خلاصه
- SFTP
- ورود به سیستم
- اینجا و آنجا: نمای محلی و از راه دور
- آپلود روی سرور
- آیا واقعاً آنلاین هستند؟
- Rsync
- ابزارهای رابط کاربری گرافیکی Rsync
- GitHub
- روشهای دیگر برای آپلود فایلها
• ابزارهای توسعهدهنده مرورگر چیست؟
- نحوه باز کردن ابزارهای توسعه (devtools) در مرورگر
- بررسی DOM inspector
- بررسی ویرایشگر CSS
- اشکالزدای جاوا اسکریپت
- بررسی دیباگر
- فهرست فایلها
- کد منبع
- عبارات و نقاط توقف را تماشا کنید
- اطلاعات بیشتر
- کنسول جاوا اسکریپت
- اطلاعات بیشتر
راهنمای HTML
• راهنمای HTML برای سینتکس و اعمال رایج
- عناصر درونخطی
- عناصر بلوک
• استفاده از اعتبارسنجی فرم HTML و API اعتبارسنجی محدودیت
- محدودیتهای ذاتی و اساسی
- انواع input معنایی
- ویژگیهای مرتبط با اعتبارسنجی
- فرآیند اعتبارسنجی محدودیت
- محدودیتهای پیچیده با استفاده از API اعتبارسنجی محدودیت
- محدودیت ترکیب چندین فیلد: اعتبارسنجی کد پستی
- محدود کردن حجم فایل قبل از آپلود
- استایلدهی بصری اعتبارسنجی محدودیتها
• دسته بندی محتوا
- محتوای فراداده metadata
- محتوای جریان flow
- محتوای بخشبندی section
- محتوای عنوان heading
- محتوای جملهبندی شده phrase
- محتوای جاسازیشده embed
- محتوای تعاملی interactive
- محتوای ملموس palpable
- عناصر بدون دسته بندی
- عناصر پشتیبان اسکریپت
- محتوای مرتبط با فرم
- مدل محتوای شفاف
• استفاده از فرمتهای تاریخ و زمان در HTML
- مثالها
- مبانی
- سال شمارها
- سالهای کبیسه
- ماههای سال
- روزهای ماه
- رشتههای هفته
- رشتههای ماه
- رشتههای تاریخ
- رشتههای زمانی
- رشتههای تاریخ و زمان محلی
- رشتههای تاریخ و زمان سراسری
- رشته اختلاف در منطقههای زمانی
- مشکلات مربوط به تاریخ
- مشکل Y2K38 (اغلب سمت سرور)
- مشکل Y10k (اغلب از سمت کلاینت)
• استفاده از میکرودیتا در HTML
- واژگان
- محلی سازی
- ویژگیهای سراسری
- مثال
• استفاده از میکروفرمتها در HTML
- نحوه کار میکروفرمتها
- موارد استفاده از میکروفرمتها
- پیشوندهای میکروفرمت
- h-card
- مثال h-card تو در تو
- h-entry
- مثال h-entry پاسخ تجزیهشده
- h-feed
- h-event
- مثال h-event تجزیهشده
- مثالهایی از ویژگیهای rel در میکروفرمتها
- rel=author
- rel=license
- rel=nofollow
• درک ویژگیها و حالتهای استاندارد
- مرورگرها چگونه تشخیص میدهند که از کدام حالت استفاده کنند؟
- XHTML
- چطور ببینم از کدام حالت استفاده شده است؟
• استفاده از تصاویر واکنشگرا در HTML
- چرا تصاویر واکنشگرا؟
- چگونه تصاویر واکنشگرا (ریسپانسیو) ایجاد کنیم؟
- تغییر وضوح: اندازههای مختلف
- تغییر وضوح: اندازه یکسان، وضوحهای متفاوت
- جهت هنری
- چرا نمیتوانیم این کار را فقط با استفاده از CSS یا جاوا اسکریپت انجام دهیم؟
- پیادهسازی تصاویر واکنشگرای خودتان
مرجع عناصر HTML
• عنصر <a>
- امتحانش کنید
- ویژگیها
- ویژگیهای منسوخشده
- متن لینک ضعیف و غیرقابل دسترسی
- متن لینک قوی و قابل دسترسی
- رویدادهای onclick
- لینکهای خارجی و لینک دادن به منابع غیر HTML
- لینکی که یک برگه/پنجره جدید باز میکند
- لینک به یک منبع غیر HTML
- لینک پرش
- سایز
- مجاورت
- لینک دادن به یک URL مطلق
- لینک دادن به URL های نسبی
- لینک دادن به یک عنصر در همان صفحه
- لینک دادن به یک آدرس ایمیل
- لینک دادن به شماره تلفنها
- استفاده از ویژگی دانلود برای ذخیره <canvas> به عنوان PNG
- نمونه برنامه نقاشی با لینک ذخیره
- امنیت و حریم خصوصی
- خلاصه فنی
- نقشهای مجاز ARIA
• عنصر <abbr>
- امتحانش کنید
- ویژگیها
- موارد استفاده رایج
- ملاحظات دستوری
- استایل پیشفرض
- دسترسیپذیری
- علامتگذاری یک اختصار از نظر معنایی
- اختصارات استایلدهی
- فراهم کردن امکان گسترش
- تعریف یک اختصار
• عنصر <acronym> (منسوخ)
- ویژگیها
- رابط DOM
- مثال
- استایل پیشفرض
• عنصر <address>
- امتحانش کنید
- ویژگیها
- یادداشتهای استفاده
- مثال
• عنصر <area>
- امتحانش کنید
- ویژگیها
- تصویر با نواحی قابل کلیک
• عنصر <article>
- Try it
- ویژگیها
- یادداشتهای استفاده
- مثال
• عنصر <aside>
- امتحانش کنید
- ویژگیها
- یادداشتهای استفاده
- استفاده از <aside>
• عنصر <audio>
- امتحانش کنید
- ویژگیها
- رویدادها
- یادداشتهای استفاده
- استایلدهی با CSS
- تشخیص اضافه شدن و حذف شدن آهنگها
- دسترسیپذیری
- کاربرد اولیه
- عنصر <audio> به همراه عنصر <source>
- <audio> با چندین عنصر <source>
• عنصر <b>
- امتحانش کنید
- ویژگیها
- یادداشتهای استفاده
- مثال
• عنصر <base>
- ویژگیها
- چندین عنصر <base>
- لینک های درون صفحهای
- هدف ممکن است شامل خط جدید ASCII، تب یا < نباشد
- Open Graph
- مثال
• عنصر <bdi>
- امتحانش کنید
- ویژگیها
- بدون bdi و فقط با LTR
- بدون bdi با متن RTL
- استفاده از bdi با متن LTR و RTL
• عنصر <bdo>
- امتحانش کنید
- ویژگیها
- مثال
- یادداشتها
• عنصر <big> (منسوخ)
- ویژگیها
- استفاده از big
- استفاده از اندازه فونت در CSS
- رابط DOM
• عنصر <blockquote>
- امتحانش کنید
- ویژگیها
- یادداشتهای استفاده
- مثال
• عنصر <body>
- ویژگیها
- ویژگیهای رویداد
- ویژگیهای منسوخشده
- مثال
• عنصر <br>
- امتحانش کنید
- ویژگیها
- ویژگیهای منسوخشده
- استایلدهی با CSS
- دسترسیپذیری
- br ساده
• عنصر <button>
- امتحانش کنید
- ویژگیها
- یادداشتها
- دکمههای آیکون
- سایز
- مجاورت
- اطلاعات حالت ARIA
- استایلهای دکمه
- کلیک و فوکوس
- ایجاد یک دکمه پایه
- استفاده از مقدار request-close برای ویژگی command
- HTML
• عنصر <canvas>
- ویژگیها
- محتوای جایگزین
- تگ پایانی <canvas>
- اندازهگذاری canvas با استفاده از CSS در مقابل HTML
- حداکثر اندازه canvas
- استفاده از canvas خارج از صفحه
- دسترسی پذیری: محتوای جایگزین
- مثال
• عنصر <caption>
- امتحانش کنید
- ویژگیها
- ویژگیهای منسوخشده
- یادداشتهای استفاده
- مثال
- جدول با عنوان
- HTML
• عنصر <center> (منسوخ)
- رابط DOM
- مثال ۱
- مثال ۲ (جایگزین CSS)
- مثال ۳ (جایگزین CSS)
• عنصر <cite>
- امتحانش کنید
- ویژگیها
- یادداشتهای استفاده
- مثال
• عنصر <code>
- امتحانش کنید
- ویژگیها
- مثال
- یادداشتها
• عنصر <col>
- امتحانش کنید
- ویژگیها
- ویژگیهای منسوخشده
- یادداشتهای استفاده
- مثال
• عنصر <colgroup>
- امتحانش کنید
- ویژگیها
- ویژگیهای منسوخشده
- یادداشتهای استفاده
- مثال
• عنصر <data>
- امتحانش کنید
- ویژگیها
- مثال
• عنصر <datalist>
- امتحانش کنید
- ویژگیها
- دسترسیپذیری
- انواع متنی
- انواع تاریخ و زمان
- نوع محدوده
- نوع رنگ
• عنصر <dd>
- امتحانش کنید
- ویژگیها
- مثال
• عنصر <del>
- امتحانش کنید
- ویژگیها
- دسترسیپذیری
- مثال
• عنصر <details>
- امتحانش کنید
- ویژگیها
- رویدادها
- یک مثال افشای اطلاعات اولیه
- ایجاد یک جعبه افشای اطلاعات عمومی
- چندین جعبه افشای نامگذاری شده
- سفارشیسازی ظاهر
• عنصر <dfn>
- امتحانش کنید
- ویژگیها
- یادداشتهای استفاده
- مشخص کردن اصطلاح مورد تعریف
- لینکها به عناصر <dfn>
- شناسایی اولیه یک اصطلاح
- پیوند به تعاریف
- استفاده از اختصارات و تعاریف در کنار هم
• عنصر <dialog>
- ویژگیها
- توضیحات
- کنترل دیالوگها با استفاده از جاوا اسکریپت
- دیالوگهای مودال با استفاده از دستورات invoker
- دیالوگهای غیرمودال با استفاده از دستورات popover
- بستن dialog
- استایلدهی CSS
- یادداشتهای تکمیلی
- دسترسیپذیری
- ویژگیهای HTML رابط برنامهنویسی کاربردی فرمان Invoker
- ویژگیهای HTML API مربوط به Popover
- استفاده از ویژگی open در dialog
- ایجاد یک دیالوگ modal
- مدیریت مقدار برگشتی از کادر dialog
- بستن یک dialog با ورودی فرم الزامی
- مقایسه رفتارهای مختلف closedby
- انیمیشن در دیالوگها
- transition برای عنصر dialog
- انیمیشنهای keyframe دیالوگ
• عنصر <dir> (منسوخ)
- رابط DOM
- ویژگیها
• عنصر <div>
- امتحانش کنید
- ویژگیها
- یادداشتهای استفاده
- دسترسیپذیری
- یک مثال اساسی
- یک مثال استایل شده
• عنصر <dl>
- امتحانش کنید
- ویژگیها
- دسترسیپذیری
- مثال تکجمله و توضیح
- مثال چندین اصطلاح، یک توضیح
- مثال یک اصطلاح، چندین توصیف
- مثال اصطلاحات و توضیحات متعدد
- فراداده
- قرار دادن گروههای نام-مقدار در عناصر div
- یادداشتها
• عنصر <dt>
- امتحانش کنید
- ویژگیها
- مثال
• عنصر <em>
- امتحانش کنید
- ویژگیها
- یادداشتهای استفاده
- <i> در مقابل <em>
- مثال
• عنصر <embed>
- امتحانش کنید
- ویژگیها
- یادداشتهای استفاده
- دسترسیپذیری
- مثال
• عنصر <fencedframe> (آزمایشی)
- ویژگیها
- سیاستهای دسترسی موجود برای fencedframe
- فوکوس کردن در fencedframe
- موقعیتیابی و مقیاسبندی
- دسترسیپذیری
- مثال
• عنصر <fieldset>
- امتحانش کنید
- ویژگیها
- استایلدهی با CSS
- مثال
- فیلدست غیرفعال
• عنصر <figcaption>
- امتحانش کنید
- ویژگیها
- مثال
• عنصر <figure>
- امتحانش کنید
- ویژگیها
- یادداشتهای استفاده
- تصاویر
- قطعه کدها
- نقل قولها
- اشعار
• عنصر <font> (منسوخ)
- ویژگیها
- رابط DOM
• عنصر <footer>
- امتحانش کنید
- ویژگیها
- یادداشتهای استفاده
- دسترسیپذیری
- مثال
• عنصر <form>
- امتحانش کنید
- ویژگیها
- ویژگیهای ارسال فرم
- مثال
• عنصر <frame> (منسوخ)
- ویژگیها
- یک سند frameset
• عنصر <frameset> (منسوخ)
- ویژگیها
- مثال
• عنصر <geolocation> (آزمایشی)
- ویژگیها
- توضیحات
- ارتباط با API موقعیت جغرافیایی
- تنظیم زبان دکمه
- محتوای جایگزین
- مسدود کردن <geolocation>
- محدودیتهای استایلدهی
- محدودیتهای دسترسی
- محدودیتهای ارزش
- محدودیتهای پیچیده
- ویژگیهایی که میتوانند به طور معمول تنظیم شوند
- دسترسیپذیری
- مثال استفاده اولیه
• عنصر های <h1>-<h6>
- امتحانش کنید
- ویژگیها
- یادداشتهای استفاده
- از استفاده از چندین عنصر <h1> در یک صفحه خودداری کنید
- تعیین اندازه فونت یکنواخت برای <h1>
- ناوبری
- برچسبگذاری محتوای بخش
- همه سرفصلها
• عنصر <head>
- ویژگیها
- مثال
• عنصر <header>
- امتحانش کنید
- یادداشتهای استفاده
- کاربرد تاریخی
- ویژگیها
- دسترسیپذیری
- سربرگ صفحه
- سربرگ مقاله
• عنصر <hgroup>
- امتحانش کنید
- ویژگیها
- یادداشتهای استفاده
- مثالها
• عنصر <hr>
- امتحانش کنید
- ویژگیها
- مثال
• عنصر <html>
- ویژگیها
- دسترسیپذیری
- مثال
• عنصر <i>
- امتحانش کنید
- ویژگیها
- یادداشتهای استفاده
- مثال
• عنصر <iframe>
- امتحانش کنید
- ویژگیها
- ویژگیهای منسوخشده
- اسکریپت نویسی
- ناوبری بالا در فریمهای با مبدا متقابل
- موقعیتیابی و مقیاسبندی
- رفتار رویدادهای error و load
- دسترسیپذیری
- یک <iframe> ساده
- جاسازی کد منبع در <iframe>
• عنصر <img>
- امتحانش کنید
- فرمتهای تصویر پشتیبانیشده
- خطاهای بارگذاری تصویر
- ویژگیها
- ویژگیهای منسوخشده
- استایلدهی با CSS
- نوشتن توضیحات جایگزین معنادار
- شناسایی SVG به عنوان تصویر
- ویژگی عنوان
- مثال متن جایگزین
- لینک تصویری
- استفاده از ویژگی srcset
- استفاده از ویژگیهای srcset و sizes
- نگرانیهای امنیتی و حریم خصوصی
