HB의 개발 블로그

[Web] 09.JavaScript (Forms~Nodes) 본문

Web

[Web] 09.JavaScript (Forms~Nodes)

빈형임 2020. 7. 29. 00:04

JavaScript Forms

JavaScript Form Validation, 유효성 검사

 

JavaScript를 통해서 HTML에서 입력 양식에 대한 유효성 검사를 진행할 수 있다.

지정된 양식 조건에 맞게 수행되는지 확인 후 true, false로 구분하게 된다.

 

Example:

<script>
function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}
</script>

<body>
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>

Required 속성을 이용, 자동으로 유효성 검사를 진행한다.

*양식이 비어있다면, 제출 불가.

 

 

JavaScript DOM

DOM: Document Object Model, 문서에 엑세스하기 위한 표준 정의.

HTML의 elements들에 대한 변경, 추가, 삭제등 에 대한 표준을 제시.

 

Example: 

<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

</body>
</html>

/*
Result --> Hello World
*/

 

Finding HTML Elements

  • document.getElementById(id) --> id를 통해서 요소에 접근한다.
  • document.getElementByTagName(name) --> 태그이름를 통해서 요소에 접근한다.
  • document.getElementByClassName(id) --> 클래스 이름을 통해서 요소에 접근한다.

 

Changing HTML Elements

  • element.innerHTML = new html content
  • element.attribute = new value
  • element.style.property = new style

Adding and Deleting Elements

  • document.createElement(element)
  • document.removeChild(element)
  • document.appendChild(element)

Using Event

<!DOCTYPE html>
<html>
<body>

<h1 onclick="changeText(this)">Click on this text!</h1>

<script>
function changeText(id) {
  id.innerHTML = "Ooops!";
}
</script>

</body>
</html>

onclick : 클릭에 대한 이벤트 발생

onload, onunload : 사용자가 입력하거나 페이지를 떠날 때의 이벤트

onmouseover, onmouseout : 마우스 커서의 움직임에 따른 이벤트

 

addEventLisnter()

이벤트 핸들러에 지정된 요소를 첨부

<button id="myBtn">Try it</button>

<script>
document.getElementById("myBtn").addEventListener("click", myFunction);

function myFunction() {
  alert ("Hello World!");
}
</script>

 

 

JavaScript  HTML DOM Elements (Nodes)

HTML 문서의 모든 것은 노드로 이루어져 있다.

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

<script>
var para = document.createElement("p");					//새로운 요소 생성
var node = document.createTextNode("This is new.");			//요소 <p>를 텍스트 노드로 세팅
para.appendChild(node);							//<p>추가

var element = document.getElementById("div1");				//새 요소들을 기존 요소에 추가
element.appendChild(para);
</script>

 

'Web' 카테고리의 다른 글

[Web] 11. JSP 개발환경설정  (0) 2020.08.07
[Web] 10. jQuery  (0) 2020.07.30
[Web] 08.JavaScript (Functions~JSON)  (0) 2020.07.28
[Web] 07. Javascript (Introduction~ Data Types)  (0) 2020.07.28
[Web] 06. HTML CSS  (0) 2020.07.26
'Web' Related Articles more