نوشته های حامد مشهدی

دام (DOM)HTML و نحوه دستکاری آن توسط JavaScript

حامد مشهدی — Sun, 10 Oct 2021 13:50:30 +0330

دام (DOM) یک شیوه یا مدل استاندارد ، برای دسترسی به کلیه عناصر درون یک سندHTML را ارائه می دهد . مدل DOM مخفف عبارتDocument Object Model است.در هنگام کار با جاوا اسکریپت ، برای تغییر هر چیزی بر روی صفحه ، برنامه نیاز دارد تا به آن عنصر خاص دسترسی داشته باشد.برای مثال ما می خواهیم اندازه قلم یک پاراگراف را در صفحه تغییر دهیم ، در حالی که در درون صفحه پاراگراف های زیادی وجود دارد که باید بدون تغییر باقی بمانند.در این هنگام ما ابتدا باید به پاراگراف مورد نظر دسترسی داشته باشیم و سپس آن را تغییر دهیم.این امکان دسترسی به عناصر در یک صفحه HTML به همراه تمام متدهای آن برای تغییر ، حذف و اضافه کردن عناصر به وسیله مدل DOM فراهم شده است.مفهوم و نحوه عملکرد مدل DOMمدل DOM برای دسترسی به اشیا و عناصر موجود در یک صفحه HTML از یک درخت سلسه مراتبی استفاده می کند.این درخت از شی WINDOW به عنوان عنصر مادر یک صفحه HTML شروع شده و به ترتیب به عناصر رده پایین تر ادامه می یابد،تا به پایین ترین رده عناصر یعنی متن و نوشته برسد.جاوا اسکریپت با استفاده از مدل شی گرای DOM ,یک صفحه HTML داینامیک یا پویا ایجاد می کند.با استفاده از DOM میتوان:تمامی عناصر یک صفحه html را تغییر داد.تمام خصوصیات عناصر یک صفحه html را تغییر داد.تمام سبک های css یک صفحه html را تغییر داد.به تمام رویدادهای یک صفحه html واکنش نشان داد.معرفی مدلDOM (Document Object Model)عناصر موجود در Body زیر را در نظر بگیرید:

EXAMPLE

DOM in JavaScript

Item1
Item2
Item3
Item4

در زبان برنامه نویسی Html یک ساختار درختی با نام DOM و جود دارد، در این ساختار تگ های داخل یک صفحه دارای والد و فرزندی هستند.برای مثال در عناصری که بالا ایجاد کردیم همین ساختار وجود دارد. عنصر div دارای والدی به نام body است و همین عنصر فرزندی به نام img دارد.در بحث ساختارDOM عناصر میتوانند همزاد باشند، در بالا تگ div با تگp همزاد است چرا که در یک رده قرار گرفته اند و هر دو فرزند body میباشند.پیدا کردن عناصر در صفحه:از ایجاد این ساختار هدفی وجود دارد که چگونه میتوان یک عنصر را حذف کرد یا اینکه اضافه کرد.که با استفاده از زبان برنامه نویسی جاوا اسکریپت در بحث DOM ممکن میشود.برای کار کردن با DOM از کلاس Document استفاده میکنیم با استفاده از این کلمه ما میتوانیم به همه اشیاء داخل صفحه دسترسی پیدا کینم.حال برای اینکه به یک عنصر در صفحه دسترسی پیدا کینم از کلمه کلیدی .getElementById() بعد از document استفاده میکنیم که برای دسترسی نیاز به id عنصر مورد نظر دارد.document.getElementById("id");در ادامه بعد از اینکه عنصر مورد نظر را پیدا کرد درون یک متغییر قرار میدهیم و تغییراتی را بر روی آن متغییر اعمال میکنیم.var element=document.getElementById("img1");element.style.border="1px solid #ffff00";در صفحاتhtml گاهی به وجود می‌آید که به چندین عنصر در صفحه دسترسی پیدا کنیم.در این صورت از.getElementsByClassName() استفاده میکنیم.در این روش برای پیدا کردن نام کلاسی را میخواهد که عناصر دیگر هم آنرا دارا باشند و بعد از اینکه عناصر هم کلاسی را پیدا کرد باید با استفاده از حلقه for به همه دسترسی پیدا کرد و تغییراتی را بر روی آنها انجام داد.var elemens=document.getElementsByClassName("img");for (let index = 0; index < elemens.length; index++) {const element = elemens[index];element.style.border="1px solid #ff00ff"}در روش دیگر برای دسترسی به چندین تگ یا عنصر میتوانیم از نام تگ‌ها استفاده کنیم.var elemens2=document.getElementsByTagName("tag name");for (let index = 0; index < elemens2.length; index++) {const element = elemens2[index];element.style.border="1px solid #ff00ff";}اضافه کردن عنصر به صفحه:موضوع بعدی اضافه کردن تگ html با زبان جاوا اسکریپت به صفحه html است.در بخشScript به کمک متد زیر ابتدا تگhtml مورد نظرمان را ایجاد میکنیم و درون یک متغییر قرار میدهیم.var tag=document.createElement("Tag name");حال برای اینکه تگ ما دارای محتوای متنی باشد از متد زیر استفاده کرده و درون یک متغییر قرار میدهیم.var text=document.createTextNode("your text");حال با استفاده از متد appendChild متغییر متنی را درون متغییر از نوع tag قرار میدهیم.tag(text);و در ادامه به کمک متد بالا به صورت زیر متغییر از نوع tag را به body اضافه میکنیم.document.body(tag);حذف کردن عنصر در صفحه:برای حذف کردن عکس در صفحه ابتدا با استفاده از id آنها را پیدا میکنیم و درون یک متغییر قرار میدهیم.var item=document.getElementById("img1");حال با استفاده از نام عنصر،والد این عنصر را هم پیدا میکنیم.var div=document.getElementsByTagName("div");با استفاده از شماره خانه تگ div مورد نظر عکس را حذف میکنیم.div[0].removeChild(img1);پیدا کردن عناصر HTML در جاوا اسکریپتتغییر عناصر HTML در جاوا اسکریپتجدول زیرمتد ها و ویژگی های مربوز به تغییر عناصرHTML در جاوا اسکریپت را توضیح داده است:حذف و اضافه کردن عناصر HTMLمدیریت کننده رویدادپیدا کردن اشیا HTML

جاوا اسکریپت (JavaScript) چیست؟

حامد مشهدی — Mon, 04 Oct 2021 21:20:43 +0330

پاسخ دادن این سوال به این سادگی ها نیست چرا که دنیای جاوا اسکریپت بسیار پهناور تر از این حرف هاست که بتوانم پاسخ کاملی ارائه کنم اما اگر قرار باشد به طور خلاصه و مفید برایتان بگویم، می شود گفت: جاوا اسکریپت ساخته شد تا صفحات وب را زنده کند و به آن ها پویایی ببخشد. در واقع هر جا که اطلاعات به صورت استاتیک و خشک و ثابت نیستند و کمی انعطاف دارند شما شاهد استفاده از جاوا اسکریپت هستید! در این روز ها کمتر صفحه ی وبی را می توان پیدا کرد که از جاوا اسکریپت استفاده نکند.جاوا اسکریپت (JavaScript) که به اختصار JS نیز نامیده می شود، یکی از محبوبترین زبان‌های برنامه نویسی است. جاوا اسکریپت زبانی سطح بالا، داینامیک، شی‌گرا و تفسیری است که از شیوه‌های مختلف برنامه نویسی پشتیبانی می‌کند. از این زبان می توان برای برنامه نویسی سمت سرور(Server Side)، اپلیکیشن های موبایل، بازی و اپلیکیشن‌های دسکتاپ استفاده کرد. بنابراین می توان اینگونه برداشت کرد که زبان برنامه نویسی جاوا اسکریپت ، یک زبان همه فن حریف است.این محبوبیت بی دلیل نیست چرا که با این زبانِ شی گرا شما قادر خواهید بود تا سایت‌های بی‌روح خود را جان بخشی کنید و با کاربران خود تعامل داشته باشید. یعنی می‌توانید فایل‌های انیمیشنی، صوتی و تصویری را روی سایت خود به نمایش بگذارید. همچنین می‌توانید روی سایت‌تان تایمر قرار دهید، رنگ‌ها را با حرکت موس تغییر دهید و بسیاری کارهای دیگر که باعث جذابیت بیشتر صفحات وب می‌شوند.اما این تمام چیزی نیست که جاوا اسکریپت در اختیار شما قرار می‌دهد. شما با استفاده از این زبان می‌توانید شروع به ساخت برنامه‌های وب و موبایل و دسکتاپ کنید. برای این منظور می‌توانید از فریم‌ورک های مختلفJavaScript که مجموعه‌ای از کتابخانه‌ها را در اختیار شما قرار می‌دهند استفاده کنید. یکی از کارهای سرگرم کننده دیگری که می‌توانید از طریق این زبان انجام دهید، توسعه بازی های رایانه ای تحت مرورگر است. پس به صورت کلی می‌توان کاربردهای زبان جاوا اسکریپت را به صورت زیر بیان کرد:برنامه نویسی فرانت اندبرنامه نویسی بک اند با جاوا اسکریپتبرنامه نویسی نرم افزارهای موبایلبرنامه نویسی نرم افزارهای دسکتاپجاوا اسکریپت اولین بار در می 1995 در 10 روز توسط برندن ایچ، یکی از کارکنان شرکت Netscape متولد شد! در ابتدا این شرکت به این نتیجه رسیده بود که به صفحات وب پویا و جذاب تری احتیاج دارد. این اولین قدم به سوی ساخت زبانی ساده بود. آقای براندان ایچ از طرف این شرکت مامور شد که زبانی اسکریپتی برای صفحات وب و دست بردن در کدهای HTML بسازد. ماموریت آقای ایچ این بود زبانی را ارائه کند که نه تنها متخصصان برنامه نویسی از آن استقبال کنند، بلکه به راحتی مورد استفاده طراحان هم باشد.پردازش و اجرای برخی زبان‌ها بر روی سرور (سایت) صورت می‌گیرد و سپس نتیجه به سوی کاربر ارسال می‌شود. این زبان‌ها برای برقراری ارتباط به نرم‌افزاری احتیاج دارند که به آن وب سرور گفته می‌شود. اما نکته جالبی که در مورد زبان JavaScript وجود دارد این است که از این زبان می‌توان هم برای برنامه نویسی سمت سرور و هم سمت کاربر استفاده کرد. اما در گذشته قلمروی این زبان تنها به برنامه نویسی سمت کاربر محدود می‌شد. کدهای زبان های برنامه نویسی سمت کاربر همانطور که از اسم آن مشخص است در سیستم کاربر پردازش و اجرا می‌شوند.نقاط قوت زبان جاوا اسکریپت چیست؟هر یک از زبان هایی که در دنیای برنامه نویسی مورد استفاده قرار می گیرند نقاط قوت و ضعف هایی دارند که زبان جاوا اسکریپت هم از این موضوع مستثنا نیست. این زبان به دلیل مزایای فراوانی که دارد در میان برنامه نویسان از محبوبیت زیادی برخوردار است که به طور خلاصه به برخی از آنها اشاره می کنیم:بر اساس بررسی سایت stackoverflow محبوب ترین زبان برنامه نویسی سال 2018 است.برای پردازش و اجرا به کامپایلر احتیاجی ندارد.یادگیری جاوا اسکریپت نسبت به خیلی از زبان های برنامه نویسی راحت تر است.به صورت کراس پلتفورم روی مرورگر ها یا پلتفرم های مختلف اجرا می شود.نسبت به زبان های برنامه نویسی دیگر سبک تر و سریع تر است.فریم ورک ها،کتابخانه ها و به صورت کلی ابزارهای بسیار زیادی را در اختیارتان قرار می دهد.زبان بومی مرورگر وب است و در مرورگر کاربران پردازش می شود.امکان ایجاد صفحات وب تعاملی و پویا را به برنامه نویسان می دهد.در جواب عمل کاربران، عکس العمل نشان می دهد.نقاط ضعف زبان برنامه نویسی جاوا اسکریپت چیست؟برخی از ضعف های این زبان برنامه نویسی عبارتند از :دشواری در تشخیص دلیل خطا دادن و مشکل در دیباگ کردنمحدودیت در اجرای اسکریپت های جاوا اسکریپت با ایجاد محدودیت هایی جهت حفظ امنیتاجرا نشدن بر روی مرورگرهای قدیمینفوذپذیری نسبت به اکسپلویت ها و عوامل مخربمی تواند برای اجرای کدهای مخرب در کامپیوتر کاربران استفاده شود.با رندر شدن متفاوت بر روی ابزارهای مختلف می تواند باعث ایجاد تناقض و نداشتن یکپارچگی شود.بزرگترین عیب زبان جاوا اسکریپت امکان نفوذ پذیری و سوء استفاده از کدهای برنامه می باشد زیرا کدهای جاوا اسکریپت به راحتی قابل مشاهده هستند و به این ترتیب امنیت برنامه به راحتی به خطر می‌افتد. البته با انجام یکسری راهکارها می توان امنیت این زبان را افزایش داد. قواعد دستوری Syntax جاوا اسکریپت JavaScriptسینتکسJavaScript قوانینی از چگونگی ساخت برنامه های جاوا اسکریپت است. برنامه کامپیوتری لیستی از "دستورالعمل" هاست که توسط کامپیوتر"اجرا" میشوند.دستورات جاوا اسکریپت متشکل است از : values(مقادیر) ، Operators (عملگرها) ، Expressions(عبارات) ، Keywords (کلیدواژه ها) و Comments(توضیحات).برنامه ها و عبارات جاوا اسکریپتبرنامه کامپیوتری لیستی از "دستورالعمل" هاست که توسط کامپیوتر"اجرا" میشوند. در یک زبان برنامه نویسی، این دستورالعمل های برنامه "عبارات" نامیده می شوند. در HTML و جاوا اسکریپت عبارات، "دستورالعمل" هایی هستند که توسط مرورگر وب "قابل اجرا" می باشند. جاوا اسکریپت نیز یک زبان برنامه نویسی است و عبارات در این زبان با سمی کولن ";" از هم جدا میشوند. عبارات جاوا اسکریپت از مقادیر، عملگرها، عبارات، کلمات کلیدی، و توضیحات تشکیل شده اند. جاوا اسکریپت فضاهای متعدد را نادیده می گیرد. شما می توانید فضای سفید را به اسکریپت خود برای خواناتر کردن آن اضافه کنید. همچنین برای خوانایی بهتر کدها، برنامه نویسان اغلب تمایل دارند، خطوط کد بیش از 80 کاراکتر نباشند و بهترین مکان برای شکستن آن، بعد از یک عملگر چون "=" میباشد.عبارات جاوا اسکریپت اغلب با یک کلمه کلیدی برای تعریف عملی که باید انجام شود، شروع میشوند. در اینجا لیستی از برخی از کلمات کلیدی را مشاهده میکنید:کلمه کلیدیvar : اعلان یک متغیرکلمه کلیدی break : پایان یک سوئیچ یا یک حلقهکلمه کلیدی continue : پرش از یک حلقه و شروع از بالاکلمه کلیدی debugger : توقف اجرای جاوا اسکریپت، و فراخوانی (در صورت موجود بودن) تابع اشکال زداییکلمه کلیدی do … while : اجرای یک بلوک از عبارات، و تکرار بلوک، در حالی که شرط درست باشدکلمه کلیدی for : اجرای یک بلوک از عبارات، تا زمانی که شرط درست باشدکلمه کلیدی function : اعلان یک تابعکلمه کلیدی if… else : اجرای یک بلوک از عبارات، بسته به شرایطیکلمه کلیدی return : خروج از تابعکلمه کلیدی switch : اجرای یک بلوک از عبارات، بسته به شرایط مختلفکلمه کلیدی: try … catch پیاده سازی رسیدگی به خطا برای یک بلوک از عباراتسینتکس جاوا اسکریپت دو نوع مقدار را تعریف می کند: مقادیر ثابت و مقادیر متغیر. مقادیر ثابت، "لیترال" و مقادیر متغیر "متغیرها" نامیده می شوند. قوانین مهم برای نوشتن مقادیر ثابت عبارتنداز: اعداد همراه یا بدون رقم اعشار نوشته میشوند، رشته ها متنی هستند که در کوتیشن تکی یا دوتایی نوشته میشوند. عبارات نیز می توانند نشان دهنده مقادیر ثابت باشند.متغیرهای جاوا اسکریپتدر یک زبان برنامه نویسی، متغیرها برای ذخیره مقادیر داده استفاده می شوند. جاوا اسکریپت از کلید واژه "var " برای تعریف متغیرها استفاده می کند و ازعلامت مساوی برای اختصاص مقادیر به متغیرها استفاده می شود.همه متغیر های جاوا اسکریپت باید با نام منحصر به فرد، تعریف شوند. این نام منحصر به فرد به "شناسه" نامیده میشود. شناسه می تواند نام کوتاه (مانند x و y)، و یا نام توصیفی تر ( مانند age، sum، totalVolume) باشد. قواعد کلی برای ساخت نام برای متغیر های (شناسه منحصر به فرد) عبارتند از:► نام می تواند شامل حروف، ارقام، زیرخط، و نشانه دلار باشد.► نام باید با یک حرف شروع شود.► نام همچنین می تواند با $ شروع شود.► نام به حروف حساس هستند.► کلماترزرو شده (مانند کلمات کلیدی جاوا اسکریپت) نمی توانند به عنوان نام استفاده شوند.جاوا اسکریپت به حروف حساس است. همه شناسه های جاوا اسکریپت به بزرگی و کوچکی حروف کلمات حساس هستند یعنی دو متغیر lastName و lastname دو متغیر متفاوت در نظر گرفته میشوند. همچنین در این زبان، VAR یا Var بعنوان کلمه کلیدی "var" تفسیر نمیشوند.عملگرهای جاوا اسکریپتجاوا اسکریپت ازعملگر انتساب (=) برای تخصیص مقادیر به متغیرها و از عملگرهای محاسباتی (+ - * /) برای محاسبه مقادیر استفاده می کند.در زبان جاوا اسکریپت از کلمات کلیدی برای مشخص کردن عملیاتی که باید انجام شود، استفاده میشود مثلا کلمه کلیدی var به مرورگر میگوید که یک متغیر جدید ایجاد کند.مجموعه کاراکترهای جاوا اسکریپتجاوا اسکریپت از مجموعه کاراکتر های یونیکد استفاده می کند. یونی کد (تقریبا) همه کاراکترها، علائم نشانه گذاری، و نمادها در جهان را پوشش می دهد.توضیحات در جاوا اسکریپتهمه عبارات جاوا اسکریپت "قابل اجرا" نیستند.مثلا کد بعد از دو اسلش // یا بین / * و * / به عنوان یک توضیح پردازش می شود. توضیحات نادیده گرفته می شوند، و اجرا نخواهد شد.توضیحات جاوا اسکریپت می تواند برای تشریح کد های جاوا اسکریپت و خواناتر کردن آن مورد استفاده قرار گیرد. همچنین برای جلوگیری از اجرا، هنگامی که کد های آزمایشی جایگزین میشوند، کاربرد دارد. توضیحات تک خطی با "//" شروع میشوند و هر متنی که در ادامه این علامت در یک خط می آید، توسط جاوا اسکریپت نادیده گرفته میشود. توضیحات چند خطی نیز با */ شروه و با /* پایان میپذیرد و هر متنی بین این دو قرار گیرد اجرا نخواهد شد.

شیوه های CSS نویسی در html

حامد مشهدی — Tue, 28 Sep 2021 12:43:31 +0330

تو این پست قصد داریم در مورد شیوه‌های مختلف استفاده از CSS در درون صفحات HTML صحبت کنیم . به طور کلی به 3 شکل می‌تونید از CSS برای تعیین شیوه نمایش تگها ، در میان کدهای HTML استفاده کنید :1. استفاده از CSS در درون تگها(inline CSS)2. نوشتن تمامی تنظیمات CSS درون تگStyle در header صفحه اچ تی ام ال3. نوشتن سلکتورهای CSS در فایل جداگانه و الصاق آن به صفحه HTML1- استفاده از CSS در درون تگها (inline CSS) :این روش به سبک درون خطی معروفه از مهمترین سبک ها در نوشتن Css هست . در وب سایت هایی که تعداد صفحات کمی دارند از روش css داخلی برای طراحی سایت استفاده می کنند. این روش سایر روش ها را شامل میشه اما توصیه میشه جهت بهینه سازی سایت از این روش کمتر استفاده شود . شما می‌توانید تنظیمات و ویژگی‌های CSS رو در درون هر کدوم از تگ‌های Htmlبیارید تا اون تنظیمات روی تگ مربوطه اعمال بشه . برای اینکار باید ویژگی‌های CSS مورد نظر رو که می‌خواید روی تگ خاصی اعمال بشه درون ویژگی style اون تگ بیارید . ویژگی Styleبرای همه تگ‌های Html قابل تعریفه و به عنوان مقدار ، در درون خود میتونه چندین تا از ویژگی‌های CSS رو که با علامت ; از هم جدا شدند بیاره ! برای درک بیشتر از چگونگی استفاده CSSدر درون تگها ، چند تا مثال براتون میارم :فرض کنید می‌خواهید فقط یکی از پاراگراف‌های توی صفحتون رنگ متنش قرمز بشه . - تگ داشتن یک پاراگراف معمولی به شکل زیره :

Css Learning

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

Css Learning

می بینید که فقط ویژگی style به این تگ اضافه شده و به عنوان مقدار یکی از ویژگیهای CSS که رنگ متن رو مشخص می‌کنه آورده شدهحالا همون پاراگراف بالا رو می‌خوایم نوع فونتش رو Tahoma و اندازه فونت رو 16 پیکسل کنیم . کدش مثل زیر میشه :

Css Learning

ملاحظه می‌کنید که همه ی تنظیمات CSS مورد نظر رو درون خود تگ و به عنوان مقدار ویژگی style آورردیم . استفاده ی به این شکل خیلی کار درستی نیست . مگر اینکه فقط در تگ خاصی بخواید تنظیمات رو اعمال کنید و این تنظیمات در تگهای دیگه به اشتراک گذاشته نشده باشند . اگه بخواید همه ی مواقع از این شیوه استفاده کنید بسیاری از مزایای CSS رو از دست خواهید داد !2- نوشتن تمامی تنظیمات CSS درون تگ Style در header صفحه htmlبا استفاده از روش Css داخلی شما می‌تونید همه یا برخی از سلکتورهای CSS رو در تگ

Css Learning

می بینید که سلکتورهای p1 و p2 رو در تگ