JavaScript와 HTML_PHP 프로그래밍을 결합한 기본 사용법 정리
- WBOY원래의
- 2016-05-16 20:06:381237검색
JavaScript: HTML 출력 작성
예시
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
팁: HTML 출력에만 document.write를 사용할 수 있습니다. 문서를 로드한 후 이 방법을 사용하면 전체 문서를 덮어쓰게 됩니다.
JavaScript: 이벤트에 반응
예시
<button type="button" onclick="alert('Welcome!')">点击这里</button>
alert() 함수는 JavaScript에서 일반적으로 사용되지 않지만 코드 테스트에는 매우 편리합니다.
onclick 이벤트는 이 튜토리얼에서 배우게 될 많은 이벤트 중 하나일 뿐입니다.
JavaScript: HTML 콘텐츠 변경
JavaScript를 사용하여 HTML 콘텐츠를 처리하는 것은 매우 강력합니다.
예시
x=document.getElementById("demo") //查找元素
x.innerHTML="Hello JavaScript"; //改变内容
document.getElementByID("some id")를 자주 보게 될 것입니다. 이 메소드는 HTML DOM에 정의되어 있습니다.
DOM(Document Object Model)은 HTML 요소에 액세스하기 위한 공식 W3C 표준입니다.
JavaScript: HTML 스타일 변경
HTML 요소의 스타일을 변경하는 것은 HTML 속성을 변경하는 것의 변형입니다.
예시
x=document.getElementById("demo") //找到元素
x.style.color="#ff0000"; //改变样式
JavaScript: 입력 유효성 검사
JavaScript는 사용자 입력의 유효성을 검사하는 데 자주 사용됩니다.
예시
if isNaN(x) {alert("Not Numeric")};
HTML의 스크립트는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그와 2cacc6d41bbb37262a98f745aa00fbf0
스크립트는 HTML 페이지의 6c04bd5ca3fcae76e30b72ad730ca86d 섹션에 배치할 수 있습니다.
6919634607f14bdbe1a4299125db9861 태그
HTML 페이지에 JavaScript를 삽입하려면 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 사용하세요.
3f1c4e4b6b16bbbd69b2ee476dc4f83a 및 2cacc6d41bbb37262a98f745aa00fbf0는 JavaScript에 시작 위치와 끝 위치를 알려줍니다.
3f1c4e4b6b16bbbd69b2ee476dc4f83a와 2cacc6d41bbb37262a98f745aa00fbf0 사이에 JavaScript가 포함되어 있습니다.
<script>
alert("My First JavaScript");
</script>
위의 코드를 이해할 필요는 없습니다. 브라우저는 3f1c4e4b6b16bbbd69b2ee476dc4f83a와 2cacc6d41bbb37262a98f745aa00fbf0 사이의 JavaScript를 해석하고 실행한다는 점만 이해하세요.
이전 인스턴스에서는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그에 type="text/javascript"를 사용할 수 있습니다. 더 이상 필요하지 않습니다. JavaScript는 HTML5뿐만 아니라 모든 최신 브라우저의 기본 스크립트 언어입니다.
6c04bd5ca3fcae76e30b72ad730ca86d의 JavaScript
이 예에서 JavaScript는 페이지가 로드될 때 HTML의 6c04bd5ca3fcae76e30b72ad730ca86d에 텍스트를 씁니다.
예시
. . <script> document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph</p>"); </script> . .
JavaScript 함수 및 이벤트
위 예의 JavaScript 문은 페이지가 로드될 때 실행됩니다.
사용자가 버튼을 클릭하는 등 이벤트가 발생할 때 코드를 실행해야 하는 경우가 많습니다.
JavaScript 코드를 함수에 넣으면 이벤트가 발생할 때 함수를 호출할 수 있습니다.
이후 장에서 JavaScript 함수 및 이벤트에 대해 자세히 알아봅니다.
또는 의 JavaScript
HTML 문서에 스크립트를 무제한으로 배치할 수 있습니다.
스크립트는 HTML의 6c04bd5ca3fcae76e30b72ad730ca86d 또는 93f0f5c25f18dab9d176bd4f6de5d30e 섹션에 있을 수 있습니다.
일반적인 방법은 93f0f5c25f18dab9d176bd4f6de5d30e 섹션이나 페이지 하단에 기능을 넣는 것입니다. 이렇게 하면 페이지 내용을 방해하지 않고 동일한 위치에 배치할 수 있습니다.
93f0f5c25f18dab9d176bd4f6de5d30e
의 JavaScript 기능
이 예에서는 HTML 페이지의 93f0f5c25f18dab9d176bd4f6de5d30e 섹션에 JavaScript 함수를 배치합니다.
버튼을 클릭하면 이 함수가 호출됩니다.
예시
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
6c04bd5ca3fcae76e30b72ad730ca86d의 JavaScript 함수
이 예에서는 HTML 페이지의 6c04bd5ca3fcae76e30b72ad730ca86d 섹션에 JavaScript 함수를 배치합니다.
버튼을 클릭하면 이 함수가 호출됩니다.
예시
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</body>
</html>
팁: e388a4556c0f65e1904146cc1a846bee 요소가 생성된 후 스크립트가 실행되도록 페이지 코드 하단에 JavaScript를 배치했습니다.
외부 자바스크립트
스크립트를 외부 파일에 저장할 수도 있습니다. 외부 파일에는 여러 웹 페이지에서 사용되는 코드가 포함되는 경우가 많습니다.
외부 JavaScript 파일의 파일 확장자는 .js입니다.
외부 파일을 사용하려면 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그의 "src" 속성에 .js 파일을 설정하세요.
예시
<!DOCTYPE html> <html> <body> <script src="myScript.js"></script> </body> </html>
팁: 외부 스크립트에는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그가 포함될 수 없습니다.