자바스크립트 기본. 2부 자바스크립트 초급부터 고급까지

이것은 초급에서 고급으로 안내하는 JavaScript 블로그 게시물 시리즈의 두 번째 부분입니다. 이 시리즈가 끝나면 JavaScript로 코딩을 시작하기 위해 알아야 할 모든 기본 사항을 알게 될 것입니다. 더 이상 고민하지 않고 두 번째 자습서를 시작하겠습니다.

JavaScript 기본 – 목차:

1. 자바스크립트 기본
2. 라인별 실행
3. 지침을 종료하는 두 가지 방법
4. 코멘트

이 블로그 게시물에서 우리는 첫 번째 블로그 게시물에서 떠난 곳에서 계속할 것입니다. 이 단계에서 Google Chrome 브라우저가 열려 있어야 하며 더 구체적으로는 JavaScript 콘솔이 열려 있어야 합니다. 어떤 이유로 닫았다면 다시 여는 것이 좋습니다. JavaScrip 기초 학습을 시작해 봅시다.

Mac을 사용하는 경우 콘솔을 여는 키보드 단축키는 Chrome을 연 후 "옵션 + 명령 + J"를 누르는 것입니다. Windows 장치를 사용하는 경우 "Control + Shift + J"의 키보드 단축키를 사용하여 Chrome을 연 후 JavaScript 콘솔을 열 수 있습니다. 또는 상단 메뉴로 이동하여 보기 -> 개발자 -> JavaScript 콘솔로 이동할 수도 있습니다.

자바스크립트 기본

JavaScript는 다른 모든 프로그래밍 언어와 마찬가지로 컴퓨터와 통신하는 데 사용하는 언어입니다. 자연어가 적절한 문장을 형성하기 위해 문법과 알려진 단어가 있는 것처럼 프로그래밍 언어에도 컴퓨터와 효과적으로 통신하기 위해 따라야 하는 특정 규칙이 있습니다.

예를 들어 특정 단어는 이전 튜토리얼에서 사용한 "alert" 키워드와 같이 코드를 실행하는 JavaScript 엔진에 특정 사항을 의미합니다. . 우리의 경우 "Hello, World!"라고 썼습니다. 그래서 우리는 “Hello, World!”라는 경고를 받았습니다.

JavaScript에는 올바른 단어와 문법을 사용하여 컴퓨터와 효과적으로 의사 소통할 수 있도록 알고 있어야 하는 다른 예약어가 있습니다. 또한 자연어에 문법이 있는 것처럼 프로그래밍 언어에도 문법이 있습니다. 그 문법은 일반적으로 프로그래밍 언어에서 "구문"이라고 하며 JavaScript도 예외는 아닙니다. 그렇기 때문에 JavaScript 기초에 대해 배우기 시작할 때 JavaScript에 있는 주요 키워드와 문법을 이해하는 것이 좋습니다. JavaScript에 대해 알아야 할 몇 가지 주요 사항을 살펴보겠습니다.

라인별 실행

JavaScript 기본 사항과 관련하여 가장 먼저 알아야 할 사항 중 하나는 작성하는 코드가 위에서 아래로 한 줄씩 실행된다는 것입니다. 이러한 스타일의 코드 실행은 "해석된 프로그래밍 언어"인 JavaScript라고도 합니다.

반대로 일부 프로그래밍 언어는 "컴파일된 프로그래밍 언어"입니다. 컴파일된 언어에 대한 몇 가지 예는 C, C++, C#, Swift, Java 등입니다. 주요 차이점은 컴파일된 프로그래밍 언어를 사용하면 작성하는 모든 코드가 "컴파일"되어 컴퓨터에서 한 부분으로 실행된다는 것입니다. 또한 프로그램에서 오류가 발생한 위치를 찾기가 더 어려울 수 있으므로 컴파일된 프로그래밍 언어를 배우기 시작하는 것이 더 어려울 수 있습니다.

해석된 프로그래밍 언어에 대한 몇 가지 예는 JavaScript, Python, Bash 및 Matlab입니다. 해석된 프로그래밍 언어를 사용하면 코드에서 세미콜론을 잊어버리거나 일치하지 않는 괄호와 같이 오류를 만든 줄을 볼 수 있는 고유한 이점이 있습니다. 이 특성을 갖는 것은 특정 애플리케이션에서 큰 차이를 만들 수 있지만 느린 인터넷 연결로 웹사이트를 로드하려고 할 때 JavaScript의 모든 단일 라인이 가능한 한 빨리 실행되는 것을 선호합니다.

지침을 종료하는 두 가지 방법

하루가 끝나면 컴퓨터 프로그램은 컴퓨터에 대한 명령의 묶음입니다. 그러나 한 프로그램은 어디에서 끝나고 다음 명령은 어디에서 시작됩니까? 이 문제에 대한 다양한 접근 방식이 있습니다. JavaScript는 세미콜론과 대괄호라는 두 가지 주요 기능을 사용합니다.

우리가 작성하는 명령어 유형에 따라 일반적으로 명령어 세트를 종료하거나 패키지화하는 데 하나를 사용합니다. 우리는 다양한 기능과 데이터 유형에 대해 다른 유형의 괄호를 사용할 것입니다. 예를 들어 alert("Hello, World"); 우리가 이전에 실행한 코드, hello world 쓰기를 둘러싸는 괄호는 경고가 무엇을 말해야 하는지 컴퓨터에 알려주고, 명령어 끝에 있는 세미콜론은 컴퓨터에 이 명령어가 여기서 끝나면 다음 명령어로 이동할 수 있음을 알려줍니다. 이것은 마침표 "."를 사용하는 방법과 매우 유사합니다. 문장을 영어로 끝내는 것.

코멘트

코드에 주석을 추가하는 것은 프로그래밍의 필수적인 부분입니다. 작성하는 동안 어떤 코드를 작성하는지 이해하는 것은 쉬울 수 있지만 코드의 복잡성에 따라 6개월 후 코드로 돌아가면 거의 알지 못할 수도 있습니다.

주석을 추가하면 미래를 위해 코드를 훨씬 더 쉽게 이해할 수 있을 뿐만 아니라 함께 작업하는 모든 사람도 코드를 훨씬 더 쉽게 이해할 수 있습니다. 또한 일반적으로 문제를 더 작은 크기의 덩어리로 나누어 문제를 해결하는 것이 훨씬 쉽기 때문에 작업 중인 문제에 대해 더 잘 이해하는 데 도움이 될 수 있습니다. 코드의 주석 처리된 부분은 인터프리터에서 무시되며 실행되지 않습니다.

주석을 추가할 수 있는 두 가지 방법은 JavaScipt입니다. 첫 번째는 다음과 같이 두 개의 슬래시가 있는 간단한 "한 줄" 주석을 추가하는 것입니다.

// this is a comment

이렇게 하면 두 개의 슬래시 뒤에 작성하는 내용이 슬래시를 넣은 특정 줄에서 무시됩니다. 다음과 같은 주석으로 여러 줄을 덮도록 이 작업을 여러 번 반복할 수 있습니다.

// this is a comment.
// this is another comment.
// you can keep commenting like this.

주석을 사용하는 또 다른 이유는 코드를 실험하기 위해 코드를 주석으로 처리하기 위해서입니다. 예를 들어 동일한 기능을 여러 방법으로 작성할 수 있으며 동일한 코드의 한 버전에 주석을 달아 개별 성능이나 결과를 비교할 수 있습니다. 그것도 예를 들어 보자.

Chrome에서 연 JavaScript 콘솔에 다음 코드를 복사하여 붙여넣습니다.

// greet user
alert("Hello, User!");
alert("Hi, User!");

전체 코드를 직접 작성하는 추가 연습을 원한다면 그렇게 할 수도 있습니다. 콘솔에서 여러 줄의 코드를 작성할 때 알아야 할 한 가지는 실행하지 않고 다음 줄로 이동하려면 "shift + enter"를 눌러 수행할 수 있다는 것입니다. 그렇지 않으면 한 줄의 코드를 작성한 후 엔터를 치면 해당 코드 줄을 실행합니다. 이 예제에서 이것은 큰 문제가 아니며 실제로 해당 스타일에서도 작동할 수 있는 간단한 예제가 있기 때문에 한 줄씩 실행해도 괜찮습니다.

복사하여 붙여넣거나 코드를 직접 작성한 후 "Enter" 키를 눌러 코드를 실행합니다. 결과는 두 개의 개별 경고를 제공해야 합니다. 또한 경고를 해제하려면 "확인"을 클릭할 수 있습니다. 이 경우 간단한 경고이고 표시하려는 메시지를 표시한 후 아무 것도 트리거하지 않기 때문에 아무 작업도 수행하지 않습니다.

이와 같은 코드를 실행할 때 동일한 기능을 두 번 실행합니다. 그러나 한 번에 하나의 구현만 보려면 어떻게 해야 합니까? 글쎄, 우리는 이미 그것에 대해 이야기했기 때문에 이 경우에 무엇을 해야 하는지 정확히 알고 있습니다. 코드를 붙여넣거나 작성한 후 행 중 하나를 주석 처리하여 "Hi, User!"의 두 번째 구현만 가능하도록 하십시오. 처형된다.

챌린지를 완료하거나 챌린지 도중 막히면 아래 챌린지에 대한 솔루션 코드를 볼 수 있습니다. 솔루션을 살펴보기 전에 실제로 연습할 때 가장 잘 배울 수 있으므로 항상 직접 시도해 보는 것이 좋습니다. 챌린지를 성공적으로 완료했다면 다음과 같은 화면이 표시되어야 합니다.

코드 줄을 주석 처리하면 이전에 주석 처리된 줄과 같은 색상으로 바뀝니다. 이 색상 차이는 실제로 컴퓨터에 차이를 만들지 않지만 코드를 작성할 때 우리에게 다소 유용한 기능입니다. 이렇게 하면 색상이 명확해지기 때문에 실수로 코드 줄을 주석 처리하는 경우 훨씬 더 쉽습니다.

코드를 주석 처리하는 또 다른 방법은 슬래시와 별표 문자를 사용하는 것입니다. 이렇게 하면 코드에서 한 줄 또는 여러 줄 주석을 만들 수 있습니다.

/* a single line comment */
/* the commenting starts when we put a forward slash and an asterisk
and the commented areas ends
when we close of the comment with an asterisk and the forward slash
like this */

이제 JavaScript 기본 사항을 알았습니다. 다음 튜토리얼에서는 JavaScript의 기본 데이터 유형과 함께 "변수"라는 프로그래밍에서 매우 일반적인 개념을 볼 것입니다.

저자: 로버트 휘트니

IT 부서를 지도하는 JavaScript 전문가이자 강사입니다. 그의 주요 목표는 코딩하는 동안 다른 사람들에게 효과적으로 협력하는 방법을 가르쳐 팀 생산성을 높이는 것입니다.

모든 게시물 보기

10개의 블로그 게시물에서 초급에서 고급까지 JavaScript 과정:

1. JavaScript에서 코딩을 시작하는 방법은 무엇입니까?
2. 자바스크립트 기본
3. JavaScript의 변수 및 다양한 데이터 유형
4. 스니펫 및 제어 구조
5. while 루프와 for 루프
6. 자바 배열
7. 자바스크립트 함수
8. 자바스크립트 객체
9. JavaScript 메서드 등
10. 자바스크립트 코스 요약