JavaScript(셀렉터, UI 만들기, function)

■ 셀렉터

id 셀렉터

<h1 id="hello">안녕하세요</h1>

<script>
  document.getElementById('hello').innerHTML = '안녕';
</script>

document ▶ HTML 웹문서

마침표 ▶ '~의'

getElementById() ▶ 괄호 안의 html 요소를 찾아라

innerHTML ▶ 내부 HTML

= (등호) ▶ 오른쪽 내용을 왼쪽에 대입해라

정리하자면, 위의 코드는 웹문서의 id가 hello인 요소를 찾아서 내부 HTML에 '안녕'을 넣어라는 뜻입니다.

 

document.getElementById('hello').style.color = 'green';

이렇게 스타일 주는 것도 가능합니다.

 

 

class 셀렉터

<h1 class="hello">안녕하세요</h1>

<script>
  document.getElementByClassName('hello')[0].innerHTML = '안녕';
</script>

id 말고 class를 찾는 셀렉터도 있습니다.

class 셀렉터는 지정하고 싶은 class가 위에서부터 몇 번째인지 뒤에 대괄호로 반드시 지정해줘야 합니다.

 

 

■ UI 만들기(alert 박스 만들기)

UI 만드는 법칙

1. HTML/CSS로 미리 디자인하고 숨기기

2. 필요할 때 UI가 나오도록 자바스크립트 코드 짜기

 

 

alert ui 디자인(html, css)하기

<div class="alert-box">알림창임</div>

.alert-box {
  background-color: skyblue;
  padding: 20px;
  color: white;
  border-radius: 5px;
  display: none;
}

미리 디자인했지만 평소에는 안보임

 

 

버튼 누르면 보여주기(onclick)

<button onclick="document.getElementById('어쩌구').style.display = 'block';"> 버튼 </button>

보여주기

<버튼 태그>에 onclick 속성을 넣으면 onclick 안의 JS를 실행해 줍니다.

그리고 none으로 가려놓았던 ui를 block으로 바꿔서 다시 보여주는 자바스크립트를 짜면 완성입니다.

 

 

■ funciton

funciton 이란?

function 은 긴 코드를 짧게 축약하고 싶을 때 쓰는 문법입니다.

형식은 아래와 같습니다.

function 자유롭게작명(){
  축약하고 싶은 긴 코드
}

그리고 function 을 사용하면 버튼을 보여주는 onclick의 긴 코드를 아래와 같이 짧게 축약할 수 있습니다.

<button onclick="알림창열기()">알림창 여는 버튼</button>

<script>
  function 알림창열기(){
    document.getElementById('alert').style.display = 'block';
  }
</script>

 

 

function의 파라미터 문법

<button onclick="알림창('block')">알림창 여는 버튼</button>
<button onclick="알림창('none')">알림창 닫는 버튼</button>

function 알림창(파라미터) {
  document.getElementById('alert').style.display = 구멍;
}

function은 파라미터를 사용해 다양한 방식으로 사용할 수가 있습니다.

파라미터는 자리에는 2개 이상의 파라미터가 들어갈 수 있습니다.