id HTML DOCTYPE html head script function process

  • Slides: 42
Download presentation

id로 HTML 요소 찾기 <!DOCTYPE > <html> <head> <script> function process() { var obj

id로 HTML 요소 찾기 <!DOCTYPE > <html> <head> <script> function process() { var obj = document. get. Element. By. Id("target"); alert(obj. value); } </script> </head> <body> <form name="myform"> <input type="text" id="target" name="text 1"> <input type="submit" value="제출" onclick="process()"> </form> </body> </html>

입력 양식 찾기 <!DOCTYPE > <html> <head> <script> function process() { var obj =

입력 양식 찾기 <!DOCTYPE > <html> <head> <script> function process() { var obj = document. myform. text 1; alert(obj. value); } </script> </head> <body> <form name="myform"> <input type="text" id="target" name="text 1"> <input type="submit" value="제출" onclick="process()"> </form> </body> </html>

태그 이름으로 HTML 요소 찾기 <!DOCTYPE > <html> <body> <ul> <li>List item 1</li> <li>List

태그 이름으로 HTML 요소 찾기 <!DOCTYPE > <html> <body> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> <li>List item 5</li> </ul> <script> var list = document. get. Elements. By. Tag. Name('ul')[0]; var all. Items = list. get. Elements. By. Tag. Name('li'); for (var i = 0, length = all. Items. length; i < length; i++) { alert(all. Items[i]. first. Child. data); } </script> </body> </html>

HTML 요소의 내용 변경 <!DOCTYPE html> <head> <title></title> <script> function get() { var val

HTML 요소의 내용 변경 <!DOCTYPE html> <head> <title></title> <script> function get() { var val = document. get. Element. By. Id("ex"). inner. HTML; alert(val); } function set(v) { document. get. Element. By. Id("ex"). inner. HTML = v; } </script> </head> <body> <div id="ex">여기가 div로 선언되었습니다. </div> <a href="#" onclick="get()">div 요소 내용 출력하기</a> <a href="#" onclick="set('변경되었습니다. ')">div 요소 내용 변경하기</a> </body> </html>

요소의 속성 변경하기 <!DOCTYPE html> <body> <img id="image" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="pome. png" width="120" height="100"> <script> function

요소의 속성 변경하기 <!DOCTYPE html> <body> <img id="image" src="pome. png" width="120" height="100"> <script> function change. Image() { document. get. Element. By. Id("image"). src = "poodle. png"; } </script> <input type="button" onclick="change. Image()" value="눌러보세요" /> </body> </html>

요소의 스타일 변경하기 <!DOCTYPE html> <body> <p id="p 1">This is a paragraph. </p> <script>

요소의 스타일 변경하기 <!DOCTYPE html> <body> <p id="p 1">This is a paragraph. </p> <script> function change. Style() { document. get. Element. By. Id("p 1"). style. color = "red"; document. get. Element. By. Id("p 1"). style. font. Family = "Century Schoolbook"; document. get. Element. By. Id("p 1"). style. font. Style = "italic"; } </script> <input type="button" onclick="change. Style()" value="눌러보세요" /> </body> </html>

새로운 HTML 요소 생성 <script> function addtext(t) { if (document. create. Text. Node) {

새로운 HTML 요소 생성 <script> function addtext(t) { if (document. create. Text. Node) { } var node = document. create. Text. Node(t); document. get. Element. By. Id("target"). append. Child(node); } </script> <div id="target" onclick="addtext('동적으로 텍스트가 추가됩니다. ')" style="font: 20 px bold; ">여기를 클릭하세요. </div>

HTML 요소 삭제 <!DOCTYPE html> <head> <script> function remove. Node() { var parent =

HTML 요소 삭제 <!DOCTYPE html> <head> <script> function remove. Node() { var parent = document. get. Element. By. Id("target"); var child = document. get. Element. By. Id("p 1"); parent. remove. Child(child); } </script> </head> <body> <div id="target"> <p id="p 1">첫번째 단락</p> <p id="p 2">두번째 단락</p> </div> <button onclick="remove. Node()">누르세요!</button> </body> </html>

새로운 윈도우 오픈 예제 <!DOCTYPE html> <head></head> <body> <form> <input type="button" value="구글창 열기" onclick="window.

새로운 윈도우 오픈 예제 <!DOCTYPE html> <head></head> <body> <form> <input type="button" value="구글창 열기" onclick="window. open('http: //www. google. com', '_blank', 'width=300, height=300', true)"> </form> </body> </html>

set. Timeout()

set. Timeout()

예제 <!DOCTYPE html> <head> <script> function show. Alert() { set. Timeout(function () { alert("set.

예제 <!DOCTYPE html> <head> <script> function show. Alert() { set. Timeout(function () { alert("set. Timeout()을 사용하여 표시됩니다. ") }, 3000); } </script> </head> <body> <p>버튼을 누르면 3초 후에 경고 박스가 화면에 표시됩니다. </p> <button onclick="show. Alert()">눌러보세요</button> </body> </html>

set. Interval()

set. Interval()

예제 <!DOCTYPE html> <head> <script> var id; function change. Color() { id = set.

예제 <!DOCTYPE html> <head> <script> var id; function change. Color() { id = set. Interval(flash. Text, 500); } function flash. Text() { var elem = document. get. Element. By. Id("target"); elem. style. color = (elem. style. color == "red") ? "blue" : "red"; elem. style. background. Color = (elem. style. background. Color == "green") ? "yellow" : "green"; } function stop. Text. Color() { clear. Interval(id); } </script> </head>

예제 <body onload="change. Color(); "> <div id="target"> <p>This is a Text. </p> </div> <button

예제 <body onload="change. Color(); "> <div id="target"> <p>This is a Text. </p> </div> <button onclick="stop. Text. Color(); ">중지</button> </body> </html>

screen 객체

screen 객체

예제 <script> function maxopen(url, winattributes) { var maxwindow = window. open(url, "", winattributes) maxwindow.

예제 <script> function maxopen(url, winattributes) { var maxwindow = window. open(url, "", winattributes) maxwindow. move. To(0, 0); maxwindow. resize. To(screen. avail. Width, screen. avail. Height) } </script> <a href="#" on. Click="maxopen('http: //www. google. com', 'resize=1, scrollbars=1, status=1'); return false">전체 화면 보기</a>

location 객체

location 객체

예제 <script> function replace() { location. replace("http: //www. google. com") } </script> <a href="#"

예제 <script> function replace() { location. replace("http: //www. google. com") } </script> <a href="#" on. Click="replace()">이동하기</a>

navigator 객체

navigator 객체

예제 <script> for (var key in navigator) { value = navigator[key]; document. write(key +

예제 <script> for (var key in navigator) { value = navigator[key]; document. write(key + ": " + value + " "); } </script>

onclick 이벤트 <!DOCTYPE html> <head> <script> function change. Color(c) { document. get. Element. By.

onclick 이벤트 <!DOCTYPE html> <head> <script> function change. Color(c) { document. get. Element. By. Id("target"). style. background. Color = c; } </script> </head> <body id="target"> <form method="POST"> <input type="radio" name="C 1" value="v 1" onclick="change. Color('lightblue')">파랑색 <input type="radio" name="C 1" value="v 2" onclick="change. Color('lightgreen')">녹색 </form> </body> </html>

onload와 onunload 이벤트 <html> <head> <script> function on. Load. Doc() { alert("문서가 로드되었습니다. ");

onload와 onunload 이벤트 <html> <head> <script> function on. Load. Doc() { alert("문서가 로드되었습니다. "); document. body. style. background. Color = "red"; } </script> </head> <body onload="on. Load. Doc(); "> </body> </html>

onchange 이벤트 <!DOCTYPE html> <head> <script> function sub() { var x = document. get.

onchange 이벤트 <!DOCTYPE html> <head> <script> function sub() { var x = document. get. Element. By. Id("name"); x. value = x. value. to. Lower. Case(); } </script> </head> <body> 영어단어: <input type="text" id="name" onchange="sub()"> <p>입력필드를 벗어나면 소문자로 변경됩니다. </p> </body> </html>

onmouseover 이벤트 <html> <head> <script> function On. Mouse. In(elem) { elem. style. border =

onmouseover 이벤트 <html> <head> <script> function On. Mouse. In(elem) { elem. style. border = "2 px solid red"; } function On. Mouse. Out(elem) { elem. style. border = ""; } </script> </head> <body> <div style="background-color: yellow; width: 200 px" onmouseover="On. Mouse. In (this)" onmouseout="On. Mouse. Out (this)"> 마우스를 이 요소 위에 이동하세요. </div> </body> </html>

onmousedown 이벤트 <html> <head> <script> function On. Button. Down(button) { button. style. color =

onmousedown 이벤트 <html> <head> <script> function On. Button. Down(button) { button. style. color = "#ff 0000"; } function On. Button. Up(button) { button. style. color = "#000000"; } </script> </head> <body> <button onmousedown="On. Button. Down (this)" onmouseup="On. Button. Up (this)">눌 러보세요!</button> </body>

계산기 예제 <html> <head> <script> var expression=""; function add(character) { expression = expression +

계산기 예제 <html> <head> <script> var expression=""; function add(character) { expression = expression + character; document. get. Element. By. Id("display"). value = expression; } function compute() { document. get. Element. By. Id("display"). value = eval(expression); } function clear. Display() { expression = ""; document. get. Element. By. Id("display"). value = "0"; } </script>

계산기 예제 <body> <form> display <input id="display" value="0" size="30"> <input type="button" value=" 7 "

계산기 예제 <body> <form> display <input id="display" value="0" size="30"> <input type="button" value=" 7 " onclick="add('7')"> <input type="button" value=" 8 " onclick="add('8')"> <input type="button" value=" 9 " onclick="add('9')"> <input type="button" value=" / " onclick="add('/')"> <input type="button" value=" 4 " onclick="add('4')"> <input type="button" value=" 5 " onclick="add('5')"> <input type="button" value=" 6 " onclick="add('6')"> <input type="button" value=" * " onclick="add('*')"> <input type="button" value=" 1 " onclick="add('1')"> <input type="button" value=" 2 " onclick="add('2')"> <input type="button" value=" 3 " onclick="add('3')"> <input type="button" value=" - " onclick="add('-')"> <input type="button" value=" 0 " onclick="add('0')"> <input type="button" value=" + " onclick="add('+')"> <input type="button" value=" Clear " onclick="clear. Display()"> <input type="button" value=" Enter " name="enter" onclick="compute()"> </form> </body> </html>

폼의 유효성 검증 · 입력 필드에서의 잘못을 검증하는 작업 <h 3>회원가입</h 3> <form> 이름:

폼의 유효성 검증 · 입력 필드에서의 잘못을 검증하는 작업 <h 3>회원가입</h 3> <form> 이름: <input type='text' id='name' /> 주소: <input type='text' id='addr' /> 생일: <input type='date' id='birthday' /> 아이디(6 -8 문자): <input type='text' id='username' /> 이메일: <input type='email' id='email' /> 휴대폰: <input type='tel' id='phone' /> <input type='submit' value='확인' /> </form>

공백 검증 <script> function check. Not. Empty(field) { if (field. value. length == 0)

공백 검증 <script> function check. Not. Empty(field) { if (field. value. length == 0) { alert("필드가 비어있네요!"); field. focus(); return false; } return true; } </script> <form> 이름: <input type='text' id='user' /> <input type='button' onclick="check. Not. Empty(document. get. Element. By. Id('user'))" value='확인' /> </form>

데이터 길이 검증 <script> function check. Length(elem, min, max) { var s = elem.

데이터 길이 검증 <script> function check. Length(elem, min, max) { var s = elem. value; if (s. length >= min && s. length <= max) { return true; } else { alert(min + " 문자와 " + max + " 문자 사이로 입력해주세요!"); elem. focus(); return false; } } </script> <form> 이름(6 -8 문자): <input type='text' id='name' /> <input type='button' onclick="check. Length(document. get. Element. By. Id('name'), 6, 8)" value='확인' /> </form>

숫자 검증 예제 <script> function check. Numeric(elem, msg) { var exp = /^[0 -9]+$/;

숫자 검증 예제 <script> function check. Numeric(elem, msg) { var exp = /^[0 -9]+$/; if (elem. value. match(exp)) { return true; } else { alert(msg); elem. focus(); return false; } } </script> <form> 전화번호(-없이 입력): <input type='text' id='phone'/> <input type='button' onclick="check. Numeric(document. get. Element. By. Id('phone'), '숫자만 입력하세 요!')" value='확인' /> </form>

Q&A

Q&A