آموزش گام به گام و تصویری HTML قسمت شانزدهم(ایران گستر)
HTML
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های HTML مارا دنبال کنید.
تگ <script>
تگ <script> متعلق به زبان HTML بوده و زمانی استفاده می شود که بخواهیم در سند HTML از کدهای جاوا اسکریپتی استفاده کنیم؛ چه این کدها به صورت دستی درون این تگ وارد شوند و چه شامل آدرسی باشند که به یک فایل خارجی جاوا اسکریپت اشاره می کنند.(ایران گستر)
بیشترین استفاده از جاوا اسکریپت در این موارد اتفاق می افتد:(ایران گستر)
- manipulation: همان دستکاری و تغییر دادن عناصر HTML و محتوای آن است.
- form validation: همان اعتبارسنجی فرم ها می باشد. به طور مثال اگر از کاربر بخواهید سن خود را وارد کند، باید کاراکترهای حرفی (الفبا) را توسط جاوا اسکریپت غیرمجاز کنیم.(ایران گستر)
- dynamic changes: جاوا اسکریپت می تواند محتوای صفحه را پویا کند؛ به طور مثال یک ساعت دیجیتال را در صفحه نمایش دهد که هر یک ثانیه بروزرسانی می شود.(ایران گستر)
1- ممکن است بگویید مگر نمی توان این موارد را در سمت سرور چک کرد؟ حرفتان اشتباه نیست و قطعا اعتبارسنجی در سمت سرور هم انجام می گیرد اما اگر ابتدا یک بار با جاوا اسکریپت اعتبار سنجی کنیم دیگر نیازی نیست از سرور های خود کار بکشیم و بیخودی روی آن ها بار پردازشی قرار دهیم.(ایران گستر)
اگر بخواهیم یکی از عناصر HTML را با جاوا اسکریپت بگیریم می توانیم از تابع ()document.getElementById استفاده کنیم. این تابع در واقع عنصر خاصی را بر اساس مقدار id اش می گیرد. مثال:(ایران گستر)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html>
<body>
<h2>UseJavaScript toChange Text</h2>
<p>Thisexample writes"Hello JavaScript!"into an HTML element with id="demo":</p>
<pid="demo"></p>
<script>
document.getElementById("demo").innerHTML="Hello JavaScript!";
</script>
</body>
</html>
|
برای مشاهده ی خروجی، روی این لینک کلیک کنید.
در مثال بالا یک عنصر <p> داشتیم که id آن برابر با demo بود اما محتوایی نداشت. سپس با جاوا اسکریپت آن را دریافت کردیم و به آن محتوا (عبارت Hello JavaScript) دادیم.(ایران گستر)
البته استفاده از جاوا اسکریپت به همین مرحله ختم نمی شود. ما می توانیم پیشرفته تر شویم و با استفاده از جاوا اسکریپت حتی خصوصیات CSS را نیز به همراه HTML تغییر دهیم:(ایران گستر)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<pid="demo">JavaScript can change the style of an HTML element.</p>
<script>
functionmyFunction(){
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>
|
برای مشاهده ی خروجی، روی این لینک کلیک کنید.
مشخص است که می توانیم کارهای خلاقانه ی بسیار زیادی را با جاوا اسکریپت انجام دهیم!
به طور مثال به کد زیر نگاه کنید:(ایران گستر)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPEhtml>
<html>
<body>
<script>
functionlight(sw){
varpic;
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>
<img id="myImage"src="https://www.w3schools.com/html/pic_bulboff.gif"width="100"height="180">
<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> بنویسیم؟
پاسخ: کاملا بستگی به شما دارد. ممکن است بخواهید وب سایت خود را طور دیگری برنامه نویسی کنید تا افرادی که جاوا اسکریپت ندارند از آن نسخه استفاده کنند و یا شاید هم بخواهید مانند اکثر توسعه دهندگان دیگر یک اخطار به کاربر نمایش دهید تا جاوا اسکریپت خود را فعال کند. مثال:(ایران گستر)