سیاره‌ی آی‌تی

با IT-Planet دنیای آی‌تی را بهتر بشناسید

JavaScript

طراحی جعبه جستجو یا Search Box‌ سایت‌ها با ۸ طرح جالب و پویا

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

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

قبل از ادامه‌ی مطلب به این نکته توجه کنید که در نمونه‌های جالبی که در ادامه معرفی می‌کنیم، معمولاً کدهای جاوااسکریپت از نوع خالص نیستند و بلکه پروژ‌ها مبتنی بر jquery نوشته شده و لذا باید لایبرری جی‌کوئری را نیز در صفحه‌ی وب بارگذاری کنید.

آشنایی با سلکتورهای جاوااسکریپت برای پیدا کردن عناصر HTML

در طراحی وب زمانی که می‌خواهید به کمک جاوااسکریپت برخی از تگ‌های HTML را پیدا کرده و بسته به شرایط و نیاز، تغییراتی در آن ایجاد کنید، از سلکتورها استفاده می‌کنید. سلکتورهای مختلفی در JavaScript وجود دارد که برای انتخاب کردن المانی با کلاس، خواص، شناسه یا id و موارد دیگر استفاده می‌شود و شاید انجام عمل جست‌وجو کردن المان‌های موردنظر شما، با چند دستور Selector مختلف قابل انجام باشد.

هر یک از روش‌های مختلف مثل getElementById() یا getElementsByClassName() و غیره، مزایا و معایبی دارد و در نتیجه برای انتخاب عناصر DOM بهتر است اطلاعات مقدماتی داشته باشیم و از بهترین سلکتور استفاده کنیم. چیزی که موضوع اصلی این مقاله است. با ما باشید.

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

آموزش برنامه‌نویسی بازی مار و نقطه فقط با HTML و JavaScript و CSS

یکی از ویژگی‌های جالب طراحی وب به کمک JavaScript و HTML این است که می‌توانید بازی‌های ساده بنویسید! برنامه‌نویسی یک بازی ساده مثل بازی مار که نقاطی را می‌خورد و طولانی‌تر می‌شود، به زبان جاوااسکریپت چندان پیچیده نیست و می‌توان بازی‌های به مراتب پیچیده‌تر هم تهیه کرد و در صفحات وب‌سایت قرار داد.

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

با Notepad++ کدنویسی کنید

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

آشنایی با باونس ریت یا نرخ پرش و زمان بازدید از صفحه در Google Analytics و دقیق‌تر کردن آن برای بهبود SEO

در سرویس آماری Google Analytics که محبوب‌ترین روش محاسبه‌ی آمار بازدیدکنندگان سایت است، برخی کمیت‌ها مثل نرخ پرش یا Bounce Rate و زمان ماندن در صفحه یا Time on Page برای وب‌مسترهای مبتدی کمی نامفهوم است و البته خطای محاسباتی زیادی دارد.

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

برای بهبود SEO و افزایش ترافیک ورودی سایت، آمار را تحلیل کنید

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

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

یکی از راه‌های تغییر دادن ساختار صفحات سایت‌ها این است که از JavaScript در کنار HTML و CSS استفاده کنید تا المان‌های صفحه در شروع بارگذاری یا حین کلیک روی برخی لینک‌ها و دکمه‌ها و غیره، تغییرات ظاهری داشته باشند و در نتیجه صفحه‌ی وب از حالت استاتیک و ساده خارج شود و حالت پویاتری پیدا کند.

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

آشنایی با ساختار HTML و ارتباط جاوااسکریپت از طریق DOM

یک جدول ساده در HTML با تگ table‌ ساخته می‌شود. می‌توانید در فایلی با پسوند html از تگ یا سلکتور <table> استفاده کنید و ساخت جدول را آغاز کنید. برای کار کردن و تغییر دادن کدهای HTML که ممکن است به صفحات استاتیک یا دینامیک سایت‌ها مربوط باشند، می‌توان از JavaScript استفاده کرد که در این صورت ارتباط بین HTML و جاوااسکریپت از طریق DOM یا Document-To-Object برقرار می‌شود. در واقع ساختار صفحه‌ی وب که یک صفحه‌ی HTML است، به صورت اشیاء یا Object دیده شده و قابل تغییر است.

بهترین مقالات اخیر

دانش‌نامه

گوگل و اندروید

اپل، macOS و iOS

ویندوز

دنیای فناوری

دانش‌نامه

آخرین مطالب سلامت زیستی