%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\documentclass[landscape,a4paper,twocolumn,12pt]{jarticle}
\AtBeginDvi{\special{papersize=A4L}}

\setlength{\textwidth}{268mm}
\setlength{\textheight}{174mm}
\setlength{\oddsidemargin}{-10mm}
\setlength{\evensidemargin}{-10mm}
\setlength{\topmargin}{-17mm}
\setlength{\headheight}{5mm}
\setlength{\headsep}{3mm}
\setlength{\topskip}{\baselineskip}
\columnsep=8mm
\columnseprule=0pt
\abovecaptionskip=-16pt
\belowcaptionskip=-24pt

\usepackage{graphicx,framed,verbatim,url}

\newenvironment{code}{%
    \framed
    \verbatim
  }{%
    \endverbatim
    \endframed
  }
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\begin{document}

\begin{center}
  {\large\bf �V�h�����V�X�e��}\\
  {\small \today \quad �J������ �����T���Y}
\end{center}


\section{�T�v}
�V�h�̔N�\�������ł���AJAX�A�v���P�[�V�����B
�񋟂��ꂽ�f�[�^�t�@�C��\footnote{Excel�t�@�C���B���s��3279�B}
����SQLite\footnote{��T�[�o�[/�N���C�A���g�^�̊ȈՃf�[�^�x�[�X�B
PHP5�ł͕W���Ńo���h���B}
�f�[�^�x�[�X���\�z�B
JavaScript��\textbf{DOM API}�x�[�X�̂��̂ƁA
\textbf{innerHTML}�x�[�X�̂��̂𐻍삵���B

\begin{figure}[h]
  \begin{center}
    \includegraphics[width=8cm]{img.eps}
  \end{center}
  \caption{�V�X�e���S�̐}}
\end{figure}

\begin{flushleft}{\small\bf\fbox{�@�\}}
\end{flushleft}
\begin{itemize}
\item �v���_�E�����j���[�ɂ��N���E���ꌟ��
\item �C�ӂ̍��ڂɑ΂��Ẵ��A���^�C������
\item �C�����C���G�f�B�^�ɂ��f�[�^�ҏW
\end{itemize}

\begin{flushleft}{\small\bf\fbox{�J����}}
\end{flushleft}
\begin{itemize}
\item Windows XP Home Edition Version 2002 SP2
\item XAMPP1.6.2 ( Apache 2.2.4, PHP 5.2.2, SQLite 2.8.17 )
\end{itemize}

\section{DOM API��innerHTML}
JavaScript�œ��I��HTML����������@�͑傫���Q�ɕ������B
DOM API���g���ăm�[�h�𐶐����c���[��g�ݗ��ĂĂ������@�ƁA
HTML�������innerHTML�v���p�e�B�ɑ�����Ĉ�C�ɍ����ւ��Ă��܂����@�ł���B

DOM API�͂��_��ɐ���ł������A�x���B
innerHTML��W3C�񐄏�\footnote{���Ƃ�IE�̓Ǝ��K�i�BW3C DOM�d�l�Ɋ܂܂�Ă��Ȃ��B}
�ł��邪IE�AOpera�ASafari�AGecko(N6/N7/Firefox��)���Ή����Ă���A�܂��A�����ł���B

\subsection{�\�[�X�R�[�h��r}
id��test�̃y�[�W��̃G�������g��div�G�������g��ǉ�����ꍇ�̃\�[�X�R�[�h���r����B
\subsubsection{DOM API�̃\�[�X�R�[�h}

\begin{code}
// div�G�������g����
var eDIV = document.createElement("div");
// �����ݒ�
eDIV.setAttribute("id","newDiv");
// �e�L�X�g�m�[�h�ǉ�
eDIV.appendChild(document.createTextNode("hello world"));
// �h�L�������g�ɐ��������G�������g��ǉ�
document.getElementById("test").appendChild(eDIV);
\end{code}

\subsubsection{innerHTML�̃\�[�X�R�[�h}
\begin{code}
document.getElementById("test").innerHTML = 
         "<div id=\"newDiv\">hello world</div>";
\end{code}

\section{�l�@}
��ʂ�DOM API�͒x���B�������A�N���X�u���E�U���l����ƁA�����ł��邪
innerHTML�͎g�p���ׂ��ł͂Ȃ��B
AJAX�A�v���P�[�V������DOM API���g���čŏ����̏��������ōςނ悤�ɐ݌v���ׂ��ł���B

�܂��A����˗����ꂽ���e�����������i�Ƃ���AJAX���ł��������������̂��͋^��ł���B
\section{�p��}

\begin{flushleft}{\small\bf{AJAX(Asynchrnous JavaScript + XML)}}
\end{flushleft}
2005�N2��18����Jesse James Garrett
\footnote{Ajax: A New Approach to Web Applications\\
  \url{http://www.adaptivepath.com/publications/essays/archives/000385.php}}
�ɂ�薼�t����ꂽUI(���[�U�[�C���^�[�t�F�C�X)�\�z�Z�p�̑��̂ŁA
JavaScript���g���AXMLHttpRequest�ɂ��񓯊��ʐM�𗘗p���ăf�[�^���擾���A���I�ɉ�ʂ�����������B
\begin{flushleft}{\small\bf{�N���X�u���E�U}}
\end{flushleft}
�l�X�ȃN���C�A���g�̊�(�u���E�U+OS)�ɑΉ����邱�ƁB
��ʓI�ɂ́Aprototype.js�ADojo�AjQuery�Ȃǂ�JavaScript���C�u�������g�����Ԃ̍��ق��z������B
\begin{flushleft}{\small\bf{JSON(JavaScript Object Notation)}}
\end{flushleft}
�y�ʂ̃f�[�^�����t�H�[�}�b�g�B
XML���y���p�[�X���e�ՂȂ��Ƃ���AXML�̑����
�̗p����邱�Ƃ������Ȃ��Ă���B
\begin{flushleft}{\small\bf{XMLhttpRequest}}
\end{flushleft}
HTTP�ʐM���s�����߂�JavaScript�g�ݍ��݃N���X�B���łɓǂݍ��񂾃y�[�W���炳���HTTP���N�G�X�g�𔭂��邱�Ƃ��ł��A
�y�[�W�J�ڂ��邱�ƂȂ��Ƀf�[�^�𑗎�M�ł���Ajax�̊�Z�p�ł���B

AJAX�̕����ł����񓯊��ʐM�Ƃ́AUI�������s�����C���X���b�h�Ƃ͕ʂ̃X���b�h�Ŕ񓯊��ɒʐM�������s�����Ƃł���B
����ɂ��T�[�o�[�Ƃ̒ʐM���s�Ȃ��Ă���Ԃ��A���[�U�[�̓u���E�U��ő��̍�Ƃ��s�Ȃ����Ƃ��ł���B

\begin{figure}[h]
  \begin{center}
    \includegraphics[width=12cm]{img2.eps}
  \end{center}
  \caption{Ajax�A�v���P�[�V�����ɂ�����񓯊��^�̂��Ƃ�}
\end{figure}

\begin{quote}
  \url{http://kentarok.org/wp-content/uploads/ajax-fig2.png}
\end{quote}

\end{document}
