제로 기반 프론트 엔드 자바 스크립트 빠른 시작

자바 스크립트 코드는 직접 페이지의 아무 곳이나 포함 할 수 있지만, 일반적으로 우리는 <헤드>에 자바 스크립트 코드를 생각 :

<HTML>
<HEAD>
<SCRIPT>
경고 ( '안녕하세요, 세계');
</ script>
</ head>
<http://www.my516.com>
...
</ BODY>
</ HTML>

. (1)
(2)
. 3
. 4
. 5
. 6
. 7
. 8
. 9
(10)
. (11)
... </ script> 코드 인 <script>는 브라우저에 직접 실행될 자바 스크립트 코드를 포함한다.

두 번째 방법은 하나의 자바 스크립트 코드의 .js 파일에 의해 도입 후 HTML 문서 <스크립트 SRC = "..."> </ script>를 넣어하는 것입니다 :

<HTML>
<HEAD>
<script의 SRC = "/ 정지 / JS의 / abc.js"> </ script>
</ head>
<body>
...
</ BODY>
</ HTML>

. (1)
(2)
. 3
. 4
. 5
. 6
. 7
. 8
. 9
따라서 / 정지 / JS의가 / abc.js 브라우저가 수행 될 것이다.

별도의 .js 파일에 자바 스크립트 코드는 유지 보수 코드에 더 도움이되는, 그리고 여러 페이지는 각각의 .js 파일의 동일한 사본을 참조 할 수 있습니다.

같은 페이지에 여러의 .js 파일을 도입 할 수있다, 당신은 또한 쓸 수 있습니다 <script> 코드 ... </ SCRIPT>, 여러 페이지를 수행하는 순서에 따라 브라우저는 JS.

때때로 당신은 또한 type 속성을 설정 <script> 태그를 볼 수 있습니다 :

<스크립트 유형 = "텍스트 / 자바 스크립트">
...
</ script>

1
2
3
4
기본 유형은 자바 스크립트, 그래서 명시 적으로 자바 스크립트 유형을 지정하지 않기 때문에 그러나 이것은 필요하지 않습니다.

작성하는 방법을 자바 스크립트는
자바 스크립트 코드를 작성하는 텍스트 편집기를 사용할 수 있습니다. 여기에서 우리는 다음과 같은 텍스트 편집기를 권장합니다 :

비주얼 스튜디오 코드
마이크로 소프트는 비주얼 스튜디오 코드에서 무료로 비주얼 스튜디오의 미니 버전으로 볼 수있다! 크로스 플랫폼! 내장 된 자바 스크립트에 대한 지원, 그것은 좋습니다!

텍스트 숭고한
숭고한 텍스트는 사용하기 쉬운 무료 텍스트 편집기이지만, 가끔 팝업됩니다 상자를 등록하지 않습니다.

메모장 + +
메모장 + + 무료 텍스트 편집기입니다,하지만 Windows에서 사용합니다.

후 서식있는 텍스트 대신 일반 텍스트 파일을 저장하기 때문에 당신은 자바 스크립트 나 HTML을 작성하는 Word 또는 워드 패드를 사용할 수 없습니다, 제대로 브라우저를 읽을 수는 없습니다. 또한 작성한 메모를 제시하지 않으려 고, 그것은 BOM 헤드를 추가 할 때 UTF-8 형식의 텍스트로 저장 현명하게하려고합니다.

자바 스크립트를 실행하는 방법
자바 스크립트를 실행하는 브라우저를 만들기 위해, 먼저 HTML 페이지, HTML 페이지에 자바 스크립트의 도입이 있어야하고 브라우저가 HTML 페이지를로드 할 자바 스크립트 코드를 실행할 수 있습니다.

당신은 좋은 HTML을 생성 할 수 있습니다 및 JavaScript는 다음 브라우저를 열고, 아직 결과를 볼 수 없습니다 내 하드 드라이브에 파일을 직접?

일부 자바 스크립트 코드를 실행 이런 식으로하는 것은 아무런 문제가 없지만, 때문에 브라우저 보안 제한의 파일로 : 결국 자바 스크립트 코드로 실행할 수 없습니다 네트워크로 시작 // 주소, 당신은 여전히 ​​웹 서버를 설정 한 후 HTTP 필요 : // 주소는 모든 일반 자바 스크립트 코드를 수행하기 시작했다.

그러나 학습의 초기 단계, 당신은 개발 환경을 구축하는 방법의 문제에 대해 걱정하지 않는다, 우리는 입력 자바 스크립트 코드를 제공하고 자바 스크립트를 학습에 초점을 맞출 수 페이지 기능을 직접 실행합니다.

다음과 같은 자바 스크립트 코드를 수행하기 위해 "실행"버튼을 클릭하십시오 :

줄의 끝이 주석 때까지 이중 슬래시로 시작 // 주석 포스터이며, 브라우저에 의해 무시됩니다
/ * 주석의 중간에 브라우저 * /에 의해 무시됩니다
// 첫 번째 자바 스크립트 코드 :
1
2

브라우저에 "Hello, World"를 표시하는 대화 상자가 나타납니다. 또한 두 개의 작은 따옴표의 중간의 내용을 수정 한 다음 실행하려고 할 수 있습니다.

디버깅
, 속담 "우리가 먼저 이익을해야합니다.", 때 자바 스크립트, 원하는 디스플레이 ABC 경우, 결과는 보여 주었다 서면 그 XYZ, 결국 코드를 어디에 문제? 미친하지 마십시오, 흰색으로, 믿고, 낙심하지 않습니다 자바 스크립트 자체는 아무 문제가 없다, 문제 브라우저 실행, 특정 문제가 내 코드가 없다.

어떻게 문제의 코드를 찾는 방법은? 이 디버깅이 필요합니다.

어떻게 브라우저에서 자바 스크립트 디버깅 코드를합니까?

먼저, 구글 크롬 브라우저를 설치해야 크롬 브라우저 개발자는 쉽게 자바 스크립트 코드를 디버깅 할 수 있도록 매우 친절합니다. 여기에서 크롬을 브라우저를 다운로드합니다. 국내 문제가 거울에 이동하십시오 어린이 신발의 페이지를 엽니 다.

개발자 아래, 즉, 브라우저 창은 두 가지로 구분 될 것이다 "개발자 도구 (개발자 도구)"- "개발자 (개발자)"- 한번 설치되면, 단지 웹 페이지를 열고, 다음 메뉴 "보기 (보기)"를 클릭 도구 :

 

"콘솔 (콘솔)"를 클릭, 자바 스크립트 코드는 Enter 키를 누릅니다 수행 패널에 직접 입력 할 수 있습니다.

콘솔 가변 입력 CONSOLE.LOG (a)의 내용을 확인하기 위해, 상기 콘텐츠의 값은 변수의 반송 후에 표시된다.

닫기 콘솔은 "×"버튼의 오른쪽 상단 모서리를 클릭하십시오. 자바 스크립트 코드를 작성할 때 콘솔의 마스터를 사용하십시오, 자주 콘솔 실행의 코드를 테스트해야합니다.

당신은 자신이 더 높은 요구 사항이있는 경우, 개발자 도구 '소스 (소스) ", 마스터 중단 점, 한 단계 씩 및 기타 고급 디버깅 기법을 공부하실 수 있습니다.
--------------------- 

추천

출처www.cnblogs.com/hyhy904/p/10983057.html