시작하기에 앞서서
대략 3주간의 html,css 공부가 끝났다. 솔직히 하루에 몇시간 열심히 한거도 아니고, 여행 가고 놀러다니느라 빠지기도 많이 빠졌지만, 어쨌든 강의 하나를 다 들었다는 것에 의미를 두려한다. 마지막 포트폴리오 부분은 하지 않았지만, 일단 현재로서는 javascript를 빠르게 익히고 nodejs 부분으로 넘어가 실제로 기능하는 웹사이트를 만드는게 목표이니 css의 세세한 부분은 다루지 않았다.
이번 자바스크립트 공부에서도 visual studio code를 사용할 예정이다.
오늘의 주제
자바스크립트를 시작해 봅시다.
javascript는 왜 사용할까?
html,css 만으로는 동적인 웹페이지만 만들 수 있다. 예를 들면 버튼을 클릭하면 페이지의 배경 색상이 변한다던가, 실시간으로 현재 날씨나 시간을 알려주는 페이지를 만들 수 없다는 뜻이다. 이런 기능을 구현하기 위해서는 html 요소를 조작해 주는 언어인 javascript를 사용해야 한다.
javascript 사용해보자
일단 html 에서 javascript를 사용하는 방법에 대해서 알아보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<div class = "alert-box" id ="alert">
<p id = "title">알림창임</p>
<button id="close">닫기</button>
</div>
<script>
document.getElementById('close').addEventListener('click', function(){
document.getElementById('alert').style.display ='none';
});
</script>
</body>
</html>javascript를 html에 사용하려면 이 script 태그 안에 넣어주어야 사용이 가능하다.
그러면 간단하게 javascript를 이용해서 html 내용을 변경하는 코드를 작성해보자.
<h1 id="hello">안녕하세요</h1>
<script>
document.getElementById('hello').innerHTML = '안녕';
</script> html에서 특정 아이디의 html을 변경하고 싶다면
document.getElementById('hello') -> hello라는 id를 가진 html 요소를 가져온다, 체크한다라고 생각하면 된다. 그리고 innerHTML은 해당 id를 가진 html 요소 안에 있는 내용을 '안녕' 이라고 변경해 주는 것이다.
javascript는 html의 모든 요소, style도 저 코드를 이용해 조작할 수 있다. 그래서 그때 그때 바꾸고 싶은 부분이 있다면 구글링을 해보는게 좋지만, 기본적인 틀은 다음과 같다.
document.getElementById('???').??? = '???'; 이 틀 안에서 style.color를 이용해 html 요소의 color를 바꿀 수 있고, src를 통해 image를 넣을 수 있다.
function 문법 알아보기
function, 함수는 다른 언어들에서도 가장 중요하고 많이 사용하는 개념이다.
보통 길고 복잡한 코드를 여러번 재사용하는 경우가 있을 때, function 안에 넣어서 사용하면 코드의 복잡성을 줄일 수 있다.
<button onclick="open-box()">알림창 여는 버튼</button>
<script>
function open-box(){
document.getElementById('alert').style.display = 'block';
}
</script>
function의 형식은 다음과 같다. 이름을 정해주고, 중괄호 안에 반복해서 사용하는 코드를 넣어주면 된다. 그리고 만든 함수를 위 button onclick 처럼 호출해 주면된다. 추후에 addEventListner를 배울때 다시 다루도록 하겠다.
파라미터 사용하기
함수는 여러 파라미터를 받아서 함수 안에서 활용이 가능하다.
function open-box(a){
document.getElementById('alert').style.display = a;
}위 코드는 alert 란 id를 가진 html 요소의 display를 바꿔주는 함수가 될 것이다.
이 함수를 호출할 때는
<button onclick="open-box('block')">창닫기</button>이런 식으로 block 이라는 값을 넣어준다면, display가 block으로 변경되게 될것이다. 이를 활용한다면, 기존 display style이 none으로 되어 있다면 박스가 사라졌다가 버튼을 누면 다시 등장하는 기능을 구현할 수 있게 될 것이다.
addEventListener 사용하기
우리는 아까 button에 의해 javascript 함수를 실행할 때, onclick 이라는 속성을 사용했다. 이걸 계속해서 html 속성 안에 작성하게 되면 코드가 길어지고 복잡해져 다소 가독성이 떨어진다. 이를 위해서 우리는 addEventListener를 사용한다.
document.getElementById('alert').addEventListener('click', function(){
document.getElementById('alert').style.display = a;
});click 말고도 다양한 이벤트가 발생할 경우, addEventListener에 존재하는 콜백 함수 안에 있는 코드가 실행이 되게 된다.
querySelector 사용하기
우리가 위에서는 getElementById, ClassName 등을 사용했는데, 이를 한꺼번에 묶어서 사용하는 방법이 바로 querySelector가 있다.
<div class="test1">안녕하세요</div>
<div id="test2">안녕하세요</div>
<script>
document.querySelector('.test1').innerHTML = '안녕';
document.querySelector('#test2').innerHTML = '안녕';
</script>css 처럼 class는 .test1 이렇게 앞에 .을 붙여서 사용합니다. id는 . 대신 #를 붙여서 사용하면 됩니다.
classList 사용하기
버튼을 클릭하거나, 스크롤을 하는 이벤트가 발생할 때, html 요소에 class를 추가하거나 삭제해야 하는 경우가 있다. 한 class에 이벤트가 발생하게 되면 변경되어야 할 style 속성을 디자인 해두고, classList를 사용하여 이벤트 발생에 따라 클래스를 추가하는 식으로 활용 할 수 있다. 예시를 보면서 알아보도록 하자
document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){
document.getElementsByClassName('list-group')[0].classList.add('show');
});위 처럼 classList.add를 사용 하면 show class를 list-group class를 가진 html 요소에 추가한다. 그렇게 되면 버튼을 클릭하게 되면 css 파일에 show class에 대한 style이 적용되게 된다.
만약에 한번 누르면 show class를 추가하고, 다시 누르면 지우고 싶다면
.classList.toggle('show')를 사용하게 되면 toggle은 만약 해당 class에 show가 존재한다면 지워주고, 존재하지 않는다면 추가해 줍니다.
마무리
오늘은 javascript 시작과 기조 queryselector와 function 등 기초 문법을 알아보았다.
다음에는 jQuery와 javascript 문법에 대해서 더 알아보도록 하겠다.
