스케줄러 만들기-1

오늘은 새로운 프로젝트를 하나 시작했다. 동적인 스케줄러 만들기를 시도했다.

간단하게 오늘 배운것에 대해서 정리하고 글을 간략히 마치겠다.

 

1. html, css, js 파일을 각각 분리해서 연결하여 사용하기

2. js에서 html의 하위 요소에 접근하기

3. js의 다양한 기능들 중 날짜 불러오기

4. js에서 함수 선언하기(파라미터 사용)

5. html의 table 태그

6. css의 id와 class

 

1. html, css, js 파일을 각각 분리해서 연결하여 사용하기

html을 먼저 작성한 후, html의 body안에 아래와 같은 코드를 작성해준다.

경로를 입력할 시에 같은 디렉토리에 파일이 존재한다면 파일 명만 기재해도 된다.

<script type="text/javascript" src="days.js"></script> 
    <script type="text/javascript" src="write_date.js"></script> 
    <link rel="stylesheet" href="Schedule_style.css">

2. js에서 html의 하위 요소에 접근하기

하위 요소에 접근하기 전에 html에서 기재한 id를 먼저 불러와 js에서 사용할 수 있게 만들어준다.

그 방법의 코드는 아래와 같다.

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

var로 js는 변수를 선언한다. 사용하면서 보니, 딱히 int 형을 사용하는 것 처럼 형식은 지정하지 않고 사용하는 것 같다. 자세한 내용은 조금 더 공부를 해봐야 알 듯 하다.

위의 코드처럼 변수를 선언했다면 이제 그 하위 요소에 접근을 해야한다. 하위요소란, 아래의 코드에서 id week5의 밑에 선언되어있는 많은 td태그들을 의미한다.

 <tr id="week1">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td> 
         </tr>

이 하위 요소들은 js에서 아래와 같은 방법으로 접근을 할 수 있다.  하위요소 모두에게 접근하는 것이며, 접근은 배열처럼 인덱스로 한다. 첫번째 <td>는 하위요소의 [0]번째 인덱스에 해당하는 것이다.

var week1_child = week1.childNodes;
var week2_child = week2.childNodes;
var week3_child = week3.childNodes;
 
//사용 예시
week1_child[start].innerText = dates;

3. js의 다양한 기능들 중 날짜 불러오기

날짜 불러오기 기능은 비교적 쉽다. js에서 일반적으로 사용하는 방법이다.

var date = new Date();
var today = document.getElementById("today"); //html 파일에 있는 id를 선언
today.innerText = date.getFullYear() + '년 ' + (date.getMonth()+1) + '월 ' + date.getDate() + '일';
 

응용에서 여러가지로 쓸 수 있다. getDay는 특정 날짜나 현재 날짜를 입력하면, 그 날짜에 해당하는 요일을 출력한다.

 

4. js에서 함수 선언하기(파라미터 사용)

함수 선언은 다음과 같이 한다. 파라미터에 형을 특정하게 붙이지 않는다는 것을 제외하면 java와 다를것이 없어보인다.

//현재의 월 구하기, 특정 날짜의 요일 구별하기(함수)
function DayLabel(todays_date) {
    var week = new Array('일', '월', '화', '수', '목', '금', '토');
    var today = new Date(todays_date).getDay();
    var todayLabel = week[today];
 
    return todayLabel;
}

5. html의 table 태그

테이블 태그도 종류가 참 여러가지가 있다.

1. <caption>: 테이블위에 테이블의 제목을 표기

2. <thead> <tbody> <tfoot> : 표현 그대로 테이블의 처음 중간 끝을 나타내주는 것

3. <th> : 굵은 글씨로 항목의 이름을 표기하는 용도

4. <td> : 셀에 내용이 들어갈때 사용하는 태그

 

6. css의 id와 class

 1. id 사용

ex) <div id = "week1">

css -> <style> 태그 안에서 #week1{ 스타일 내용

 

2. class 사용

ex) <div class = "today"> -> html

css -> <style> 태그 안에서 .today{ 스타일 내용