자바스크립트 기초 (자바스크립트의 특징 5개)

 

1.innerHTML을 이용하여 html에 바로 텍스트 값을 줄 수 있다.

<p id="demo"> 자바스크립트 </p>

<button type="button" onclick='document.getElementById("demo").innerHTML="Hello javascript!"'>
click me!</button>

여기서 document.getElementById() 는 selector의 용도로 id값을 가져온다.

 

자바스크립트

 

2.html의 속성값을 바꿀 수 있다.

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light
</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">turn off the light

</button>

getElementById().src 로 소스값을 바로 바꿀 수 있다.

 

3.css 스타일을 바꿀 수 있다.

 

<p id="demo">
javaScript can change the style of html emlement</p>

<button type="button"
onclick="document.getElementById('demo').style.forntSize='35px'">click me</button>

getElementById().style 로 css를 바꿀 수 있다.

javaScript can change the style of html emlement

 

4.html문서를 숨길 수 있다.

<p id="demo">javascript can hide html elements</p>

<button type="button"
onclick="document.getElementById('demo').style.display='none'">click me</button>

javascript can hide html elements

document.getElementById('demo').style.display로 html 문서를 숨길 수 있다.

 

5.숨겨진 html문서를 보여줄 수 있다.

<p id="demo" style="display:none"> hello javascript!</p>


<button type="button"
onclick="document.getElementById('demo').style.display='block'"> click me!</button>

document.getElementById('demo').style.display로 숨겨졌던 html 텍스트를 보여줄 수 있다.

hello javascript!

 

 

출처: https://www.w3schools.com/js/js_examples.asp