고산서당(孤山書堂)

ㆍ작성자	정제두
ㆍ작성일	개국627(2018)년 3월 31일 (토) 00:10 [자시(子時):삼경(三更)]
ㆍ문서분류	강당

ㆍ추천: 0 ㆍ열람: 418

[강의] <특강> 개국기년 자동 표시 JS코드

안녕하세요. 자운서당 훈장 정제두입니다. 제가 이번에 최준 훈장님께 허락을 얻어 고산서당에서 특강을 맡게 되었습니다. 강의 주제는 JS(자바스크립트)와 HTML을 이용한 서식 작성 방법입니다.

○ html이란?

모든 웹페이지는 html이라고 불리는 언어로 작성되어 있습니다. 사이버 조선왕조 역시 웹페이지로 구성되어 있는 하나의 홈페이지이므로 글쓰기를 할 때 html을 이용하여 링크를 걸거나 글자를 굵은 글씨로 바꾸거나 밑줄을 치거나 테이블을 만들 수도 있습니다. html에 코드에 대해서는 잘 몰라도 됩니다. 다만 줄바꿈 태그인 <BR>태그 정도는 알아두시면 좋겠습니다.

○ 자바스크립트란?

html은 마크업 언어(markup language)이고 자바스크립트는 프로그래밍 언어입니다. 자바스크립트가 프로그래밍 언어라는 것은 조건문을 넣거나 산술 계산 기능이 가능하다는 것입니다. 자바스크립트를 이용하여 HTML의 단점을 보완할 수 있습니다. html 코드의 기본은 '<'로 열고 '>'로 닫는것이며, 코드의 시작 부분은 <코드>, 끝 부분은 </코드> 이렇게 닫아주면 됩니다. 예를 들어 <html>(내용...)</html> 이런 식으로요. 자바스크립트를 적용하기 위해서는 <script>(내용...)</script>이렇게 적어주면 됩니다. 그런데 사이버 조선왕조의 게시판에서는 자바스크립트 코드가 먹히지 않습니다. 따로 메모장에서 html 파일로 저장하여 적용시켜야 합니다.

○ html 파일 만들기

마우스 우클릭 - 새로 만들기 - 텍스트 문서의 순서로 클릭하면 새 텍스트 문서가 생성됩니다. 문서를 열어 코딩을 한 뒤 다른 이름으로 저장 - 확장자명을 html 로 저장(.html)하면 html 파일이 생성됩니다. html 파일은 연결프로그램-메모장으로 편집이 가능하고, 웹브라우저로 열어서 출력 결과를 볼 수 있습니다.

◎ 알아두면 편리한 간단한 자바스크립트 명령어

○ 변수 지정

var 키워드로 변수를 지정할 수 있습니다. 변수를 지정하는 방법은 여러가지가 있지만 본 강의에서는 다음 정도만 다룹니다.

var name = value;

위와 같이 입력하면 name이라는 변수의 값이 value로 지정됩니다.

○ 날짜를 출력하는 명령어

var 키워드를 이용하여 아래와 같이 변수 지정을 해봅시다.

var today = new Date( );
var year = today.getFullYear( );
var month = today.getMonth( )+1;
var day = today.getDate( );

new Date( ), getFullYear( ), getMonth( ), getDate( ) 등은 현재의 시간을 각각 연, 월, 일로 출력하는 함수입니다. 이때 주의할 것은 월을 입력할 때 반드시 1을 더해주어야 됩니다. getMonth( )함수의 출력값이 0부터 11까지로 설정되어 있기 때문이라고 합니다. 위와 같이 변수를 지정하면, year의 값은 올해 연도인 2018로 지정되며, month는 이번 달, day는 오늘 날짜가 입력됩니다.

○ 자바스크립트의 출력문 document.write

document.write는 자바스크립트의 출력문입니다.

document.write(value1, value2, ...);

위의 형태로 입력하면 입력한 각각의 값이 출력됩니다. 만약 괄호 안에 html코드가 포함되어 있으면 적용되어 출력됩니다. 자세한 내용은 아래를 참고하시죠.

이상으로 배운 내용을 이용하여 개국기년과 오늘 날짜를 자동적으로 출력해주는 코드를 짜봅시다.

<출력 결과>
개국627년 3월 31일
서기2018년 3월 31일

변수명 year에서 1391를 뺀 것은 2018년을 627년으로 바꾸기 위함입니다. 위에서 var 명령문으로 변수들을 지정한 후 document.write 명령문을 사용하여 입력합니다. var로 지정한 변수는 document.write 명령문 안에 변수명으로 입력하면 되고 기타 입력하고 싶은 내용은 ""로 묶어 입력하면 됩니다. ""안의 띄어쓰기도 출력이 되니 띄어쓰기도 넣어 주세요. 각 입력 내용의 연결은 구분자로 콤마(,)를 넣어주면 됩니다.

위의 예제 코드에서 <BR>태그로 줄바꿈을 하여 두 줄을 입력하였는데요.

html/java script 연습 사이트(https://www.w3schools.com/js/tryit.asp?filename=tryjs_myfirst)에서 위 코드를 출력해봅시다. (html파일을 만들어서 열어보셔도 됩니다.)

첫 줄에는 개국627년 오늘날짜가 표기되고 다음 줄에는 서기2018년 오늘날짜가 표기됩니다. 줄바꿈 태그인 <BR>도 깔끔하게 적용된 것이 보이시죠? 날짜는 매일 바뀌므로 만약 내일 저 코드를 적용하면 결과물은 개국627년 4월 1일과 같이 바뀌어 출력될 것입니다.

이러한 코드를 이용하며 보다 편리한 서식을 작성할 수 있습니다.

서식에서 날짜 부분이 본조 자체 템플렛 서식대로 "개국62_년 _월 _일 ___(이름)" 이렇게 적혀있는 것을 이용하는 것이 편리하겠습니까. 아니면 자동으로 오늘 날짜로 표시되는 것이 편리하겠습니까.

자바스크립트를 활용하면 귀차니즘을 해결할 수 있습니다.

다음 강의에서는 본격적으로 공문 양식을 제작해 보는 시간을 갖겠습니다.

http://www.1392.org/bbs?laed41:404