첫 JavaScript 프로그램 작성 방법

소개

\Hello, World! 프로그램은 컴퓨터 프로그래밍의 고전적이고 유서 깊은 전통입니다. 초보자를 위한 짧고 완전한 첫 번째 프로그램이며 환경이 올바르게 구성되었는지 확인할 수 있는 좋은 방법입니다.

이 튜토리얼은 JavaScript로 이 프로그램을 만드는 과정을 안내합니다. 그러나 프로그램을 더 흥미롭게 만들기 위해 전통적인 "Hello, World!\를 수정하겠습니다. 사용자에게 이름을 묻도록 프로그램합니다. 그런 다음 인사말에 이름을 사용합니다. 이 튜토리얼을 마치면 대화형 "Hello, World!\ 프로그램.

전제 조건

웹 브라우저에서 JavaScript 개발자 콘솔을 사용하여 이 자습서를 완료할 수 있습니다. 이 튜토리얼을 시작하기 전에 이 도구로 작업하는 데 어느 정도 익숙해야 합니다. 자세한 내용은 \JavaScript Developer Console 사용 방법\ 자습서를 참조하세요.

Hello, World! 만들기 프로그램

\Hello, World! 프로그램을 시작하려면 먼저 선호하는 웹 브라우저의 JavaScript 콘솔을 엽니다.

\Hello, World! alert() 메서드와 console.log() 메서드를 사용하여 JavaScript로 프로그래밍합니다.

경고() 사용

이 프로그램을 작성할 수 있는 첫 번째 방법은 alert() 메서드를 사용하는 것입니다. 이 메서드는 지정된 메시지와 함께 현재 창 위에 경고 상자를 표시합니다(이 경우 "Hello , World!”) 및 사용자가 경고를 닫을 수 있는 OK 버튼.

메소드 내에서 문자열 데이터 유형을 매개변수로 전달합니다. 이 문자열은 Hello, World! 값으로 설정되어 해당 값이 경고 상자에 인쇄됩니다.

이 첫 번째 "Hello, World!\ 스타일을 작성하려면 프로그램에서 alert() 메서드의 괄호 안에 문자열을 넣고 JavaScript 문을 세미콜론으로 끝냅니다.

alert("Hello, World!");

JavaScript 줄을 따라 ENTER 키를 누르면 브라우저에 다음 경고 팝업이 표시됩니다.

콘솔은 또한 표현식 평가 결과를 인쇄하며, 표현식이 명시적으로 무언가를 반환하지 않는 경우 정의되지 않음으로 읽습니다.

팝업 알림은 계속해서 클릭하기가 지루할 수 있으므로 console.log()를 사용하여 콘솔에 로그인하여 동일한 프로그램을 생성하는 방법을 살펴보겠습니다.

console.log() 사용

이번에는 console.log() 메서드를 사용하여 JavaScript 콘솔에 동일한 문자열을 인쇄할 수 있습니다. 이 옵션을 사용하는 것은 컴퓨터의 터미널 환경에서 프로그래밍 언어로 작업하는 것과 유사합니다.

alert()와 마찬가지로 \Hello, World!\ 문자열을 console.log() 메서드에 전달합니다. 괄호 사이. 일반적인 JavaScript 구문 규칙과 마찬가지로 세미콜론으로 문장을 끝낼 것입니다.

console.log("Hello, World!");

ENTER를 누르면 Hello, World! 메시지가 콘솔에 출력됩니다.

Output
Hello, World!

다음 섹션에서는 이 프로그램을 사용자를 위해 보다 대화식으로 만드는 방법을 살펴보겠습니다.

입력 요청

기존 "Hello, World!\를 실행할 때마다 동일한 출력을 생성합니다. 프로그램을 실행하는 사람에게 이름을 묻는 메시지를 표시한 다음 해당 이름을 사용하여 출력을 사용자 정의할 수 있습니다.

위에서 사용한 각 JavaScript 메서드에 대해 입력을 요청하는 한 줄로 시작할 수 있습니다. JavaScript의 prompt() 메서드를 사용하고 \What is your name?\ 문자열을 전달하여 사용자에게 이름을 묻습니다. 사용자가 입력한 내용은 변수 name에 저장됩니다. 우리는 세미콜론으로 표현을 끝낼 것입니다.

let name = prompt("What is your name?");

ENTER를 눌러 이 코드 줄을 실행하면 팝업 프롬프트가 표시됩니다.

웹 브라우저 창 위에 팝업되는 대화 상자에는 사용자가 입력을 입력할 수 있는 텍스트 필드가 포함되어 있습니다. 사용자가 텍스트 필드에 값을 입력하면 값을 저장하려면 확인을 클릭해야 합니다. 사용자는 취소 버튼을 클릭하여 값이 기록되지 않도록 할 수도 있습니다.

JavaScript prompt() 메서드는 프로그램 컨텍스트 내에서 의미가 있는 경우에만 사용하는 것이 중요합니다. 과도하게 사용하면 사용자가 지루해질 수 있기 때문입니다.

이 시점에서 환영할 프로그램의 이름을 입력하십시오. 이 예에서는 Sammy라는 이름을 사용합니다.

이제 사용자 이름 값을 수집했으므로 해당 값을 사용하여 사용자를 맞이할 수 있습니다.

alert()로 사용자에게 인사하기

위에서 설명한 것처럼 alert() 메서드는 브라우저 창 위에 팝업 상자를 만듭니다. name 변수를 사용하여 사용자에게 인사하는 방법을 사용할 수 있습니다.

문자열 연결을 활용하여 "Hello!\라는 인사말을 작성할 것입니다. 사용자에게 직접 주소를 지정하므로 Hello 문자열을 name 변수와 연결해 보겠습니다.

"Hello, " + name + "!"

\Hello, \ 및 \!\ 두 문자열을 name 변수와 결합했습니다. 이제 이 표현식을 alert() 메서드에 전달할 수 있습니다.

alert("Hello, " + name + "!");

여기에서 ENTER를 누르면 화면에 다음과 같은 대화 상자가 나타납니다.

이 경우 사용자 이름은 Sammy이므로 Sammy라는 인사말이 출력됩니다.

이제 출력이 대신 콘솔에 출력되도록 이것을 다시 작성해 보겠습니다.

console.log()로 사용자에게 인사하기

이전 섹션에서 살펴본 것처럼 console.log() 메서드는 print() 함수가 터미널에 출력을 출력할 수 있는 것처럼 콘솔에 출력을 출력합니다. 파이썬.

\Hello, \ 및 \!\alert() 메서드와 함께 사용한 것과 동일한 연결 문자열을 사용할 것입니다.와 name 변수:

"Hello, " + name + "!"

이 전체 표현식은 인사말을 출력으로 받을 수 있도록 console.log() 메서드의 괄호 안에 배치됩니다.

console.log("Hello, " + name + "!");

Sammy라는 사용자의 경우 콘솔의 출력은 다음과 같습니다.

Output
Hello, Sammy!

이제 사용자로부터 입력을 받아 화면에 다시 인쇄하는 JavaScript 프로그램이 있습니다.

결론

이제 고전 "Hello, World!\를 작성하는 방법을 배웠습니다. 예를 들어, 사용자가 가장 좋아하는 색상을 요청하고 프로그램에서 사용자가 가장 좋아하는 색상이 빨간색이라고 말하도록 할 수 있습니다. 프로그램을 더 확장할 수 있습니다. Mad Lib 프로그램을 만들기 위해 이와 동일한 기술을 사용하려고 시도하십시오.