Microsoft PowerPoint - 제3장 JavaScript

Size: px
Start display at page:

Download "Microsoft PowerPoint - 제3장 JavaScript"

Transcription

1 웹프로그래밍 제 3 장 JavaScript

2 3. JavaScript 교재 p JavaScript 기초 3.2 JavaScript 기본문법 3.3 객체 3.4 이벤트 3.5 레이어활용 2

3 3.1 JavaScript 기초 교재 p.251 JavaScript 개요 JavaScript 기본구조 3

4 3.1.1 JavaScript 개요 교재 p.251 JavaScript 특징 브라우저에의해실행되는클라이언트사이드스크립트언어 명령어를사용하는 (imperative) 절차적 (procedural) 언어로구조적프로그래밍 (structured programming) 가능 4

5 3.1.1 JavaScript 개요 교재 p.252 JavaScript 특징 ( 계속 ) 객체 (object) 의정의와사용을지원하는객체기반 (object-based) 언어 실행시간에자료형을검사하는동적타이핑 (dynamic typing) 언어 동적인웹페이지와향상된사용자인터페이스를쉽게구현가능 5

6 3.1.2 JavaScript 기본구조 기본구조 <script> 태그를써서 HTML 페이지내에삽입 형식 1 : <script type = "text/javascript"> JavaScript_ 코드 </script> 교재 p.252 형식 2 : <script language = "JavaScript"> JavaScript_ 코드 </script> 6

7 3.1.2 JavaScript 기본구조 기본구조 교재 p.253 형식 3 : <script type = "text/javascript" src = "JavaScript 파일의 url"> JavaScript_ 코드 </script> 형식 4 : <script language = "JavaScript" src = "JavaScript 파일의 url"> JavaScript_ 코드 </script> 7

8 3.1.2 JavaScript 기본구조 예제 : first-example.html 교재 p : <body> 4 : HTML 페이지의출력내용입니다. 5 : <br> 6 : <script type="text/javascript"> 7 : document.write("<font color= red > JavaScript 의출력내용입니다. </font>"); 8 : </script> 9 : <br> 10 : HTML 페이지의출력부분으로돌아왔습니다. 11 : </body> 8

9 3.1.2 JavaScript 기본구조 실행결과 교재 p.254 9

10 3.2 JavaScript 기본문법 자료형및변수 교재 p.255 연산자 문장 함수 10

11 3.2.1 자료형및변수 교재 p.255 자료형 변수를선언할때자료형 (data type) 을지정하지않으며, 각변수의자료형은값이배정될때결정 [ 표 3.1] JavaScript 의자료형 자료형정수 (integer) 실수 (float) 불리언 (boolean) 문자열 (string) 설명 10진수, 8진수 (0), 16진수 (0x) 형태의양수나음수부동소수점표현방식의실수논리값 true와 false를가짐따옴표 ( 또는 ) 사이에들어가는텍스트 11

12 3.2.1 자료형및변수 교재 p.255 변수 값 (value) 을저장하는이름이부여된기억장소 키워드 (keyword) var 을사용하여선언 12

13 3.2.1 자료형및변수 교재 p.256 변수 ( 계속 ) 변수선언 형식 : var 변수 _ 선언 _ 리스트 ; 선언예 변수 _ 선언 : 변수 _ 이름 [= 값 ] 선언예 : var a; var b, c; var d = 1; 13

14 3.2.1 자료형및변수 교재 p.257 예제 : variable.html 4 : <script type="text/javascript"> 5 : var a, b; 6 : var c = 10; 7 : a = 5; 8 : b = c; 10 : document.write(" 변수 a 의값은 : " + a + " 이다." + "<br>"); 11 : document.write(" 변수 b 의값은 : " + b + " 이다." + "<br>"); 12 : document.write(" 변수 c 의값은 : " + c + " 이다." + "<br>"); 13 : </script> 14

15 3.2.1 자료형및변수 교재 p.257 실행결과 15

16 3.2.1 자료형및변수 교재 p.258 변수의사용범위 지역변수 (local variable) 전역변수 (global variable) [ 표 3.3] 지역변수와전역변수 구분 설명 지역변수 함수내부에서 var 로선언한변수, 변수를선언한함수내부에서만사용가능 전역변수 함수내부에서선언되지않은변수, 또는함수내부에서 var 로선언하지않은변수, 페이지의어디에서나사용가능 16

17 3.2.1 자료형및변수 교재 p.258 예제 : variable-scope.html 4 : <script type="text/javascript"> 5 : 6 : var a = 2; 7 : b = 7; 8 : 9 : function add() { 10 : var a = 4; 11 : c = 6; 12 : 13 : document.write("a+b+c 의값은 : " + (a + b + c) + " 이다." + "<br>"); 14 : } 15 : 16 : add(); 17 : document.write("a+b+c 의값은 : " + (a + b + c) + " 이다." + "<br>"); 18 : 19 : </script> 17

18 3.2.1 자료형및변수 교재 p.259 실행결과 18

19 3.2.2 연산자 교재 p.260 산술연산자 산술연산 사용예 : a + b a b a * b a / b a % b 19

20 3.2.2 연산자 교재 p.260 증감연산자 ++, -- 기호를변수앞이나뒤에붙임 변수값을 1 씩증가또는감소 사용예 : ++a a++ --a a-- 20

21 3.2.2 연산자 교재 p.261 관계연산자 값의대소관계를판단 참 (true) 또는거짓 (false) 을구함 사용예 : a > b a >= b a < b a <= b a == b a === b a!== b a!= b 21

22 3.2.2 연산자 교재 p.262 논리연산자 참 (true) 또는거짓 (false) 을구함 사용예 : a && b a b! a a > b && c == d a > 7 b <=

23 3.2.2 연산자 교재 p.262 문자열연산자 두개의문자열들을연결하여하나의문자열생성 연산자로 + 기호사용 사용예 : a + b 23

24 3.2.2 연산자 교재 p.263 배정연산자 변수에값저장 할당연산자또는대입연산자 사용예 : a = 1 a = b a += b a -= b a *= b a /= b a %= b 24

25 3.2.2 연산자 교재 p.263 조건연산자 논리식의결과에따라참이면식 1 을, 거짓이면식 2 를변수에배정 형식 : 변수 = 논리식? 식 1 : 식 2 ; 사용예 : x = a > b? b : c ; 25

26 3.2.2 연산자 교재 p.265 예제 : operator.html 4 : <script type="text/javascript"> 5 : var a, b, x, y; 6 : a = 7; 7 : b = 3; 8 : c = true; 9 : d = false; 10 : e = "hybrid"; 11 : f = "car"; 13 : document.write("<b> 산술연산 </b> <br><br>"); 14 : document.write(a + " + " + b + " = " + (a + b) + "<br>"); 15 : document.write(a + " * " + b + " = " + (a * b) + "<br>"); 16 : document.write(a + " / " + b + " = " + (a / b) + "<br>"); 17 : document.write(a + " % " + b + " = " + (a % b) + "<br>"); 26

27 3.2.2 연산자 교재 p.265 예제 : operator.html( 계속 ) 19 : document.write("<br> <b> 관계연산 </b> <br><br>"); 20 : document.write(a + " > " + b + " => " + (a > b) + "<br>"); 21 : document.write(a + " < " + b + " => " + (a < b) + "<br>"); 22 : document.write(a + " == " + b + " => " + (a == b) + "<br>"); 23 : 24 : document.write("<br> <b> 논리연산 </b> <br><br>"); 25 : document.write(c + " && " + d + " => " + (c && d) + "<br>"); 26 : document.write(c + " " + d + " => " + (c d) + "<br>"); 27 : document.write("!" + c + " => " + (!c) + "<br>"); 28 : 29 : document.write("<br> <b> 문자열연산 </b> <br><br>"); 30 : document.write(e + "+" + f + " => " + (e + f) + "<br>"); 31 : </script> 27

28 3.2.2 연산자 교재 p.266 실행결과 28

29 3.2.3 문장 교재 p.266 조건문 반복문 29

30 조건문 교재 p.267 if 문 형식 : (a) if 문 (b) if-else 문 (c) if-else if-else 문 if( 조건식 1) if( 조건식 1) if( 조건식 1) { { { 문장 _ 리스트 1 문장 _ 리스트 1 문장 _ 리스트 1 } } } else else if( 조건식 2) { { 문장 _ 리스트 2 문장 _ 리스트 2 } } else { 문장 _ 리스트 3 } 30

31 조건문 교재 p.268 if 문순서도 (a) if 문 (b) if-else 문 (c) if-else if-else 문 31

32 조건문 교재 p.268 예제 : if.html 4 : <script type="text/javascript"> 5 : var a, b, c; 6 : a = 10; 7 : b = 20; 9 : document.write("<b> 두수 : " + a + ", " + b + "</b> <br><br>"); 10 : document.write("<b> 큰수에서작은수빼기 </b> <br><br>"); 11 : 12 : if(a >= b) 13 : { 14 : c = a-b; 15 : document.write(a + " - " + b + " = " + c + "<br>"); 16 : } 17 : else 18 : { 19 : c = b-a; 20 : document.write(b+ " - " + a + " = " + c + "<br>"); 21 : } 22 : </script> 32

33 조건문 교재 p.269 실행결과 33

34 조건문 교재 p.270 switch 문 형식 : switch ( 식 ) { case 값 1 : 문장 _ 리스트 1 break; case 값 2 : 문장 _ 리스트 2 break; case 값 n : 문장 _ 리스트 n break; [ default : 문장 _ 리스트 n+1 ] } 34

35 조건문 교재 p.270 switch 문순서도 35

36 조건문 교재 p.271 예제 : switch.html 4 : <script type="text/javascript"> 5 : 6 : var rainbow = 3; 8 : switch(rainbow){ 9 : case 1 : 10 : document.write(" 무지개색깔중, Red 입니다."); break; 11 : case 2 : 12 : document.write(" 무지개색깔중, Orange 입니다."); break; 13 : case 3 : 14 : document.write(" 무지개색깔중, Yellow 입니다."); break; 15 : case 4 : 16 : document.write(" 무지개색깔중, Green 입니다."); break; 17 : case 5 : 18 : document.write(" 무지개색깔중, Blue 입니다."); break; 19 : case 6 : 20 : document.write(" 무지개색깔중, Dark Blue 입니다."); break; 21 : default : 22 : document.write(" 무지개색깔중, Violet 입니다."); 23 : } 24 : </script> 36

37 조건문 교재 p.272 실행결과 37

38 반복문 교재 p.272 for 문 형식 : for( 초기화식 ; 조건식 ; 증감식 ) { 문장 _ 리스트 } 38

39 반복문 교재 p.273 for 문순서도 39

40 반복문 교재 p.274 예제 : for.html 4 : <script type="text/javascript"> 5 : var i, dan; 6 : dan = 5; 7 : 8 : document.write("<b> 구구단 </b> <br>"); 9 : document.write("<b> [" + dan + " 단 ] </b> <br><br>"); 10 : 11 : for(i = 1; i <= 9; i++) 12 : document.write(dan + " * " + i + " = " + dan * i + "<br>"); 13 : 14 : document.write("<br><br>"); 15 : </script> 40

41 반복문 교재 p.274 실행결과 41

42 반복문 교재 p.275 for-in 문 형식 : for ( [var] 변수 in { 객체 배열 }) { 문장 _ 리스트 } 42

43 반복문 교재 p.275 예제 : for-in.html 4 : <script type="text/javascript"> 5 : 6 : var a = new Array(" 사과 ", " 바나나 ", " 파인애플 "); 7 : var b = " "; 8 : 9 : for (var key in a) { 10 : b += " 인덱스 " + key + " 의값은 : " + a[key]; 11 : b += "<br>"; 12 : } 13 : 14 : document.write(b); 15 : </script> 43

44 반복문 교재 p.276 실행결과 44

45 반복문 교재 p.276 while 문 형식 : while ( 조건식 ) { 문장 _ 리스트증감식 ; } 45

46 반복문 교재 p.277 while 문순서도 46

47 반복문 교재 p.278 예제 : while.html 4 : <script type="text/javascript"> 5 : var i; 6 : i = 1; 7 : 8 : while(i <= 7) 9 : { 10 : document.write("<font size=" + i + "> 안녕하세요! </font><br>"); 11 : i++; 12 : } 13 : </script> 47

48 반복문 교재 p.278 실행결과 48

49 반복문 교재 p.279 do while 문 형식 : do { 문장 _ 리스트증감식 ; } while ( 조건식 ); 49

50 반복문 교재 p.279 do while 문순서도 50

51 반복문 교재 p.280 예제 : do-while.html 4 : <script type="text/javascript"> 5 : 6 : var i = 1; 7 : document.write("1~20 까지의짝수만출력한결과는?" + "<br>"+ "<br>"); 8 : 9 : do{ 10 : if(i % 2 == 0) 11 : document.write(i + "<br>"); 12 : 13 : i = i + 1; 14 : 15 : } while (i <= 20); 16 : 17 : document.write("<hr>"); 19 : </script> 51

52 반복문 교재 p.281 실행결과 52

53 3.2.4 함수 교재 p.281 내장함수 사용자정의함수 재귀함수 53

54 내장함수 교재 p.281 경고대화상자 : alert() 확인대화상자 : confirm() 프롬프트대화상자 : prompt() 수식계산 : eval(), parseint(), parsefloat() 54

55 내장함수 교재 p.282 경고대화상자 : alert() 형식 : alert(" 문자열 ) alert( 변수 ) 예제 : alert.html 4 : <script type="text/javascript"> 5 : alert(" 반갑습니다.\n 저의홈페이지방문을환영합니다!"); 6 : </script> 55

56 내장함수 교재 p.283 실행결과 56

57 내장함수 교재 p.283 확인대화상자 : confirm() 형식 : confirm(" 문자열 ") confirm( 변수 ) 예제 : confirm.html 4 : <script type="text/javascript"> 5 : var result = confirm(" 어떤값이출력될까요???"); 6 : document.write(" 당신이선택한버튼의값은 "); 7 : document.write("<b>" + result + "</b> 입니다."); 8 : </script> 57

58 내장함수 교재 p.284 실행결과 58

59 내장함수 교재 p.285 프롬프트대화상자 : prompt() 형식 : prompt( 변수 1 또는 " 문자열 1", 변수 2 또는 " 문자열 2") 변수1 또는 문자열1 은프롬프트대화상자에표현될메시지설정 변수2 또는 문자열2 는입력필드부분에초기값으로보여주는값설정 59

60 내장함수 교재 p.285 예제 : prompt.html 4 : <script type="text/javascript"> 5 : var input = prompt(" 당신은누구십니까?", " 이름을입력해주세요 "); 6 : document.write("<br>"); 7 : document.write("<b>" + input + "</b>"); 8 : document.write(" 님의방문을진심으로환영합니다."); 9 : </script> 60

61 내장함수 교재 p.286 실행결과 61

62 내장함수 교재 p.287 수식계산 : eval(), parseint(), parsefloat() 형식 : - eval( 문자열 또는변수 ) - parseint( 문자열 또는변수 - parseint( 문자열 또는변수, 진법 ) - parsefloat( 문자열 또는변수 ) 62

63 내장함수 교재 p.287 예제 : eval.html 5 : <script type="text/javascript"> 6 : var input = prompt(" 수식을입력하세요!"); 7 : document.write(" 수식 : " + input + " =<font color= red >" + eval(input) + "</font><br>"); 8 : 9 : var a = prompt(" 첫번째수를입력하세요!"); 10 : var b = prompt(" 두번째수를입력하세요!"); 11 : var c = a + b; 12 : var d = parseint(a) + parseint(b); 13 : 14 : document.write(" 수식 : " + a + "+" + b + " =<font color= red >" + c + "</font><br>"); 15 : document.write(" 수식 : " + a + "+" + b + " =<font color= red >" + d + "</font>"); 16 : </script> 63

64 내장함수 교재 p.288 실행결과 64

65 사용자정의함수 사용자정의함수 교재 p.289 형식 : function 함수명 ( [ 매개변수 _ 리스트 ] ) { 문장 _ 리스트 [ return 식또는변수또는값 ] } 65

66 사용자정의함수 예제 : function-return.html ( 결과값을반환하는경우 ) 함수선언부 4 : <script type="text/javascript"> 5 : function sum(x, y) 6 : { 7 : var z = x + y; 8 : return(z); 9 : } 10 : </script> 교재 p

67 사용자정의함수 예제 : function-return.html ( 결과값을반환하는경우 ) 함수호출부 교재 p : <script type="text/javascript"> 15 : var a = 10; 16 : var b = 20; 17 : var result = sum(a, b); 18 : document.writeln(a + " + " + b + " = " + result); 19 : </script> 67

68 사용자정의함수 실행결과 교재 p

69 사용자정의함수 예제 : function-alert.html ( 결과값을반환하지않는경우 ) 함수선언부 교재 p : <script type="text/javascript"> 5 : function who(name) { 6 : alert(" 안녕하세요. 저는 " + name + " 입니다."); 7 : } 8 : </script> 69

70 사용자정의함수 예제 : function-alert.html ( 결과값을반환하지않는경우 ) 함수호출부 12 : <script type="text/javascript"> 13 : var input = prompt(" 이름을입력하세요!"); 14 : who(input); 15 : </script> 교재 p

71 사용자정의함수 실행결과 교재 p

72 재귀함수 교재 p.292 재귀함수 재귀호출 (recursive call) 문장을포함하고있는함수 72

73 재귀함수 교재 p.293 예제 : function-recursion.html 함수선언부 3 : <script type="text/javascript"> 4 : function sum(n) { 5 : if(n <= 1) 6 : return 1; 7 : return n + sum(n - 1); 8 : } 9 : </script> 73

74 재귀함수 교재 p.293 예제 : function-recursion.html( 계속 ) 함수호출부 13 : <script type="text/javascript"> 14 : var number = parseint(prompt("1 부터몇까지의합을구할까요?")); 15 : document.write("1 부터 " + number + " 까지의합은 : " + sum(number) + " 입니다."); 16 : </script> 74

75 재귀함수 교재 p.293 실행결과 75

76 3.3 객체 교재 p.294 내장객체 브라우저객체 HTML DOM 객체 사용자정의객체 76

77 3.3.1 내장객체 교재 p.294 Array 객체 Boolean 객체 Date 객체 Math 객체 Number 객체 String 객체 77

78 3.3.1 내장객체 교재 p.295 Array 객체 배열생성 [ 표 3.7] Array 객체의주요속성과메소드 구분이름설명 속성 length 배열의길이 메소드 join( 분리자 ) 배열의원소들사이에분리자삽입하여하나의문자열로 합침 ( 분리자지정가능하며기본은쉼표 (,)) concat( 배열 1, 배열 2,... 배열 n) 다수의배열들을순서대로합하여하나의배열생성 78

79 3.3.1 내장객체 교재 p.296 예제 : array.html 4 : <script type="text/javascript"> 5 : var title = new Array(3); 6 : title[0] = "W"; 7 : title[1] = "e"; 8 : title[2] = "b"; 9 : 10 : var title2 = title.join("."); 11 : var title3 = new Array(" Programming"); 12 : var title4 = title2.concat(title3); 13 : 14 : document.write(" 첫번째책제목은 "); 15 : 16 : for(i = 0; i < title.length ; i++) { 17 : document.write(title[i]); 18 : } 19 : 20 : document.write(" 입니다." + "<br>" + " 두번째책제목은 "); 21 : document.write(title4 + " 입니다."); 22 : </script> 79

80 3.3.1 내장객체 교재 p.297 실행결과 80

81 3.3.1 내장객체 교재 p.297 Boolean 객체 논리값을저장하고문자열로변환 [ 표 3.8] Boolean 객체의주요메소드 구분이름설명 메소드 valueof() tostring() 객체의원시값을반환 불리언값을문자열로변환하고그결과값을반환 81

82 3.3.1 내장객체 교재 p.297 예제 : boolean.html 4 : <script type="text/javascript"> 5 : var bool1 = new Boolean(true); 6 : document.write("(1) true 값입력시, " + bool1.tostring() + " 출력 "+ "<br>"); 7 : 8 : var bool2 = new Boolean(false); 9 : document.write("(2) false 값입력시, " + bool2.tostring() + " 출력 " + "<br>"); 10 : 11 : var bool3 = new Boolean(1); 12 : document.write("(3) 값 1 을입력시, " + bool3.tostring() + " 출력 " + "<br>"); 13 : 14 : var bool4 = new Boolean(0); 15 : document.write("(4) 값 0 을입력시, " + bool4.tostring() + " 출력 " + "<br>"); 16 : </script> 82

83 3.3.1 내장객체 교재 p.298 실행결과 83

84 3.3.1 내장객체 교재 p.298 Date 객체 현재날짜와시각 [ 표 3.9] Date 객체의주요메소드 메소드 설명 getyear() 연도 getmonth() 월 (0=1 월, 1=2 월,, 11=12 월 ) getdate() 일 (1~31 까지의날짜 ) gethours() 시 (0~23 까지의시 ) getminutes() 분 (0~59 까지의분 ) getseconds() 초 (0~59 까지의초 ) 84

85 3.3.1 내장객체 교재 p.299 예제 : date.html 4: <script type="text/javascript"> 5: var day = new Date(); 6: document.write(" 오늘은 <b>" + day.getyear() + "</b> 년 <b>" + (day.getmonth() + 1) + "</b> 월 <b>" + day.getdate() + "</b> 일입니다.<br>"); 7: document.write(" 현재시각은 <b>" + day.gethours() + "</b> 시 <b>" + day.getminutes() + "</b> 분 <b> " + day.getseconds() + "</b> 초입니다.<br>"); 8: </script> 85

86 3.3.1 내장객체 교재 p.300 실행결과 86

87 3.3.1 내장객체 교재 p.301 Math 객체 수학계산 [ 표 3.10] Math 객체의주요속성과메소드 구분 이름 설명 속성 PI π ( 약 ) SQRT 2 ( 약 ) 메소드 max(n1, n2,, nk) min(n1, n2,, nk) abs(n) random() pow(a, b) exp(n) sqrt(n) 가장큰값가장작은값 n의절대값 0에서 1사이의난수 (random number) a b e n n 의제곱근 log(n) n 의자연로그값 87

88 3.3.1 내장객체 교재 p.302 예제 : math.html 원의넓이와둘레를정의한함수 4 : <script type="text/javascript"> 5 : function calculate(r) { 6 : oval.result1.value= r * r * Math.PI; 7 : oval.result2.value= 2 * r * Math.PI; 8 : } 9 : </script> 88

89 3.3.1 내장객체 교재 p.302 예제 : math.html( 계속 ) 원의넓이와둘레의결과값출력 12 : <form name="oval"> 13 : 반지름 <input type="text" name="radius" size="10"> 14 : <input type="button" value=" 확인 " onclick="calculate(radius.value)"><br> 15 : 원의넓이 <input type="text" name="result1" size="10"><br> 16 : 원의둘레 <input type="text" name="result2" size="10"> 17 : </form> 89

90 3.3.1 내장객체 교재 p.302 실행결과 90

91 3.3.1 내장객체 교재 p.303 Number 객체 문자열로표현된수를실제수로변환시켜주는객체 [ 표 3.11] Number 객체의주요속성과메소드 구분이름설명 속성 메소드 MAX_value MIN_value valueof() tostring([ 진법 ]) 표현할수있는최대값표현할수있는최소값객체의원시값을반환진법의문자열로변환, 진법은 2~36 사이의값이며생략하면 10 91

92 3.3.1 내장객체 교재 p.303 예제 : number.html 4 : <script type="text/javascript"> 5 : var a = "10", b = "20"; 6 : var c = "JavaScript"; 7 : 8 : document.write("a + b = " + (a + b) + "<br>"); 9 : document.write("number(a) + Number(b) = " + (Number(a) + Number(b)) + "<br>"); 10 : document.write("number(c) = " + Number(c) + "<br>"); 11 : </script> 92

93 3.3.1 내장객체 교재 p.304 실행결과 93

94 3.3.1 내장객체 교재 p.304 String 객체 문자열처리 [ 표 3.12] String 객체의주요속성과메소드 구분이름설명 속성 length 문자열길이 메소드 concat( 문자열1, 문자열2,,,, 문자열n ) search( 스트링 ) match( 정규식 ) replace( 문자열1, 문자열2 ) tolowercase() touppercase() 두개이상의문자열을연결 ( 매개변수는문자열또는문자열변수 ) 스트링을검색하여인덱스반환, 없으면 -1 반환정규식 (regular expression) 과일치하는문자열검색하여배열로반환, 없으면 null 반환문자열1을문자열2로대체소문자로변환대문자로변환 94

95 3.3.1 내장객체 교재 p.305 String 객체 ( 계속 ) [ 표 3.13] HTML 래퍼메소드 메소드 설명 fontcolor( 색상 ) fontsize( 크기 ) big() bold() italics() fixed() strike() sup() sub() 글자색글자크기글자를좀더크게글자를굵게이탤릭체타자기체취소선윗첨자아래첨자 95

96 3.3.1 내장객체 교재 p.306 예제 : string.html 4 : <script type="text/javascript"> 5 : document.write(" 굵은체 ".bold()); 6 : document.write(" 이탤릭체 ".italics()); 7 : document.write(" 타자기체 ".fixed() + "<br><br>"); 8 : 9 : document.write(" 현재에 " + " 위첨자 ".fontcolor("red").sup() + "<br><br>"); 10 : document.write(" 현재에 " + " 아래첨자 ".sub() + "<br><br>"); 11 : 12 : document.write("font SIZE 7 ".fontsize(7) + "<br>"); 13 : document.write(" 취소선 ".strike() + "<br><br>"); 14 : 15 : document.write(" 파랗고크게 ".big().fontcolor("blue") + "<br><br>"); 16 : document.write(" 이탤릭체 & 강조 & 빨간색 ".italics().strike().fontcolor("red") + "<br><br>"); 17 : document.write(" 크기는 5 이면서볼드체로 ".fontsize(5).bold() + "<br>"); 18 : </script> 96

97 3.3.1 내장객체 교재 p.306 실행결과 97

98 3.3.2 브라우저객체 교재 p.306 브라우저객체 window 객체 history 객체 location 객체 navigator 객체 screen 객체 : 윈도우를다루기위한기능제공 : 방문했던페이지들에대한정보제공 : 현재브라우저에서보여주는페이지들의위치정보제공 : 브라우저에대한정보제공 : 방문자의스크린에대한정보제공 98

99 3.3.2 브라우저객체 교재 p.307 window 객체 브라우저에오픈된윈도우를다루는객체 [ 표 3.14] window 객체의주요속성 구분이름설명 속성 document history location navigator screen self parent top defaultstatus document 객체 history 객체 location 객체 navigator 객체 screen 객체현재윈도우부모윈도우최상위의윈도우상태표시줄에출력할기본문자열설정 status 상태표시줄에출력할문자열 99

100 3.3.2 브라우저객체 교재 p.308 window 객체 ( 계속 ) [ 표 3.14] window 객체의주요메소드 구분이름설명 메소드 alert( 메시지 ) confirm( 메시지 ) prompt( 메시지 [, 기본값 ]) createpopup([ url ]) open([ url ]) close() focus() blur() 경고대화상자에메시지생성확인대화상자에메시지생성프롬프트대화상자에메시지생성, 기본값은초기입력값 url의페이지팝업윈도우생성, url 생략하면빈윈도우생성 url의페이지열기, url 생략하면빈윈도우생성윈도우닫기윈도우에포커스설정윈도로부터포커스제거 100

101 3.3.2 브라우저객체 교재 p.308 예제 : window.html browser_status 함수정의 3 : <script type="text/javascript"> 4 : function browser_status() 5 : { 6 : window.status = " 상태표시줄의문자열이변경되었네요. ; 7 : } 8 : </script> 101

102 3.3.2 브라우저객체 교재 p.308 예제 : window.html 상태표시줄의메시지변경 10 : <body onload="window.defaultstatus=' 홈페이지방문을환영합니다.'"> 11 : <form> 12 : <h3> 확인버튼을누르면상태표시줄의문자열이변경됩니다.</h3> 13 : <input type="button" value=" 확인 " onclick="browser_status()"> <br> 14 : </form> 15 : </body> 102

103 3.3.2 브라우저객체 교재 p.309 실행결과 103

104 3.3.2 브라우저객체 교재 p.309 history 객체 사용자가방문한페이지의 url 들을히스토리목록 (history list) 에저장 [ 표 3.15] history 객체의주요속성과메소드 구분이름설명 속성 length 방문한페이지목록의 url 의개수 메소드 back() forward() 방문한페이지목록에서이전페이지로이동 방문한페이지목록에서다음페이지로이동 104

105 3.3.2 브라우저객체 교재 p.310 예제 : history.html history_back 함수, history_forward 함수정의 3 : <script language="javascript"> 4 : function history_back() 5 : { 6 : history.back(); 7 : } 8 : 9 : function history_forward() 10 : { 11 : history.forward(); 12 : } 13 : </script> 105

106 3.3.2 브라우저객체 교재 p.310 예제 : history.html( 계속 ) history_back 함수, history_forward 함수호출 16 : <form> 17 : <h3> 이전페이지로이동하기 </h3> 18 : <input type="button" value=" 이전으로이동 " onclick="history_back();"> <br> 19 : <h3> 다음페이지로이동하기 </h3> 20 : <input type="button" value=" 다음으로이동 " onclick="history_forward();"><br> 21 : </form> 106

107 3.3.2 브라우저객체 교재 p.311 실행결과 107

108 3.3.2 브라우저객체 교재 p.311 location 객체 현재페이지의 url 에대한정보를얻을수있음 [ 표 3.16] location 객체의주요속성과메소드 구분이름설명 속성 메소드 href pathname hostname port protocol reload() replace( url ) 전체 url 경로명호스트이름포트번호프로토콜현재페이지를다시로드현재페이지를특정 url의페이지로대체 108

109 3.3.2 브라우저객체 교재 p.312 예제 : location.html 5 : <form> 6 : <input type="button" value=" 이동 " 7 : onclick="location.replace(' 8 : </form> 109

110 3.3.2 브라우저객체 교재 p.312 실행결과 110

111 3.3.2 브라우저객체 교재 p.313 navigator 객체 브라우저에대한정보를얻을수있음 [ 표 3.17] navigator 객체의주요속성과메소드 구분이름설명 속성 appname appversion 브라우저의이름 브라우저의버전 메소드 javaenabled() 브라우저의 Java 지원여부 (true, false) 111

112 3.3.2 브라우저객체 교재 p.313 예제 : navigator.html 5 : <script type="text/javascript"> 6 : document.write(" 사용하는브라우저의이름은 " + navigator.appname + " 입니다." + "<br>" + "<br>"); 7 : document.write(" 사용하는브라우저의버전은 " + navigator.appversion + " 입니다." + "<br>"); 8 : </script> 112

113 3.3.2 브라우저객체 교재 p.314 실행결과 113

114 3.3.2 브라우저객체 교재 p.314 screen 객체 사용자의스크린에대한정보를저장하고있음 [ 표 3.18] screen 객체의주요속성 구분이름설명 속성 height width availheight availwidth pixeldepth colordepth 스크린의전체높이스크린의전체너비작업표시줄을제외한스크린의높이작업표시줄을제외한스크린의너비스크린의컬러해상도색상심도 (color depth) 의비트수 114

115 3.3.2 브라우저객체 교재 p.315 예제 : screen.html 4 : <script type="text/javascript"> 5 : document.write(" 스크린의너비는 " + screen.width + " 픽셀입니다." + "<br>") 6 : document.write(" 스크린의높이는 " + screen.height + " 픽셀입니다." + "<br>") 7 : document.write(" 스크린의컬러해상도는 " + screen.colordepth + " 비트입니다." + "<br>") 8 : </script> 115

116 3.3.2 브라우저객체 교재 p.315 실행결과 116

117 3.3.3 HTML DOM 객체 HTML DOM 객체 HTML 문서의요소 (element) 에접근하거나조작하기위해정의된객체 [ 표 3.19] 주요 HTML DOM 객체 교재 p.315 이름 설명 이름 설명 Document 문서객체처리 Input Text 텍스트입력필드처리 Elements 문서의요소처리 Input Button 입력버튼처리 Events 문서의요소에이벤트처리기등록 Input Checkbox 체크박스처리 Body body 요소처리 Input Password 패스워드필드처리 Image 이미지요소처리 Input Radio 라디오버튼처리 Table 테이블요소처리 Button 버튼요소처리 Form 폼요소처리 Textarea 텍스트영역요소처리 Frame/IFrame 프레임요소처리 Anchor 앵커객체처리 Frameset 프레임셋요소처리 Link 링크요소처리 117

118 3.3.3 HTML DOM 객체 document 객체 교재 p.316 브라우저에로드된 HTML 문서를다를수있음 [ 표 3.20] document 객체의주요속성과메소드 구분이름설명 속성 메소드 title lastmodified getelementsbyname( 이름 ) getelementsbyid( ID ) write( 문자열 ) writeln( 문자열 ) 문서의제목문서를마지막으로수정한날짜와시각지정된이름의모든요소들접근지정된 ID의처음요소에접근문자열출력문자열출력과줄바꿈 118

119 3.3.3 HTML DOM 객체 예제 : document.html document 속성사용및 url 함수정의 교재 p : <script type="text/javascript"> 4 : document.title = "document 객체사용예 "; 5 : document.write(" 현재문서의제목은 " + document.title + " 입니다." + "<br><br>"); 6 : 7 : document.write(" 현재문서를마지막으로수정한시각은 " + document.lastmodified + " 입니다." + "<br><br>"); 8 : 9 : function url(){ 10 : document.url = " 11 : } 12 : </script> 119

120 3.3.3 HTML DOM 객체 예제 : document.html( 계속 ) url 함수호출 교재 p : <body> 15 : <h3> W3C 웹페이지로이동하려면다음의확인버튼을누르세요. </h3> 16 : <input type="button" value=" 확인 " onclick="url()"><br> 17 : </body> 120

121 3.3.3 HTML DOM 객체 실행결과 교재 p

122 3.3.4 사용자정의객체 사용자정의객체 교재 p.319 객체생성메소드를이용하거나함수정의방법을활용하여생성 122

123 3.3.4 사용자정의객체 객체생성메소드이용 교재 p.319 형식 : var 객체 _ 이름 = new Object(); 객체 _ 이름. 속성 _ 이름 = 속성값 ; 사용예 : var student = new Object(); student.id = " ; student.name = " 김소연 ; student.dept = " 컴퓨터공학 ; 123

124 3.3.4 사용자정의객체 함수정의방법이용 [ 객체정의및생성예 1 : 매개변수가없는함수 ] 교재 p.320 사용예 : function student( ) { this.id; this.name; this.dept; } st = new student( ) ; 124

125 3.3.4 사용자정의객체 함수정의방법이용 ( 계속 ) [ 객체정의및생성예 2 : 매개변수가있는함수 ] 교재 p.320 사용예 : function student(identity, name, department) { this.id = identity; this.name = name; this.dept = department; } st = new student(" ", " 김소연 ", " 컴퓨터공학 ") ; 125

126 3.3.4 사용자정의객체 메소드정의 [ 메소드정의예 1 : 함수내부의메소드 ] 교재 p.321 사용예 : function student(identity, name, department) { this.id = identity; this.name = name; this.dept = department; } this.stinfo = function() { return " 이름은 " + this.name + " 이고, 학과는 " + this.dept + " 입니다."; }; st = new student(" ", " 김소연 ", " 컴퓨터공학 ") ; 126

127 3.3.4 사용자정의객체 메소드정의 [ 메소드정의예 2 : 함수외부의메소드 ] 교재 p.321 사용예 : function info() { document.writeln(" 학생정보 : 이름은 " + this.name + " 이고, 학과는 " + this.dept + " 입니다."); } function student(identity, name, department) { this.id = identity; this.name = name; this.dept = department; } this.stinfo = info ; st = new student(" ", " 김소연 ", " 컴퓨터공학 "); 127

128 3.3.4 사용자정의객체 예제 : user-object-method1.html student 함수정의 교재 p : <script type="text/javascript"> 5 : function student(identity, name, department) { 6 : this.id = identity; 7 : this.name = name; 8 : this.dept = department; 9 : 10 : this.stinfo = function() { return " 학생정보 : 이름은 " + this.name + " 이고, 학과는 " + this.dept + " 입니다."; }; 11 : } 12 : 13 : st = new student(" ", " 김소연 ", " 컴퓨터공학 "); 14 : </script> 128

129 3.3.4 사용자정의객체 예제 : user-object-method1.html 메소드를이용한학생정보출력 교재 p : <script type="text/javascript"> 19 : document.writeln(" 학번 : " + st.id + "<br>"); 20 : document.writeln(st.stinfo() + "<br>"); 21 : </script> 129

130 3.3.4 사용자정의객체 실행결과 교재 p

131 3.3.4 사용자정의객체 예제 : user-object-method2.html student 함수정의 교재 p : <script type="text/javascript"> 5 : function info() { 6 : document.writeln(" 학생정보 : 이름은 " + this.name + " 이고, 학과는 " + this.dept + " 입니다."); 7 : } 8 : 9 : function student(identity, name, department) { 10 : this.id = identity; 11 : this.name = name; 12 : this.dept = department; 13 : 14 : this.stinfo = info; 15 : } 16 : 17 : st = new student(" ", " 김소연 ", " 컴퓨터공학 "); 131

132 3.3.4 사용자정의객체 예제 : user-object-method2.html 메소드를이용한학생정보출력 교재 p : <script type="text/javascript"> 23 : document.writeln(" 학번 : " + st.id + "<br>"); 24 : document.writeln(st.stinfo() + "<br>"); 25 : </script> 132

133 3.3.4 사용자정의객체 실행결과 교재 p

134 3.4 이벤트 교재 p.324 JavaScript 이벤트 (event) 에의해실행되는언어 이벤트처리기 이벤트가발생할경우이를처리 이벤트의이름앞에 'on' 이라는접두어를붙여서사용 134

135 3.4 이벤트 교재 p.326 마우스의동작과관련된이벤트처리기를이용한예 마우스이벤트처리기의기능 (1) onmouseover : 특정한요소에마우스포인터가위치할때 사용예 : <a href = "url" onmouseover = " 마우스포인터가링크영역에위치할때실행되는함수 "> 링크텍스트또는링크이미지 </a> 135

136 3.4 이벤트 교재 p.326 마우스이벤트처리기의기능 (2) onmouseout : 특정한요소로부터마우스포인터가벗어날때 사용예 : <a href = "url" onmouseout = " 마우스포인터가링크영역에서벗어날때실행되는함수 "> 링크텍스트또는링크이미지 </a> 136

137 3.4 이벤트 교재 p.326 마우스의동작과관련된이벤트처리예 마우스포인터의위치에따라이미지를교체하여버튼이눌린것처럼보이도록하는기능구현 필요한이미지 up.jpg down.jpg 137

138 3.4 이벤트 교재 p.326 예제 : event.html 6 : <a href="#" onmouseover="document.images[0].src='down.jpg'" 7 : onmouseout="document.images[0].src='up.jpg'"> 8 : <img src="up.jpg" border="0"> 9 : </a><br><br> 138

139 3.4 이벤트 교재 p.327 실행결과 139

140 3.5 레이어활용 교재 p.328 레이어소개 140

141 3.5.1 레이어소개 교재 p.328 레이어 (Layer) 란? 레이어는층을의미 하나의웹페이지에여러개의레이어를만들어한레이어위에다른레이어를겹쳐쌓을수있음 레이어를보이거나감출수있음 레이어를옮기거나감추거나확대또는축소가능 동적인애니메이션을구현가능 141

142 3.5.1 레이어소개 교재 p.329 레이어정의 고유한 ID 이름을가져야하며, 여기에레이어위치와크기를속성값으로지정 형식 : <style> #ID 이름 {position : 속성값 (absolute, relative); 위치속성 (left, top) : 수 (pt, px, in, cm); 크기속성 (width, height) : 수 (pt, px, in, cm);} </style> 142

143 3.5.1 레이어소개 교재 p.329 레이어생성에필요한태그 <div> 와 <span> 태그사용 class 와 id 속성을추가하여원하는부분의스타일지정 형식 : <div id = "id 이름 "> <span class = " 클래스이름 "> 표현할내용 1 </span> 표현할내용 2 </div> 143

144 3.5.1 레이어소개 교재 p.330 예제 : layer.html 레이어정의 3 : <style> 4 : #layer1 { position:absolute; 5 : left:50; top:20; width:150; height: 100; 6 : background:green; z-index:1; } 7 : #layer2 { position:absolute; 8 : left:100; top:90; width:150; height: 100; 9 : background:yellow; z-index:2; } 10 :.white { background:white; } 11 : </style> 144

145 3.5.1 레이어소개 교재 p.330 예제 : layer.html 레이어사용 13 : <body> 14 : <div id="layer1"> 15 : <center><br><span class="white"> 초록색종이 </span></center> 16 : </div> 17 : <div id="layer2"> 18 : <center><br> 노랑색종이 </center> 19 : </div> 20 : </body> 145

146 3.5.1 레이어소개 교재 p.331 실행결과 146

147 3.5.1 레이어소개 교재 p.331 예제 : layer-position.html 레이어정의 3 : <style> 4 : #layer0 {position:absolute; left:40px; top:40px; 5 : color:yellow; font-weight:bold} 6 : #layer1 {position:absolute; left:400px; top:160px; 7 : color:yellow; font-weight:bold} 8 : #layer2 {position:relative; left:215px; top:-120px; 9 : color:yellow; font-weight:bold} 10 : </style> 147

148 3.5.1 레이어소개 교재 p.331 예제 : layer-position.html 레이어사용 12 : <body> 13 : <!-- 절대적위치지정 : 문서의좌측상단을기준점 (0,0) 으로 --> 14 : <div id = "layer0"><p> 압구정역 </p></div> 15 : <div id = "layer1"><p> 압구정로 </p></div> 16 : 17 : <p> <img src = "map.jpg" border = "3"> </p> 18 : 19 : <!-- 상대적위치지정 : 지도의왼쪽아래점을기준점 (0,0) 으로 --> 20 : <div id = "layer2"><p> 선릉로 </p></div> 21 : </body> 148

149 3.5.1 레이어소개 교재 p.332 실행결과 149

Javascript.pages

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

More information

PowerPoint Template

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

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

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

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

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

More information

Javascript

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

More information

PowerPoint Presentation

PowerPoint Presentation 객체지향프로그래밍 클래스, 객체, 메소드 ( 실습 ) 손시운 ssw5176@kangwon.ac.kr 예제 1. 필드만있는클래스 텔레비젼 2 예제 1. 필드만있는클래스 3 예제 2. 여러개의객체생성하기 4 5 예제 3. 메소드가추가된클래스 public class Television { int channel; // 채널번호 int volume; // 볼륨 boolean

More information

OCW_C언어 기초

OCW_C언어 기초 초보프로그래머를위한 C 언어기초 4 장 : 연산자 2012 년 이은주 학습목표 수식의개념과연산자및피연산자에대한학습 C 의알아보기 연산자의우선순위와결합방향에대하여알아보기 2 목차 연산자의기본개념 수식 연산자와피연산자 산술연산자 / 증감연산자 관계연산자 / 논리연산자 비트연산자 / 대입연산자연산자의우선순위와결합방향 조건연산자 / 형변환연산자 연산자의우선순위 연산자의결합방향

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

슬라이드 1

슬라이드 1 웹프로그래밍 HTML, 자바스크립트, ASP 를중심으로 제 5 장함수와객체 최황규, 하진영공저 목차 제 5 장함수와객체 5.1 함수 5.2 객체 2 5.1 함수 함수란특정동작을수행하는코드를의미함 함수를사용하면기능별로소스코드를구분하여사용할수있어재사용이용이함 사용자가직접정의할수있는사용자정의함수와자바스크립트에서기본적으로제공하는내장함수로나눌수있음 3 5.1.1 사용자정의함수

More information

Microsoft PowerPoint 세션.ppt

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

More information

JAVA 프로그래밍실습 실습 1) 실습목표 - 메소드개념이해하기 - 매개변수이해하기 - 새메소드만들기 - Math 클래스의기존메소드이용하기 ( ) 문제 - 직사각형모양의땅이있다. 이땅의둘레, 면적과대각

JAVA 프로그래밍실습 실습 1) 실습목표 - 메소드개념이해하기 - 매개변수이해하기 - 새메소드만들기 - Math 클래스의기존메소드이용하기 (   ) 문제 - 직사각형모양의땅이있다. 이땅의둘레, 면적과대각 JAVA 프로그래밍실습 실습 1) 실습목표 - 메소드개념이해하기 - 매개변수이해하기 - 새메소드만들기 - Math 클래스의기존메소드이용하기 ( http://java.sun.com/javase/6/docs/api ) 문제 - 직사각형모양의땅이있다. 이땅의둘레, 면적과대각선의길이를계산하는메소드들을작성하라. 직사각형의가로와세로의길이는주어진다. 대각선의길이는 Math클래스의적절한메소드를이용하여구하라.

More information

쉽게 풀어쓴 C 프로그래밍

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

More information

Microsoft PowerPoint - Java7.pptx

Microsoft PowerPoint - Java7.pptx HPC & OT Lab. 1 HPC & OT Lab. 2 실습 7 주차 Jin-Ho, Jang M.S. Hanyang Univ. HPC&OT Lab. jinhoyo@nate.com HPC & OT Lab. 3 Component Structure 객체 (object) 생성개념을이해한다. 외부클래스에대한접근방법을이해한다. 접근제어자 (public & private)

More information

Microsoft PowerPoint 자바-기본문법(Ch2).pptx

Microsoft PowerPoint 자바-기본문법(Ch2).pptx 자바기본문법 1. 기본사항 2. 자료형 3. 변수와상수 4. 연산자 1 주석 (Comments) 이해를돕기위한설명문 종류 // /* */ /** */ 활용예 javadoc HelloApplication.java 2 주석 (Comments) /* File name: HelloApplication.java Created by: Jung Created on: March

More information

< E20C6DFBFFEBEEE20C0DBBCBAC0BB20C0A7C7D12043BEF0BEEE20492E707074>

< E20C6DFBFFEBEEE20C0DBBCBAC0BB20C0A7C7D12043BEF0BEEE20492E707074> Chap #2 펌웨어작성을위한 C 언어 I http://www.smartdisplay.co.kr 강의계획 Chap1. 강의계획및디지털논리이론 Chap2. 펌웨어작성을위한 C 언어 I Chap3. 펌웨어작성을위한 C 언어 II Chap4. AT89S52 메모리구조 Chap5. SD-52 보드구성과코드메모리프로그래밍방법 Chap6. 어드레스디코딩 ( 매핑 ) 과어셈블리어코딩방법

More information

금오공대 컴퓨터공학전공 강의자료

금오공대 컴퓨터공학전공 강의자료 C 프로그래밍프로젝트 Chap 14. 포인터와함수에대한이해 2013.10.09. 오병우 컴퓨터공학과 14-1 함수의인자로배열전달 기본적인인자의전달방식 값의복사에의한전달 val 10 a 10 11 Department of Computer Engineering 2 14-1 함수의인자로배열전달 배열의함수인자전달방식 배열이름 ( 배열주소, 포인터 ) 에의한전달 #include

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

PowerPoint Presentation

PowerPoint Presentation Package Class 3 Heeseung Jo 목차 section 1 패키지개요와패키지의사용 section 2 java.lang 패키지의개요 section 3 Object 클래스 section 4 포장 (Wrapper) 클래스 section 5 문자열의개요 section 6 String 클래스 section 7 StringBuffer 클래스 section

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

11장 포인터

11장 포인터 누구나즐기는 C 언어콘서트 제 9 장포인터 이번장에서학습할내용 포인터이란? 변수의주소 포인터의선언 간접참조연산자 포인터연산 포인터와배열 포인터와함수 이번장에서는포인터의기초적인지식을학습한다. 포인터란? 포인터 (pointer): 주소를가지고있는변수 메모리의구조 변수는메모리에저장된다. 메모리는바이트단위로액세스된다. 첫번째바이트의주소는 0, 두번째바이트는 1, 변수와메모리

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

<4D F736F F F696E74202D20C1A63038C0E520C5ACB7A1BDBABFCD20B0B4C3BC4928B0ADC0C729205BC8A3C8AF20B8F0B5E55D>

<4D F736F F F696E74202D20C1A63038C0E520C5ACB7A1BDBABFCD20B0B4C3BC4928B0ADC0C729205BC8A3C8AF20B8F0B5E55D> Power Java 제 8 장클래스와객체 I 이번장에서학습할내용 클래스와객체 객체의일생직접 메소드클래스를 필드작성해 UML 봅시다. QUIZ 1. 객체는 속성과 동작을가지고있다. 2. 자동차가객체라면클래스는 설계도이다. 먼저앞장에서학습한클래스와객체의개념을복습해봅시다. 클래스의구성 클래스 (class) 는객체의설계도라할수있다. 클래스는필드와메소드로이루어진다.

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

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 - 3ÀÏ°_º¯¼ö¿Í »ó¼ö.ppt

Microsoft PowerPoint - 3ÀÏ°_º¯¼ö¿Í »ó¼ö.ppt 변수와상수 1 변수란무엇인가? 변수 : 정보 (data) 를저장하는컴퓨터내의특정위치 ( 임시저장공간 ) 메모리, register 메모리주소 101 번지 102 번지 변수의크기에따라 주로 byte 단위 메모리 2 기본적인변수형및변수의크기 변수의크기 해당컴퓨터에서는항상일정 컴퓨터마다다를수있음 short

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

5장. JSP와 Servlet 프로그래밍을 위한 기본 문법(완성-0421).hwp

5장. JSP와 Servlet 프로그래밍을 위한 기본 문법(완성-0421).hwp 1 0 1.7 6 5 'A ' '/ u 4 4 2 2 ' " JS P 프로그래밍 " A ', 'b ', ' 한 ', 9, \ u d 6 5 4 ' c h a r a = 'A '; 0 1 0 2 0 3 0 4 0 5 0 6 0 7 0 8 0 9 1 0 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 < % @ p a g e c o n te n

More information

쉽게 풀어쓴 C 프로그래밍

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

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

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

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

More information

4장.문장

4장.문장 문장 1 배정문 혼합문 제어문 조건문반복문분기문 표준입출력 입출력 형식화된출력 [2/33] ANSI C 언어와유사 문장의종류 [3/33] 값을변수에저장하는데사용 형태 : < 변수 > = < 식 > ; remainder = dividend % divisor; i = j = k = 0; x *= y; 형변환 광역화 (widening) 형변환 : 컴파일러에의해자동적으로변환

More information

PowerPoint Presentation

PowerPoint Presentation Package Class 1 Heeseung Jo 목차 section 1 패키지개요와패키지의사용 section 2 java.lang 패키지의개요 section 3 Object 클래스 section 4 포장 (Wrapper) 클래스 section 5 문자열의개요 section 6 String 클래스 section 7 StringBuffer 클래스 section

More information

<322EBCF8C8AF28BFACBDC0B9AEC1A6292E687770>

<322EBCF8C8AF28BFACBDC0B9AEC1A6292E687770> 연습문제해답 5 4 3 2 1 0 함수의반환값 =15 5 4 3 2 1 0 함수의반환값 =95 10 7 4 1-2 함수의반환값 =3 1 2 3 4 5 연습문제해답 1. C 언어에서의배열에대하여다음중맞는것은? (1) 3차원이상의배열은불가능하다. (2) 배열의이름은포인터와같은역할을한다. (3) 배열의인덱스는 1에서부터시작한다. (4) 선언한다음, 실행도중에배열의크기를변경하는것이가능하다.

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 System Software Experiment 1 Lecture 5 - Array Spring 2019 Hwansoo Han (hhan@skku.edu) Advanced Research on Compilers and Systems, ARCS LAB Sungkyunkwan University http://arcs.skku.edu/ 1 배열 (Array) 동일한타입의데이터가여러개저장되어있는저장장소

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 실습 1 배효철 th1g@nate.com 1 목차 조건문 반복문 System.out 구구단 모양만들기 Up & Down 2 조건문 조건문의종류 If, switch If 문 조건식결과따라중괄호 { 블록을실행할지여부결정할때사용 조건식 true 또는 false값을산출할수있는연산식 boolean 변수 조건식이 true이면블록실행하고 false 이면블록실행하지않음 3

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 Chapter 10 포인터 01 포인터의기본 02 인자전달방법 03 포인터와배열 04 포인터와문자열 변수의주소를저장하는포인터에대해알아본다. 함수의인자를값과주소로전달하는방법을알아본다. 포인터와배열의관계를알아본다. 포인터와문자열의관계를알아본다. 1.1 포인터선언 포인터선언방법 자료형 * 변수명 ; int * ptr; * 연산자가하나이면 1 차원포인터 1 차원포인터는일반변수의주소를값으로가짐

More information

쉽게 풀어쓴 C 프로그래밍

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

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 - ch07 - 포인터 pm0415

Microsoft PowerPoint - ch07 - 포인터 pm0415 2015-1 프로그래밍언어 7. 포인터 (Pointer), 동적메모리할당 2015 년 4 월 4 일 교수김영탁 영남대학교공과대학정보통신공학과 (Tel : +82-53-810-2497; Fax : +82-53-810-4742 http://antl.yu.ac.kr/; E-mail : ytkim@yu.ac.kr) Outline 포인터 (pointer) 란? 간접참조연산자

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 Chapter 08 함수 01 함수의개요 02 함수사용하기 03 함수와배열 04 재귀함수 함수의필요성을인식한다. 함수를정의, 선언, 호출하는방법을알아본다. 배열을함수의인자로전달하는방법과사용시장점을알아본다. 재귀호출로해결할수있는문제의특징과해결방법을알아본다. 1.1 함수의정의와기능 함수 (function) 특별한기능을수행하는것 여러가지함수의예 Page 4 1.2

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

chap 5: Trees

chap 5: Trees 5. Threaded Binary Tree 기본개념 n 개의노드를갖는이진트리에는 2n 개의링크가존재 2n 개의링크중에 n + 1 개의링크값은 null Null 링크를다른노드에대한포인터로대체 Threads Thread 의이용 ptr left_child = NULL 일경우, ptr left_child 를 ptr 의 inorder predecessor 를가리키도록변경

More information

윈도우즈프로그래밍(1)

윈도우즈프로그래밍(1) 제어문 (2) For~Next 문 윈도우즈프로그래밍 (1) ( 신흥대학교컴퓨터정보계열 ) 2/17 Contents 학습목표 프로그램에서주어진특정문장을부분을일정횟수만큼반복해서실행하는문장으로 For~Next 문등의구조를이해하고활용할수있다. 내용 For~Next 문 다중 For 문 3/17 제어문 - FOR 문 반복문 : 프로그램에서주어진특정문장들을일정한횟수만큼반복해서실행하는문장

More information

목차 포인터의개요 배열과포인터 포인터의구조 실무응용예제 C 2

목차 포인터의개요 배열과포인터 포인터의구조 실무응용예제 C 2 제 8 장. 포인터 목차 포인터의개요 배열과포인터 포인터의구조 실무응용예제 C 2 포인터의개요 포인터란? 주소를변수로다루기위한주소변수 메모리의기억공간을변수로써사용하는것 포인터변수란데이터변수가저장되는주소의값을 변수로취급하기위한변수 C 3 포인터의개요 포인터변수및초기화 * 변수데이터의데이터형과같은데이터형을포인터 변수의데이터형으로선언 일반변수와포인터변수를구별하기위해

More information

PHP & ASP

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

More information

슬라이드 1

슬라이드 1 UNIT 08 조건문과반복문 로봇 SW 교육원 2 기 학습목표 2 조건문을사용핛수있다. 반복문을사용핛수있다. 조건문 3 조건식의연산결과에따라프로그램의실행흐름을변경 조건문의구성 조건식 실행될문장 조건문의종류 if switch? : ( 삼항연산자 ) if 조건문 4 if 문의구성 조건식 true 또는 false(boolean 형 ) 의결과값을갖는수식 실행될문장

More information

Microsoft PowerPoint - additional01.ppt [호환 모드]

Microsoft PowerPoint - additional01.ppt [호환 모드] 1.C 기반의 C++ part 1 함수 오버로딩 (overloading) 디폴트매개변수 (default parameter) 인-라인함수 (in-line function) 이름공간 (namespace) Jong Hyuk Park 함수 Jong Hyuk Park 함수오버로딩 (overloading) 함수오버로딩 (function overloading) C++ 언어에서는같은이름을가진여러개의함수를정의가능

More information

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

(Microsoft PowerPoint - 6\300\345.ppt [\310\243\310\257 \270\360\265\345]) 제 6장자바스크립트 자바스크립트기본객체익히기 학습목표 객체와속성및메소드의예제를다룬다. date 객체를사용하여날자와시간을확인하고다양하게활용할수있다. string 객체의속성을숙지하여다양하게활용할수있다. array 객체사용법을숙지하여문자나그림등을배열로선언할수있다. function 객체를사용하여함수를정의할수있다. number 객체를사용하여문자로된숫자단어를숫자로바꿀수있다.

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

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

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

More information

Microsoft PowerPoint - chap06-1Array.ppt

Microsoft PowerPoint - chap06-1Array.ppt 2010-1 학기프로그래밍입문 (1) chapter 06-1 참고자료 배열 박종혁 Tel: 970-6702 Email: jhpark1@snut.ac.kr 한빛미디어 출처 : 뇌를자극하는 C프로그래밍, 한빛미디어 -1- 배열의선언과사용 같은형태의자료형이많이필요할때배열을사용하면효과적이다. 배열의선언 배열의사용 배열과반복문 배열의초기화 유연성있게배열다루기 한빛미디어

More information

Microsoft PowerPoint - 제11장 포인터

Microsoft PowerPoint - 제11장 포인터 쉽게풀어쓴 C 언어 Express 제 11 장포인터 이번장에서학습할내용 포인터이란? 변수의주소 포인터의선언 간접참조연산자 포인터연산 포인터와배열 포인터와함수 이번장에서는포인터의기초적인지식을학습한다. 포인터란? 포인터 (pointer): 주소를가지고있는변수 1003 1004 1005 영화관 1002 1006 1001 포인터 (pointer) 1007 메모리의구조

More information

쉽게

쉽게 Power Java 제 4 장자바프로그래밍기초 이번장에서학습할내용 자바프로그램에대한기초사항을학습 자세한내용들은추후에. Hello.java 프로그램 주석 주석 (comment): 프로그램에대한설명을적어넣은것 3 가지타입의주석 클래스 클래스 (class): 객체를만드는설계도 ( 추후에학습 ) 자바프로그램은클래스들로구성된다. 그림 4-1. 자바프로그램의구조 클래스정의

More information

Microsoft PowerPoint - 제11장 포인터(강의)

Microsoft PowerPoint - 제11장 포인터(강의) 쉽게풀어쓴 C 언어 Express 제 11 장포인터 이번장에서학습할내용 포인터이란? 변수의주소 포인터의선언 간접참조연산자 포인터연산 포인터와배열 포인터와함수 이번장에서는포인터의기초적인지식을학습한다. 포인터란? 포인터 (pointer): 주소를가지고있는변수 1003 1004 1005 영화관 1002 1006 1001 포인터 (pointer) 1007 메모리의구조

More information

PowerPoint 프레젠테이션

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

More information

Tcl의 문법

Tcl의 문법 월, 01/28/2008-20:50 admin 은 상당히 단순하고, 커맨드의 인자를 스페이스(공백)로 단락을 짓고 나열하는 정도입니다. command arg1 arg2 arg3... 한행에 여러개의 커맨드를 나열할때는, 세미콜론( ; )으로 구분을 짓습니다. command arg1 arg2 arg3... ; command arg1 arg2 arg3... 한행이

More information

HTML5

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

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

2009년 상반기 사업계획

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

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

Microsoft PowerPoint - chap05-제어문.pptx

Microsoft PowerPoint - chap05-제어문.pptx int num; printf( Please enter an integer: "); scanf("%d", &num); if ( num < 0 ) printf("is negative.\n"); printf("num = %d\n", num); 1 학습목표 제어문인,, 분기문에 대해 알아본다. 인 if와 switch의 사용 방법과 사용시 주의사항에 대해 알아본다.

More information

프로그래밍개론및실습 2015 년 2 학기프로그래밍개론및실습과목으로본내용은강의교재인생능출판사, 두근두근 C 언어수업, 천인국지음을발췌수정하였음

프로그래밍개론및실습 2015 년 2 학기프로그래밍개론및실습과목으로본내용은강의교재인생능출판사, 두근두근 C 언어수업, 천인국지음을발췌수정하였음 프로그래밍개론및실습 2015 년 2 학기프로그래밍개론및실습과목으로본내용은강의교재인생능출판사, 두근두근 C 언어수업, 천인국지음을발췌수정하였음 CHAPTER 9 둘중하나선택하기 관계연산자 두개의피연산자를비교하는연산자 결과값은참 (1) 아니면거짓 (0) x == y x 와 y 의값이같은지비교한다. 관계연산자 연산자 의미 x == y x와 y가같은가? x!= y

More information

Microsoft PowerPoint - chap06-2pointer.ppt

Microsoft PowerPoint - chap06-2pointer.ppt 2010-1 학기프로그래밍입문 (1) chapter 06-2 참고자료 포인터 박종혁 Tel: 970-6702 Email: jhpark1@snut.ac.kr 한빛미디어 출처 : 뇌를자극하는 C프로그래밍, 한빛미디어 -1- 포인터의정의와사용 변수를선언하는것은메모리에기억공간을할당하는것이며할당된이후에는변수명으로그기억공간을사용한다. 할당된기억공간을사용하는방법에는변수명외에메모리의실제주소값을사용하는것이다.

More information

e-비즈니스 전략 수립

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

More information

PowerPoint Presentation

PowerPoint Presentation 자바프로그래밍 1 배열 손시운 ssw5176@kangwon.ac.kr 배열이필요한이유 예를들어서학생이 10 명이있고성적의평균을계산한다고가정하자. 학생 이 10 명이므로 10 개의변수가필요하다. int s0, s1, s2, s3, s4, s5, s6, s7, s8, s9; 하지만만약학생이 100 명이라면어떻게해야하는가? int s0, s1, s2, s3, s4,

More information

JAVA PROGRAMMING 실습 02. 표준 입출력

JAVA PROGRAMMING 실습 02. 표준 입출력 # 메소드의구조자주반복하여사용하는내용에대해특정이름으로정의한묶음 반환형메소드이름 ( 매개변수 ) { 실행문장 1; : 실행문장 N; } 메소드의종류 Call By Name : 메서드의이름에의해호출되는메서드로특정매개변수없이실행 Call By Value : 메서드를이름으로호출할때특정매개변수를전달하여그값을기초로실행하는메서드 Call By Reference : 메서드호출시매개변수로사용되는값이특정위치를참조하는

More information

Javascript

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

More information

Microsoft PowerPoint - e pptx

Microsoft PowerPoint - e pptx Import/Export Data Using VBA Objectives Referencing Excel Cells in VBA Importing Data from Excel to VBA Using VBA to Modify Contents of Cells 새서브프로시저작성하기 프로시저실행하고결과확인하기 VBA 코드이해하기 Referencing Excel Cells

More information

목차 배열의개요 배열사용하기 다차원배열 배열을이용한문자열다루기 실무응용예제 C 2

목차 배열의개요 배열사용하기 다차원배열 배열을이용한문자열다루기 실무응용예제 C 2 제 7 장. 배열 목차 배열의개요 배열사용하기 다차원배열 배열을이용한문자열다루기 실무응용예제 C 2 배열의개요 배열 (array) 의정의 같은데이터형을가지는여러개의변수를하나의배열명으로공유 기억공간을순차적으로할당받아사용하는것 [ 7.1] C 3 배열의개요 배열 (array) 의필요성 같은데이터형의여러개의변수간결하게선언 기억공간을순차적으로변수의값들을저장, 관리

More information

Microsoft PowerPoint - chap04-연산자.pptx

Microsoft PowerPoint - chap04-연산자.pptx int num; printf( Please enter an integer: "); scanf("%d", &num); if ( num < 0 ) printf("is negative.\n"); printf("num = %d\n", num); } 1 학습목표 수식의 개념과 연산자, 피연산자에 대해서 알아본다. C의 를 알아본다. 연산자의 우선 순위와 결합 방향에

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

슬라이드 1

슬라이드 1 UNIT 6 배열 로봇 SW 교육원 3 기 학습목표 2 배열을사용핛수있다. 배열 3 배열 (Array) 이란? 같은타입 ( 자료형 ) 의여러변수를하나의묶음으로다루는것을배열이라고함 같은타입의많은양의데이터를다룰때효과적임 // 학생 30 명의점수를저장하기위해.. int student_score1; int student_score2; int student_score3;...

More information

Microsoft PowerPoint - chap02-C프로그램시작하기.pptx

Microsoft PowerPoint - chap02-C프로그램시작하기.pptx #include int main(void) { int num; printf( Please enter an integer "); scanf("%d", &num); if ( num < 0 ) printf("is negative.\n"); printf("num = %d\n", num); return 0; } 1 학습목표 을 작성하면서 C 프로그램의

More information

Microsoft PowerPoint - C++ 5 .pptx

Microsoft PowerPoint - C++ 5 .pptx C++ 언어프로그래밍 한밭대학교전자. 제어공학과이승호교수 연산자중복 (operator overloading) 이란? 2 1. 연산자중복이란? 1) 기존에미리정의되어있는연산자 (+, -, /, * 등 ) 들을프로그래머의의도에맞도록새롭게정의하여사용할수있도록지원하는기능 2) 연산자를특정한기능을수행하도록재정의하여사용하면여러가지이점을가질수있음 3) 하나의기능이프로그래머의의도에따라바뀌어동작하는다형성

More information

A Hierarchical Approach to Interactive Motion Editing for Human-like Figures

A Hierarchical Approach to Interactive Motion Editing for Human-like Figures 단일연결리스트 (Singly Linked List) 신찬수 연결리스트 (linked list)? tail 서울부산수원용인 null item next 구조체복습 struct name_card { char name[20]; int date; } struct name_card a; // 구조체변수 a 선언 a.name 또는 a.date // 구조체 a의멤버접근 struct

More information

q 이장에서다룰내용 1 객체지향프로그래밍의이해 2 객체지향언어 : 자바 2

q 이장에서다룰내용 1 객체지향프로그래밍의이해 2 객체지향언어 : 자바 2 객체지향프로그래밍 IT CookBook, 자바로배우는쉬운자료구조 q 이장에서다룰내용 1 객체지향프로그래밍의이해 2 객체지향언어 : 자바 2 q 객체지향프로그래밍의이해 v 프로그래밍기법의발달 A 군의사업발전 1 단계 구조적프로그래밍방식 3 q 객체지향프로그래밍의이해 A 군의사업발전 2 단계 객체지향프로그래밍방식 4 q 객체지향프로그래밍의이해 v 객체란무엇인가

More information

제11장 프로세스와 쓰레드

제11장 프로세스와 쓰레드 제9장자바쓰레드 9.1 Thread 기초 (1/5) 프로그램 명령어들의연속 (a sequence of instruction) 프로세스 / Thread 실행중인프로그램 (program in execution) 프로세스생성과실행을위한함수들 자바 Thread 2 9.1 Thread 기초 (2/5) 프로세스단위작업의문제점 프로세스생성시오버헤드 컨텍스트스위치오버헤드

More information

C# Programming Guide - Types

C# Programming Guide - Types C# Programming Guide - Types 최도경 lifeisforu@wemade.com 이문서는 MSDN 의 Types 를요약하고보충한것입니다. http://msdn.microsoft.com/enus/library/ms173104(v=vs.100).aspx Types, Variables, and Values C# 은 type 에민감한언어이다. 모든

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 명품웹프로그래밍 1 2 강의목표 1. 자바스크립트언어의요소와구조를이해한다. 2. 자바스크립트코드를웹페이지에삽입하는방법을안다. 3. 자바스크립트로브라우저에출력하고사용자입력받는방법을안다. 4. 자바스크립트에서다루는데이터타입과변수에대해이해한다. 5. 자바스크립트의연산자의종류를알고사용할수있다. 6. 자바스크립트의조건문의종류를알고사용할수있다. 7. 자바스크립트의반복문의종류를알고사용할수있다.

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 객체지향프로그래밍 (OOP: object-oriented programming) 은우리가살고있는실제세계가객체 (object) 들로구성되어있는것과비슷하게, 소프트웨어도객체로구성하는방법이다. 객체는상태와동작을가지고있다. 객체의상태 (state) 는객체의속성이다. 객체의동작 (behavior) 은객체가취할수있는동작 ( 기능 ) 이다. 객체에대한설계도를클래스 (class)

More information

KNK_C_05_Pointers_Arrays_structures_summary_v02

KNK_C_05_Pointers_Arrays_structures_summary_v02 Pointers and Arrays Structures adopted from KNK C Programming : A Modern Approach 요약 2 Pointers and Arrays 3 배열의주소 #include int main(){ int c[] = {1, 2, 3, 4}; printf("c\t%p\n", c); printf("&c\t%p\n",

More information

untitled

untitled int i = 10; char c = 69; float f = 12.3; int i = 10; char c = 69; float f = 12.3; printf("i : %u\n", &i); // i printf("c : %u\n", &c); // c printf("f : %u\n", &f); // f return 0; i : 1245024 c : 1245015

More information

Microsoft PowerPoint - chap03-변수와데이터형.pptx

Microsoft PowerPoint - chap03-변수와데이터형.pptx #include int main(void) { int num; printf( Please enter an integer: "); scanf("%d", &num); if ( num < 0 ) printf("is negative.\n"); printf("num %d\n", num); return 0; } 1 학습목표 의 개념에 대해 알아본다.

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

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 Power Java 제 7 장클래스와객체 이번장에서학습할내용 객체지향이란? 객체 메시지 클래스 객체지향의장점 String 클래스 객체지향개념을완벽하게이해해야만객체지향설계의이점을활용할수있다. 실제세계는객체로이루어진다. 객체지향이란? 실제세계를모델링하여소프트웨어를개발하는방법 절차지향과객체지향 절차지향프로그래밍 (procedural programming): 문제를해결하는절차를중요하게생각하는방법

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 제 3 장함수와문자열 1. 함수의기본적인개념을이해한다. 2. 인수와매개변수의개념을이해한다. 3. 함수의인수전달방법 2가지를이해한다 4. 중복함수를이해한다. 5. 디폴트매개변수를이해한다. 6. 문자열의구성을이해한다. 7. string 클래스의사용법을익힌다. 이번장에서만들어볼프로그램 함수란? 함수선언 함수호출 예제 #include using

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

Infinity(∞) Strategy

Infinity(∞) Strategy 반복제어 표월성 passwd74@cherub.sungkyul.edu 개요 for() 문 break문과 continue문 while문 do-while문 for() 문 for() 문형식 for( 표현식1; 표현식2; 표현식3) 여러문장들 ; 표현식 1 : 초기화 (1 번만수행 ) 표현식 2 : 반복문수행조건 ( 없으면무한반복 ) 표현식 3 : 반복문수행횟수 for()

More information

JAVA PROGRAMMING 실습 05. 객체의 활용

JAVA PROGRAMMING 실습 05. 객체의 활용 public class Person{ public String name; public int age; } public Person(){ } public Person(String s, int a){ name = s; age = a; } public String getname(){ return name; } @ 객체의선언 public static void main(string

More information

C 프로그래밊 개요

C 프로그래밊 개요 구조체 2009 년 5 월 19 일 김경중 강의계획수정 일자계획 Quiz 실습보강 5 월 19 일 ( 화 ) 구조체 Quiz ( 함수 ) 5 월 21 일 ( 목 ) 구조체저녁 6 시 5 월 26 일 ( 화 ) 포인터 5 월 28 일 ( 목 ) 특강 (12:00-1:30) 6 월 2 일 ( 화 ) 포인터 Quiz ( 구조체 ) 저녁 6 시 6 월 4 일 ( 목

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 Presentation

PowerPoint Presentation WordPress 를이용한웹사이트만들기 2015 년 한지웅 WordPress 를이용한웹사이트만들기 Day 1 Day 2 Day 3 Day 4 Day 5 1. 웹사이트제작기초 HTLM 기본 CSS 기본 WordPress 개론 ( 웹사이트구축툴 ) 2. 웹호스팅 / 웹사이트구축 웹호스팅업체선택 cpanel 설정 WordPress 설치 3. WordPress 기초활용

More information

학습목차 2.1 다차원배열이란 차원배열의주소와값의참조

학습목차 2.1 다차원배열이란 차원배열의주소와값의참조 - Part2- 제 2 장다차원배열이란무엇인가 학습목차 2.1 다차원배열이란 2. 2 2 차원배열의주소와값의참조 2.1 다차원배열이란 2.1 다차원배열이란 (1/14) 다차원배열 : 2 차원이상의배열을의미 1 차원배열과다차원배열의비교 1 차원배열 int array [12] 행 2 차원배열 int array [4][3] 행 열 3 차원배열 int array [2][2][3]

More information

Microsoft PowerPoint - java1-lab5-ImageProcessorTestOOP.pptx

Microsoft PowerPoint - java1-lab5-ImageProcessorTestOOP.pptx 2018 학년도 1 학기 JAVA 프로그래밍 II 514760-1 2018 년봄학기 5/10/2018 박경신 Lab#1 (ImageTest) Lab#1 은영상파일 (Image) 을읽어서정보를출력 Java Tutorials Lesson: Working with Images https://docs.oracle.com/javase/tutorial/2d/images/index.html

More information

제 11 장포인터 유준범 (JUNBEOM YOO) Ver 본강의자료는생능출판사의 PPT 강의자료 를기반으로제작되었습니다.

제 11 장포인터 유준범 (JUNBEOM YOO) Ver 본강의자료는생능출판사의 PPT 강의자료 를기반으로제작되었습니다. 제 11 장포인터 유준범 (JUNBEOM YOO) Ver. 2.0 jbyoo@konkuk.ac.kr http://dslab.konkuk.ac.kr 본강의자료는생능출판사의 PPT 강의자료 를기반으로제작되었습니다. 이번장에서학습할내용 포인터이란? 변수의주소 포인터의선언 간접참조연산자 포인터연산 포인터와배열 포인터와함수 이번장에서는포인터의기초적인지식을학습합니다.

More information

Microsoft PowerPoint - chap-11.pptx

Microsoft PowerPoint - chap-11.pptx 쉽게풀어쓴 C 언어 Express 제 11 장포인터 컴퓨터프로그래밍기초 이번장에서학습할내용 포인터이란? 변수의주소 포인터의선언 간접참조연산자 포인터연산 포인터와배열 포인터와함수 이번장에서는포인터의기초적인지식을학습한다. 컴퓨터프로그래밍기초 2 포인터란? 포인터 (pointer): 주소를가지고있는변수 컴퓨터프로그래밍기초 3 메모리의구조 변수는메모리에저장된다. 메모리는바이트단위로액세스된다.

More information

C++ Programming

C++ Programming C++ Programming 예외처리 Seo, Doo-okok clickseo@gmail.com http://www.clickseo.com 목 차 예외처리 2 예외처리 예외처리 C++ 의예외처리 예외클래스와객체 3 예외처리 예외를처리하지않는프로그램 int main() int a, b; cout > a >> b; cout

More information

<4D F736F F F696E74202D20C1A633C0E52043C7C1B7CEB1D7B7A5B1B8BCBABFE4BCD2>

<4D F736F F F696E74202D20C1A633C0E52043C7C1B7CEB1D7B7A5B1B8BCBABFE4BCD2> 쉽게풀어쓴 C 언어 Express 제 3 장 C 프로그램구성요소 이번장에서학습할내용 * 주석 * 변수, 상수 * 함수 * 문장 * 출력함수 printf() * 입력함수 scanf() * 산술연산 * 대입연산 이번장에서는 C 프로그램을이루는구성요소들을살펴봅니다. 일반적인프로그램의형태 데이터를받아서 ( 입력단계 ), 데이터를처리한후에 ( 처리단계 ), 결과를화면에출력

More information

Microsoft PowerPoint - C프로그래밍-chap03.ppt [호환 모드]

Microsoft PowerPoint - C프로그래밍-chap03.ppt [호환 모드] Chapter 03 변수와자료형 2009 한국항공대학교항공우주기계공학부 (http://mercury.kau.ac.kr/sjkwon) 1 변수와자료유형 변수 프로그램에서자료값을임시로기억할수있는저장공간을변수 (variables) 변수 (Variables) 는컴퓨터의메모리인 RAM(Random Access Memory) 에저장 물건을담는박스라고생각한다면박스의크기에따라담을물건이제한됨

More information