HTML5는 많은 새로운 기능과 개선 사항을 소개합니다. 그 중 하나는 의미론입니다. HTML5는 의미론을 향상시키기 위해 새로운 요소를 추가합니다. 우리는 이제 2, 헤더 및 바닥 글만 사용하고 있습니다. <Header> 태그는 문서의 헤더 (소개 정보)를 정의하고 <FUTER> 태그는 섹션 또는 문서의 바닥 글을 정의합니다. 일반적 으로이 요소에는 제작자의 이름, 문서 작성 날짜 및/또는 연락처 정보가 포함됩니다.
[시맨틱 태그는 시각 효과를 정의하는 것이 아니라 HTML에서 의미있는 정보를 제공합니다. ]]
JavaScript 코드를 배치하기에 가장 좋은 곳<head> </head> 영역이 아닌 </body> 태그 전에 모든 페이지 컨텐츠 후에 JavaScript 코드를 배치하는 이유가 있습니다.
일반적으로 브라우저는 컨텐츠를 위에서 아래로로드하고 렌더링합니다. JavaScript 코드가 헤드 영역에 배치되면 모든 JavaScript 코드가로드 될 때까지 HTML 문서의 내용이로드되지 않습니다. 실제로 브라우저가 페이지에 JavaScript 코드를로드하면 모든로드 및 렌더링이 차단됩니다. 이것이 우리가 더 높은 성능을 제공 할 수 있도록 문서 끝에 JavaScript 코드를 넣는 이유입니다.
이 책을 번역 할 때 최신 jQuery 버전은 1.7입니다 (원래 단어는 다음과 같습니다.이 책을 쓰는 것은이 책을 작성합니다. thelatest jQuery 버전은 1.4.4입니다. jQuery는 최소 버전과 개발 버전을 가지고 있습니다. 이것이 코드 예제의 jQuery 파일의 이름이 jQuery-1.7.min.js 인 이유입니다. 이 버전 번호는 귀하가 사용하는대로 작동하지 않을 수 있지만 JQuery가 새 버전을 더 이상 뒤로 호환하지 않도록 주요 수정을하지 않는 한 사용법은 동일합니다.
페이지가 준비되면 코드를 실행하십시오JavaScript 코드를 실행하기 전에 페이지가 준비되었는지 확인해야합니다. 그렇지 않으면로드되지 않은 요소에 액세스하려고 할 때 오류가 발생합니다. JQuery는 페이지가로드되도록하는 방법을 제공합니다. 코드는 다음과 같습니다.
jQuery (document) .ready (function () {
// Codehere.
});
사실, 우리는 이것을 써야합니다.
$ (function () {
// Codehere.
});
이 $ 태그는 jQuery의 약어입니다. 우리가 전화 할 때 (단어는 전화의 의미, zhuangability) $ (무언가), 우리는 실제로 JQery (무언가)라고 부릅니다.
$ (function_callback)는 ReadyEvent의 또 다른 약어입니다.
다음 코드와 동일합니다.
$ (document) .ready (function_callback);
마찬가지로 다음과 동일합니다.
jQuery (ducment) .ready (function_callbak);
놀리다1. JavaScript 코드를 배치하는 데 가장 적합한 위치는 어디입니까?
에이. <head> 태그 전에
비. <head> </head> 요소의 중간에 삽입하십시오.
기음. <body> 태그 후
d. 태그 전에 </body>
Pingpong 게임의 요소를 만듭니다
우리는 Pingpong 게임을 만들 준비가되었습니다.
움직이십시오
1. 편집기에서 jQuery 설치 예제 및 Open Index.html을 계속할 것입니다.
2. 그런 다음 본체의 div 노드를 사용하여 게임 플랫폼에서 2 비트와 공을 사용하여 게임 플랫폼을 만듭니다.
<divid = "Game">
<divid = "Playground">
<divid = "paddlea"class = "패들"> </div>
<divid = "Paddleb"class = "Paddle"> </div>
<divid = "ball"> </div>
</div>
</div>
3. 우리는 이제 게임 객체를 만들었고 이제 그들에게 스타일을 제공합니다. 코드를 헤드 요소에 넣으십시오.
<스타일>
#운동장{
배경 :#e0ffe0;
너비 : 400px;
높이 : 200px;
위치 : 상대;
오버플로 : 숨겨진;
}
#공{
배경 : #fbb;
위치 : 절대;
너비 : 20px;
높이 : 20px;
왼쪽 : 150px;
상단 : 100px;
Border-Radius : 10px;
}
.외륜{
배경 : #BBF;
왼쪽 : 50px;
상단 : 70px;
위치 : 절대;
너비 : 30px;
높이 : 70px;
}
#paddleb {
왼쪽 : 320px;
}
</스타일>
4. 마지막 부분에서는 JavaScript 논리를 jQuery 참조 뒤에 배치합니다. 코드가 점점 커지기 때문에 별도의 파일로 작성합니다. 따라서 html5/"> html5games.pingpong.js라는 폴더를 작성해야합니다.
5. JavaScript 파일을 준비한 후 HTML 파일에 연결해야합니다. index.html 파일의 </body> 태그 앞에 다음 코드를 배치하십시오.
<scriptsrc = "js/jquery-1.7.min.js"> </script>
<scriptsrc = "js/html5games.pingpong.js"> </script>
[번역가의 친절한 팁 : 시도해보십시오
<scriptsrc = "js/jquery-1.4.4.js"/>
<scriptsrc = "js/html5games.pingpong.js"/>
사양에 따른 글쓰기는 많은 문제를 피할 수 있다는 것을 알게 될 것입니다.]
6. 우리는 게임 로직을 html5games.pingpong.js에 넣습니다. 여기에 라켓을 초기화하는 유일한 논리는 다음과 같습니다.
// CodeInside $ (function () {} WillRunafterthedOmisloadedand
준비가 된
$ (function () {
$ ( "#paddleb"). css ( "top", "20px");
$ ( "#paddlea"). css ( "top", "60px");
});
7. 이제 브라우저에서 결과를 테스트합시다. 브라우저에서 index.html 파일을 열면 다음 스크린 샷과 유사한 스크린 샷이 표시됩니다.
무슨 일이에요?우리 게임에는 2 개의 라켓과 1 개의 공이 있습니다. 또한 jQuery를 사용하여 2 라켓의 위치를 초기화했습니다.
[오늘은 모두이며 다음 부분은 jQuery 선택기 및 CSS 기능에 관한 것입니다. 오류 나 질문이 있으면 메시지를 남겨주세요]
당신의 의견을 보는 것은 나의 가장 큰 동기입니다!