이 글에서는 초보자에게 언어에 대한 기본적인 이해를 제공하기 위해 기본 JavaScript 개념을 포괄적으로 나열하여 언어의 기본 원리를 설명합니다. 이러한 모든 개념이 언어에 어떻게 반영되는지 설명하는 코드 예제는 어디에서나 찾을 수 있습니다. >
자바스크립트 언어는 점점 대중화되고 있으며 인터넷에서 가장 눈에 띄는 언어 중 하나라고 할 수 있습니다. 다양한 플랫폼과 브라우저에서 사용할 수 있으며 백엔드 언어도 제외되지 않습니다. 시중에는 개발, 개발 시간 단축 등에 매우 도움이 되는 다양한 개발 라이브러리가 있습니다. 그 중 일부는 정말 훌륭합니다. 문제는 때때로 이러한 라이브러리가 원래 언어와 매우 멀리 떨어져 있어 이제 막 시작한 개발자가 언어에 대한 기본적인 이해가 부족하다는 것입니다.
이 글은 초보자에게 언어에 대한 기본적인 이해를 돕기 위해 기본 JavaScript 개념을 포괄적으로 나열하여 언어의 기본 원리를 설명합니다. 이러한 개념이 언어에 어떻게 반영되는지 모든 것을 설명하는 코드 예제가 곳곳에 있습니다.
JavaScript 언어에 대해 알아보기
JavaScript 언어는 HTML(Hypertext Markup Language) 페이지로 이동할 수 있는 무료 클라이언트측 스크립팅 언어입니다. 대화형 동작 추가 . 클라이언트 측이란 JavaScript가 서버 측이 아닌 브라우저에서 실행된다는 것을 의미합니다. 클라이언트 측 스크립트를 사용하면 서버에서 웹 페이지를 제공하고 브라우저에서 로드한 후 사용자가 웹 페이지와 상호 작용할 수 있습니다. 예를 들어, Google 지도는 JavaScript 언어를 사용하여 사용자와 지도 간의 상호작용을 지원합니다. 상호작용 방법에는 지도 이동, 확대/축소 등이 포함됩니다. JavaScript가 없으면 Adobe Flash 또는 Microsoft® Silverlight와 같은 플러그인을 사용하지 않는 한 모든 사용자 상호 작용에 대해 웹 페이지를 새로 고쳐야 합니다. JavaScript 언어에는 플러그인이 필요하지 않습니다.
JavaScript 언어는 로드된 웹 페이지에 대한 사용자 상호 작용을 제공하므로 개발자는 일반적으로 이를 사용하여 다음 기능을 구현합니다.
1. HTML 요소와 해당 값을 동적으로 추가, 편집 및 삭제합니다.
2. 제출하기 전에 양식을 확인하세요.
3. 사용자의 컴퓨터에 쿠키를 생성하여 향후 방문에 대한 데이터를 저장하고 검색합니다.
시작하기 전에 언어의 몇 가지 기본 원칙을 알아두세요.
1 HTML 파일에 JavaScript 코드를 포함하려면 해당 코드를 script 태그를 추가하고 text/javascript 유형 속성을 추가합니다(목록 1).
2. 모든 JavaScript 문은 세미콜론으로 끝납니다.
3. 언어는 대소문자를 구분합니다.
4. 모든 변수 이름은 문자나 밑줄로 시작해야 합니다.
5. 주석을 사용하여 스크립트의 특정 줄을 설명할 수 있습니다. 주석은 이중 슬래시(//)로 시작하고 뒤에 주석이 옵니다.
6. 댓글을 사용하여 스크립트에 주석을 달 수도 있습니다. 스크립트의 여러 줄을 주석 처리하려면 /*your script goes here*/를 사용하는 것이 좋습니다. 별표 안의 스크립트는 실행 중에 실행되지 않습니다.
목록 1. HTML 파일에 JavaScript 코드를 포함하려면 스크립트 태그와 유형 속성을 사용해야 합니다.
웹 페이지에 JavaScript 코드를 포함하는 가장 일반적인 방법은 script 태그의 src 속성을 사용하여 외부 JavaScript 파일에서 코드를 로드하는 것입니다(목록 3).
목록 3. HTML 파일에 외부 JavaScript 파일 포함
외부 JavaScript 파일은 JavaScript 코드를 포함하는 가장 일반적인 방법이며 여기에는 몇 가지 매우 실용적인 이유가 있습니다.
1. HTML 페이지에는 코드가 적으므로 검색 엔진이 사이트를 더 빠르게 크롤링하고 색인을 생성할 수 있습니다.
2. 코드가 더 명확하게 보이고 궁극적으로 관리하기 더 쉽게 되도록 JavaScript 코드와 HTML을 분리하세요.
3. HTML 코드에는 여러 개의 JavaScript 파일이 포함될 수 있으므로 웹 서버에서 JavaScript 파일을 서로 다른 파일 디렉터리 구조로 분리할 수 있습니다. 이는 이미지가 저장되는 방식과 유사합니다. 코드를 관리합니다. 명확하고 체계적인 코드는 항상 웹사이트 관리를 더 쉽게 만드는 열쇠입니다.
변수
변수는 나중에 검색하거나 새 데이터로 업데이트할 데이터를 저장합니다. 변수에 저장된 데이터는 값 또는 표현식일 수 있습니다. JavaScript 언어에는 표 1에 설명된 세 가지 유형의 표현식이 있습니다.
표 1. 자바스크립트 표현식
표현식 설명
산술 계산 결과가 숫자 값입니다
문자열 계산 결과가 문자열입니다
논리계산 결과는 부울 값(true 또는 false)입니다.
변수에는 로컬과 글로벌 두 가지 유형이 있습니다. 지역 변수는 var 키워드를 사용하여 선언되고, 전역 변수는 var 키워드 없이 선언됩니다. var 키워드를 사용하는 변수는 선언한 범위를 제외한 다른 곳에서는 액세스할 수 없기 때문에 로컬로 간주됩니다. 예를 들어 함수 내부에 지역 변수를 선언하면(이 내용은 기사 끝부분에서 설명하겠습니다) 함수 외부에서 해당 변수에 액세스할 수 없으므로 해당 변수가 해당 함수에 대해 로컬이 됩니다. var 키워드를 사용하지 않고 동일한 변수를 선언하면 해당 함수 내뿐만 아니라 스크립트 전체에서 액세스할 수 있습니다.
목록 4에서는 num이라는 지역 변수에 값 10이 할당된 예를 제공합니다.
목록 4. 지역 변수 선언
var num = 10
스크립트의 다른 위치에서 num 변수의 값에 액세스하려면 목록 5에 표시된 대로 이름으로 변수를 참조하기만 하면 됩니다.
목록 5. 변수 값 액세스
document.write("num 값은 " num); >
이 문의 결과는 "num의 값은 10입니다."입니다. document.write 함수는 웹 페이지에 데이터를 기록하며, 이 기사의 나머지 부분에서는 이 함수를 사용하여 웹 페이지에 예제를 작성하게 됩니다.
산술 표현식을 변수에 저장하려면 목록 6과 같이 계산된 값에 변수를 할당하기만 하면 됩니다. 계산 결과는 계산 자체가 아닌 변수에 저장됩니다. 그래서 다시 "The value of num is: 10"이라는 결과를 얻습니다.
목록 6. 산술 표현식 저장
var num = (5 5); document.write("num 값은 " num) ;
변수 값을 변경하려면 할당한 이름으로 변수를 참조하고 등호를 사용하여 새 값을 할당합니다(목록 7). 이번에 차이점은 변수가 이미 선언되었기 때문에 var 키워드를 사용할 필요가 없다는 것입니다.
목록 7. 기존 변수의 값 변경
var num = 10; document.write("The value of num is: " num) ;
// num 값을 15로 업데이트합니다.
num = 15;
document.write("num의 새 값은 " num);
이 스크립트의 결과는 먼저 "The value of num is: 10"과 "The new value of num is: 15"라는 문장입니다. 이 섹션에서는 변수를 설명하는 것 외에도 다음 항목인 연산자를 소개합니다. 변수에 값을 할당할 때 사용하는 등호(=)는 할당 연산자이고, 5 5에서 사용하는 더하기 기호( )는 산술 연산자입니다. 다음 섹션에서는 JavaScript 언어의 모든 변수 연산자와 사용법에 대해 설명합니다.
연산자
JavaScript 언어로 작업을 수행하려면 연산자가 필요합니다. 연산에는 덧셈, 뺄셈, 비교 등이 포함됩니다. JavaScript 언어에는 네 가지 연산자가 있습니다.
1. 산술
2. 할당
3. 비교
산술 연산자
산술 연산자는 덧셈, 뺄셈, 곱셈, 나눗셈과 같은 기본적인 수학 연산을 수행합니다. 표 2는 JavaScript 언어에서 사용할 수 있는 모든 산술 연산을 나열하고 설명합니다.
표 2. 산술 연산자
연산자 설명
덧셈
- 뺄셈
* 곱셈
/ 나눗셈
% 모듈로(나머지 찾기)
증가
--감소
대입 연산자
산술 연산자는 기본 작업을 수행합니다. 수학 연산, 할당 연산자는 JavaScript 변수에 값을 할당합니다. 이전 섹션에서 변수에 값을 할당할 때 가장 일반적으로 사용되는 할당 연산자를 이미 보았습니다. 표 3은 JavaScript 언어에서 사용할 수 있는 모든 할당 연산자를 나열하고 설명합니다.
표 3. 대입 연산자
연산자 설명
=같음
= 덧셈 값 할당(변수의 결과 값 + 값) 변수
-=변수에 뺄셈 값(변수에서 값을 뺀 결과)을 변수에 할당
*=곱셈 값(변수에 값을 곱한 결과) 할당 ) to the 변수
/=나눗셈 값(변수를 값으로 나눈 결과)을 변수에 할당
%=모듈로 값(모듈로 모듈로 변수의 결과) 할당 value)를 변수에
변수에 값이나 표현식을 할당하기 위해 등호를 사용하는 방법을 살펴봤지만 이제는 약간 혼란스러운 할당 연산자를 사용하는 방법을 보여 드리겠습니다. 변수에 추가 값을 할당하는 것은 이상한 개념일 수 있지만 실제로는 매우 간단합니다(목록 8).
목록 8. 변수에 추가 값 할당
var num = 10;
// num 값을 15로 업데이트합니다.
num = 5;
document.write("num의 새 값은 " num); >
이 스크립트의 결과는 "The value of num is: 10" 다음에 ""The new value of num is: 15"입니다. 이 스크립트의 연산자는 주어진 변수에 추가된 값을 할당하는 것을 볼 수 있습니다. 이는 목록 9에 작성된 스크립트의 단축 버전으로 생각할 수도 있습니다.
var num = 10;
document.write("num 값: " num);
// num 값을 15로 업데이트합니다. num = (num 5); >document.write("num의 새 값은 " num);
비교 연산자
비교 연산자는 변수 또는 해당 값 사이의 관계를 결정합니다. 조건문에서 비교 연산자를 사용하면 변수 또는 해당 값을 비교하여 명령문이 참인지 거짓인지 확인하는 논리를 만들 수 있습니다. 표 4는 JavaScript 언어에서 사용할 수 있는 모든 비교 연산자를 나열하고 설명합니다.
표 4. 비교 연산자
연산자 설명
==같음
=== 합동(값 및 개체 유형에 대해)
!= 같지 않음
> 초과
< 미만
>= 초과
<= 미만 또는
과 같음 모든 종류의 논리를 작성할 때 변수와 값의 비교는 기본입니다. 목록 10의 예에서는 같음 비교 연산자(==)를 사용하여 10이 1과 같은지 확인하는 방법을 보여줍니다.
목록 10. 비교 연산자 사용
document.write(10 == 1);
논리 연산자
논리 연산자는 일반적으로 비교를 결합하는 데 사용됩니다. 조건문의 연산자. 표 5는 JavaScript 언어에서 사용할 수 있는 모든 논리 연산자를 나열하고 설명합니다.
표 5. 논리 연산자
연산자 설명
&& 및
| 아님
이제 변수와 연산자에 대한 경험을 쌓았으므로 단순한 변수 이상의 것을 저장하는 메커니즘을 만드는 방법을 배울 차례입니다.
배열
배열은 변수와 유사하지만 하나의 이름 아래 여러 값과 표현식을 담을 수 있다는 점이 다릅니다. 변수에 여러 값을 저장하면 배열이 강력해집니다. JavaScript 배열에 저장할 수 있는 데이터의 유형이나 양에는 제한이 없습니다. 스크립트에서 배열을 선언하면 언제든지 배열의 모든 항목에 있는 모든 데이터에 액세스할 수 있습니다. 배열은 다른 배열을 포함하여 모든 JavaScript 데이터 유형을 보유할 수 있지만 가장 일반적인 접근 방식은 유사한 데이터를 동일한 배열에 저장하고 배열 항목과 관련된 이름을 지정하는 것입니다. 목록 11에서는 두 개의 별도 배열을 사용하여 유사한 데이터를 저장하는 예제를 제공합니다.
목록 11. 비슷한 값을 배열에 저장하기
var colors = new Array("orange", "blue", "red", "brown " );
배열의 값에 액세스하는 것은 쉽지만 문제가 있습니다. 어레이 ID는 항상 1이 아닌 0부터 시작하므로 처음 사용할 때 약간 혼란스러울 수 있습니다. ID는 0부터 시작하여 0, 1, 2, 3 등으로 증가합니다. 배열 항목에 액세스하려면 배열에서 하위 항목의 위치를 가리키는 해당 ID를 사용해야 합니다(목록 12).
목록 12. 유사한 값을 배열에 저장
var colors = new Array("orange", "blue", "red", " brown" );
document.write("파란색: " 색상[1])
document.write("빨간색: " 색상 [2 ]);
document.write("Brown: " colors[3]);
목록 13. 배열의 특정 위치에 값 할당
var colors = new Array()
colors[1] = "파란색";
colors[2] = "빨간색";
colors[3] = "갈색"
document.write("파란색: " 색상[ 1]) ;
// 파란색을 보라색으로 업데이트
colors[1] = "purple"
document.write("Purple: " colors[1]); >
이제 변수, 연산자, 배열을 잘 이해했으므로 배운 내용을 실제로 적용하고 로직을 만들어 보세요.
조건문
조건문은 스크립팅 언어나 프로그래밍 언어에서 다양한 형태의 로직을 생성하기 위한 뼈대이며, 자바스크립트 언어도 예외는 아닙니다. 조건문은 작성한 조건에 따라 수행할 작업을 결정합니다. JavaScript 언어에는 표 6에 설명된 조건문을 작성하는 네 가지 방법이 있습니다.
표 6. 조건문
문 설명
if 특정 조건이 true인 경우 스크립트를 실행
if...else 특정 조건이 있는 경우 특정 조건이 true이면 스크립트가 실행됩니다.
조건이 false이면 스크립트가 실행됩니다.
if...else if...else가 있는 경우. 개수 제한 없음 여러 조건 중 하나가 true이면 특정 스크립트를 실행합니다.
모든 조건이 false이면 다른 스크립트를 실행합니다.
switch 여러 스크립트 중 하나를 실행합니다
특정 조건이 true일 때만 스크립트를 실행하려면 if 문을 사용하세요. 목록 14에서는 조건이 true일 때 스크립트를 실행하기 위해 비교 연산자와 함께 if 문을 사용하는 방법을 보여줍니다.
목록 14. if 문 사용
var num = 10;
if(num == 5)
{
document.write( "num isequal to 5");
}
특정 조건이 true일 때 하나의 스크립트를 실행하고 조건이 false일 때 다른 스크립트를 실행하려는 경우 다음을 사용하세요. if...else 문(목록 15 참조)
목록 15. if...else 문 사용
var num = 10
if(num == 5)
{
document.write("숫자는 5와 같습니다.");
}
else
{
document.write("숫자는 5와 같지 않습니다. num은 "
}
다른 조건에 따라 다른 스크립트를 실행하려면 목록 16에 표시된 대로 if...else if...else 문을 사용합니다.
목록 16. if...else if...else 문 사용
var num = 10
if(num == 5)
{
document.write("숫자는 5입니다.");
}
else if(num == 10)
{
document.write("숫자는 10입니다. ");
}
else
{
document.write("num is: " num);
}
Swith 문이 다릅니다. if 문에서는 변수 값이 다른 값보다 큰지 작은지를 결정하는 데 사용할 수 없습니다. Listing 17에는 스크립트가 실행될 적절한 시간을 결정하기 위해 switch 문을 사용하는 예가 나와 있습니다.
목록 17. 스위치 문 사용
코드 복사 코드는 다음과 같습니다.
var num = 10;
switch(num)
{
case 5:
document.write("num은 5입니다.")
break
case 10:
document .write("num은 10입니다.");
break;
default:
document.write("num is: " num);
목록 17에서는 Case 절, Break 문 및 기본 절을 사용한다는 점을 눈치챘을 것입니다. 이러한 절과 명령문은 switch 문의 매우 중요한 부분입니다. Case 절은 switch 값이 해당 절에 사용된 데이터 값과 같은지 여부를 결정합니다. break 문은 switch 문의 나머지 부분 실행을 중단하거나 중지하며, default 절은 Case 문이 실행되는지 여부를 나타냅니다. 가 없거나 실행된 Case 문에 break 문이 없으면 기본적으로 스크립트가 실행됩니다. 예를 들어, Listing 18은 실행된 Case 문에 break 문이 없는 경우 여러 Case 문과 기본 문이 실행되는 방법을 보여줍니다.
목록 18. 중단 없이 여러 줄의 코드 실행
var num = 10 switch(num)
case 5:
document.write("숫자는 5입니다.");
break;
case 10:
document.write("숫자는 10입니다.")
기본값:
document.write("숫자: " num)
}
이 스크립트의 결과는 먼저 "num is equal to 10"이라는 문장이고 그 뒤에 "num is: 10"이라는 문장이 나옵니다. 이 상황을 직선 스위치라고도 합니다.
이 섹션의 시작 부분에서 언급했듯이 조건문은 모든 스크립팅 또는 프로그래밍 언어의 모든 논리의 중추이지만 함수가 없으면 엉킨 것처럼 보이는 코드가 됩니다.
함수
함수가 유용한 데는 여러 가지 이유가 있습니다. 함수는 이벤트나 함수 호출에 의해서만 실행될 수 있는 스크립트의 컨테이너이므로 브라우저가 웹 페이지에 포함된 스크립트를 처음 로드하고 실행할 때 함수가 실행되지 않습니다. 함수의 목적은 작업을 수행하는 스크립트를 포함하여 언제든지 스크립트를 실행하고 작업을 실행할 수 있도록 하는 것입니다.
함수 키워드로 시작하고 그 뒤에 공백, 함수 이름을 입력하면 함수를 쉽게 구성할 수 있습니다. 함수 이름으로 사용할 문자열을 선택할 수 있지만, 함수 이름과 함수가 수행할 작업 사이에 연관성이 있다는 것이 중요합니다. 목록 19에서는 기존 변수의 값을 수정하는 함수의 예를 보여줍니다.
목록 19. 간단한 함수 만들기
var num = 10
functionchangeVariableValue()
{
num = 11; >}
changeVariableValue();
document.write("num is: " num)
목록 19의 예는 함수를 작성하는 방법만 보여주는 것이 아닙니다. 또한 변수 값을 수정하는 함수를 호출하는 방법도 보여줍니다. 이 예에서는 변수가 함수와 마찬가지로 기본 스크립트 범위에서 선언되어 함수가 변수의 존재를 알 수 있으므로 변수 값을 변경할 수 있습니다. 그러나 함수 내부에서 변수를 선언하면 함수 외부에서 해당 변수에 접근할 수 없습니다.
함수는 함수 매개변수를 통해 데이터를 받을 수도 있습니다. 함수 호출에는 함수의 형식 매개변수 수에 따라 하나 이상의 실제 매개변수가 있을 수 있습니다. 형식 매개변수(매개변수)와 실제 매개변수(인수)는 종종 혼동됩니다. 형식 매개변수는 함수 정의의 일부인 반면 실제 매개변수는 함수를 호출할 때 사용되는 표현식입니다. Listing 20에서는 형식 매개변수를 사용하고 함수 호출에서 실제 매개변수를 사용하는 함수의 예를 보여줍니다.
목록 20. 함수 매개변수 사용
function 증가(_num)
{
_num;
increase(num);
document.write("num is: " num);
return 문은 함수에서도 일반적으로 사용됩니다. 함수에서 스크립트를 실행한 후 값을 반환합니다. 예를 들어 함수에서 반환된 값을 변수에 할당할 수 있습니다. 목록 21의 예는 스크립트를 실행한 후 함수에서 값을 반환하는 방법을 보여줍니다.
목록 21. 함수에서 return 문 사용
function add(_num1, _num2)
return _num1 _num2;
var num = add(10, 10);
document.write("num is: " num)
이 스크립트의 결과는 "num is: 20 ". 이 함수의 좋은 점은 전달한 두 개의 숫자를 추가하고 추가된 값을 반환할 수 있다는 것입니다. 이를 목록 20과 같이 항상 동일한 값을 변경하는 대신 모든 변수에 할당할 수 있습니다. 변수의 값.
루프
이미 살펴보았듯이 배열은 재사용 가능한 대량의 데이터를 저장하는 좋은 방법입니다. 그러나 이는 시작에 불과합니다. for 및 while 루프는 이러한 배열을 반복하고 해당 값에 액세스하며 이를 사용하여 스크립트를 실행하는 기능을 제공합니다.
JavaScript 언어에서 가장 일반적으로 사용되는 루프 유형은 for 루프입니다. for 루프는 일반적으로 다음과 같이 구성됩니다. 변수에 숫자 값이 할당된 다음 비교 연산자를 사용하여 변수에 다른 값이 비교되고 마지막으로 숫자 값이 증가하거나 감소합니다. for 루프의 비교는 일반적으로 초기 변수의 값이 다른 값보다 작거나 큰지 여부를 결정합니다. 그런 다음 조건이 true인 기간 동안 루프가 실행되고 변수는 다음 값까지 증가하거나 감소합니다. 조건이 false로 평가됩니다. 목록 22에서는 값이 배열 길이보다 작을 때 실행되는 for 루프를 작성하는 방법에 대한 예를 제공합니다.
목록 22. for 루프 구성 및 배열 순회
var colors = new Array("orange", "blue", "red", "brown" ); for(var i=0; i
document.write("색상은 " colors[i] "
");
}
배열의 길이 속성은 배열의 항목 수와 동일한 값을 제공합니다. 여기서도 쉽게 오해할 수 있는 점은 배열의 ID가 0부터 시작한다는 것입니다. 배열에 항목이 4개 있는 경우 길이는 4이지만 배열의 인덱스는 0, 1, 2, 3이므로 4는 없습니다.
또 다른 유형의 루프는 while 루프입니다. 이는 for 루프보다 빠르게 실행되지만 특정 조건이 true일 때 스크립트를 실행하는 등 배열을 순회하지 않는 상황에 적합합니다. 목록 23에서는 숫자 변수가 10보다 작을 때 스크립트를 실행하는 while 루프를 작성하는 방법을 보여줍니다.
목록 23. while 루프 구성
var i = 0
while(i<10)
{
document.write( i " ");
i
}
while 루프의 스크립트에는 숫자 변수를 중첩하는 코드 줄이 포함되어 있음을 알 수 있습니다. 조건이 거짓입니다. 이 코드 줄이 없으면 무한 루프만 남게 됩니다.
결론
JavaScript 언어는 가장 인기 있는 언어 중 하나라고 할 수 있는데 이제 그 이유를 알 수 있습니다. 이 간단하면서도 풍부한 스크립팅 언어는 수많은 가능성을 제공하며 웹사이트 방문자가 다운로드한 웹페이지와 상호 작용할 수 있는 매우 강력한 도구를 제공합니다. 이 기사는 JavaScript 언어의 기본 원리를 이해하기 위한 기초를 마련했습니다. 이제 JavaScript 라이브러리 기능이 작동하는 방식과 이를 사용하여 웹 클라이언트 논리 작성 프로세스를 단순화하는 방법을 더 쉽게 이해할 수 있습니다. 다음으로 해야 할 일은 이러한 개념을 실제로 적용하고 JavaScript 객체 탐색을 시작하는 것입니다.