خانه / مقالات اموزشی / اموزش جاوا اسكريپت / تغيير ﺑﺮﭼﺴﺐ ﻫﺎﯼ ﺍﭺ ﺗﯽ ﺍﻡ ﺍﻝ در جاوا اسكريپت

تغيير ﺑﺮﭼﺴﺐ ﻫﺎﯼ ﺍﭺ ﺗﯽ ﺍﻡ ﺍﻝ در جاوا اسكريپت

ﺩﺭﺱ ﺳﻴﺰﺩﻫﻢ- ﺍﻳﺠﺎﺩ ﺗﻐﻴﻴﺮﺍﺕ ﺩﺭ ﺑﺮﭼﺴﺐ ﻫﺎﯼ ﺍﭺ ﺗﯽ ﺍﻡ ﺍﻝ ﻭ ﺧﺮﻭﺟﯽ ﺁﻧﻬﺎ

ﺩﺭ ﺩﺭﺱ ﭘﻴﺸﻴﻦ ﺑﻪ ﭼﮕﻮﻧﮕﯽ ﺍﺭﺗﺒﺎﻁ ﺑﻴﻦ ﺟﺎﻭﺍ ﺍﺳﮑﺮﻳﭙﺖ ﻭ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﭘﺮﺩﺍﺧﺘﻴﻢ. ﺩﺭ ﺍﻳﻦ ﺩﺭﺱ ﻣﯽ‌ﺧﻮﺍﻫﻴﻢ ﺑﻪ ﻗﺎﺑﻠﻴﺖ‌ﻫﺎﯼ ﺑﻴﺸﺘﺮﯼ ﺍﺯ ﺍﻳﻦ ﺍﺭﺗﺒﺎﻁ ﺍﺷﺎﺭﻩ ﮐﻨﻴﻢ.

ﺗﻮﻟﻴﺪ ﻣﺤﺘﻮﺍﯼ ﭘﻮﻳﺎ
ﺟﺎﻭﺍ ﺍﺳﮑﺮﻳﭙﺖ ﻣﯽ‌ﺗﻮﺍﻧﺪ ﻣﺤﺘﻮﺍﯼ ﭘﻮﻳﺎ ﺑﺮﺍﯼ ﺧﺮﻭﺟﯽ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﺑﮕﺬﺍﺭﺩ.

<!DOCTYPE html>

<html> <body>

<script>

document.write(Date());

</script>

</body>

</html>

ﻫﻤﺎﻧﻄﻮﺭ ﮐﻪ ﻣﯽ‌ﺑﻴﻨﻴﺪ «ﺯﻣﺎﻥ» ﮐﻪ ﻳﮏ ﻣﻘﺪﺍﺭ ﭘﻮﻳﺎ ﻣﯽ‌ﺑﺎﺷﺪ ﺩﺭ ﺧﺮﻭﺟﯽ ﻗﺮﺍﺭ ﺩﺍﺩﻩ ﺷﺪﻩ ﺍﺳﺖ.

ﺍﻳﺠﺎﺩ ﺗﻐﻴﻴﺮﺍﺕ ﺩﺭ ﻣﺤﺘﻮﺍﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ
ﺍﺭﺗﺒﺎﻁ ﺟﺎﻭﺍ ﺍﺳﮑﺮﻳﭙﺖ ﺑﺎ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﺗﺎ ﺍﻧﺪﺍﺯﻩ‌ﺍﯼ ﺍﺳﺖ ﮐﻪ ﺟﺎﻭﺍ ﺍﺳﮑﺮﻳﭙﺖ ﺣﺘﯽ ﻣﯽ‌ﺗﻮﺍﻧﺪ ﻣﺤﺘﻮﺍﯼ ﺁﻧﻬﺎ ﺭﺍ ﺗﻐﻴﻴﺮ ﺩﺍﺩﻩ ﻭ ﻳﺎ ﻣﻘﺪﺍﺭﯼ ﺩﺭ ﺧﺮﻭﺟﻴﺸﺎﻥ ﻗﺮﺍﺭ ﺩﻫﺪ. ﭘﻴﺶ ﺍﺯ ﺍﻳﻦ ﻫﻢ ﮔﻔﺘﻪ ﺷﺪ ﮐﻪ ﺳﺎﺩﻩ‌ﺗﺮﻳﻦ ﺭﺍﻩ ﺩﺭ ﺗﻐﻴﻴﺮ ﻣﺤﺘﻮﺍﯼ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﻭﻳﮋﮔﯽ «innerHTML» ﺍﺳﺖ.

<!DOCTYPE html>

<html> <body>

<p id=”p1″> ﺩﺭﻭﺩ ﺟﻬﺎﻥ </p>

<script>

document.getElementById(“p1″).innerHTML=” ﻣﺘﻦ ﺟﺎﻳﮕﺰﻳﻦ ﺷﺪﻩ “;

</script>

<p> ﭘﺎﺭﺍﮔﺮﺍﻑ ﺑﺎﻻ ﺗﻮﺳﻂ ﮐﺪﻫﺎﯼ ﺟﺎﻭﺍ ﺍﺳﮑﺮﻳﭙﺖ ﺗﻐﻴﻴﺮ ﻳﺎﻓﺘﻪ ﺍﺳﺖ </p>

</body> </html>

ﻧﻤﻮﻧﻪ ﺑﺎﻻ ﻳﮏ ﻧﻤﻮﻧﻪ ﺳﺎﺩﻩ ﺑﺮﺍﯼ ﻧﺸﺎﻥ ﺩﺍﺩﻥ ﭼﮕﻮﻧﮕﯽ ﺗﻐﻴﻴﺮ ﺧﺮﻭﺟﯽ ﻳﮏ ﺑﺮﭼﺴﺐ ﺩﺭ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﺗﻮﺳﻂ ﺟﺎﻭﺍ ﺍﺳﮑﺮﻳﭙﺖ ﺍﺳﺖ.

ﺩﺭ ﻧﻤﻮﻧﻪ ﺯﻳﺮ ﻣﺤﺘﻮﺍﯼ ﺑﺮﭼﺴﺐ <h1> ﺗﻐﻴﻴﺮ ﻣﯽ‌ﻳﺎﺑﺪ:

<!DOCTYPE html>

<html> <body>

<h1 id=”header”> ﻣﺘﻦ ﭘﻴﺸﻴﻦ </h1>

<script>

var element=document.getElementById(“header”);

element.innerHTML=” ﻣﺘﻦ ﺟﺎﻳﮕﺰﻳﻦ ﺷﺪﻩ “;

</script>

</body> </html>

ﺍﻳﺠﺎﺩ ﺗﻐﻴﻴﺮﺍﺕ ﺷﻴﻮﻩ ﺩﻫﯽ «ﺳﯽ ﺍﺱ ﺍﺱ» ﺩﺭ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ
DOM ﺍﻳﻦ ﺍﺟﺎﺯﻩ ﺭﺍ ﺑﻪ ﺟﺎﻭﺍ ﺍﺳﮑﺮﻳﭙﺖ ﻣﯽ‌ﺩﻫﺪ ﮐﻪ ﺗﻮﺳﻂ ﺁﻥ ﺷﻴﻮﻩ ﺩﻫﯽ ﺭﺍ ﺩﺭ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﺗﻐﻴﻴﺮ ﺩﻫﺪ. ﺑﻪ ﻧﻤﻮﻧﻪ ﺯﻳﺮ ﺗﻮﺟﻪ ﺑﻔﺮﻣﺎﻳﻴﺪ:

<html>

<body>

<p id=”p2”> ﺩﺭﻭﺩ ﺟﻬﺎﻥ </p>

<script>

document.getElementById(“p2″).style.color=”blue”;

</script>

<p> ﺩﺭﻭﺩ ﺟﻬﺎﻥ </p>

</body> </html>

ﻣﺘﻦ ﺍﺑﺘﺪﺍﻳﯽ ﺑﻪ ﺭﻧﮓ ﺁﺑﯽ ﻭ ﻣﺘﻦ ﺩﻭﻡ ﺑﻪ ﺭﻧﮓ ﻣﺸﮑﯽ ﺑﻪ ﻧﻤﺎﻳﺶ ﺩﺭ ﺧﻮﺍﻫﺪ ﺁﻣﺪ. ﺑﻪ ﺍﻳﻦ ﺗﺮﺗﻴﺐ ﻣﯽ‌ﺗﻮﺍﻥ ﺩﻳﮕﺮ ﻭﻳﮋﮔﯽ‌ﻫﺎﯼ ﺷﻴﻮﻩ ﺩﻫﯽ ﺭﺍ ﺗﻐﻴﻴﺮ ﺩﺍﺩ:

document.getElementById(“p2″).style.fontFamily=”Arial”;

document.getElementById(“p2″).style.fontSize=”larger”;

ﻭﺍﮐﻨﺶ ﺑﻪ ﺭﻭﻳﺪﺍﺩﻫﺎﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﺩﺭ ﺟﺎﻭﺍ ﺍﺳﮑﺮﻳﭙﺖ ﺗﻮﺳﻂ DOM
DOM ﺑﻪ ﺷﻤﺎ ﺍﻳﻦ ﺗﻮﺍﻧﺎﻳﯽ ﺭﺍ ﻣﯽ‌ﺩﻫﺪ ﮐﻪ ﺩﺭ ﻣﻘﺎﺑﻞ ﺭﻭﻳﺪﺍﺩ ﺍﺗﻔﺎﻗﯽ ﺩﺭ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﻭﺍﮐﻨﺸﯽ ﺭﺍ ﺗﻮﺳﻂ ﺟﺎﻭﺍ ﺍﺳﮑﺮﻳﭙﺖ ﻃﺮﺍﺣﯽ ﻭ ﭘﻴﺎﺩﻩ ﺳﺎﺯﯼ ﮐﻨﻴﺪ. ﺭﻭﻳﺪﺍﺩ‌ﻫﺎ ﺗﻮﺳﻂ ﻣﺮﻭﺭﮔﺮ ﺩﺭ ﺯﻣﺎﻥ ﺗﻐﻴﻴﺮ ﻳﺎ ﺍﻓﺘﺎﺩﻥ ﺍﺗﻔﺎﻗﯽ ﺑﺮﺍﯼ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﺭﺥ ﻣﯽ‌ﺩﻫﻨﺪ. ﺑﺮﺍﯼ ﻧﻤﻮﻧﻪ ﻭﻗﺘﯽ ﺑﺮﮔﻪ‌ﺍﯼ ﺑﺎﻻ ﻣﯽ‌ﺁﻳﺪ، ﻣﻮﺱ ﺑﺮ ﺭﻭﯼ ﺩﮐﻤﻪ‌ﺍﯼ ﻣﯽ‌ﺭﻭﺩ ﻭ ﻳﺎ ﺁﻥ ﺭﺍ ﻓﺸﺎﺭ ﻣﯽ‌ﺩﻫﺪ ﻳﮏ ﺭﻭﻳﺪﺍﺩ ﺍﺗﻔﺎﻕ ﻣﯽ‌ﺍﻓﺘﺪ. ﺩﺭ ﺯﻳﺮ ﭼﻨﺪ ﻧﻤﻮﻧﻪ ﺍﺯ ﺭﻭﻳﺪﺍﺩﻫﺎﻳﯽ ﮐﻪ ﺩﺭ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﺍﺗﻔﺎﻕ ﻣﯽ‌ﺍﻓﺘﻨﺪ ﺭﺍ ﻣﺸﺎﻫﺪﻩ ﻣﯽ‌ﮐﻨﻴﺪ:

ﻭﻗﺘﯽ ﺑﺮ ﺭﻭﯼ ﻋﻨﺼﺮﯼ ﺍﺯ ﺍﭺ ﺗﯽ ‌ﺍﻡ ‌ﺍﻝ ﮐﻠﻴﮏ ﻣﯽ‌ﺷﻮﺩ.
ﻭﻗﺘﯽ ﺑﺮﮔﻪ‌ﺍﯼ ﺑﺎﻻ ﻣﯽ‌ﺁﻳﺪ.
ﻭﻗﺘﯽ ﺗﺼﻮﻳﺮﯼ ﺩﺭ ﺻﻔﺤﻪ ﺑﺎﻻ ﻣﯽ‌ﺁﻳﺪ.
ﻭﻗﺘﯽ ﺩﮐﻤﻪ‌ﺍﯼ ﺑﺮ ﺭﻭﯼ ﺻﻔﺤﻪ ﮐﻠﻴﺪ ﻓﺸﺎﺭ ﺩﺍﺩﻩ ﻣﯽ‌ﺷﻮﺩ.
ﻫﻨﮕﺎﻣﯽ ﮐﻪ ﻳﮏ ﻓﺮﻡ ﺍﺭﺳﺎﻝ ﻣﯽ‌ﺷﻮﺩ.
ﺩﺭ ﺯﻣﺎﻥ ﺭﺥ ﺩﺍﺩﻥ ﻳﮏ ﺭﻭﻳﺪﺍﺩ، ﮐﺪﻫﺎﻳﯽ ﺍﺯ ﺟﺎﻭﺍ ﺍﺳﮑﺮﻳﭙﺖ ﻣﯽ‌ﺗﻮﺍﻧﻨﺪ ﺍﺟﺮﺍ ﺷﻮﻧﺪ ﻭ ﺍﻳﻦ ﺩﻗﻴﻘﺎ ﻗﺎﺑﻠﻴﺘﯽ ﺍﺳﺖ ﮐﻪ ﺍﺯ ﺗﻌﺎﻣﻞ ﺟﺎﻭﺍ ﺍﺳﮑﺮﻳﭙﺖ ﺑﺎ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﭘﺪﻳﺪ ﻣﯽ‌ﺁﻳﺪ. ﺩﺭ ﺧﺮﻭﺟﯽ ﮐﺪﻫﺎﯼ ﺯﻳﺮ ﻭﻗﺘﯽ ﺑﺮ ﺭﻭﯼ ﻣﺘﻦ ﮐﻠﻴﮏ ﺷﻮﺩ، ﻣﺘﻦ ﺗﻐﻴﻴﺮ ﻣﯽ‌ﮐﻨﺪ:

<!DOCTYPE html>

<html> <body>

<h1 onclick=”this.innerHTML=’ﻫﺎ ﻫﺎ!'”> ﺑﺮ ﺭﻭﯼ ﺍﻳﻦ ﻣﺘﻦ ﮐﻠﻴﮏ ﮐﻨﻴﺪ </h1>

</body> </html>

ﻫﻤﺎﻧﻄﻮﺭ ﮐﻪ ﺩﻳﺪﻳﺪ ﺑﺎ ﮐﻠﻴﮏ ﺑﺮ ﺭﻭﯼ ﻣﺘﻦ ﻓﻮﻕ، ﻣﺤﺘﻮﺍﯼ ﺁﻥ ﺗﻐﻴﻴﺮ ﮐﺮﺩﻩ ﻭ ﻣﺘﻦ ﺩﻳﮕﺮﯼ ﺑﺠﺎﯼ ﺁﻥ ﻧﻤﺎﻳﺶ ﺩﺍﺩﻩ ﻣﯽ‌ﺷﻮﺩ.

ﺍﺟﺎﺯﻩ ﺑﺪﻫﻴﺪ ﻫﻤﻴﻦ ﮐﺎﺭ ﺭﺍ ﺑﺎ ﻓﺮﺍﺧﻮﺍﻧﯽ ﺗﺎﺑﻊ ﺍﻧﺠﺎﻡ ﺩﻫﻴﻢ:

<!DOCTYPE html>

<html> <head> <script>

function changetext(id)

{ id.innerHTML=”ﻫﺎ ﻫﺎ!”; }

</script> </head>

<body>

<h1 onclick=”changetext(this)”> ﺑﺮ ﺭﻭﯼ ﺍﻳﻦ ﻣﺘﻦ ﮐﻠﻴﮏ ﮐﻨﻴﺪ </h1>

</body> </html>

ﻫﻤﺎﻧﻄﻮﺭ ﮐﻪ ﻣﯽ‌ﺑﻴﻨﻴﺪ ﺩﺭ ﺍﻳﻦ ﮐﺪ‌ﻫﺎ ﺍﺯ ﻭﻳﮋﮔﯽ‌ﻫﺎﯼ ﺭﻭﻳﺪﺍﺩﯼ ﺩﺭ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﺍﺳﺘﻔﺎﺩﻩ ﺷﺪﻩ ﺍﺳﺖ.

ﻓﻬﺮﺳﺖ ﺯﻳﺮ ﭼﻨﺪ ﻧﻤﻮﻧﻪ ﺍﺯ ﺭﻭﻳﺪﺍﺩﻫﺎﯼ ﺭﺥ ﺩﻫﻨﺪﻩ ﺩﺭ ﻣﺮﻭﺭﮔﺮ ﺭﺍ ﻧﻤﺎﻳﺶ ﻣﯽ‌ﺩﻫﺪ:

onclick // ﺩﺭ ﺯﻣﺎﻥ ﮐﻠﻴﮏ ﺑﺮ ﺭﻭﯼ ﻋﻨﺼﺮ ﺍﭺ ﺗﯽ ﺍﻡ ﺍﻝ
ondblclick // ﺩﺭ ﺯﻣﺎﻥ ﺩﻭ ﮐﻠﻴﮏ ﺑﺮ ﺭﻭﯼ ﻋﻨﺼﺮ
onmousedown // ﻭﻗﺘﯽ ﺩﮐﻤﻪ ﻣﻮﺱ ﺭﺍ ﺑﺮ ﺭﻭﯼ ﻋﻨﺼﺮﯼ ﻓﺸﺎﺭ ﻣﯽ‌ﺩﻫﻴﻢ.
onmousemove // ﺩﺭ ﺯﻣﺎﻥ ﺣﺮﮐﺖ ﻣﻮﺱ ﻭﻗﺘﯽ ﺑﺮ ﺭﻭﯼ ﻋﻨﺼﺮ ﻗﺮﺍﺭ ﺩﺍﺭﺩ.
onmouseover // ﻭﻗﺘﯽ ﻣﻮﺱ ﺭﺍ ﺑﺮ ﺭﻭﯼ ﻋﻨﺼﺮﯼ ﻣﯽ‌ﺑﺮﻳﻢ.
onmouseout // ﻭﻗﺘﯽ ﻣﻮﺱ ﺍﺯ ﺭﻭﯼ ﻋﻨﺼﺮﯼ ﺑﺮ ﺩﺍﺷﺘﻪ ﻣﯽ‌ﺷﻮﺩ.
onmouseup // ﻭﻗﺘﯽ ﺩﮐﻤﻪ ﻣﻮﺱ ﺑﺮ ﺭﻭﯼ ﻋﻨﺼﺮﯼ ﺭﻫﺎ ﻣﯽ‌ﺷﻮﺩ.
onkeydown // ﻭﻗﺘﯽ ﺩﺭ ﺣﺎﻝ ﻓﺸﺮﺩﻥ ﺩﮐﻤﻪ ﺻﻔﺤﻪ ﮐﻠﻴﺪ ﻫﺴﺘﻴﻢ.
onkeypress // ﻭﻗﺘﯽ ﺩﮐﻤﻪ ﺻﻔﺤﻪ ﮐﻠﻴﺪ ﻓﺸﺮﺩﻩ ﻣﯽ‌ﺷﻮﺩ.
onkeyup // ﻭﻗﺘﯽ ﺩﮐﻤﻪ ﻓﺸﺮﺩﻩ ﺷﺪﻩ ﺭﻫﺎ ﻣﯽ‌ﺷﻮﺩ.
onload // ﻭﻗﺘﯽ ﺑﺮﮔﻪ‌ﺍﯼ ﺑﺎﻻ ﻣﯽ‌ﺁﻳﺪ.
ﭘﻴﻮﻧﺪﯼ ﺍﺯ ﻓﻬﺮﺳﺖ ﮐﺎﻣﻞ ﺭﻭﻳﺪﺍﺩﻫﺎ ﺍﺯ ﺗﺎﺭﻧﻤﺎﯼ w3schools

ﺑﺮﺍﯼ ﻣﻨﺘﺴﺐ ﮐﺮﺩﻥ ﻳﮏ ﺭﻭﻳﺪﺍﺩ ﺑﻪ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﺑﺎﻳﺪ ﺍﺯ ﻭﻳﮋﮔﯽ‌ﻫﺎﯼ ﺁﻥ ﺭﻭﻳﺪﺍﺩ ﺍﺳﺘﻔﺎﺩﻩ ﮐﺮﺩ:

<!DOCTYPE html> <html> <body>

<button onclick=”displayDate()”>ﺩﮐﻤﻪ ﺭﺍ ﻓﺸﺎﺭ ﺩﻫﻴﺪ</button>

<script>

function displayDate()

{

document.getElementById(“demo”).innerHTML=Date();

} </script>

<p id=”demo”></p> </body> </html>

ﺩﺭ ﻧﻤﻮﻧﻪ ﺑﺎﻻ onclick ﻳﮏ ﺭﻭﻳﺪﺍﺩ ﺍﺳﺖ ﮐﻪ ﺑﺎ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﻭﻳﮋﮔﯽ ﺁﻥ (ﻣﻘﺪﺍﺭﯼ ﮐﻪ ﺩﺭ ﻣﻘﺎﺑﻞ ﺁﻥ ﻧﻮﺷﺘﻪ ﻣﯽ‌ﺷﻮﺩ) ﺗﺎﺑﻊ displayDate () ﻓﺮﺍﺧﻮﺍﻧﺪﻩ ﺷﺪﻩ ﻭ ﺍﺟﺮﺍ ﻣﯽ‌ﺷﻮﺩ.

ﺑﺮﺍﯼ ﺑﮑﺎﺭ ﺑﺮﺩﻥ ﺭﻭﻳﺪﺍﺩ‌ﻫﺎ ﺍﺯ ﻃﺮﻳﻖ DOM ﮐﺎﻓﻴﺴﺖ ﺭﻭﻳﺪﺍﺩ ﻣﻮﺭﺩ ﻧﻈﺮ ﺭﺍ ﺩﺭ ﺍﻧﺘﻬﺎﯼ ﻣﺘﺪ ﻣﻮﺭﺩ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ DOM ﻗﺮﺍﺭ ﺩﻫﻴﻢ:

<!DOCTYPE html>

<html>

<head> </head>

<body>

<button id=”myBtn”> ﺩﮐﻤﻪ ﺭﺍ ﻓﺸﺎﺭ ﺩﻫﻴﺪ </button>

<script>

document.getElementById(“myBtn”).onclick=function(){displayDate()};

function displayDate()

{

document.getElementById(“demo”).innerHTML=Date();

}

</script>

<p id=”demo”></p>

</body>

</html>

ﺧﺮﻭﺟﯽ ﻣﺠﻤﻮﻋﻪ ﮐﺪﻫﺎﯼ ﺑﺎﻻ ﻣﺎﻧﻨﺪ ﻧﻤﻮﻧﻪ ﭘﻴﺸﻴﻦ ﺍﺳﺖ ﺑﺎ ﺍﻳﻦ ﺗﻔﺎﻭﺕ ﮐﻪ ﺍﻳﻨﺠﺎ ﺍﺯ ﻣﺘﺪ getElementById ﺑﺮﺍﯼ ﺷﻨﺎﺳﺎﻳﯽ ﻭ ﺍﺟﺮﺍﯼ ﺗﺎﺑﻊ ﺩﺭ ﻣﺤﻞ ﻣﻮﺭﺩ ﻧﻈﺮ ﺍﺳﺘﻔﺎﺩﻩ ﺷﺪﻩ ﺍﺳﺖ.

ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺭﻭﻳﺪﺍﺩ onload
ﺍﻳﻦ ﺭﻭﻳﺪﺍﺩ ﺩﺭ ﺯﻣﺎﻥ ﺑﺎﻻ ﺁﻣﺪﻥ ﺑﺮﮔﻪ ﻓﻌﺎﻝ ﻣﯽ‌ﺷﻮﺩ ﻭ ﺩﺭ ﺻﻮﺭﺕ ﺍﺳﺘﻔﺎﺩﻩ ﻣﯽ‌ﺗﻮﺍﻥ ﻋﻤﻠﯽ ﺭﺍ ﺑﻪ ﺁﻥ ﻣﻨﺘﺴﺐ ﮐﺮﺩ:

<!DOCTYPE html>

<html>

<body onload=”checkCookies()”>

<script>

function checkCookies() {

if (navigator.cookieEnabled==true) {

alert(“ﮐﻮﮐﯽ ﻫﺎ ﺩﺭ ﻣﺮﻭﺭﮔﺮ ﺷﻤﺎ ﻓﻌﺎﻝ ﻫﺴﺘﻨﺪ”)

}

else {

alert(“ﮐﻮﮐﯽ ﻫﺎ ﺩﺭ ﻣﺮﻭﺭﮔﺮ ﺷﻤﺎ ﻓﻌﺎﻝ ﻧﻴﺴﺘﻨﺪ”)

}

}

</script>

</body>

</html>

ﺑﺎ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺍﻳﻦ ﺭﻭﻳﺪﺍﺩ ﻓﻌﺎﻝ ﻳﺎ ﻋﺪﻡ ﻓﻌﺎﻝ ﺑﻮﺩﻥ ﮐﻮﮐﯽ‌ﻫﺎﯼ ﻣﺮﻭﺭﮔﺮ ﺑﺮﺭﺳﯽ ﻣﯽ‌ﺷﻮﻧﺪ ﻭ ﭘﻴﻐﺎﻡ ﻣﻨﺎﺳﺐ ﺑﺮﺍﯼ ﺑﻴﻨﻨﺪﻩ ﺩﺍﺩﻩ ﻣﯽ‌ﺷﻮﻧﺪ. ﺑﺮﺍﯼ ﺑﺮﺭﺳﯽ ﻓﺎﻝ ﺑﻮﺩﻥ ﻳﺎ ﻧﺒﻮﺩﻥ ﮐﻮﮐﯽ‌ﻫﺎ ﺍﺯ ﺁﺑﺠﮑﺖ ﺩﻳﮕﺮﯼ (navigator. cookieEnabled) ﺩﺭ ﺍﻳﻦ ﻣﺠﻤﻮﻋﻪ ﮐﺪ‌ﻫﺎ ﺍﺳﺘﻔﺎﺩﻩ ﺷﺪﻩ ﺍﺳﺖ.

ﺭﻭﻳﺪﺍﺩﻫﺎﯼ onmouseover ﻭ onmouseout
ﺩﻭ ﺭﻭﻳﺪﺍﺩ ﺑﺎﻻ ﺑﻪ ﻣﺎ ﮐﻤﮏ ﻣﯽ‌ﮐﻨﻨﺪ ﺗﺎ ﺗﻐﻴﻴﺮﺍﺗﯽ ﺭﺍ ﺩﺭ ﺯﻣﺎﻥ ﺑﺮﺩﻥ ﻭ ﺑﺮﺩﺍﺷﺘﻦ ﻣﻮﺱ ﺍﺯ ﺭﻭﯼ ﻋﻨﺼﺮﯼ ﺑﺮ ﺭﻭﯼ ﺁﻥ ﺍﻧﺠﺎﻡ ﺩﻫﻴﻢ. ﺩﺭ ﻧﻤﻮﻧﻪ ﺯﻳﺮ ﺧﻮﺍﻫﻴﺪ ﺩﻳﺪ ﮐﻪ ﭼﮕﻮﻧﻪ ﺑﺎ ﺑﺮﺩﻥ ﻭ ﺑﺮﺩﺍﺷﺘﻦ ﻣﻮﺱ ﺍﺯ ﺭﻭﯼ ﻋﻨﺼﺮ div ﭼﮕﻮﻧﻪ ﺍﻳﻦ ﺭﻭﻳﺪﺍﺩ‌ﻫﺎ ﻣﺘﻦ ﺩﺍﺧﻞ ﻋﻨﺼﺮ ﻣﻮﺭﺩ ﻧﻈﺮ ﺭﺍ ﺗﻐﻴﻴﺮ ﺧﻮﺍﻫﻨﺪ ﺩﺍﺩ:

<!DOCTYPE html>

<html>

<body>

<div onmouseover = “mOver(this)” onmouseout = “mOut(this)” style = “background-color:#D94A38;width:120px;height:20px;padding:40px;” >

ﻣﻮﺱ ﺭﺍ ﺍﻳﻨﺠﺎ ﺑﻴﺎﻭﺭﻳﺪ

</div>

<script>

function mOver(obj) {

obj.innerHTML=”ﺣﺎﻻ ﻣﻮﺱ ﺭﺍ ﺑﺮﺩﺍﺭ”

}

function mOut(obj) {

obj.innerHTML=”Mouse Over Me”

}

</script>

</body>

</html>

ﺍﺯ ﺍﻳﻦ ﻗﺎﺑﻠﻴﺖ ﺑﺮﺍﯼ ﺯﻣﺎﻥ‌ﻫﺎﻳﯽ ﮐﻪ ﻣﯽ‌ﺧﻮﺍﻫﻴﺪ ﺗﻮﺟﻪ ﺑﺎﺯﺩﻳﺪ ﮐﻨﻨﺪﻩ‌ﻫﺎﯼ ﺗﺎﺭﻧﻤﺎﯼ ﺧﻮﺩ ﺭﺍ ﺑﻪ ﻣﻄﻠﺐ ﻭﻳﮋﻩ‌ﺍﯼ ﺟﻠﺐ ﮐﻨﻴﺪ ﻣﯽ‌ﺗﻮﺍﻧﻴﺪ ﺍﺳﺘﻔﺎﺩﻩ ﮐﻨﻴﺪ.

ﻧﻤﻮﻧﻪ‌ﻫﺎﯼ ﺑﺎﻻ ﺗﻨﻬﺎ ﺫﺭﻩ‌ﺍﯼ ﺍﺯ ﻗﺎﺑﻠﻴﺖ ﺟﺎﻭﺍ ﺍﺳﮑﺮﻳﭙﺖ ﻭ ﺭﺍ ﺩﺭ ﺗﻌﺎﻣﻞ ﺑﺎ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﺑﺮﺍﯼ ﺳﺎﺧﺘﻦ ﺗﺎﺭﻧﻤﺎﻫﺎﻳﯽ ﺑﺎ ﻗﺎﺑﻠﻴﺖ ﭘﻮﻳﺎ ﺑﻮﺩﻥ ﺭﺍ ﺑﻪ ﻧﻤﺎﻳﺶ ﻣﯽ‌ﮔﺬﺍﺭﻧﺪ. ﺷﻤﺎ ﻣﯽ‌ﺗﻮﺍﻧﻴﺪ ﺑﻨﺎ ﺑﻪ ﻧﻴﺎﺯ ﺧﻮﺩ ﺑﻪ ﺳﺮﺍﻍ ﺩﻳﮕﺮ ﺭﻭﻳﺪﺍﺩ‌ﻫﺎ ﺭﻓﺘﻪ ﻭ ﻋﻤﻞ ﻣﻮﺭﺩ ﻧﻈﺮ ﺧﻮﺩ ﺭﺍ ﭘﻴﺎﺩﻩ ﺳﺎﺯﯼ ﮐﻨﻴﺪ. ﺗﻨﻬﺎ ﻧﮑﺘﻪ ﺍﻳﻨﺴﺖ ﮐﻪ ﺑﺎﻳﺪ ﺍﺯ ﺍﻳﻦ ﻗﺎﺑﻠﻴﺖ‌ﻫﺎ ﺩﺭ ﻣﮑﺎﻥ ﻣﻨﺎﺳﺐ ﺑﻬﺮﻩ ﺑﺒﺮﻳﺪ ﻭ ﺑﺎ ﺍﺳﺘﻔﺎﺩﻩ ﻣﮑﺮﺭ ﻭ ﺑﻴﻬﻮﺩﻩ ﮐﺎﺭﺑﺮﺍﻥ ﺗﺎﺭﻧﻤﺎﯼ ﺧﻮﺩ ﺭﺍ ﺧﺴﺘﻪ ﻧﻔﺮﻣﺎﻳﻴﺪ.

ﺍﺟﺎﺯﻩ ﺑﺪﻫﻴﺪ ﺑﺎ ﻳﮏ ﻧﻤﻮﻧﻪ ﺩﻳﮕﺮ ﺍﻳﻦ ﺩﺭﺱ ﺭﺍ ﻫﻢ ﭘﺎﻳﺎﻥ ﺑﺒﺨﺸﻴﻢ.

ﻓﺮﺽ ﮐﻨﻴﺪ ﻣﯽ‌ﺧﻮﺍﻫﻴﺪ ﺍﻳﻦ ﺗﻮﺍﻧﺎﻳﯽ ﺭﺍ ﺑﻪ ﺗﺎﺭﻧﻤﺎ ﺑﺪﻫﻴﺪ ﮐﻪ ﺑﺎ ﻓﺸﺮﺩﻥ ﺩﮐﻤﻪ‌ﺍﯼ ﻣﺘﻨﯽ ﺍﺯ ﺭﻭﯼ ﺁﻥ ﻧﺎﭘﺪﻳﺪ ﮔﺮﺩﺩ. ﺩﺭ ﺍﻳﻨﺼﻮﺭﺕ ﻣﯽ‌ﺗﻮﺍﻧﻴﺪ ﺑﻪ ﺷﻴﻮﻩ ﺯﻳﺮ ﻋﻤﻞ ﮐﻨﻴﺪ:

<!DOCTYPE html>

<html>

<body>

<p id=”p1″>

ﺍﺯ ﺍﻳﻦ ﻗﺎﺑﻠﻴﺖ ﻫﺎ ﺩﺭ ﻣﮑﺎﻥ ﻣﻨﺎﺳﺐ ﺑﻬﺮﻩ ﺑﺒﺮﻳﺪ ﻭ ﺑﺎ ﺍﺳﺘﻔﺎﺩﻩ ﻣﮑﺮﺭ ﻭ ﺑﻴﻬﻮﺩﻩ ﮐﺎﺭﺑﺮﺍﻥ ﺗﺎﺭﻧﻤﺎﯼ ﺧﻮﺩ ﺭﺍ ﺧﺴﺘﻪ ﻧﻔﺮﻣﺎﻳﻴﺪ.

</p>

<input type=”button” value=”ﭘﻨﻬﺎﻥ ﮐﻦ” onclick=”document.getElementById(‘p1’).style.visibility=’hidden'”>

<input type=”button” value=”ﻧﻤﺎﻳﺶ ﺑﺪﻩ” onclick=”document.getElementById(‘p1’).style.visibility=’visible'”>

</body> </html>

ﻫﻤﺎﻧﻄﻮﺭ ﮐﻪ ﻣﺸﺎﻫﺪﻩ ﻣﯽ‌ﮐﻨﻴﺪ ﻣﺘﻦ ﻧﻮﺷﺘﻪ ﺷﺪﻩ ﺗﻮﺳﻂ ﺩﻭ ﺩﮐﻤﻪ «ﭘﻨﻬﺎﻥ ﮐﻦ» ﻭ «ﻧﻤﺎﻳﺶ ﺑﺪﻩ» ﻧﺎﭘﺪﻳﺪ ﻭ ﺑﺎﺯ ﭘﺪﻳﺪﺍﺭ ﻣﯽ‌ﺷﻮﺩ.

ﺷﻤﺎ ﻣﯽ‌ﺗﻮﺍﻧﻴﺪ ﺍﻳﻦ ﻋﻤﻞ (ﭘﻨﻬﺎﻥ ﮐﺮﺩﻥ ﻣﺘﻦ) ﺭﺍ ﺗﻮﺳﻂ ﺭﻭﻳﺪﺍﺩ ﺩﻳﮕﺮﯼ ﻣﺎﻧﻨﺪ ﺁﻭﺭﺩﻥ ﻣﻮﺱ ﻳﺎ ﺑﺮﺩﺍﺷﺘﻦ ﺁﻥ ﻭ ﻳﺎ ﻫﺮ ﺭﻭﻳﺪﺍﺩﯼ ﮐﻪ ﺑﻬﺘﺮ ﻫﺪﻑ ﺷﻤﺎ ﺭﺍ ﺗﺎﻣﻴﻦ ﻣﯽ‌ﮐﻨﺪ ﺑﮑﺎﺭ ﺑﮕﻴﺮﻳﺪ.

منبع:درسنامه

اموزش طراحی سایت

آموزش طراحی سایت

اموزش طراحی وب سایت

آموزش طراحی سایت

درباره آموزشگاه نوین آی تی

همچنین ببینید

نحوه نام گذاری متغییر های جاوا

مطلب جدیدی که در این آموزش قرار است فرا بگیریم نحوه صحیح نامگذاری متغیر ها ...

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

علی طاهری آموزشگاه طراحی سایت نوین آی تی 021-88283800 info(@)novin-it.net