프로그램, 프로그래밍, 프로그래머
이번 시간에는 JS라는 프로그래밍 언어가 무엇인가를 이론적으로 되돌아볼 것이다.
HTML과 JS는 둘 다 컴퓨터 언어이다. 하지만 JS는 컴퓨터 언어임과 동시에 컴퓨터 프로그래밍 언어라고 하는 반면 HTML은 컴퓨터 프로그래밍 언어라고 하지는 않는다.
프로그램(Program)이라는 말에 중심에는 순서라는 의미가 깊숙히 자리잡고 있다. 이 순서를 만드는 행위를 프로그래밍이라고 하고 그 순서를 만드는 사람을 프로그래머라고 한다.
HTML은 웹페이지를 묘사하는 목적의 언어이기 때문에 시간의 순서에 따라서 무엇을 할 필요는 없으므로 시간의 순서에 따라 실행되는 기능을 갖고 있지 않다.
하지만 JS는 사용자와 상호작용하기 위해서 고안된 컴퓨터 언어이고 그러기 위해서는 시간의 순서에 따라서 웹브라우저의 여러 기능이 실행되어야 하기 때문에 프로그래밍이라고 하는 형태를 띄고 있고 바로 이런 점이 HTML과 JS를 구분하는 중요한 특징이라고 할 수 있다.
지금까지 우리는 여러 개의 명렁어를 시간의 순서에 따라 배치해서 컴퓨터의 기능이 실행되도록 하는 방법을 알아보았다. 처음에는 프로그래밍이 단순히 시간을 나열하는 것으로도 만족스러웠지만, 시간이 지나면서 조건에 따라서 다른 순서의 기능이 실행되게 하거나(조건문) 반복해서 어떤 기능이 실행되도록 하고(반복문) 코드나 순서가 복잡해짐에 따라서 이 복잡해진 순서를 단순하게 잘 정리정돈하는 방법(함수)도 차차 고안되기 시작했다.
ToDoList 만들어보기
JS를 공부하던 중, 간단한 것이라도 만들어보자는 의미에서 투두리스트를 직접 만들어보기로 하였다.
화면 구성
<!DOCTYPE html>
<html>
<head>
<meta charset="urf=8">
<title>TO DO LIST</title>
</head>
<body>
<h1>TO DO LIST</h1>
<input type="text" id="input">
<button type="button" id="button">입력</button>
<ul id="list">
<li>Hello, World!</li>
</ul>
</body>
</html>
index.html에 input, button, list 요소로 기본적인 틀을 잡았다.
list에 내용 추가
//script.js
var button=document.getElementById('button');
var input=document.getElementById('input');
var list=document.getElementById('list');
button.addEventListener('click',clickButton);
function clickButton(){
var temp=document.createElement('li');
temp.innerHTML=input.value;
list.appendChild(temp);
}
input에 할일을 적고, 입력 버튼을 누르면 list에 추가하는 js코드를 작성해보았다.
script.js 파일을 생성한뒤 button, input, list 요소를 id를 통해서 가져오고 버튼에 clickButton이라는 함수를 연결하였다. clickButton 함수는 클릭하면 li 요소를 만들어서 input 데이터를 넣고, list에 추가하는 함수이다.
그리고 index.html의 body안에 script.js 파일을 < script src="./script.js">< /script>로 불러왔다. 위 사진처럼 input에 입력한 내용이 li로 추가되는 것을 확인할 수 있었다.
CSS로 꾸미기
@import url('https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&display=swap');
body{
font-family: 'Nanum Brush Script', cursive;
}
CSS로 폰트를 변경하기 위해 style.css 파일을 생성하였다.
그 후에 html파일의 head부분에서 < link rel="stylesheet" href="./style.css" >로 style.css 파일을 불러왔다.
<!DOCTYPE html>
<html>
<head>
<meta charset="urf=8">
<title>TO DO LIST</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>TO DO LIST</h1>
<input type="text" id="input">
<button type="button" id="button">입력</button>
<ul id="list">
<li>Hello, World!</li>
</ul>
<script src="./script.js"></script>
</body>
</html>
list 삭제하기
이제 선택한 li 요소를 삭제하는 기능을 추가할 것이다.
먼저 li 요소를 추가할 때 버튼도 함께 추가하도록 clickButton 함수를 수정하고 remove 함수를 작성하였다.
//script.js
var button=document.getElementById('button');
var input=document.getElementById('input');
var list=document.getElementById('list');
var cnt=1;
button.addEventListener('click',clickButton);
function clickButton(){
var temp=document.createElement('li');
temp.setAttribute("class","list-group-item");
temp.setAttribute("id","li"+cnt);
temp.innerHTML=input.value;
temp.innerHTML+="<button style='float: right;' class='btn btn-outline-secondary' type='button' onclick='remove("+cnt+")'>삭제</button>";
list.appendChild(temp);
cnt++;
}
function remove(cnt){
var li=document.getElementById('li'+cnt);
list.removeChild(li);
}누름 버튼이 몇번째 요소인지 알아야 하므로 li에 id를 추가하고 버튼에 클릭 이벤트로 remove(cnt)를 추가한다. 맨 처음에는 Made by WooHyunKing이 있으므로 index는 1부터 시작해야 한다.
삭제버튼을 누르면 list요소에서 삭제된다.
<!DOCTYPE html>
<html lang="kr" dir="ltr">
<head>
<meta charset="urf=8">
<title>TO DO LIST</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="center">
<h1>TO DO LIST</h1>
<div class="input-group mb-3">
<input type="text" class="form-control" id="input">
<button class="btn btn-outline-secondary" type="button" id="button">입력</button>
</div>
<ul class="list-group" id="list">
<li class="list-group-item">Made by WooHyunKing :D</li>
</ul>
</div>
<script src="./script.js"></script>
</body>
</html>@import url('https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&display=swap');
h1{
font-size:150px;
}
body{
font-family: 'Nanum Brush Script', cursive;
}
#center{
position:absolute;
left:30%;
top:20%;
}
0개의 댓글
관련 채용 정보
