~~~ 봄날은 간다 ~~~
눈을 감으면 문득
그리운 날의 기억
아직까지도
마음이 저려오는 건
그건 아마 사람도
피고 지는 꽃처럼
아름다워서
슬프기 때문일 거야
아마도
봄날은 가네
무심히도
꽃잎은 지네 바람에
머물수 없던
아름다운 사람들
가만히 눈감으면
잡힐 것 같은
아련히 마음 아픈
추억같은 것들
봄은 또 오고 꽃은
피고 또 지고 피고
아름다워서
너무나 슬픈 이야기
봄날은 가네 무심히도
꽃잎은 지네 바람에
머물수 없던
아름다운 사람들
가만히 눈감으면
잡힐 것 같은
아련히 마음 아픈
추억같은 것들
눈을 감으면 문득
그리운 날의 기억
아직까지도
마음이 저려오는 건
그건 아마 사람도
피고 지는 꽃처럼
아름다워서
슬프기 때문일 거야
(N20090711)
'소소한 일상' 카테고리의 다른 글
| (저녁 노을 풍경 사진) 우연히 창 밖을 봤는데 세상에 이렇게 멋진 노을이.. (0) | 2018.06.12 |
|---|---|
| (코스모스 축제) 가을에 피었던 강북 강변의 코스모스를 낚다. (0) | 2018.06.12 |
| (시각 디자인) 실내 인테리어 - 좋은 디자인이란? (0) | 2018.06.12 |
| (수학, 재미있는 사이트) 파이(원주율) 사이트 (0) | 2018.06.12 |
| (음악 소개) 첫 블로그 기념! 음악 선물 (Despacito, Luis Fansi ft. Daddy Yankee) (0) | 2018.06.11 |
(시각 디자인) 실내 인테리어 - 좋은 디자인이란?
.
일상의 생각... 끄적끄적...
.
실내 인테리어 사진들을 주욱 검색해 봤다. 가장 내 맘에 드는 멋진 디자인을 찾아 보자는
생각에서 30분 정도 찾아봤다...
훌륭하고 독창적인 아이디어가 물씬 풍기는 디자인들이 많았다.
그런데, 이상하게도 맘에 딱 드는 디자인은 없었다.
그래도 그 중에 하나를 골라 봤다.
이상한 점은 내가 고른 디자인이 내가 멋지다고 생각했던 디자인은 아니었다.
아래 사진들이 내가 고른 디자인이다.
....
흑백사진들 같은가? 아니다.
사실 이 사진들은 아디다스 본사의 사무실 인테리어다.
...........
그런데, 왜 멋진 것과 실제로 마음에 드는 게 다를까?
좀 생각하다보니 그 이유를 알 것 같았다.
내가 멋지다고 생각했던 디자인들은 그 자체로 이미 칼라와 구성이 잘 조합된
완성된 디자인들이었던 반면,
내가 고른 디자인은 칼라와 구성이 미완성된 디자인들이었다.
웹 프로그래밍 중에 자바스크립트 언어의 프로그래밍 철학으로서 '겸손한 자바스크립트'라는
게 있다.
하나의 웹 프로그램을 만들때에는 여러 종류의 프로그래밍 언어들을 복합적으로 사용한다.
웹 프로그래밍에서 자바스크립트 언어는 단지 웹 기능을 보조하는 역할을 위해
개발된 보조 언어이다. 효율성 제고를 위해 프로그램의 일부 보조기능을 프로그램 하는 것이
목적이다.
하지만, 발전을 거듭하다보니 웬만한 여타 프로그래밍 언어들의 모든 기능들을 완전하게
구현할 수 있을 정도로 -심지어 대체할 수 있을 정도로- 기능이 강화되었고
웹 프로그램 상에서는 필요이상으로 화려한 기능을 뽐내느라 웹 서핑의 본래 취지를
훼손하는 사례들도 생겨났다.
이에 대해 최근 대다수의 자바스크립트 프로그래머들은 이 언어가 가지고 있는 모든 기술을
프로그램에 쏟아 붓는 것보다는 프로그램에 사용되는 각 언어들의 특징을 잘 조화시켜
프로그래밍 할 것을 지향하고 있는데,
그것이 바로 '겸손한 자바스크립트'라는 프로그래밍 철학이다.
위 아디다스 사무실 디자인을 보면 사무실 전체가 마치 하나의 도화지 같은 인상을 준다.
색깔은 그 안의 구성원이 칠하고 완성하는 것이다.
내가 멋지다고 생각했던 다른 디자인들은 이미 디자이너의 완성된 생각이었고
디자인 활동의 중심은 디자이너들 자신이었다.
그러나 아디다스 사무실의 디지인 활동 중심은 그 안에 속하게 될 각 개인들인 것이다.
디자이너는 겸손한 자세로 특별한 재질의 도화지만을 제공한 것이다.
위 사진들도 그 자체로 이미 하나의 디자인이지만
그 안에서 뭔가를 더 꾸미면 좀 더 자기만의 디자인을 만들 수 있지 않을까하는
생각에 꾸미고 싶은 끌림이 느껴진다.
디자인이란 주관적인 감성의 느낌이다.
절대적일 수가 없는 것이다.
요즘은 개인주의 성향이 짙은 시대이다.
좋은 디자인이란 어쩌면 겸허하게 기본을 배려해주고
개인의 개성적인 칼라를 존중해주는 디자인이 아닐까하고 생각해 봤다.
그래서 선택한 것 같다~
(N20140607)
.
'소소한 일상' 카테고리의 다른 글
| (저녁 노을 풍경 사진) 우연히 창 밖을 봤는데 세상에 이렇게 멋진 노을이.. (0) | 2018.06.12 |
|---|---|
| (코스모스 축제) 가을에 피었던 강북 강변의 코스모스를 낚다. (0) | 2018.06.12 |
| (시 같은 가사) 봄날은 간다. (0) | 2018.06.12 |
| (수학, 재미있는 사이트) 파이(원주율) 사이트 (0) | 2018.06.12 |
| (음악 소개) 첫 블로그 기념! 음악 선물 (Despacito, Luis Fansi ft. Daddy Yankee) (0) | 2018.06.11 |
(수학, 재미있는 사이트) 파이(원주율) 사이트
원주율, 파이 사이트.
파이는 일상속에서 정말 물이나 공기같은 숫자다.
공학생들은 보통 소수점 이하 20자리 전후로 외우고 다닌다.
그런데, 이 사이트는 이름이 30자리 숫자로 이뤄져 있다 ㅎㅎ;
그렇다, 30자리 정도면 관심을 갖고 있는 사람이라고 볼 수 있겠다^^
(우주에서 길을 잃었을 때, 자신이 살 던 동네를 찾아오려면 50자리 까지는 알아야... ㅋㅋ)
http://3.141592653589793238462643383279.com/
숫자별로 색상을 적용해서 표시했다.
무리수다 보니 색상도 상당히 균일해 보인다.
세어봤는데 소수점 이하 101,999 자리까지 표시되어 있다.
'소소한 일상' 카테고리의 다른 글
| (저녁 노을 풍경 사진) 우연히 창 밖을 봤는데 세상에 이렇게 멋진 노을이.. (0) | 2018.06.12 |
|---|---|
| (코스모스 축제) 가을에 피었던 강북 강변의 코스모스를 낚다. (0) | 2018.06.12 |
| (시 같은 가사) 봄날은 간다. (0) | 2018.06.12 |
| (시각 디자인) 실내 인테리어 - 좋은 디자인이란? (0) | 2018.06.12 |
| (음악 소개) 첫 블로그 기념! 음악 선물 (Despacito, Luis Fansi ft. Daddy Yankee) (0) | 2018.06.11 |
(음악 소개) 첫 블로그 기념! 음악 선물 (Despacito, Luis Fansi ft. Daddy Yankee)
우연히 한 번 들었었는데 귓가를 맴도는 리듬이네요.
저 뿐만 아니라 많은 다른 사람들도 같은 경험을 하는 듯.
아마도 많은 사람들에게 공감을 일으키는가 봅니다.
스페인의 푸에트로리코 팝 아티스트 보컬 Luis fansi의 곡,
"Despacito (데스파씨또)" 입니다.
노래의 내용은 그냥 저속한 ㅡ,.ㅡ 남녀간의 사랑을 담고 있습니다.
그런데 어쨌든 리듬이 친근하고 좋아요.
Daddy yankee와 함께 만들었다고 하죠.
사실 이 곡은 단순한 리듬을 계속 반복만 하다가 끝나는 곡이에요.
마치 캐논 변주곡 처럼요.
단순할수록 따라 부르기도 쉽고 강한 인상을 주는 것 같다 랄까요.
몇 번 먹으면 금방 질리지만, 배고플 땐 가볍게 또 찾게 되는 샌드위치 같은 느낌.
이 곡의 뮤직비디오가 작년 초에 유투브에 소개된 이후,
2018년 6월 현재 기준으로 조회수, 52억회를 갱신하고 있네요.
(데스파씨또 뮤비 : https://www.youtube.com/watch?v=kJQP7kiw5Fk)
저는 개인적으로 이 뮤비나 노래 보다는 바이올린 연주가 제일 맘에 들었어요.
새빨간 장밋빛, 스카이 블루, 어두운 회색, 브라운, 검정, 짙은 녹색들이
아무런 순서없이 비바람처럼 공중을 돌아 휘몰아 치는 분위기입니다.
본래 곡이 담고 있는 내용과는 다르지만,
좀 다른 관점에서 음악을 들어보면,
슬픈 이에게는 위로를, 기쁜 이에게는 흐뭇함을 주는 음악같아요.
뮤비는 유투브 찾아보시고...
아래 세 영상은 모두 같은 곡을 바이올린으로 연주한건데 솔로부터 협주 순입니다.
순서대로 들어보세요~
1.
https://www.youtube.com/watch?v=MPhNFTdhG3E
2.
https://www.youtube.com/watch?v=uQtgP7ve3p4
3. * 제일 맘에 들었던 연주 입니다. *
이어폰 같은 걸로 듣지 말고 오디오로 들어야 돼요~
https://www.youtube.com/watch?v=aeYW3Wq4gu4
☆☆☆ 이건 보너스, 아마도 천사가 만든 사이트 인가 봅니다! (좌상단 플레이 버튼 누르면 연주돼요!)
https://musescore.com/user/14943671/scores/4598051
☆☆☆ 첨부 : 첨부한 파일은 위 세 연주를 모두 붙여서 길게 늘여 본 거예요.
(총 6분 40초 정도 됨)
"1번 연주 도입부 + 1,2번 연주 주제 각각 4,5번씩 반복 + 3번 연주 도입 빼고 몽땅"입니다.
'소소한 일상' 카테고리의 다른 글
| (저녁 노을 풍경 사진) 우연히 창 밖을 봤는데 세상에 이렇게 멋진 노을이.. (0) | 2018.06.12 |
|---|---|
| (코스모스 축제) 가을에 피었던 강북 강변의 코스모스를 낚다. (0) | 2018.06.12 |
| (시 같은 가사) 봄날은 간다. (0) | 2018.06.12 |
| (시각 디자인) 실내 인테리어 - 좋은 디자인이란? (0) | 2018.06.12 |
| (수학, 재미있는 사이트) 파이(원주율) 사이트 (0) | 2018.06.12 |
(웹 프로그래밍) 자바스크립트 강좌
자바스크립트 배우면서 정리했던 내용 ~
● Java Script의 정의
Nescape에서 개발된 객체지향 스크립트 언어를 의미합니다.
● Java Script의 종류
1. CSJS(Client Side JavaScript) : 간단히 말하자면 우리가 일반적으로 알고 있는 자바스크립트입니다.
HTML문장안에 포함되어 Client로 전송되고, 웹 브라우저안에서 실행되는 언어를 말합니다.
인터프리트 방식으로 실행됩니다. 자바의 문법을 빌어왔기 때문에 JavaScript라는 명칭을 사용하지만, 실제로 자바언어와는 크게 상관이 없다고 볼 수 있습니다.
Client Side JavaScript 는 <SCRIPT>..</SCRIPT>라는 태그안에 기술됩니다.
2. SSJS(Server Side JavaScript,LiveWire) : CGI(Common Gateway Interface)와 같은 기능을 할 수 있도록 자바스크립트의 기능을 서버쪽으로 옮긴 것으로 볼 수 있습니다.
Server Side JavaScript는 <SERVER>..</SERVER>라는 태그안에 기술하면 됩니다.
최초에 LiveWire란 명칭으로 개발하였으나, 중간에 Server-Side JavaScript로 명칭을 변경하 였습니다. 아직까지는 두 명칭을 서로 혼용하고 있는 상태입니다.
● Java Script의 개요
1. Java Script의 소개
기존의 정적인 HTML은 사용자와 상호작용할 수 있는 기능이나 즉각적인 응답을 받는 기능을 해결할 수 없다. 이런 문제와 제약을 해결하기 위한 시도중의 하나로 자바스크립트가 개발되었다.
자바스크립트는 자바를 기반으로 한 객체 지향 스크립트 언어로서 스크립트 코드가 HTML 문서 사이에 직접 삽입되어 번역(compile) 과정을 거치지 않고 브라우저에서 직접 실행 되어 자바스크립트를 지원하는 브라우저만 있으면 서로 다른 플랫폼(platform)에서도 실행되는 특징을 가지고 있다.
자바스크립트는 자바의 기본적인 문법구조를 그대로 사용하고 있어 자바와 유사하지만 동일한 언어는 아니다.
Java Script는 인터프리터 언어로서 클래스나 상속 개념이 없는 객체 기반 언어(Object Based Language) 개념을 가지고 이벤트를 처리 할 수 있도록 되어 있다.
Java Script는 넷스케이프사에 의해 라이브스크립트(LiveScript)라는 이름으로 처음 개발되었다. 이 스크립트 언어는 HTML을 확장하고 CGI를 대체하기 위한 목적을 갖고 있었다. 넷스케이프사가 선(SUN)에서 개발한 자바(Java)를 지원하기 시작하면서 자바스크립트(넷스케이프 2.0에서 지원)로 바뀌었다.
또 MS에서는 JScript(익스플로러 3.0에서 지원)라는 이름으로 지원하는데 Java Script와 대부분 호환을 가지고 있다. 그러나 웹상에서 스크립트 언어를 표준화하기 위해서 ECMA라는 단체가 있지만 완전한 표준은 되어 있지 못하다.
자바스크립트를 위한 도구로서 넷스케이프의 라이브와이어(LiveWire)와 볼런드사의 인트라빌더(intra Builder)가 있다. 라이브와이어는 자바스크립트를 기본 스크립트 언어로 사용하고 파일과 데이터베이스 제어를 위한 언어 확장 기능을 제공한다. 또 인트라 빌더는 자바스크립트를 프로그래밍 언어로 사용하는 웹 데이터베이스 개발 도구이다.
또 넷스케이프 엔터프라이즈 서버와 LiveWire, 마이크로소프트사의 ActiveX 서버 환경경하에서는 서버측에서도 사용된다.
2. Java Script의 기능과 실행
Java Script는 HTML과 사용자 사이의 상호작용이나 응답을 지원하고 멀티미디어와 에니메이션을 웹(Web) 상에 표현한다.
Event Handler로서 Mouse click, Form에 입력, page간의 이동 등 웹 페이지상에서 일어나는 event를 처리할 수 있다.
문서 객체 모형 기능으로 HTML로 정의된 Form, Frame, Layer 등의 객체 제어가 가능하다.
HTML에 속하지 않는 객체를 지원함으로서 HTML과 관련되지 않은 객체를 사용하여 별도의 정보, 예를들면, 사용자의 Browser 종류, Browser가 실행되고 있는 운영체제 등을 알수 있다.
요약하면 다음과 같다.
• 클라이언트와 서버 간의 데이터 교환과 같은 상태 관리 기능
• HTML 객체, 자바 애플릿, Active-X Control, Plug-in과 같은 클라이언트의 확장 기능 제공
• 자바스크립의 버전은 Java Script 1.0, 1.1, 1.2와 Jscript 1.0, 2.0이다.
• 자바스크립는 오직 클라이언트 쪽에서만 실행되기 때문에 망을 통한 데이터 전송 없이 모든 작업을 처리할 수 있다.
• 특정 플랫폼(Platform)에 관계없이 자바스크립트를 지원하는 브라우저만 있으면 실행이 가능하다.
• 현재 자바스크립트는 넷스케이프 2.0 이상, MS의 익스플로러 3.0 이상에서 지원한다.
• Java Script는 <Script> 태그로 시작해서 본문은 <!--로 시작하고 -->로 끝나는 HTML 설명문으로 묶어 있다.
• 그래서 Java Script를 지원하는 브라우저는 <Script> 태그 다음 "<!--"와 "-->"안의 내용을 script로 인식하고 그렇지 못한 브라우저는 HTML 설명문으로 처리한다.
• 하나의 HTML문서는 여러 쌍의 <Script> 태그로 존재할 수 있다.
• 또 Java Script는 대소문자의 구별이 있다.
• <SCRIPT LANGUAGE="JavaScript"> 자바스크립트 1.0(네비게이터용 자바스크립트 2.0) 지원
• <SCRIPT LANGUAGE="JavaScript1.1"> 자바스크립트 1.1(네비게이터용 자바스크립트 3.0) 지원
• <SCRIPT LANGUAGE="JavaScript1.2"> 자바스크립트 1.2(네비게이터용 자바스크립트 4.0) 지원
• -. HTML 문서내에 <script> 태그를 이용하는 방법
• <TITLE> Java Script의 형식(1)</TITLE>
• <SCRIPT LANGUAGE="JavaScript">
• -. HTML 태그의 이벤트에 응답하는 부분을 삽입하는 방법
• <TITLE> Java Script의 형식(2)</TITLE>
<INPUT type="SUBMIT" name="button1" value="버튼" onClick="alert("클릭")">
</form>
</BODY>
2. Java Script의 개발도구
Java Script의 입력은 일반 HTML 편집기로 가능하다.
그리고 특별한 자바스크립트를 위한 도구로서 Acadia Infise가 있다.
Java Script의 실행은 브라우저에서 인터프리터로 실행한다.
즉, HTML 문서가 브라우저에 의해 다운로드할 때마다 자바스크립트는 브라우저에 의해 해독되고 실행된다.
자바 스크립트의 내용은 사용자의 입력 및 여러 이벤트의 발생에 의해 적절한 부분이 수행되게 된다.
Java Script 소스의 위치는 HTML 태그내에 어디든 상관없으나 보통 함수는 <HEAD> 부분에 정의하고, 함수를 호출하는 것은 <BODY> 부분에 기술하는 것이 편리하다.
<HEAD>
<TITLE> Java Script의 형식(2)</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function pushbutton() {
alert("클릭")
}
// -->
</SCRIPT>
<BODY>
<form>
<INPUT type="SUBMIT" name="button1" value="버튼" onClick="pushbutton">
</form>
<a href="doc1.html" target=b>Previous</a>
<a href="doc2.html" target=b>Home</a>
<a href="doc3.html" target=b>Next</a>
</BODY>
</HTML>
● 기본 문법
1. 토큰(Token)
• 자바스크립트가 이해할 수 있는 각각의 단어 혹은 구, 문자를 의미하는 단어.
• 식별자(Identifier), 키워드(Keyword), 리터럴(Literal), 연산자(Operator), 구분자(Seperator)
• [예] 옳은 식별자 : current_webSite, NumberofHits, n, N
• [예] 잘못된 식별자 : current website, #ofHits, 2n, return
• break, function, null, while, continue, if, return, with, else, in, this, false, int, true, for, new, var
• 예약어 : 변수명, 함수명, 객체명, 메소드 이름으로 사용할 수 없는 식별자
• abstract, boolean, break, byte, case, catch, char, class,const,continue, default, delete, do,double, else, extends, false, final, finally, float, for, function, goto, if, implements, import, in, intanceof int, interface, labeled, long, native, new, null, package, private, protected, public, return, short, static, super, switch, synchronized, this, throw, throws, transient, true, try, typeof, var, void, while, with
• [예] 57, -12.45, 3.141592, 1.1e10, 8.2456E112, O12(8진수 12), OX1ff(16진수 1ff)
• 논리형 : 참(true : 1)이나 거짓(false : 0)중의 하나
• [예] "Kumi College", 'This is "substring" and others', "#16-4"
• 변수(Variable)는 특정 자료형의 값을 가지고 있는 저장 장소를 가리키는 것이다.
• 변수는 반드시 알파벳 문자나 "_" 문자를 시작해야 하며, 키워드(keyword)라는 자바스크립트에서 명령으로 정해놓은 단어는 변수로 사용해서는 안된다는 제약이 있다.
• 변수의 선언은 자바스크립트는 자바나 C/C++ 언어와는 다르게 변수의 타입을 엄격하게 검사하지 않는다.
• 변수가 필요할 때마다 그 즉시 사용하게 되면 바로 변수의 선언이 되며, 자바 언어는 경우 변수는 변수의 타입과 변수의 이름을 함께 사용함으로써 변수의 선언이 이루어진다.
• 자바스크립트는 특별히 변수의 타입을 지정할 필요가 없고, 단지 변수값을 할당하게 되면 입력된 값에 해당하는 타입의 변수가 선언된다.
• 기본 산술 연산자를 비롯하여 약 30개의 연산자 지원
• 주석은 스크립트가 무엇을 하는 것인지 설명하기 위해 저자가 표시한다.
• Java는 C++ 언어를 기본으로 하고, Java Script는 Java를 기본으로 하기 때문에 //로 시작하는 1줄짜리 설명문을 표현할 수 있다. 또 여러줄의 설명문은 /*로 시작해서 */로 끝난다.
• 사칙연산(+,-,*,/) 외에 나머지 연산(%)과 음수(-) 기능을 제공한다.
• [예] x=23<<2 (왼쪽으로 2비트 쉬프트하고 0으로 채우기)
• x=23>>2 (오른쪽으로 2비트 쉬프트하고 0으로 채우기)
• x=23>>>2 (왼쪽으로 2비트 쉬프트하고 sign으로 채우기)
• 변수의 값을 0(거짓)과 1(참)으로 나누어서 and, or 등 논리식으로 계산한다.
• [예] expr1 && expr2 (두 값을 AND 하기)
• [예] str1+str2 ("kumi"+"college"인 경우 "kumi college"
• x<<=2 (변수에 왼쪽으로 2번 쉬프트하고 0으로 채우기)
• x>>=2 (변수에 오른쪽으로 2번 쉬프트하고 0으로 채우기)
• x>>>=2 (변수에 오른쪽으로 2번 쉬프트하고 sign으로 채우기)
• x&=OX00000001 (변수에 오른쪽 값을 AND 하기)
• x.=OX00000001 (변수에 오른쪽 값을 OR 하기)
• x|=OX00000001 (변수에 오른쪽 값을 XOR 하기)
• 연산자의 우선순위는 식을 평가할 때 연산자가 적용되는 순서를 결정한다.
• 괄호를 사용해서 연산자의 우선순위를 변경할 수 있다.
우선순위 | 연산자 |
1 | . () [] |
2 | ! ~ - ++ -- |
3 | * / % |
4 | + - |
5 | <<>>>>> |
6 | <<= >>= |
7 | == != |
8 | & |
9 | ^ |
10 | | |
11 | && |
12 | || |
13 | ? : |
14 | = += -= *= /= %= <<= >>= >>>= &= ^= |= |
15 | , |
• 조건이 참인 경우와 거짓인 경우 수행할 명령을 지정할 수 있음
• 지정된 조건이 참이면 자바스크립트는 참에 해당하는 문장을 수행
• 조건이 거짓이라면 자바스크립트는 거짓에 해당하는 문장을 수행
for 반복문은 계수기(counter)가 지정된 조건에서 거짓으로 평가될 때까지 반복
• for ([initializing_expr]; [condition_expr]; [loop_expr]) {
• 초기치가 결정 -> 조건이 평가 -> 조건이 참이라면 반복문이 수행 -> 조건이 거짓이라면 반복문은 종료 -> 증가분이 수행 -> 문장이 수행되고 2 단계로 수행
• while 문은 지정한 조건이 참인 동안 반복해서 수행한다.
• 만약 조건이 거짓이면 반복문 내의 문장은 실행을 중지하며 제어권은 반복문 다음의 문장으로 넘어간다.
• 조건의 판단은 반복의 시작점에서 수행되며, 문장내의 마지막 문장이 이어지자마자 바로 다시 수행한다.
• while 문과 비슷하게 동작하지만 조건문을 첫 번째 수행 이후에 실행.
• break 문은 현재의 while이나 for 반복문을 종료하고 프로그램의 제어권을 반복문 바로 다음의 문장에 전달한다.
• continue 문은 while이나 for 반복문 내의 문장들의 실행을 종료하고 계속해서 다음 루프를 실행한다.
• break 문과는 반대로 continue 문은 반복문 전체의 수행을 종료하지는 않는다.
• while문 내에 있을 경우 조건으로 되돌아가고, for문 내에 있을 경우 증가분으로 건너뛴다.
• break와 continue에서의 종료할 Label을 정의
• for...in 문은 객체의 모든 특성을 변수에 할당한다.
• 각각의 특성에 대해 자바스크립트는 지정된 문장을 수행한다.
• 넷스케이프 3.0 이상에서 동작, 익스플로러에서 동작 안함.
• new 연산자로 사용자가 정의한 객체형을 생성한다.
• objectName = new objectType ( param1 [,param2] ... [,paramN] )
• 일반적으로 this는 메쏘드내에서 호출하는 객체를 참조한다.
• with 문은 여러 문장에 대한 기본객체를 설정한다.
• 여러 문장 내에서 객체를 지정하지 않는 참조는 기본객체를 참조하는 것으로 가정한다.
• 처리할 내용이 중복으로 쓰일 경우 매번 기술하면 프로그램이 길어진다. 이때 함수를 만들어 호출하면 간단해진다.
• 자바 스크립트에서 매개변수(parameter)는 Call by Value로 작동한다.
• 프로그램에서 특정 작업을 하기 위해 독립적으로 만들어진 하나의 단위를 의미
• 함수는 일반적으로 특정한 일을 하도록 모아 놓은 코드의 집합체
• function 함수 이름 (인수1, 인수2, ...) {
• function func_name(para1, para2) {
• 함수는 스크립트 태그안에서 직접 호출되거나, 문서내의 이벤트에 의해 호출
• 자바 스크립트는 언어 자체에 내장된 최상위 수준 함수를 가지고 있다.
• [예] prompt("Enter Number", "0")인 경우에는 "Enter Number"로 제목주고, 0을 임시값으로 보여주고, 사용자 입력을 기다린다.
• "OK"와"Cancel"의 두가지 중 하나를 선택하게 하고, "OK"를 누르면 true, "cancel"을 고르면 false를 돌려준다.
• eval 함수는 인수로 전달된 수식을 계산하여 주는 내장 함수
• 다음 예는 x와 y의 변수가 문자열이므로 eval 함수는 두 문자열을 결합시켜 "12.3"의 문자열을 출력
• 다음 예는 x와 y의 변수가 산술값을 가지므로 eval 함수의 연산을 통해 3.3을 출력
• eval 함수는 자바스크립트의 표현식(expression)을 수행시킨다.
• parseInt는 인수로 들어온 문자열을 정수로 바꾸어주는 내장 함수
• parseFloat는 parseInt와 동일한 구조를 된 것으로 문자열을 부동소수점으로 바꾸어주는 내장함수
• escape는 ISO Latin-1 문자 세트를 ASCII 형태로 바꾸어 주는 함수
• unescape 함수는 ASCII 형태를 ISO Latin-1 문자 세트로 바꾸어 주는 함수
• (예 : unescape("%26")은 "&"를 리턴)
• Web Browser에 의한 JavaScript는 주로 이벤트(Event)에 의해 실행한다.
• 이벤트는 사용자가 특정한 행위를 발생했다는 신호를 가리킨다. 예를 들어 버튼을 눌렀다든가, 하이퍼텍스트 링크위로 마우스가 지나갔다든가, Form 내의 text 영역에서 커서를 이동시키는 것들이 일종의 이벤트라고 한다.
• 자바스크립트는 이러한 이벤트가 발생하는지를 계속해서 체크한다.
• 이벤트를 받아서 처리하는 일종의 함수 혹은 메쏘드라고 할 수 있다. 예를 들어 버튼을 눌려졌다는 이벤트에 따라 실행되는 함수가 이벤트 처리기(Event Handler)가 되는 것이다.
• 이벤트에 따라 자바스크립트에 정의된 이벤트 처리기가 있다.
• EventHandler : Event Handler의 이름
• 자바스크립트가 지원하는 이벤트와 발생시점은 다음과 같다.
이벤트 | 발생 시점 | 이벤트 처리기 |
abort | 이미지를 읽다가 중단시켰을 때 | onAbort |
blur | 사용자가 Tab 같은 것을 이용해서 Form 요소로부터 커서를 이동시킬 때 | onBlur |
click | From 요소나 Link를 Click할 때 | onClick |
change | text, textarea나 select의 값을 변경하고 이동하기위해 Tab을 눌렀을 때 | onChange |
dragdrop | 브라우저 윈도우에 개체를 떨어뜨렸을 때 | onDragDrop |
error | 문서나 이미지를 읽다가 오류가 발생했을 때 | onError |
focus | 사용자가 Text나 Textarea로 cursor를 이동했을 때 | onFocus |
keydown | 이미지, 링크, textarea에 키를 눌렀을 때 | onKeyDown |
keypress | 이미지, 링크, textarea에 키를 누르거나 누르고 있을 때 | onKeyPress |
keyup | 이미지, 링크, textarea에 키를 눌렀다가 놓을 때 | onKeyUp |
load | 사용자가 Browser에서 page를 읽었을 때 | onLoad |
mousedown | 버튼이나 링크위에서 마우스 버튼을 누를 때 | onMouseDown |
mousemove | 커서를 옮겨 다닐 때 | onMouseMove |
mouseout | 마우스가 링크나 특정한 영역안에 있다가 나갔을 때 | onMouseOut |
mouseover | 사용자가 link나 anchor위로 mouse를 옮겼을 때 | onMouseOver |
mouseup | 버튼이나 링크위에서 마우스 버튼을 띨 때 | onMouseUp |
move | 새로운 윈도우로 옮겨갈 때 | onMove |
reset | 입력 양식에서 리셋시켰을 때 | onReset |
resize | 윈도우의 크기가 변경되었을 때 | onResize |
select | 사용자가 Form 요소의 입력 필드를 선택했을 때 | onSelect |
submit | 사용자가 Submit Button을 Click함으로서 Form을 제출할 때 | onSubmit |
unload | 사용자가 현재 Page에서 벗어날 때 | onUnload |
• 자바스크립트는 객체개념에 기반을 두기는 하지만 완전한 객체지향언어는 아니다.
• 객체(Object)란 데이터와 그 데이터를 가공하는 함수라고 정의할 수 있다.
• 데이터를 가공하는 함수 즉, 객체와 객체의 외부 세계를 연결해주는 것을 메쏘드라고 하고, 객체의 속성값을 변경시키거나, 사용하기 위해선 이를 관리하는 인터페이스가 필요하다.
• [예] 윈도우를 열거나 닫는 것, document나 frame에 문자를 쓰는 것 등
• 각 객체는 속성을 가지며, 속성값을 변경하여 원하는 일을 할 수 있다.
• [예] document.bgColor -> Web Page의 배경색)
• window.status -> 브라우저 윈도우의 상태바에 나타날 문자열
• 자바스크립트는 웹 페이지(Web Page)의 구조에 기반을 둔 객체들을 가지고 있다.
• [예] Web Page는 "document"라는 객체, Browser Window도 "window"라는 객체
• 내장 객체는 Document, Browser 등에서 많이 사용되는 부분을 script에서 자체적으로 객체로 정의한 것을 말한다. [예] document, window, frame, form 등
• 이미 있던 객체의 클래스를 이용해서 새로운 객체의 클래스를 만드는 대신 전문적인 용어로 "Property List"라는 구조를 이용하여 객체를 쉽게 만들수 있도록 지원한다.
• 현재의 날짜와 시간을 표시하려면 다음과 같이 새로운 객체를 생성한다.
• new Date(year, month, day, hours, minute, seconds)
• miliseconds는 1970년 1월1일 0시를 기준으로 해서 현재까지 몇 milisecond가 지났는 가를 가지고 날짜를 만든다.
• datestring의 형태는 "month day, year hours:minutes:seconds"로 표시된다.
객체 | 속성 | 메쏘드 |
Date |
| getDate, getDay, getHours, getMinutes, getMonth, getSeconds, getTime, getTimeZoneOffset, getYear, parse, setDate, setHours, setMinutes, setMonth, setSeconds, setTime, setYear, toString,toGMTString, toLocaleString |
getDate | 1 ~ 31 |
getDay | 0: Sundaay, 1: Monday, ... ,7: Saturday |
getHours | 0 ~ 23 |
getMinutes | 0 ~ 59 |
getMonth | 0: January,... ,11: Decenber |
getSeconds | 0 ~ 59 |
getTime | 1970년 1월 1일 0시 부터 ms 반환 |
getTimeZOneOffset | 한국 시간과 GMT 시간의 분차 |
getYear | 예, 1999는 99로 반환 |
parse | 문자열 해석해서, get Time 해 줌 |
setDate | 1 ~ 31로 해석 |
setHours | 0 ~ 23 |
setMinutes | 0 ~ 59 |
setMonth | 0: Sundaay, 1: Monday, ... ,7: Saturday |
setSeconds | 0 ~59 |
setTime | 1970년 1월 1일 0시 부터 ms 설정 |
setYear | 예, 1999는 99로 설정 |
toString | Date 객체를 받아서 String으로 |
toGMTString | Date 객체를 받아서 "Mon,5 Feb 1999 17:16:34 GMT" 같이 변환 |
toLocalString | Date 객체 받아서 "MM/DD/YY HH:MM:SS"로 변환 |
• Array 객체는 프로그래밍 언어에서 동일한 타입을 가지는 데이터를 저장하고 다루는데 편리하다.
• Array 객체를 new 연산자를 사용해서 만들 수 있다.
• array_val = new Array("가", "나", "다", "라")
객체 | 속성 | 메쏘드 |
Array | length, prototype | join, reverse, sort |
• 수학식이나 상수들에 관련된 사항들을 가지고 있는 객체로 따로 생성해서 사용하지 않고 Math.constant나 Math.function()과 같은 형태로 사용
• "with" 문장과 사용하면 "Math."을 생략하고 사용할 수 있어 편리
객체 | 속성 | 메쏘드 |
Math | E, PI, LN2, LN10, LOG2E, LOG10E, SQRT1_2, SQRT2 | abs, acos, asin, atan, ceil, cos, exp, floor, log, max, min, pow, random, round, sin, sqrt, tan |
E | Euler's Constant(2.778...) |
LN10 | 10의 자연로그값 |
LN2 | 2의 자연로그값 |
PI | 3.141592..... |
SQRT1_2 | 1/2 의 제곱근 |
SQRT2 | 2의 제곱근 |
abs() | 절대치 구함 |
acos() | arc cosine - radian으로 변환 |
asin() | arc sine - radian으로 변환 |
atan() | arc tangent - radian |
ceil() | 2.4의 ceil은 3 |
floor() | 2.4의 floor은 2 |
cos() | cosine - radian으로 변환 |
sin() | sin - radian으로 변환 |
tan() | tangent - radian으로 변환 |
exp() | exponential - radian으로 변환 |
log() | log - radian으로 변환 |
max() | 최대치 - radian으로 변환 |
min() | 최소값 - radian으로변환 |
pow() | pow(2,3)의 2의 3승 |
random() | 0과 1사이의 난수 |
round() | round(2.1)은 2, round(2.8)은 3 |
sqrt() | 제곱근 |
• "message"와 같은 문자열 리터럴이거나 thePhrase와 같은 문자열 변수로 표현.
객체 | 속성 | 메쏘드 |
String | length | anchor, big, blink, bold, charAt, fixed, fontcolor, fontsize, indexOf, italics, lastIndexOf, link, small, strike, sub, substring, sup, toLowerCase, toUpperCase |
anchor() | 문자열을 <A></A>로 감싸준다. |
big() | 문자열을 <BIG></BIG>로 감싸준다. |
blink() | 문자열을 <BLINK></BLINK>로 감싸준다. |
bold() | 문자열을 <B></B>로 감싸준다. |
charAt() | charAt(2) 2번째(0,1,2) 문자를 변환 |
fixed() | 문자열을 <TT></TT>로 감싸준다. |
fontcolor() | 문자열을 <FONT COLOR=color></font>로 감싸준다. |
fontsize() | 문자열을 <FONT SIZE=size></FONT>로 감싸준다. |
indexOf() | 문자열과 시작 index를 받아서, index 다음부터 문자열이 있는 곳을 찾는다. |
italics() | 문자열을 <I></I>로 감싸준다. |
lastindexOf() | 문자열과 시작 index를 받아서, index 앞부터 거꾸로 문자열이 있는 곳을 찾는다. |
Link() | 문자열을 <A></A>로 감싸준다. |
small() | 문자열을 <SMALL></SMALL>로 감싸준다. |
strike() | 문자열을 <STRIKE></STRIKE>로 감싸준다. |
sub() | 문자열을 <SUB></SUB>로 감싸준다. |
substring() | index1에서 index2 전까지의 부분 문자열 |
sup() | 문자열을 <SUP></SUP>로 감싸준다. |
toLowerString() | 문자열을 소문자열로 바꾼다. |
min() | 문자열을 대문자열로 바꾼다. |
• 브라우저의 내장객체는 현재 브라우저가 보여주고 있는 문서에 관한 여러 가지 정보 즉 Window 정보, History 정보, 문서가 존재하고 있는 위치에 관한 정보 등을 포함한다.
• 브라우저는 자신이 현재 가지고 있는 모든 정보들을 객체로서 제공한다.
• 브라우저 내장객체들은 계층 구조로 이루어져 있는데 다음과 같다.
•
• 브라우저 내장 객체들의 구조 중에서 가장 상위에 있는 객체
window 객체 | ||
Property | status | Browser의 status bar에 나타날 문자열 |
defaultStatus | status에 지정된 문자열이 없을 때 나타날 문자열 | |
self | 자기 자신 객체 | |
parent | window 객체 간의 계층 구조가 생길 때 상위 객체 | |
top | window 객체 간의 계층 구조가 생길 때 최상위 객체 | |
opener | open() method로 window를 연 문서가 있는 window | |
length | 현재 윈도우의 프레임의 개수 | |
frames[] | 현재 윈도우에서 여러개의 프레임 즉, frames[0], frame[1], ... | |
location | 현재 위치 | |
history | 현재까지 지나온 곳 | |
document | 현재 페이지에 대한 객체 | |
Method | open() | window 열기 |
close() | window 닫기 | |
alert() | 간단한 메시지를 전달하기 위한 Dialog Box | |
confirm() | 사용자로부터 확인을 받기 위한 Dialog Box | |
prompt() | 사용자로부터 문자열을 입력받기 위한 Dialog Box | |
setTimeout() | 지정된 시간동안 기다린 후 지정된 명령 실행 | |
clearTimeout() | setTimeout 해제 | |
Event Handler | onLoad | Browser가 문서를 모두 읽은 후 실행할 명령 지정 |
onUnload | Browser에 현재 문서를 모두 지운 후 실행할 명령 지정 | |
onError | Browser가 문서를 읽던 중 에러가 발생했을때 | |
onBlur | Browser가 focus를 잃었을때 | |
onFocus | Browser가 focus를 얻었을때 | |
• 문서의 <body> 나 <title> 태그 안에 있는 내용들과 직접적으로 연결되어 있다.
• document 객체는 툴바, 상태바, 문서 위치 정보 등에는 접근할 수 없다.
• document 객체의 Property와 Method
document 객체 | ||
Property | title | 문서의 제목 |
location | 문서의 URL 위치 | |
lastModified | 문서를 마지막으로 수정한 날짜 | |
referrer | Link로 현재 문서에 왔을 때 이전 문서의 URL 위치 | |
bgColor | 문서의 배경색 | |
fgColor | 문서의 전경색 | |
linkColor | 문서에서 링크를 표시하는 색 | |
alinkColor | 링크를 클릭했을 때 나타나는 색 | |
vlinkColor | 이전에 방문했던 링크를 표시하는 색 | |
anchors[] | 문서에 있는 표식들의 배열 | |
elements[] | 현재 웹 페이지의 요소 | |
forms[] | 문서에 있는 입력 양식들의 배열 | |
links[] | 문서에 있는 링크들의 배열 | |
cookies | 클라이언트쪽의 PC에 저장한 정보 | |
images | 문서에 있는 이미지들의 배열 | |
applets | 문서에 있는 Java Applet들의 배열 | |
embeds | 문서에 있는 Plug-in들의 배열 | |
Method | open() | 문서에 데이터를 출력하기 위해 준비시키는 것 |
close() | 문서에 데이터를 출력하는 것을 마무리 | |
clear() | 브라우저에서 문서 지우기 | |
write() | 문서에 데이터 출력 | |
writeln() | 문서에 데이터 출력(줄 바꾸기 자동 포함) | |
Event Handler | onBlur | 문서가 focus를 잃었을 때 |
onFocus | 문서가 focus를 얻었을 때 | |
• history 정보라는 것은 브라우저가 가장 최근에 방문하였던 URL 주소들을 의미한다.
• history 객체에서 제공하는 여러 메소드들을 이용하여 방금 지나왔던 페이지로 이동할 수 있게 된다.
• 단, history list속에 있는 URL 주소를 알아낼 수는 없다.
• history 객체의 Property와 Method
history 객체 | ||
Property | length | history list에 포함되어 있는 URL 주소의 개수 |
Method | back() | history list에서 한단계 앞으로 이동 |
forward() | history list에서 한단계 뒤로 이동 | |
go() | history list에서 임의의 위치로 이동 | |
Event Handler | 없음 |
|
• 현재 브라우저에 보이고 있는 문서 위치에 관한 여러 가지 정보를 제공
location 객체 | ||
Property | href | 문서의 URL 주소 |
host | URL 주소의 호스트명과 포트번호 | |
hostname | URL 주소의 호스트명 | |
protocol | 프로토콜 종류 | |
pathname | 디렉토리 위치 | |
port | 포트번호 | |
hash | 표식 이름 | |
search | 검색 엔진을 호출할 때 사용되는 형식 | |
Method | reload() | 브라우저의 현재 문서를 다시 읽도록 만드는 메소드 |
replace() | 현재 문서를 특정 URL에 있는 문서로 바꿔치는 메소드 | |
assign() | location.href를 설정 | |
toString() | location.href를 String으로 치환 | |
Event Handler |
|
|
• HTML 문서에 들어있는 모든 Link에 대한 정보를 제공하는 객체로서, document 객체로부터 파생되었다.
• links는 문서에 포함된 Link 객체들을 배열로 모아 놓은 변수로서, document.links[0]는 문서의 첫번째에 나오는 Link를 의미한다.
Link 객체 | ||
Property | target | 지정된 URL에 연결된 후 정보를 보여줄 Window나 Frame |
href | Link에 연결된 문서의 URL 주소 | |
host | Link에 연결된 URL 주소의 호스트명과 포트번호 | |
hostname | Link에 연결된 URL 주소의 호스트명 | |
protocol | 프로토콜 종류 | |
pathname | 디렉토리 위치 | |
port | 포트번호 | |
hash | 표식 이름 | |
search | 검색 엔진을 호출할 때 사용되는 형식 | |
Method | 없음 |
|
Event Handler | onClick | 마우스로 링크를 클릭했을 때 발생하는 Event Handler |
onMouseOver | 마우스로 링크 위를 지나갔을 때 발생하는 Event Handler | |
onMouseOut | 마우스가 링크 밖으로 나갔을 때 발생하는 Event Handler | |
• HTML 문서는 <IMG> 태그에 사용해 이미지를 삽입
• 자바스크립트는 image 객체를 통해 이러한 이미지에 관한 정보를 나타낸다.
• 이미지에 대한 접근은 document 객체에 있는 images 속성을 이용하거나, image 객체의 name 속성을 통해 할 수 있다.
• (예를 들어 첫 번째 이미지의 name 속성이 first_img라고 한다면, document.images[0] 또는 document.first_img 로 접근 할 수 있다.)
Image 객체 | ||
Property | name | 이미지 객체의 이름 |
src | 이미지 파일의 URL 주소 | |
height | 이미지의 세로 길이 | |
width | 이미지의 가로 길이 | |
hspace | 이미지와 주변 글자들간의 가로 여백 | |
vspace | 이미지와 주변 글자들간의 세로 여백 | |
border | 이미지 테두리선의 굵기 | |
align | 이미지와 주변 글자들간의 배치 방법 지정 | |
ismap | 이미지를 서버쪽 이미지 맵으로 사용 | |
usemap | 이미지를 클라이언트쪽 이미지 맵으로 사용 | |
Event Handler | onAbort | 이미지 전송을 중단시켰을 때 |
onError | 이미지 전송중 에러가 발생했을 때 | |
onLoad | 이미지가 브라우저에 나타날 때 | |
• form 객체는 여러개의 객체들로 구성되어 있는데, 그 객체들은 textarea, text, password, hidden, submit, reset, radio, checkbox, button, select이다.
Form 객체 | Property | Method | Event Handler |
text | defaultValue, name, value | focus(), blur(), select() | onBlur, onChange, onFocus, onSelect |
textarea | defaultValue, name, value | focus(), blur(), select() | onBlur, onChange, onFocus, onSelect |
checkbox | checked, name, value, defaultChecked | click() | onClick |
radio | checked, name, value, index, defaultChecked, length | click() | onClick |
button | name, value | click() | onClick |
submit | name, value | click() | onClick |
reset | name, value | click() | onClick |
password | name, value, defaultValue | focus(), blur(), select() | onFocus, onBlur, onSelect |
select | name, value, selectedIndex, options |
| onBlur, onFocus, onChange |
hidden | name, value |
|
|
options | name, value, selectedIndex |
|
|
• 현재 사용하고 있는 Browser에 관한 일반적인 정보를 제공하는 객체
• 현재 사용되는 브라우저의 버전 및 제공되는 mimeType, Plugin을 알수 있다.
navigator 객체 | ||
Property | appName | Application 이름 |
appVersion | 브라우저의 현재 버전 | |
appCodeName | 브라우저의 현재 코드명 | |
userAgent | 브라우저의 현재 User Agent | |
mimeTypes | 현재 브라우저에서 지원하고 있는 MIME 타입들 | |
plugins | 현재 브라우저에 설치된 Plug-in들의 종류 | |
Method | javaEnabled() | 현재 브라우저가 Java를 지원하고 있는지를 검사 |
Event Handler | 없음 |
|
(N20090711)
'프로그래밍' 카테고리의 다른 글
| (웹 프로그래밍 팁) 자바스크립트의 클로저 (0) | 2018.06.12 |
|---|---|
| (PC 가상머신) VMWare와 파일 공유 방법. (XP-VMWare 공유 폴더) (0) | 2018.06.12 |
| (데이터베이스 오류 정보) [MySql]is not allowed to connect to this MySQL server (0) | 2018.06.12 |
| (데이터베이스 연결도구) MDAC에 대해서... (0) | 2018.06.12 |
| (ASP.NET 닷넷으로 데이터베이스 접속방법) C#으로 MySQL 접속하기 (0) | 2018.06.12 |