JavaScript란 무엇이며 어떻게 작동합니까?

JavaScript란 무엇이며 어떻게 작동합니까?

JavaScript는 현대 웹 개발의 필수 요소가 되었습니다. 이 강력한 언어는 모든 웹 개발자가 이해할 수 있는 필수 도구로 발전했습니다.





JavaScript에는 기존 프로그래밍 언어와 다른 특별한 기능이 있습니다. 우리는 그것이 무엇인지, 어떻게 작동하는지, 무엇을 할 수 있는지 알아볼 것입니다. 분해해 봅시다.



자바스크립트란?

JavaScript는 웹용 스크립팅 언어입니다. 이는 해석된 언어이므로 C 또는 C++와 같은 코드를 번역하기 위해 컴파일러가 필요하지 않습니다. JavaScript 코드는 웹 브라우저에서 직접 실행됩니다.





언어의 최신 버전은 2018년 6월에 릴리스된 ECMAScript 2018입니다.

다른 브랜드의 램을 혼합 할 수 있습니까?

JavaScript는 HTML 및 CSS와 함께 작동하여 웹 앱 또는 웹 페이지를 구축합니다. JavaScript는 Google Chrome, Firefox, Safari, Microsoft Edge, Opera 등과 같은 대부분의 최신 웹 브라우저에서 지원됩니다. Android 및 iPhone용 대부분의 모바일 브라우저는 이제 JavaScript도 지원합니다.



JavaScript는 웹 페이지의 동적 요소를 제어합니다. 웹 브라우저에서 작동하며 최근에는 웹 서버에서도 작동합니다. API(응용 프로그래밍 인터페이스)도 JavaScript에서 지원하여 더 많은 기능을 제공합니다.

JavaScript가 작동하는 모든 방식을 이해하는 것은 웹 프로그래밍이 작동하는 방식을 이해하면 조금 더 쉬우므로 더 자세히 알아보겠습니다.



웹 앱 빌딩 블록

웹 사이트와 앱을 구축하는 세 가지 구성 요소는 HTML(Hypertext Markup Language), CSS(Cascading Style Sheets) 및 JavaScript입니다. 각각은 웹 앱을 만드는 역할이 있습니다.

  • HTML 웹 페이지의 골격을 만드는 마크업 언어입니다. 모든 단락, 섹션, 이미지, 제목 및 텍스트는 HTML로 작성됩니다. 콘텐츠는 HTML로 작성된 순서대로 웹사이트에 나타납니다.
  • CSS 스타일과 레이아웃의 추가 측면을 제어합니다. CSS는 색상, 글꼴, 열, 테두리 등을 만드는 웹사이트의 디자인을 만드는 데 사용됩니다. 일반 텍스트 요소에서 다채로운 디자인으로 웹사이트를 가져옵니다.
  • 세 번째 요소는 자바스크립트. HTML과 CSS는 구조를 생성하지만 거기에서 아무 것도 하지 않습니다. JavaScript는 앱에서 동적 활동을 생성합니다. JavaScript의 스크립팅은 버튼을 클릭할 때 기능을 제어하는 ​​기능, 암호 형식이 인증되는 방법, 미디어를 제어하는 ​​방법을 제어합니다.

세 부분 모두가 서로 조화롭게 작동하여 본격적인 앱을 만듭니다. HTML과 CSS가 완전히 익숙하지 않다면 HTML과 CSS에 대해 더 많이 배우는 것이 좋습니다.



JavaScript는 어떻게 작동합니까?

JavaScript를 작성하기 전에 내부에서 어떻게 작동하는지 아는 것이 중요합니다. 웹 브라우저가 작동하는 방식과 DOM(문서 개체 모델)에 대해 배워야 할 두 가지 중요한 부분이 있습니다.

웹 브라우저는 웹 페이지를 로드하고 HTML을 구문 분석하고 콘텐츠에서 DOM(문서 개체 모델)이라고 하는 것을 생성합니다. DOM은 웹 페이지의 라이브 뷰를 JavaScript 코드에 제공합니다.

그런 다음 브라우저는 이미지 및 CSS 파일과 같이 HTML에 연결된 모든 것을 가져옵니다. CSS 정보는 CSS 파서에서 가져옵니다.

HTML과 CSS는 DOM에 의해 결합되어 웹 페이지를 먼저 생성합니다. 그러면 브라우저의 JavaScript 엔진이 JavaScript 파일과 인라인 코드를 로드하지만 코드를 즉시 실행하지는 않습니다. HTML 및 CSS 로드가 완료될 때까지 기다립니다.

이 작업이 완료되면 코드가 작성된 순서대로 JavaScript가 실행됩니다. 그 결과 DOM이 JavaScript 코드로 업데이트되고 브라우저에서 렌더링됩니다.

여기서 순서가 중요합니다. JavaScript가 HTML 및 CSS가 완료될 때까지 기다리지 않으면 DOM 요소를 변경할 수 없습니다.

JavaScript로 무엇을 할 수 있습니까?

JavaScript는 Python과 같은 일반 언어가 할 수 있는 대부분의 작업을 수행할 수 있는 본격적인 프로그래밍 언어입니다. 여기에는 다음이 포함됩니다.

충전하는 동안 휴대전화가 뜨거워지는 이유
  • 변수 선언 .
  • 값 저장 및 검색.
  • 다음을 포함한 함수 정의 및 호출 화살표 기능 .
  • JavaScript 객체 및 클래스 정의.
  • 외부 모듈 로드 및 사용.
  • 클릭 이벤트에 응답하는 이벤트 핸들러를 작성합니다.
  • 서버 코드 작성.
  • 그리고 훨씬 더.

경고: JavaScript는 강력한 언어이기 때문에 악성 코드, 바이러스 및 브라우저 해킹을 작성하여 사용자에게 피해를 줄 수 있습니다. 여기에는 브라우저 쿠키, 암호, 신용 카드 도용에서 컴퓨터에 바이러스 다운로드에 이르기까지 다양합니다.

자바스크립트 사용

코드 예제와 함께 몇 가지 JavaScript 기본 사항을 살펴보겠습니다.

변수 선언

JavaScript는 동적으로 유형이 지정되므로 코드에서 변수 유형을 선언할 필요가 없습니다.

let num = 5;
let myString = 'Hello';
var interestRate = 0.25;

연산자

덧셈

12 + 5
>> 17

빼기

20 - 8
>> 12

곱셈

5 * 2
>> 10

분할

50 / 2
>> 25

계수

45 % 4
>> 1

배열

let myArray = [1,2,4,5];
let stringArray = ['hello','world'];

기능

JavaScript는 함수를 작성할 수 있습니다. 여기에 숫자를 추가하는 간단한 함수가 있습니다.

Mac에서 스크린샷을 자르는 방법
function addNumbers(num1,num2){
return num1 + num2;
}
>> addNumbers(10,5);
>> 15

루프

JavaScript는 반복을 위한 루프를 수행할 수 있습니다. 루프를 위해 그리고 동안 루프.

for(let i = 0; i <3; i++){
console.log('echo!');
}
>> echo!
>> echo!
>> echo!
let i = 0;
while(i <3) {
console.log('echo!');
i++;
}
>> echo!
>> echo!
>> echo!

코멘트

// Writing a comment
/*Writing a multi-line comment
You can use as many lines as you like
to break up text and make comments more readable
*/

웹 페이지에서

웹 페이지에서 JavaScript를 로드하는 가장 일반적인 방법은 스크립트 HTML 태그. 요구 사항에 따라 다음 방법 중 하나를 사용할 수 있습니다.

  • 다음과 같이 외부 JavaScript 파일을 웹 페이지에 로드합니다. |_+_|
  • 자바스크립트가 웹페이지와 다른 도메인에 있는 경우 다음과 같이 전체 URL을 지정할 수 있습니다. |_+_|
  • JavaScript는 HTML에 직접 포함될 수 있습니다. 여기 |_+_|

이러한 방법 외에도 요청에 따라 JavaScript 코드를 로드하는 방법이 있습니다. 실제로 런타임에 적절한 종속성이 해결된 JavaScript 모듈을 로드하고 실행하는 데 전념하는 프레임워크가 있습니다.

그것들은 더 고급 주제이며, 지금 당신은 기초를 배우고 있습니다.

샘플 JavaScript 코드 조각

다음은 웹 페이지에서 사용되는 방법을 설명하기 위한 몇 가지 간단한 JavaScript 코드 샘플입니다. 다음은 DOM과 함께 작동하는 코드의 예입니다.

  • 다음은 모두 선택 굵게 문서의 요소를 선택하고 첫 번째 요소의 색상을 빨간색으로 설정합니다. |_+_|
  • 에서 이미지를 변경하고 싶습니다. 이미지 꼬리표? 다음은 이벤트 핸들러를 연결합니다. 딸깍 하는 소리 버튼 이벤트. |_+_|
  • 단락의 텍스트 내용 업데이트( NS ) 요소? 설정 내부HTML 표시된 요소의 속성: |_+_|

이 코드 샘플은 웹 페이지에서 JavaScript를 사용하여 수행할 수 있는 작업을 간략하게 보여줍니다. 시작하기 위해 코딩하는 방법을 가르쳐줄 수 있는 많은 자습서가 있습니다. 이 페이지를 포함하여 모든 웹 페이지에서 시도해 볼 수 있습니다! 콘솔을 열고 JavaScript 코드를 사용해 보십시오.

이제 JavaScript가 하는 일을 알았습니다.

바라건대, 이 소개가 JavaScript에 대한 통찰력을 얻고 웹 프로그래밍에 대해 흥미를 갖게 되기를 바랍니다. 에서 모두 요약할 수 있습니다. 편리한 JavaScript 치트 시트 . JavaScript에 대해 배울 것이 훨씬 더 많습니다. 좀 더 편해지면 Document Object Model을 사용하는 방법을 배우지 않겠습니까? TypeScript에 대해 배우는 데 관심이 있을 수도 있습니다.

공유하다 공유하다 트위터 이메일 명령 프롬프트를 사용하여 Windows PC를 청소하는 방법

Windows PC의 저장 공간이 부족한 경우 이 빠른 명령 프롬프트 유틸리티를 사용하여 정크를 정리하십시오.

다음 읽기 관련 항목
  • 기술 설명
  • 프로그램 작성
  • 웹 개발
  • 자바스크립트
  • 스크립팅
저자 소개 앤서니 그랜트(40편 게재)

Anthony Grant는 프로그래밍 및 소프트웨어 분야의 프리랜서 작가입니다. 그는 프로그래밍, Excel, 소프트웨어 및 기술을 다루는 컴퓨터 공학 전공자입니다.

앤서니 그랜트가 참여한 작품 더보기

뉴스레터 구독

뉴스레터에 가입하여 기술 팁, 리뷰, 무료 전자책 및 독점 거래를 확인하십시오!

구독하려면 여기를 클릭하세요.