حقوقی

روانشناسی

حقوقی

روانشناسی

آموزش گام به گام و تصویری HTML قسمت شانزدهم(ایران گستر)

HTML

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

HTML

تگ <script>

تگ <script> متعلق به زبان HTML بوده و زمانی استفاده می شود که بخواهیم در سند HTML از کدهای جاوا اسکریپتی استفاده کنیم؛ چه این کدها به صورت دستی درون این تگ وارد شوند و چه شامل آدرسی باشند که به یک فایل خارجی جاوا اسکریپت اشاره می کنند.(ایران گستر)

بیشترین استفاده از جاوا اسکریپت در این موارد اتفاق می افتد:(ایران گستر)

manipulation: همان دستکاری و تغییر دادن عناصر HTML و محتوای آن است.
form validation: همان اعتبارسنجی فرم ها می باشد. به طور مثال اگر از کاربر بخواهید سن خود را وارد کند، باید کاراکترهای حرفی (الفبا) را توسط جاوا اسکریپت غیرمجاز کنیم.(ایران گستر)
dynamic changes: جاوا اسکریپت می تواند محتوای صفحه را پویا کند؛ به طور مثال یک ساعت دیجیتال را در صفحه نمایش دهد که هر یک ثانیه بروزرسانی می شود.(ایران گستر)

1- ممکن است بگویید مگر نمی توان این موارد را در سمت سرور چک کرد؟ حرفتان اشتباه نیست و قطعا اعتبارسنجی در سمت سرور هم انجام می گیرد اما اگر ابتدا یک بار با جاوا اسکریپت اعتبار سنجی کنیم دیگر نیازی نیست از سرور های خود کار بکشیم و بیخودی روی آن ها بار پردازشی قرار دهیم.(ایران گستر)

اگر بخواهیم یکی از عناصر HTML را با جاوا اسکریپت بگیریم می توانیم از تابع ()document.getElementById استفاده کنیم. این تابع در واقع عنصر خاصی را بر اساس مقدار id اش می گیرد. مثال:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Use JavaScript to Change Text</h2>

<p>This example writes "Hello JavaScript!" into an HTML element with id="demo":</p>

document.getElementById("demo").innerHTML = "Hello JavaScript!";

</script>

</body>

</html>

برای مشاهده ی خروجی، روی این لینک کلیک کنید.

در مثال بالا یک عنصر <p> داشتیم که id آن برابر با demo بود اما محتوایی نداشت. سپس با جاوا اسکریپت آن را دریافت کردیم و به آن محتوا (عبارت Hello JavaScript) دادیم.(ایران گستر)

البته استفاده از جاوا اسکریپت به همین مرحله ختم نمی شود. ما می توانیم پیشرفته تر شویم و با استفاده از جاوا اسکریپت حتی خصوصیات CSS را نیز به همراه HTML تغییر دهیم:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h1>My First JavaScript</h1>

<p id="demo">JavaScript can change the style of an HTML element.</p>

function myFunction() {

document.getElementById("demo").style.fontSize = "25px";

document.getElementById("demo").style.color = "red";

document.getElementById("demo").style.backgroundColor = "yellow";

}

</script>

<button type="button" onclick="myFunction()">Click Me!</button>

</body>

</html>

برای مشاهده ی خروجی، روی این لینک کلیک کنید.

مشخص است که می توانیم کارهای خلاقانه ی بسیار زیادی را با جاوا اسکریپت انجام دهیم!

به طور مثال به کد زیر نگاه کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

function light(sw) {

var pic;

if (sw == 0) {

pic = "https://www.w3schools.com/html/pic_bulboff.gif"

} else {

pic = "https://www.w3schools.com/html/pic_bulbon.gif"

}

document.getElementById('myImage').src = pic;

}

</script>

<p>

<button type="button" onclick="light(1)">Light On</button>

<button type="button" onclick="light(0)">Light Off</button>

</p>

</body>

</html>

برای مشاهده ی خروجی، روی این لینک کلیک کنید.

در این کد با تغییر دادن دو تصویر متفاوت، تصور می کنیم که با فشار دادن دکمه ها چراغ را خاموش یا روشن می کنیم!

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

تگ <noscript>

تگ <noscript> که یکی از تگ های HTML می باشد کار جالبی دارد؛ اگر کاربری که از سایت شما بازدید می کند قابلیت جاوا اسکریپت مرورگر خود را غیر فعال کرده باشد و یا اصلا مرورگر او از قابلیت جاوا اسکریپت پشتیبانی نکند محتوای درون تگ <noscript> به او نمایش داده می شود.(ایران گستر)

سوال: چه محتوایی باید درون <noscript> بنویسیم؟

پاسخ: کاملا بستگی به شما دارد. ممکن است بخواهید وب سایت خود را طور دیگری برنامه نویسی کنید تا افرادی که جاوا اسکریپت ندارند از آن نسخه استفاده کنند و یا شاید هم بخواهید مانند اکثر توسعه دهندگان دیگر یک اخطار به کاربر نمایش دهید تا جاوا اسکریپت خود را فعال کند. مثال:(ایران گستر)

<!DOCTYPE html>

<html>

document.getElementById("demo").innerHTML = "Hello JavaScript!";

</script>

<p>اگر مرورگری جاوا اسکریپت خود را غیر فعال کرده باشد، متن داخل تگ noscript را خواهد درد.

در غیر این صورت همین متنی را که در حال حاضر می خوانید، خواهد خواند!

</p>

<p>

شما می توانید برای تست کردن این موضوع، از قسمت تنظیمات مرورگر خود به دنبال گزینه ی JavaScipt بگردید و آن را غیر فعال کنید تا محتوای این تگ را ببینید.

</p>

</body>

</html>

برای مشاهده ی خروجی، روی این لینک کلیک کنید.

آدرس دهی فایل ها

آدرس دهی فایل ها در دنیای وب (چه HTML باشد، چه جاوا اسکریپت، چه PHP و …) معمولا از یک قانون پیروی می کنند. file path به معنی «مسیر فایل» است و آدرس یک فایل را بر اساس ساختار پوشه های یک سایت مشخص می کند. ما زمانی از file path استفاده می کنیم که بخواهیم از عناصر خارجی استفاده کنیم، مانند:(ایران گستر)

صفحات وب دیگر
تصاویر
ویدیوها
صفحات استایل CSS
فایل های جاوا اسکریپت
و …

نکته: باید توجه داشته باشید، زمانی که می گوییم عناصر خارجی منظورمان خارج از سورس کد است، نه لزوما خارج از سرور شما!(ایران گستر)

آدرس مطلق یا کامل (Absolute File Path)

آدرس های کامل یا مطلق، همانطور که از نامشان مشخص است، آدرس یک فایل را به صورت کامل و تمام مشخص می کنند. معمولا زمانی از این نوع آدرس دهی استفاده می کنیم که منابع خارجی ما روی سرور خودمان نباشد و بخواهیم از یک آدرس اینترنتی دیگر فایلی را بگیریم مانند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Using a Full URL File Path</h2>

</body>

</html>

برای مشاهده ی خروجی، روی این لینک کلیک کنید.

آدرس نسبی (Relative File Path)

آدرس های نسبی به جای آنکه آدرس فایل مورد نظر ما را تمام و کمال مشخص کنند، قسمت خاصی از آن را مشخص می کنند. از این نوع آدرس دهی تنها زمانی می توان استفاده کرد که فایل یا منابع مورد نظر حتما روی سرور خودمان باشد! مثال:(ایران گستر)

1	<img src="/images/picture.jpg" alt="HTML">

آدرسی که در کد بالا داده ایم با یک اسلش (علامت /) شروع شده است:

/images/picture.jpg

این اسلش می گوید به root (فولدر اصلی) برو و از آنجا دنبال پوشه ی images بگرد و از داخل آن تصویر picture.jpg را پیدا کن!

یک حالت دیگر به این شکل است:(ایران گستر)

1	<img src="images/picture.jpg" alt="HTML">

در این شکل آدرس دهی، از هیچ علامت اسلشی در ابتدای آدرس استفاده نکرده ایم:

images/picture.jpg

این یعنی به پوشه ی images برو و فایل picture.jpg را پیدا کن. البته یادتان باشد زمانی می توانید اینطور آدرس بدهید که فایل سورس کدتان (فایلی که کد بالا را در آن نوشته اید) به همراه images در یک پوشه باشند! به طور مثال اسم فایل سورس کد index.html باشد و به همراه پوشه ای به نام images هر دو در یک پوشه ی دیگر (مثلا My HTML Files) باشند. به همین دلیل این نوع آدرس دهی «نسبی» نام دارد؛ فایل هایتان را نسبت به سورس کد آدرس دهی می کنید.(ایران گستر)

روش دیگر آدرس دهی نسبی به این صورت است:

1	<img src="../images/picture.jpg" alt="HTML">

آدرسی که در این کد مشخص کرده ایم با دو علامت نقطه و یک اسلش شروع می شود:

../images/picture.jpg

این ترکیب (/..) معنای خاصی دارد، یک پوشه به عقب برو! در اینجا دیگر پوشه ی images مانند مثال قبل در یک پوشه با سورس کد قرار ندارد. این حالتی است که در آن فایل سورس کد ما در یک پوشه قرار دارد اما پوشه ی images در آنجا نیست بلکه یک پوشه عقب تر یا یک سطح عقب تر می باشد.(ایران گستر)

بهترین روش آدرس دهی

پاسخ این سوال در موقعیت های مختلف متفاوت خواهد بود اما در حالت کلی آدرس دهی نسبی بسیار بهتر است چرا که file path های شما به آدرس URL تان وابسته نمی شوند و با تغییر آن مجبور نیستید همه را دوباره تغییر دهید. همچنین لینک ها و منابعی که آدرس دهی دارند در localhost (کامپیوتر خود) نیز کار می کنند و می توانید هنگام توسعه دادن یک برنامه در سیستم خود نیز کارکرد آن را ببینید.(ایران گستر)

استفاده از file path های مطلق و کامل باعث بروز دردسر های زیادی می شوند به جز مواردی که راه دیگری نداشته باشیم (مثلا منابع ما روی یک سرور دیگر قرار داشته باشند).(ایران گستر)

fateme سه‌شنبه 23 مهر 1398 ساعت 12:40

0 نظر

آموزش گام به گام و تصویری HTML قسمت پانزدهم (ایران گستر)

HTML

[caption id="attachment_3063" align="aligncenter" width="255"] HTML

HTML[/caption]

id ها و کاربرد آن ها

در زبان HTML دسته ای از attribute ها را داریم که id نام دارند. id ها، همانطور که از نامشان مشخص است، آیدی (id) منحصر به فردی را برای عنصری در HTML تعیین می کند. برخلاف کلاس ها، id ها باید منحصر به فرد و غیر تکراری باشند؛ به طور مثال نمی توانیم در یک صفحه 2 عنصر با آیدی یکسان داشته باشیم.(ایران گستر)

سوال: اگر id دو عنصر را یکی کنیم چه می شود؟(ایران گستر)

پاسخ: یکی کردن id دو یا چند عنصر باعث توقف برنامه تان نمی شود اما دو مشکل کلی را به وجود می آورد: اول اینکه کار id ها تعیین آیدی و مشخص کردن یک عنصر خاص است. اگر قرار است چند عنصر را مشخص کنیم باید از همان کلاس ها استفاده کنیم. دوم اینکه این کار از نظر HTML غیر معتبر است بنابراین در سئو و رتبه بندی ضرر خواهید کرد.(ایران گستر)

معمولا از id ها برای هدف گرفتن یک عنصر خاص در صفحه استفاده می شود تا بعدا در جاوا اسکریپت یا CSS مورد استفاده قرار گیرد. در مثال زیر می خواهیم عنصری که id اش برابر با myHeader را تغییر دهیم:(ایران گستر)

<!DOCTYPE html>

<html>

<head>

<style>

#myHeader {

background-color: lightblue;

color: black;

padding: 40px;

text-align: center;

}

</style>

</head>

<body>

<h2>The id Attribute</h2>

<p>Use CSS to style an element with the id "myHeader":</p>

<h1 id="myHeader">My Header</h1>

</body>

</html>

مشاهده ی خروجی در JSBin

نکات مهم در مورد id:(ایران گستر)

id ها می توانند روی هر عنصری استفاده شوند و از Attribute های عمومی هستند.
id ها case sensitive هستند؛ یعنی نسبت به بزرگی و کوچکی حروف انگلیسی حساس اند.
مقدار id ها باید حداقل یک کاراکتر داشته باشد و نباید خالی (اسپیس و …) گذاشته شود.

تفاوت id با class چیست؟

id ها برای تشخیص دادن یک عنصر خاص مورد استفاده قرار می گیرند و غیر تکراری اند اما کلاس ها برای شناسایی بیشتر از یک عنصر هستند و تکراری نیز می باشند.(ایران گستر)

بگذارید برایتان مثالی بزنم. در قسمت های قبل گفتیم برای درک بهتر، class را به عنوان کلاس درس و عناصر داخل آن را به عنوان دانش آموزان کلاس در نظر بگیرید. دانش آموزان خاص هستند اما دانش آموزانی که داخل یک کلاس هستند علاوه بر تفاوت هایشان، دارای شباهت های پایه ای و مهم هستند (یک مجموعه درس را می خوانند، هم سن هستند، یک هدف دارند و …). عناصر داخل کلاس نیز شباهت های پایه ای دارند.(ایران گستر)

حالا هر کدام از این دانش آموزان چیزی به نام «شماره ی دانش آموزی» دارند که برای هر کدامشان متفاوت است و از سمت اداره ی آموزش پرورش تعیین می شود. این شماره ی دانش آموزی مانند همان id است! اگر بخواهید تمام دانش آموزان را در سیستم وارد کنید، می نویسید بچه های کلاس فلان… اما اگر بخواهید یک دانش آموز را وارد سیستم کنید، از شماره ی دانش آموزی اش استفاده می کنید.(ایران گستر)

این مسئله را در مثال زیر مشاهده می کنید:

<!DOCTYPE html>

<html>

<head>

<style>

/* Style the element with the id "myHeader" */

#myHeader {

background-color: lightblue;

color: black;

padding: 40px;

text-align: center;

}

/* Style all elements with the class name "city" */

.city {

background-color: tomato;

color: white;

padding: 10px;

}

</style>

</head>

<body>

<h2>Difference Between Class and ID</h2>

<p>An HTML page can only have one unique id applied to one specific element, while a class name can be applied to multiple elements.</p>

<h1 id="myHeader">My Cities</h1>

<h2 class="city">London</h2>

<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>

<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>

<p>Tokyo is the capital of Japan.</p>

</body>

</html>

مشاهده ی خروجی در JSBin

bookmark چیست؟

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

برای ایجاد یک bookmark باید قسمتی را انتخاب کنید و سپس لینکی به آن اضافه کنید. زمانی که کاربر روی آن لینک کلیک کند به قسمت مورد نظر منتقل می شود. به مثال زیر توجه کنید:(ایران گستر)

ابتدا یک عنصر (معمولا تگ های h1 و …) با id خاصی می سازیم:(ایران گستر)

1	<h2 id="C4">Chapter 4</h2>

سپس برایش لینک تعیین می کنیم:(ایران گستر)

1	<a href="#C4">Jump to Chapter 4</a>

نتیجه ی نهایی مثال زیر می شود:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<p><a href="#C4">Jump to Chapter 4</a></p>

<h2>Chapter 1</h2>