makala

Mazoezi ya JavaScript yenye suluhisho la kozi ya mafunzo ya Msingi ya JavaScript

Orodha ya mazoezi ya hati ya java yenye suluhisho la kozi ya mafunzo ya Msingi ya Java.

Nambari ya zoezi ni dalili ya kiwango cha ugumu, kutoka rahisi hadi ngumu zaidi. Ikiwa una maoni yoyote, maswali au mapendekezo: tuandikie kwa info @bloginnovazione.it

Zoezi la 1: Andika ukurasa wa html ulio na aya yenye sentensi:

Kitu chochote ambacho kinaweza kwenda vibaya kitaenda vibaya

na Javascript husababisha matukio kadhaa:

– bofya : weka herufi nzito kwa maandishi na manjano kwa mandharinyuma
– onmouseover : seti iliyopigiwa mstari kwa maandishi na rangi ya chungwa kwa mandharinyuma
- onmouseout : weka fonti ya 16px kwa maandishi na bluu nyepesi kwa mandharinyuma

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

Zoezi la 2: Kuandika ukurasa wa html wenye vipengele vinne vilivyopangwa kwa mistari mitatu katikati ya ukurasa (mlalo)

- katika safu ya kwanza maandishi mawili ya ingizo kando kando na kugawanywa kando
- katika safu ya pili kitufe na opereta '+', unapobofya kitufe (bonyeza tukio) lazima usome sehemu mbili za ingizo za safu ya kwanza, ziongeze na uandike matokeo katika aya ya safu ya tatu.
- katika mstari wa tatu aya

andika msimbo wa js kwenye faili ya nje ili kuingiza kwenye html kupitia src ili kuingiza kwenye sehemu hiyo

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