<!doctype>
<head>
<title>nano memo</title>
</head>
<body>
</body>
</html>일단 제목부터 붙였다. 왠진 모르겠지만 한글 입력이 안돼서 nano memo로 대충 붙였다.
그러고 실행하고 나니 오류로 !doctype 뒤에 html을 붙이라고 한다.
- !doctype 뒤에 html 추가.
<!doctype>
<head>
<title>nano memo</title>
</head>
<body>
<form action="url" method="GET">
<input type="submit" value="제출하기"/>
<input type="submit" value="제출하기"/>
<textarea type="text" class="text" id="input"></textarea>
<br/>
</form>
</body>
</html>그 뒤로 잠시 검색하다가 생활코딩에서 대강 기본 폼 가져와서 붙여넣었다.
근데 submit으로 해놓으면 무조건 제출만 되더라.
- input type submit에서 button으로 변경, onclick 이벤트 추가, 각각 value 저장하기, 불러오기로 변경.
그리고 한참동안 파일을 만들었다 지웠다 엎었다 했다.
function msg(){
alert(document.getElementById("input").value);
document.getElementById("input").value = "";
}그리고 자바스크립트에서 수정이 잘 되는지 확인해보고,
.button{
width:150px;
height:50px;
}
.text{
width:500px;
height:800px;
font-size:20px;
}Css로 코드를 맞췄다.
그리고 LAMP의 P가 PHP라는 것을 깨닫고 PHP를 만들어 실행해봤지만 그냥 텍스트 파일처럼 열렸다!
이제야 뭐가 뭔지 대충 이해하고 인터넷에서 LAMP 설치 방법을 찾았다.
이제 대강 감이 잡혀서 이후로는 mdn 보면서 만들었다.
폴더에 쓰기 권한 주고. 쓰기 권한 없어서 put 계열 함수가 작동을 안 했다.
str = document.getElementById("input").value;
httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = alertContents;
httpRequest.open('POST', 'input.php');
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
httpRequest.send('str=' + encodeURIComponent(str));마지막으로 이 부분만 기억하자. XMLHttpRequest()를 새로 만들어 각종 정보를 때려 박고 보낸다. send에 인수 넣으면 php에서 사용할 수 있다. 그리고 onreadystatechange에 함수 대입해서 실행시키는 거고.
function alertContents() {
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
document.getElementById("input").value = httpRequest.responseText;
alreadyyet = httpRequest.responseText;
}
}
}참고로 alertContetnt는 이렇게 생겼다. httpRequest.responseText가 echo로 나온 반환값이다.
그리고 반응형 웹은 대충 했다.