[JS]ルームリスト

52032 ワード

MVC芳名録の作成

ライティング機能の実装

WRITE.HTML

を送信する場合は、入力した値write actionを使用します.html

に移動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!--
        ?name=value&name=value& => queryString
    -->
    <h1>정말 멋있는 게시판</h1>
    <form action="write_action.html" method="get">
      제목  <input type="text" name="n_title" value=""><br>
      글쓴이 <input type="text" name="n_writer" value=""><br>
      글쓴이 능력<br>
      HTML<input type="checkbox" name="n_skills" value="html"> 
      CSS<input type="checkbox" name="n_skills" value="css"> 
      JS<input type="checkbox" name="n_skills" value="js">
      JSP<input type="checkbox" name="n_skills" value="jsp"><br>
      내용<br>
      <textarea name="n_content" cols="30" rows="10"></textarea><br>
      <input type="submit" value="등록">
      <input type="reset" value="다시쓰기">
    </form>
</body>
</html>

write_action.html

stringify:オブジェクトを文字列(Serialize)

に変換

に入力された値をリクエストロードとしてv gul{}配列に格納します.(json形式)そしてこれをv gulArray[]配列に置く.

と[]の差は遠いですか?{}json形式^0^
[{}, {}, {}]

<!DOCTYPE html>
<meta charset="UTF-8">
<script src="./js/jsp.js"></script>
<script>
    var v_tblName = "Godong";
    var v_title = request.getParameter("n_title");
    var v_writer = request.getParameter("n_writer");
    var v_skills =
    
    
    request.getParameterValues("n_skills");
    var v_content = request.getParameter("n_content").replaceAll("+"," ");

    //localStorage에 저장하기, 문자열밖에 저장 안됨
    //여러글 저장하기

    var v_gulArray = [] // 글묶음을 담을 배열
    var v_gid=1;
    if(localStorage.getItem(v_tblName)){
        v_gulArray = JSON.parse(localStorage.getItem(v_tblName));
        v_gid = v_gulArray[v_gulArray.length-1].gid + 1;
    };

   
    var v_gul = {};     // 관련내용을 묶어줄 빈 배열생성
    v_gul.gid = v_gid;
    v_gul.title = v_title;
    v_gul.writer = v_writer;
    v_gul.skills = v_skills;
    v_gul.content = v_content;
    v_gulArray.push(v_gul); // 배열에 담기
    

    localStorage.setItem(v_tblName,JSON.stringify(v_gulArray)); // 결과 확인
    alert("글이 잘 저장되었음");

    location.href="list.html";      //? 캐쉬된 페이지를 보여줄수 있음
    // location.replace("list.html");  //? 안 캐쉬된 페이지를 보여줌

    //stringify => 객체를 문자열로 바꿔주는 것(serialize)

    

</script>

json

 var v_str = '{"name":"조고동"}'; 
 // ',' "에 주의 JSON의 문제(바깥에 ', 안쪽에 "사용)
 var v_obj = JSON.parse(v_str); // 성공?
 alert(v_obj.name);

jsp.js

out.义齿getparameter関数を書く場合は、それを作成します.

       /* 
    위로 갈수록 최신
    디코딩              인코딩
    decodeURIComponent  decodeURIComponent
    decodeURI           decodeURI
    unescape            escape
    */

   //name값을 주면 value값을 return해주는 기능을 일반화할 필요가 생김
   //빈 객체(json)을 이용해서 name space를 표현
   var request = {};
   request.getParameter = function(p_name){
       var v_locStr = location.href;
       // 문자열에서 특정 문자 찾기 indexOf (못찾으면-1)
       if(v_locStr.indexOf("?") == -1){
           return null;
       }
       var v_queryString = v_locStr.split("?")[1];
       var v_nameValues = v_queryString.split("&");
       for(var i = 0; i < v_nameValues.length; i++){
           var v_name = v_nameValues[i].split("=")[0];
           var v_value = v_nameValues[i].split("=")[1];
           if(v_name == p_name){
               return decodeURIComponent(v_value).replaceAll("+", " ");
           }
       }
       return null; //요런건 잘 상의해서 팀원들이 알 수 있게 정의
    }
   
   request.getParameterValues = function(p_name){
       var v_locStr = location.href;
       if(v_locStr.indexOf("?") == -1){
           return null;
       }
       var v_queryString = v_locStr.split("?")[1];
       var v_nameValues = v_queryString.split("&");
       var v_values = [];
       if(v_nameValues.length > 0){
           for(var i = 0; i < v_nameValues.length; i++){
               var v_name = v_nameValues[i].split("=")[0];
               var v_value = v_nameValues[i].split("=")[1];
               //한글이 안깨지게 decode 해주시궜어요?
                //이름이 같은걸 찾아서 배열에 집어넣고,,,,,,,,,,,,?

               if(v_name == p_name){
                   v_values.push(decodeURIComponent(v_value));
                }
            }
        } else { return null; }
       return v_values;
    }
   
    //out.print(p_msg)
    //out.println(p_msg)
    var out = {};
    out.print = function(p_msg){
        document.write(p_msg);
    }
    out.println = function(p_msg){
        document.write(p_msg + "<br>");
    }

JavaScript location。hrefを使用して現在のページをチェックするには、次の手順に従います。

location.href;

JavaScript location。ページをhrefに移動するには、次の手順に従います。

location.href=「移動するページアドレス」

list.html

ローカルストレージからデータを取得し、

var v_datas = JSON.parse(localStorage.getItem(v_tblName));


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/jsp.js"></script>
</head>
<body>
    <script>
        //로컬스토리지에서 데이터 가져와기 뿌리깅
        var v_tblName="Godong";
        out.print("<h1>정말 멋있는 게시판</h1>");
        out.print("<hr>");
        var v_datas = JSON.parse(localStorage.getItem(v_tblName));

        var v_tblStr = "<table border=1>";
        v_tblStr += "<tr><th>순번</th><th>제목</th><th>작자</th><th>능력</th></tr>";    
        for(var i=0; i<v_datas.length; i++){
            v_tblStr += "<tr>";
            v_tblStr += "<td>" + (i+1) + "</td>";    
//            v_tblStr += "<td><a href='read.html?gid="+ v_datas[i].gid + "'>" + v_datas[i].title + "</a></td>";    
            v_tblStr += "<td><a href='#' onclick='f_read(" + v_datas[i].gid + ")' >" + v_datas[i].title + "</a></td>";    
            v_tblStr += "<td>" + v_datas[i].writer + "</td>";
            v_tblStr += "<td>" + v_datas[i].skills + "</td>";     
            v_tblStr += "</tr>";
        }
        v_tblStr += "</table><br><br>";
        v_tblStr += "<input type=button id='id_close' value='눌러' >";
        v_tblStr += "<a href='write.html'>글쓰기로 이동</a>";
        out.print(v_tblStr);

        var v_clsBtn = document.querySelector("#id_close");

        v_clsBtn.onclick = function(){
            if(newWin){
                newWin.close(); // 새창 닫기
            }
        }
        var newWin=null;
        function f_read(p_arg){
            //이건 기억해야함 - 잔상가지고는 부족
            event.preventDefault(); // 장착된(built-in) 이벤트기능 막기
            newWin = window.open("read.html?gid="+p_arg,"any","width=200,height=300,left=-100,top=-100");
        }
    </script>
</body>
</html>

read.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>읽깅</title>
<script src="./js/jsp.js"></script>
</head>
<body>
      제목  <input type="text" name="n_title" value="" readonly><br>
      글쓴이 <input type="text" name="n_writer" value=""><br>
      글쓴이 능력<br>
      HTML<input type="checkbox" name="n_skills" value="html"> 
      CSS<input type="checkbox" name="n_skills" value="css"> 
      JS<input type="checkbox" name="n_skills" value="js">
      JSP<input type="checkbox" name="n_skills" value="jsp"><br>
      내용<br>
      <textarea name="n_content" cols="30" rows="10"></textarea><br>
      <input type="hidden" id="id_gid" value="">
      <br><br>
      <a href="list.html">리스틍으로 가깅</a>
<script>
    var v_tblName="Godong";
    var v_ckboxs = document.getElementsByName("n_skills");//체크박스배열

    window.addEventListener("DOMContentLoaded",function(){
        var v_gid = request.getParameter("gid");
        var v_datas = JSON.parse(localStorage.getItem(v_tblName));
        for(var i=0; i<v_datas.length; i++){
            if(v_datas[i].gid == v_gid){ // 찾았다면
                document.getElementsByName("n_title")[0].value = v_datas[i].title; 
                document.getElementsByName("n_writer")[0].value = v_datas[i].writer; 
                document.getElementsByName("n_content")[0].value = v_datas[i].content;
                document.querySelector("#id_gid").value = v_gid;
                
                var v_skills = v_datas[i].skills; // 글쓴이 스킬 배열
                for(var k=0; k<v_skills.length; k++){
                    for(var j=0; j < v_ckboxs.length; j++){
                        if(v_ckboxs[j].value == v_skills[k]){
                            v_ckboxs[j].checked = true;
                        }
                    }
                }

            }
        }
    });
</script>     
</body>
</html>

Reference

この問題について([JS]ルームリスト), 我々は、より多くの情報をここで見つけました https://velog.io/@vgo_dongv/JS-방명록

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

TensorFlowエラーの解決策(継続的な更新)

リンクリストの次の大きい要素