1) JavaScript의 사용 목적
주로 HTML을 제어 할 때 가장 많이 쓰인다. 탭, 모달 등 웹페이지의 UI를 만드는데 용이하며 유저가 입력한 데이터를 검사하거나 서버에 데이터 요청을 할 때도 사용 된다.
2) javaScript 장점
document.getElementById('hello').innerHTML = '안녕';
JavaScript 언어를 잘 알지 못한다 하여도 해석에 용이하다. 예를 들면 자바스크립트 언어에 대해 전혀 무지하다는 가정 하로 위의 영어를 그대로 해석 해보면 '문서의 아이디가 hello인 엘리먼트를 가져와서 html의 안을 안녕으로 대입한다.' 라고 짐작하여 해석 할 수 있고 실제로도 그렇게 작동한다. 특정 요소를 선택해서 가져온다는 점에서 이를 셀렉터라고 한다. innerHTML이 아닌 다양한 HTML 제어 요소를 가지고 있는데 실제로 너무 많기 때문에 모든걸 외우려고 노력하기보다는 그때그때 검색해서 사용해도 충분하다. 자주 쓰는건 자동으로 외워지게 되어있다 :)
3) UI 만드는 가장 기본적인 과정
3-1) HTML/CSS로 디자인 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/alert.css">
<title>Document</title>
</head>
<body>
<div class="alert-box" id="alert">안녕하세요!</div>
<button>버튼</button>
</body>
</html>
.alert-box{
background-color: lightblue;
padding: 20px;
border-radius: 5px;
margin-bottom: 10px;
}
3-2) HTML요소 숨기기
.alert-box{
background-color: lightblue;
padding: 20px;
border-radius: 5px;
display: none;
margin-bottom: 10px;
}숨기는 방법은 opactity를 조정할 수도 있고 뭐 다양하지만 display : none을 가장 많이 이용한다.
css 속성에 display : none; 을 추가하여 요소를 숨겨주기
3-3) 특정 이벤트 발생시 숨긴 요소를 다시 보여주기
이번 예시에서는 클릭시 보여주는 것으로, 클릭 말고도 마우스를 올렸을 때, 키를 입력했을 때 등등 다양한 이벤트 요소가 존재한다.
가장 기본적인게 클릭!
<button onclick="document.getElementById('alert').style.display = 'block';">버튼</button>
이벤트 태그는 이벤트가 발생되는 요소에 직접적으로 적용하는 방법이 있다.
위처럼 HTML 태그 내에 [이벤트명 = "이벤트가 발생했을 때 적용될 스크립트"] 를 기재해주는 방법도 있고
<button onclick="alert()">버튼<button>
클릭시 함수를 호출 하는 방법으로도 적용이 된다.
위의 예제는 클릭하면 alert()이라는 함수가 호출이 되는 거고
<script>
function alert(){
document.getElementById('alert').style.display = 'block';
}
</script>스크립트 파일내에 함수를 정의해 주면 해당 함수 내에 있는 명령문들을 실행하게 되는 방법으로
첫번째 방법과 비교하면 가독성이 훨씬 좋아진걸 볼 수 있다.
완성 예제
이런 방법으로 미리 만들어 둔 요소를 이벤트의 발생에 따라 숨김과 나타냄을 반복하는게 가장 기본적인 자바스크립트의 사용 방법이다.
우리가 흔히들 보는 알림창, 팝업창, 메뉴바 등 대부분이 이렇게 작동된다!
