Чланци

ЈаваСцрипт вежбе са решењем за основни курс обуке за ЈаваСцрипт

Листа вежби јава скрипта са решењем за курс Јава Басиц.

Нумерација вежбе указује на ниво тежине, од најједноставнијих до најкомпликованијих. Ако имате било каквих коментара, питања или сугестија: пишите нам на инфо@bloginnovazione.it

Вежба 1: Напишите хтмл страницу која садржи пасус са реченицом:

Све што може поћи наопако, поћи ће наопако

са јавасцриптом покреће неке догађаје:

– онцлицк : подебљано за текст и жуто за позадину
– онмоусеовер : подвучено за текст и наранџасто за позадину
– онмоусеоут : поставите фонт од 16 пиксела за текст и светло плави за позадину

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

Вежба 2: Писање хтмл странице са четири елемента распоређена у три реда у центру странице (хоризонтално)

– у првом реду два уноса текста један поред другог и размакнути
– у другом реду дугме са оператором '+', када кликнете на дугме (онцлицк догађај) морате прочитати два поља за унос у првом реду, додати их и уписати резултат у пасус трећег реда
– у трећем реду пасус

напишите јс код у спољној датотеци за увоз у хтмл преко срц-а да бисте га убацили у одељак

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