DOM ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ ﯼﺎﻫﺩﺍﺪﯾﻭﺭ

فهرست مطالب

HTML DOM ﯼﺎﻫﺩﺍﺪﯾﻭﺭ ﻪﺑ ﺎﺗ ﺪﻫﺩ ﯽﻣ ﻩﺯﺎﺟﺍ ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ ﻪﺑ HTML ﺪﻫﺩ ﻥﺎﺸﻧ ﺶﻨﮐﺍﻭ:

Mouse Over Me

Click Me

ﺎﻫﺩﺍﺪﯾﻭﺭ ﻪﺑ ﺶﻨﮐﺍﻭ

.ﺪﻨﮐ ﯽﻣ ﮏﯿﻠﮐ HTML ﺮﺼﻨﻋ ﮏﯾ ﯼﻭﺭ ﺮﺑﺭﺎﮐ ﻪﮐ ﯽﻧﺎﻣﺯ ﺪﻨﻧﺎﻣ ،ﺩﺮﮐ ﺍﺮﺟﺍ ﺪﻫﺩ ﯽﻣ ﺥﺭ ﺩﺍﺪﯾﻭﺭ ﮏﯾ ﻪﮐ ﯽ

:ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ HTML ﺩﺍﺪﯾﻭﺭ ﯽﮔﮋﯾﻭ ﻪﺑ ﺍﺭ ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ ﺪﮐ ،ﺪﻨﮐ ﯽﻣ ﮏﯿﻠﮐ ﺮﺼﻨﻋ ﮏﯾ ﯼﻭﺭ ﺮﺑﺭﺎﮐ ﻪﮐ

onclick=JavaScript

:HTML ﯼﺎﻫﺩﺍﺪﯾﻭﺭ ﺯﺍ ﯽﯾﺎﻫ ﻪﻧﻮﻤﻧ

ﺪﻨﮐ ﯽﻣ ﮏﯿﻠﮐ ﺱﻭﺎﻣ ﯼﻭﺭ ﺮﺑﺭﺎﮐ ﯽﺘﻗﻭ
ﺩﻮﺷ ﯽﻣ ﯼﺮﯿﮔﺭﺎﺑ ﺏﻭ ﻪﺤﻔﺻ ﮏﯾ ﻪﮐ ﯽﻣﺎﮕﻨﻫ
ﺖﺳﺍ ﻩﺪﺷ ﯼﺭﺍﺬﮔﺭﺎﺑ ﺮﯾﻮﺼﺗ ﮏﯾ ﻪﮐ ﯽﻣﺎﮕﻨﻫ
ﺪﻨﮐ ﯽﻣ ﺖﮐﺮﺣ ﺮﺼﻨﻋ ﮏﯾ ﯼﻭﺭ ﺱﻭﺎﻣ ﯽﺘﻗﻭ
ﺪﻨﮐ ﯽﻣ ﺮﯿﯿﻐﺗ ﯼﺩﻭﺭﻭ ﺪﻠﯿﻓ ﮏﯾ ﯽﺘﻗﻭ
ﺩﻮﺷ ﯽﻣ ﻝﺎﺳﺭﺍ HTML ﻡﺮﻓ ﮏﯾ ﻪﮐ ﯽﻣﺎﮕﻨﻫ
ﺪﻨﮐ ﯽﻣ ﺵﺯﺍﻮﻧ ﺍﺭ ﯼﺪﯿﻠﮐ ﺮﺑﺭﺎﮐ ﻪﮐ ﯽﻧﺎﻣﺯ

:ﺪﻨﮐﯽﻣ ﺮﯿﯿﻐﺗ ﺪﻨﮐﯽﻣ ﮏﯿﻠﮐ ﻥﺁ ﯼﻭﺭ ﺮﺑﺭﺎﮐ ﻪﮐ ﯽﻣﺎﮕﻨﻫ

`ﻝﺎﺜﻣ`

<!DOCTYPE html>
<html>
<body>

<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>

</body>
</html>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML Events</h2>
<h2 onclick="this.innerHTML='Ooops!'">Click on this text!</h2>

</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>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML Events</h2>
<h2 onclick="changeText(this)">Click on this text!</h2>

<script>
function changeText(id) {
  id.innerHTML = "Ooops!";
}
</script>

</body>
</html>

`HTML ﺩﺍﺪﯾﻭﺭ ﯼﺎﻫ ﯽﮔﮋﯾﻭ`

.ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺩﺍﺪﯾﻭﺭ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﺯﺍ ﺪﯿﻧﺍﻮﺗ ﯽﻣ HTML ﺮﺻﺎﻨﻋ ﻪﺑ ﺎﻫﺩﺍﺪﯾﻭﺭ ﺹﺎﺼﺘﺧﺍ ﯼﺍﺮﺑ

`ﻝﺎﺜﻣ`

:ﺪﯿﻫﺩ ﺹﺎﺼﺘﺧﺍ ﻪﻤﮐﺩ ﺮﺼﻨﻋ ﻪﺑ ﺍﺭ onclick ﺩﺍﺪﯾﻭﺭ ﮏﯾ

<button onclick="displayDate()">Try it</button>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML Events</h2>
<p>Click the button to display the date.</p>

<button onclick="displayDate()">The time is?</button>

<script>
function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

<p id="demo"></p>

</body>
</html>

.ﺪﺷ ﺪﻫﺍﻮﺧ ﺍﺮﺟﺍ displayDate ﻡﺎﻧ ﺎﺑ ﯽﻌﺑﺎﺗ ،ﻻﺎﺑ ﻝﺎﺜﻣ ﺭﺩ

`HTML DOM ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ ﺎﻫﺩﺍﺪﯾﻭﺭ ﺹﺎﺼﺘﺧﺍ`

HTML DOM ﺮﺻﺎﻨﻋ ﻪﺑ ﺍﺭ ﺎﻫﺩﺍﺪﯾﻭﺭ ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ ﺪﻫﺩ ﯽﻣ ﻥﺎﮑﻣﺍ ﺎﻤﺷ ﻪﺑ HTML ﺪﯿﻫ

`ﻝﺎﺜﻣ`

:ﺪﯿﻫﺩ ﺹﺎﺼﺘﺧﺍ ﻪﻤﮐﺩ ﺮﺼﻨﻋ ﻪﺑ ﺍﺭ onclick ﺩﺍﺪﯾﻭﺭ ﮏﯾ

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML Events</h2>
<p>Click "Try it" to execute the displayDate() function.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
document.getElementById("myBtn").onclick = displayDate;

function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
</html>

ﻪﺑ displayDate ﻡﺎﻧ ﺎﺑ ﯽﻌﺑﺎﺗ ،ﻻﺎﺑ ﻝﺎﺜﻣ ﺭﺩ

ﺪﺷ ﺪﻫﺍﻮﺧ ﺍﺮﺟﺍ ﻊﺑﺎﺗ

`onunload ﻭ onload ﯼﺎﻫﺩﺍﺪﯾﻭﺭ`

.ﺪﻧﻮﺷ ﯽﻣ ﻝﺎﻌﻓ ﻪﺤﻔﺻ ﺯﺍ ﺮﺑﺭﺎﮐ ﺝﻭﺮﺧ ﺎﯾ ﺩﻭﺭﻭ ﻡﺎﮕﻨﻫ onunload

.ﺩﺮﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺕﺎﻋﻼﻃﺍ ﺱﺎﺳﺍ ﺮﺑ ﺏﻭ ﻪﺤﻔﺻ ﺐﺳﺎﻨﻣ ﻪﺨﺴﻧ ﯼﺮﯿﮔﺭﺎﺑ ﻭ ،ﺮﮔﺭﻭﺮﻣ ﻪﺨﺴﻧ ﻭ ﻩﺪﻨﻨﮐﺪﯾﺩﺯﺎﺑ ﺮ

.ﺩﺮﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺎﻫ ﯽﮐﻮﮐ ﺎﺑ ﻪﻠﺑﺎﻘﻣ ﯼﺍﺮﺑ ﻥﺍﻮﺗ ﯽﻣ ﺍﺭ onunload

`ﻝﺎﺜﻣ`

<body onload="checkCookies()">

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body onload="checkCookies()">

<h2>JavaScript HTML Events</h2>

<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 ﺩﺍﺪﯾﻭﺭ`

.ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﯼﺩﻭﺭﻭ ﯼﺎﻫﺪﻠﯿﻓ ﯽﺠﻨﺳﺭﺎﺒﺘﻋﺍ ﺎﺑ ﺐﯿﮐﺮﺗ ﺭﺩ ﺐﻠﻏﺍ o

upperCase() .ﺖﺳﺍ ﻩﺪﺷ ﻩﺩﺭﻭﺁ onchange ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﻩﻮﺤﻧ

`ﻝﺎﺜﻣ`

<input type="text" id="fname"
onchange="upperCase()">

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML Events</h2>
Enter your name: <input type="text" id="fname" onchange="upperCase()">
<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>

<script>
function upperCase() {
  const x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
}
</script>

</body>
</html>

`onmouseout ﻭ onmouseover ﯼﺎﻫﺩﺍﺪﯾﻭﺭ`

.ﺩﺮﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺪﻨﮐ ﯽﻣ ﺱﻭﺎﻣ ﺮﺑﺭﺎﮐ ﻪﮐ ﯽﻧﺎﻣﺯ ﺭﺩ ﻊﺑﺎﺗ ﮏﯾ ﻥﺩﺮﮐ ﻝﺎﻌﻓ ﯼﺍﺮﺑ ﻥﺍﻮﺗ ﯽﻣ ﺍﺭ


Mouse Over Me



                                                           → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!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> 
                                           onclick ﻭ onmousedown، onmouseup ﯼﺎﻫﺩﺍﺪﯾﻭﺭ
ﺪﻨﺘﺴﻫ ﻒﻟﺍ ﯼﺎﻫ ﺖﻤﺴﻗ ﻪﻤﻫ onclick ﻭ 
Click Me



 
                                                           → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!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> 
                                                                      ﺮﺘﺸﯿﺑ ﯼﺎﻫ ﻪﻧﻮﻤﻧ
onmousedown ﻭ onmouseup
<!DOCTYPE html>
<html>
<head>
<script>
function lighton() {
  document.getElementById('myimage').src = "bulbon.gif";
}
function lightoff() {
  document.getElementById('myimage').src = "bulboff.gif";
}
</script>
</head>

<body>

<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="bulboff.gif" width="100" height="180" />

<p>Click mouse and hold down!</p>

</body>
</html>
                            .ﺪﯿﻫﺩ ﺮﯿﯿﻐﺗ ﺍﺭ ﺮﯾﻮﺼﺗ ،ﺩﺭﺍﺩ ﯽﻣ ﻪﮕﻧ ﺍﺭ ﺱﻭﺎﻣ ﻪﻤﮐﺩ ﺮﺑﺭﺎﮐ ﯽﺘﻗﻭ
                                                                      ﯼﺭﺍﺬﮔﺭﺎﺑ ﻝﺎﺣ ﺭﺩ
<!DOCTYPE html>
<html>
<head>

<script>
function mymessage() {
  alert("This message was triggered from the onload event");
}
</script>
</head>

<body onload="mymessage()">
</body>

</html>
                            .ﺪﯿﻫﺩ ﺶﯾﺎﻤﻧ ﺭﺍﺪﺸﻫ ﻪﺒﻌﺟ ﮏﯾ ﺪﺷ ﻡﺎﻤﺗ ﯼﺭﺍﺬﮔﺭﺎﺑ ﻪﺤﻔﺻ ﻪﮐ ﯽﻣﺎﮕﻨﻫ
                                                                               ﺰﮐﺮﻤﺘﻣ
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x) {
  x.style.background = "yellow";
}
</script>
</head>
<body>

Enter your name: <input type="text" onfocus="myFunction(this)">

<p>When the input field gets focus, a function is triggered which changes the background-color.</p>

</body>
</html>
                    .ﺪﯿﻫﺩ ﺮﯿﯿﻐﺗ ﺍﺭ ﻪﻨﯿﻣﺯﺲﭘ ﮓﻧﺭ ،ﺩﻮﺷﯽﻣ ﺱﻮﮐﻮﻓ ﯼﺩﻭﺭﻭ ﺪﻠﯿﻓ ﯽﺘﻗﻭ
                                                                       ﺱﻭﺎﻣ ﯼﺎﻫﺩﺍﺪﯾﻭﺭ
<!DOCTYPE html>
<html>
<body>

<h1 onmouseover="style.color='red'"
onmouseout="style.color='black'">
Mouse over this text</h1>

</body>
</html>
                    .ﺪﯿﻫﺩ ﺮﯿﯿﻐﺗ ﺍﺭ ﻥﺁ ﮓﻧﺭ ،ﺪﻨﮐ ﯽﻣ ﺖﮐﺮﺣ ﺮﺼﻨﻋ ﮏﯾ ﯼﻭﺭ ﺎﻤﻧ ﻥﺎﮑﻣ ﻪﮐ ﯽﻣﺎﮕﻨﻫ
                                                              HTML DOM ﺩﺍﺪﯾﻭﺭ ﯽﺷ ﻊﺟﺮﻣ
.ﺪﯿﻨﮐ ﻩﺎﮕﻧ ﺎﻣ HTML DOM ﺩﺍﺪﯾﻭﺭ ءﯽﺷ ﻞﻣﺎﮐ ﻊﺟﺮﻣ ﻪﺑ ،HTML DOM ﯼﺎﻫﺩﺍﺪﯾﻭﺭ ﻪﻤﻫ ﺯﺍ ﯽﺘﺳﺮﻬﻓ ﯼﺍﺮﺑ

  
    
      ← صفحه قبلی
    
    
      صفحه بعد →