offfff

HTML 자바스크립트(HTML JavaScript) 본문

프로그래밍

HTML 자바스크립트(HTML JavaScript)

offfff 2016. 9. 9. 09:00

HTML JavaScript


자바스크립트는 HTML 페이지를 더 동적으로, 사용자와 상호작용이 가능하게 만들어준다.






The HTML <script> Tag


<script>태그는 client-side script(JavaScript)를 정의하는데 사용된다.

<script> element는 스크립팅 구문을 포함하거나, 외부 스크립트 파일을 src 속성으로 가져온다.

자바스크립트는 image 처리, form 작성 등을 할 때 주로 사용된다.

아래 자바스크립트 예제는 demo라는 id를 가진 HTML element에 문구를 출력하는 소스코드이다.

<p>에 직접 내용을 적은 것이 아니라, <script>를 통해 내용을 받아 출력하고 있다.


<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

</body>
</html>




JavaScript 맛보기


자바스크립트로 할 수 있는 몇가지 예를 살펴본다.


<!--HTML 내용 바꾸기-->


<!DOCTYPE html>
<html>
<body>

<button type="button" onclick="myFunction()">클릭하면 아래 내용이 바뀝니다.</button>
<p id="demo">여기 적힌 문구가 바뀝니다.</p>

<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

</body>
</html>


<!--HTML 스타일 바꾸기-->


<!DOCTYPE html>
<html>
<body>

<button type="button" onclick="myFunction()">클릭하면 스타일이 바뀝니다.</button>
<p id="demo">여기 적힌 문구의 스타일이 바뀝니다.</p>

<script>
function myFunction() {
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
}
</script>

</body>
</html>


<!--HTML 속성 바꾸기-->


<!DOCTYPE html>
<html>
<body>
<script>
function myFunction(sw) {
var addr;
if(sw==0){
addr="http://news.naver.com/main/read.nhn?mode=LSD&mid=shm&sid1=105&sid2=228&oid=001&aid=0008639844"
}
else {
addr="http://dk-projects.tistory.com"
}
document.getElementById('webPage').src = addr;
}
</script>

<button type="button" onclick="myFunction(1)">내 블로그</button>
<button type="button" onclick="myFunction(0)">네이버 뉴스</button>

<iframe id="webPage" src="http://dk-projects.tistory.com" width="100%"></iframe>

</body>
</html>




The HTML <noscript> Tag


<noscript> 태그는 client-side script를 지원하지 않거나 스크립트가 작동하지 않는 브라우저를 이용하는

유저들을 위한 대체 컨텐츠를 제공한다.


<!DOCTYPE html>

<html>
<body>

<p id="demo"></p>

<!--스크립트 지원시 아래 코드 실행-->
<script>document.getElementById("demo").innerHTML="Hello JavaScript!";</script>

<!--스크립트 미지원시 아래 코드 실행-->
<noscript>지금 사용하고 있는 브라우저는 자바스크립트를 지원하지 않습니다.</noscript>

</body>
</html>




아래 링크를 참조하여 번역 및 수정 함

http://www.w3schools.com/html/html_scripts.asp

저작자표시 비영리

'프로그래밍' 카테고리의 다른 글

HTML 레이아웃(HTML Layout)  (0) 2016.09.11
HTML 헤더(HTML Head)  (0) 2016.09.10
HTML iframes  (0) 2016.09.08
HTML Classes  (0) 2016.09.07
HTML 블록(HTML Blocks)  (0) 2016.09.06
'프로그래밍' Related Articles more