프로젝트 4: Javascript로 키보드 말하기

3467 단어 discusshtmlcssjavascript
이 문서는 의 확장자입니다. 더 나은 이해를 위해 시작하기 전에 방문하십시오.

지난 기사에서는 keyboard를 표시하고 letter에서 클릭console을 인쇄했습니다. 이 문서에서 다음 작업을 수행할 것입니다.

작업 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 speech = new SpeechSynthesisUtterance();
        const letter = document.getElementById(id).textContent;
        speech.text = letter;
        window.speechSynthesis.speak(speech);
        const p = document.createElement('p');
        p.style.fontSize = '30px';
        p.innerHTML = letter;
        document.body.appendChild(p);
    }
</script>

</html>


우리는 프로젝트 3의 for 루프 안에서 무엇을 하고 있는지 거의 보았습니다.

여기서 바퀴를 재발명할 필요가 없습니다. 이제 과제 1과 2를 어떻게 달성할 수 있는지 이해해 봅시다.
getLetter 기능은 사용자가 키보드의 문자를 클릭하면 트리거됩니다.

따라서 그 안에 무엇이 들어 있는지 이해하는 것으로 충분할 것입니다.

const speech = new SpeechSynthesisUtterance();
        const letter = document.getElementById(id).textContent;
        speech.text = letter;
        window.speechSynthesis.speak(speech);


위의 스니펫은 클릭한 글자를 말하는 역할을 합니다.
SpeechSynthesisUtterance는 첫 번째 줄에서 인스턴스화된 클래스입니다. 그런 다음 클릭한 글자textContent를 캡처했습니다. 이를 speech에 할당하여 synthesisUtterance 어떤 텍스트를 음성으로 변환할지 알려줍니다. 그런 다음 speak 기능을 사용하여 단어를 말하십시오. 우리는 작업 1을 마쳤습니다.

작업 2, 즉 키보드 바로 아래에 클릭된 항목을 인쇄하는 작업으로 이동해 보겠습니다. 아주 간단합니다.

const p = document.createElement('p');
p.style.fontSize = '30px';
p.innerHTML = letter;
document.body.appendChild(p);


더 나은 보기를 위해 p를 fontSize로 사용하여 30px 요소를 생성합니다. innerHtml는 letter를 p로 설정하고 appendChild는 문서 p에 body를 추가합니다.

이제 웹 페이지에 발화되어 표시될 문자를 클릭하면 됩니다.

결과는 다음과 같습니다.



감사합니다 :) 즐거운 독서!


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



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

  • 코멘트 - 함께 배울 수 있습니다.

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

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

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



    • 더 논의합시다.


  • 저스트 디엠

  • 또는 기재

    • 추가 업데이트:

    4주 프로젝트 Error Handling #1
    PHP - 배열의 모든 값을 반환합니다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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