HTML, CSS JavaScript 게시판 만들기 - HTML, CSS JavaScript gesipan mandeulgi

Question

[Web] SNS형 게시판 만들기 프로젝트 (4) - Java Script 사용

2020.05.17 01:02
Computer Science/Web

$ 개발 환경은 Mac OS Catalina임을 알려드립니다 $

오랜만에 Web관련 포스팅을 합니다.

CSS설정는 사실 내용적인 부분이 암기가 많습니다.

그래서 개발할 때는 W3school을 참조하는 게 좋습니다.

내용이 너무 방대하니까요.

이제 좀 더 코딩적인 요소에 가까운 JavaScript와 JSP에 대해서 알아봅시다.

이번주 과제는 JavaScript를 활용해서 게시글 업로드를 하고 사용자가 입력한 내용을 출력시켜서 보여주면 되는 것과

form에서 입력한 결과를 alert에서 보여주는 처리를 해주면 됩니다.

우선 좀 쉬운 2번 과제부터 진행해봅시다.

form태그에 기록할 수 있는 대부분의 내용들을 입력을 받고 해당 내용을 alert로 출력해주면 됩니다.

우선 form태그 형식을 짜봅시다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Alert Example</title>
</head>
<body>
<form id="myform">
	<p>input the text : <input type="text" id="txt"> </p>

	<p>input password : <input type="password" id="pw"></p>


	<input type="checkbox" name="ck" value="phone">phone
	<input type="checkbox" name="ck" value="computer">computer<br>


	<label for="male">Male</label>
	<input type="radio" name="gender" id="male" value="male">
	<label for="female">Female</label>
	<input type="radio" name="gender" id="female" value="female">


	<p>select color : <input type="color" id="c"></p>

	<p>birthday : <input type="date" id="d"></p>

	<p><input type="range" id="r" min="0" max="10" value="5"></p>

	<p>Quantity (between 1 and 10) :
	<input type="number" id="num" min="1" max="10" value="1" step="1">
	</p>

	<select id="selectbox">
		<option value="select1">select1</option>
		<option value="select2">select2</option>
		<option value="select3">select3</option>
		<option value="select4">select4</option>
	</select>

	<textarea id="textarea" cols="10" rows="5">
	</textarea>

	<input type="submit" value="submit" onclick="printdata()">

</form>
</body>
</html>

이 부분은 그냥 HTML적 요소이므로 설명은 pass하겠습니다.

그러면 이제 JavaScript부분을 짜봅시다.

우선 form태그 내부의 input type들에 id를 지정해줍시다. JavaScript 명령어 때문입니다.

여기서 특별히 주의해야 할 점은 마지막에 있는 submit input에서 onclick에 구현하고자하는 함수를 입력해줘야 합니다.

이름 그대로 클릭을 하면 해당 함수가 작동을 합니다.

<script>

function printdata() {
    var f = document.getElementById('myform');

		var txt = "";

    	for (var i = 0; i < f.length-1; i++) {
    		if(f.elements[i].type == "checkbox") {
    			if(f.elements[i].checked)
    				txt += f.elements[i].type + ' : ' + f.elements[i].value + '\n';
    		}else if(f.elements[i].type == "radio") {
    			if(f.elements[i].checked)
    				txt += f.elements[i].type + ' : ' + f.elements[i].value + '\n';
    		}else{
    			txt += f.elements[i].type + ' : ' + f.elements[i].value + '\n';
    		}
    	}

    	alert(txt);
}

</script>

이제 onclick에 설정한 함수를 구현해 봅시다.

해당 코드를 보고 문득 들 수도 있는 생각이 있습니다.

"function printdata를 사용할 때 window.onload를 선언해야 하지 않나요?"라고 물을 수 있습니다.

확인을 위해 가장 좋은 것은 직접 해보는 것이지만 간단하게 설명해 드리겠습니다.

우선 위와 같은 생각을 한 근거는 아마 document.getElementById때문일 것입니다.

위 명령어는 해당 아이디를 가진 요소의 정보를 가져오는 것입니다.

문제는 모든 컴퓨터 코드는 위에서부터 순차적으로 읽는다는 것입니다.

function보다 위에 'myform'은 선언되어있지 않기 때문에 원래라면 오류가 나게됩니다.

이를 막기 위해서 최종적으로 해당 부분을 불러오는 명령어인 window.onload를 선언해주는 방법이 있습니다.

window.onload를 사용하면 모든 코드를 불러온 후 가장 마지막으로 해당 함수를 읽어들입니다.

주의해야할 점은 "무조건" 불러온다는 것입니다.

우리는 submit을 할 경우에만 해당 함수를 실행하므로 window.onload를 사용할 필요가 없습니다.

자 이제 설명은 접어두고 JavaScript 코드를 해석해봅시다.

저는 좀 간단한 방법을 사용했습니다.

var f = document.getElementById('myform');

document.getElementById를 쓰면서 모든 input type의 id로 불러와도 괜찮습니다.

일부 데이터는 getElementsByTagName으로 가져올 필요도 있습니다.

하지만 제가 한 방법처럼 form 자체를 불러와 버리는 방법도 있습니다.

이렇게 불러온 데이터는 배열의 형태처럼 저장됩니다.

입력한 input type 순서대로 저장이 되게 말이죠.

그 후 저는 checked라는 명령어가 작동하는 radio box와 check box에대해서만 checked 요소를 확인해주었습니다.

최종적으로 alert에 txt 문자열 변수를 출력해주면 됩니다.

이제 이를 활용해서 직접 게시글에서 등록한 내용을 보여줍시다.

그 전에 게시글 등록 부분이 약간 변경되었습니다. (제가 몇 개 빼먹은 게 있더라구요....)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>write</title>
<style>
  section {
    width:500px;
    height:300px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-300px;
    margin-top:-200px;
  }

  header img{
    width: 50px;
    height: auto;
  }

  .text_box input{
    position: absolute;
    left: 520px;
  }
</head>
<body>
  <header>
    <a href="main.html"><img src="image/home.png" style="width:50px; height:auto"></a>
  </header>

  <section>
    <form enctype="multipart/form-data">
    <input type="text" size="82" id="title_bar" value="제목을 입력해주세요."><br><br>
      그림첨부 : <input id="picture"type="file" accept="image/jpg,image/jpeg,image/png,image/gif" value=" "><br>
    <div class="text_box" >
      <textarea id="m_txt" name="main_text" rows="20" cols="80"></textarea>

      <input id="txt" type="submit" name="in" value="글 등록하기" onclick="commit()">
    </div>
    </form>
  </section>
</body>
</html>

지난 번에 CSS설정까지 끝난 부분들 입니다.

제가 놓친 부분이 파일 등록이랑 제목 입력부분입니다. 이 부분이 필수요소라 했는데 제가 좀 깜빡했네요;;

등록한 파일의 이름만 JavaScript로 가져오면 됩니다.

우선 다른 데이터들을 우선 가져와서 설정해봅시다.

<script>
function commit() {
  var title_name = document.getElementById("title_bar");
  var main_txt = document.getElementById('m_txt').value;
  var uppic = document.getElementById('picture');

  var text = "";
  text += "제목 : "+ title_name.value + "\n내용 : " + main_txt;

  if (check) {
    window.open("main.html","_self");
  } else {
    document.getElementById("txt").focus();
    return false;
  }
}
</script>

사실 좀 귀찮으니까 textarea는 바로 value로 가져옵시다.

그 후 text에 제목과 내용을 넣어주면 됩니다. 여기까진 쉽죠?

이제 파일이 있는 지 없는 지를 확인해야합니다.

<script>
function commit() {
  var title_name = document.getElementById("title_bar");
  var main_txt = document.getElementById('m_txt').value;
  var uppic = document.getElementById('picture');

  var text = "";
  text += "제목 : "+ title_name.value + "\n내용 : " + main_txt;

  if (uppic.files.length == 0) {
    alert(text);
  }else{
   text += "\n선택한 사진 파일명 : " + uppic.files[0].name;
   alert(text);
  }

  if (check) {
    window.open("main.html","_self");
  } else {
    document.getElementById("txt").focus();
    return false;
  }
}
</script>

만약에 file이 불러온 데이터에 있다면 확인을 해야하는 절차가 있습니다.

파일의 길이가 과연 0인가? 즉 파일이 있는 가?를 확인해야합니다.

만약 파일이 없다면 그냥 문자를, 있다면 해당 파일의 이름을 가져오면 됩니다.

근데 만약에 그냥 uppic.files.name으로 가져오면 단순히 undefined로 나옵니다.

해당 문제를 해결하기 위해 files[0]으로 처리를 해주면 됩니다.

JavaScript 게시판 만들기 HTML5 게시판 만들기 Html JavaScript 게시판 Javascript 게시판