Greinar

JavaScript æfingar með lausn fyrir Basic JavaScript þjálfunarnámskeið

Listi yfir Java script æfingar með lausn fyrir Java Basic þjálfunarnámskeið.

Númer æfingarinnar er til marks um erfiðleikastigið, allt frá því einfaldasta upp í það flóknasta. Ef þú hefur einhverjar athugasemdir, spurningar eða ábendingar: skrifaðu okkur á info @bloginnovazione.it

Æfing 1: Skrifaðu html síðu sem inniheldur málsgrein með setningunni:

Allt sem getur farið úrskeiðis mun fara úrskeiðis

með javascript kveikir á sumum atburðum:

– onclick : stilltu feitletrað fyrir textann og gult fyrir bakgrunninn
– onmouseover : stillt undirstrikað fyrir textann og appelsínugult fyrir bakgrunninn
– onmouseout : stilltu 16px leturgerð fyrir textann og ljósblátt fyrir bakgrunninn

<!DOCTYPE html>
<html lang="en">


<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
  function onMouseClick() {
     document.getElementById("parag").style.fontWeight = "bold";
     document.getElementById("parag").style.backgroundColor = "yellow";
   }
   function onMouseOverEvent() {
     document.getElementById("parag").style.textDecoration = "underline";
     document.getElementById("parag").style.backgroundColor = "orange";
   }
   function onMouseOutEvent() {
     document.getElementById("parag").style.fontSize = "16px";
     document.getElementById("parag").style.backgroundColor = "lightblue";
   }
    </script>
</head>

<body>
    <p id="parag" >

Æfing 2: Að skrifa html síðu með fjórum þáttum raðað á þrjár línur í miðju síðunnar (lárétt)

– í fyrstu röð setja tveir inn texti hlið við hlið og með bili á milli
– í annarri línu hnappur með „+“ stjórnandanum, þegar þú smellir á hnappinn (onclick event) þarftu að lesa tvo innsláttarreit fyrstu línunnar, bæta þeim við og skrifa niðurstöðuna í málsgrein þriðju línunnar
– í þriðju línu málsgrein

skrifaðu js kóðann í ytri skrá til að flytja inn í HTML í gegnum src til að setja inn í hlutann

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
input {
    margin: 20px;
    margin-bottom: 30px;
}
.box-1 {
    display: flex; 
    justify-content: center; 
    align-items: center;
}
.box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
}
button {
    padding: 5px;
    width: 75px;
}
.container{
    margin: 250px;
}
</style>
<script>
function onClick() {
    let num1 = document.getElementById("num1").value;
    let num2 = document.getElementById("num2").value;
    let result;
    if (!isNaN(num1) && !isNaN(num2)) {
        result = parseFloat(num1) + parseFloat(num2);
    } else {
        result = num1 + num2;
    }
    document.getElementById("result").innerHTML = result;
}
</script>
</head>
<body>
<div class="container">
    <div class="box-1">
        <input id="num1" type="text" placeholder="Insert num or text . . .">  
        <input id="num2" type="text" placeholder="Insert num or text . . .">
    </div>
    <div class="box">
        <button  >

BlogInnovazione.it