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

دسته بندی: آموزش
زمان مطالعه: 2 دقیقه
۰۳ اسفند ۱۳۹۳

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

عموم مطالب مطرح شده در این جلسه به شرح زیر است :

  • فصل پنجم : آموزش خطایابی و نحوه انجام تغیرات و رفع مشکلات موجود در صفحات وب
  • معرفی 3 پیشنیاز لازم برای انجام تغیرات و رفع مشکلات موجود در صفحات وب
  • انجام تغیرات و رفع مشکلات در ظاهر وبسایت و صفحات وب
  • انجام چندین تغیر در ظاهر یک وبسایت معروف ایرانی (ورزش 3)
  • بررسی سورس کد صفحه وب و اعتبار سنجی آن
  • بررسی سورس کد وبسایت ورزش 3 و نمایش و توضیح خطاهای موجود در اعتبار سنجی آن
  • ذکر نکاتی در مورد نحوه تمرین شما برای تسلط بیشتر
  • ذکر نکاتی مختصر در مورد کپی کردن ظاهر قالب های دیگر
  • فصل ششم: ناسازگاری مرورگرها! چالش ها و نحوه کدنویسی استاندارد و صحیح
  • تعریف ناسازگاری و منابع آن
  • معرفی دلایل ایجاد ناسازگاری
  • معرفی چندین روش و نکته مهم برای رهایی از ناسازگاری ها
  • معرفی CSS Reset و دلیل استفاده از آن
  • فصل هفتم: آشنایی با جاوااسکریپت و کاربرد آن در صفحات وب
  • معرفی مفهوم DHTML
  • معرفی اولیه زبان جاوااسکریپت
  • توانایی ها مزیت های زبان جاوااسکریت
  • معرفی کاربردهای زبان جاوااسکریپت
  • مدل DOM و نحوه انجام تغیرات در صفحات وب توسط جاوااسکریپت
  • اشیاء پیش ساخته در زبان جاوااسکریپت برای دریافت اطلاعات جالب صفحه وب و مرورگر
:: توجه

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

ثبت نام در آموزش طراحی وب سایت

نویسنده
بیش از 15 سال هست که برنامه نویسی می کنم و از بین همه زبون هایی که کار کردم جاوا، اسمبلی و php رو دوست دارم. دانشجوی دکترای نرم افزارم و توی دانشگاه روی پردازش بیگ دیتا و پردازش موازی کار کردم و عاشق چالش از هر نوعیش هستم! سون لرن مثل بچه منه که 12 سال براش وقت گذاشتم، اینجا همه تلاش می کنیم از شروع یادگیری تا ورود به بازر کار حوزه برنامه نویسی و IT همراهتون باشیم.

جلسات دوره

نظرات کاربران

محمد علی کوکائیان

سلام. روز بخیر.
من در قسمت 16 این دوره آموزشی هستم یک وبسایت دارم که با قالب آماده enfold بالا اومده. این قالب خوب کار میکرد اما دوست داشتم تغییراتی رو روش بدم که درون تنظیمات نبود. برای همین دوره css رو استارت زدم. ابتدا نمیدونستم کدوم یک از فایل هایی که در هدر لینک داده شده سورس کد های css است. یکی یکی اونهارو تست کردم و همچنین در قسمت inspect elements اون رو پیدا کردم. کدها همه به هم چسبیده هستند و اصلا شبیه چیزی که در دوره آموزشی دیدیم نیستند. آخر همه کد ها تغییراتم رو اعمال کردم و قالب به خوبی کار میکرد. تا اینکه تصمیم گرفتم عرض بدنه رو کوچک کنم و پشت زمینه از عکسی استفاده کنم که در پروزه 1 بکار رفت. تا عرض صفحه رو تغییر دادم شکل و شمایل صفحه سایتم به هم ریخت. بعد از ریستور هاستم دوباره تا یک تغییر کوچک تو همین فایل css ایجاد کردم دوباره همه چیز به هم ریخت. احساس میکنم مشکلی پیش اومده که یک قسمت از کدها خونده نمیشه یا به درستی اجرا نمیشه.
سایت من yeksho.ir
ممنون میشم یه نگاهی بهش بیندازید و من رو راهنمایی کنید

parisa

استاد اون برنامه ای که رو مرورگرتون نصب هست برای search کردن اسمش چیه؟
مثلن تو قسمت view source وقتی دنبال تگ خاصی هستیم می خوایم search کنیم.

saeed

سلام خسته نباشید . سوال مینویسم خداکنه یک روز جواب بدین خیلی پشتیبانیتون متاسفانه ضعیفه و سوال قبلیم بعد بیشتر از یک هفته هنوز جواب ندادید… بهر حال ..یک سوال داشتم . در سایت ورزش 3 قسمت نتایج زنده که vertical-align رو مثال میزدید کلمه نایج زنده از تصویر پایین تر بود ولی شما img رو بهش vertical align دادین و نتایج زنده بالا رفت . علتش چیه؟مگه نباید به نتایج زنده vertical align میدادین؟ بعد من اومدم به نتایج زنده vertical align دادم هیچ تغییری نکرد . ایا vertical align فقط در موارد خاصی فعاله؟اگه توضیح بدین { یک روزی } ممنون میشم 🙂

hossein

سلام بر استاد آوند عزیز:
در ابتدا می خواهم یک تقدیر و تشکر کنم ازتون بابت این دوره من تا این جلسه(جلسه 16) پیش اومدم و خیلی لذت بردم.
استاد بنده به عنوان تمرین مشکلات سایت سون لرن رو رو داخل سایت https://validator.w3.org بررسی کردم و برام خیلی جالب بود که سایتی با این حجم زیاد مطالب فقط چند خطا و ارور جزئی داشت:
1) یکی این بود که در تگ های img از مشخصه alt استفاده نشده در چند مورد.
2) در دو سه مورد از تگ style در body استفاده شده که باید داخل head باشه.
3) مشخصه type برای تگ های script لازم نیست بکار برده شوند که شما استفاده کرده اید.
4) مشخصه role در تگ های nav لازم نیست بکار برده شوند که شما استفاده کرده اید.
5) در تگ section باید از تگ های h2 تا h6 استفاده شود در حالیکه یک تگ h1 استفاده شده است.
واقعا بابت این دوره ازتون صمیمانه سپاسگزارم.

لقمان آوند

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

spring spring

سلام ، ممنون از زحمات شما ، سوال داشتم در رابطه با ناسازگاری مرورگرها ، می خواستم بپرسم در کل عمده عوامل ناسازگاری مرورگر ها این موارد هست ؟ 1-موتور های رندرینگ 2-پیش فرض مرورگر ها 3-در صورتی که از css های مخصوص مرورگر ها استفاده کنید 4-عدم معتبر بودن کد های cssو html و 5-استفاده از زبان جاوا اسکریپت 6- استفاده از ifram ها ، آیا موارد 2 به بعد زیر مجموعه موتور های رندرینگ نیست ؟ ******یعنی پیش فرض متفاوت مرورگر ها (همچنین موارد دیگر)به خاطر تفاوت در موتور های رندرینگ نیست ؟ ******

مدیه دارم رو این فکر می کنم ، چندین بار فیلما رو از اول دیدم ، اما متوجه این موضوع نمیشم!

Moh Tav

سلام.
در این جلسه تمرینی دادید که کدهای یک سایت را کپی کنیم و با سایت validator.w3.org مشکلات را حل کنیم.
یه سوال.
استاد آوند فرمودند که این کد ها را روی هاستی کپی کنیم. یعنی یه فایل html و فایل css را روی هاست کپی کنیم جواب میده؟ چطوری باید اینکارو بکنیم؟ باید روی یک دامنه خاص اینکارو کرد؟
میشه راهنمایی کنید تا بتونیم از سایتی که معرفی کردند، ایرادات سایت ها را برای تمرین برطرف کنیم.

لقمان آوند

سلام
وبسایت هایی هست که هاست رایگان میدن. هاست رایگان رو سرچ کنید . ثبت نام کنید و فایل هاتون رو آپلود کنید

itone

سلام استاد اوند استاد میشه کاربرد min-width:; و max -width رو
بهم بگید متاسفانه هنوز کاربردشونو نفهمیدم ممنون از لطفتون

لقمان آوند

عرض تگ ها و المان هایی که به وضوح مشخص نکردید ممکنه متغیر باشه. با این مشخصه ها شما حداقل عرض و حداکثر عرض رو مشخص میکنید.

Mohammad Reza

سلام یه مشکلی هست که نتونستم رفع کنم تو یکی ازوبسایت های دوستان.
این وبسایت https://khabarver.ir/ رو اگه برید میبینید که

 #page {
 width: 85%;
 margin: 0px auto;
 display: table;
}

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

 #page{width: 99% !important;display:table}
لقمان آوند

عرضش که الان 100% هست و مشکلی نمی بینم.

علیرضا

سلام،
در برخی از موارد وقتی میخوایم کدها رو برای ولید بودن تست کنیم
وبسایت validator.w3.org ارور هایی رو نمایش میده که کلا تو سورس که ما داریم وجود نداره
همچنین در گوگل جستجو کردم و به وبسایت هایی همانند stackoverflow.com مراجعه کردم اما نتیجه قانع کننده ای رو نگرفتم
لطفه راهنمایی کنید چجوری این نوع ارور ها رو برطرف کنیم
ممنون

وحید صالحی

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

علیرضا

سلام،
متاسفانه هر سوالی در انجمن مطرح میکنم پاسخ داده نمیشه 🙂

وحید صالحی

دوستان اگر اطلاع داشته باشن حتما پاسخ خواهند داد

Mohsen

سلام جناب آوند ، من با آموزشهای شما و چیزایی که بلد بودم یه قالب آماده کردم
منتها چند تا مشکل دارم
براتون ایمیل کردم قالب رو ، میشه بررسی بکنید ؟
سوالمو تو ایمیل پرسیدم
😎 🙂

لقمان آوند

چشم ایشالله …

Mohsen

آقای اوند اگه امکانش هست سوالاتم تو ایمیل رو یه مقدار زودتر جواب بدید 🙂 خیلی فکرمو مشغول کرده 😯
و قالب رو بعدا بررسی بفرمایید ممنون از لطفتون

لقمان آوند

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

پایان زمان پشتیبانی

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

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

نیاز به لاگین

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