آموزش JavaScript
در این مقاله از آموزش JavaScript قصد داریم تا شما را با کاربردهای زبان برنامه نویسی جاوا اسکریپت در طراحی صفحات وب و تغییرات html و css آشنا کنیم.
همانطور که حتما در مثال‌های آموزش JavaScript مشاهده کردید، از عبارت document برای گرفتن یک المان html استفاده کرده بودم. شما می‌توانید یک المان html را با استفاده از نام آی دی، تگ المان، نام کلاس و css آن را در جاوا اسکریپت بگیرید.
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>
<html>
<body>
<p class="demo"></p>
<script>
document.getElementsByClassName("demo").innerHTML = "Hello World!";
</script>
</body>
</html>
<html>
<body>
<p></p>
<script>
document.getElementsByTagName("p").innerHTML = "Hello World!";
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Finding HTML Elements by Query Selector</h2>
<p>Hello World!</p>
<p class="intro">The DOM is very useful.</p>
<p class="intro">
This example demonstrates the <b>querySelectorAll</b> method.
</p>
<p id="demo"></p>
<script>
var x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML =
'The first paragraph (index 0) with class="intro": ' + x[0].innerHTML;
</script>
</body>
</html>
انواع حالات دیگری نیز برای گرفتن مقادیر یک html قابل استفاده می‌باشد که به شما طور خاص تگ های خاصی از html را به شما می‌دهد. یکی از این موارد گرفتن کل body یک فایل html می‌باشد.
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
alert(document.body.innerHTML);
</script>
</body>
</html>
مورد بعدی گرفتن اطلاعات فرم‌های یک صفحه می‌باشد. این دستور document.forms می‌باشد.
<!DOCTYPE html>
<html>
<body>
<h2>Finding HTML Elements Using document.forms</h2>
<form action="">
First name: <input type="text" name="fname" value="Donald" />
<input type="submit" value="Submit" />
</form>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Number of forms: " + document.forms.length;
</script>
</body>
</html>
دستور بعدی مورد استفاده برای گرفتن اطلاعات head یک فایل html می‌باشد:
<!DOCTYPE html>
<html>
<head>
<title>W3Schools Demo</title>
</head>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = document.head;
</script>
</body>
</html>
مورد بعدی گرفتن عکس‌های یک صفحه html می‌باشد.
<!DOCTYPE html>
<html>
<body>
<h2>Finding HTML Elements Using document.images</h2>
<img src="pic_htmltree.gif" width="486" height="266" />
<img src="pic_navigate.gif" width="362" height="255" />
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Number of images: " + document.images.length;
</script>
</body>
</html>
در حالت بعدی شما می‌توانید لینک‌های یک صفحه html را دریافت کنید:
<!DOCTYPE html>
<html>
<body>
<h2>Finding HTML Elements Using document.links</h2>
<p>
<a href="/html/default.asp">HTML</a>
<br />
<a href="/css/default.asp">CSS</a>
</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Number of links: " + document.links.length;
</script>
</body>
</html>
مورد بعدی تگ‌های script که تگ جاوا اسکریپت می‌باشد را می‌توانید دریافت کنید.
<!DOCTYPE html>
<html>
<body>
<h2>Finding HTML Elements Using document.scripts</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Number of scripts: " + document.scripts.length;
</script>
</body>
</html>
دستور بعدی به شما مقدار title صفحه html مورد نظر را می‌دهد:
<!DOCTYPE html>
<html>
<head>
<title>W3Schools Demo</title>
</head>
<body>
<h2>Finding HTML Elements Using document.title</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"The title of this document is: " + document.title;
</script>
</body>
</html>
وقتی که با استفاده از دستورات بالا، المان مورد نظر را گرفتید و یا اصطلاحا انتخاب کردید، اکنون با استفاده از دستورات زیر می‌توانید مقدار html و یا css آن را تغییر دهید و یا ویژگی های خاصی به آن بدهید. مثلا اگر دکمه است، می‌توانید آن را غیر فعال کنید.
دستور innerHTML در آموزش JavaScript
اولین دستور innerHTML می‌باشد که در مثال‌ها نیز آن را مشاهده کردید. این دستور برای تغییر محتوای داخل یک المان html می‌باشد. در صورتی که مقدار به آن اختصاص ندهید، مقدار المان مورد نظر در html را به شما بر میگرداند.
بهتر است که زمانی که یک المان html را انتخاب می‌کنید، آن را در متغیر جاوا اسکریپت ذخیره کنید تا کدنویسی تمیزتر و بهینه‌تری داشته باشید:
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">Old Heading</h1>
<script>
var element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>
</body>
</html>
آموزش JavaScript این قابلیت را به شما می‌دهد تا علاوه بر تغییر محتوای یک المان html، یک ویژگی خاص آن را نیز تغییر دهید. فرض کنید که یک تگ img دارید و قصد دارید تا فایل منبع عکس آن را تغییر دهید، اینکار با جاوا اسکریپت به راحتی قابل انجام می‌باشد:
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif" />
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
در واقع هر ویژگی از هر تگی را با استفاده از نام آن و مشابه دستور بالا تغییر دهید.
همانطور که گفتم، شما با استفاده از جاوا اسکریپت می‌توانید استایل یک المان را نیز تغییر دهید. برای اینکار تنها کافیست تا با استفاده از استایل و سپس ویژگی مورد نظر، آن را مقدار دهی کنید.
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
<p>The paragraph above was changed by a script.</p>
</body>
</html>
شما با استفاده از جاوا اسکریپت می‌توانید قابلیت انیمیشن نیز ایجاد کنید. برای اینکار از تابع SetInterval نیاز است استفاده کنید. این تابع تا زمانی که اجرای آن قطع نشده است، در مدت زمانی که برای آن تعریف شده است، دستورات داخل آن اجرا می‌شود:
var id = setInterval(frame, 5);
function frame() {
if (/* test for finished */) {
clearInterval(id);
} else {
/* code to change the element style */
}
}
مثال استفاده از انیمیشن جاوا اسکریپت در داخل html:
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript Animation</h1>
<div id="animation">My animation will go here</div>
</body>
<script>
function myMove() {
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + "px";
elem.style.left = pos + "px";
}
}
}
</script>
</html>
مورد بعدی در آموزش JavaScript بسیار کاربردی می‌باشد. این قابلیت به شما این امکان را می دهد تا متناسب با رفتار و عمل کاربر در داخل سایت تغییرات ایجاد کنید. مثلا فرض کنید که قصد دارید تا در صورتی که کاربر بر روی دکمه‌ی خاصی بر روی صفحه کلیک کرد، تغییری در رنگ المان خاصی در صفحه ایجاد شود و یا متنی به کاربر نمایش دهد، تمامی این کارها با event ها در جاوا اسکریپت قابل تعریف می‌باشند.
این قابلیت Event، onclick نام دارد. در کد زیر دو نمونه از آن را می‌توانید مشاهده کنید. با استفاده از متد onclick یک تابع تعریف می‌کنید و در صورتی که بروی المان مورد نظر کلیک شود، event مورد نظر اجرا می‌شود که نهایتا منجر به اجرای تابع تعریف شده برای آن می‌شود و دستورات داخل تابع در جاوا اسکریپت اجرا می‌شود.
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
متد onload و onunload
متد بعدی onload و onunload می‌باشد. این event که برای تگ body قابل تعریف می‌باشد. به شما این امکان را می‌دهد تا قبل از لود کامل صفحه و یا بعد از لود کامل صفحه، دستورات و یا تابع خاصی را اجرا کنید:
<!DOCTYPE html>
<html>
<body onload="checkCookies()">
<p id="demo"></p>
<script>
function checkCookies() {
var text = "";
if (navigator.cookieEnabled == true) {
text = "Cookies are enabled.";
} else {
text = "Cookies are not enabled.";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
متد onchange در آموزش JavaScript
متد بعدی onchange می‌باشد. این متد زمانی که تغییری در المان مورد نظر ایجاد شود اجرا می‌شود. مثلا فرض کنید که کاربر در داخل یک تگ input مقداری را می‌نویسید و یا پاک می‌کند در این حالت در مقدار input مورد نظر، تغییری ایجاد می‌شود. در صورتی که متد مورد نظر برای آن تعریف شده باشد، در هر بار تغییر، این متد اجرا می‌شود.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</head>
<body>
Enter your name: <input type="text" id="fname" onchange="myFunction()" />
<p>
When you leave the input field, a function is triggered which transforms
the input text to upper case.
</p>
</body>
</html>
متد onmouseover و onmouseout
متد بعدی onmouseover و onmouseout می‌باشد. این دو متد در صورتی که نشانه گر موس بر روی المان قرار گیرد و یا از روی المان مورد نظر برداشته شود، دستورات تعریف شده در جاوا اسکریپت را اجرا می‌کند.
<!DOCTYPE html>
<html>
<body>
<div
onmouseover="mOver(this)"
onmouseout="mOut(this)"
style="background-color:#D94A38;width:120px;height:20px;padding:40px;"
>
Mouse Over Me
</div>
<script>
function mOver(obj) {
obj.innerHTML = "Thank You";
}
function mOut(obj) {
obj.innerHTML = "Mouse Over Me";
}
</script>
</body>
</html>
متد onmousedown و onmouseup در آموزش JavaScript
دو متد دیگر onmousedown و onmouseup می‌باشد. این دو متد در زمانی استفاده می‌شوند که شما کلیک سمت چپ موس بر روی یک المان html نگه دارید. در زمانی که کلیک مورد نظر را رها کنید، متد onmouseup اجرا می‌شود.
<!DOCTYPE html>
<html>
<body>
<div
onmousedown="mDown(this)"
onmouseup="mUp(this)"
style="background-color:#D94A38;width:90px;height:20px;padding:40px;"
>
Click Me
</div>
<script>
function mDown(obj) {
obj.style.backgroundColor = "#1ec5e5";
obj.innerHTML = "Release Me";
}
function mUp(obj) {
obj.style.backgroundColor = "#D94A38";
obj.innerHTML = "Thank You";
}
</script>
</body>
</html>
در جاوا اسکریپت متدهای مختلف دیگری نیز تعریف شده است و می‌توانید از آن‌ها استفاده کنید.
شما می‌توانید به جای تعریف متدهای مختلف در داخل المان html، با استفاده از addEventListener متدهای مورد نظر را فراخوانی کنید.
برای اینکار تنها کافیست تا متد مورد نظر را در پارامتر اولی این متد بنویسید و در ورودی دوم آن، تابع مورد نظرتان که قصد اجرای آن را دارید.
element.addEventListener(event, function, useCapture);
مثال‌هایی از این متد:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p>
This example uses the addEventListener() method to add many events on the
same button.
</p>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction() {
document.getElementById("demo").innerHTML += "Moused over!<br>";
}
function mySecondFunction() {
document.getElementById("demo").innerHTML += "Clicked!<br>";
}
function myThirdFunction() {
document.getElementById("demo").innerHTML += "Moused out!<br>";
}
</script>
</body>
</html>
بحث بعدی در استفاده از جاوا اسکریپت در html، ساختار فرزند و والد بین المان ها می‌باشد. بدین معنا که شما فرضا قصد دارید تا به المان های داخلی یک المان دسترسی داشته باشید، برای اینکار چه باید کرد؟
برای جواب به این سوال باید به ساختار المان ها توجه کرد. به المان های داخلی یک المان، فرزندان آن المان می‌گویند و المان مورد نظر نقش والد را خواهد داشت. در صورتی که المان والد، خود نیز فرزند المان دیگر باشد، المانی که به عنوان والد، والد المان های اولیه می‌باشد، نقش جد و یا (پدربزرگ یا مادربزرگ) المان‌های فرزند اولیه را خواهد داشت. به کد و تصویر زیر توجه کنید:
در این مثال، المان های div و p فرزندان body می‌باشند و h1 فرزند div است. در این حالت body نقش جد (پدربزرگ یا مادربزرگ) را برای h1 خواهد داشت. علاوه بر مفهوم فرزند و والد و جد، مفهوم دیگری به نام siblings و یا برادر خواهری نیز وجود دارد.
این مفهوم در رابطه با المان هایی برقرار است که در یک نقش در رابطه با المان دیگر می‌باشند. مثلا در کد زیر div و p هر دو یک والد به نام body دارند، پس این دو المان با یکدیگر رابطه برادر خواهری و یا همان siblings خواهند داشت. شما هم می‌توانید تمامی برادر خواهر ها را با siblings بگیرید و هم با sibling تنها یک برادر یا خواهر را بگیرید.
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<div>
<h1>
DOM Lesson one
</h1>
</div>
<p>
Hello world!
</p>
</body>
</html>
برای رسیدن به فرزند، والد و یا خواهر برادر در آموزش JavaScript متدهای مشخصی تعریف شده است. متدها را با کدی که مثال زدم بررسی می‌کنیم. شما می‌توانید یک فرزند خاصی را انتخاب کنید و یا با متد مشخص اولین یا آخرین فرزند از یک والد را انتخاب کنید. در مثال زیر، خط اول مقدار html المان html با آیدی demo را به شما می‌دهد. خط بعدی مقدار اولین فرزند المان پدر آن (المان با آیدی demo) را به شما می‌دهد. خط آخر نیز مشابه خط بالای خود می‌باشد با این تفاوت که در این حالت شما می‌توانید به جای فرزند اول، فرزند دوم و یا سایر فرزندها را انتخاب کنید.
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<div>
<h1>
DOM Lesson one
</h1>
</div>
<p>
Hello world!
</p>
</body>
<script>
var myTitle = document.getElementById("demo").innerHTML;
var myTitle = document.getElementById("demo").firstChild.nodeValue;
var myTitle = document.getElementById("demo").childNodes[0].nodeValue;
</script>
</html>
همانطور که در مثال مشاهده کردید، برای گرفتن مقدار یک فزرند از nodeValue استفاده شده است. اگر شما قصد دارید تا نام تگ فرزند را دریافت کنید، از nodeName باید استفاده کنید. دقت کنید که nodeName در حالت های مختلف می‌توانید مقدارهای مختلفی بدهد:
- مقدار nodeName تنها قابل خواندن می‌باشد و قابل تغییر مقدار آن وجود ندارد.
- در صورتی که یک المان انتخاب شود، نام تگ آن را به شما می دهد.
- در صورتی که ویژگی انتخاب شود، نام ویژگی مورد نظر برگردانده می شود.
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
</body>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>
</html>
برای nodeValue نیز شرایط زیر حاکم می‌باشد:
- در صورت انتخاب یک المان مقدار آن null خواهد بود.
- در صورتی که المان مورد نظر متن داشته باشد، متن آن باز گردانده می‌شود.
- در صورتی که ویژگی باشد، مقدار ویژگی مورد نظر بازگردانده می‌شود.
خب تا به اینجا در رابطه با رابطه‌ی المان ها با یکدیگر و نحوه‌ی گرفتن آن را صحبت کردیم. اکنون علاوه بر این مورد، شما می‌توانید حتی یک المان html را با استفاده از دستور جاوا اسکریپت بسازید. در مثال زیر، در ابتدا یک المان از نوع p ساخته می‌شود. سپاس برای المان مورد نظر قصد داریم تا یک متن داشته باشیم، برای اینکار از دستور createTextNode استفاده می شود و سپس متن مورد نظر، به المان ساخته شده، اضافه می‌شود.
در واقع در اینجا سه دستور داشتیم:
- createElement که با استفاده از آن می‌توانید یک المان بسازید.
- createTextNode که با استفاده از آن یک متن می‌توانید ایجاد کنید. توجه کنید که برای اینکه این مورد اثر بذارد باید آن را بک المان اضافه کنید.
- دستور appendChild که با استفاده از آن می‌توانید متن یا المانی را به المان دیگر و یا به صفحه html اضافه کنید.
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
</body>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>
</html>
دستور appendChild نکته‌ای که دارد این می باشد که با استفاده از این دستور المان مورد نظر به عنوان آخرین فرزند المان اولیه اضافه می‌شود. برای اینکه المان مورد نظر را در جای مشخصی اضافه کنید، از دستور دیگری به نام insertBefore استفاده می شود. با استفاده از این دستور می‌توانید یک المان را در مکان مشخصی و قبل از المان دیگری قرار دهید.
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
</body>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>
</html>
همانطور که دستوری برای ساخت یک المان وجود دارد، دستور دیگری نیز برای حذف یک المان وجود دارد. این دستور remove() می‌باشد.
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
</body>
<script>
var elmnt = document.getElementById("p1");
elmnt.remove();
</script>
</html>
دستور دیگری نیز وجود دارد که با استفاده از آن می‌توانید فرزند خاصی از یک والد را حذف کنید. این دستور removeChild می‌باشد که در داخل این دستور، فرزند مورد نظر را قرار می دهید.
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
</body>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>
</html>
دستور بعدی در این رابطه، امکان جایگزینی یک المان با المان دیگر می‌باشد. برای اینکار از دستور replaceChild باید استفاده کنید که دو مقدار دریافت می‌کند. مقدار اول المان جدید و مقدار دوم المانی که جایگزین می‌شود می‌باشد.
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
parent.replaceChild(para, child);
</script>
</body>
</html>
در این سه مقاله در تلاش بودم تا شما با زبان برنامه نویسی جاوا اسکریپت و قابلیت های آن و استفاده از آن در HTML آشنا شوید، زبان برنامه نویسی جاوا اسکریپت قابلیت‌ها و پیچیدگی‌های بسیاری دارد که در زمانی که وارد کد نویسی و اجرای برنامه‌ها با استفاده از این زبان برسید، با این قابلیت‌ها و پیچیدگی های این زبان آشنا می‌شوید.
