Ջավասկրիպտ հիմունքներ 4

 Առաջադրանքներ

1.Պատրաստել մեկ div, որի մեջ պիտի լինի որևէ տեքստ։ Ջավասքրիփթով մշակել այնպես, որ div-ի վրա click անելիս փոխվի ներսի տեքստը։ Դառնա օրինակ «կտտցրած դիվ»

<p id="p1" onclick="changeText()">Hello World!</p>

function changeText() {

    document.getElementById("p1").innerHTML = "Text Changed";

}

2.Սարքել մի հատ անգույն div, եթե կտտացնում ենք այդ դիվի վրա, պիտի գույնը փոխվի ու դառնա դեղին

<p id="p1" onclick="colorText()">Hello World!</p>

function colorText() {

    document.getElementById("p1").style.color = "yellow";

}

3.Սարքել մի հատ դիվ, որը ունի որոշակի գույն, երբ մուկը պահում ենք վրան (hover), պիտի գույնը փոխվի, ստանա սահման, փոխի չափերը․ անել ջավասքրիփթի օգնությամբ

<p id="text" onmouseover="text()"onclick="textSize()">This is a paragraph.</p>

function text() {

    document.getElementById("text").style.color = "red";

    document.getElementById("text").style.fontSize = "20px";

}

4.Սարքել երկու դիվ, մեկի վրա կտտցնելիս պիտի երկրորդը մեծանա և փոխի իր գույնը, երկրորդ անգամ կտտցնելիս պիտի վերադառնա իր հին տեսքին։

<p id="p1">Hello World!</p>
<button id="p2" onclick="sizeText()">Change</button>

function sizeText() {
var element = document.getElementById("p1");
element.classList.toggle("mystyle");
}

<style>
.mystyle {
color: yellow;
font-size: 20px;
}
</style>