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)”<
