728x90
소개
이 자습서에서는 브라우저에서 직접 JavaScript 코드를 작성, 편집 및 실행할 수 있는 기본 JavaScript 코드 편집기를 빌드하는 방법을 살펴봅니다.
이 자습서를 마치면 JavaScript 코드 조각을 실험할 수 있는 기능적 코드 편집기가 있습니다. 미리보기는 다음과 같습니다.
시작하자!
HTML 구조
코드 편집기를 만들려면 기본 HTML 구조부터 시작합니다.
<body>
<div class="container">
<textarea id="codeEditor"></textarea>
<button id="runButton">Run Code</button>
<div id="output"></div>
</div>
<script src="script.js"></script>
</body>CSS 스타일링
코드 편집기를 시각적으로 매력적으로 만들기 위해 몇 가지 CSS 스타일을 적용합니다.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: column;
align-items: stretch;
margin: 0 auto;
height: 800px;
width: 900px;
padding: 45px;
}
#codeEditor {
flex: 1;
font-family: monospace;
font-size: 14px;
padding: 10px;
resize: none;
background-color: #D9D0DE;
border: none;
}
#runButton {
margin-top: 10px;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
#output {
margin-top: 10px;
padding: 10px;
background-color: #f5f5f5;
white-space: pre-wrap;
}JavaScript 기능
이제 코드 편집기 기능을 활성화하는 JavaScript 코드를 추가해 보겠습니다.
const codeEditor = document.getElementById('codeEditor');
const runButton = document.getElementById('runButton');
const output = document.getElementById('output');
runButton.addEventListener('click', () => {
try {
const result = eval(codeEditor.value);
output.textContent = result;
} catch (error) {
output.textContent = 'Error: ' + error.message;
}
});HTML 파일에서 코드 편집기, 실행 버튼 및 출력 요소에 대한 참조를 검색하는 데 사용합니다. 요소는 이벤트를 수신하고 트리거되면 콜백 함수 내에서 코드를 실행합니다.document.getElementByIdrunButton'click'
콜백 함수 내에서 코드 편집기로 작성된 JavaScript 코드를 평가하는 데 사용합니다. 코드가 성공적으로 실행되면 를 사용하여 요소에 결과가 표시됩니다.eval()outputoutput.textContent
코드 실행 중에 오류가 발생하면 오류 메시지도 요소에 표시됩니다.output
결론
축하합니다! 간단한 JavaScript 브라우저 코드 편집기를 성공적으로 빌드했습니다. 이제 브라우저에서 직접 JavaScript 코드 조각을 작성, 편집 및 실행할 수 있습니다. DOM 요소 처리, 이벤트 수신, 를 사용한 코드 평가, 요소 콘텐츠 업데이트와 같은 주요 개념을 배웠습니다.eval()
728x90
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 프로그래밍 「 자바스크립트 편」예제와 함께 설명되는 가장 유용한 20가지 JavaScript 배열 방법 (0) | 2023.06.25 |
|---|---|
| 프로그래밍 「 자바스크립트 편」코딩새 배열 메서드: array.at() (0) | 2023.06.25 |
| 프로그래밍 「 자바스크립트 편」JavaScript를 사용하여 매크로에 대한 파일 업로드를 확인하는 방법 (0) | 2023.06.25 |
| 프로그래밍 「 자바스크립트 편」Javascript의 버블 정렬 : 간단한 정렬 알고리즘 (0) | 2023.06.25 |
| 프로그래밍 「 자바스크립트 편」React로 성능 향상.js (0) | 2023.06.25 |
