JavaScript를 배우는 올바른 방법

이런 식으로 JavaScript를 배우지 마세요

처음부터 수많은 JavaScript 온라인 튜토리얼에 몰입하지 마세요. 이것은 최악의 학습 방법입니다. 수많은 튜토리얼을 시청하면 효과적일 수도 있지만 계층 구조 없이 무언가를 배우는 것은 매우 비효율적입니다. 실제로 JavaScript를 사용하여 웹 사이트나 웹 애플리케이션을 구축할 때 여전히 자주 막히게 됩니다. 전반적으로 학습에 대한 이러한 접근 방식은 언어를 도구, 즉 개인 도구로 사용하는 방법에 대한 혼란을 초래합니다.

또한, 어떤 사람들은 존경받는 JavaScript의 대부인 Douglas Crockford가 쓴 "JavaScript 언어의 본질"에서 JavaScript를 배우기 시작하라고 제안할 수도 있습니다. 그러나 Crockford 씨는 JavaScript에 대해 모든 것을 알고 있으며 JavaScript 세계의 아인슈타인으로 알려져 있지만 그의 "JavaScript 언어 본질"은 초보자가 배우기에는 적합하지 않습니다. 이 책은 자바스크립트의 핵심 개념을 철저하고 명확하며 간결하게 설명하지 않습니다. 하지만 좀 더 고급 학습 경로를 원한다면 Mr. Crockford의 동영상을 시청하는 것이 좋습니다.

또한 Codecademy와 같은 웹사이트에서만 JavaScript를 배우지 마세요. 왜냐하면 JavaScript 코드의 작은 조각을 많이 작성하는 방법을 알더라도 웹 애플리케이션을 구축하는 방법은 배우지 못할 것이기 때문입니다. 그럼에도 불구하고 나중에 보충 학습 자료로 Codecademy를 ​​추천하겠습니다.

• 프로그래밍 분야의 질문과 답변 포럼인 Stack Overflow에 무료로 등록하세요. 귀하의 질문이 매우 기본적이고 어리석게 보일지라도 여기에 질문하면 Codecademy보다 더 나은 답변을 얻을 수 있습니다(절대 어리석은 질문은 없다는 것을 기억하십시오).

• 브라우저에서 직접 코드를 작성할 수 있는 온라인 학습 플랫폼인 Codecademy에 무료로 등록하세요.

• 객체, 클로저, 변수 범위 및 승격, 함수 등을 포함한 JavaScriptIsSexy에 대한 일부 블로그 게시물입니다.

JavaSctipt 학습 경로

전체 과정 강의 계획서를 완료하는 데 6~8주가 걸리며 전체 JavaScript 언어(jQuery 및 일부 HTML5 포함)를 배우게 됩니다. 6주 안에 모든 과정을 완료할 시간이 없다면(물론 더 어렵습니다), 8주 이상 걸리지 않도록 하세요. 시간이 오래 걸릴수록 다양한 지식을 습득하고 암기하는 것이 더 어려워집니다.

1~2주(소개, 데이터 유형, 표현식 및 연산자)

1. HTML과 CSS를 잘 모른다면 Codecademy에서 기본 웹 작업을 완료하세요.

2. "JavaScript에 대한 완벽한 가이드" 또는 "JavaScript를 사용한 고급 프로그래밍"의 서문과 1~2장을 읽어보세요.

3. 매우 중요: 책에서 만나는 모든 샘플 코드는 손으로 입력하고 Firefox 또는 Chrome 브라우저 콘솔에서 실행해야 하며, 가능한 한 많이 사용해 보아야 합니다(다양한 실험을 수행). jsfiddle을 사용할 수도 있지만 Safari는 사용하지 마십시오. 코드를 테스트하고 디버깅하려면 Firebug 플러그인과 함께 Firefox를 사용하는 것이 좋습니다. 브라우저 콘솔은 JavaScript 코드를 작성하고 실행할 수 있는 곳입니다.

4. Codecademy JavaScript 트랙의 JavaScript 소개 섹션을 완료하세요. Introduction to JavaScript部分。

5. 阅读《JavaScript权威指南》第3~4章。或者阅读《JavaScript高级程序设计》第3~4章。你可以跳过位操作

   "JavaScript에 대한 확실한 가이드"의 3~4장을 읽어보세요. 아니면 "JavaScript를 이용한 고급 프로그래밍"의 3~4장을 읽어보세요. 비트별 연산 부분은 일반적으로 JavaScript 경력에 필요하지 않으므로 건너뛰어도 됩니다.
6. 다시 한 번, 책의 코드를 가끔씩 브라우저 콘솔(또는 JSFiddle)에 입력하여 다양한 테스트를 수행하는 것을 잊지 마세요. 몇 가지 변수를 변경하거나 코드 구조를 수정할 수 있습니다.

7. JavaScript 최종 가이드의 5장을 읽어보세요. "JavaScript 고급 프로그래밍"의 경우 관련 지식을 이전에 다루었기 때문에 당분간 읽기 작업은 없습니다.

Codecademy JavaScript 트랙의 2~5부를 완료하세요.

3~4주(객체, 배열, 함수, DOM, JQuery)

1. 다음 세 가지 중 하나를 선택하세요.

자세한 내용은 두 권의 책에서 다루겠지만 제 블로그를 꼭 읽어주세요. post 에서는 이러한 세부 사항을 완전히 자신있게 건너뛸 수 있습니다.
• 내 블로그 게시물 JavaScript Objects explained를 읽어보세요.

• "JavaScript에 대한 최종 가이드"의 6장을 읽어보세요.

"JavaScript를 사용한 고급 프로그래밍"의 6장을 읽어보세요. 참고: "객체 이해" 섹션을 살펴보세요.

"JavaScript에 대한 완벽한 가이드"의 7~8장 또는 "JavaScript를 사용한 고급 프로그래밍"의 5장과 7장을 읽어보세요.

🎜🎜이 시점에서는 브라우저 콘솔에서 코드를 작성하고 if-else 문, for 루프, 배열, 함수, 개체 등을 테스트하는 데 많은 시간을 소비해야 합니다. 더 중요한 것은 Codecademy를 ​​사용하지 않고도 독립적으로 코드 작성을 연습하고 마스터해야 한다는 것입니다. Codecademy에서 질문을 할 때 각 작업은 쉬워야 하며 도움이나 프롬프트가 필요하지 않습니다. 여전히 Codecademy에 머물고 있다면 브라우저로 계속 돌아가서 연습해 보세요. 제임스가 어렸을 때 이웃집 농구장에서 연습했던 것처럼 빌 게이츠도 지하실에서 프로그래밍을 배웠습니다. 🎜

계속해서 연습하면 이 작은 발전의 누적 효과는 놀라울 것입니다. 이 전략의 가치를 보고, 그것이 가능하다고 믿고, 그것에 전념해야 합니다.

Codecademy는 숙달의 환상을 만들어냅니다.
Codecademy를 ​​사용할 때 가장 큰 문제점은 프롬프트와 작은 코드 조각으로 인해 사람들이 쉽게 답을 찾아내고 이 지식 포인트를 마스터했다는 착각을 불러일으킨다는 것입니다. 지금은 보이지 않을 수도 있지만 이렇게 하면 코드가 더 이상 독립적이지 않습니다.

하지만 아직까지 Codecademy는 프로그래밍 학습에 여전히 좋은 도우미입니다. 특히 소규모 프로젝트와 소규모 애플리케이션의 개발 프로세스를 이해하기 위해 if 문, for 루프, 함수 및 변수와 같은 몇 가지 기본 코드 구조를 안내합니다.

Codecademy로 돌아가서 JavaScript 경로를 완료하세요. 파트 6~8을 완료하세요(데이터 구조는 Object 2여야 함).

Codecademy의 프로젝트 루트에서 5개의 기본 소규모 프로젝트(Basic Projects)를 구현합니다. 완료되면 더 이상 Codecademy가 필요하지 않습니다. 스스로 더 많이 할수록 더 빨리 배우고 더 잘 준비하여 독립적으로 프로그래밍을 시작할 수 있기 때문에 이는 좋은 일입니다.

The Definitive Guide to JavaScript의 13, 15, 16, 19장을 읽어보세요. 또는 JavaScript를 사용한 고급 프로그래밍의 8, 9, 10, 11, 13, 14장을 읽어보세요. 이 책에서는 jQuery를 다루지 않으며, Codecademy에 대한 jQuery 지식도 충분히 다루지 않습니다. 무료인 jQuery의 공식 튜토리얼을 살펴볼 수 있습니다: http://try.jquery.com/

또한 "JavaScript에 대한 확실한 가이드"의 19장에서 jQuery에 대해 자세히 알아볼 수도 있습니다.

모든 jQuery 튜토리얼(http://try.jquery.com/)을 완료하세요.

최고의 JavaScript 편집기: WebStorm

• 첫 번째 프로젝트를 구현하기 전에, 나중에 JavaScript 개발자가 될 계획이거나 JavaScript를 자주 사용할 계획이라면 지금 WebStorm 평가판을 다운로드하는 것이 가장 좋습니다. . 여기에서 WebStorm(이 과정을 위해 특별히 작성된) 사용 방법을 배울 수 있습니다. WebStorm이 JavaScript 프로그래밍을 위한 최고의 편집기(또는 IDE)라는 것은 의심의 여지가 없습니다. 30일 평가판을 사용하면 49.00달러가 들지만 JavaScript 개발자로서 책을 구입하는 것 외에는 이것이 가장 현명한 투자가 될 것입니다.

• WebStorm에서 JSHint가 활성화되어 있는지 확인하세요. JSHint는 JavaScript 코드에서 오류와 잠재적인 문제를 확인하여 팀이 사양에 따라 코드를 작성하도록 하는 도구입니다. WebStorm 사용 시 가장 좋은 점은 워드 프로세싱 프로그램의 맞춤법 검사기와 마찬가지로 JSHint가 잘못된 코드 아래에 자동으로 빨간색 선을 표시한다는 것입니다. JSHint는 HTML을 포함한 모든 코드 오류를 표시하여 좋은 습관을 기르고 더 나은 JavaScript 프로그래머가 되도록 유도합니다. 이것은 중요합니다. WebStrom과 JSHint가 얼마나 도움이 되는지 진정으로 깨닫게 되면 돌아와서 저에게 감사하게 될 것입니다.

• 또한 WebStorm은 전문 JavaScript 웹 애플리케이션 작성을 위해 전문가가 사용하는 세계 최고 수준의 IDE이므로 앞으로 자주 사용하게 될 것입니다. 또한 Node.js, Git 및 기타 JavaScript 프레임워크와 통합되므로 스타 JavaScript 개발자가 되더라도 계속 사용할 수 있습니다. 앞으로 더 많은 JavaScript IDE가 등장하지 않는 한.

• 공정성을 위해 여기서는 WebStorm 다음으로 최고의 JavaScript 편집기인 Sublime Text 2에 대해 언급하겠습니다. WebStorm만큼 기능이 풍부하고 완벽하지는 않습니다(여러 플러그인을 추가하더라도). 작은 수정 작업을 할 때 JavaScript를 포함한 다양한 언어를 지원하는 Sublime Text 2를 사용하지만 전체 JavaScript 웹 애플리케이션을 구축하는 데는 사용하지 않습니다.

첫 번째 프로젝트 - 동적 질문 및 답변 애플리케이션

이 시점에서 여러분은 안정적이고 유지 관리가 가능한 웹 애플리케이션을 구축할 수 있는 충분한 지식을 습득했습니다. 내가 당신을 위해 디자인한 응용 프로그램을 마치기 전에 다음 장을 읽지 마십시오. 막히면 Stack Overflow에 질문하고 개념을 완전히 이해할 때까지 책에 있는 관련 자료를 다시 읽어보세요.

다음으로, 다음 기능을 사용하여 JavaScript 질문 및 답변 애플리케이션(HTML 및 CSS도 사용됨) 구축을 시작합니다.

• 이것은 단일 선택 테스트 질문 세트입니다. 완료 후 사용자의 점수는 다음과 같습니다. 표시됩니다.

• Q&A 앱은 원하는 만큼 많은 질문을 생성할 수 있으며, 각 질문에는 원하는 만큼 많은 옵션이 있을 수 있습니다.

• 마지막 페이지에 사용자의 결과를 표시합니다. 이 페이지에는 결과만 표시되므로 마지막 질문을 삭제하세요.

• 배열을 사용하여 모든 질문을 저장하세요. 옵션과 정답을 포함한 각 질문은 객체로 캡슐화됩니다. 질문 배열은 다음과 같아야 합니다.

// 这里只演示一个问题，你要把所有问题都添加进去 var allQuestions = [ { question: "Who is Prime Minister of the United Kingdom?", choices: [ "David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], correctAnswer: 0 } ];

• 사용자가 "다음"을 클릭하면 document.getElementById 또는 jQuery를 사용하여 다음 질문을 동적으로 추가하고 현재 질문을 제거합니다. 이 버전에서는 "다음"이 유일한 탐색 버튼입니다.

• 이 기사 아래에 댓글을 달아 도움을 요청할 수 있습니다. Stack Overflow에 질문하면 적시에 정확한 답변을 얻을 수 있습니다.
  

  5~6주(정규식, Window 객체, 이벤트, JQuery)

  격려의 한마디

  학업 성공을 기원하며 절대 포기하지 마세요! 당신이 그것을 할 수 없다는 것에 대해 어리석다고 느낄 때(때때로 그렇게 될 것입니다), 다른 초보자들과 심지어 전 세계의 경험 많은 프로그래머들도 때때로 이런 식으로 느낀다는 것을 기억하십시오.

  완전 초보자라면, 특히 10대 시절이 지났다면 코딩을 시작하기 어려울 수도 있습니다. 젊은이들은 두려워할 것도 없고, 부담할 것도 없이 자신이 좋아하는 일을 하면서 많은 시간을 보낼 수 있습니다. 그래서 다양한 도전은 그들에게 일시적인 장애물일 뿐입니다.

  하지만 10대를 지나고 나면 빨리 효과를 보고 싶을 거예요. 몇 가지 세부 사항을 파악하기 위해 몇 시간을 소비할 시간이 그리 많지 않기 때문입니다. 그러나 이러한 사항을 깊이 이해해야 합니다. 이로 인해 좌절하지 말고 코스 작업을 완료하고 완전히 이해할 때까지 모든 버그를 찾으십시오. 승리의 반대편에 도달하면 모든 것이 그만한 가치가 있다는 것을 알게 될 것이며 프로그래밍이 매우 흥미롭고 프로그래밍에 소요된 시간이 상당한 보상을 받을 것이라는 것을 알게 될 것입니다.

  프로그램을 만드는 강렬한 즐거움을 느끼고 이해해야 합니다. 단계별로 지식 포인트를 마스터하고 프로그램을 조금씩 구축해 나가면 영감과 확신을 얻게 되며 놀라운 만족감을 얻게 될 것입니다.

  언젠가 당신은 당신이 견뎌낸 모든 어려움이 그만한 가치가 있었다는 것을 깨닫게 될 것입니다. 당신은 곧 영광스러운 프로그래머가 될 것이며 JavaScript 개발자로서 당신의 미래는 밝다는 것을 알고 있기 때문입니다. 당신 이전의 수천 명의 프로그래머들처럼 당신은 가장 어려운 버그를 이겨냈고, 퇴보하지 않았고, 포기하지 않았고, 포기할 어떤 변명도 하지 않았습니다.

  무언가를 성취했다면, 현미경으로 볼 수 없을 정도로 작은 프로젝트라도 자유롭게 결과를 공유해 주세요.
  
  원본 텍스트: http://javascriptissexy.com/how-to-learn-JavaScript-properly/

• 클라이언트 데이터 확인 추가: 다음 질문을 입력하기 전에 사용자가 현재 질문에 답변했는지 확인하세요.

• 사용자가 돌아가서 답변을 수정할 수 있도록 "뒤로" 버튼을 추가하세요. 기껏해야 첫 번째 질문으로 돌아갈 수 있습니다. 사용자가 답변한 질문에 대해서는 선택 버튼이 선택된 것으로 나타나야 합니다. 이렇게 하면 사용자는 이미 답변한 질문에 다시 답변할 필요가 없습니다.

• jQuery를 사용하여 애니메이션 추가(현재 질문 페이드 아웃, 다음 질문 페이드 아웃)

• IE8 및 IE9에서 테스트하고 버그를 수정합니다. 여기에서 바쁠 것입니다. ;D

• 질문을 JSON 파일로 내보내기

• 사용자 인증 추가, 사용자 로그인 허용, 사용자 인증 정보를 로컬 저장소에 저장(로컬 저장소, HTML5 브라우저 저장소) . 本地存储（local storage，HTML5浏览器存储）。

• 使用cookies记住用户，当用户再次登陆时显示“欢迎用户名
  

  쿠키를 사용하여 사용자를 기억하고 사용자가 다시 로그인할 때 "사용자 이름의 복귀를 환영합니다"를 표시합니다.

  7주에서 8주까지 연장 가능(클래스, 상속, HTML5)
• 지속적인 개선

• 페이지 레이아웃에 Twitter Bootstrap을 사용하여 Q&A 요소를 전문적으로 보이도록 만드세요. 추가 보너스로 Twitter Bootstrap의 라벨 컨트롤(번역자 참고: 원래 주소가 유효하지 않으며 변경됨)을 사용하여 질문을 표시하고 각 라벨에는 하나의 질문이 표시됩니다.

• Handlebars.js를 배우고 Q&A 애플리케이션에서 Handlebars.js 템플릿을 사용하세요. JavaScript 코드에는 더 이상 HTML 코드가 없어야 합니다. 우리의 Q&A 앱은 이제 점점 더 발전하고 있습니다.

Q&A에 참여한 사용자의 결과를 기록하고, Q&A 애플리케이션에서 해당 사용자의 순위를 다른 사용자와 비교하여 보여줍니다.

2. backbone.js에 능숙함

3. 고급 중급 및 고급 JavaScript

4. 누출 없음 Node.js에 능숙

5. Meteor.js 시작하기(곧 제공 예정)

세 개 최고의 JavaScript 프론트엔드 프레임워크(곧 제공 예정)

1. "JavaScript에 대한 확실한 가이드"의 9, 18, 21, 22장을 읽어보세요.
   또는 내 블로그 게시물 JavaScript Object-Oriented Must Know
2. 또는 "JavaScript 고급 프로그래밍"의 6, 16, 22, 24장을 읽어보세요. 6장은 "객체 생성" 및 "상속"(상속) 부분만 읽어보세요. 참고: 이 부분은 이 과정에서 가장 기술적으로 집중적으로 읽는 부분이므로 자신의 상황에 따라 모두 읽을지 여부를 고려해야 합니다. 프로토타입 패턴(Prototype Pattern), 팩토리 패턴(Factory Pattern), 프로토타입 상속(Prototypal Inheritance) 정도는 알아야 하며, 그 외는 필수 사항은 아닙니다.

Q&A 애플리케이션을 계속 업그레이드하세요.
4. Backbone.js와 Node.js를 배운 후 이 두 가지 최신 JavaScript 프레임워크를 사용하여 Q&A 애플리케이션의 코드를 리팩터링하여 복잡하게 만듭니다. 페이지 최신 웹 애플리케이션. 또한 MongoDB 데이터베이스에 사용자의 인증 정보와 등급을 저장해야 합니다.

다음: 프로젝트를 구상하고 철이 뜨거울 때 빠르게 개발하세요. 막히면 "JavaScript에 대한 최종 가이드" 또는 "JavaScript 고급 프로그래밍"을 참조하세요. 물론, 당신은 또한 Stack Overflow의 적극적인 사용자가 되어야 하고, 더 많은 질문을 하고, 다른 사람들의 질문에 대답하려고 노력해야 합니다.

1. "JavaScript에 대한 최종 가이드"의 10, 14, 17, 20장을 읽어보세요. 🎜🎜또는 "JavaScript를 사용한 고급 프로그래밍"의 20장과 23장을 읽어보세요. 🎜

2. 샘플 코드를 브라우저 콘솔에 입력하고, 가능한 한 많이 가지고 놀고, 작동 방식과 수행할 수 있는 작업을 완전히 이해할 때까지 다양한 테스트를 수행하는 것을 잊지 마세요.

3. 이쯤 되면 마치 무술 고수가 나올 것처럼 JavaScript 사용에 매우 익숙해질 것입니다. 하지만 아직 마스터가 될 수는 없습니다. 새로 습득한 지식을 반복적으로 사용하고 계속 학습하고 개선해야 합니다.

4. 업그레이드하기 전에 만들었던 Q&A앱

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