[Javascript]
정적인 HTML에서 동적 변경하는 부분 담당
객체 기반 스크립트 언어. node.js 프레임워크 사용하면 서버 프로그래밍도 可
특징: HTML 내용 속성 변경 可, 이벤트 처리 후 사용자와 상호작용 可, 서버와 실시간 통신 기능 可,
현황: Vue(뷰), 앵귤러(Angular), 리액트(React)와 같은 프론트앤드 프레임워크, Node.js기반 서버프로그래밍 영역도 可
모든 HTML 오류는 오타 때문이다! 오타 찾기가 중요함!
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>회원가입 </title>
<head>
<style> /* css 정의 */
h2 {
border-radius: 5px;
background-color: wheat;
text-align: center;
padding: 15px 0;
}
#regform {
padding: 15px 20px;
border-radius: 19px;
margin: auto;
width: 50%;
background-color: SandyBrown;
}
</style>
<script> // 자바 스크립트 정의
function signUp() {
alert("정말로 가입하시겠습니까?");
document.getElementById("regform").style.display = "none";
document.getElementById("rname").innerHTML = document.form1.name.value;
document.getElementById("remail").innerHTML = document.form1.email.value;
document.getElementById("result").setAttribute("style","display: block; background-color:KhaKi;");
}
</script>
</head>
<body> <!-- HTML 정의 -->
<h2> 회원 가입 </h2>
<hr>
<div id="regform">
<form name="form1">
<label>이름</label><br>
<input type="text" name ="name" size = "40"><br>
<hr>
<label>이메일</label><br>
<input type="email" name ="email" size = "40"><br>
<button type="button" onClick="signUp()">가입</button>
</form>
</div>
<div id="result" class = "result">
<h3> 가입정보 </h3>
<hr>
이름: <span id="rname"></span><br>
이메일: <span id="remail"></span><br>
</div>
<script> // 자바스크립트 정의
document.getElementById("result").style.display = "none";
</sciprt>
</body>
</html>
이클립스에서 실행할 때는 다음과 같이 웹 브라우저로 연다. (html파일이므로 서버 연결 필요없다!)
이를 시행하면 다음과 같다.
회원 가입
가입정보
이름:
이메일:
그리고
to do list 입력해서 하는 것
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>스크립트 사용</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script>
function addItem() {
// 입력값 읽어서 todo에 저장
let todo = document.getElementById("Item");
// <ul> 요소 참조하여 list에 저장
let list = document.getElementById("todolist");
// 새 <li> 생성하여 listitem에 저장
let listitem = document.createElement("li");
listitem.className = "d-flex list-group-item list-group-item-action list-group-item-warning";
// 각 요소에 닫기 버튼 생성
let xbtn = document.createElement("button");
xbtn.className = "btn-close ms-auto"; // 부트스트랩 클래스 적용
xbtn.onclick = function(e) { // close 버튼 이벤트 즉시 실행함수
let pnode = e.target.parentNode;
list.removeChild(pnode);
}
listitem.innerText = todo.value;
listitem.appendChild(xbtn); // li 버튼 추가
list.appendChild(listitem); // ul요소에 li요소 추가
//입력 칸 비우기. 포커스 이동
todo.value = "";
todo.focus();
}
</script>
</head>
<body> <!-- 이번엔 모든 요소를 자바스크립트로 처리하여 코드 간소화를 할 것이므로 form 사용하지않는다. -->
<div class ="container bg-warning shadow mx-auto mt-5 p-5 w-75">
<h2>My Todo App</h2>
<hr>
<div class = "input-group">
<input id = "Item" class = "form-control" type="text" placeholder= "할 일을 입력하세요">
<button type="button" class="btn btn-primary" onclick="addItem()">할 일 추가</button>
</div>
<hr>
<ul id="todolist" class="list-group"></ul>
</div>
</body>
</html>실행이 제대로 안되면 오타가 있다는 뜻이다. 오타는 chatGPT에 물어봐서 빨리 찾아내자.
이를 구현하면 아래와 같이 실행된다.
My Todo App
728x90
반응형
'Programming > Java' 카테고리의 다른 글
| useBean을 이용한 JSP 계산기 파일 단순화 (0) | 2023.10.19 |
|---|---|
| Servlet (0) | 2023.10.19 |
| [Java web] Hello JSP (2) | 2023.10.17 |
| Interface (인터페이스) (0) | 2023.10.17 |
| Inheritance(상속) (1) | 2023.10.16 |
