'분류 전체보기'에 해당되는 글 121건

  1. 2013.01.12 | 레미제라블
  2. 2013.01.04 | 자바스크립트 내장 객체
  3. 2013.01.03 | 스타일객체
  4. 2013.01.01 | onload이벤트
  5. 2013.01.01 | 이벤트 정리
  6. 2013.01.01 | 폼 유효성 검사2(submit&button 비교)
  7. 2013.01.01 | 폼 유효성 검사(아이디, 비밀번호)
  8. 2013.01.01 | history 객체 메서드&속성
  9. 2012.12.31 | SSH란?
  10. 2012.12.30 | location 객체 속성&메서드

레미제라블

Culturallife/movie | 2013. 1. 12. 23:01
Posted by 오요미

올겨울 대중문화계 화제는 단연 ‘레미제라블’(Les Miserables)이다. 영화 ‘레미제라블’은 9일 440만 관객을 돌파, 500만 관객 달성 및 아이맥스 재개봉을 눈앞에 두고 있다. 빅토르 위고의 원작소설도 영화 개봉 이후 15만부 더 팔려나갔으며, 현재 대구에서 상영 중인 뮤지컬도 7만여 관객을 모았다.

‘레미제라블’이 이처럼 뜨거운 반응을 얻는 이유는 ‘실패한 혁명’과 ‘가난한 민중들의 비참한 현실’이 현재 한국의 사회상과 맞물리면서 공감을 자아냈기 때문이다. 하지만 레미제라블이 다루는 시대적 배경을 정확히 무엇인지는 알기는 쉽지 않다. 막연히 ‘프랑스 혁명’을 다룬 것으로 알려져 있지만 19세기 100년 동안 프랑스에서는 소위 성공한 혁명만 3차례, 유혈 봉기는 그보다 수도 없이 많이 있었기 때문이다.

‘레미제라블’을 보다 더 잘 이해할 수 있도록 이 작품이 배경으로 하고 있는 프랑스 역사를 소개한다. 다만 ‘스포일러’를 원치 않는 분들은 영화를 보고나서 읽는 편이 좋다. (편집자 주)

1816년 출소한 장발장. 그는 1796년 빵을 훔쳐 감옥에 갔다.



■ 프랑스 대혁명 7년 … 장발장, 배 고픈 조카를 위해 빵을 훔치다 

고개 숙여, 하늘에는 신이 없고, 땅에는 자비가 없고, 나는 죄가 없네. 주님은 관심도 없어. 고개 숙여. 모두 다 널 잊었어. 넌 영원한 노예일 뿐 - 오프닝 테마곡 ‘Look down’


‘레미제라블’에서 ‘장발장’은 굶주린 조카들을 위해 빵 한 조각을 훔치다 19년 동안 노역을 살게 된다. 상식적으로 납득이 안 되는 한 인간의 불행은 어떻게 시작된 것일까.

1789년 프랑스에서는 극심한 굶주림과 신분제에 대한 불만으로 혁명이 일어난다. 민중들은 국왕 루이 16세를 처형하고 ‘왕이 없는 나라’, 즉 공화국을 선포한다. 이것이 흔히 알려져 있는 ‘프랑스 대혁명’이다.

하지만 혁명 이후 프랑스는 굶주림 문제를 해결하기는커녕 더 큰 소용돌이에 빠진다. 오스트리아 등 이웃나라들은 자국으로 혁명이 확산되는 것을 두려워 프랑스에 군대를 파견했고, 쫓겨난 왕족과 귀족들이 이들과 결탁했다. 로베스피에르 등 혁명지도부는 외국군과 내부의 반혁명 세력과 전쟁을 벌이면서 한편으로 내부 권력다툼에 돌입한다.

사회는 계속 혼란 상태로 머물렀으며, 경제는 엉망이 됐다. 혁명지도부 중 가장 과격파였던 로베스피에르는 1793년 정권을 장악해 ‘최고가격제’를 실시해 일시적으로 물가안정을 이뤘으나, 1년 동안 1만명 이상을 처형하는 등 지나친 공포 분위기 조성으로 2년 만에 실각한다. 최고가격제는 폐지되고 다시 물가는 미친듯이 뛰어올랐다. 바로 그 이듬해인 1796년 장발장은 조카를 위해 빵을 훔치다 체포된다.

혁명정부는 혁명 이후의 혼란을 강력한 국가권력으로 평정한다.



장발장은 정확히 감옥에 간 것이 아니라 ‘노역형’에 처해진 것이었다. 유럽에서 범죄자들은 일정 기간 노예가 돼서 일하는 형벌을 받았다. 대부분 지중해 갤리선에서 노 젓는 일을 하는 수부(水夫)로 일했다. 말 그대로 노예였다. 음식과 의복은 형편없었고, 매질도 다반사였다. 혁명으로 왕은 사라졌지만 전근대적 형벌제도는 사라지지 않았던 것이다.

프랑스의 혼란은 1799년 군인 출신 나폴레옹이 쿠데타를 일으켜 제1통령으로 취임하면서 비로소 일단락된다. 나폴레옹은 외국과의 전쟁에서 승리로 이끌고 국내 반혁명 세력을 소탕하는 한편 토지분배·법 제도 정비·초등교육 확립 등의 정책으로 사회를 안정시켰다. 하지만 나폴레옹은 통령 지위에 만족하지 않고 1804년 스스로 황제에 즉위, 반혁명 위협이 사라졌는데도 외국과 계속 전쟁을 벌였다.

사람들이 점점 나폴레옹에게 지쳐가던 무렵, 그는 워털루 전쟁에서 패해 1815년 완전히 몰락한다. 이듬해 장발장이 출소한다.

■ 시민왕과 산업화…‘부르주아’ 그리고 ‘거지’와 ‘부랑아’와 ‘매춘’의 시대



1823년 판틴은 프랑스 북부 지방의 구슬 공장에서 일한다.



하루가 지나가면 또 하루 늙어갈 뿐. 이것이 가난한 자들의 삶. 주머니에는 1주일을 버틸 돈만 있어. 뼈빠지게 일 안 하면 굶주릴 수밖에 없네. - 공장 노동자들의 테마곡 At the end of the day


나폴레옹 몰락 이후 프랑스에는 외국으로 망명했던 루이 16세의 동생들이 돌아와 차례로 즉위한다. 오랜 전쟁에 지쳐 평화를 갈망하던 프랑스인들은 왕조를 받아들인다. 하지만 처음에는 혁명세력의 눈치를 살피던 왕이 점차 언론자유를 탄압하고 선거권을 축소하는 등 과거로 돌아가려는 모습을 보이자 1830년 7월 다시 한 번 혁명을 일으켜 새 왕을 추대한다.

이 혁명을 ‘7월 혁명’이라 부른다. 이 때 왕위에 오른 이가 ‘루이 필리프’이다. ‘레미제라블’은 이 시대를 무대로 본격 펼쳐진다. 작품에 등장하는 ‘왕’은 바로 루이 필리프를 가리킨다.

루이 필리프는 왕족의 신분이지만 혁명의 이념을 지지하고 시민의 대변자가 되겠다고 공언해 시민들의 지지를 받았다. 그는 약속대로 자유, 특히 언론과 산업활동의 자유를 크게 보장하는 정책을 펼쳤다.

이 시기 프랑스는 본격적으로 산업화가 진행된다. 직물공업과 금속공업이 산업이 발달하면서 수출액도 늘어났다. 장발장은 앞서 1820년대 프랑스 북부 소도시 몽레이유에서 기업가로 변신해 크게 성공했는데, 이 지역은 영국의 영향을 받아 다른 프랑스 지역보다 산업화가 먼저 진행된 곳이었다. 공장을 소유한 부르주아들은 산업화로 인한 성장에 힘입어 예전의 귀족과 같은 지위를 누리기 시작했다.

1820~30년대 산업화로 인해 노동빈민도 늘어났다.



하지만 성장의 열매는 가난한 사람들에게는 돌아가지 않았다. 갑자기 도시 인구는 늘어났지만 주택, 수도 시설은 턱없이 부족했다. 전염병이 돌 때마다 슬럼가에 사는 빈민들은 떼죽음을 당했다. 경제성장과 더불어 물가도 함께 오르는데 임금은 턱없이 낮았다. 빈민가의 남성들은 시름을 잊기 위해 술을 마시고, 여성들은 살기 위해 몸을 팔았다. 아이들은 부모에게 버려져 부랑아가 됐다.

부르주아의 시대이자, 한편으로 거지와 부랑아와 알코올 중독자, 그리고 매춘의 시대였다. ‘장발장’과 같은 선량한 자선가가 없지는 않았지만 자선에 기댈 수 있는 상황이 아니었다. 정부는 ‘산업 자유에 관한 원칙’에 따라 부르주아들을 전혀 규제하지 않았다. 그리고 이러한 사회 현실은 ‘바리케이드의 시대’를 열었다.

■ 자유를 위해 싸우던 민중들, 빵을 위해 싸우다 

우리는 예전에 자유를 위해 싸웠는데 지금은 빵을 위해 싸우네. 평등이란 대체 무엇인가, 죽으면 평등해지지. 기회를 잡아. 비바 프랑스! - Paris Look dowm, 가브로슈의 독백

일하면서 자유롭게 살던가 싸우다 죽자(Viver liber en travaillant ou mourir en combattment) - 1831년 폭동을 일으킨 리옹 노동자들의 구호


1832년 파리 광장에서 빈민들을 선동하는 학생들.



1831년 11월 프랑스 대표적 공업도시인 리옹에서 노동자 수천명이 가담한 폭동이 일어났다. 이 지역은 프랑스 견직물 공업의 중심지로, 전체 수출액의 30%를 생산하는 곳이었다. 노동자들은 오르는 물가에 비해 임금이 턱없이 낮다며 ‘최저임금’을 협상했지만, 공장주 1400명 가운데 104명이 이에 불응했다.

이를 계기로 리옹 지역의 노동자 전체가 들고 일어났다. 이들은 한때 시정까지 장악했지만, 정부는 이를 ‘반란’으로 규정해 잔인하게 탄압했다. 공장주 90% 이상이 합의한 최저임금법도 수포로 돌아갔다. 노동자들의 결사의 권리 등도 크게 제한됐다.

리옹 사건을 계기로 빈민과 노동자들, 공화주의 성향의 학생들은 7월 왕정에 등을 돌렸다. 걸핏하면 폭동이 일어났다. 1832년 6월 5일, 나폴레옹의 부관 출신 국회의원으로 ‘민중의 편’에 섰다고 평가받는 라마르크 장군의 장례식을 계기로 일어난 폭동도 그 중의 하나였다. 마리우스는 왕정을 뒤엎기 위해, 장발장은 마리우스를 구하기 위해 이 폭동에 참여한다.

뮤지컬과 영화 ‘레미제라블’에서는 다소 규모가 작은 폭동으로 묘사했지만, 실제로는 약 800명이 사망한 대규모 폭동이었다. 하지만 왕정은 무너지지 않았다. 정부의 강력한 탄압으로 1835년부터는 폭동도 잦아들었다. 이후 프랑스는 부르주아 문화를 꽃피우며 번영의 시대를 맞이한다.

■ 처참한 바리케이드 몰락, 그 이후…



1848년 2월 혁명을 상징하는 영화 ‘레미제라블’ 마지막 장면.

이것은 그들이 미래에 이뤄갈 이야기 - 마지막 장면 Do you hear the people sing


영화 ‘레미제라블’의 마지막 장면은 합창으로 끝난다. 이 장면은 장발장의 죽음과 묘비명에 얽힌 후일담으로 끝나는 원작 소설과 달리 뮤지컬 버전에서 오리지널로 삽입한 것이다. 이는 훗날 1848년의 ‘2월 혁명’을 암시한다.

1835년부터 안정을 유지했던 루이 필리프 왕정은 1846년 대흉작으로 물가가 폭등하고, 실업자가 급증하면서 다시 위기를 맞이한다. 마침내 1848년 2월 노동자 계급이 중심이 돼, 루이 필리프 왕정을 끌어내리는데 성공한다.

하지만 프랑스는 민주공화정이 정착하기 위해 여전히 더 험난한 여정을 겪었다. 2월 혁명 이후 선포된 새로운 공화국에서는 나폴레옹의 조카인 ‘루이 나폴레옹’이 통령으로 당선됐다. 그 역시 스스로 황제(나폴레옹 3세)로 즉위했다.

나폴레옹 3세는 권위주의적이긴 했지만 내부적 사회보장개혁을 마련하는 한편 ‘프랑스 제국의 영광’을 되찾기 위해 외국과 전쟁을 벌였다. 하지만 1871년 프로이센(현 독일)과의 전쟁에 패해 물러난다.

나폴레옹 3세가 물러난 이후 프랑스 급진 좌파 세력이 봉기해 파리 시청을 점령하고 자치정부 ‘파리 코뮌’을 결성한다. 하지만 파리 코뮌은 정부에 진압돼 약 3만명이 처형당하는 처참한 결과로 끝났다.

파리 코뮌을 진압하고 출범한 ‘제3공화정’에 가서야 프랑스는 극좌와 극우 사이를 오가지 않고 민주공화정으로 정착한다. 프랑스 대혁명 이후 거의 100년이 걸렸다.


참고문헌

- <혁명과 반동의 프랑스사> 로저 프라이스 지음, 김정근·서이자 옮김, 개마고원, 2001.

- <프랑스 혁명에서 파리코뮌까지> 노명식, 까치, 1993.

- <혁명의 역사, 피터 벤데> 권세훈 옮김, 뤼마니떼, 2004.

- <혁명의 시대> 에릭 홉스봄, 정도영·차명수 옮김, 한길사, 1998.

 

자바스크립트 내장 객체

Programming/Javascript | 2013. 1. 4. 00:39
Posted by 오요미

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<pre>

<script language="javascript" type="text/javascript">

//[1] 날짜 관련 객체

// Date객체의 인스턴스 생성

var today = new Date();

// Date객체의 주요 속성/메서드 출력

document.write(today.getYear() + "년<br />");

document.write((today.getMonth()+1) + "월<br />"); //0월 부터 시작 Day는 요일

document.write(today.getDate() + "일<br />");

document.write(today.getHours() + "시<br />");

document.write(today.getMinutes() + "분<br />");

document.write(today.getSeconds() + "초<br />");

document.write("<hr />");

//[2] 수학 관련 객체

document.write("2의 10승 : "+Math.pow(2,10)+"<br />");

document.write("3, 5, 1, 4 중 가장 큰 값 : "+Math.max(3,5,1,4) + "<br />");

document.write("3, 4, 1, 4 중 가장 작은 값 : "+Math.min(3,5,1,4)+ "<br />");

document.write("3.4를 소수 첫째 자리에서 반올림 : "+Math.round(3.4)+ "<br />");

document.write("3.5를 소수 첫째 자리에서 반올림 : "+Math.round(3.5)+ "<br />");

//[3] 문자열 관련 객체/함수

var s = " Abc Def Fed Cba";

with(document){                                          //with안에 있는 document객체는 document를 생략할 수 있다.

writeln(s.length); //길이 writeln 자동으로 줄바꿈<pre></pre>안에 있을 경우

writeln(s.toLocaleLowerCase());         //소문자 : LCase()

writeln(s.toUpperCase());         //대문자 : UCase()

writeln(s.charAt(5));         //5번째 인덱스에 위치하는 문자

writeln(s.indexOf("e"));         //"e"문자열의 인덱스(위치)

writeln(s.lastIndexOf("e"));                 //뒤에서 "e"문자열 검색

writeln(s.substring(5,8));         //5번째 인덱스에서 8-1번째

writeln(s.substr(5, 3));                 //5번째 인덱스 부터 3자 반환

var ss = s.split(" ");         //공백을 기준으로 배열값으로 반환

for(i=0; i<ss.length; ++i){

writeln(ss[i]);

}

}

</script>

</pre>

'Programming > Javascript' 카테고리의 다른 글

주문자와 배송지 정보 같게 설정하는 checkbox  (0) 2013.01.22
웹브라우저 관련 예제들  (0) 2013.01.22
스타일객체  (0) 2013.01.03
onload이벤트  (0) 2013.01.01
이벤트 정리  (0) 2013.01.01
 

스타일객체

Programming/Javascript | 2013. 1. 3. 23:59
Posted by 오요미

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>스타일 객체 : style</title>

<style type="text/css">

#Panel1{

background-color:Yellow; width:"200px"; height:"200px";

}

</style>

<script language="javascript" type="text/javascript">

function ChangeColor(obj) {

obj.style.backgroundColor='';

}

function ChangeValue(obj){

obj.value = ""; //html레벨 : 각각의 속성을 지정

obj.size = 40;

obj.style.border = "1px solid red"; //css레벨 : style객체로 접근

}

function ChangeTextBox(){

document.getElementById("txt").value="";

document.getElementById("txt").style.backgroundColor = "red";

}

</script>

</head>

<body>

<div id="Panel1" onmouseover="this.style.backgroundColor='silver';" onmouseout="ChangeColor(this);">

<!-- 노랑->은색->노랑 (backgroundColor='' 속성에 아무값을 주지 않으면 처음값으로 돌아가게 된다.) -->

<!-- background-color -> backgroundColor 스크립트에 속성을 적을 때 이렇게 표기한다. -->

<input type="text" id="txt" value="아이디" onfocus="ChangeValue(this)"/>

<!-- 워터마크기능 -->

<input type="button" value="텍스트박스 모양 변경" onclick="ChangeTextBox();" />

</div>

</body>

</html>

'Programming > Javascript' 카테고리의 다른 글

웹브라우저 관련 예제들  (0) 2013.01.22
자바스크립트 내장 객체  (0) 2013.01.04
onload이벤트  (0) 2013.01.01
이벤트 정리  (0) 2013.01.01
폼 유효성 검사2(submit&button 비교)  (0) 2013.01.01
 

onload이벤트

Programming/Javascript | 2013. 1. 1. 19:59
Posted by 오요미


인터프리터에 의해 웹브라우저는 html의 처음부터 해석을 하게 된다. 하지만 스크립트 코드가 head에 있기 때문에 body태그에 스타일 적용을 하지 못한다. 이를 위해 onload이벤트를 사용한다.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>window.onload 이벤트</title>

<script type="text/javascript">

//[1]페이지 로드시 함수로 지정한 자바스크립트 실행 

/* window.onload = pageLoad;

function pageLoad() {

changeColor();

changeSize();

}; */

//[2] 익명 함수 : anonymous function 스타일

window.onload = function() {

changeColor();

changeSize();

};

function changeColor(){

document.getElementById("myDiv").style.backgroundColor="red";

}

function chageSize() {

document.getElementById("myDiv").style.height="100px";

}

</script>

</head>

<body>

<div id="myDiv" style="height:50px;">

페이지가 로드 되고 난 후 배경색이 yellow로 변경됩니다.

</div>

<script type="text/javascript">

document.getElementById("myDiv").style.backgroundColor="yellow";

</script>

</body>

</html>

'Programming > Javascript' 카테고리의 다른 글

자바스크립트 내장 객체  (0) 2013.01.04
스타일객체  (0) 2013.01.03
이벤트 정리  (0) 2013.01.01
폼 유효성 검사2(submit&button 비교)  (0) 2013.01.01
폼 유효성 검사(아이디, 비밀번호)  (0) 2013.01.01
 

이벤트 정리

Programming/Javascript | 2013. 1. 1. 19:05
Posted by 오요미

이벤트란? 

사용자로 부터 특정 조작이 행해졌을 때 컴퓨터로부터 발생되는 일종의 신호


자바스트립트의 이벤트 목록

  • blur : 입력 포커스가 폼의 구성요소에 있다가 옮겨진 경우에 발생
  • click : 링크나 폼의 구성원을 선택한 경우에 발생
  • change : 입력 포커스가 폼 내의 필드에 주어진 경우 발생
  • focus : 폼의 구성원의 필드에 입력을 하기 위해 선택하는 경우 발생
  • load : 페이지를 브라우저로 읽을 때 발생하는 이벤트
  • mouseover : 마우스 포인터를 하이퍼 텍스트 링크 위로 옮길 때 발생
  • select : 폼의 구성원의 필드를 선택한 경우에 발생하는 이벤트
  • submit : 폼을 등록한 경우에 발생하는 이벤트(폼과 함께 제공되는 submit과 같은 입력이 끝났음을 알리는 버튼을 누르면 발생)
  • unload : 지금 읽고 있는 페이지 외의 다른 페이지를 읽고자 할 경우 발생
  • dblclick : 해당 객체를 더블클릭 했을 경우
  • mouseout : 객체 안에 마우스 포인터가 머무르다 벗어나게 된 경우 발생

이벤트 핸들러란?(on~)
  • 특정 이벤트와 이에 대한 조치 내용을 담은 코드를 연결하는 역할
  • 자바 스크립트에서는 주로 사용자 입력과 관계된 form과 anchor에 대해서 이벤트 핸들러를 제공


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Insert title here</title>

</head>

<body 

onload="window.alert('어서오세요.');"

onunload="alert('안녕히 가세요');"

>

<input type="text" onfocus="this.style.backgroundColor='yellow';" 

onblur="this.style.backgroundColor='white';"

/>

<input type="text" onkeypress="alert('타이핑 하셨군요.');"

onchange="document.bgColor='silver';"

onmousemove="this.style.backgrounColor='yellow';"

/>

<table border="1" width="100%">

<tr>

<td onclick="alert('클릭하셨군요');">클릭</td>

<td onmouseover="alert('오버하셨군요.');">마우스오버</td>

</tr>

<tr>

<td ondblclick="alert('더블 클릭하셨군요');">더블클릭</td>

<td onmouseout="alert('밖으로 이동하셨군요.');">마우스아웃</td>

</tr>

</table>

</body>

</html>

'Programming > Javascript' 카테고리의 다른 글

스타일객체  (0) 2013.01.03
onload이벤트  (0) 2013.01.01
폼 유효성 검사2(submit&button 비교)  (0) 2013.01.01
폼 유효성 검사(아이디, 비밀번호)  (0) 2013.01.01
history 객체 메서드&속성  (0) 2013.01.01
 

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Insert title here</title>

<script language="javascript" type="text/javascript">

function CheckForm() {

var uid = document.getElementById("txtUserID");

if(uid.value.length<3 || uid.value.length >12){

alert("아이디를 3자 이상 12자 이하로 입력하세요");

uid.focus();

uid.select();

return false;

}else{

return true; //현재 다음 이벤트 실행:submit

}

}

</script>

</head>

<body>

<!-- 확인버튼 눌렀을 때 아이디가 3자 이상 12자 이상인지 검사 -->

<form id="MyForm" action="test.html" method="post" onsubmit="return CheckForm();">

아이디 : <input type="text" id="txtUserID" name="txtUserID"/>

<input type="submit" value="확인" />

</form>

</body>

</html>


<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Insert title here</title>

<script language="javascript" type="text/javascript">

function CheckForm(){

var txt=document.getElementById("txt");

if(txt.value == ""){

alert("아이디를 입력하시오.");

txt.focus();

}else{

document.MyForm.action = "test.html";

document.MyForm.submit();

}

}

</script>

</head>

<body>

<form name="MyForm">

아이디 : <input type="text" name="txt" id="txt"/>

<input type="button" value="확인" onclick="CheckForm();"/>

</form>

</body>

</html>

'Programming > Javascript' 카테고리의 다른 글

onload이벤트  (0) 2013.01.01
이벤트 정리  (0) 2013.01.01
폼 유효성 검사(아이디, 비밀번호)  (0) 2013.01.01
history 객체 메서드&속성  (0) 2013.01.01
location 객체 속성&메서드  (0) 2012.12.30
 

<html>

<head>

<meta name="viewport" content="width=device-width;" charset="utf-8" />

<title>폼 유효성 검사 : 아이디 및 암호 체크</title>

<style type="text/css">

div, td, input{color:Navy; font-size:9pt; font-family:"맑은 고딕" Verdana 굴림;}

</style>

<script language="javascript" type="text/javascript">

//자바스크립트는 html의 form, button, textbox등 들을 하나의 객체로 보고 id와 name으로 접근이 가능하다.

function CheckForm(){

//[1] 아이디 텍스트 박스에 접근해서 txtUserID 변수로 객체 담기

var txtUserID = window.document.FrmLogin.txtUserID;

if(txtUserID.value == ""){         //아이디가 입력되지 않았다면

alert("아이디를 입력하시오.");

return false; //진행하지 말고 대기(submit이벤트 중지)

}

//[2] 암호체크

if(document.FrmLogin.txtPassword.value=""){

alert("암호를 입력하시오.");;

return false;

}

}

</script>

</head>

<body>

<!-- form은 post방식을 사용하도록 권장: 데이터가 URL에 노출되므로..-->

<form id="FrmLogin" name="FrmLogin" action="sun/defalt." method="post" onsubmit="return CheckForm();">

<!-- submit이라는 이벤트를 잡을려면 onsubmit이라는 이벤트 핸들러를 사용해야하며 "return 함수명"으로 적는다. -->

<div align="center">

<table border="1" width="300">

<tr>

<td align="right">아이디:</td>

<td><input type="text" id="txtUserID" name="txtUserID" /></td>

<!-- id와 name속성은 될수 있도록 같게 써준다. -->

</tr>

<tr>

<td align="right">암호:</td>

<td><input type="Password" id="txtPassword" name="txtPassword" /></td>

</tr>

<tr>

<td colspan="2" align="center">

<input type="submit" value="로그인" />

<input type="reset" value="취소" />

</td>

</tr>

</table>

</div>

</form>

</body>

</html>



submit을 button으로 바꾸고 조금 심화시켜 만들어 봅시다~

 <script language="javascript" type="text/javascript">

function CheckForm(){

var txtUserID = document.FrmLogin.txtUserID;

if((txtUserID.value == "") || txtUserID.value.length<3 || txtUserID.value.length>12){

alert("아이디를 입력하시오.");

document.FrmLogin.txtUserID.focus();         //해당 객체에 커서 포커스:커서가도록

//document.FrmLogin.txtUserID.select(); //해당 객체 텍스트 블록 영역 선택

document.getElementById("txtUserID").select();

return false;

}

else{

document.FrmLogin.action = "./asp/Deault.aspx"; //action속성을 동적으로 변경

document.FrmLogin.submit(); //폼의 내용을 action 속성 URL로 전송

}

}

</script>

 <form id="FrmLogin" name="FrmLogin" action="" method="post">
 <input type="button" value="로그인" onclick="CheckForm();"/>


'Programming > Javascript' 카테고리의 다른 글

이벤트 정리  (0) 2013.01.01
폼 유효성 검사2(submit&button 비교)  (0) 2013.01.01
history 객체 메서드&속성  (0) 2013.01.01
location 객체 속성&메서드  (0) 2012.12.30
document 객체 속성&메서드  (0) 2012.12.30
 

history 객체 메서드&속성

Programming/Javascript | 2013. 1. 1. 14:11
Posted by 오요미

<meta name="viewport" content = "width=device-width;" charset = "utf-8" />

<script language = "javascript" type="text/javascript">

//뒤로가기 앞으로가기 정보가 있어야 적용가능

GoBack = function() {history.back();}

//뒤로가기

GoForward = function() {history.forward();}

//앞으로가기

function GoBack1(){ history.go(-1);}

//-1수가 커질 수록 전전 단계로 증가

</script>


<input type="button" value="뒤로" onclick="GoBack();" /><br />

<input type="button" value="뒤로" onclick="history.go(-1);" /><br />


<a href = "#" onclick = "GoForward();" >앞으로</a><br />

<a href="javascript:GoBack1()">한단계 뒤로</a>

 

SSH란?

Programming/Linux | 2012. 12. 31. 10:22
Posted by 오요미

SSH란? 기본 설명

SSH(Secure Shell)는 네트워크를 통해 원격으로 다른 호스트에 액세스하는 과정을 보호하기 위한 의도로 설계되었다. SSH는 더욱 우수한 인증 기능뿐만 아니라 SCP(Secure Copy), SFTP(Secure File Transfer Protocol), X 세션 전달 및 포트 전달과 같은 기능을 제공하여 네트워크에서 교환되는 데이터를 암호화함으로써 기타 비보안 프로토콜의 보안성을 강화한다. 사용 가능한 암호화 유형은 512비트 암호화에서 Blowfish, Triple DES, CAST-128, AES(Advanced Encryption Scheme) 및 ARCFOUR와 같은 암호를 포함한 32768비트 암호화에 이르기까지 다양하다. 암호화 비트를 높여서 구성할수록 네트워크 대역폭을 더 많이 사용하게 되는 부작용이 생긴다. 그림 1 그림 2에서는 네트워크상에 있는 누군가가 Wireshark와 같은 네트워크 스니핑 애플리케이션을 사용하여 telnet 세션을 쉽게 볼 수 있다는 것을 알 수 있다.


그림 1. telnet 프로토콜 세션은 암호화되지 않음 
telnet 프로토콜 세션이 암호화되지 않는다는 것을 나타내는 이미지 

자주 사용하는 약어

  • API: Application programming interface
  • FTP: File Transfer Protocol
  • IETF: Internet Engineering Task Force
  • POSIX: Portable Operating System Interface for UNIX
  • RFC: Request for Comments
  • VPN: Virtual private network

telnet과 같은 안전하지 않은 "일반 텍스트" 프로토콜을 사용하면 네트워크상에 있는 누군가가 비밀번호나 기타 민감한 정보를 훔쳐 볼 수 있다.그림 1에는 telnet 연결을 통해 원격 호스트에 로그인한 사용자fsmythe가 표시되어 있다. 사용자 이름(fsmythe)과 비밀번호(r@m$20!0)를 입력하면 불행하고 의심 없는 이 telnet 사용자와 동일한 네트워크에 있는 어떤 사용자라도 이 정보를 볼 수 있다.


그림 2. SSH 프로토콜 세션은 암호화됨 
SSH 프로토콜 세션이 암호화되는 과정이 표시된 이미지 

그림 2에는 전형적인 SSH 세션에 대한 개요와 동일한 네트워크 세그먼트에 있는 다른 사용자가 암호화된 프로토콜을 어떻게 볼 수 없는지가 표시되어 있다. 주요 Linux® 및 UNIX® 배포판은 기본적으로 설치되는 SSH 패키지 버전(일반적으로 오픈 소스 OpenSSH 패키지)과 함께 제공되므로 소스를 다운로드하여 컴파일하지 않아도 된다. Linux나 UNIX 플랫폼을 사용하고 있지 않은 경우에는 지원과 연습을 위해 많은 사용자들이 애용하는 WinSCP, Putty, FileZilla, TTSSH  Cygwin(Windows 운영 체제상에 설치되는 POSIX 소프트웨어)과 같은 다양한 오프 소스 및 무료 SSH 기반 도구를 사용할 수 있다. 이러한 도구는 Windows 플랫폼에서 UNIX나 Linux 형태의 쉘 인터페이스를 제공한다.

어떤 운영 체제를 사용하든지 SSH는 일상적인 평범한 컴퓨팅 작업에 매우 긍정적인 혜택을 제공한다. SSH는 믿을 수 있으며 안전하고 유연할 뿐만 아니라 간단한 설치와 사용 그리고 구성—, 게다가 우수한 기능까지 겸비한다.


출처  : http://www.ibm.com/developerworks/kr/aix/library/au-sshsecurity/index.html

'Programming > Linux' 카테고리의 다른 글

리눅스 ls명령어  (0) 2013.03.07
ftp 명령문  (0) 2013.01.17
vi 명령어  (0) 2012.12.18
for 문을 이용한 shell script  (0) 2012.12.18
 

location 객체 속성&메서드

Programming/Javascript | 2012. 12. 30. 23:09
Posted by 오요미

<meta name = "viewport" content = "width=device-width;" charset = "utf-8" />

<script language = "javascript" type="text/javascript">

//[1] href속성 : 지정된 url로 이동

GoGo = function(){

location.href = "http://www.naver.com";

}

//[2] reload()메서드 : 현재 페이지 새로고침

function ReFresh(){

location.reload();

return true; //true를 반환하면, 버튼의 기능을 계속 실행 그렇지 않으면 이벤트 멈춤

}


//[3] 응용 : 3초 후에 지정된 URL로 이동하는 함수

function GoUrl(url){

window.setTimeout("location.href='" +url+"'", 3000);

}


</script>


<input type="button" value = "사이트로 이동" onclick = "GoGo();" />

<input type="button" value = "새로고침" onmouseover = "return ReFresh();" />

<input type = "button" value = "naver" onclick = "GoUrl('http://www.naver.com')" />

'Programming > Javascript' 카테고리의 다른 글

폼 유효성 검사(아이디, 비밀번호)  (0) 2013.01.01
history 객체 메서드&속성  (0) 2013.01.01
document 객체 속성&메서드  (0) 2012.12.30
window 객체 속성&메서드  (0) 2012.12.30
성적처리 프로그램  (0) 2012.12.30
 
블로그 이미지

오요미

공부할 수 있는 순간을 감사하며 공부하라.

카테고리

분류 전체보기 (121)
Electronics (1)
Programming (72)
Culturallife (30)
English (11)
취업 (1)
대학원 (4)
Life (1)