Ìwé

Awọn adaṣe JavaScript pẹlu ojutu fun ikẹkọ ikẹkọ JavaScript Ipilẹ

Akojọ ti awọn adaṣe iwe afọwọkọ Java pẹlu ojutu fun iṣẹ ikẹkọ Ipilẹ Java.

Nọmba ti idaraya jẹ itọkasi ipele ti iṣoro, lati rọrun julọ si idiju julọ. Ti o ba ni awọn asọye eyikeyi, awọn ibeere tabi awọn imọran: kọ si wa ni alaye @bloginnovazione.it

Idaraya 1: Kọ oju-iwe html kan ti o ni paragirafi kan pẹlu gbolohun ọrọ naa:

Ohunkohun ti o le lọ ti ko tọ yoo lọ ti ko tọ

pẹlu JavaScript nfa diẹ ninu awọn iṣẹlẹ:

- tẹ: ṣeto igboya fun ọrọ ati ofeefee fun abẹlẹ
– onmouseover: ṣeto labẹ ila fun ọrọ ati osan fun abẹlẹ
- onmouseout: ṣeto fonti 16px fun ọrọ ati buluu ina fun abẹlẹ

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

Idaraya 2: Kikọ oju-iwe html kan pẹlu awọn eroja mẹrin ti a ṣeto sori awọn laini mẹta ni aarin oju-iwe naa (petele)

- ni ila akọkọ ọrọ titẹ sii meji ni ẹgbẹ lẹgbẹẹ ati aaye yato si
- ni laini keji bọtini kan pẹlu oniṣẹ '+', nigbati o ba tẹ bọtini naa (titẹ iṣẹlẹ) o ni lati ka awọn aaye titẹ sii meji ti laini akọkọ, ṣafikun wọn ki o kọ abajade ni paragira ti laini kẹta.
– ninu awọn kẹta ila a ìpínrọ

kọ koodu js sinu faili ita lati gbe wọle sinu html nipasẹ src lati fi sii ni apakan

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