جاوا اسکریپت – درس ششم: HTML زبان نشانه‌گذاری ابرمتن

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

به‌عبارت‌دیگر برای حرفه‌ای شدن در برنامه‌نویسی JS باید به‌خوبی بتوانید با HTML و CSS کارکنید.

HTML چیست؟

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

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

برای مثال کد زیر که دارای چند تگ متفاوت است یک صفحه وب ساده است.

جاوا اسکریپت - درس ششم: HTML زبان نشانه‌گذاری ابرمتن

شاید این کد چندان صفحهٔ پرزرق و برقی ایجاد نکند اما این مثال تمام المان‌های پایهٔ موردنیاز صفحهٔ وب را پوشش می‌دهد.

دستورات کلی زبان HTML

کد را با یک تگ ساده تحت عنوان شروع می‌شود که نوع صفحهٔ وب را مشخص می‌کند. با این کار به مرورگرها می‌فهمانید که این صفحه از چه استانداردی پیروی می‌کند. HTML در نسخه‌های مختلفی ارائه‌شده است که برای هرکدام از DOCTYPE متفاوتی استفاده می‌شود. برای مثال در این کد نوع سند صفحهٔ وب HTML انتخاب‌شده است که نشان‌دهندهٔ استفاده صفحه از استانداردهای HTML5 است. برای معرفی سایر نسخه‌های HTML روش‌های متفاوتی برای معرفی وجود دارد.

در اساس DOCTYPE به مرورگر می‌گوید که چگونه صفحهٔ وب را نمایش دهد. علاوه بر آن DOCTYPE می‌تواند بر روی CSS و JS نیز اثر بگذارد.

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

هر دستور دارای دو تگ است؛ تگ باز و تگ بسته. تگ باز به مرورگر می‌گوید که دستور از کجا شروع می‌شود و تگ بسته محل پایان دستور را مشخص می‌کند. تگ بسته غالباً با کاراکتر (/) همراه است. برای مثال

به منزلهٔ شروع یک پاراگراف و

به مرورگر می فهماند که پاراگراف به پایان رسیده است. البته تعدادی از المآن‌ها هستند که فقط دارای یک تگ هستند و تگ بسته ندارند. مانند تگ ، و
که فقط شامل یک تگ می شوند البته این تگ‌ها باید حتماً همراه (/) در انتهای تگ قبل از علامت (>) باشند برای مثال

تگ‌هایی html که برای هر صفحهٔ وبی ضروری هستند

برای اینکه صفحات وب به درستی کار کنند و در مرورگرها به درستی نمایش داده شوند باید حتماً شامل تگ‌های زیر شوند

تگ

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

تگ :

این تگ به‌عنوان رأس یک صفحهٔ وب شناخته می‌شود، که می‌تواند حاوی اطلاعاتی مانند عنوان صفحه و اطلاعات غیرقابل نمایش مانند کلمات کلیدی، فایل‌های الحاقی، زبان و… که برای مرورگرها مفاهیم خاص دارد.در اضافه تگ head می‌تواند حاوی اطلاعاتی برای مرورگر باشد. برای مثال فایل CSS و Java را اغلب در این تگ به صفحه الحاق می‌کنند.

تگ :

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

تگ

این تگ برای اعمال تأکید بر روی یک متن خاص است. وقتی‌که شما یک متن را بین دو تگ باز و بسته قرار دهید متن به صورت boldface یا توپر درخواهد آمد.

تگ یا anchor

در صفحهٔ شما برای ساخت لینک استفاده می‌شود. شما می‌توانید کاربران صفحهٔ خود را به صفحات ذیگر و یا به وبسایت‌های دیگری ارجاع دهید

 

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

 


درس بعدی موضوع این درس درس قبلی
افزودن جاوا اسکریپت به صفحه(به زودی) HTML زبان نشانه‌گذاری ابرمتن مقدمه ای بر برنامه نویسی

نوشته جاوا اسکریپت – درس ششم: HTML زبان نشانه‌گذاری ابرمتن اولین بار در theNEXT تازه‌های تکنولوژی،کامپیوتر و موبایل پدیدار شد.

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

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

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

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

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

برنامه نویسی

تعریف برنامه نویسی

برنامه‌نویسی رایانه (که اغلب به طور کوتاه برنامه‌نویسی نامیده می‌شود) فرایند سوق دادن ساختار اصلی یک مسئله محاسباتی به برنامه‌ای قابل اجرا است. این کار مستلزم فعالیت‌هایی همچون تحلیل و درک مسئله است و عموماً حل چنین مسایلی منجر می‌شود به ایجاد یک الگوریتم، بازبینی نیازمندی‌های الگوریتم که شامل صحت و میزان منابع مصرفی است، پیاده‌سازی (که معمولاً به عنوان کدینگ از آن یاد می‌شود) این الگوریتم در یک زبان برنامه‌نویسی مقصد، تست کردن، اشکال زدایی، نگه داری کد منبع، پیاده‌سازی سیستم ساخت(build system) و مدیریت مصنوعات مشتق شده مانند کد ترجمه شده به زبان ماشین برنامه‌های کامپیوتری. الگوریتم اغلب تنها به شکل قابل تجزیه و تحلیل برای انسان و قابل استدلال با منطق نمایش داده می‌شود. کد منبع به یک یا چند زبان برنامه‌نویسی، مانند جاوااسکریپت، اسمال‌تاک، پایتون، جاوا، سی شارپ، سی پلاس‌پلاس و سی نوشته شده است.(ویکی پدیا)

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

برنامه نویسی وب

JavaScript از CSS و HTML تا حدودی پیچیده‌تر است و برنامه نویسی آن یک دنیای متفاوت از طراحی وب است بنابراین یکی از اهداف این دوره آموزشی دادن تفکر برنامه نویسی به شما مانند یک برنامه نویسی حرفه‌ای است به گونه‌ای که به سادگی بتوانید اصول اولیه برنامه‌نویسی JavaScript ، Action Script و حتی سایر زبان‌های تحت ویندوز را یاد بگیرید. علاوه بر آن شما یاد خواهید گرفت که یک کار برنامه نویسی یا یک پروژه کوچک را چگونه به سرانجام برسانید و یک صفحهٔ وب کاربردی را ایجاد کنید.

بیشتر تازه‌کاران با JavaScript از تعداد زیاد کاراکترهای درهم و برهم و همچنین لغات نامفهوم مانند null، int، value، if و… زود گیج می‌شوند. یادگیری یک زبان برنامه‌نویسی مانند یادگیری یک زبان دیگر است که نیاز دارید لغات جدید، کاراکترهای جدید و دستور زبان آن را فرابگیرید تا بتوانید به آسانی با آن ارتباط برقرار کرده و از آن استفاده کنید.

هر زبان برنامه‌نویسی کلمات کلیدی و کاراکترهای ویژهٔ خود را دارد همچنین روش مخصوص به خود در چیدن این اجزا در کنار هم که به این روش دستور زبان (syntax). شما نیاز دارید که اجزا یا کلمات کلیدی این دستور زبان را به خاطر سپرده تا حین برنامه نویسی از آن‌ها استفاده کنید.

زبان برنامه نویسی جاوا اسکریپت یک زبان اسکریپتی است که در مقابل زبان‌های کامپایل شونده قرار دارد. برای درک بهتر مفاهیم اسکریپتی و کامپایل شونده به مقاله‌ای در این خصوص مراجعه فرمایید. تفاوت بین Compiler ( کامپایلر ) و Interpreter ( مفسر ) در چیست ؟

برنامه چیست؟

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

  • نام بازدیدکننده را بپرس.
  • پاسخ بازدیدکننده را دریافت کن.
  • پیغام خوش‌آمد گویی را نمایش بده.

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

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


درس بعدی موضوع این درس درس قبلی
HTML زبان نشانه‌گذاری ابرمتن مقدمه ای بر برنامه نویسی CSS افزودن استایل به صفحات وب

نوشته درس پنجم آموزش جاوا اسکریپت – مقدمه ای بر برنامه نویسی اولین بار در theNEXT تازه‌های تکنولوژی،کامپیوتر و موبایل پدیدار شد.