JavaScript Tutorial for Beginners: Learn JavaScript Basics in 1 Hour [2019]

이 3 분짜리 소개에서는 자주 묻는 네 가지 질문에 대답하겠습니다 자바 스크립트에 대해

자바 스크립트 란 무엇입니까? 자바 스크립트 코드는 어디에서 실행되며 그 차이점은 무엇입니까? JavaScript 및 ECMAScript 첫 번째 질문부터 시작하겠습니다 무엇입니까 자바 스크립트? JavaScript는 가장 널리 사용되고 널리 사용되는 프로그래밍 중 하나입니다 지금 세계의 언어 다른 어떤 것보다 빠르게 성장하고 있습니다

Netflix, Walmart 및 PayPal 빌드와 같은 프로그래밍 언어 및 대기업 JavaScript를 둘러싼 전체 응용 프로그램 그리고 여기에 평균 급여가 있습니다 미국의 자바 스크립트 개발자 그것은 일년에 72,000 달러입니다 그래서 자바 스크립트 학습에서 좋은 성과를 거둘 수있는 좋은 기회입니다

너는 할 수있다 프런트 엔드 개발자 또는 백 엔드 개발자 또는 전체 스택으로 작업 프런트 엔드와 백 엔드를 모두 알고있는 개발자 자, 두 번째 질문 JavaScript로 무엇을 할 수 있습니까? 오랫동안, javascript는 대화식 웹 페이지를 구축하기 위해 브라우저에서만 사용되었습니다 개발자는 자바 스크립트를 장난감 언어로 언급하지만 그 당시는 사라졌습니다

대기업의 대규모 커뮤니티 지원 및 투자 페이스 북과 구글 요즘 당신은 웹이나 모바일 애플 리케이션을 만들 수 있습니다 채팅 및 비디오와 같은 실시간 네트워킹 응용 프로그램 스트리밍 서비스 명령 줄 도구 또는 게임은 여기에 세 번째 예가 있습니다 질문 자바 스크립트 코드를 실행 자바 스크립트는 원래 설계되었습니다 브라우저에서만 실행되므로 모든 브라우저에는 JavaScript 엔진이 있습니다 JavaScript 코드 예를 들어 자바 스크립트 엔진을 실행할 수있는 firefox와 chrome은 2009 년 SpiderMonkey와 v8이 매우 똑똑한 엔지니어라고 불립니다 Ryan Dahl은 오픈 소스 자바 스크립트 엔진을 크롬 및 임베디드 C ++ 프로그램 내에서 그는 그 프로그램 노드를 C ++ 프로그램이라고 부른다

Google의 v8 JavaScript 엔진이 포함되어 있으며 실행이 가능합니다 자바 스크립트 코드가 브라우저에서 빠져 나와 자바 스크립트 코드를 실행 노드로 가져오고 이것이 자바 스크립트로 수행 할 수 있음을 의미합니다 웹 및 모바일 애플리케이션을위한 백엔드 구축하기 코드는 브라우저 또는 노드 브라우저에서 실행될 수 있으며 노드는 JavaScript 코드의 런타임 환경과 마지막으로 마지막 질문 JavaScript와 Eggman 스크립트의 차이점은 ECMO 스크립트가 사양 자바 스크립트는 다음을 확인하는 프로그래밍 언어입니다 이 명세는 쉼표라고 불리는이 조직을 가지고있다 이 Eggman 스크립트를 관리하는 표준을 정의하는 책임이 있습니다

스펙은 1997 년 에그먼 스크립트의 첫 번째 버전이 발표 된 후 2015 년부터 ACMA는 연례 출간을 위해 노력하고 있습니다 최신 사양이므로 2015 년에 기모노 스크립트 2015를 발표했습니다 이 정의를 정의하기 위해 ECMO 스크립트 버전 6 또는 es6이라고도합니다 자바 스크립트에 대한 많은 새로운 기능 자바 스크립트가 작동하고있어 모든 브라우저에 자바 스크립트 엔진이 있습니다 물론 추가 도구 없이도 여기에 JavaScript 코드를 쉽게 작성할 수 있습니다

이것은 실제 응용 프로그램을 만드는 방법이 아니지만 이것은 단지 빠른 데모이므로 빈 영역을 마우스 오른쪽 버튼으로 클릭하고 지금 검사하십시오 Chrome 개발자 도구가 열립니다 여기서는 콘솔 탭을 선택합니다 자바 스크립트 콘솔이며 여기에 유효한 자바 스크립트 코드를 작성할 수 있으므로이 코드를 입력하십시오 콘솔 도트 로그 여기에 하나의 코드를 넣은 다음 다른 하나의 코드로 세상을 보아라

종료 할 때 괄호를 닫고 끝에 세미콜론을 추가하십시오 코스를 통해 당신은 이것이 무엇을 의미하는지 정확히 이해할 것입니다 지금은 그것에 대해 걱정하지 마라 이제 나는 ENTER를 누를 것이고, 너는 안녕을 볼 수있다 콘솔의 세계 메시지 여기에 수학 표현을 쓸 수도 있습니다

예를 들어 두 개 더하기 두 개를 얻으면 네 개를 얻거나이 경고와 같은 것을 할 수 있습니다 싱글 코트 야 연습을 입력하고 여기에 다음 강의에서 경고가 있어요 글쓰기를위한 개발 환경 설정에 관해 이야기하겠습니다 자바 스크립트 코드 자바 스크립트 코드를 작성하려면 코드 편집기가 필요합니다 Visual Studio 코드 또는 예 코드 숭고한 텍스트를 포함하여 거기에있는 코드 편집기 원자 등이 내 좋아하는 비주얼입니다 Visual Studio에서 제공하는 코드에서 다운로드 할 수있는 Studio 코드는 매우 유용합니다

간단한 가벼운 크로스 플랫폼 및 강력한 편집기 그래서 만약 당신이 없어 귀하의 컴퓨터에 비주얼 스튜디오 코드가 가서 다른 일을 다운로드 난 노드 J에서 노트를 다운로드 할 수 있습니다 org 이제 기술적으로 반드시 실행을 알 필요는 없습니다 JavaScript는 앞에서 설명한대로 JavaScript 코드를 내부에서 실행할 수 있기 때문에 브라우저 나 EndNote를 사용하고 있지만, 우리가 사용하기 때문에 노드를 사용하는 것이 좋습니다 타사 라이브러리를 설치하려면이 섹션의 뒷부분에서 노드의 미리보기를 보여 주므로 지금 비디오를 일시 중지하고 Visual Studio를 다운로드하십시오 끝나면 코드는 물론 메모도 계속보고 있습니다

새 폴더 호출을 만들려면 J의 대시 기본 이름은 실제로는 아니야 우리는 지금이 과정의 모든 코드를 작성하기위한 폴더를 갖고 싶습니다 이 폴더를 비주얼 스튜디오 코드에 드래그 앤 드롭하세요이 폴더가 있습니다 열어 새 파일을 여기에 추가하자

index dot HTML 이제는 알 필요가 없다 HTML을 사용하려면이 과정을 수강해야하지만 프런트 엔드 개발자가되기를 원한다면 이 파일에서 HTML을 잘 알아야합니다 느낌표를 입력해야합니다 마크를 누른 다음 탭을 누르면 기본 HTML 보일러 플레이트가 생성됩니다 이 코드 중 하나를 정말로 신경 써야합니다

우리는 이것을 우리의 호스트로 사용합니다 다음 강의에서 볼 수있는 자바 스크립트 코드이므로 지금 변경 사항을 저장하십시오 여기에서 확장 탭을 엽니 다이 상자에서 라이브 서버를 검색합니다 라이브 서버는 매우 가벼운 웹 서버로 우리가 제공하는 서버입니다

우리의 웹 응용 프로그램이 이렇게 설치하면 Visual Studio를 다시 시작해야합니다 코드가 끝나면 Explorer 탭으로 이동하여 indexhtml을 마우스 오른쪽 버튼으로 클릭하고 라이브 서버로 열기 이렇게하면 Chrome 또는 기본 브라우저가 열리고이 주소로 연결됩니다 바로 지금부터 우리 웹 어플리케이션이 제공되는 곳입니다 빈 페이지를 사용하여 모든 것이 제대로 작동하는지 확인하십시오

본문 섹션의 시각적 인 스튜디오 코드로 돌아가서 h1 프레스 탭을 추가하겠습니다 이제 hello world를 입력하여 브라우저에서 변경 사항을 다시 저장하십시오 이 페이지는 자동으로 새로 고쳐지며 여기에 안녕하세요 다음 강의에서는 첫 번째 JavaScript 코드를 작성합니다 이제 우리는 자바 스크립트 코드를 작성할 준비가되었습니다

여기에 JavaScript 코드가 필요합니다 스크립트 요소가 필요합니다 머리 부분이나 본문에 여기에 추가 할 수있는 스크립트 요소를 추가 할 수 있습니다 가장 좋은 방법은 본문 끝 부분에 script 요소를 두는 것입니다 h1 이후에 기존의 모든 요소들 이후에 섹션이 생기면 스크립트를 입력 할 것입니다

Tab 키를 누르는 것은 우리의 스크립트 요소입니다 왜 제가 이것을 최고라고 말했습니까? 연습이 스크립트 요소를 여기에 두어야합니다 두 가지 이유가 있습니다 한 가지 이유는 브라우저가이 파일을 위에서 아래로 파싱하므로 이 스크립트 요소를 여기 head 섹션에 넣으면 많은 것을 가질 수 있습니다 자바 스크립트 코드가 있으므로 브라우저가 구문 분석 및 실행 중일 수 있습니다

JavaScript 코드를 사용하면 페이지 내용을 렌더링 할 수 없으므로 당신의 사용자가 당신의 웹 페이지를봤을 때 나쁜 사용자 경험을 만들 것입니다 브라우저가 사용 중일 때 비어 있거나 비워 두어 JavaScript를 구문 분석하고 실행하십시오 그래서 이유는 1 코드 두 번째 이유는 거의 항상 코드입니다 스크립트 요소 사이에있는 요소는이 요소에 대해 이야기해야합니다 예를 들어 웹 페이지에서 일부 요소를 표시하거나 숨길 수 있습니다 본문 섹션의 끝에 코드를 작성하면 요소는 브라우저에 의해 렌더링됩니다

이제는이 규칙에 대한 예외가 있습니다 때로는 머리에 배치해야하는 제 3 자 코드를 사용하고 있습니다 섹션이 있지만 예외는 예외입니다 본문 섹션의 끝에 JavaScript 코드를 추가해야합니다 여기에 우리가 있습니다

마지막 강의 콘솔 도트 로그에 쓴 것과 같은 코드를 작성합니다 안녕하세요 우리는 이것에 대해 조금 더 자세히 이야기 할 것입니다 우리가 여기있는 것은 성명서가 이 경우 우리가 기록하기를 원하는 행동을 표현한다 콘솔의 메시지는 JavaScript의 모든 문장을 세미콜론 (semicolon) 여기에서 우리가 단일 코드 사이에 가지고있는 것을 문자열 문자열은 JavaScript의 문자 시퀀스입니다

이 표기법을 사용하면 두 개의 슬래시를 추가 할 수 있으며 이것은 혜성을 나타냅니다 여기에 코드에 설명을 추가 할 수 있습니다이 설명은 다음과 같이 무시됩니다 실행되지 않는 JavaScript 엔진은 코드를 문서화하기위한 것입니다 다른 개발자에게 왜 이것을 작성했는지 설명하고 싶을 때 이 방법으로 코드를 작성하면 코드가하는 일을 설명하지 않아도됩니다

코드 자체에서 로깅과 같은 것을 쓰고 싶지는 않습니다 대신 콘솔에서 코드에서 명백한 것입니다 이유와 집을 설명하고 싶다이 데모를 위해서 간단하게 추가 할 것이다 이 첫 번째 JavaScript 코드를 주석으로 달아 브라우저에 변경 사항을 다시 저장하십시오

우리는 콘솔을 다시 가져와 어딘가에 오른쪽 마우스 버튼을 클릭하여 검사해야합니다 또는 대안으로 Mac 또는 Alt에서 alt 명령을 사용하여 바로 가기를 사용할 수 있습니다 콘솔 탭이있는 경우 콘솔 탭을 가져 오는 창에 눈을 제어하십시오 즉시 눈에 띄지 않아 여기를 선택하면 여기를 볼 수 있습니다 안녕 세상 메시지 이제는 스크립트 요소 사이에 자바 스크립트 코드를 쉽게 작성할 수 있지만 수천 또는 수백만 개의 코드가 포함 된 실제 응용 프로그램 여기에 우리가 추출하고자하는 코드를 모두 작성하고 싶지는 않습니다

HTML 코드에서 자바 스크립트 코드를 분리하십시오 은유를줍니다 너의 침실에 너의 집에 대해서 생각해 보라 너는 너의 침대와 옷을 가지지 마라 부엌에 옷을 보관하십시오

이것은 우리가 우려의 분리라고 부르는 것입니다 우리는 프로그래밍에서 동일한 원칙을 가지고 있으므로 HTML을 분리해야합니다 이는 JavaScript에 관한 모든 내용으로 행동에 관한 것입니다 마우스를 움직일 때 일어날 일을 웹 페이지에서 어떻게 처리해야합니까? 주어진 요소에 뭔가가 나타날 수 있습니다 숨겨져 있으므로 JavaScript를 사용하여 동작을 구현하므로 탐색기 윈도우가 열립니다

새 파일을 인덱스에 추가 j / s를 인덱스에 다시 넣습니다 여기에 JavaScript 코드를 붙여서 인덱스 J에 붙여 넣을 수 있습니다 우리는 하나의 파일에 실제 자바 스크립트 파일을 가지고있다 우리는 나중에 수백 또는 수천 개의 자바 스크립트 파일을 가지고 있습니다 물론이 파일들을 묶어서 어떻게 제공하는지 배우게 될 것입니다

클라이언트에 번들을 저장하면 이제는 모든 변경 사항을 indexhtml에 다시 저장합니다 우리의 JavaScript 코드는 여기에있는 파일을 참조 할 필요가있는 별도의 파일에 있습니다 여기에 SRC라는 속성을 추가해 보겠습니다 SRC는 소스 코드를 줄여서 색인으로 설정합니다

그 j / s 그래서 우리의 자바 스크립트 코드는 이제 색인에있는 브라우저를 알려줍니다 변경 사항을 브라우저에 저장하면 여전히 세계가 볼 수 있습니다 메시지와 그 다음 코드에서 우리 코드가 여전히 작동하는지 확인합니다 노드에서이 코드를 실행하려고합니다 마지막 강의에서 우리는이 자바 스크립트 코드를 이 강의의 브라우저에서 동일한 코드를 실행하는 방법을 보여 드리겠습니다 노드 그래서 당신은 당신의 컴퓨터에 노드를 설치했다고 가정합니다

nodejs org로 가서 노드의 최신 버전을 다운로드하십시오 Windows에서 명령 프롬프트를 열면 Mac에서 터미널 및 헤드 열기 지금이 폴더에서 이전에 생성 한 폴더로 넘어 가고 node와 pass를 실행합니다 인덱스 자바 스크립트 파일의 이름입니다 dot JSON c node는 구글의 v8 자바 스크립트 엔진이 포함되어 있습니다

코드를 실행하면 코드를 실행할 수 있습니다 브라우저의 JavaScript 코드는 노드가 실행을위한 런타임 환경입니다 자바 스크립트 코드는 이제 코드와 비교하여 팁을 보여 드리겠습니다 통합 터미널을 사용하면 별도로 명시 적으로 열어야합니다 터미널 창으로보기 메뉴 아래의 맨 위에 우리가 통합했습니다

터미널 메모 바로 가기는 여기에 Mac과 Windows의 지름길입니다 다른 바로 가기가 있으므로 여기를 선택하고 여기에 통합되었습니다 파일을 생성 한 폴더와 같은 폴더를 가리키는 터미널 명시 적으로이 폴더로 이동해야하며 여기서 인덱스 된 노드를 실행할 수 있습니다 j / s 에서뿐만 아니라 이제는 노드와 더 이상 일하지 않을 것입니다 노드는 실제로 복잡한 개별 주제입니다

노드에 대한 포괄적 인 코스가 있습니다 14 시간의 내용으로 학습을 마치고이 과정을 마치면 노드에서 항상 내 노트 코스를 볼 수 있습니다 안녕하세요, mahshar입니다 자바 스크립트 자습서를 시청 해 주셔서 감사합니다 이 튜토리얼이 내 완성품의 일부라는 것을 빨리 알리고 싶다

자바 스크립트 과정에서 모든 필수 개념을 배울 수 있습니다 자바 스크립트 과정에는 많은 연습 문제와 해결책이 담겨 있습니다 과정을 보면서 끝나면 완료 증명서를 받게됩니다 관심이있는 경우 동영상 설명에서 링크를 찾을 수 있으며 그렇지 않은 경우 링크를 찾을 수 있습니다 그 다음 섹션이 다가올 때 계속 지켜봐

이 섹션을 시작하는 가장 중요한 변수 중 하나 인 변수에 대해 논의 해 보겠습니다 자바 스크립트 및 다른 프로그래밍 언어의 기본 개념 프로그래밍 우리는 변수를 사용하여 일시적으로 컴퓨터의 메모리에 데이터를 저장합니다 그래서 우리는 어딘가에 우리의 데이터를 저장하고 그 메모리 위치와 이름을주고 미래에 주어진 위치의 데이터를 읽을 수있는이 이름은 은유는 물건을 정리할 때 사용하는 상자에 대해 생각합니다 다양한 상자에 각 상자에 라벨을 붙여 놓으면 쉽게 찾을 수 있습니다 물건이 맞다

변수는 상자와 같다 우리가 박스 안에 넣은 것은 값이다 우리가 변수에 지정하는 데이터와 레이블은 box는 우리 변수의 이름입니다 이제 코드에서 이것을 보도록하겠습니다 Jas 이전에 es6 이전에 변수를 선언 할 것입니다

VAR 키워드를 사용하여 변수를 선언하지만 var에 문제가 있습니다 당신이 es6에서 앞으로 나아갈 방향에서 나중에 발견 할 것 인 것에 따라 최고의 연습은 lead 키워드를 사용하여 변수를 선언하는 것입니다 이 변수는 이름이나 식별자이며 이것은 우리가 레이블에 붙인 레이블과 같습니다 상자에서이 이름을 부르면 마침내 이걸 끝내야합니다 세미콜론으로 선언하면 이제 콘솔에 이것을 기록하고 우리가 콘솔에서 로그 이름을 다시 얻습니다

변경 사항을 저장하고 세미콜론으로이 문장을 종료해야합니다 우리가 정의한 콘솔에서 우리가 정의한 디폴트 변수에 의해 정의되지 않은 것을 볼 수있다 자바 스크립트의 값은 정의되지 않았습니다 이제 선택적으로 초기화 할 수 있습니다 변수이므로 일련의 문자 인 문자열로 설정합니다

Marsh처럼 작은 따옴표를 사용하고 있습니다 큰 따옴표도 사용할 수 있습니다 다른 개발자는 다른 환경 설정을 가지고 있지만 사용하는 것이 더 일반적입니다 변경 사항을 저장할 때 JavaScript에서 문자열 선언을위한 작은 따옴표 하나 대신 우리는 콘솔의 Marsh를 여기에서 볼 수 있습니다 이 예제에서는 name이라는 변수를 선언했으며이를이 값으로 설정했습니다

값을이 문자열에 지정하면이 변수의 이름을 지정하는 몇 가지 규칙이 있습니다 우선 규칙은 그들이 예약 될 수 없다는 것입니다 keyword in so JavaScript 그래서 우리는 예약 된 키워드를 가지고 있습니다 let은 그들 중 하나입니다 당신은 또한 다른 VAR 등등이 있다면이리스트를 암기 할 필요가 없습니다 이 이름 중 하나를 사용하려고하면 예를 들어 오류가 발생합니다 빨간색으로 밑줄을 긋는 경우 알림이 빨간색으로 바뀌면 알림이 빨간색으로 표시됩니다

유효한 식별자입니다 이제 다시 되돌립니다 두 번째 규칙은 다음과 같습니다 우리가 의미있는 레이블처럼 의미있는 이름을 갖기를 원한다는 의미가있다 a 또는 PE 또는 1과 같은 이름을 사용하는 개발자 또는이 변수를 알 수 없음 이름은 우리에게 이러한 변수의 목적이 무엇인지 전혀 알려주지 않습니다

데이터가 해당 메모리 위치에서 복원되므로 항상 의미있는 설명적인 이름 이제 괜찮습니다 이름으로 돌아 가기 세 번째 규칙은 시작할 수 없다는 것입니다 숫자로 하나의 이름처럼 변수를 가질 수는 없지만 다시 할 수 있습니다 두 번째 규칙으로 돌아가서 왜 그 이름을 하나의 변수라고 부르기를 원하십니까? 무의미한 권리이므로 항상 의미있는 이름을 사용하십시오 네 번째 규칙은 그들은 공백을 포함 할 수 없습니다

그것들을 함께 여기에 예를 들어 우리가 변수를 선언하고자 상상해 봅시다 그래서 첫 번째 이름과 그래서 여기에 내가 낙타의 표기법을 사용하고 있다는 것을 알았다 첫 번째 단어의 첫 번째 문자는 소문자 여야하며 첫 번째 문자 후에 나오는 모든 단어는 대문자 여야합니다 이것이 우리가 낙타 표기법이라고 부르는 것입니다 JavaScript에서 변수를 다른 이름으로 사용하기 위해 사용하는 규칙입니다 이 변수 이름에 대해 알아야 할 것은 그들은 대 / 소문자를 구분하므로 다른 변수를 선언하면 이름이 아니라 F를 대문자로 만들려면이 두 변수가 다르지만 전에 말했던 것처럼 낙타 표기법을 고수하면 변수 이름으로 끝나지 않을 것입니다

이것과 마지막으로 이들 변수에 대해 알아야 할 마지막 사항은 여러 변수를 선언하려면이 작업을 수행하는 두 가지 방법이 있습니다 한 줄로 선언하고 쉼표로 구분할 수 있습니다 이름과 성을 입력하십시오이 경우 초기화되지 않았습니다 둘 다 정의되지 않은 변수들 나는 선택적으로 하나 또는 둘 모두를 초기화 할 수있다

그들을 습지로 설정할 수 있고 성을 정의하지 않거나 설정할 수 있습니다 내 마지막 이름 인 Hammad에 e로 올리 겠지만 현대 모범 사례는 각각을 선언하는 것입니다 변수를 한 줄에 배치하여 첫 번째 선언을 세미콜론을 사용하고 두 번째 변수를 현대적인 새 줄에 선언하십시오 우리가 상수를 살펴볼 최상의 방법 이제는 이자율이라는 변수를 선언하여이자를 보자 rate로 설정하고 이것을 0

3으로 설정하면 이제는 항상 변경할 수있는 초기 값입니다 나중에 나중에 이렇게 기록하면 금리로 1을 말할 수 있습니다 물론 콘솔에서 새로운 값을 바로 볼 수 있으므로 변경 사항을 저장합니다 콘솔에 하나 있지만 실제 응용 프로그램에는 변수의 값이 변경되기를 원하지 않는 상황 그렇지 않으면 응용 프로그램에서 모든 종류의 버그를 만들 것입니다 변수 대신에 상수를 사용하기 때문에 변수의 값은 다음과 같이됩니다

이름의 의미는 바뀔 수 있지만 상수의 값은 바꿀 수 없습니다 여기서 우리가 Const로 바꾸면 이제 이자율은 상수가 될 것입니다 3 행의 콘솔에 오류가 표시 될 변경 사항을 저장합니다 우리는 금리를 재 할당하여 보겠습니다 변경 사항을 저장하고 여기에 오류가 있습니다

변수 우리는이 오류가 인덱스 도트 JSP에서 발생하는 것을 볼 수 있습니다 하지만 여기를 클릭하면이 오류가 발생한 코드의 행을 볼 수 있습니다 그래서 우리는 상수를 콘솔에 다시 할당 할 수 없습니다 그래서 여기에 있습니다 상수를 재 할당 할 필요가없는 경우 모범 사례가 기본값이어야합니다

변수를 재 할당해야하는 경우 그렇지 않으면 선택 사용 let 그래서 변수를 선언하고 초기화하는 법을 배웠습니다 우리가 변수 우물에 지정할 수있는 종류의 가치가 무엇인지 궁금합니다 당신은 문자열을 보았지만 우리는 기본적으로 더 많은 JavaScript를 가지고 있습니다 한쪽에는 두 가지 유형의 유형이 있는데 여기에는 값 유형이라고도하는 프리미티브가 있습니다 이 강의에서 다른 유형의 참조 유형이 프리미티브에 중점을두고 나중에 참조 유형에 대해 배우게 될 것입니다

지금 우리는 문자열 번호가 깡패가 끝나는 프리미티브의 범주에있는 과정 정의되지 않은 상태에서 각각의 동작을 살펴 보지 않도록합니다 string이라는 이름의 변수는 우리가 여기에있는 것입니다 문자열의 멋진 이름 인 문자열 리터럴을 호출하자 변수를 선언하고 숫자로 설정하여 H를 30으로 다시 설정하고 나는 30 살이 라기보다는 괜찮은 사람 한테 말하지 않는다 그래서 이것은 우리가 숫자라고 부르는 것입니다

litora 이제 부울을 부울 값으로 선언합시다 진실하거나 거짓일 수 있습니다 그래서 이것이 사실임이 판명되었습니다 부울 리터럴 (boolean literal)이라고 부르는 것을 우리가 원하는 상황에서 사용합니다 예를 들어 주문이 승인 된 후 출하해야하는 경우 부울 변수의 값은 true 또는 false 일 수 있습니다

true와 false는 둘 다 예약 키워드이므로 변수가 될 수 없습니다 이름을 지금 확인하기 전에 undefined를 보았습니다 그래서 다른 변수를 선언 할 수 있습니다 우리가 기본적으로 그것을 초기화하지 않으면 이름 값은 정의되어 있지 않지만이 값을 명시 적으로 설정할 수도 있습니다 undefined 그러나 대조적으로 그렇게 일반적인 것은 아니지만 다른 키워드가 있습니다 다른 변수를 선언하고 이것을 no로 설정하도록하지 마십시오

우리가주의 깊게 듣고 싶은 상황은 변수 예를 들어 사용자에게 색 목록을 표시 할 수 있습니다 사용자가 선택 항목이없는 경우 선택한 색상 변수를 알기 원한다면 앞으로 사용자가 색상을 선택하면이 색상을 다시 할당 할 것입니다 변수를 빨간색과 같은 색상으로 변경 한 다음 빨간색을 다시 클릭하면 선택을 제거합니다 그래서 우리는이 백 도구를 설정하지 않습니다 그래서 우리는 상황에서 규범을 사용합니다 여기서 우리는 변수의 값을 지우고 싶습니다

프리미티브 또는 값 유형 우리는 문자열 수를 가지고 있습니다 boolean은 정의되지 않았습니다 지금 es6에는 없습니다 우리는 상징이고 당신은 배울 것입니다 그 일에 관한 나중에 JavaScript를 많은 프로그래밍 언어와 분리하는 한 가지는 자바 스크립트는 동적 인 언어입니다

동적 인 것은 무엇을 의미합니까? 프로그래밍 언어의 유형 정적 언어 또는 동적 언어 정적 언어 우리가 변수를 선언 할 때 그 변수의 타입은 미래에는 동적 언어로 변경할 수 없습니다 JavaScript는 변수의 타입을 런타임에 바꿀 수 있습니다 코드에서 이것을 봅시다 마지막 강의의 예제에서 우리는이 이름을 선언했습니다 변수 이름을 문자열로 설정 했으므로 현재 이름 유형이 있습니다

문자열이지만 미래에는 바뀔 수 있습니다 콘솔에서 그렇게 보겠습니다 우리는이 유형의 연산자와 그 JavaScript 코드를 실행할 수 있습니다 우리는 변수의 타입을 검사 할 수 있습니다 이 경우 변수 인 우리의 이름 변수는 이름의 유형이 name과 같은 다른 값에 이름을 재 지정하고 check하면 문자열이 반환됩니다

타입의 모양이 이제는 숫자로 바뀌 었습니다 이것이 우리가 다이나믹이라고 부르는 것입니다 정적 언어와 달리 이러한 변수의 유형은 우리가 지금 할당 한 값에 따라 런타임에 결정 연산자 유형의 몇 가지 예를 살펴 보겠습니다 의 유형은 다른 예약 키워드이므로 변수를 가질 수 없습니다 이제는 ctrl + L을 눌러 콘솔을 지울 수있는 off라는 형식을 해제했습니다 나이를 a로 변경하면 나이의 유형을 살펴 봅시다

부동 소수점 숫자와 나는 그것이 이해가 안되는 것을 압니다 이 예제에서는 30 점 1을 가리킨 다음 연령 유형을 살펴 봅니다 자바 스크립트에서는 여전히 숫자가 많기 때문에 다른 프로그래밍 언어와 달리 부동 소수점 숫자와 정수가없는 두 종류의 숫자가 있습니다 숫자는 타입 번호입니다 이제 승인 된 타입을 봅시다

부울은 내가 전에 말했듯이 이름에 대해 어떤 유형인지 살펴 보자 이름이 정의되지 않았고이 변수의 값이 재미 있기 때문에 정의되지 않았지만이 유형도 정의되지 않았습니다 이것은 이전에 우리가 두 가지 유형의 유형 프리미티브 또는 값 유형 및 기본 유형의 참조 유형이 있습니다 우리는 문자열 숫자를 가지고 있습니다 boolean undefined 그리고 no undefined는 다음과 같습니다

실제로 유형이지만이 예에서는 값이기도합니다 이름이 정의되지 않은 first-name도 타입이 정의되지 않았습니다 선택한 색상에 대해 선택한 색상의 유형을 보도록하겠습니다 이 변수는 객체입니다 다음 객체의 주제가되는 객체는 무엇입니까? 강의 그래서 자바 스크립트에서 모든 기본 유형을 보았습니다

이제 살펴 보겠습니다 우리가 객체 배열을 가진 레퍼런스 타입 카테고리의 레퍼런스 타입 이 강의에서 우리는 객체를 탐색 할 것이고 이 섹션의 뒷부분에있는 배열 및 함수에 대해 알아보고 개체가 무엇인지 JavaScript 및 다른 프로그래밍 언어의 객체는 객체와 같습니다 실생활에서 사람을 생각해 보라 사람은 이름 나이 주소가있다 자바 스크립트에서 동일한 개념을 가진 사람의 속성이므로 우리가 여러 관련 변수를 다루는 경우 이러한 변수를 예를 들어 여기서 우리는 두 변수가 있습니다

이름과 나이가 높습니다 그들과 관련된 사람들의 표현의 일부분이다 두 개의 변수를 선언하면 person 객체를 선언 할 수 있고 대신에 이 두 변수를 참조하면 person 객체는 코드를 더 깨끗하게 만들어 보자 우리가 원하지 않으면 let 또는 Const로 시작하는 person 객체를 어떻게 선언 할 수 있습니까? person 객체를 재 할당하고이를 객체 리터럴로 설정하면이 구문 이 중괄호는 여기서 우리가 객체 리터럴이라고 부르는 것입니다 중괄호 하나 이상의 키 값 쌍을 추가하여 키를 호출합니다

이 경우이 객체의 속성은이 사람 객체가 두 개의 속성 또는 두 개의 키 이름과 나이 그래서 여기에 이름을 추가합니다 우리는 콜론을 추가하고 그 값을 설정 했으므로 이제 쉼표를 추가하고 또 다른 키 값 쌍을 나이 30에 추가하면 이제는 두 개의 person 객체가 생깁니다 속성 또는 이름과 나이의 두 가지 키 값 쌍이 필요합니다 이 두 변수는 이제 콘솔에있는이 사람을 잠급니다 그래서 로그 사람이 변경 사항을 저장하므로 여기에 우리의 개인적인 개체가 있습니다

개체 리터럴 구문 그래서 중괄호를 가지고 있고 그 사이에 우리는 하나 이상의 키 값 쌍 및 개인 속성의 속성입니다 이제는이 속성을 사용하여 작업 할 수있는 두 가지 방법이 있습니다 이 사람의 이름을 변경하여 이름 속성에 액세스해야합니다 첫 번째 방법은 점 표기법이라고하는 두 가지 방법이므로 이름을 추가합니다 이 경우 사람의 점에있는 우리 물건의 특성을 볼 수 있습니다

나이와 이름 그래서 우리는 이름의 가치를 존으로 바꿀 수 있습니다 이제 점을 사용할 수 있습니다 표기법을 사용하여 여기에있는 속성 값을 10 행 대신 여기에서 읽으십시오 person 객체를 로그인한다 name 속성을 로그 할 수있다

우리가 얻을 수있는 콘솔 존은 다른 방법으로 속성에 액세스 할 수 있습니다 표기법 그래서 대괄호 표기법 대신 점 대신에 대괄호를 사용하고 우리는 대상 속성의 이름을 결정하는 문자열을 전달하여 단일 또는 큰 따옴표는 있지만 큰 따옴표는 더 일반적입니다 대상 속성의 이름은 이름이므로 동일한 Mary로 다시 변경할 수 있습니다 그것을 읽을 때 점 표기법이나 대괄호 표기법을 사용할 수 있습니다 변경 사항 저장 이제 콘솔에서 Mary를 얻습니다

접근 방식은 도트 표기법이나 괄호 표기법을 잘 볼 수 있으므로 잘 나타납니다 표기법이 조금 더 간결하므로 기본 설정이되어야합니다 선택하지만 대괄호 표기법을 사용하는 사용자가있는 경우가 있습니다 예를 들어 사용자의 런타임까지 대상 속성의 이름 인터페이스를 통해 사용자는 대상 속성의 이름을 선택할 수 있습니다 우리가 무엇을 모르는 코드를 작성했을 때의 경우 우리가 액세스 할 속성은 런타임시에 선택 될 것입니다

사용자가 다른 변수를 선택할 가능성이 사용자가 선택하는 대상 속성의 이름을 결정하고 이 속성을 사용하여 런타임에 변경할 수 있습니다 대괄호 표기법이 역동적 인 방식으로 여기에서 선택을 통과하면 동일하게됩니다 결과가 혼란 스러울지라도 지금 결과는 괜찮습니다 걱정할 필요는 없습니다 나중에 자바 스크립트로 더 많은 경험을 얻으시면 점 표기법을 따르십시오

그 이유는 더 깨끗하고 쉽기 때문입니다 배열 살펴보기 때로는 응용 프로그램에서 객체 목록을 다루는 경우가 있습니다 장바구니에있는 제품 목록 또는 색상 목록 사용자가 배열을 사용하여 해당 목록을 저장하는 것과 같은 상황에서 사용자가 선택한 경우 내가 어떻게 여기에 또 다른 변수를 선언하겠습니까? 내가 SC 또는 다른 이상한 것을 가지지 않는 의미있는 이름을 사용하고 있음을 색으로 표시 선택한 색상의 이름을 이제 초기화하고 빈 값으로 설정할 수 있습니다 그래서 대괄호는 배열 리터럴이라 부르며 빈 배열 이제 우리는이 배열을 초기화하고 몇 가지 항목을 추가 할 수 있습니다 빨간색과 파란색처럼 콘솔에서 잠금을 선택하면 콘솔이 선택됩니다

colors는 변경 사항을 저장하므로 여기서 확장 할 수있는 두 요소가있는 배열이 있습니다 각 요소에는 색인이 있고 그 요소의 위치를 ​​결정한다는 점에 유의하십시오 첫 번째 요소의 인덱스가 0이되도록 인덱스의 두 번째 요소는 하나이므로 배열의 요소에 액세스하려면 이 인덱스는 여기에 예를 들어 첫 번째 이 배열의 요소는 대괄호를 사용하고 인덱스 저장을 지정합니다 변화와 지금 우리는 빨간색이 있습니다 이전에 나는 JavaScript가 동적 언어이므로 변수 유형이 런타임에 동일하게 변경 될 수 있습니다 원칙은 우리의 배열에 적용되므로 배열의 길이와 배열에있는 객체는 동적이므로 배열을 변경할 수 있습니다

이 배열을 두 개의 요소로 초기화하십시오 이제 3 행에 다른 요소를 추가 할 수 있습니다 요소를이 배열에 추가하면 배열이 확장되므로 선택한 색상 인 2 즉,이 배열의 세 번째 항목이 녹색으로 표시됨을 의미합니다 이 배열은 콘솔에 있으므로 우리는 세 개의 원소를 가진 배열을 가진다 그래서 길이가 동적이어서 우리가 가지고있는 객체의 유형을 변경할 수 있습니다

배열은 동적이므로 다른 프로그래밍 언어와 달리 모든 항목 또는 배열의 모든 객체는 JavaScript에서 저장할 수있는 유형이 동일해야합니다 배열의 다른 유형이므로 마지막 요소를 숫자로 저장할 수 있습니다 이제는 두 개의 문자열과 숫자를 가지므로 배열의 객체는 다음과 같이 변경됩니다 잘 배열의 크기가 동적 인 지금 기술적으로 배열은 마지막 강의에서 정의한 개인 대상과 마찬가지로 도트를 사용하여 액세스 할 수있는 키 값 쌍 또는 속성 묶음 표기법을 통해 콘솔에서 여러분에게 이렇게 알려줍니다 선택한 색상의 유형이므로이 배열의 유형이 객체이므로 배열이 JavaScript의 객체이므로 여기 4 행에서이 객체의 속성을 볼 수 있습니다

배열 또는 도트 표기법을 사용하는이 객체는 모두 다음과 같습니다 JavaScript에서 배열에 정의 된 속성이므로 대괄호를 사용하는 배열은 자동으로 배열을받습니다 우리가 명시 적으로 정의하지 않은 속성은 어떻게 든 마술처럼 다른 곳에서 상속받은 우리는 나중에 그 사실을 알게 될 것입니다 이 강의에서 프로토 타입에 대해 이야기 해 봅시다 이 속성은이 속성이 반환하는 길이 속성입니다

배열에있는 항목 또는 요소의 수이므로 우리가 볼 수있는 변경 사항을 저장하십시오 지금이 배열의 세 요소는 나중에 우리가 포괄적 인 코스를 가지고 있습니다 수행 할 수있는 모든 종류의 작업에 대해 배우게 될 배열에 대한 섹션 배열에 대한 지금은 내가 당신을 데려가려는 배열은 데이터입니다 항목 목록을 나타내는 데 사용하는 구조 객체 및 배열에 대해 학습 한 참조 유형 범주 이제 함수를 살펴 보도록하겠습니다 함수는 기본 함수 중 하나입니다 자바 스크립트에서 빌딩 블록은 함수는 기본적으로 작업을 수행하거나 값을 계산합니다

몇 가지 예를 보여 드리겠습니다 function 키워드를 사용하여 함수를 선언 할 것입니다 그 이름은 우리가 괄호를 추가해야한다는 것을 알기 위해 호출합니다 함수를 선언하고 중괄호를 쓰는 구문의 일부는 무엇입니까? 우리는 여기에 중괄호 안에 있습니다 우리가이 몸의 몸이라고 부르는 것입니다

함수이며 여기에 이러한 모든 명령문을 추가하여 우리의 응용 프로그램에서 논리, 예를 들어이 함수의 논리는 다음과 같아야합니다 콘솔에 메시지를 표시하여 여기에 로그 hello world 콘솔을 추가 할 수 있습니다 여기에 우리는 성명서를 가지고있어서 세미콜론으로 끝났습니다 함수를 선언 할 때 마지막에 세미콜론을 추가 할 필요가 없습니다 우리가 이것을 좋아하는 변수처럼 선언하지 않기 때문에 이것은 괜찮습니다

함수 선언 바로 지금 우리는이 함수를 호출 할 수 있습니다 이렇게 함수의 이름과 괄호를 다시 추가하고 세미콜론으로 변경 사항을 저장하는 문장입니다 콘솔에서의 안녕하세요하지만 꽤 지루한 일입니다 이 기능을 우리의 기능이 더 재미있게 만들 수있는 방법을 보여줍니다

입력 및 이러한 입력은 함수가 동작하는 방식을 변경할 수 있습니다 안녕하세요 세상을 표시하는 대신 우리는 사람의 이름을 표시하고 싶습니다 여기 안녕하세요 존처럼 우리가 여기서 괄호 안에 변수를 추가 할 수 있습니다 이 인사말 기능에 하나의 매개 변수가 있으므로이 변수를 매개 변수로 참조하십시오 이름과 본질적으로 이름은 단지 의미있는 변수와 같습니다 내부 기능 장애 때문에이 기능 내부 우리는이 이름 변수를 사용하여 작업 할 수 있지만 외부에서 액세스 할 수는 없습니다

이 함수는 이름 대신이 함수에 대한 입력입니다 안녕하세요 세계를 표시 할 수 있습니다 여기에 플러스를 추가하여 두 개를 연결할 수 있습니다 문자열 이제 우리는 우리가 필요로하는 위대한 함수를 호출 할 때 이름을 추가 할 수 있습니다 name 변수 또는 name 매개 변수에 대한 값을보다 정확하게 전달할 수 있도록 여기에 John을 전달하십시오 이제 John을 인수로 사용하기 위해 이것을 인수로 참조하십시오

greet 함수 이름은 greet 함수의 매개 변수 중 하나입니다 많은 프로그래머들이 그 차이를 알지 못한다는 것을 모르는 것들 매개 변수와 인수 사이에 있으므로 매개 변수는 우리가 여기에있는 것입니다 선언 시간 그러나 인수는 그 값을위한 실제 값이다 매개 변수 이제 괜찮습니다

변경 사항을 저장하여 hello John 이제이 함수를 재사용 할 수 있지만 다른 입력을 사용할 수 있습니다 이 줄을 여기서 복사해서 Mary에게 바꿀 수 있습니다 이제 콘솔에 다른 메시지가 여러 매개 변수를 가질 수 있습니다 여기에서는 쉼표를 사용하여 매개 변수를 구분할 수 있으므로 다른 매개 변수를 추가해 보겠습니다 성을 좋아해 이제 콘솔을 바꿀 수 있습니다

이 멋진 함수를 호출 할 때 성을 표시하십시오 마지막 이름에 대한 또 다른 주장을 전달해야하지만 그렇게하지 않으면 변경 사항이 저장됩니다 우리가 도대체 ​​무엇을 얻었는지 보자 왜냐하면 내가 기본값 JavaScript의 변수 값은 정의되지 않았습니다 성의 값은 기본적으로 정의되어 있지 않으므로 다른 값을 전달할 것입니다

여기서 우리는 쉼표를 사용하여 그들을 분리합니다 John Smith greet 함수에 대한 두 번째 호출이 필요하지 않습니다 이제 변경 사항을 저장합니다 존 스미스에게 안녕하세요 이제 3 번 줄에이 코드를 작성하는 더 깨끗한 방법이 있습니다

이 모든 연결은 나중에 추락하는 일종의 추한 것입니다 템플릿 리터럴을 사용하여이 코드를 정리하는 방법을 보여줄 것입니다 지금은 걱정하지 마라 함수의 또 다른 예제를 보자 우리가 여기에있는 기능은 작업을 수행하는 것이므로 작업을 수행하는 것은 콘솔에 뭔가를 표시하지만 때때로 우리 함수가 계산할 수도 있습니다

여기에 값을 계산하는 함수의 예가 있습니다 다시 함수이 함수를 square라고 부르 자이 함수는 매개 변수를 호출하여 이제 해당 숫자의 제곱을 계산해야합니다 숫자는 숫자입니다 숫자는 기본 수학입니다

바로 지금 우리가 돌아올 필요가 있습니다 반환 값을 사용하기 위해이 함수를 호출하는 사람에게이 값 키워드는 다른 예약 키워드이므로 변수를 호출 할 수 없습니다 greet 함수를 호출하는 대신에 이제는 괜찮습니다 사각형을 호출하겠습니다 function square 그래서 우리는 두 값을 반환합니다

이것은 값을 반환합니다 그래서 우리는 그 값을 사용할 수 있습니다 예를 들어 변수를 초기화하려면 다른 변수를 선언 할 수 있습니다 2의 제곱으로 설정 한 다음 콘솔에 표시 할 수 있습니다 변경 사항을 저장하여이 특정 예에서 4를 얻으십시오

꼭 그렇지는 않습니다 우리가하고 싶은 것이 있다면 그 변수를 선언하는 것입니다 콘솔에서 2의 제곱을 사용하면이 변수 선언을 제외 할 수 있습니다 단순히 자바 스크립트 엔진이 실행될 때 consolelog에 2의 제곱을 전달하면됩니다

이 코드는 먼저이 함수를 호출하여 값을 얻은 다음 그 값을 콘솔에 전달하십시오 도트 락 변경 사항을 저장하고 아직 보겠습니다 지금 4 가지를 얻으십시오 많은 함수 호출이 있다고 생각합니까? 이 코드에서 우리는 두 개의 비용 스퀘어를 함수화해야합니다 하나의 함수 호출은 이걸 임시로 삭제하지만 그 자물쇠가 다른 함수 호출인지 자문 해

왜냐하면 여기에 괄호가 있으므로 로그 함수를 불러내는 것입니다 어딘가에서 정의되고 인수를 전달하면 간단한 문자열을 전달할 수 있습니다 안녕하세요, 또는 표현식이 다른 표현식에 대한 호출이 될 수있는 표현식을 전달할 수 있습니다 함수는 두 개의 사각형과 같은 함수입니다 이것은 나중에 함수의 기본입니다

과정에서 우리는 지금 모든 기능에 대한 포괄적 인 섹션을 가지고 있습니다 당신이 떠나기를 바란다는 것은 함수가 실제 응용 프로그램이 작업을 수행하거나 계산하여 값을 반환합니다 근본적으로 함께 작동하는 수백 또는 수천 개의 함수 모음 해당 애플리케이션의 기능을 제공한다 안녕하세요, 저에게는 다시 한 번 모시고 있습니다 학습에 대해 매우 열정적 인 것처럼 보입니다

JavaScript를 사용하여 학습을위한 결정을 축하드립니다 if 너는 나에게서 더 많은 것을 배우고 싶다 나는 당신이 나의 자바 스크립트에 등록하는 것을 강력하게 권한다 물론이 과정을 온라인이나 오프라인에서 원하는만큼 여러 번 볼 수 있습니다 자신의 페이스에 따라 다양한 연습 문제 및 해결책이 제공됩니다

당신은 또한 끝을 보면서 완료 증명서를 받게 될 것입니다 과정에 관심이있는 경우 동영상 설명에 링크가 있습니다 좋은 하루이며 코스에서 뵙기를 바랍니다