자바스크립트 코딩 예제

참고 : 자바 스크립트는 대소문자를 구분합니다 – myVariable은 myvariable에 다른 변수입니다. 코드에 문제가 있는 경우 케이스를 확인하십시오! 중요: 이 문서에서는 예제 코드 줄을 JavaScript 콘솔에 입력하여 어떤 일이 발생하는지 확인합니다. JavaScript 콘솔에 대한 자세한 내용은 브라우저 개발자 도구 검색을 참조하세요. 여기에서 우리는 처음부터 자바 스크립트를 배우고 OOP와 같은 고급 개념으로 이동합니다. 이 문서는 자바 스크립트에 대한 가벼운 소개로 되어 있기 때문에, 우리는 핵심 자바 스크립트 언어와 위에 나열된 다른 도구 사이의 차이점에 대해 자세히 이야기하여이 단계에서 당신을 혼동하지 않을 것입니다. 나중에 자바스크립트 학습 영역과 MDN의 나머지 부분에서 이 모든 것을 자세히 알아볼 수 있습니다. JavaScript는 웹 사이트에 상호 작용을 추가하는 프로그래밍 언어입니다(예: 게임, 단추를 누르거나 데이터를 양식, 동적 스타일 지정, 애니메이션으로 입력하는 응답). 이 문서는 이 흥미로운 언어를 시작하는 데 도움이 되며 가능한 것에 대한 아이디어를 제공합니다. 자바 스크립트는 믿을 수 없을만큼 다재다능하다. 회전 목마, 이미지 갤러리, 변동하는 레이아웃 및 단추 클릭에 대한 응답으로 작게 시작할 수 있습니다.

더 많은 경험을 통해 게임, 애니메이션 2D 및 3D 그래픽, 포괄적인 데이터베이스 기반 앱 등을 만들 수 있습니다! 이 예제에서는 msg() 함수를 만듭니다. 자바 스크립트에서 함수를 만들려면 아래와 같이 function_name이있는 함수를 작성해야합니다. 우리는 거의 자바 스크립트의 표면을 긁어있다. 당신이 연주를 즐기고, 더 발전하고자하는 경우, 우리의 자바 스크립트 학습 주제로 머리. CSS에서할 수 있는 것처럼 자바스크립트 코드에 주석을 넣을 수 있습니다: 위의 예에서는 자바스크립트를 사용하여 동적 콘텐츠를 표시했습니다. 경고 대화 상자를 표시하는 자바 스크립트의 간단한 예를 보자. 자바 스크립트 언어의 핵심 기능 중 일부를 설명하여 모든 것이 어떻게 작동하는지 더 잘 이해할 수 있도록 해 보겠습니다. 이러한 기능은 모든 프로그래밍 언어에 공통적이므로 이러한 기본 사항을 마스터하면 거의 모든 것을 프로그래밍 할 수 있습니다! 이름, 성, 이메일, 사용자 ID, 암호를 수집하고 사용자의 암호를 확인하는 샘플 양식 프로그램을 만듭니다.

모든 입력은 필수이며 입력된 이메일 주소는 올바른 형식이어야 합니다. 또한 암호에 입력된 값과 암호 텍스트 상자가 동일해야 함을 확인합니다. 자바 스크립트를 사용하여 유효성을 검사 한 후 출력에서 오류가있는 텍스트 상자 바로 옆에 빨간색으로 적절한 오류 메시지가 표시됩니다. 자바스크립트를 사용하여 제목 텍스트가 “Hello world!”로 변경되었습니다. 먼저 querySelector()라는 함수를 사용하여 제목에 대한 참조를 잡고 myHeading이라는 변수에 저장합니다. 이것은 CSS 선택기를 사용하여 한 것과 매우 유사합니다.