JS를 배우는 방법

친구가 자바스크립트를 배우고 싶은데 어떻게 배우는지 모른다고 했어요. 이번 글에서는 에디터가 자바스크립트의 중요한 지식 포인트와 학습 방법을 정리해 놓았습니다. 조금 길지만 여러분께 많은 도움이 되었으면 좋겠습니다.

1. 개발 환경 및 JavaScript 버전 문제

개발 환경이 단순할수록 이 링크에 시간을 낭비하지 마십시오.

우선 편집기 선택, 서브라임 텍스트, vs 코드, 아톰, 웹스톰, HBuilder에 대해 이야기해보겠습니다. 초보자가 시작하면 항상 최고의 에디터를 찾고 싶어합니다. 사실 이 에디터는 게임에서 최고의 영웅을 선택하는 것과 같습니다. 아직 자신에게 가장 적합한 에디터가 있을 뿐입니다. 그냥 vs 코드를 선택하세요. 초보자에게 꽤 친숙한 것 같아요.

크롬을 브라우저로 사용하면 코딩을 시작할 수 있습니다.

JavaScript 버전에 관해서는 ES5부터 학습을 시작하고, 일정한 기초를 다진 후에 ES2015+의 새로운 기능을 살펴보는 것이 좋습니다.

2. 기초 문법

프로그래밍 언어를 배우는 것과 자연어를 배우는 것은 가장 기본적인 단어와 문법부터 시작해야 한다는 점에서 유사점이 많습니다.

• 변수: 변수를 선언하는 방법과 변수에 값을 할당하는 방법입니다.
• 데이터 유형: 데이터 유형이란 무엇이며 숫자와 문자열의 차이점은 무엇입니까?
• 연산자와 표현식: 일반적으로 사용되는 연산자는 무엇인가요? "=", "==" 및 "===" 등의 차이점
• 분기 문: if, switch
• 루프 문: for, while
• 함수: 함수란 무엇이며 매개변수는 무엇이며 반환 값은 무엇입니까?

이러한 기본 문법을 잘 알고 있어야 합니다. 그렇지 않으면 이후 학습이 어려울 수 있습니다.

3. 객체

객체는 매우 중요한 개념이며 유연하게 숙지해야 합니다.

• 객체: 속성 값이 함수인 경우 이 함수를 객체의 메서드라고 부릅니다.
• 배열: 순서가 지정된 요소 모음입니다. 배열의 일반적인 방법을 이해하세요
• 날짜 개체: 연도, 월, 일, 시, 분, 초 가져오기
• 수학 개체: 난수 가져오기
• 다른 개체 이해하기: 정규식, 패키징 개체, 실제로 함수도 포함됩니다 하지만 간단히 이해하세요.

각 개체에는 여러 가지 방법이 있습니다. 영어를 배울 때와 마찬가지로 필요한 단어는 외워야 하지만 대부분의 단어는 보기만 하면 됩니다. 그것들을 사전에 올려요.

[기본문법]과 [객체]를 배우는 과정은 상대적으로 지루하고, 지식 포인트 간의 연결도 그다지 가깝지 않습니다. 초등학교 1학년 때 한자를 배울 때처럼 각 문자가 무엇인지 알 수 있습니다. , 그러나 우리는 그것들이 무엇인지 모르기 때문에 초등학생들은 단어 만들기, 문장 만들기, 에세이 쓰기를 연습할 것입니다. 우리가 하는 프로젝트를 에세이 쓰기에 비유하니 아직 갈 길이 멀으니 조급해하지 마세요.

4. DOM

• DOM의 트리 구조
• 노드: 요소 노드, 텍스트 노드, 속성 노드
• 노드 관계: 형제, 부모-자식 수준 등
• 노드 가져오기: querySelector, querySelectorAll 등
• 노드 작업: 추가, 삭제, 수정 및 확인
• 이벤트 바인딩: 이벤트 흐름 및 이벤트 위임을 이해해야 합니다.

DOM도 많은 방법을 제공하지만 여전히 독학하는 초보자에게는 너무 많은 에너지를 투자하지 않습니다. 우리가 해야 할 일은 DOM에 대한 일반적인 이해를 갖는 것입니다. 앞으로는 이러한 지저분한 인터페이스를 jQuery나 프레임워크로 완전히 대체할 수 있습니다.

(DOM에 관심이 있으신 분들은 좀 더 종합적으로 스킬을 익힌 후 다시 오셔서 심도있게 공부하셔도 되지만 초기에 많은 시간을 투자하시면 학습효율에 확실히 영향을 미치게 됩니다)

5. jQuery

jQuery는 필수입니다. 하지만 jQuery를 시작하는 것은 정말 쉽습니다. jQuery를 사용하는 방법을 배우는 데 이틀이 걸리며, 그런 다음 jQuery를 사용하여 다양한 페이지 효과를 얻을 수 있습니다. 스테이지지만 jQuery 정보가 많으니 배우고 동시에 해보세요.

6. 고급 JavaScript

jQuery에 익숙해지면 고급 JavaScript 콘텐츠를 배울 수 있습니다.

기본 유형과 참조 유형의 차이점
다양한 유형 변환 및 유형 감지
클로저: 함수 집합 함수, 그냥 무슨 일이 있어도 자신을 속이지 마십시오.
프로토타입: 생성자, 프로토타입 속성 및 프로토타입 기반 상속이 구현되는 방법입니다.
이것: 피트를 열어서 주의 깊게 공부하면 됩니다

7. 노드를 이해하세요

노드는 이제 프론트엔드에서 꼭 배워야 한다고 할 수 있지만, 노드를 백엔드로 사용하는 방법을 배우는 것이 아닙니다. 하지만 노드 생태계의 다양한 도구를 사용하고 노드를 빌려 배경을 학습하는 것입니다.

• 노드를 사용하여 정적 서버 열기
• npm을 사용하여 타사 모듈 다운로드
• webpack
• babel

express를 사용하여 간단한 백그라운드 프로그램을 작성하는 것이 가장 좋습니다(server.js 하나면 충분합니다). 일부 요청을 처리하면 Ajax를 배울 때 백엔드 인터페이스를 직접 작성할 수 있습니다. 물론 이를 위해서는 http 프로토콜에 대한 기본 지식이 필요합니다.

8. ES2015+ 새로운 기능

• 변수 및 상수: 왜 var를 포기해야 할까요?
• 구조 할당
• 화살표 함수
• modularity
• class
• compile#🎜 🎜 #

Promise, async/await 함수 등은 본인의 능력에 따라 다르니 관심이 있으신 분은 살펴보시더라도 향후 학습에 지장은 없습니다. 그러나 지금 배우지 않더라도 이 후속 조치도 필요할 것입니다.

9. AJAX

간단히 말해서, http 프로토콜을 이해하고, 요청이 무엇인지, 응답이 무엇인지, 가져오기와 게시의 차이점을 알고 나서 알아보세요. ajax를 보면 기본적으로 문법을 읽을 수 있습니다.

XMLHttpRequest를 사용하여 요청을 보내고 데이터를 받습니다.
• jQuery를 사용하여 요청을 보내고 데이터를 받습니다.
• json parsing

그것만 알아야 합니다. 앞으로는 일을 하든, 공부를 하든 분명 많은 문제에 직면하게 될 것입니다. 그 당시의 구체적인 문제를 자세히 설명합니다.

10. 프레임워크

react, Angle, Vue 중 하나를 선택하세요. 기초가 전혀 없는 초보자는 Vue를 적극 권장합니다. 기술적인 프론트엔드라면 반응을 추천합니다.

이 글은 기초 지식이 전혀 없는 초보자를 위한 글이므로 당연히 vue를 선택하는 것이 좋습니다.

Finally

이 10단계를 통해 JavaScript 시스템을 전반적으로 이해할 수 있으며, 이후 취미나 업무 요구에 따라 어떤 방향으로 개발할지 집중할 수 있습니다. 기술로 가는 길은 멀고 이는 단지 시작점일 뿐입니다.

위 내용은 JS를 배우는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!