PowerPoint 프레젠테이션

Size: px
Start display at page:

Download "PowerPoint 프레젠테이션"

Transcription

1 HTML5 웹프로그래밍입문 10 장. 이벤트처리와동적 웹문서

2 목차 10.1 이벤트처리하기 10.2 동적웹문서만들기 10.3 다양한방법으로폼다루기 2

3 10.1 이벤트처리하기 이벤트처리개요 이벤트의정의와종류 이벤트핸들링및이벤트등록 폼다루기 3

4 이벤트처리개요 이벤트 사용자가웹브라우저를사용하는중에발생시키는키보드, 마우스등의입력 이벤트처리 이벤트가입력되었을때미리구현된자바스크립트코드를수행 1. 이벤트의정의 2. 이벤트핸들러 이벤트가발생할때마다호출되는자바스크립트코드 3. 이벤트등록 (registration) 이벤트와이벤트핸들러를연결시키는과정 4

5 이벤트처리예제 <script type="text/javascript"> function add() { var a = document.getelementbyid("op1").value; var b = document.getelementbyid("op2").value; document.getelementbyid("result").value = parseint(a) + parseint(b); </script> <form> <input id="op1" type="text" size="2"/>+ <input id="op2" type="text" size="2"/> <input type="button" value="=" onclick="add();"/> <input id="result" type="text" size="2"/> </form> 이벤트타입이벤트핸들러호출이벤트핸들러함수 3 과 5 입력클릭 add() 함수가 5 호출됨

6 이벤트의종류 마우스이벤트 이벤트이름 태그속성 설명 click onclick 요소를클릭 dblclick ondblclick 요소를더블클릭 mousedown onmousedown 커서가요소위에있고마우스버튼을누를때 mousemove onmousemove 마우스커서를움직이는동안 mouseover onmouseover 마우스커서가해당요소위에들어갈때 mouseout onmouseout 마우스커서가해당요소위를벗어날때 mouseup onmouseup 마우스버튼을뗄때 키보드이벤트 이벤트이름 태그속성 설명 keydown onkeydown 키보드를누를때 1회발생 keypress onkeypress 키보드를타이핑할때, 손을떼기전까지계속발생한다. keyup onkeyup 키보드를누른후뗄때. 6

7 이벤트의종류 프레임 / 객체이벤트 이벤트이름 태그속성 설명 abort onabort 이미지가완전히로드되기전에정지되었을때 error onerror 이미지로드가정상적으로이루어지지않았을경우 load onload 문서, 프레임, 객체등이브라우저에로드가완료될때 resize onresize 문서창, 문서뷰의크기가변경되었을때 scroll onscroll 문서창, 문서뷰가스크롤되었을경우 unload onunload 윈도우창, 프레임으로부터문서가제거되었을경우창을종료하기직전에처리할사항있는경우유용 폼이벤트 이벤트이름 태그속성 설명 change onchange <input> 등폼요소의내용이변경되었을때 focus onfocus 요소가포커스되었을때 ( 마우스선택혹은이동 ) blur onblur 요소에서포커스가없어질때 (focus 의반대 ) reset onreset 폼이리셋될때 select onselect <input> 과 <textarea> 요소에서텍스트가선택될때 submit onsubmit 폼이실행될때 7

8 이벤트핸들링및이벤트등록 이벤트핸들러 (handler) 이벤트가발생시실행하고자하는자바스크립트함수나코드 사용자가입력한내용이맞는지검사하거나입력한내용에따라웹문서를수정하는등의작업을통해동적웹문서를만든다 이벤트등록 이벤트의종류와이를처리할이벤트핸들러를연결시키는작업 두가지등록방법 1. 태그속성에직접이벤트핸들러기술혹은이벤트함수호출 2. 객체의이벤트속성값에이벤트핸들러함수이름을기술 8

9 요소속성에이벤트핸들러기술 요소의이벤트태그속성에직접이벤트핸들러기술 이벤트핸들러 : 자바스크립트코드혹은함수이름 <form action=""> <input id="username" type="text" value="name of User" onclick="alert('please type your full name');" /> </form> <form action=""> <input id="username" type="text" value="name of User" onclick="myeventhandler();" /> </form> <script type="text/javascript"> function myeventhandler() { alert("please type your full name"); </script> 9

10 요소이벤트속성으로핸들러등록 요소객체의이벤트속성에직접이벤트핸들러함수지정 이벤트핸들러는반드시함수형태로미리구현 <form action=""> <input id="username" type="text" value="name of User" /> </form> <script type="text/javascript"> function myeventhandler() { alert("please type your full name"); var name = document.getelementbyid("username"); name.onclick = myeventhandler; </script> 주의 : 객체의이벤트속성에 () 없이함수이름만적어야함 10

11 폼다루기 자바스크립트를이용해폼의값을읽어내거나계산하여수정하는것이가능 <input> 요소를 DOM 인터페이스로접근하여 value 속성값을읽거나저장 소스코드는교재및웹사이트참조 11

12 폼의입력값읽고쓰기 DOM 을통해 <input> 텍스트박스에입력한값을읽는다 요소객체의 value 라는속성을통해읽거나수정 <input id="book1" type="text" size="2" value="0" onclick = "this.select();" /> <input id="book1total" type="text" size="6" value="0" />... Book2... book3 <td> <input id= "totalnumber" type="text" size= 2" value="0"/> </td>... <input type="button" value=" 합계계산 " onclick="updateall();" /> function updateall() { var n1 = document.getelementbyid("book1").value;... var p1 = * n1;... document.getelementbyid("book1total").value = p1;... var totalnumber = parseint(n1) + parseint(n2) + parseint(n3); document.getelementbyid("totalnumber").value = totalnumber ;... 12

13 settimeout() 을이용한예제 settimeout() 함수와폼을이용한스톱워치예제 1/10 초마다 start() 함수를호출, 폼의시간값을주기적으로증가 var stopped = false; function start() { csec_dom = document.getelementbyid("csec").value;... if (csec_dom.value == "99") { // 시간올림 csec_dom.value = "0";... else csec_dom.value = parseint(csec_dom.value) + 1; if(!stopped) settimeout(start,10); function stop() { stopped = true; 13

14 10.2 동적웹문서만들기 동적문서정의 콘텐츠변경을통한동적문서만들기 스타일변경을통한동적문서만들기 14

15 동적문서정의 동적문서 웹문서가브라우저에처음표시된후에콘텐츠나스타일변경 즉시변경된값을바탕으로화면의문서를갱신 웹문서의콘텐츠나스타일을자바스크립트를이용해변경 태그요소, 태그속성, 태그콘텐츠, 요소의 CSS 스타일등변경 태그요소의화면내표시위치변경, 애니메이션, 색상및글씨체변경, 인터랙티브사용자인터페이스등포함 동적문서구현방식 웹문서의콘텐츠를변경시키는방법 CSS 스타일을변경시키는방법 15

16 콘텐츠변경을통한동적문서 웹문서콘텐츠변경 폼요소의 value 값을변경 태그요소의콘텐츠를변경 HTML 태그콘텐츠속성 <p id = "example"> This is an example content </p> <p> 요소의콘텐츠 => This is an example content 부분 요소의콘텐츠속성 : innerhtml, innertext document.getelementbyid("example").innerhtml = "<h2>html</h2>" document.getelementbyid("example").innertext = "<h2>html</h2>" innerhtml : 속성값을 HTML 태그로해석 HTML innertext : 속성값을단순히문자열로해석 <h2>html</h2> 16

17 콘텐츠변경을통한동적문서예제 <button id="b1">innerhtml</button> <button id="b2">innertext</button> <br/> <p id= "text">this text will be dynamically changed</p> <script type="text/javascript" > document.getelementbyid("b1").onmouseover = mouseover_innerhtml; document.getelementbyid("b2").onmouseover = mouseover_innertext; 초기화면 마우스커서가 innerhtml 버튼위에위치 document.getelementbyid("b1").onmouseout = reset_text; document.getelementbyid("b2").onmouseout = reset_text; function mouseover_innerhtml() { document.getelementbyid("text").innerhtml = "<h1>mouse cursor is over the innerhtml button</h1>"; function mouseover_innertext() { document.getelementbyid("text").innertext = "<h1>mouse cursor is over the innertext button</h1>"; function reset_text() { document.getelementbyid("text").innerhtml = "This text will be dynamically changed"; </script> 마우스커서가 innertext 버튼위에위치 마우스커서가버튼바깥으로이동 17

18 스타일변경을통한동적문서 DOM 을이용하면 CSS 스타일에접근가능 일반적인 DOM 에접근하는방법과동일 예제 : 배경색스타일속성접근 <div id="outerbox" style="background: blue; width: 550px; height:300px;" /> <div id="innerbox" style="background: yellow; width: 450px; height:200px; position: absolute; left: 50px; top: 50px;" />... <script type = "text/javascript"> function changecolor(id, color) { document.getelementbyid(id).style.background = color; </script> Outer Box: <button onclick = "changecolor('outerbox', 'red');"> Red </button> <button onclick = "changecolor('outerbox', 'green');">green</button>... Inner Box: <button onclick = "changecolor('innerbox', 'red');"> Red </button> <button onclick = "changecolor('innerbox', 'green');">green</button> style.background 속성접근

19 위치스타일속성변경 style.left, style.top 속성접근 <script type = "text/javascript"> function changepositions() { for(i = 1; i <= 3; i++) { var left = document.getelementbyid("left" + i).value; var top = document.getelementbyid("top" + i).value; document.getelementbyid("img" + i).style.left = left + "px"; document.getelementbyid("img" + i).style.top = top + "px"; </script> <form> Image1: Left <input id = "left1" size = "2" type = "text"/> Top <input id = "top1" size = "2" type = "text"/> <br /> Image2: Left <input id = "left2" size = "2" type = "text"/> Top <input id = "top2" size = "2" type = "text"/> <br /> Image3: Left <input id = "left3" size = "2" type = "text"/> Top <input id = "top3" size = "2" type = "text"/> <input type = "button" onclick = "changepositions();" value = "Move All" /> </form> 19

20 보이기 / 감추기스타일속성변경 화면표시보이기 / 감추기스타일속성 visibility = "visible" 혹은 "hidden" hidden 으로설정해도웹문서내태그요소로는존재 <script type = "text/javascript"> function togglevisibility(id) { var dom = document.getelementbyid(id); if (dom.style.visibility == "visible") dom.style.visibility = "hidden"; else dom.style.visibility = "visible"; </script> Toggle Visibility: <button onclick = "togglevisibility('img1');">image 1</button> <button onclick = "togglevisibility('img2');">image 2</button> <button onclick = "togglevisibility('img3');">image 3</button> 20

21 위치스타일변경하기 마우스이벤트를이용한위치스타일변경 웹브라우저화면상의위치좌표값을이용해요소의위치변경 마우스포인터의위치 window 객체의 event 속성값에서구할수있음 (clientx, clienty) <body onmousemove="move();" style="width:500px; height:500px;">... document.getelementbyid("img1").onmouseover = start_move; document.getelementbyid("img1").onclick = stop_move;... function move() { e = window.event; // 마우스이동 mouse_x = e.clientx; mouse_y = e.clienty; document.getelementbyid("x").value = mouse_x; document.getelementbyid("y").value = mouse_y; if (!stopped) { // 중심위치, 픽셀 document.getelementbyid("img1").style.left = (mouse_x 50) + "px"; document.getelementbyid("img1").style.top = (mouse_y 50) + "px"; 21

22 10.3 다양한방법으로폼다루기 폼접근하기 폼제어하기 22

23 폼접근하기 폼에접근하는방법들 document.getelementbyid( 요소아이디 ).value; document. 폼이름. 요소아이디.value; document.forms[index]. 요소아이디.value; document.forms[index].elements[index].value; <form name="form1" action=""> <input id="input1" type="text" value="value of form" /> </form> <script type="text/javascript">... txt = document.getelementbyid("input1").value; txt = document.form1.input1.value; txt = document.forms[0].input1.value; txt = document.forms[0].elements[0].value;... </script> 23

24 폼제어하기 자바스크립트로폼위젯을제어할수있는방법들 select() 메소드 submit() 메소드 reset() 메소드 checked 속성설정 <form name="form1" action=""> <input id="input1" type="text" value="value of form" /> <input id="input2" type="checkbox"/> <br/> <input type="button" value="select()" onclick="input1.select();" /> <br/> <input type="button" value="submit()" onclick="submit();" /> <br/> <input type="button" value="reset()" onclick="reset();" /> <br/> <input type="button" value="check" onclick="input2.checked=true;" /> <br/> <input type="button" value="uncheck" onclick="input2.checked=false;" /> <br/> </form> 24

Javascript

Javascript 1. 이벤트와이벤트핸들러의이해 이벤트 (Event) 는웹브라우저에서발생하는다양한사건을말합니다. 예를들면, 버튼을마우스로을했다거나브라우저를닫았다거나 Enter 키를눌렀다거나등등아주다양한사건들이있습니다. 그렇다면이벤트핸들러 (Event Handler) 는무엇일까요? 이다양한이벤트들을핸들링 ( 처리 ) 해주는것입니다. 예를들면, 어떤버튼을했을때메시지창이뜨게하는등을말합니다.

More information

PowerPoint Template

PowerPoint Template JavaScript 회원정보 입력양식만들기 HTML & JavaScript Contents 1. Form 객체 2. 일반적인입력양식 3. 선택입력양식 4. 회원정보입력양식만들기 2 Form 객체 Form 객체 입력양식의틀이되는 태그에접근할수있도록지원 Document 객체의하위에위치 속성들은모두 태그의속성들의정보에관련된것

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 09 장 문서객체모델 1. 문서객체모델관련용어 2. 웹페이지생성순서 3. 문서객체선택 4. 문서객체조작 5. 이벤트 문서객체와문서객체모델의개념을이해한다. 문서객체를선택하고조작할수있다. 이벤트의종류를알아보고문서객체에이벤트를연결해본다. 1 문서객체모델관련용어 문서객체모델 (DOM) Document Object Model 웹브라우저가 HTML 파일을분석하고표시하는방법

More information

var answer = confirm(" 확인이나취소를누르세요."); // 확인창은사용자의의사를묻는데사용합니다. if(answer == true){ document.write(" 확인을눌렀습니다."); else { document.write(" 취소를눌렀습니다.");

var answer = confirm( 확인이나취소를누르세요.); // 확인창은사용자의의사를묻는데사용합니다. if(answer == true){ document.write( 확인을눌렀습니다.); else { document.write( 취소를눌렀습니다.); 자바스크립트 (JavaScript) - HTML 은사용자에게인터페이스 (interface) 를제공하는언어 - 자바스크립트는서버로데이터를전송하지않고서할수있는데이터처리를수행한다. - 자바스크립트는 HTML 나 JSP 에서작성할수있고 ( 내부스크립트 ), 별도의파일로도작성이가능하다 ( 외 부스크립트 ). - 내부스크립트 - 외부스크립트

More information

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호 제이쿼리 () 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호 CSS와마찬가지로, 문서에존재하는여러엘리먼트를접근할수있다. 엘리먼트접근방법 $( 엘리먼트 ) : 일반적인접근방법

More information

Microsoft PowerPoint - web-part02-ch16-이벤트.pptx

Microsoft PowerPoint - web-part02-ch16-이벤트.pptx 과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part2. jquery Ch16. 이벤트 2014년 1학기 Professor Seung-Hoon Choi 16 이벤트 jquery 에서는 자바스크립트보다더쉽게이벤트를연결할수있음 예 $(document).ready(function(event) { } ) 16.1

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 10. DOM 과이벤트처리, 입력검 증 문서객체모델 (DOM) DOM 은 HTML 문서의계층적인구조를트리 (tree) 로표현 DOM 과 BOM HTML 문서를객체로표현한것을 DOM 웹브라우저를객체로표현한것을 BOM(Browser Object Model) HTML 요소찾기 동적인웹페이지를작성하려면원하는요소를찾아야한다. id 로찾기 태그이름으로찾기

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 10 장 jquery 라이브러리 1. jquery 라이브러리설정 2. 문서객체선택 3. 문서객체조작 4. 이벤트 5. 효과 HTML 페이지에 jquery 라이브러리를추가한다. jquery 라이브러리를사용해문서객체를조작할수있다. jquery 라이브러리를사용해문서객체에효과를부여한다. jquery 플러그인을활용한다. 기본예제 10-1 jquery 라이브러리설정하기

More information

Microsoft PowerPoint - web-part01-ch10-문서객체모델.pptx

Microsoft PowerPoint - web-part01-ch10-문서객체모델.pptx 과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part1. JavaScript / Ch10. 문서객체모델 2014년 1학기 Professor Seung-Hoon Choi 10 문서객체모델 문서객체모델 (Document Object Model, DOM) 웹브라우저가 HTML 페이지를인식하는방식 document

More information

jQuery.docx

jQuery.docx jquery 김용만 http://cafe.naver.com/javaz 1. jquery 에대해 1) jquery 의특징 DOM 과관련된처리를쉽게구현 CSS 선택자를이용하여쉽고편리하게요소를선택 일괄된이벤트연결을쉽게구현 시각적효과를쉽게구현 Ajax 애플리케이션을쉽게개발 2) jquery 다운로드와 CDN 방식 - jquery 라이브러리파일다운로드 jquery 라이브러리파일을

More information

Javascript.pages

Javascript.pages JQuery jquery part1 JavaScript : e-mail:leseraphina@naver.com http://www.webhard.co.kr I.? 2 ......,,. : : html5 ; ; .

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 05 장 CSS3 선택자 1. 선택자개요 2. 기본선택자 3. 속성선택자 4. 후손선택자와자손선택자 5. 반응 / 상태 / 구조선택자 CSS 블록을생성할수있다. 선택자를이해하고적절한선택자를활용할수있다. 1 선택자개요 CSS3 선택자 특정한 HTML 태그를선택할때사용하는기능 선택한태그에원하는스타일이나스크립트적용가능 그림 5-1 CSS 블록 CSS 블록 style

More information

C H A P T E R 2

C H A P T E R 2 C H A P T E R 2 Foundations of Ajax Chapter 2 1 32 var xmlhttp; function createxmlhttprequest() { if(window.activexobject) { xmlhttp = new ActiveXObject( Micr else if(window.xmlhttprequest) { xmlhttp =

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 13. HTML5 위치정보와드래그앤드롭 SVG SVG(Scalable Vector Graphics) 는 XML- 기반의벡터이미지포맷 웹에서벡터 - 기반의그래픽을정의하는데사용 1999 년부터 W3C 에의하여표준 SVG 의장점 SVG 그래픽은확대되거나크기가변경되어도품질이손상되지않는다. SVG 파일에서모든요소와속성은애니메이션이가능하다. SVG 이미지는어떤텍스트에디터로도생성하고편집할수있다.

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 11. 자바스크립트와캔버스로게임 만들기 캔버스 캔버스는 요소로생성 캔버스는 HTML 페이지상에서사각형태의영역 실제그림은자바스크립트를통하여코드로그려야한다. 컨텍스트객체 컨텍스트 (context) 객체 : 자바스크립트에서물감과붓의역할을한다. var canvas = document.getelementbyid("mycanvas"); var

More information

(Microsoft PowerPoint - 9\300\345.ppt [\310\243\310\257 \270\360\265\345])

(Microsoft PowerPoint - 9\300\345.ppt [\310\243\310\257 \270\360\265\345]) 제9장폼객체 객체다루기 학습목표 폼객체에서사용하는속성, 메소드, 이벤트핸들러를이해한다. 목록상자에서사용하는속성, 메소드, 이벤트핸들러를이해한다. 목차 9.1 form 객체 9.2 입력상자, 체크상자, 라디오버튼 9.3 목록상자 2 9.1 form 객체 폼은주로서버에어떤데이터를보내고자하는경우에많이사용한다. 태그를제어하는 form 객체의기본용법은다음과같다

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 HTML5 웹프로그래밍입문 부록. 웹서버구축하기 1 목차 A.1 웹서버시스템 A.2 PHP 사용하기 A.3 데이터베이스연결하기 2 A.1 웹서버시스템 3 웹서버의구축 웹서버컴퓨터구축 웹서버소프트웨어설치및실행 아파치 (Apache) 웹서버가대표적 서버실행프로그램 HTML5 폼을전달받아처리 PHP, JSP, Python 등 데이터베이스시스템 서버측에데이터를저장및효율적관리

More information

Microsoft PowerPoint - web-part03-ch20-XMLHttpRequest기본.pptx

Microsoft PowerPoint - web-part03-ch20-XMLHttpRequest기본.pptx 과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part3. Ajax Ch20. XMLHttpRequest 2014년 1학기 Professor Seung-Hoon Choi 20 XMLHttpRequest XMLHttpRequest 객체 자바스크립트로 Ajax를이용할때사용하는객체 간단하게 xhr 이라고도부름 서버

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 HTML5 웹프로그래밍입문 5 장. 고급표현을위한 CSS3 활용 1 목차 5.1 박스모델설정하기 5.2 레이아웃설정하기 5.3 다양한효과설정하기 5.4 움직임설정하기 2 5.1 박스모델설정하기 5.1.1 영역설정을위한박스모델 5.1.2 박스모델유형의지정 3 영역설정을위한박스모델 배경영역 , , : 해당하는줄만큼배경 ,

More information

- 이벤트의처리 <input type= button id= button1 value= 확인 /> <input type= button id= button2 value= 확인 /> 자바스크립트인경우 : document.getelementbyid( button1 ).oncl

- 이벤트의처리 <input type= button id= button1 value= 확인 /> <input type= button id= button2 value= 확인 /> 자바스크립트인경우 : document.getelementbyid( button1 ).oncl 제이쿼리 (JQuery) - 제이쿼리는자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리이다. - 따라서, 제이쿼리를사용하기위해서는자바스크립트라이브러리를사용해야한다. - 제이쿼리사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) - 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호를말함. - 사용예 )

More information

Ext JS À¥¾ÖÇø®ÄÉÀ̼ǰ³¹ß-³¹Àå.PDF

Ext JS À¥¾ÖÇø®ÄÉÀ̼ǰ³¹ß-³¹Àå.PDF CHAPTER 2 (interaction) Ext JS., HTML, onready, MessageBox get.. Ext JS HTML CSS Ext JS.1. Ext JS. Ext.Msg: : Ext Ext.get: DOM 22 CHAPTER 2 (config). Ext JS.... var test = new TestFunction( 'three', 'fixed',

More information

PART 1 CHAPTER 1 Chapter 1 Note 4 Part 1 5 Chapter 1 AcctNum = Table ("Customer").Cells("AccountNumber") AcctNum = Customer.AccountNumber Note 6 RecordSet RecordSet Part 1 Note 7 Chapter 1 01:

More information

이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2

이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2 03 장. 테두리여백지정하는속성 이번장에서는테이블, 레이어, 폼양식등의더예쁘게꾸미기위해서 CSS 를이용하여 HTML 요소의테두리속성을바꾸어보자. 이장에서다룰내용 1 2 3 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2 01. 테두리를제어하는스타일시트 속성값설명 border-width border-left-width

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 14. HTML5 웹스토리지, 파일 API, 웹소켓 웹스토리지 웹스토리지 (web storage) 는클라이언트컴퓨터에데이터를저장하는메카니즘 웹스토리지는쿠키보다안전하고속도도빠르다. 약 5MB 정도까지저장이가능하다. 데이터는키 / 값 (key/value) 의쌍으로저장 localstorage 와 sessionstorage localstorage 객체

More information

Microsoft PowerPoint 세션.ppt

Microsoft PowerPoint 세션.ppt 웹프로그래밍 () 2006 년봄학기 문양세강원대학교컴퓨터과학과 세션변수 (Session Variable) (1/2) 쇼핑몰장바구니 장바구니에서는사용자가페이지를이동하더라도장바구니의구매물품리스트의내용을유지하고있어야함 PHP 에서사용하는일반적인변수는스크립트의수행이끝나면모두없어지기때문에페이지이동시변수의값을유지할수없음 이러한문제점을해결하기위해서 PHP 에서는세션 (session)

More information

HTML5 웹프로그래밍 입문-개정판

HTML5 웹프로그래밍 입문-개정판 HTML5 웹프로그래밍입문 9 장. 자바스크립트객체와 DOM 목차 9.1 자바스크립트내장객체다루기 9.2 자바스크립트사용자정의객체다루기 9.3 DOM 으로 HTML 문서다루기 2 9.1 자바스크립트내장객체다루기 9.1.1 자바스크립트내장객체 9.1.2 배열객체 3 자바스크립트객체 자바스크립트에서제공되는내장객체와사용자가정의한사용자정의객체로구분 자바스크립트객체는속성

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 HTML5 웹프로그래밍입문 12 장. 인터페이스관련 API 목차 12.1 위치정보사용하기 12.2 드래그앤드롭사용하기 12.3 오디오및비디오제어하기 2 12.1 위치정보사용하기 12.1.1 지오로케이션 API의개요 12.1.2 단발성위치요청하기 12.1.3 반복적위치요청하기 3 위치정보 (geolocation) 위치정보 GPS 가내장된모바일기기에서정확한위치파악가능

More information

Microsoft PowerPoint - web-part02-ch15-문서객체조작.pptx

Microsoft PowerPoint - web-part02-ch15-문서객체조작.pptx 과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part2. jquery Ch15. 문서객체조작 2014년 1학기 Professor Seung-Hoon Choi 15 문서객체조작 문서객체조작 자바스크립트만으로문서객체모델을다루려면복잡함 jquery를이용하면쉽게다룰수있다. 이책에서가장중요한부분 15.1 문서객체의클래스속성추가

More information

Javascript

Javascript 1. 폼 (Form) 태그란? 일반적으로폼 (Form) 태그는입력양식을만들때사용됩니다. 입력양식이란어떤데이터를받아전송해주는양식을말합니다. 예를들면, 방명록이나게시판, 회원가입등의양식을말합니다. 이러한입력양식의처음과끝에는반드시폼태그가들어가게됩니다. 폼의입력양식에는 Text Box, Input Box, Check Box, Radio Button 등여러가지입력타입들이포함됩니다.

More information

HTML5

HTML5 자바스크립트 류관희 충북대학교 자바스크립트 스크립트의등장과역할 최초의스크립트 : 1987 년애플사의 HyperCard 발전계기 : 1990 년대초에 MS 사에서 VB 에서사용할수있는 VBA(VBApplication) 개발 SunMicrosystems 사가인터넷프로그래밍언어로 Java 를개발 넷스케이프사는선사와전략적제휴를통하여, HTML 기능을수용하면서프로그래밍개념을대폭수용한

More information

다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) <% RequestDispatcher dispatcher = request.getrequestdispatcher(" 실행할페이지.jsp");

다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) <% RequestDispatcher dispatcher = request.getrequestdispatcher( 실행할페이지.jsp); 다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) RequestDispatcher dispatcher = request.getrequestdispatcher(" 실행할페이지.jsp"); dispatcher.forward(request, response); - 위의예에서와같이 RequestDispatcher

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 명품웹프로그래밍 1 2 강의목표 1. 이벤트가무엇이고언제발생하는지안다. 2. 자바스크립트코드로이벤트리스너를작성할수있다. 3. 발생하는이벤트가 DOM 트리를따라흘러가는경로를안다. 4. 문서와이미지의로딩완료시호출되는 onload 리스너를작성할수있다. 5. 폼에발생하는이벤트리스너를다룰수있다. 6. 마우스관련이벤트를다룰수있다. 7. 키관련이벤트를다룰수있다. 이벤트개요

More information

e-비즈니스 전략 수립

e-비즈니스 전략 수립 CSS3 속성 HTML5 웹프로그래밍입문 ( 개정판 ) Contents 학습목표 CSS3가지원하는스타일속성과스타일값을활용할수있습니다. CSS3를사용해레이아웃을잡을수있습니다. 내용 CSS3 단위 박스속성 display 속성 배경속성 글자속성 위치속성 float 속성 그림자속성 그레이디언트 2/85 1. CSS3 단위 키워드단위 W3C에서미리정의한단어 키워드를입력하면키워드에해당하는스타일이자동으로적용

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 7. HTML 와 CSS 로웹사이트만들 기 웹사이트작성 웹사이트구축과정 내비게이션구조도 홈페이지레이아웃 헤더 web Shop 내비게이션메뉴

More information

API - Notification 메크로를통하여어느특정상황이되었을때 SolidWorks 및보낸경로를통하여알림메시지를보낼수있습니다. 이번기술자료에서는메크로에서이벤트처리기를통하여진행할예정이며, 메크로에서작업을수행하는데유용할것입니다. 알림이벤트핸들러는응용프로그램구현하는데있어

API - Notification 메크로를통하여어느특정상황이되었을때 SolidWorks 및보낸경로를통하여알림메시지를보낼수있습니다. 이번기술자료에서는메크로에서이벤트처리기를통하여진행할예정이며, 메크로에서작업을수행하는데유용할것입니다. 알림이벤트핸들러는응용프로그램구현하는데있어 메크로를통하여어느특정상황이되었을때 SolidWorks 및보낸경로를통하여알림메시지를보낼수있습니다. 이번기술자료에서는메크로에서이벤트처리기를통하여진행할예정이며, 메크로에서작업을수행하는데유용할것입니다. 알림이벤트핸들러는응용프로그램구현하는데있어서가장중요한부분이라고도할수있기때문입니다. 1. 새로운메크로생성 새메크로만들기버튺을클릭하여파일을생성합니다. 2. 메크로저장 -

More information

Microsoft PowerPoint - aj-lecture1-HTML-CSS-JS.ppt [호환 모드]

Microsoft PowerPoint - aj-lecture1-HTML-CSS-JS.ppt [호환 모드] Web Technology Stack HTML, CSS, JS Basics HTML Tutorial https://www.w3schools.com/html/default.asp CSS Tutorial https://www.w3schools.com/css/default.asp JS Tutorial 524730-1 2019 년봄학기 3/11/2019 박경신 https://www.w3schools.com/html/default.asp

More information

HTML5 웹프로그래밍 입문-개정판

HTML5 웹프로그래밍 입문-개정판 HTML5 웹프로그래밍입문 8 장. 자바스크립트 프로그래밍기초 목차 8.1 자바스크립트시작하기 8.2 자바스크립트기본문법 8.3 자바스크립트제어문및반복문 8.4 자바스크립트함수 2 8.1 자바스크립트시작하기 8.1.1 자바스크립트개요와특징 8.1.2 자바스크립트작성하기 8.1.3 자바스크립트실행및디버깅 3 자바스크립트개요 개요및특징 동적인웹문서, 웹응용프로그램을위한사용자인터페이스개발

More information

(Microsoft PowerPoint - 8\300\345.ppt [\310\243\310\257 \270\360\265\345])

(Microsoft PowerPoint - 8\300\345.ppt [\310\243\310\257 \270\360\265\345]) 제8장이벤트와 이벤트와이벤트핸들러다루기 학습목표 이벤트와이벤트핸들러를이해하고사용할수있다. event 객체로마우스나키보드의동작을 동작을제어하고관리할 관리할수있다. 목차 8.1 이벤트와이벤트핸들러 8.2 event 객체 2 자바스크립트는넷스케이프사에서넷스케이프웹브라우저를위해자체적으로개발한스크립트언어 자바스크립트는 HTML 페이지를향상시키고자바애플릿을쉽게제어하도록설계

More information

XSS Attack - Real-World XSS Attacks, Chaining XSS and Other Attacks, Payloads for XSS Attacks

XSS Attack - Real-World XSS Attacks, Chaining XSS and Other Attacks, Payloads for XSS Attacks XSS s XSS, s, May 25, 2010 XSS s 1 2 s 3 XSS s MySpace 사건. Samy (JS.Spacehero) 프로필 페이지에 자바스크립트 삽입. 스크립트 동작방식 방문자를 친구로 추가. 방문자의 프로필에 자바스크립트를 복사. 1시간 만에 백만 명이 친구등록. s XSS s 위험도가 낮은 xss 취약점을 다른 취약점과 연계하여

More information

Microsoft PowerPoint - web-part01-ch09-브라우저객체모델.pptx

Microsoft PowerPoint - web-part01-ch09-브라우저객체모델.pptx 과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part1. JavaScript / Ch09. 브라우저객체모델 2014년 1학기 Professor Seung-Hoon Choi 9 브라우저객체모델 브라우저객체모델 (Browser Object Model, BOM) 웹브라우저와관련된객체들의집합 window, location,

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 ONE page html 이란? 원페이지는최근의홈페이지제작트렌드로한페이지에상단에서하단으로의마우스스크롤링을통해서컨텐츠를보여주는스타일의홈페이지입니다. USER 의시선을분산시키지않고위쪽에서아래쪽으로마우스스크롤링을통해서홈페이지의컨텐츠를보여주게됩니다. 반응형으로제작되어스마트폰, 아이패드, 태블릿,PC, 노트북등다양한디바이스에서자동으로최적화됩니다. ONE page 웹사이트사례

More information

웹취약점스캐너프로젝트 2/15 목 차 1. 서론 연구의배경및목적 연구주제의요약설명 3 2. 웹취약점 SQL Injection XSS 3 3. 웹취약점점검패턴 SQL Injection 점검패턴 X

웹취약점스캐너프로젝트 2/15 목 차 1. 서론 연구의배경및목적 연구주제의요약설명 3 2. 웹취약점 SQL Injection XSS 3 3. 웹취약점점검패턴 SQL Injection 점검패턴 X 웹취약점스캐너프로젝트 1/15 웹취약점스캐너제작 2014 년 11 월 10 일 대학교 동아리 인천대학교 OneScore 참여인원 김영성, 박현우, 김한슬 송동현, 라하연 웹취약점스캐너프로젝트 2/15 목 차 1. 서론 3 1.1. 연구의배경및목적 3 1.2. 연구주제의요약설명 3 2. 웹취약점 3 2.1. SQL Injection 3 2.2. XSS 3 3.

More information

SOFTBASE XFRAME DEVELOPMENT GUIDE SERIES HTML 연동가이드 서울특별시구로구구로 3 동한신 IT 타워 1215 호 Phone Fax Co

SOFTBASE XFRAME DEVELOPMENT GUIDE SERIES HTML 연동가이드 서울특별시구로구구로 3 동한신 IT 타워 1215 호 Phone Fax Co SOFTBASE XFRAME DEVELOPMENT GUIDE SERIES 2012.02.18 서울특별시구로구구로 3 동한신 IT 타워 1215 호 Phone 02-2108-8030 Fax 02-2108-8031 www.softbase.co.kr Copyright 2010 SOFTBase Inc. All rights reserved 목차 1 장 : HTML 연동개요...

More information

Visual Basic 기본컨트롤

Visual Basic 기본컨트롤 학습목표 폼 ( Form) 폼의속성, 컨트롤이름, 컨트롤메서드 기본컨트롤 레이블, 텍스트박스, 버튼, 리스트박스 이벤트 버튼 기본컨트롤실습 2 2.1 폼 (Form) 2.2 기본컨트롤 2.3 기본컨트롤실습 3 폼 - 속성 속성 (Name) AutoSize BackColor Font ForeColor Icon StartPosition Transparency WindowState

More information

SK Telecom Platform NATE

SK Telecom Platform NATE SK Telecom Platform NATE SK TELECOM NATE Browser VER 2.6 This Document is copyrighted by SK Telecom and may not be reproduced without permission SK Building, SeRinDong-99, JoongRoGu, 110-110, Seoul, Korea

More information

Visual Basic 반복문

Visual Basic 반복문 학습목표 반복문 For Next문, For Each Next문 Do Loop문, While End While문 구구단작성기로익히는반복문 2 5.1 반복문 5.2 구구단작성기로익히는반복문 3 반복문 주어진조건이만족하는동안또는주어진조건이만족할때까지일정구간의실행문을반복하기위해사용 For Next For Each Next Do Loop While Wend 4 For

More information

PHP & ASP

PHP & ASP PHP 의시작과끝 echo ; Echo 구문 HTML과 PHP의 echo 비교 HTML과 PHP의 echo를비교해볼까요

More information

Microsoft PowerPoint - web-part02-ch13-기본.pptx

Microsoft PowerPoint - web-part02-ch13-기본.pptx 과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part2. jquery / Ch13. 기본 2014년 1학기 Professor Seung-Hoon Choi 13.1 기본 jquery 란? 모든브라우저에서동작하는클라이언트자바스크립트라이브러리 2006년 John Resig이개발 기능 문서객체모델과관련된처리를쉽게구현

More information

SproutCore에 홀딱 반했습니다.

SproutCore에 홀딱 반했습니다. Created by Firejune at 2009/10/30 SproutCore에 홀딱 반했습니다. 회사에서 첨여중인 프로젝트의 시제품(prototype)에 SproutCore 자바스크립트 프레임웍을 적용한 것을 시작으로, 아주 조금씩 조금씩 작동원리를 이해해 가면서 즐거운 나날을 보내고 있습니다. 그렇게 약 2개월 정도 작업이 진행되었고 큰 그림이 머리속에

More information

HTML5

HTML5 주사위게임 류관희 충북대학교 주사위게임규칙 플레이어 두개의주사위를던졌을때두주사위윗면숫자의합 The First Throw( 두주사위의합 ) 합 : 7 혹은 11 => Win 합 : 2, 3, 혹은 12 => Lost 합 : 4, 5, 6, 8, 9, 10 => rethrow The Second Throw 합 : 첫번째던진주사위합과같은면 => Win 합 : 그렇지않으면

More information

어댑터뷰

어댑터뷰 04 커스텀어댑터뷰 (Custom Adapter View) 커스텀어댑터뷰 (Custom Adapter View) 커스텀어댑터뷰 (Custom Adatper View) 란? u 어댑터뷰의항목하나는단순한문자열이나이미지뿐만아니라, 임의의뷰가될수 있음 이미지뷰 u 커스텀어댑터뷰설정절차 1 2 항목을위한 XML 레이아웃정의 어댑터정의 3 어댑터를생성하고어댑터뷰객체에연결

More information

PowerPoint Presentation

PowerPoint Presentation 웹과인터넷활용및실습 (Web & Internet) Suan Lee - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 1 04. CSS3 스타일속성 04. CSS3 Style Properties - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 2 CSS3 단위 1 CSS 는각각의스타일속성에다양한값을입력

More information

슬라이드 1

슬라이드 1 웹프로그래밍 HTML, 자바스크립트, ASP 를중심으로 제 3 장고급 HTML 작성 목차 제 3 장고급 HTML 작성 2.1 기본태그 2.2 LINK 태그 2.3 Image 2.4 TABLE 2.5 FRAME 2.6 INPUT 양식 2 3 장고급 HTML 작성 멀티미디어파일다루기 스타일시트 레이어 3 3.1 멀티미디어 최근인터넷사용자가급증하면서기업 / 개인용홈페이지가급증하였고다양한홈페이지를만들기위해많은기술들이생겨나고있음

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 명품웹프로그래밍 1 2 강의목표 1. HTML DOM 의필요성을이해한다. 2. DOM 트리와 HTML 페이지의관계를이해한다. 3. DOM 객체의구조와 HTML 태그와의관계를이해한다. 4. DOM 객체를통해 HTML 태그의출력모양과콘텐츠를제어할수있다. 5. document 객체를이해하고, write() 메소드를활용할수있다. 6. createelement() 등을통해동적으로

More information

Modal Window

Modal Window 접근가능한레이어팝업 Feat. WAI-ARIA 콘텐츠연합플랫폼클라이언트개발부지성봉 Modal Window Modal Window 사용자인터페이스디자인개념에서자식윈도에서부모윈도로돌아가기전에사용자의상호동작을요구하는창. 응용프로그램의메인창의작업흐름을방해한다. Native HTML 의한계점 팝업이떴다라는정보를인지할수없다. 팝업이외의문서정보에접근이된다. 키보드 tab

More information

Microsoft PowerPoint UI-Event.Notification(1.5h).pptx

Microsoft PowerPoint UI-Event.Notification(1.5h).pptx To be an Android Expert 문양세강원대학교 IT 대학컴퓨터학부 UI 이벤트 Event listener Touch mode Focus handling Notification Basic toast notification Customized toast notification Status bar notification 2 사용자가인터랙션하는특정 View

More information

INDEX 들어가기 고민하기 HTML(TABLE/FORM) CSS JS

INDEX 들어가기 고민하기 HTML(TABLE/FORM) CSS JS 개발자에게넘겨주기편한 TABLE&FORM 마크업 김남용 INDEX 들어가기 고민하기 HTML(TABLE/FORM) CSS JS 들어가기 이제는 ~ 서로간의이슈웹표준 & 웹접근성왜웹표준으로해야할까요? 모든웹페이지는 ~ 퍼블리싱순서 이제는 ~ 디자이너 디자이너 퍼블리셔 Front-end (UI 개발자 ) 퍼블리셔 Front-end (UI 개발자 ) 서버개발자 서버개발자

More information

Building Mobile AR Web Applications in HTML5 - Google IO 2012

Building Mobile AR Web Applications in HTML5 - Google IO 2012 Building Mobile AR Web Applications in HTML5 HTML5 -, KIST -, UST HCI & Robotics Agenda Insight: AR Web Browser S.M.AR.T: AR CMS HTML5 HTML5 AR - Hello world! - Transform - - AR Events 3/33 - - - (Simplicity)

More information

HTML5

HTML5 퀴즈 류관희 게임규칙 동적으로 HTML 요소생성 생성된 HTML 요소의화면배치및위치옮기기 퀴즈게임 국가명과수도명의짝맞추기 배열 ( 국가명, 수도명 ) 짝모두맞추면 => 동영상플레이 2 퀴즈게임 3 4 5 6 주요특징 배열 : 국가명과수도명저장 피드백 : 색상변경, 동영상재생 플레이 20쌍중에 4 쌍무작위로선택 글자 : 국가명과수도명 => 그림으로대치 7 사전준비항목

More information

4장기본프로그래밍2

4장기본프로그래밍2 4-2 마우스 (Mouse) 마우스이벤트 Click 이벤트 마우스버튼이눌렸다가떼어질때발생 DblClick 이벤트 마우스버튼이두번눌렸다가떼어질때발생 MouseDown 이벤트 마우스버튼이눌렸을때발생 MouseUp 이벤트 마우스버튼이떼어질때발생 MouseMove 이벤트 마우스가움직일때발생 DragOver 이벤트 마우스버튼을누른상태에서끌기를했을때발생 DragDrop

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 HTML5 웹프로그래밍입문 6 장. 다양한입력폼 1 목차 6.1 폼이해하기 6.2 기본형식으로입력하기 6.3 고급형식으로입력하기 2 6.1 폼이해하기 3 요소의사용 폼요소의사용 회원가입, 상품구매, 키워드검색등사용자로부터정보를받을때 사용자와애플리케이션이상호작용 사용자입력 전송버튼 애플리케이션에전달 실행결과반환 요소의역할 사용자가입력하는정보를하나로묶어서애플리케이션에전달

More information

Javascript

Javascript 1. 브라우저내장객체의종류와계층구조 4일차에서잠시다루었던것처럼자바스크립트는자바스크립트자신이가지고있는내장객체와브라우저가지니고있는브라우저내장객체가있습니다. 브라우저내장객체는현재브라우저로출력된문서에대한여러가지정보, 윈도우정보, 히스토리정보, 위치정보등을제공합니다. 이브라우저내장객체는계층구조라는것을가지고있는상위객체안에하위객체가존재하는구조를말합니다. 예를들면, Windows

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 Html 은웹에서 text, images, movie 등다양한정보의요소를 담을수있는문서형식이다. 정보 (txt, imges) 전송 = 동일한어플리케이션 = 정보 (txt, imges) 정보 (txt, imges Movie, 동작 ) 정보 (txt, imges movie) 어플리케이션 웹브라우저 HTML5 는기존 HTML 에차별화된특징을가진 최신버전의웹표준언어.

More information

gnu-lee-oop-kor-lec10-1-chap10

gnu-lee-oop-kor-lec10-1-chap10 어서와 Java 는처음이지! 제 10 장이벤트처리 이벤트분류 액션이벤트 키이벤트 마우스이동이벤트 어댑터클래스 스윙컴포넌트에의하여지원되는이벤트는크게두가지의카테고리로나누어진다. 사용자가버튼을클릭하는경우 사용자가메뉴항목을선택하는경우 사용자가텍스트필드에서엔터키를누르는경우 두개의버튼을만들어서패널의배경색을변경하는프로그램을작성하여보자. 이벤트리스너는하나만생성한다. class

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 3. HTML 멀티미디어와입력요소 웹브라우저와멀티미디어 예전방법 : HTML 안에서는 나 태그를사용하여야했고웹브라우저에는플래시나 ActiveX 를설치 HTML5: 와 태그가추가 오디오 요소의속성 오디오파일형식 MP3 'MPEG-1 Audio Layer-3' 의약자로 MPEG

More information

PowerPoint Presentation

PowerPoint Presentation Class - Property Jo, Heeseung 목차 section 1 클래스의일반구조 section 2 클래스선언 section 3 객체의생성 section 4 멤버변수 4-1 객체변수 4-2 클래스변수 4-3 종단 (final) 변수 4-4 멤버변수접근방법 section 5 멤버변수접근한정자 5-1 public 5-2 private 5-3 한정자없음

More information

학습목표 함수프로시저, 서브프로시저의의미를안다. 매개변수전달방식을학습한다. 함수를이용한프로그래밍한다. 2

학습목표 함수프로시저, 서브프로시저의의미를안다. 매개변수전달방식을학습한다. 함수를이용한프로그래밍한다. 2 학습목표 함수프로시저, 서브프로시저의의미를안다. 매개변수전달방식을학습한다. 함수를이용한프로그래밍한다. 2 6.1 함수프로시저 6.2 서브프로시저 6.3 매개변수의전달방식 6.4 함수를이용한프로그래밍 3 프로시저 (Procedure) 프로시저 (Procedure) 란무엇인가? 논리적으로묶여있는하나의처리단위 내장프로시저 이벤트프로시저, 속성프로시저, 메서드, 비주얼베이직내장함수등

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 Web server porting 2 Jo, Heeseung Web 을이용한 LED 제어 Web 을이용한 LED 제어프로그램 web 에서데이터를전송받아타겟보드의 LED 를조작하는프로그램을작성하기위해다음과같은소스파일을생성 2 Web 을이용한 LED 제어 LED 제어프로그램작성 8bitled.html 파일을작성 root@ubuntu:/working/web# vi

More information

iii. Design Tab 을 Click 하여 WindowBuilder 가자동으로생성한 GUI 프로그래밍환경을확인한다.

iii. Design Tab 을 Click 하여 WindowBuilder 가자동으로생성한 GUI 프로그래밍환경을확인한다. Eclipse 개발환경에서 WindowBuilder 를이용한 Java 프로그램개발 이예는 Java 프로그램의기초를이해하고있는사람을대상으로 Embedded Microcomputer 를이용한제어시스템을 PC 에서 Serial 통신으로제어 (Graphical User Interface (GUI) 환경에서 ) 하는프로그램개발예를설명한다. WindowBuilder:

More information

UI TASK & KEY EVENT

UI TASK & KEY EVENT T9 & AUTOMATA 2007. 3. 23 PLATFORM TEAM 정용학 차례 T9 개요 새로운언어 (LDB) 추가 T9 주요구조체 / 주요함수 Automata 개요 Automata 주요함수 추후세미나계획 질의응답및토의 T9 ( 2 / 30 ) T9 개요 일반적으로 cat 이라는단어를쓸려면... 기존모드 (multitap) 2,2,2, 2,8 ( 총 6번의입력

More information

HTML5 인터넷보충학습자료 (2014) 14 강. HTML API [1] : 오프라인웹, 파일접근, 웹스토리지 14 강. HTML API [1] : 오프라인웹, 파일접근, 웹스토리지 1. 오프라인웹 1.1 오프라인웹애플리케이션 Ÿ 오프라인상태에서도사용이가능한애플리케이

HTML5 인터넷보충학습자료 (2014) 14 강. HTML API [1] : 오프라인웹, 파일접근, 웹스토리지 14 강. HTML API [1] : 오프라인웹, 파일접근, 웹스토리지 1. 오프라인웹 1.1 오프라인웹애플리케이션 Ÿ 오프라인상태에서도사용이가능한애플리케이 14 강. HTML API [1] : 오프라인웹, 파일접근, 웹스토리지 1. 오프라인웹 1.1 오프라인웹애플리케이션 Ÿ 오프라인상태에서도사용이가능한애플리케이션이다. 온라인지원이안되는곳에서 도웹에접근하여사용이가능하다. 즉파일들을클라이언트에서캐시로저장하여사 용하므로웹문서의접근이빠르다. 1.2 매니페스트파일 Ÿ 오프라인에서도웹사이트이용이가능하도록하기위해서는여러문서와파일들을캐시로저장해야하는데,

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 6. CSS 레이아웃과애니메이션 레이아웃이란? 웹페이지에서 HTML 요소의위치, 크기등을결정하는것 집안에서의가구배치와비슷하다. 블록요소와인라인요소 블록 (block) 요소 - 화면의한줄을전부차지한다. 인라인 (inline) 요소 - 한줄에차례대로배치된다. 현재줄에서필요한만큼의너비만을차지한다. 블록요소 한줄을전부차지 , , ,

More information

Javascript

Javascript 1. HTML 이란? HTML 은 Hyper Text Mark Up Language 의약자로예약되어있는각종태그라는명령어를이용하여웹페이지를작성할때사용하는언어입니다. 2. HTML 의기본구조 < 태그 > 내용 < 태그속성 = 변수 > 내용

More information

PowerPoint Presentation

PowerPoint Presentation 객체지향프로그래밍 인터페이스, 람다식, 패키지 ( 실습 ) 손시운 ssw5176@kangwon.ac.kr 예제 1. 홈네트워킹 public interface RemoteControl { public void turnon(); // 가전제품을켠다. public void turnoff(); // 가전제품을끈다. 인터페이스를구현 public class Television

More information

오버라이딩 (Overriding)

오버라이딩 (Overriding) WindowEvent WindowEvent 윈도우가열리거나 (opened) 닫힐때 (closed) 활성화되거나 (activated) 비활성화될때 (deactivated) 최소화되거나 (iconified) 복귀될때 (deiconified) 윈도우닫힘버튼을누를때 (closing) WindowEvent 수신자 abstract class WindowListener

More information

2파트-07

2파트-07 CHAPTER 07 Ajax ( ) (Silverlight) Ajax RIA(Rich Internet Application) Firefox 4 Ajax MVC Ajax ActionResult Ajax jquery Ajax HTML (Partial View) 7 3 GetOrganized Ajax GetOrganized Ajax HTTP POST 154 CHAPTER

More information

로거 자료실

로거 자료실 redirection 매뉴얼 ( 개발자용 ) V1.5 Copyright 2002-2014 BizSpring Inc. All Rights Reserved. 본문서에대한저작권은 비즈스프링 에있습니다. - 1 - 목차 01 HTTP 표준 redirect 사용... 3 1.1 HTTP 표준 redirect 예시... 3 1.2 redirect 현상이여러번일어날경우예시...

More information

<4D F736F F F696E74202D203130C0E52EBFA1B7AF20C3B3B8AE205BC8A3C8AF20B8F0B5E55D>

<4D F736F F F696E74202D203130C0E52EBFA1B7AF20C3B3B8AE205BC8A3C8AF20B8F0B5E55D> 10 장. 에러처리 1. page 지시문을활용한에러처리 page 지시문의 errorpage 와 iserrorpage 속성 errorpage 속성 이속성이지정된 JSP 페이지내에서 Exception이발생하는경우새롭게실행할페이지를지정하기위하여사용 iserrorpage 속성 iserrorpage 는위와같은방법으로새롭게실행되는페이지에지정할속성으로현재페이지가 Exception

More information

[ 마이크로프로세서 1] 2 주차 3 차시. 포인터와구조체 2 주차 3 차시포인터와구조체 학습목표 1. C 언어에서가장어려운포인터와구조체를설명할수있다. 2. Call By Value 와 Call By Reference 를구분할수있다. 학습내용 1 : 함수 (Functi

[ 마이크로프로세서 1] 2 주차 3 차시. 포인터와구조체 2 주차 3 차시포인터와구조체 학습목표 1. C 언어에서가장어려운포인터와구조체를설명할수있다. 2. Call By Value 와 Call By Reference 를구분할수있다. 학습내용 1 : 함수 (Functi 2 주차 3 차시포인터와구조체 학습목표 1. C 언어에서가장어려운포인터와구조체를설명할수있다. 2. Call By Value 와 Call By Reference 를구분할수있다. 학습내용 1 : 함수 (Function) 1. 함수의개념 입력에대해적절한출력을발생시켜주는것 내가 ( 프로그래머 ) 작성한명령문을연산, 처리, 실행해주는부분 ( 모듈 ) 자체적으로실행되지않으며,

More information

웹의 뼈대 HTML의 이해 개요 및 텍스트 태그

웹의 뼈대 HTML의 이해 개요 및 텍스트 태그 HTML 의이해 - 개요및텍스트태그 최현종 ( 서원대학교 ) HTML 의개요 웹문서란무엇인가? 인터넷에올려진문서 HTML : 다양한멀티미디어요소까지다룰수있는인터넷표준웹문서 웹브라우저란무엇인가? 웹문서를보기위한프로그램 대표적인웹브라우저 - 인터넷익스플로러 - 넷스케이프내비게이터 - 오페라 그림 1. 인터넷익스플로러 HTML 의정의 - Hyper Text Markup

More information

SOFTBASE XFRAME DEVELOPMENT GUIDE SERIES ActiveX 컴포넌트가이드 서울특별시구로구구로 3 동한신 IT 타워 1215 호 Phone Fax

SOFTBASE XFRAME DEVELOPMENT GUIDE SERIES ActiveX 컴포넌트가이드 서울특별시구로구구로 3 동한신 IT 타워 1215 호 Phone Fax SOFTBASE XFRAME DEVELOPMENT GUIDE SERIES 2012.02.18 서울특별시구로구구로 3 동한신 IT 타워 1215 호 Phone 02-2108-8030 Fax 02-2108-8031 www.softbase.co.kr Copyright 2010 SOFTBase Inc. All rights reserved 목차 1 장 : ActiveX

More information

Cookie Spoofing.hwp

Cookie Spoofing.hwp Cookie Spoofing&Sniffing By Maxoverpro[max]( 장상근) maxoverpro@empal.com http://www.maxoverpro.org 1. 서론 이문서는 Cookie Spoofing 과 Sniffing 에대해정석적인방법을이야기하도록하며또 한어느특정곳의취약점을설명하지않고직접제작한예제를가지고 Cookie Spoofing 과

More information

HTML5

HTML5 행맨 류관희 충북대학교 2 3 4 5 사전준비 단어목록읽기 단어빈칸보여주기 인터페이스를통해알파벳선택하면알파벳사라지기 단어에선택한알파벳이있으면표시하기 없으면선이나타원으로사람형태그리기 게임종료조건 : 모든맞추는경우 모두틀린경우 ( 행맨 ) 6 단어목록배열에저장 words.js var words = [ "muon", "blight","kerfuffle","qat"

More information

슬라이드 1

슬라이드 1 웹접근성향상을위한 UI 개발표준화가이드 UI 개발팀최재성, 유순 웹접근성향상을위한 UI 개발표준화가이드 intro 웹접근성? IWA TFT 웹접근성준수실태 웹접근성? 웹표준? 웹사용성? 기대효과 웹접근성향상을위한가이드라인 웹표준화실무적용방법 웹접근성실무적용방법 웹사용성실무적용방법 앞으로 준수의당위성 IWA TFT (Improve Web Accessibility

More information

PowerPoint Presentation

PowerPoint Presentation public class SumTest { public static void main(string a1[]) { int a, b, sum; a = Integer.parseInt(a1[0]); b = Integer.parseInt(a1[1]); sum = a + b ; // 두수를더하는부분입니다 System.out.println(" 두수의합은 " + sum +

More information

2009년 상반기 사업계획

2009년 상반기 사업계획 웹 (WWW) 쉽게배우는데이터통신과컴퓨터네트워크 학습목표 웹서비스를위한클라이언트 - 서버구조를살펴본다. 웹서비스를지원하는 APM(Apache, PHP, MySQL) 의연동방식을이해한다. HTML 이지원하는기본태그명령어와프레임구조를이해한다. HTTP 의요청 / 응답메시지의구조와동작원리를이해한다. CGI 의원리를이해하고 FORM 태그로사용자입력을처리하는방식을알아본다.

More information

3장

3장 C H A P T E R 03 CHAPTER 03 03-01 03-01-01 Win m1 f1 e4 e5 e6 o8 Mac m1 f1 s1.2 o8 Linux m1 f1 k3 o8 AJAX

More information

Prototype에서 jQuery로 옮겨타기

Prototype에서 jQuery로 옮겨타기 Created by Firejune at 2008/11/10, Last modified 2016/09/11 Prototype에서 jquery로 옮겨타기 jquery는 겸손한(unobtrusive) 자바스크립트를 위한 자바스크립트 라이브러리다. jquery는 태생적으로 BDD(Behavior driven development) 방법론을 지향하고 CSS 셀렉터를

More information

<4D F736F F F696E74202D20C1A63236C0E520BED6C7C3B8B428B0ADC0C729205BC8A3C8AF20B8F0B5E55D>

<4D F736F F F696E74202D20C1A63236C0E520BED6C7C3B8B428B0ADC0C729205BC8A3C8AF20B8F0B5E55D> Power Java 제 26 장애플릿 이번장에서학습할내용 애플릿소개 애플릿작성및소개 애플릿의생명주기 애플릿에서의그래픽컴포넌트의소개 Applet API의이용 웹브라우저상에서실행되는작은프로그램인애플릿에대하여학습합니다. 애플릿이란? 애플릿은웹페이지같은 HTML 문서안에내장되어실행되는자바프로그램이다. 애플릿을실행시키는두가지방법 1. 웹브라우저를이용하는방법 2. Appletviewer를이용하는방법

More information

세르게이의 HTML5&CSS3-내지_ indd

세르게이의 HTML5&CSS3-내지_ indd 찾아보기 기호및숫자 ::after 128 ::before 128 ::first-letter 112, 113, 128 ::first-line 128 ::first-of-type 127 :checked 126 :disabled 125 :empty 127 :enabled 119 :focus 125 :lang 126 :last-child 127 :link 125 :only-child

More information

PHP & ASP

PHP & ASP 단어장프로젝트 프로젝트2 단어장 select * from address where address like '% 경기도 %' td,li,input{font-size:9pt}

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 9. 자바스크립트객체 객체 객체 (object) 는사물의속성과동작을묶어서표현하는기법 ( 예 ) 자동차는메이커, 모델, 색상, 마력과같은속성도있고출발하기, 정지하기등의동작도가지고있다. 객체의종류 객체의 2 가지종류 내장객체 (bulit-in object): 생성자가미리작성되어있다. 사용자정의객체 (custom object): 사용자가생성자를정의한다.

More information

Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 11 년 10 월 26 일수요일

Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 11 년 10 월 26 일수요일 Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 Introduce Me!!! Job Jeju National University Student Ubuntu Korean Jeju Community Owner E-Mail: ned3y2k@hanmail.net Blog: http://ned3y2k.wo.tc Facebook: http://www.facebook.com/gyeongdae

More information

그래픽 프로그래밍

그래픽 프로그래밍 제 13 장그래픽프로그래밍 13.1 베지어곡선 실습 13-1 알고리즘을통한베지어곡선그리기 실습 13-2 컨트롤포인트이동및베지어곡선 해상도설정하기 그래픽프로그래밍 베지어곡선 베지어곡선알고리즘은곡선을생성하는대표적이고기본이되는알고리즘이다. MFC 에서의베지어곡선함수 BOOL PolyBezier(const POINT* lppoints, int ncount); lppoints

More information

슬라이드 1

슬라이드 1 핚국산업기술대학교 제 14 강 GUI (III) 이대현교수 학습안내 학습목표 CEGUI 라이브러리를이용하여, 게임메뉴 UI 를구현해본다. 학습내용 CEGUI 레이아웃의로딩및렌더링. OIS 와 CEGUI 의연결. CEGUI 위젯과이벤트의연동. UI 구현 : 하드코딩방식 C++ 코드를이용하여, 코드내에서직접위젯들을생성및설정 CEGUI::PushButton* resumebutton

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 HTML5 웹프로그래밍입문 11 장. 캔버스 목차 11.1 캔버스이해하기 11.2 캔버스기본 API 사용하기 11.3 캔버스고급기능사용하기 2 11.1 캔버스이해하기 11.1.1 캔버스의특징 11.1.2 캔버스시작하기 3 HTML5 캔버스 자바스크립트를이용해서웹문서상에그림그리는기능 HTML5 이전 직접이미지파일을 태그를이용해서문서상에포함 자바애플릿이용

More information

Microsoft PowerPoint 웹 연동 기술.pptx

Microsoft PowerPoint 웹 연동 기술.pptx 웹프로그래밍및실습 ( g & Practice) 문양세강원대학교 IT 대학컴퓨터과학전공 URL 분석 (1/2) URL (Uniform Resource Locator) 프로토콜, 호스트, 포트, 경로, 비밀번호, User 등의정보를포함 예. http://kim:3759@www.hostname.com:80/doc/index.html URL 을속성별로분리하고자할경우

More information

Microsoft PowerPoint 자바스크립트(1).pptx

Microsoft PowerPoint 자바스크립트(1).pptx 웹과인터넷활용및실습 () (Part I) 문양세강원대학교 IT 대학컴퓨터과학전공 강의내용 의기초의기본문법제어구조함수의내장객체브라우저내장객체를이용한다양한효과주기 Page 2 1 개요 사용자와상호작용하는동적웹문서작성웹에서사용할수있도록만들어진스크립트언어선마이크로시스템스와넷스케이프사가공동으로개발 주요특징 웹문서 (HTML 문서 ) 에포함되어웹서버에서브라우저로다운로드됨

More information

Microsoft PowerPoint - 4주차_Android_UI구현.ppt [호환 모드]

Microsoft PowerPoint - 4주차_Android_UI구현.ppt [호환 모드] Android UI 구현 학습목표 교육목표 Android application 구성요소 Activity Layout UI 설계 Linear Layout 구현 Android application 구성요소 (1) () Application 구성요소 AndroidManifest.xml Android application 구성요소 (2) 구성요소 기능 Activity

More information

Macaron Cooker Manual 1.0.key

Macaron Cooker Manual 1.0.key MACARON COOKER GUIDE BOOK Ver. 1.0 OVERVIEW APPLICATION OVERVIEW 1 5 2 3 4 6 1 2 3 4 5 6 1. SELECT LAYOUT TIP 2. Add Page / Delete Page 3. Import PDF 4. Image 5. Swipe 5-1. Swipe & Skip 5-2. Swipe & Rotate

More information