مقالات

تمرینات جاوا اسکریپت با راه حل برای دوره آموزشی پایه جاوا اسکریپت

لیست تمرینات اسکریپت جاوا با راه حل برای دوره آموزشی Java Basic.

شماره گذاری تمرین نشان دهنده سطح دشواری است، از ساده ترین تا پیچیده ترین. اگر نظر، سوال یا پیشنهادی دارید: برای ما در info@ بنویسیدbloginnovazione.it

تمرین 1: یک صفحه html حاوی یک پاراگراف با جمله بنویسید:

هر چیزی که ممکن است اشتباه شود، اشتباه خواهد شد

با جاوا اسکریپت باعث ایجاد برخی رویدادها می شود:

– onclick: برای متن پررنگ و برای پس‌زمینه زرد قرار دهید
– onmouseover : برای متن زیر خط دار و برای پس زمینه نارنجی تنظیم کنید
– onmouseout: فونت 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: نوشتن یک صفحه html با چهار عنصر چیده شده در سه خط در مرکز صفحه (به صورت افقی)

– در ردیف اول دو متن را در کنار هم و با فاصله از هم وارد کنید
– در خط دوم دکمه ای با عملگر '+'، وقتی روی دکمه کلیک می کنید (رویداد onclick) باید دو فیلد ورودی خط اول را بخوانید، آنها را اضافه کنید و نتیجه را در پاراگراف خط سوم بنویسید.
- در سطر سوم یک پاراگراف

کد js را در یک فایل خارجی بنویسید تا از طریق src به html وارد شود تا در قسمت درج شود

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