> 웹 프론트엔드 > JS 튜토리얼 > JavaScript를 통한 효율적인 학습으로 가는 길 요약

JavaScript를 통한 효율적인 학습으로 가는 길 요약

巴扎黑
풀어 주다: 2017-08-04 13:31:09
원래의
1463명이 탐색했습니다.

1 먼저 크롬 브라우저를 설치하고 개발도구 => 콘솔에서 직접 실습하여 기본 구문, 변수, 데이터 유형, 수학적 연산, 문자열 연산, 조건, 기본 루프 구조, 간단한 내용을 익히겠습니다. 함수 정의 및 호출을 위해 크롬 개발 도구를 사용하는 이유는 지금 당장 별도의 편집기로 귀찮게 하고 싶지도 않고 파일과 폴더를 열고 최종적으로 실제에 들어가기 전에 몇 가지 도구를 구성할 필요도 없기 때문입니다. JS 프로그래밍. 최대한 간섭을 최소화하면서 JS 작성을 시작하고 싶습니다. 이것이 가장 중요합니다. JS를 배우면 당연히 빨리 JS를 작성해야 합니다

2. 기본 구문을 사용하여 devtools => 콘솔에서 몇 가지를 프로그래밍하겠습니다. 99 구구단 인쇄와 같은 간단한 피보나치 수열 구현과 같이 약간 더 어려운 작은 프로그램의 경우 스스로 몇 가지 질문을 만들 수도 있습니다. 또는 다른 사람들이 작성했는지 여부에 관계없이 온라인에서 흥미로운 질문을 찾는 것이 중요하지 않습니다. 첫 번째 프로젝트를 시작하면 이러한 작은 프로그램은 연습에 가장 적합합니다. 이는 DOM과 같은 다른 지식 측면을 포함하지 않기 때문에 올바른 구문을 사용하여 올바른 프로그램을 작성하는 데만 집중하면 됩니다. 이 프로세스를 통해 JS 언어 자체에 더 익숙해질 수 있습니다.

3 이제 웹 개발을 위해 JS 사용법을 배울 때가 된 것 같지만 걱정하지 마세요. 지금은 새 프로젝트를 만들 준비가 되지 않았기 때문에 계속 devtools에 있을 것이지만 초점은 입니다. DOM에 익숙해지는 과정에서 간단한 window.alert, window.prompt부터 시작하여 DOM API 사용 방법을 천천히 실험해 보겠습니다. DOM 프로그래밍에 관한 책을 사서 책상 위에 놓고 한 장씩 읽어 보겠습니다. , 읽으면서 시도해 보세요. 그리고 점차 document.getElementById, document.getElementsByClassName, addEventListner 등과 같은 DOM의 일반적인 작업과 접촉하게 되었습니다. 이러한 호출에는 ID가 무엇인지, 클래스가 무엇인지와 같은 매우 중요한 개념이 있습니다. 이벤트란 무엇이며, 무엇을 사용하는지, JS 언어가 API를 통해 이벤트와 상호 작용하는 방법. 여러 웹사이트 페이지를 선택하고 JS를 사용하여 요소의 글꼴과 배경색을 변경하거나 일시적으로 이벤트 청취를 추가하는 등 페이지 요소를 일부 수정하겠습니다. DOM API의 동작이 미치는 영향을 웹페이지에서 직접 확인할 수 있으며, 기존의 순수 JS 프로그램 작성보다 더 생생하고, JS의 핵심 지식인 DOM에 대한 호기심을 자극할 수 있습니다. 프로그래머.

4. 일반적으로 DOM 프로그래밍에 관한 책을 읽은 후에는 웹 프로그래밍에서 JS 사용에 대한 일반적인 이해를 갖게 됩니다. 이때 게시판 등 직접 프로젝트를 선택하고 HTML5 Boilerplate를 템플릿으로 사용하여 첫 번째 웹 프론트엔드 프로젝트 개발을 시작하겠습니다. 데이터는 IndexDB에 직접 저장할 수 있으므로 현재로서는 백그라운드 작업에 대해 걱정할 필요가 없습니다. 내가 하고 싶은 기능이 무엇인지 대략 생각해본 후, 이전에 JS와 DOM 작업에 대해 배운 지식을 활용하여 이러한 기능을 잘 구현하겠습니다. 이 프로젝트는 시간이 많이 걸릴 것 같으니 인내심을 가지라고 스스로 다짐합니다. 질문이 생기면 검색 엔진을 사용하여 답을 찾거나 책으로 이동하여 해당 장을 찾습니다.

5. 첫 번째 프로젝트를 작성하고 나면 비록 규모가 작고 복잡하지 않더라도 처음으로 성취감을 느낄 것입니다. 나는 그것을 검토해 줄 교사를 찾고 그의 의견과 제안을 들을 것입니다. 나는 또한 몇 가지 질문을 준비하고 다음 번 반복 방법을 알아보도록 도와달라고 요청할 수도 있습니다. 이번 시간에는 git의 기본 동작과 github의 기본적인 사용법을 배운 후, 프로젝트를 push하고 필요한 변경사항을 git에 커밋하겠습니다.

6. 이전에는 라이브러리나 프레임워크를 사용하지 않고 네이티브 JS를 작성했는데, 이것의 장점은 성급하게 라이브러리와 프레임워크의 개념에 얽매일 필요가 없다는 것입니다. 이제 정말 중요한 것은 JS 언어 자체이기 때문입니다. , 사실 제 프로그래밍 분야는 처음에 비해 많이 확장되었습니다. JS와 DOM을 결합하여 매우 실용적인 기능을 작성하고 프런트엔드 프로젝트를 완성했습니다.

7. 현재로서는 더 많은 선택 사항이 있습니다. 계속해서 기본 JS를 사용하여 등록 및 로그인, 동적 사진 표시 등과 같은 하나 또는 두 개의 유사한 프로젝트를 완료할 수도 있습니다. 현재 프로젝트의 코드 개선을 위해 JS 패턴과 같은 책을 읽을 수 있습니다. 왜냐하면 첫 번째 프로젝트의 코드 구조는 일반적으로 특별한 프로그래밍이 없지만 구성되어 있기 때문입니다. 이러한 책은 JS 프로그램이 얼마나 더 나은지 알려줄 수 있습니다. 또한 상황을 활용하고 작업 중인 프로젝트를 jQuery 기반 코드로 재구성하여 jQuery의 기본을 배우고 비교 중에 jQuery의 이점을 이해할 수도 있습니다. 현재 프로젝트 코드를 ES6 구문으로 변환하면 비교 중에 ES6 구문을 사용할 수 있습니다.

8. 다음으로 TODOLIST와 같은 더 복잡한 프로젝트를 작성하고 이러한 애플리케이션을 처음부터 끝까지 구현하겠습니다. 첫 번째 버전도 네이티브 JS(ES5)로 작성한 다음 jQuery로 리팩터링할지 ES6으로 리팩터링할지 선택합니다. . 또는 관심이 있는 경우 TypeScript도 사용할 수 있습니다. JS 프로그래밍에 관한 책을 계속 읽으면 문법적인 세부 사항이 아닌 프로그램의 "설계"에 주의를 기울여야 합니다. 대부분의 경우 문법 문제는 검색할 수 있습니다. 프로그램 "설계"는 애플리케이션의 요구 사항, 어떤 기능, 모듈로 나누어야 하는지, 모듈을 쉽게 나눌 수 있는지, 점진적으로 아키텍처 솔루션을 찾는 방법, 어떤 종류의 모듈화가 더 자연스러운지, 어떻게 해야 하는지를 분석하는 것입니다. 오류 처리, 템플릿 지원이 필요한지, 복잡한 사용 사례를 직접 구현해야 하는지, 타사 라이브러리와 통합해야 하는지 등 실제 개발과는 거리가 먼 문제입니다.

9. 이 프로젝트를 작성한 후에도 교사(무료 또는 유료 여부는 중요하지 않음)를 찾아 내 구현을 검토하고 내가 이해한 실수를 지적하도록 할 것입니다. 기회. 첫 번째 프로젝트와 마찬가지로 선생님의 피드백과 내 생각을 바탕으로 계속 반복할지 여부와 지속적인 개선 방법을 결정할 것입니다. 이때쯤이면 시중에 나와 있는 자바스크립트 필독서들을 다 사서 읽을 수 있을 것 같습니다. 첫 번째 책은 읽기가 매우 느리고 두 번째 책은 빠르지 않지만 네 번째, 다섯 번째 책을 읽으면 읽을 수 있습니다. , 이해하지 못하는 장을 선택하여 구체적으로 읽은 다음 책에 언급된 지식, 기술 및 실습을 이전에 작성한 프로젝트에 적용하십시오.

10 이제 저는 JS(ES5)에 대한 비교적 포괄적인 기초를 갖추고 있고 적어도 문제가 발생하면 대략적으로 방향이 무엇인지 알 수 있습니다. 나는 또한 jQuery에 노출되어 있으며 아마도 ES6에도 익숙할 것입니다. 나는 언어의 기본 생태에 대해 비교적 포괄적이고 심오한 이미지를 가지고 있습니다. 이제 프레임워크를 배우고 싶습니다. 어떤 프레임워크가 마음에 드는지 확인하기 위해 먼저 공식 튜토리얼을 완료하고 몇 가지 기본 개념 문제를 이해하겠습니다.

11. 그러면 내가 한 일은 프레임워크를 사용하여 이전 프로젝트(예: TODOLIST)를 다시 작성하는 것이었습니다. 스스로 답을 찾고 디버깅한 경험이 있습니다. 프레임워크 자체가 불분명하더라도 검색이나 조사를 통해 스스로 답을 찾을 수 있습니다. 찾을 수 없더라도 최소한 기본적인 개발 사고력은 갖고 있습니다. 답은 몰라도 여전히 일반적인 방향은 있습니다. 다른 사람에게 질문하고 싶다면 더 가치 있는 질문을 할 수도 있습니다. 제가 프로가 된 것은 프레임워크의 이것저것을 알기 때문이 아니라, 개발을 할 수 있는 기본적인 습관과 자질을 갖추었기 때문입니다.

12. 아마도 이때 처음으로 프론트엔드 직업을 찾았던 것 같아요. 시간이 지나서 노드 백엔드 개발과 일렉트로닉에 관심이 생겼다는 걸 알게 됐어요. 기본 문서를 읽어보니 사실 배울 필요가 없더라고요. 무엇이든 사용하세요. JS 프로그램의 아키텍처, 공통 구조, 패턴, 주요 개념을 이미 잘 알고 있기 때문에 JS 생태계 안에 있는 한 어떤 신기술이 나오든, 라이브러리든 프레임워크든 패턴이든 상관없습니다. , 제가 ​​가장 먼저 그것을 이해할 수 있는 방법을 찾는 데 시간이 걸렸습니다. JS 프로그램에서 중요한 것이 무엇인지, 개념이 어떻게 결합되고 변화되는지를 배웠습니다. JS를 배우는 것과 JS를 사용하는 것에는 차이가 없습니다.

13. 그러면 실제로 차근차근 배워서 탄탄한 언어 기초를 갖춘 사람들은 더 이상 가르칠 사람이 필요하지 않습니다.

단계적으로 어긋나는 개념이나 조작이 있는 것 같아요.

1. 너무 일찍 '체계적인' 학습을 추구하는 것은 너무 의욕이 넘치고 야망이 생기기 쉽고, 사람의 에너지는 제한적입니다. 자신이 평범한 사람임을 인정해야 합니다.

2. 소스 코드를 읽는 것이 가장 "필수" 학습이라고 생각하지만 결과적으로 세부 사항의 구렁텅이에 빠지고 빠져나올 수 없습니다

3. 프레임워크 등 '최신' 기술에 너무 일찍 몰입하고, 좋은 언어 기초 없이 학습하면 절반의 노력으로 두 배의 결과를 얻을 수 있습니다. '최신' 기술과 핵심 기술은 같지 않습니다. . 기초와 핵심을 갖추면 새로운 기술을 배우는 것이 가장 효율적이지만 그 반대는 사실이 아닙니다

4. 프로그래밍 학습은 "지식"을 축적하기 위해 책을 읽는 것과 동일하지만 프로그래밍은 결국 기술이며 배울 수 없습니다. 아무것도 하지 않고는 '아는 것'과 '할 수 있는 것'은 다릅니다

5. 구체적인 것을 배우지 말고 처음부터 '가장 좋은' 학습 경로를 찾으려고 노력하는 것이 가장 큰 낭비일 수 있습니다. . 의미 있는 목표는 내일 무엇을 배워야 할지 가정하기보다 내일 무엇을 해야 할지 스스로에게 말하는 것입니다

6. 학습 자료를 너무 많이 채우면 더 많은 정보를 찾을수록 목록이 더 완전해질 것이라고 생각합니다. 스스로 배우십시오. 빨리 얻을수록 좋습니다. 사실, 목록이 많을수록 소음이 커지고 심리적 압박감과 좌절감이 더 강해집니다. 무대, 책, 인터넷 정보만으로도 충분하며, '수집'은 좋지 않은 습관입니다. 배우는 사람은 지식을 쌓기보다는 소화하는 것을 추구해야 합니다

위 내용은 JavaScript를 통한 효율적인 학습으로 가는 길 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿