HTML 문서에 JS를 삽입하는 방법 요약

이번에는 HTML 문서에 JS를 삽입하는 방법을 요약하고, HTML 문서에 JS를 삽입할 때 주의사항은 무엇인지 살펴보겠습니다.

HTML에 JavaScript 삽입

HTML 문서에 클라이언트측 JavaScript 코드를 삽입하는 방법에는 4가지가 있습니다.

1. 삽입, <script> 태그 사이에 위치 </p> <p style="text-align: left;">2. <script> 태그의 src 속성으로 지정된 외부 파일에 배치됩니다(다중). </p> <p style="text-align: left;">3. onclick 또는 <a href="http://www.php.cn/code/8922.html" target="_blank">onmouseover </a>에 의해 처리되는 <a href="http://www.php.cn/wiki/1457.html" target="_blank">HTML 이벤트 핸들러에서 배치됩니다. 이러한 HTML 속성 값을 사용하는 경우(드물게) </a></p>4. 이 URL은 특수 프로토콜 "javascript" 프로토콜을 사용합니다(드물게). <p style="text-align: left;"></p> <p style="text-align: left;">0 - 첨부: 스크립트 유형 <span style="color: #0000ff"></span> </p>JavaScript가 원본입니다. 기본적으로 <script> 요소는 JavaScript 코드를 포함하거나 참조합니다. VBScript와 같은 비표준 스크립트 언어를 사용하려면 type 속성을 사용하여 스크립트의 MIME 유형을 지정해야 합니다. 예: <p style="text-align: left;"></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;script type=&quot;text/vbscript&quot;&gt;   ... ...  &lt;/script&gt;</pre><div class="contentsignin">로그인 후 복사</div></div> <p style="text-align: left;"> type 속성의 기본값은 "text/javascript" ". <span style="color: #ff0000"></span></p> <p style="text-align: left;">1 - 인라인 <script> 요소 <span style="color: #0000ff"></span></p> 예: <p style="text-align: left;"></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;script&gt;   function displayTime(){   ... ...   }   window.onload = displayTime;  &lt;/script&gt;</pre><div class="contentsignin">로그인 후 복사</div></div> <p style="text-align: left;">2 - src 속성은 외부 파일의 스크립트를 사용합니다. <span style="color: #0000ff"></span></p><script> 태그는 src 속성을 지원합니다. JavaScript 코드 파일의 사용법은 다음과 같습니다. <p style="text-align: left;"></p> <p style="text-align: left;">코드 복사<span style="text-decoration:underline;"> 코드는 다음과 같습니다.</span></p><script src="../../scripts/util.js"></script>

사용 시 src 속성, <script></script> 태그 사이의 내용은 무시됩니다.

src 속성을 사용하여 페이지에 스크립트를 포함하면 스크립트에 웹 페이지에 대한 모든 권한을 부여하는 것입니다.

3 - HTML의 이벤트 핸들러

스크립트가 있는 HTML 파일이 브라우저에 로드되면 이 스크립트의 JavaScript 코드는 한 번만 실행됩니다. JavaScript 코드는 Element 객체의 속성에 함수를 할당하여 이벤트 핸들러를 등록할 수 있습니다. 이 Element 객체는 문서의 HTML 요소를 나타냅니다.

예:

코드 복사 코드는 다음과 같습니다.

HTML에 정의된 이벤트 핸들러의 속성에는 쉼표로 구분된 모든 JavaScript 문이 포함될 수 있습니다. 이러한 문은 함수의 본문을 형성하며, 이는 해당 이벤트 핸들러 속성의 값이 됩니다.

4 - URL

의 JavaScript와 URL의 javascript: 프로토콜 한정자는 클라이언트에 JavaScript 코드를 삽입하는 또 다른 방법입니다. 이 특수 프로토콜 유형은 URL 콘텐츠가 JavaScript 인터프리터에 의해 실행되는 JavaScript 코드인 임의의 문자열임을 지정합니다. 이는 별도의 코드 줄로 처리됩니다. 즉, 명령문은 세미콜론으로 구분되어야 하고 주석은 /**/ 주석으로 대체되어야 합니다. javascript:URL로 식별할 수 있는 리소스는 실행된 코드가 문자열로 변환되어 반환되는 값이다. 코드가 정의되지 않음을 반환하면 리소스에 콘텐츠가 없는 것입니다.

javascript: URL은 태그의 href 속성,

의 작업 속성 또는 window.open의 매개변수 등 일반 URL을 사용할 수 있는 모든 위치에 있을 수 있습니다. () 방법.

하이퍼링크의 JavaScript URL은 다음과 같을 수 있습니다:

<a href="javascript:new Date().toLocaleTimeString();" rel="external nofollow" > 
What time is it? 
</a>

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!

추천 도서:

Vue를 사용하여 트리 뷰 데이터를 구현하는 방법

V-Distpicker 구성 요소 사용 방법

위 내용은 HTML 문서에 JS를 삽입하는 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!