<p>hello</p>
<p>world</p>
<p>I can do it</p>
<p>Never change my mind</p>
<button type="button" onclick="listfunc()">nodelist</button>
<script type="text/javascript">
function listfunc() {
let nodelist = document.getElementsByTagName('p');
nodelist[3].innerHTML = "나는 문제없어"; // 3번지 수정
for (var i = 0; i < nodelist.length; i++) {
nodelist[i].style.backgroundColor = '#ff0000';
}
}
</script>
document.getElementById('cars').childNodes : id=cars인 요소의 번호를 배열로 넘겨받게 된다.
cars의 요소번호
<select>
<option>
</option>
<option>
</option>
<option>
</option>
0번지
1번지
2번지
3번지
4번지
5번지
6번지
alert(carName[1].text) : carName의 1번지의 value값을 경고창에 출력하게 된다.
appendChild : 자식 요소의 맨 뒤에 데이터를 추가한다.
appendChild 사용예시
<div id="div1">
<p id="p1">첫번째 p태그</p>
<p id="p2">두번째 p태그</p>
</div>
<script type="text/javascript">
function appendfunc() {
let ptag = document.createElement('p'); // 새로운 <p></p> 추가
let textNode = document.createTextNode("새로운 p 태그");
ptag.id = "newid"; // p tag에 id추가
ptag.className = "newclass" // p tag에 class추가
ptag.appendChild(textNode) // <p id="newid" class="newclass">새로운 p 태그</p> 완성!
let element = document.getElementById('div1'); // object가져옴
element.appendChild(ptag); // div태그에 추가된다. p태그말고 테이블 같은걸 많이 추가한다.
}
설명 (태그명,요소명 == 변수명)
createElement(태그) : 새로운 tag를 추가한다.
createTextNode(내용) : tag에 넣을 내용을 추가한다.
태그명.appendChild(내용명) : 새로운 tag 완성!
요소명.appendChild(태그명) : 요소 안에 새로운 tag를 추가한다.
insertChild : 자식 요소의 추가할 위치를 선택하여 데이터를 추가한다.
insertChild 사용예시
function insertfunc() {
let h2tag = document.createElement('h2'); // 모든태그를 추가할 수 있다
let textNode = document.createTextNode("h2 태그를 추가");
// id와 class 모두 추가할 수 있다.
h2tag.appendChild(textNode); // <h2>h2 태그를 추가</h2> 완성!
let element = document.getElementById('div1');
// 앞에 붙일 땐 어디 앞에 지정을 해주어야 한다. 추가될 위치를 지정할 수 있다.
let elementBefore = document.getElementById('p2');
element.insertBefore(h2tag, elementBefore) // p1앞에 추가해라
}
설명 (태그명,요소명 == 변수명)
요소명.insertBefore(추가할 태그명, 추가할 위치 태그명) : 추가할 위치 태그명 앞에 추가가 된다.
removeChild : 자식 요소를 삭제한다.
function deletefunc() {
let element = document.getElementById('div1');
let removeElement = document.getElementById('p2');
// id=div1태그 안의 id=p2를 삭제해라
element.removeChild(removeElement);
}
나이 : <input type="text" onblur="inRegNum()" size="10" maxlength="2">세<br><br>
<script type="text/javascript">
function inRegNum() {
alert('onblur 실행됨'); // 포커스가 딴 곳으로 가면 실행됨.
}
설명
포커스 영역은 text영역이고 text영역을 벗어날 때 이벤트가 발생합니다.
onchage : 포커스가 바뀌었을 때 실행된다.
예제
<select id="sel" onchange="chageVal()">
<option value="apple">사과</option>
<option value="pear">배</option>
<option value="banana">바나나</option>
</select>
<script type="text/javascript">
function chageVal() {
let val = document.getElementById("sel").value;
alert(val); // 선택한 value값이 출력된다.
}
</script>
<% // 스크립트 립 : 자바의 영역, DB와 연동가능
String name = request.getParameter("name");
int age = Integer.parseInt(request.getParameter("age"));
out.println("이름 : " + name + "<br>");
out.println("나이 : " + age + "<br>");
%>
설명
request.getParameter : 파라미터명으로 접근하여 데이터를 넘겨받는다.
파라미터명이 name이라면 '홍길동'을 넘겨받게 된다.
링크 클릭 후 실행화면
form action 예제
<form action="NewFile.jsp">
이름 : <input type="text" name="name">
<br>
나이 : <input type="text" name="age">
<br>
<input type="submit" value="이동">
</form>
설명
form태그는 a태그와 달리 값을 입력받을 수 있다. form 영역에 input 태그를 묶는다.
NewFile.jsp에 name명으로 접근하여 값을 넘겨준다.
Insert title here
이름 :
나이 :
location.href 예제
이름 : <input type="text" id="name">
<br>
나이 : <input type="text" id="age">
<br>
<button type="button" onclick="move()">이동</button>
<script type="text/javascript">
function move() {
let name = document.getElementById("name").value;
let age = document.getElementById("age").value;
// 스페이스바 주의 null값 우려
location.href ="NewFile.jsp?name="+ name +"&age="+ age;
}
</script>
설명
button 클릭 시 move() 함수로 이동하여 text의 입력값을 각 변수에 넣어준다.
a href와 비슷한 방식으로 location.href에 값을 주어 NewFile.jsp에 접근한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="" name="frm">
<div align="left">
<strong>라면 타이머</strong>
<br><br>
<!-- id와 name 같은이름 사용가능 -->
<select id="selid" name="selid">
<option value="180">시간 선택(기본:3분)</option>
<option value="300">5분</option>
<option value="180">3분</option>
<option value="120">2분</option>
<option value="60">1분</option>
<option value="30">30초</option>
</select>
<input type="button" value="Timer Start" onclick="noodle()">
<br><br>
<!-- CSS 묶을 때 많이 사용한다 -->
<span id="countdown">time selected</span>
<br><br>
<button type="button" onclick="window.close()">close</button>
</div>
</form>
<script type="text/javascript">
let index = 0; // 다른 함수에서도 사용하기 위해
let value = 0;
let time = 0;
function noodle() {
clearInterval(time); // timer 초기화
index = document.frm.selid.selectedIndex; // index 번호를 가져온다.
value = parseInt(document.frm.selid.options[index].value);
time = setInterval('noodleTimer()', 1000); // 1초마다 noodleTimer()함수 호출
}
function noodleTimer() {
value = value - 1; // 1씩 빼나가도록 한다.
// 1초마다 실행
document.getElementById('countdown').innerHTML = "완료까지 <b>" + value + "</b>초 남았습니다";
if(value == 0){
clearInterval(time);
let audio = new Audio('AlarmClockBell.wav');
audio.play();
}
}
</script>
</body>
</html>
함수 설명
clearInterval() : 매개변수로 변수명과 함수명을 받으며 사용 시 매개변수가 종료됩니다.(초기화)
setInterval('함수명', 시간 간격) : 일정한 시간간격으로 값을 갱신해 줍니다.
window.close() : 현재 실행창이 닫힙니다.
option value 접근 예시
// id로 직접 접근해서 가져오는 방법
let value = document.getElementById("selid").value;
// name으로 접근해서 가져오는 방법
value = document.frm.selid.value;
// 네임 안에 option들을 가져온다(배열 = index로 되어 있음)
// parseInt 시간이 흘러가도록 숫자로 변경하여야 한다.
value = parseInt(document.frm.selid.options[index].value);
id : 고유한 식별을 목적으로 하는 경우, javascript에서 접근하기, 검사용, html 파일당 한 개만 유효(중복 불가)
class : 재사용을 목적으로 하는 경우, CSS에서 디자인적인 요소, 다중 설정이 가능(중복 허용)
name : form 컨트롤 요소의 값(value)을 서버로 전송하기 위해 필요한 속성, 다중 설정 가능(중복 허용)
※ 동일한 id명은 불가하지만, id=name명이 같은 경우는 허용된다.
id 사용예제 1
<p id="pid">p tag id pid</p>
<p id="pid">p tag id pid</p>
<script type="text/javascript">
document.getElementById("pid").innerHTML = 'p태그 입니다';
</script>
실행화면
p tag id pid
p tag id pid
설명
동일한 id로 두 개의 태그에 사용할 경우 처음 설정된 p태그만 변경된 것을 볼 수 있다.
id는 고유하기 때문에 한 페이지당 1개만 사용 가능! 중복이 불가하다.
id 사용예제 2
<div id="demo" style="background-color: #ffffff">Hello JS CSS</div>
<button type="button" onclick="func()">적용</button>
<script type="text/javascript">
function func() {
// div태그의 통째를 가져온다(인스턴스)
let obj = document.getElementById("demo");
// div태그에 모든 요소에 접근 할 수 있다.
obj.style.color = "white";
obj.style.backgroundColor = "blue";
obj.style.textAlign = 'center';
obj.style.borderStyle = 'double';
obj.style.borderColor = "red";
obj.style.fontFamily = "MS PGothic";
obj.style.fontStyle = 'italic';
obj.style.fontSize = '24pt';
}
</script>
실행화면
Insert title here
Hello JS CSS
설명
div태그에 id값 설정 후 JS 함수 안에서 div태그의 id를 불러오면 div태그의 모든 요소에 접근이 가능하다.
class 사용예제
<p class="cls"> p tag class cls</p>
<p class="cls"> p tag class cls</p>
<h2 class="cls"> h2 tag class cls</h2>
<script type="text/javascript">
document.getElementsByClassName('cls')[0].innerHTML = 'class는 cls입니다';
document.getElementsByClassName('cls')[1].innerHTML = 'class는 cls입니다';
</script>
실행화면
p tag class cls
p tag class cls
h2 tag class cls
설명
class는 index 번호로 접근을 할 수 있다. 모든 index에 접근하고 싶다면 for문을 사용하면 된다. 중복 사용 가능!
name 사용 예제
<p name="name">p tag name name</p>
<h2 name="name">p tag name name</h2>
<script type="text/javascript">
document.getElementsByName('name')[1].innerHTML = "name 입니다";
</script>
실행화면
p tag name name
p tag name name
설명
name는 index 번호로 접근을 할 수 있다. 모든 index에 접근하고 싶다면 for문을 사용하면 된다. 중복 사용 가능!
