1 / 22

JavaScript

JavaScript. 한국외국어 대학교 신동만. Introduction. Java 란 무엇인가. Java 는 programming language 이다. 1990년대 초 Sun 의 연구원 James Gosling 등에 의해 개발 C/C++ 과 문법이 유사 참고 : Hotjava Sun 사가 개발한 Web browser Java 로 프로그램됨. 왜 Java 인가. Web 과의 연동성 Applet : 웹 페이지상에서 실행되는 프로그램 Platform 독립성

brody-harris
Download Presentation

JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JavaScript 한국외국어 대학교 신동만

  2. Introduction

  3. Java란 무엇인가 • Java는 programming language이다. • 1990년대 초 Sun의 연구원 James Gosling 등에 의해 개발 • C/C++과 문법이 유사 • 참고 : Hotjava • Sun사가 개발한 Web browser • Java로 프로그램됨

  4. 왜 Java인가 • Web과의 연동성 • Applet : 웹 페이지상에서 실행되는 프로그램 • Platform 독립성 • JVM(Java Virtual Machine)이 있는 어떤 System에서도 실행 가능 • Windows95/NT, Macintosh, Sun, HP, Linux, IBM AS400, … • C/C++보다 앞선 객체지향성 • 우수한 Network programming 지원 • Robustness • Pointer가 없음 • Automatic Referencing/Dereferencing • Automatic Garbage Collection

  5. 왜 Java인가(cont’d) • Security • Network을 통해 시도할 수 있는 여러가지 침투 가능성에 대한 대비 • Multithreaded • 동시에 여러 process가 수행 • Performance의 향상

  6. Javasource code, byte code, native code Source code (.java) Byte code (.class) Compile Native code (기계어) Java runtime interpreter (JVM)

  7. 유용한 Java관련 site • http://java.sun.com • Sun사의 공식 Java home page • http://www.gamelan.com • 여러가지Java applet들을 얻을 수 있다 • http://www.korea-stock.com • Java applet으로 된 멋있는 증권시황 그래프를 제공(가입해야 함)

  8. Object-Oriented Programming

  9. Object-Oriented Programming(OOP) • Structured programming (구조적 프로그래밍) • Pascal, C가 대표적 • Procedure 위주 • Object-Oriented Programming(객체지향 프로그래밍) • Java, C++, Smalltalk ... • Object 위주

  10. JavaScript vs. Java • Script 문 • JavaScript • Java Applet • JavaScript • 컴파일되지 않으며, 클라이언트에서 해석되고 실행됨 • 객체는 JavaScript에 포함되어 있는 확장객체이며, 클래스나 클래스 상속은 불가능 • JavaScript 코드는 HTML 문서내에 포함 • 코드 작성시 변수 데이터 타입 선언 안 해도 됨 • 동적 바인딩 : 객체 참조는 실행시 점검 • Java • 클라이언트에서 실행되기 전에 컴파일되어 서버에 존재 • Java Applet은 클래스와 상속된 클래스의 코드로 구성 • Java Applet과 HTML 문서는 별도로 존재, Applet 형태로 HTML 문서에 포함 • 코드 작성시 변수 데이터 타입이 지정되어야 함 • 정적 바인딩 : 객체 참조는 컴파일시 점검

  11. JavaScript - 개요 • 위치 • <HEAD> … </HEAD> 사이에 : 일반적 / 기타 위치 • <SCRIPT> … </SCRIPT> 태그 • 예 : <html> <head> <script language=“JavaScript”> document.write(“안녕하세요?”) </scritp> <title> JavaScript 예제 </title> </head> <body> JavaScript 예제입니다. </body> </html>

  12. 객체(Object) - 내장객체 • window • 최상위 객체 : web browser 화면 • 프레임으로 분할된 경우, 여러 개의 window가 존재 • location • 현재 URL의 속성 포함 • location.href = “http://logisys.snu.ac.kr/~sungie/index.html” • history • 방문했던 곳의 URL정보에 대한 속성 포함 • history.length = 7 • document • 제목, 배경색, 양식 등 • 현재 문서 정보에 대한 속성 포함 • document.title = “JavaScript 예제” • document.bgcolor = #00ff55

  13. 이벤트 핸들러 • 전송에 관한 이벤트 핸들러 • onAbort : 사용자가 이미지 전송을 강제로 중단했을 때 • onError : 이미지 전송 중 에러가 생겼을 때 • 문서나 이미지의 변화 • onChange : 객체에서 입력되거나 선택된 값을 바꿀 때 • onLoad : 문서를 읽었을 때나 이미지가 나타났을 때 • onReset/onSubmit : reset/submit 버튼을 눌렀을 때 • 마우스 관련 • onClick : 마우스로 객체를 클릭했을 때 • onMouseOut : 마우스가 지정된 영역이나 링크 위에서 벗어났을 때 • onMouseOver : 마우스가 지정된 영역이나 링크 위를 지나갈 때 • ...

  14. JavaScript 예제 • 움직이는 글자 예제 <HTML> <head><TITLE> 움직이는 글자 예제 </TITLE> <script> var id,pause=0,position=0,revol=9; function banner() { var i,k; var msg=" 안녕 하세요 신동만입니다. 즐거운 하루 되세요! "; var speed=4; document.thisform.thisbanner.value=msg.substring(position, position+50); if(position++==msg.length) { if (revol-- < 2) return; position=0; } id=setTimeout("banner()",1000/speed); } </script> </head> <body onload="banner()"> <center> <form name="thisform"> <input type="text" name="thisbanner" size="40"> </form> </center> </body> </HTML>

  15. JavaScript 예제

  16. 접속 시간/현재 시간 타이머 예제 <HTML> <head><TITLE> 접속 시간 / 현재 시간 타이머 예제</TITLE> <script> var OnTimeValue=" "; var OffTimeValue=" "; function getLogonTime() { var now=new Date(); var ampm=(now.getHours()>=12)?"P.M.":"A.M." var Hours=now.getHours(); var Minutes=now.getMinutes(); var Seconds=now.getSeconds(); OnTimeValue=(" "+Hours+":"+Minutes+":"+Seconds+" "+ampm); } function getLogoffTime() { var now=new Date(); var ampm=(now.getHours() >= 12) ? " P.M." : " A.M." var Hours=now.getHours(); Hours=((Hours>12)?Hours-12:Hours); var Minutes=now.getMinutes(); var Seconds=now.getSeconds(); OffTimeValue=(" "+Hours+":"+Minutes+":"+Seconds+" "+ampm); displayTimes(); } function displayTimes() { alert("\n접속 시간 : "+OnTimeValue+"\n\n현재 시간 :" +OffTimeValue); } </script> </head> <body onLoad="getLogonTime()";> <form><INPUT TYPE="button" value=”접속 시간” onClick="getLogoffTime()"> </form> </body> </HTML>

  17. JavaScript 예제

  18. 시계 삽입 예제 <HTML> <head><TITLE> 시계 삽입 예제 </TITLE> <script> var timerID = null; var timerRunning = false; function stopclock () { if(timerRunning) clearTimeout(timerID); timerRunning = false; } function showtime () { var now = new Date(); var hours = now.getHours(); var minutes = now.getMinutes(); var seconds = now.getSeconds() var timeValue = "" + ((hours >12) ? hours -12 :hours) timeValue += ((minutes < 10) ? ":0" : ":") + minutes timeValue += ((seconds < 10) ? ":0" : ":") + seconds timeValue += (hours >= 12) ? " P.M." : " A.M." document.clock.face.value = timeValue; timerID = setTimeout("showtime()",1000); timerRunning = true; } function startclock () { stopclock(); showtime(); } </script> </head> <body onLoad="startclock(); timerONE=window.setTimeout"> <center><form name="clock" onSubmit="0"> <input type="text" name="face" size=13 value=""> </form></center> </body> </HTML>

  19. JavaScript 예제 • 움직이는 화면 예제 <HTML> <head><TITLE> 움직이는 화면 </TITLE> <script> var position = 0; function scroller() { if (position != 600) { position++; scroll(0,position); clearTimeout(timer); var timer=setTimeout("scroller()",10);timer; } } </script> </head> <body onLoad=scroller()> <center> *<p>**<p>***<p>****<p>*****<p>******<p>*******<p> 글자가 점점 위로 갑니다.<p> <a href="http://logisys.snu.ac.kr/">logisys.snu.ac.kr</a><p> *******<p>******<p>*****<p>****<p>***<p>**<p>*<p> </center> </body> </HTML>

  20. JavaScript 예제

  21. JavaScript로 패스워드 걸기 예제 - index.html <HTML> <head> <title> 기본 홈페이지 : index.html </title></head> <body bgcolor="#babdc7"> <center><H3> 안녕하세요? </H3> 신동만 홈페이지로 이동 하시려면 <a href="pwd.html">여기</a>를 누르세요.<p> <font color="red">(패스워드를 모르시면 접속이 불가능합니다.)</font> </cemter> </body> </HTML> - pwd.html <HTML> <head><title> 패스워드 걸기 예제 </title></head> <body bgcolor="#000000"> <script> function password() { var count=0; var pass=prompt('패스워드를 입력하시오',''); while(count <= 2) { if (pass == "sung") { alert('패스워드가 맞습니다!!!'); location.href="http://san.hufs.ac.kr/~dmshin2/"; break; } else count+=1; var pass = prompt('패스워드를 다시 입력하시오.',''); } if (count == 3) { alert('등록하고 다시 오세요.'); location.href="index.html"; } } document.write(password()); </script> </body> </HTML>

More Related