CRUD 작업을 사용하는 간단한 JavaScript 프로젝트.

15103 단어 computersciencewebdevjavascriptprogramming
이 튜토리얼에서는 일반 JavaScript로 CRUD(Create, Read, Update, and Delete) 프로젝트를 만드는 방법을 배웁니다. JavaScript 프레임워크를 사용하지 않고 일반 JavaScript, CSS 및 HTML을 사용하여 My Todo List CRUD 프로젝트를 빌드합니다.

HTML, CSS, JavaScript를 사용하여 CRUD 프로젝트를 단계별로(My Todo List App) 개발해 봅시다.

이것은 우리가 구축할 것live demo입니다.

1.HTML 페이지 만들기



위의 gif 사진을 참고하여 HTML 페이지index.html를 만들고 웹페이지의 구조를 만들어 봅시다.

<!DOCTYPE html>
<html>
<head>
<title>My Todo List</title>
</head>
<body>
   <section class="mytodo-container">
   <!-- Create Form -->
   <div class="mytodo-list">
   <form action="javascript:void(0);" id="CreateForm"><input type="text" id="add-task" placeholder="New Task"> <input type="submit" onclick="CreateTask()" value="Create"></form>
   <!-- Update Form -->
    <form action="javascript:void(0);" id="UpdateForm"> 
    <input type="text" id="update-task"> <input type="submit" value="Update"> <a onclick="CloseInput()" id="close">&#10006;</a></form>
   <!-- Counter -->
   <p id="counter"></p>
   <!-- MyTodo List Table -->
    <table>
    <tr><th>My Todo List</th></tr>
    <tbody id="mytodo-tasks"></tbody>
    </table>
    </div>
    </section>
</body>
</html>


메모:
MyTodo 목록에 새 작업을 추가하기 위해 id="CreateForm"을 사용하여 양식을 만들었습니다. 또한 MyTodo 목록의 작업을 편집하기 위해 id="UpdateForm"을 사용하여 다른 양식을 만들었습니다.

목록의 총 작업 수를 표시하기 위해 id="counter"인 단락 태그가 있습니다. 우리는 자바 스크립트의 도움으로 총 수를 표시합니다.

다시 My Todo List라는 표제가 있는 테이블이 있습니다. 나중에 javascript를 사용하여 tbody html 태그 내부에 행을 삽입합니다.

2. HTML 스타일 태그를 사용하여 HTML 페이지에 CSS를 추가합니다.




<style>
input[type='submit'],button,#close
{
 cursor: pointer;
}
.mytodo-list
{
  width:320px;
  margin:100px auto;
}
.counter
{
  margin: 10px 0;
}
#UpdateForm
{   
  display:none;
}
</style>


메모:
CSS를 사용하여 div 요소를 중앙에 정렬했습니다. 또한 양식(id="UpdateForm")을 display:none으로 만들었습니다. 따라서 MyToDo 목록에서 업데이트 버튼을 클릭하면 form(id="UpdateForm")이 표시되는 방식으로 기능을 추가할 수 있습니다. 이 기능은 자바스크립트의 도움으로 추가될 것입니다.

3.HTML 스크립트 태그를 사용하여 HTML 페이지에 JavaScript를 추가합니다.




<script>

var mytodo_list=["Do Exercise","Take Bath","Have Breakfast"];
/*CREATE*/
function CreateTask()
{  
     var task=document.getElementById("add-task").value;
     mytodo_list.push(task);
     ReadAllTask();
}
/*READ*/
function ReadAllTask()
{
    var data='';
for(var i=0;i<mytodo_list.length;i++)
{
    data+='<tr>';
    data+='<td>' + mytodo_list[i] + '</td>';
    data+='<td><button onclick=UpdateTask(' +i+ ')>Update</button></td>';
    data+='<td><button onclick=DeleteTask('+i+')>Delete</button></td>';
    data+='</tr>';
}
/*counter*/
document.getElementById("counter").innerHTML=mytodo_list.length +" Task";
document.getElementById("mytodo-tasks").innerHTML=data;
}
ReadAllTask();
/*UPDATE*/
function UpdateTask(item)
{
document.getElementById("UpdateForm").style.display='block';
document.getElementById("update-task").value=mytodo_list[item];
document.getElementById("UpdateForm").onsubmit=function()
{
    var task=document.getElementById("update-task").value;
    mytodo_list.splice(item,1,task.trim());

    ReadAllTask();
    CloseInput();
}

}
/*DELETE*/
function DeleteTask(item)
{   
    mytodo_list.splice(item,1);
    ReadAllTask();
}

function CloseInput()
{
    document.getElementById("UpdateForm").style.display='none';
}

</script>


메모:
여기에서 mytodo_list를 작업으로 구성된 배열이 있는 전역 변수로 정의합니다.

이제 이 응용 프로그램에서 사용되는 CRUD(CREATE READ UPDATE DELETE) 작업에 대해 설명하겠습니다.

만들다



생성은 배열에 새 항목을 추가하는 것과 같습니다.

CreateTask 함수는 mytodo_list 배열에 새 작업을 추가합니다.

읽다



읽기는 배열의 전체 내용을 읽는 것과 같습니다.

ReadAllTask ​​함수는 for 루프의 도움으로 배열의 모든 작업을 읽고 테이블을 행으로 채워 html 테이블에 표시합니다. 이 기능은 또한 배열의 길이를 계산하여 카운터를 표시하는 데 도움이 됩니다.

업데이트



업데이트는 배열의 기존 내용을 새 값으로 업데이트하는 것과 같습니다.

UpdateTask 함수는 splice 방법으로 배열의 기존 작업을 업데이트하는 데 사용됩니다. 양식(id="UpdateForm")을 표시하는 업데이트 버튼을 클릭하고 내용을 편집하여 작업을 업데이트할 수 있습니다. form(id="UpdateForm")은 javascript를 사용하여 form(id="UpdateForm")의 style 속성을 "block"으로 변경하여 표시합니다.

삭제



삭제는 배열의 기존 내용을 삭제하는 것과 같습니다.

DeleteTask 함수는 splice 방법의 도움으로 배열에서 기존 작업을 삭제하는 데 사용됩니다.

모든 CRUD 작업 외에도 업데이트 후 또는 닫기 버튼을 클릭할 때 양식(id="UpdateForm")을 숨기는 데 도움이 되는 CloseInput 기능이 추가되었습니다.

마무리!!



이 기사를 즐겼기를 바랍니다. 읽어 주셔서 감사합니다. 네트워크와 공유하십시오. 아래에 의견을 남기는 것을 잊지 마십시오.
애플 스 크 립 트 습격: Chrome 창 열기, DevTool 위치 조정, Sublime 프로젝트 불 러 오기, ITerm 명령 실행 등...
Django generic view

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage