HTML 기초8 JavaScript

본 문서는 https://www.w3schools.com/html/default.asp를 공부하기 좋게 요약해 놓은 것입니다.

 

JavaScript는 HTML 페이지를 보다 동적이고 대화식으로 만듭니다.

 

<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()"> 
Click me to display Date and Time.</button>

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

 

HTML <script> 태그

HTML <script>태그는 클라이언트 측 스크립트(JavaScript)를 정의하는 데 사용됩니다.

<script>요소 중 하나 스크립트 문을 포함, 또는 그것을 통해 외부 스크립트 파일을 가리키는 src속성.

JavaScript의 일반적인 용도는 이미지 조작, 양식 유효성 검사 및 콘텐츠의 동적 변경입니다.

HTML 요소를 선택하기 위해 JavaScript는 이 document.getElementById()방법을 가장 많이 사용합니다 .

이 JavaScript 예제는 "Hello JavaScript!"를 작성합니다. id="demo"인 HTML 요소로:

 

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

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

 

JavaScript는 콘텐츠를 변경할 수 있습니다.

 

<button type="button" onclick="myFunction()">Click Me!</button>

<p id="demo">This is a demonstration.</p>

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

 

 

JavaScript는 스타일을 변경할 수 있습니다.

 

<p id="demo">JavaScript can change the style of an HTML element.</p>

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

<button type="button" onclick="myFunction()">Click Me!</button>

 

JavaScript는 속성을 변경할 수 있습니다.

 

<script>
function light(sw) {
  var pic;
  if (sw == 0) {
    pic = "pic_bulboff.gif"
  } else {
    pic = "pic_bulbon.gif"
  }
  document.getElementById('myImage').src = pic;
}
</script>

<img id="myImage" src="pic_bulboff.gif" width="100" height="180">

<p>
<button type="button" onclick="light(1)">Light On</button>
<button type="button" onclick="light(0)">Light Off</button>
</p>

 

HTML <noscript> 태그

HTML <noscript>태그는 브라우저에서 스크립트를 비활성화했거나 스크립트를 지원하지 않는 브라우저를 가진 사용자에게 표시할 대체 콘텐츠를 정의합니다.

 

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>