جاوا اسکریپت داده ها را به صورت های مختلف می تواند نمایش دهد. برای تست کدهای نوشته شده می توان از console.log و document.write و window.alert استفاده نمود
خاصیت innerHtml
برای دسترسی به عناصر یک صفحه html می توانیم از متد document.getElementById(id) استفاده کنیم. در واقع id یک نام منحصر بفرد در یک سند html است که با استفاده از آن می توانیم به آن عنصری که دارای id است دسترسی داشته باشیم. توجه کنید که دو عنصر در یک سند نمی توانند یک id مشابه داشته باشند ولی کلاس ها اینگونه نیستند و می توان به عناصر مختلف صفحه html، کلاس های یکسانی داد. با هم ببینیم:
<!DOCTYPE html>
<html>
<head>
<title>webbookies.com</title>
</head>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>خاصیت innerHtml به محتوای تگ مورد نظر اشاره دارد. یعنی محتوای تگ p با id = demo مساوی 11 می شود.
همانطور که گفتیم خاصیت (attribute) id باید منحصر به فرد و یکتا باشد. حال اگر بخواهیم محتوای چند تگ را به صورت همزمان تغییر دهیم می توانیم به جای خاصیت id، از class استفاده کنیم.
<!DOCTYPE html>
<html>
<head>
<title>webbookies.com</title>
</head>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p class="webbookies"></p>
<p class="webbookies"></p>
<script>
var elements = document.getElementsByClassName('webbookies');
elements[0].innerHTML = 5 + 6;
elements[1].innerHTML = 5 + 8;
</script>
</body>
</html>خط شماره 9 و 10 را مشاهده کنید ابتدا برای عناصر صفحه کلاس تعریف کرده ایم.
در خط شماره 12 یک متغیر با نام elements تعریف می کنیم. سپس با استفاده از document.getElementsByClassName تمامی عناصری که دارای کلاس webbookies هستند درون آرایه elements قرار می گیرند سپس می توانیم با استفاده از اندیس آرایه به هر کدام از عناصر صفحه دسترسی پیدا کنیم.
document.write
document.write بیشتر به منظور تست برنامه مورد استفاده قرار می گیرد:
<!DOCTYPE html>
<html>
<head>
<title>webbookies.com</title>
</head>
<body>
<h1>My Page</h1>
<p>My paragraph.</p>
<script>
document.write(`webbookies`);
</script>
</body>
</html>استفاده از ()document.write بعد از بارگذاری کامل صفحه باعث حذف تمام عناصر صفحه می شود. نمونه کد زیر را ببینید:
<!DOCTYPE html>
<html>
<head>
<title>webbookies.com</title>
</head>
<body>
<h1>My Page</h1>
<p>My paragraph.</p>
<button onclick="document.write(`webbookies`)">Try it</button>
</body>
</html>window.alert
یک پنجره حاوی یک پیام به کاربر نمایش می دهد:
<!DOCTYPE html>
<html>
<head>
<title>webbookies.com</title>
</head>
<body>
<h1>My Page</h1>
<p>My paragraph.</p>
<script>
window.alert(`webbookies`);
</script>
</body>
</html>console.log
به منظور عیب یابی برنامه می توان از console.log استفاده کرد. در صورت استفاده console.log، مقداری در صفحه مرورگر چاپ نمی شود، بلکه برای مشاهده نتیجه باید به قسمت developer tools مراجعه کنیم. بدین صورت که ابتدا کلید F12 یا Ctrl+Shift+i کیبرد را در مرورگر گوگل کروم زده و سپس به برگه console می رویم.
<!DOCTYPE html>
<html>
<head>
<title>webbookies.com</title>
</head>
<body>
<script>
console.log(`webbookies`);
</script>
</body>
</html>window.print
چاپ محتویات صفحه جاری توسط این دستور انجام می شود:
<!DOCTYPE html>
<html>
<head>
<title>webbookies.com</title>
</head>
<body>
<p>پاراگراف</p>
<button onclick="window.print()">چاپ</button>
</body>
</html>
ديدگاه كاربران
دیدگاهی وجود ندارد