آموزش برنامه نویسی جاوااسکریپت-جلسه سی و سوم

DOM CSS

گاهی نیاز داریم style  یک تگ رو عوض کنیم .

<p id=”p2″>Hello World!</p>
<script>
document.getElementById(“p2”).style.color = “blue”;
document.getElementById(“p2″).style. fontFamily = ” Arial”;
document.getElementById(“p2″).style. fontSize = ” larger”;
</script>

در اینجا می توان با استفاده ازstyle  تغییرات زیادی را بر p اعمال کرد.نکته ای که در اینجا وجود دارد این هست که Cssهایی که با خط تیره نوشته می شوندمثل font-family ، خط تیره حذف می شود و به هم چسبیده نوشته می شوند منتهی حرف اول بخش دوم باحرف بزرگ نوشته می شود fontFamily.

پیشنهاد مطالعه: آموزش رایگان جاوااسکریپت

ساختن انیمشن

<style>
#container {
 width: 400px;
 height: 400px;
 position: relative;
 background: yellow;
}
#animate {
 width: 50px;
 height: 50px;
 position: absolute;
 background: red;
}
</style>
<p><button onclick=”myMove()”>Click Me</button></p>
<div id =”container”>
 <div id =”animate”>My animation will go here</div>
</div>
Script>>
function myMove() {
 let id = null;
 const elem = document.getElementById(“animate”);
 let pos = 0;
 clearInterval(id);
 id = setInterval(frame, 5);
 function frame() {
   if (pos == 350) {
     clearInterval(id);
   } else {
     pos++;
     elem.style.top = pos + ‘px’;
     elem.style.left = pos + ‘px’;
   }
 }
}
</script>

دراین مثال ما با کمک جاوااسکریپت یک مستطیل کوچک را داخل مستطیل بزرگ تر به حرکت در می آوریم . برای اینکار یک فانکشن تعریف میکنیم و مقدار مستطیل کوچک را در یک متغیر می ریزیم . موقعیت را در حالت شروع 0 تعریف میکنیم و از دوتابع  clearInterval و setInterval برای ادامه کار استفاده می کنیم. setInterva  یک تابع را فراخوانی میکند که توسط آن زمان بندی را برای حرکت شی انجام می دهد. اگر موقعیت شی برابر با 350 شد clearInterval کار تابع setinterval را پاک می کند و دوباره شی از اول حرکت میکند اگر برابر نبود به موقعیت اضافه می کند .

DOM Event

رویدادها در هر تگی استفاده می شوند و تعدادشان زیاد است. مثلا با کلیک کردن روی دکمه یک تغییراتی را اعمال کرد روی المان مد نظر

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

کلمه this به خود تک اشاره می کنه .

<h1 onclick=”changeText(this)”>Click on this text!</h1>
<script>
function changeText(id) {
 id.innerHTML = “Ooops!”;
}
</script>

وقتی this می نویسیم نیازی به نوشتن دوباره id نداریم .

onchange Event

رویداد onchange برای اینپوت هایی که ورودی می گیرند استفاده می شود. و بعد از اینکه ورودی را گرفت  تغییرات اعمال می شود.

<input type=”text” id=”fname” onchange=”upperCase()”>
<script>
Function uppercase(){
const x = document.getElementById(“fname”);
x.value = x.value.toUpperCase();
}

</script>
onmouseover and onmouseout Events

این دو رویداد را می توان روی یک تگ مثلا یک div نوشت و دو رویداد تعریف کرد که وقتی روی دیو موس را حرکت می دهیم یه اتفاقی بیوفته و زمانی که از دیو خارج شدیم یک رویداد دیگر فراخوانی بشه .

<div onmouseover=”mOver(this)” onmouseout=”mOut(this) “>
<script>
function mOver(obj) {
 obj.innerHTML = “Thank You”
}

function mOut(obj) {
 obj.innerHTML = “Mouse Over Me”
}
</script>
onmousedown, onmouseup

این دو رویداد زمانی استفاده می شود که کلیک کنیم و بعد بلافاصله بعد ازرها شدن کلیک رویداد دوم عمل می کند.

<div onmousedown=”mDown(this)” onmouseup=”mUp(this)”<