프로젝트 3: Javascript를 사용하여 키보드 빌드

3628 단어 discusshtmlcssjavascript
나는 우리가 정기적으로 하는 것처럼 이 키보드를 단계적으로 만들고 싶습니다. 오늘[2021년 2월 25일], 저는 기본적인 키보드 구현을 구축할 것입니다.

작업 1: 웹 페이지에 모든 알파벳을 표시합니다.
작업 2: 클릭 시 브라우저 콘솔에서 문자를 인쇄합니다.

코드는 다음과 같습니다.

<html>

<body>
</body>
<script>
    for (let i = 65; i <= 90; i++) {
        const button = document.createElement('button');
        const char = String.fromCharCode(i);
        const span = document.createElement('span');
        span.style.fontSize = '50px';
        span.appendChild(document.createTextNode(char));
        button.appendChild(span);
        document.body.appendChild(button);
        button.setAttribute('id', char);
        button.style.padding = '30px';
        button.style.margin = '10px';
        button.onclick = function () { getLetter(char) };
    }
    function getLetter(id) {
        const letter = document.getElementById(id).textContent;
        console.log(letter);
    }
</script>

</html>


작업1:
for (let i = 65; i <= 90; i++) { -> 65 - 90 알파벳의 ASCII 값. 루프는 65-90 사이를 반복하고 반복을 위해 하나의 문자를 생성합니다.
const button = document.createElement('button'); -> 버튼을 생성합니다.
const char = String.fromCharCode(i); -> ASCII 값에 해당하는 알파벳을 반환합니다. 예를 들어 65 -> A, 66 -> B, .... 90 -> Z.

const span = document.createElement('span');
span.style.fontSize = '50px';
span.appendChild(document.createTextNode(char));
button.appendChild(span);

button에 표시할 텍스트를 만들고 추가합니다. 더 나은 보기를 위해 fontSize를 설정합니다.
document.body.appendChild(button); -> button를 body에 각각 추가합니다.

button.setAttribute('id', char);
button.style.padding = '30px';
button.style.margin = '10px';


설정id 속성은 클릭 이벤트를 실행하고 이를 문자 자체로 설정하는 데 유용합니다. 또한 더 나은 보기를 위해 일부 padding 및 margin를 설정합니다.
button.onclick = function () { getLetter(char) }; -> 각 버튼이 트리거onclick 기능을 수행하도록 설정getLetter합니다.

function getLetter(id) {
       const letter = document.getElementById(id).textContent;
       console.log(letter);
    }


우리는 그것의 button로 id를 얻고 기본적으로 당신이 클릭한 글자인 그것의 textContent를 캡처하고 있습니다.

다음으로 console 로 인쇄합니다.

결과는 다음과 같습니다.

Image description

오늘은 여기까지입니다. 내일 더 발전하도록 노력하겠습니다.

감사합니다😊 즐겁게 읽어주세요!.


💎 귀하의 응답을 보고 싶습니다.



  • Like - 여기에 도달했습니다. 나는 좋아할 자격이 있다고 생각합니다.

  • 의견 - 함께 배울 수 있습니다.

  • 공유 - 다른 사람들도 이 리소스를 유용하게 사용할 수 있습니다.

  • 구독/팔로우 - 내 매일 기사를 최신 상태로 유지합니다.

  • 격려해 주세요 - You can buy me a Coffee



    • 더 논의합시다.


  • 저스트 디엠

  • 또는 기재

    • 추가 업데이트:

    Java 클래스는 한 번에 하나의 객체만 선언할 수 있도록 합니다.
    정렬을 분할 정복하는 합병 정렬(Merge Sort)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage