품목

기본 JavaScript 교육 과정을 위한 솔루션을 사용한 JavaScript 연습

Java 기본 교육 과정에 대한 솔루션이 포함된 Java 스크립트 실습 목록입니다.

연습의 번호는 가장 간단한 것부터 가장 복잡한 것까지 난이도를 나타냅니다. 의견, 질문 또는 제안 사항이 있으면 info @로 저희에게 편지를 보내주십시오.bloginnovazione.it

연습 1: 다음 문장이 포함된 단락을 포함하는 html 페이지를 작성합니다.

잘못 될 수있는 모든 것은 잘못 될 것입니다.

자바 스크립트를 사용하면 일부 이벤트가 트리거됩니다.

– onclick : 텍스트는 굵게, 배경은 노란색으로 설정
– onmouseover : 텍스트는 밑줄, 배경은 주황색으로 설정
– onmouseout : 텍스트는 16px 폰트, 배경은 하늘색으로 설정

<!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: 페이지 중앙에 XNUMX줄로 정렬된 XNUMX개의 요소가 있는 html 페이지 작성(가로)

– 첫 번째 행에 두 개의 입력 텍스트가 나란히 간격을 두고 배치됨
– 두 번째 행에서 '+' 연산자가 있는 버튼, 버튼을 클릭할 때(onclick 이벤트) 첫 번째 행의 두 입력 필드를 읽고 추가하고 세 번째 행의 단락에 결과를 작성해야 합니다.
– 세 번째 줄에서 단락

섹션에 삽입하기 위해 src를 통해 html로 가져올 외부 파일에 js 코드를 작성합니다.

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