본문 바로가기
웹코딩 배우기/· JavaScript

JavaScript 시작

by 닐기 2021. 11. 6.

See the Pen JS입문 by nilgi (@nilgi) on CodePen.

 

자바스크립트를 시작한다. 뭔지는 모르지만 무작정 따라한다.

JS에서 가장 많이 쓰는 기본이 getElementById()란다. id가 주어진 html을 변경하는 코드인가보다. JS의 시작은 큰 따옴표나 작은 따옴표로 알린다. 뭔지 하나도 모르겠다. 이게 무엇인지 알기까지 상당히 오랜 시간이 걸릴 것 같다. 죈장...

 

 

<h2>▸ 자바스크립트 입문</h2>
<h3>getElementById()를 가장 많이 사용하고 기본입니다.</h3>
<div id='ex'>자바스크립드를 시작합니다. JS는 html콘텐츠를 변경합니다.</div>
<button onclick='document.getElementById("ex").innerHTML = "Go!Go!Go! JavaScript"'>버튼</button>
<div id='ex1'>자바스크립드를 시작합니다. JS는 html콘텐츠를 변경합니다.</div>
<br/>
<button onclick="document.getElementById('ex1').innerHTML = 
'자바는 큰따옴표 작은따옴표를 모두 쓸 수 있다.'">버튼</button>

 

▲ document 앞에 "로 시작할 수 있고 '로 시작할 수 있다. 쭉 읽어보니 주로 '로 시작하나보다. "로 시작하면 안에 내용은 '로 한다.

 

<h2>▸ 자바스크립트로 이미지 변경</h2>
<button onclick="document.getElementById('lr').src='.../imgR.png'"><<<</button>
<img id="lr" src=".../img0.png">
<button onclick="document.getElementById('lr').src='.../imgL.png'">>>></button>

<h2>▸ 자바스크립트로 CSS를 컨트롤</h2>
<div id="fs">글자 크기를 변경</div>
<br/>
<button onclick="document.getElementById('fs').style.fontSize='24px'">커짐</button>
<br/>