[GSIT-POSTECH-DSC107] 웹 프로그래밍 기초 7

 

[Day 7] Ⅲ. JacvaScript 1

 

3. 문제해결

   - 에러의 종류 

       1. 문법 에러

          - 자바스크립트 문법이 잘못된 경우

          - 개발자 도구 콘솔 탭에서 확인

       2. 논리 에러

          - 코드의 논리가 잘못된 경우

          - 코드 분석을 통해 확인

 

   - 문법 에러 고치기 (예제: https://github.com/theun0524/theun0524.github.io/tree/javascript-debug-1)

       1. index.html을 크롬 브라우저로 오픈 후 개발자 도구 탭

       2. Console 탭에서 에러 확인

       3. script.js:39 를 클릭하면 에러가 난 파일과 에러를 발생시키는 코드의 위치를 알려줌

       4. 편집기에서 해당 파일, 위치 확인 후 에러 해결방안 탐색

          - 철자의 경우 검색엔진(구글, 익스플로러 등)을 통해 검색하면 찾기 쉬움

          - 상기 예시의 경우 .addeveltListener가 아닌 addEventListener로 작성되어야 함.

 

       5. 에러 해결

          - 에러가 해결된 경우 콘솔 탭에 있던 에러 메세지가 사라짐.

       6. 재가동 및 반복되는 문법 에러

          - 에러를 수정한 후 다시 작동시킴

          - 다른 에러 발생 (문구 출력 오류)

       7. script.js:31 를 클릭하면 에러가 난 파일과 에러를 발생시키는 코드의 위치를 알려줌

       8. 편집기에서 해당 파일, 위치 확인 후 에러 해결방안 탐색

          - 에러가 해결된 경우 콘솔 탭에 있던 에러 메세지가 사라짐.

          - 상기 예시의 경우 4열에 있는 코드 수정

            var lowOrHi = document.querySelector('lowOrHi'); -> var lowOrHi = document.querySelector('.lowOrHi');

 

       9. 에러 해결

          - 에러가 해결된 경우 콘솔 탭에 있던 에러 메세지가 사라지며 정상 작동함.

 

       10. 재가동 및 반복되는 문법 에러

          - 에러를 수정한 후 정답을 맞출 때까지 다시 작동시킴

          - 다른 에러 발생

 

       11. 콘솔 탭 확인 후 편집기에서 에러 해결

          - 상기 예시의 경우 .addeveltListener가 아닌 addEventListener로 작성되어야 함.

       12. 재가동 및 논리 에러 발견

          - 프로그램의 의도와 맞지 않게 늘 정답은 '1'이 됨.

          - 콘솔 탭으로는 에러 검출할 수 없음

       13. 코드 분석 후 에러 해결

          - 편집기를 통하여 코드를 분석하고 에러 해결

          - 상기 예시의 경우 1열, 66열에 있는 랜덤넘버를 지정하는 코드 수정

            var randomNumber = Math.floor(Math.random()) + 1; 

            -> var randomNumber = Math.floor(Math.random() * 100) + 1; 

 

       14. 재가동