Artikel

Latihan JavaScript kanthi solusi kanggo kursus pelatihan JavaScript Dasar

Dhaptar latihan aksara Jawa kanthi solusi kanggo kursus pelatihan Java Basic.

Nomer latihan kasebut nuduhake tingkat kesulitan, saka sing paling gampang nganti sing paling rumit. Yen sampeyan duwe komentar, pitakonan utawa saran: nulis kanggo kita ing info @bloginnovazione.it

Latihan 1: Tulis kaca html sing ngemot paragraf kanthi ukara:

Apa wae sing bisa salah bakal salah

karo javascript micu sawetara acara:

– onclick : nyetel kandel kanggo teks lan kuning kanggo latar mburi
– onmouseover : nyetel garis ngisor kanggo teks lan oranye kanggo latar mburi
– onmouseout: nyetel font 16px kanggo teks lan biru cahya kanggo latar mburi

<!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" >

Latihan 2: Nulis kaca html kanthi papat unsur sing disusun ing telung baris ing tengah kaca (horizontal)

– ing baris kapisan loro input teks jejer lan diwenehi jarak
- ing baris kapindho tombol karo operator '+', nalika sampeyan ngeklik tombol (acara onclick) sampeyan kudu maca rong kolom input saka baris pisanan, nambah lan nulis asil ing paragraf baris katelu
– ing baris katelu paragraf

nulis kode js ing file njaba kanggo ngimpor menyang html liwat src kanggo masang ing bagean

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