달에 앉아있는 서비

수강 신청을 할 때 타임시커등 다양한 프로그램을 이용하여 서버 시간을 가져옵니다. 수강 신청 때 시간 편차에 예민하기 때문에 서버 시간을 알아 오는 것이 중요합니다. 자바스크립트를 이용하여 간단하게 서버 시간을 가져올 수 있습니다. XMLHttpRequest XMLHttpRequest 객체는 서버로부터 XML 데이터를 가져오는 데 사용합니다. 해당 객체를 이용하여 웹 페이지 로딩이 완료된 후에도 서버에 데이터를 요청하거나 서버로부터 데이터를 전송받을 수 있습니다. 여기서 XML은 extensible markup language의 약자로 HTML과 같은 마크업 언어입니다. HTML과 다른 점은 XML은 데이터를 저장하고 전송하는 목적으로 만들어져 있고, 사용자가 직접 정의할 수 있는 특징을 가지고 있습니다..

웹사이트 특히 게시글 관련으로 만들다보면 첨부파일에 따른 이미지 미리보기 기능이 필요합니다. 이번에는 간단하게 FileReader방식을 이용하여 이미지 미리보기를 구현하도록 하겠습니다. 알아야 할 것 FileReader FileReader는 input 태그중 file타입 혹은 API 요청등으로 전달한 File 또는 Blob 객체를 편리하게 처리할 수 있는 객체입니다. 해당 객체는 사용자의 조작에 따른 이벤트 핸들러를 가지고 있습니다. 여기에서는 이벤트 핸들러를 표를 통하여 소개하려고 합니다. 이벤트 핸들러 설명 onload 읽기 동작이 성공적으로 완료 하였을때 발생한다 onerror 읽기 동작에 에러가 생길때 발생한다. onabort 읽기 동작이 중단될때 발생한다 onloadstart 읽기 동작이 실행될..

최근에 동아리 활동으로 '크리스마스 선물교환'을 하였습니다. 시중에도 뽑기 프로그램이 많은데 중복 방지를 넣은 프로그램이 없어 제작하였습니다. 링크는 다음과 같습니다. https://kmsbio.github.io/presentChoice/ 선물교환 성탄절 선물교환! 한바퀴 반복으로 진행하고 그 다음 부터는 랜덤으로 진행합니다 주의사항 : 절대(enter)빈칸은 넣지마세요. Play before 지금 까지 나온 인원 kmsbio.github.io 중요한 메소드 Document.getElementByID() - html소스의 ID를 받아오는 메소드 입니다. document.getElementById("A").innerText id가 A라는 HTML소스코드 내부에 글을 추가한다. document.getElem..

많은 웹사이트들에서 글이 길어질 것을 대비하여 상단바 기능을 구현합니다. 이번 시간에는 간단하게 상단바 이동 기능을 알아보려고 합니다. + 두가지 강의를 준비하려고 합니다. 먼저는 순수하게 상단 이동 스크롤 버튼을 구현하는 것과 두 번째는 요즘 사이트들이 만드는 것처럼 몇몇 사진으로 자연스럽게 animate 되는 것을 실습을 통하여 만들어보려고 합니다. 주의사항 : 스크롤 이동 기능을 구현하려고 할때 자바스크립트보다 CSS의 영향이 더 크다고 생각합니다. 그래서 적절한 CSS숙지가 필요할 것 같습니다. (실제로 쓰는 자바스크립트 소스가 얼마 안 됨) 알아야 할 것 window (인터넷 브라우저를 다루는 객체, document는 사이트 내부 조작이라면 이것은 외부라고 생각하면된다) (ex : 즐겨찾기 탭 ..

개요 티스토리나 네이버 블로그 등 블로그 틀을 이용하여 개발자 블로그를 만들 수도 있습니다. 제가 티스토리 블로그를 선호하는 이유는 외부만 꾸미면 되고 네이버 블로그에 비해 스킨의 제약이 없고 편하기 때문에 그렇습니다. 하지만 사람들이 목적에 따라 여러 가지 방법을 사용하고는 합니다. 저는 순수하게 자신의 사이트를 가지고 싶은 분들에게 추천하는 github.io를 이용하여 웹호스팅을 하는 방법을 올리려고 합니다. 참고 저장소 제한 용량은 1GB 다 제한 트래픽은 100GB/월 이다 php, python, node.js 등을 이용한 동적인 사이트는 작동하지 않는다. 방법 *저는 깃허브 사이트를 이용하여 간단하게 웹호스팅 업로드하는 방법을 올리려고 합니다. 만약에 업데이트나 편하게 사이트를 다루려면 git를..

자바스크립트를 이용하여 시계를 만들어 보려고 합니다. 티스토리 블로그나 일부 다른 사이트에 사용하면 쉽게 사용할 수 있습니다. 모르시는 분들은 글을 아래로 내리면 코드를 스크랩해서 자신 블로그로 사용하시면 됩니다.  알아야 할 것Date() - 시간과 관계있는 자바스크립트 객체여기 글은 Date 객체의 일부 함수입니다.getFullYear()현재 년도를 부른다 (ex 2020)getMonth()현재 월을 부른다 (0~11로 부른다)getDate()현재 일을 부른다getDay()현재 요일을 부른다 (0~6으로 부른다)getHours()현재 시간을 부른다getMinuites()현재 분을 부른다getSeconds()현재 초를 부른다Document.getElementByID() - 해당 html소스의 ID를 받..