JavaScript Forms & JS HTML DOM

Form validation

document.forms["myForm"]["fname"].value;

자바 스크립트는 입력의 유효성을 검사한다.

 

<input type="text" name="fname" required>

입력란이 공백이면 에러 메세지가 뜬다.

 

<input id="id1" type="number" min="100" max="300" required>

최소 100과 최대 300 사이의 숫자가 아니면 경고창이 뜬다.

 

DOM

In the DOM, all HTML elements are defined as objects.

A property is a value that you can get or set.

A method is an action you can do

 

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
document.getElementById("demo").innerHTML = 
'The first paragraph (index 0) inside "main" is: ' + y[0].innerHTML;

 

var x = document.getElementsByClassName("intro");

 

.style.color

elem.style.top

onclick = "this.innerHTML = 'Ooops!' "

 

onclick = "changeText(this)"

function changeText(id) {
  id.innerHTML = "Ooops!";
}

 

onclick = "displayDate()"

function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}

 

마우스를 올렸을 때, 내렸을 때의 변화

function mOver(obj) {
  obj.innerHTML = "Thank You"
}
function mOut(obj) {
  obj.innerHTML = "Mouse Over Me"
}

<div onmouseover="mOver(this)" onmouseout="mOut(this)" 
style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
Mouse Over Me</div>

 

 

document.getElementById("myBtn").addEventListener("click", function() {
  alert("Hello World!");
});

함수로 따로 뺄 수 있다.

document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
  alert ("Hello World!");
}

 

 

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;

document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;

document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;

다른 형식으로 쓸 수 있음.

 

 

var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);

var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para,child);

 

var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);