ようやくウェブサイトを作る上でお馴染みのHTML、CSS、JavaScriptの講義に到達。厳密にはHTMLとCSSはプログラミング言語ではないのでそれ単体では動的なWebアプリを作ることはできないが、PythonやSQLなどのプログラミング言語を組み込むことができる。今回の講義は、ウェブサイトが乗っているインターネットの仕組みからWebアプリ開発の触りまで広くカバーされた内容だった。

The internet（インターネット）

まずは、とある地点AからBに、データはインターネットを介してどのように送られるのか？基本的な用語の紹介。

  • Internet（インターネット）とは、複数のコンピュータネットワークを相互接続した、地球規模の情報通信網のことで、interとは、相互接続されたという意味。このネットワークの上にアプリケーションを作り、データを行き来させることができる。
  • Routers（ルーター）とは、CPUとメモリを備えた特殊なコンピューターで、その目的はインターネット上の他のデバイス間でケーブルまたはワイヤレスネットワークを介してデータを中継すること。
  • Protocols （プロトコル）とは、人間が物理的な握手をするのと同じように（一人が握手を求めて手を差し出すと相手も握手をしかえすように）、コンピューターが通信するために世界が合意した一連の標準的な取り決め。たとえば、0と1、またはメッセージの特定のパターンがあり、コンピューターがルーターにデータの送信先を指示するために使用する。
  • TCP/IP（ティー・シー・ピーアイピー）とは、コンピューター間でデータを送受信するための2種類のプロトコル。実世界で手紙を送る際に封筒に宛先と差出人を書くのと同じように、デジタル版でも同じようなアイディアが採用されている。この差出人アドレスと宛先アドレスを含むメッセージ（データ）をパケットと呼ぶ。
  • IP（インターネットプロトコル）とは、最新のコンピュータのソフトウェアでサポートされているプロトコルであり、コンピュータが相互にアドレス指定するための標準的な方法が含まれている。 IPアドレスは、インターネットに接続されているコンピューターの一意のアドレスであり、あるコンピューターから別のコンピューターに送信されたパケットは、宛先に到達するまでルーターを通過する。ルーターのメモリには、IPアドレスを他のルーターに接続されているケーブルにマッピングするテーブルがあり、それでパケットの転送先がわかる。
  • DNSとは、Domain Name Systemの略で、 cs50.harvard.eduなどのドメイン名をIPアドレスに変換する別の技術。 DNSは通常、最寄りのインターネットサービスプロバイダー（ISP）によってサービスとして提供されている。
  • TCPとは、Transmission Control Protocol（伝送制御プロトコル）の略で、同じIPアドレスにある単一のサーバーが、IPアドレスに追加された小さな整数であるポート番号を使用して複数のサービスを提供できるようにするプロトコル。たとえば、HTTP、HTTPS、電子メール、さらにはZoomにも、これらのプログラムがネットワークを介して通信するために使用する専用のポート番号がある。更に、パケットが伝送途中に何らかの理由で失われ、受信されなかった場合にパケットを再送信するためのメカニズムも備わっている。相手が確実にデータを受け取ったかを確認したり、データの欠落や破損を検知して再送したり、届いたデータを送信順に並べ直したりといった制御を行う。画像などの大量のデータは、パケットがすべて同じサイズになるように、より小さな塊に分割されるが（昔インターネット回線が遅い場所で、画像ファイルがカクカクと少しずつロードされていたのはこれが理由）、よって途中で一部のデータだけが届かなかったりする場合にTCPが役に立つ。
  • 以上、これらすべての技術とプロトコルを使用して、あるコンピューターから別のコンピューターにデータを送信し、インターネットの上にアプリケーションを構築することができる。

実世界の郵便の仕組みと考え方は同じという分かりやすい説明があった。

実世界に置き換えると、インターネットは郵便網、ルーターは郵便局、プロトコルは伝送経路、TCPは荷物を送るために予め決められたコード（荷物を識別するためのコードのようなもの）、IPは居場所を特定できる住所のようなもので、パケットは各郵便物（手紙、小包など）、TCP/IPは郵便をどの順番で開けるべきかを指示したもの。DNSは、長くて分かりづらい住所を「日本国領事館」と書けば荷物が届くようなもの。

　

Web development

インターネットを介して、ある地点Aから地点Bにデータを送るためにはどのような方法で送られるのかが分かった。では、そのデータの中身はどうなっているのか？

HTTP（Hypertext Transfer Protocol）は、ウェブブラウザとウェブサーバーがどのように対話するのかを取り決めたもの。HTTPでは、GET と POST の2種類のコマンドが用意されていて、GET はブラウザがあるページやファイルをリクエストするときに使い、POST は ブラウザがサーバーにデータを送るときに使う。

ここで、URLが https://www.example.com/ の場合

  • https は使用されているプロトコル。https は http のセキュリティが強いバージョンで、ブラウザとサーバー間のやり取りでパケットは暗号化されている。
  • example.com は、ドメイン名。.com はトップドメインと呼ばれ、従来はウェブサイトの種類を表していた。例えば、.com は商業用のウェブサイト、.org は組織など。それが今では100種類以上のトップドメインが存在し、それぞれにおいて誰が使用できるかのルールが多少違うものの、殆どの場合は誰でも登録することができる。
  • www はホスト名で、world wide web の略。インターネット上のサービスの一種。この www は、ウェブブラウザ上では最近は非表示になっていることが多い。
  • 最後の / は、デフォルトファイル（例えば、index.html）のリクエストをしており、ウェブサーバーがこれに対して応答する仕組みになっている。

HTTPリクエストは、次のようになる。

GET / HTTP/1.1
Host: www.example.com
...
  • GET は、ブラウザがサーバーにページやファイルをリクエストする。
  • / は、デフォルトファイルを意味する。更に詳細なリクエストをすることもでき、GET /index.html と指定する。
  • HTTPプロトコルは複数のバージョンが存在するので指定する必要があり、この例では HTTP/1.1  と 1.1 バージョンを指定している。
  • Host: www.example.com は、www.example.com のサイトに対するリクエストだということを意味する。

これに対するサーバーからの応答は次のようになる。

HTTP/1.1 200 OK
Content-Type: text/html
...
  • サーバーからは、HTTPバージョン、ステータスコード（ここでは 200 OK ）の順に返される。
  • 次に、テキスト、画像やその他の形式などのコンテンツの種類を返す。
  • そして、残りのパケット情報と続く。

また、http://www.harvard.edu とウェブブラウザにURLを入力した後に、アドレスバーを注意してみると、https://www.harvard.edu に変わっていることが分かる。ブラウザに備わっているディベロッパーツールズを使ってどのような処理が行われているのかを確認すると、（Chromeでは、View > Developer > Developer Tools > Network で確認可能）一つのウェブページを開くのに実に多くの指示が送られ、データがダウンロードされていることが分かる。また、最初の応答 301 Moved Permanently で、http://... から https://... へ自動転送されていることが分かる。

Request for www.harvard.edu with 301 Moved Permanently

　

リクエスト、応答、両方ともヘッダーと付随情報の構成で成り立っていて、ヘッダーの中の Location で、自動転送をしていることが分かる。

Request headers with GET, Host, Connection, and others
Response headers with HTTP/1.1, Content-Type, and others

　

他にもよく使われるHTTPステータスコードは、次のようなものがある。

  • 200 OK
  • 301 Moved Permanently
  • 304 Not Modified
  • 307 Temporary Redirect
  • 401 Unauthorized
  • 403 Forbidden
  • 404 Not Found
  • 418 I'm a Teapot
  • 500 Internal Server Error
  • 503 Service Unavailable
  • …

　

URLの最後に ? を繋げて q=cats と、ウェブサーバーに対してリクエストを送ることもでき、これはウェブサーバーにコマンドラインを渡すための方法として使われる。Google検索などはまさにこの方法を使っている。

GET /search?q=cats HTTP/1.1
Host: www.google.com
...

　

HTML

インターネットの仕組みとHTTPを使ってデータの送受信方法が分かったところで、今度はウェブページのコンテンツの中身を見てみる。HTML（Hypertext Markup Language）は、プログラミング言語ではなく、タグや属性を使ってウェブページに構造を加えるものである。

その構文を見てみよう。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>
            hello, title
        </title>
    </head>
    <body>
        hello, body
    </body>
</html>
  • 最初の行は、HTMLの標準規格を使っていることを宣言している。
  • 次のタグは、<html> … </html>。最初がスタートタグまたはオープンタグ（タグを開く）と呼び、2つ目がクローズタブ（タブを閉じる）。このタグは、HTMLページの最初と最後を表す。スタートタグには他の属性情報 lang="en" が入っていて、英語のページであることが分かる。翻訳する際などに、英語から別の言語に変えれば良いことがわかる。
  • <html> の中に、もう2つのタグ <head> と <body> があり、<head> の中には <title> タグがあり、ウェブサイトの名前を指定でき、ブラウザ上ではタブに表示される。 <body> の中は、ウェブサイトのコンテンツを書く。

このようにHTMLの構文は、C言語の際に学んだデータ構造と同じように捉えることができ、ツリー構造のようになっている。

HTML above mapped to a tree, with document containing html, containing head, title, "hello, title," as well as body, "hello, body"

　

ここからは代表的なタグを紹介する。

　

Paragraph（段落）

段落を指定するには、<p> タグを使う。

<!DOCTYPE html>
 
<!-- Demonstrates paragraphs -->
 
<html lang="en">
    <head>
        <title>paragraphs</title>
    </head>
    <body>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis scelerisque quam, vel hendrerit lectus viverra eu. Praesent posuere eget lectus ut faucibus. Etiam eu velit laoreet, gravida lorem in, viverra est. Cras ut purus neque. In porttitor non lorem id lobortis. Mauris gravida metus libero, quis maximus dui porta at. Donec lacinia felis consectetur venenatis scelerisque. Nulla eu nisl sollicitudin, varius velit sit amet, vehicula erat. Curabitur sollicitudin felis sit amet orci mattis, a tempus nulla pulvinar. Aliquam erat volutpat.
        </p>
        <p>
            Mauris ut dui in eros semper hendrerit. Morbi vel elit mi. Sed sit amet ex non quam dignissim dignissim et vel arcu. Pellentesque eget elementum orci. Morbi ac cursus ex. Pellentesque quis turpis blandit orci dapibus semper sed non nunc. Nulla et dolor nec lacus finibus volutpat. Sed non lorem diam. Donec feugiat interdum interdum. Vivamus et justo in enim blandit fermentum vel at elit. Phasellus eu ante vitae ligula varius aliquet. Etiam id posuere nibh.
        </p>
        <p>
            Aenean venenatis convallis ante a rhoncus. Nullam in metus vel diam vehicula tincidunt. Donec lacinia metus sem, sit amet egestas elit blandit sit amet. Nunc egestas sem quis nisl mattis semper. Pellentesque ut magna congue lorem eleifend sodales. Donec tortor tortor, aliquam vitae mollis sed, interdum ut lectus. Mauris non purus quis ipsum lacinia tincidunt.
        </p>
        <p>
            Integer at justo lacinia libero blandit aliquam ut ut dui. Quisque tincidunt facilisis venenatis. Nullam dictum odio quis lorem luctus, vel malesuada dolor luctus. Aenean placerat faucibus enim a facilisis. Maecenas eleifend quis massa sed eleifend. Ut ultricies, dui ac vulputate hendrerit, ex metus iaculis diam, vitae fermentum libero dui et ante. Phasellus suscipit, arcu ut consequat sagittis, massa urna accumsan massa, eu aliquet nulla lorem vitae arcu. Pellentesque rutrum felis et metus porta semper. Nam ac consectetur mauris.
        </p>
        <p>
            Suspendisse rutrum vestibulum odio, sed venenatis purus condimentum sed. Morbi ornare tincidunt augue eu auctor. Vivamus sagittis ac lectus at aliquet. Nulla urna mauris, interdum non nibh in, vehicula porta enim. Donec et posuere sapien. Pellentesque ultrices scelerisque ipsum, vel fermentum nibh tincidunt et. Proin gravida porta ipsum nec scelerisque. Vestibulum fringilla erat at turpis laoreet, nec hendrerit nisi scelerisque.
        </p>
        <p>
            Sed quis malesuada mi. Nam id purus quis augue sagittis pharetra. Nulla facilisi. Maecenas vel fringilla ante. Cras tristique, arcu sit amet blandit auctor, urna elit ultricies lacus, a malesuada eros dui id massa. Aliquam sem odio, pretium vel cursus eget, scelerisque at urna. Vestibulum posuere a turpis consectetur consectetur. Cras consequat, risus quis tempor egestas, nulla ipsum ornare erat, nec accumsan nibh lorem nec risus. Integer at iaculis lacus. Integer congue nunc massa, quis molestie felis pellentesque vestibulum. Nulla odio tortor, aliquam nec quam in, ornare aliquet sapien.
        </p>
    </body>
</html>

　

Headings（ヘッダー）

h タグを使えば、1 から 6 までの段階的なヘッダーを指定することができる。

<!DOCTYPE html>
 
<!-- Demonstrates headings (for chapters, sections, subsections, etc.) -->
 
<html lang="en">
 
    <head>
        <title>headings</title>
    </head>
 
    <body>
 
        <h1>One</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis scelerisque quam, vel hendrerit lectus viverra eu. Praesent posuere eget lectus ut faucibus. Etiam eu velit laoreet, gravida lorem in, viverra est. Cras ut purus neque. In porttitor non lorem id lobortis. Mauris gravida metus libero, quis maximus dui porta at. Donec lacinia felis consectetur venenatis scelerisque. Nulla eu nisl sollicitudin, varius velit sit amet, vehicula erat. Curabitur sollicitudin felis sit amet orci mattis, a tempus nulla pulvinar. Aliquam erat volutpat.
        </p>
 
        <h2>Two</h2>
        <p>
            Mauris ut dui in eros semper hendrerit. Morbi vel elit mi. Sed sit amet ex non quam dignissim dignissim et vel arcu. Pellentesque eget elementum orci. Morbi ac cursus ex. Pellentesque quis turpis blandit orci dapibus semper sed non nunc. Nulla et dolor nec lacus finibus volutpat. Sed non lorem diam. Donec feugiat interdum interdum. Vivamus et justo in enim blandit fermentum vel at elit. Phasellus eu ante vitae ligula varius aliquet. Etiam id posuere nibh.
        </p>
 
        <h3>Three</h3>
        <p>
            Aenean venenatis convallis ante a rhoncus. Nullam in metus vel diam vehicula tincidunt. Donec lacinia metus sem, sit amet egestas elit blandit sit amet. Nunc egestas sem quis nisl mattis semper. Pellentesque ut magna congue lorem eleifend sodales. Donec tortor tortor, aliquam vitae mollis sed, interdum ut lectus. Mauris non purus quis ipsum lacinia tincidunt.
        </p>
 
        <h4>Four</h4>
        <p>
            Integer at justo lacinia libero blandit aliquam ut ut dui. Quisque tincidunt facilisis venenatis. Nullam dictum odio quis lorem luctus, vel malesuada dolor luctus. Aenean placerat faucibus enim a facilisis. Maecenas eleifend quis massa sed eleifend. Ut ultricies, dui ac vulputate hendrerit, ex metus iaculis diam, vitae fermentum libero dui et ante. Phasellus suscipit, arcu ut consequat sagittis, massa urna accumsan massa, eu aliquet nulla lorem vitae arcu. Pellentesque rutrum felis et metus porta semper. Nam ac consectetur mauris.
        </p>
 
        <h5>Five</h5>
        <p>
            Suspendisse rutrum vestibulum odio, sed venenatis purus condimentum sed. Morbi ornare tincidunt augue eu auctor. Vivamus sagittis ac lectus at aliquet. Nulla urna mauris, interdum non nibh in, vehicula porta enim. Donec et posuere sapien. Pellentesque ultrices scelerisque ipsum, vel fermentum nibh tincidunt et. Proin gravida porta ipsum nec scelerisque. Vestibulum fringilla erat at turpis laoreet, nec hendrerit nisi scelerisque.
        </p>
 
        <h6>Six</h6>
        <p>
            Sed quis malesuada mi. Nam id purus quis augue sagittis pharetra. Nulla facilisi. Maecenas vel fringilla ante. Cras tristique, arcu sit amet blandit auctor, urna elit ultricies lacus, a malesuada eros dui id massa. Aliquam sem odio, pretium vel cursus eget, scelerisque at urna. Vestibulum posuere a turpis consectetur consectetur. Cras consequat, risus quis tempor egestas, nulla ipsum ornare erat, nec accumsan nibh lorem nec risus. Integer at iaculis lacus. Integer congue nunc massa, quis molestie felis pellentesque vestibulum. Nulla odio tortor, aliquam nec quam in, ornare aliquet sapien.
        </p>
 
    </body>
 
</html>

　

List （リスト）

<ul> タグで、アンオーダードリスト（番号抜きのリスト）を、 <ol> タグで、オーダーリスト（番号付きのリスト）を作ることができる。

<!DOCTYPE html>
 
<!-- Demonstrates (unordered) lists -->
 
<html lang="en">
    <head>
        <title>list</title>
    </head>
    <body>
        <ul>
            <li>foo</li>
            <li>bar</li>
            <li>baz</li>
        </ul>
    </body>
</html>

　

Table（表）

表は、<table> タグの中に、行は <tr> (table row) タグを、 列は <td> (table data)タグを使って一つ一つのセルを指定する。

<!DOCTYPE html>
 
<!-- Demonstrates table -->
 
<html lang="en">
    <head>
        <title>table</title>
    </head>
    <body>
        <table>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>*</td>
                <td>0</td>
                <td>#</td>
            </tr>
        </table>
    </body>
</html>

　

Image（画像）

画像ファイルは、<img> タグを使い、属性として alt を使えば画像に置き換わるテキストを指定でき、src (source) でサーバーにあるファイル名を書く。

<!DOCTYPE html>
 
<!-- Demonstrates image -->
 
<html lang="en">
    <head>
        <title>image</title>
    </head>
    <body>
        <!-- https://images.hollis.harvard.edu/permalink/f/100kie6/HVD_VIAolvwork671391 -->
        <img alt="Harvard University" src="harvard.jpg">
    </body>
</html>

　

Link（リンク）

<a> (anchor) タグで href 属性 (hypertext reference) を使えば、リンクの参照先を指定する。

<!DOCTYPE html>
 
<!-- Demonstrates link -->
 
<html lang="en">
    <head>
        <title>link</title>
    </head>
    <body>
       Visit <a href="image.html">Harvard</a>.
    </body>
</html>

　

Google 検索

グーグルのサーチエンジンは、次のように書くことができる。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>search</title>
    </head>
    <body>
        <form action="https://www.google.com/search" method="get">
            <input name="q" type="search">
            <input type="submit" value="Search">
        </form>
    </body>
</html>

<form> タグで action 属性にグーグルの検索用URLを、method 属性は GET を指定。その中に、<input> タグに name 属性に q を、また type 属性に submit を指定する。submit ボタンがクリックされると URLの最後に search?q=... と続き、フォームに記入したテキストが ... のところに代入される。

　

CSS

ウェブページのデザインを良くするためには CSS（Cascading Style Sheets）を使う。CSSは、プロパティ（Keyと値がペアになったもの）を使う。例えば、color: red; 。

HTML内でもCSSを組み込むことは可能で、その場合は <head> タグの中に <style> タグを作り、その中に書く。styles.css ファイルを別に作り、<link> タグで参照することもできる（こっちが一般的）。

HTML内に書く場合は、それぞれのタグに指定することも可能。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>css</title>
    </head>
    <body>
        <header style="font-size: large; text-align: center;">
            John Harvard
        </header>
        <main style="font-size: medium; text-align: center;">
            Welcome to my home page!
        </main>
        <footer style="font-size: small; text-align: center;">
            Copyright © John Harvard
        </footer>
    </body>
</html>

記号なども用意されており、&#169; はコピーライトの記号。

<body> タグにスタイルを書けば、それ以下の階層すべてに適用される。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>css</title>
    </head>
    <body style="text-align: center;">
        <header style="font-size: large;">
            John Harvard
        </header>
        <main style="font-size: medium;">
            Welcome to my home page!
        </main>
        <footer style="font-size: small;">
            Copyright © John Harvard
        </footer>
    </body>
</html>

　

<head> タグの中に <style> タグを作り、そこにスタイルを指定することも可能。

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            header
            {
                font-size: large;
                text-align: center;
            }
            main
            {
                font-size: medium;
                text-align: center;
            }
            footer
            {
                font-size: small;
                text-align: center;
            }
        </style>
        <title>css</title>
    </head>
    <body>
        <header>
            John Harvard
        </header>
        <main>
            Welcome to my home page!
        </main>
        <footer>
            Copyright © John Harvard
        </footer>
    </body>
</html>

　

もっと細かく指定することも可能。. の後にキーワードを組み合わせて、.large .medium .small のようにCSSクラスを作り、フォントのサイズに応じてクラスを分けることも可能。class="centered large" と指定すれば、何度も同じスタイルを使い回すことができ、繰り返しスタイルを指定する必要がなくなる。繰り返し指定している centered は除くことができる。

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            .centered
            {
                text-align: center;
            }
            .large
            {
                font-size: large;
            }
            .medium
            {
                font-size: medium;
            }
            .small
            {
                font-size: small;
            }
        </style>
        <title>css</title>
    </head>
    <body>
        <header class="centered large">
            John Harvard
        </header>
        <main class="centered medium">
            Welcome to my home page!
        </main>
        <footer class="centered small">
            Copyright © John Harvard
        </footer>
    </body>
</html>

他のファイルに保存してあるスタイルを参照する場合は、<link> を使う。

<!DOCTYPE html>
<html lang="en">
    <head>
        <link href="styles.css" rel="stylesheet">
        <title>css</title>
    </head>
    <body>
        <header class="centered large">
            John Harvard
        </header>
        <main class="centered medium">
            Welcome to my home page!
        </main>
        <footer class="centered small">
            Copyright © John Harvard
        </footer>
    </body>
</html>

　

a:hover を使って、<a> タグをユーザがマウスなどでホバーしたときのプロパティを指定できる。また、各 <a> に id 属性（#harvard）を使ってそれぞれ別のスタイルを指定することも可能（# で指定する）。

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            #harvard
            {
                color: #ff0000;
            }
            #yale
            {
                color: #0000ff;
            }
            a
            {
                text-decoration: none;
            }
            a:hover
            {
                text-decoration: underline;
            }
        </style>
        <title>link</title>
    </head>
    <body>
        Visit <a href="https://www.harvard.edu/" id="harvard" >Harvard</a> or <a href="https://www.yale.edu/" id="yale" >Yale</a>.
    </body>
</html>ｈ

　

JavaScript

フロントエンドのプログラミング言語は、JavaScript。JavaScriptを使えば、ブラウザの中でリアルタイムにHTMLの構文を一時的に書き換えることができる。<script> タグを使って直接コードを書くか、.js ファイルから読み込むことができる。

Python 的なところと C 的なところがある。例えば、変数の宣言はPython的。

let を使えば、どのデータ型も宣言できる。その他にも JavaScript の基本的な構文は以下の通り。

let counter = 0;
counter = counter + 1;
counter += 1;
counter++;
if (x < y)
{
}
if (x < y)
{
}
else
{
}
if (x < y)
{
}
else if (x > y)
{
}
else
{
}
while (true)
{
}
for (let i = 0; i < 3; i++)
{
}

　

それではサンプルコードを見てみよう。フォームを使って、入力された名前に「hello, name（入力された文字列がここに入る）」と動的に変える。今回は、action 属性は使わず、onsubmit を使い、return false; を返す（サーバーには何も送らずクライアントサイドの関数を呼ぶ）。

では順番にシンプルバージョンから。次のプログラムは、フォームのSubmitボタンをクリックすると、hello, body と表示される。

<!DOCTYPE html>
<html lang="en">
    <head>
        <script>
            function greet()
            {
                alert('hello, body');
            }
        </script>
        <title>hello</title>
    </head>
    <body>
        <form onsubmit="greet(); return false;">
            <input id="name" type="text">
            <input type="submit">
        </form>
    </body>
</html>

　

次に、入力された名前を返すプログラム。内側のタグには、IDに name と付けられているので、これを使うこともできる。 

<script>
    function greet()
    {
        let name = document.querySelector('#name').value;
        alert('hello, ' + name);
    }
</script>

document はグローバル変数で、JavaScriptに標準装備されている。querySelector は、HTMLのツリー構造のDOM（Document Object Model）を選択するときに使う。この例では、name という要素名を選択し、その中にある value データを取ってきている。

さらに様々な属性を追加することができる。

<form>
    <input autocomplete="off" autofocus id="name" placeholder="Name" type="text">
    <input type="submit">
</form>

　

JavaScriptでは、要素の変化を常にモニタリングすることができる（addEventListener）。もし、submit ボタンが押されるなどのユーザーアクションがあったときに、これを実行する、といったプログラミングをかける。

<script>
    function greet()
    {
        let name = document.querySelector('#name').value;
        alert('hello, ' + name);
    }
    function listen() {
        document.querySelector('form').addEventListener('submit', greet);
    }
    document.addEventListener('DOMContentLoaded', listen);
</script>

　

listen 関数では、greet 関数を引数として渡しているが、DOMContentLoaded が起こらない限り何も起こらない。

また、Python の ramda 関数のように、関数に関数を入れることもできる。listen 関数は1回しか使わないため、別で宣言する必要はなく、どんどんネストしていけば良い。

<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelector('form').addEventListener('submit', function() {
            let name = document.querySelector('#name').value;
            alert('hello, ' + name);
        });
    });
</script>

　

イベントの種類には、submit 以外にも次のようなものがある。

  • blur
  • change
  • click
  • drag
  • focus
  • keyup
  • load
  • mousedown
  • mouseover
  • mouseup
  • submit
  • touchmove
  • unload
  • ...

　

次のプログラムは、keyup イベントが起こったときにDOMに変更を加えることができる。

<!DOCTYPE html>
<html lang="en">
    <head>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                let input = document.querySelector('input');
                input.addEventListener('keyup', function(event) {
                    let name = document.querySelector('#name');
                    if (input.value) {
                        name.innerHTML = `hello, ${input.value}`;
                    }
                    else {
                        name.innerHTML = 'hello, whoever you are';
                    }
                });
            });
        </script>
        <title>hello</title>
    </head>
    <body>
        <form>
            <input autocomplete="off" autofocus placeholder="Name" type="text">
        </form>
        <p id="name"></p>
    </body>
</html>

　

ユーザーのクリック（onclick）に応じて、スタイルを変更することもできる。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>background</title>
    </head>
    <body>
        <button id="red">R</button>
        <button id="green">G</button>
        <button id="blue">B</button>
        <script>
            let body = document.querySelector('body');
            document.querySelector('#red').onclick = function() {
                body.style.backgroundColor = 'red';
            };
            document.querySelector('#green').onclick = function() {
                body.style.backgroundColor = 'green';
            };
            document.querySelector('#blue').onclick = function() {
                body.style.backgroundColor = 'blue';
            };
        </script>
    </body>
</html>

　

この他にも、フォントサイズをドロップダウンリストから選択できたり、

<!DOCTYPE html>
 
<!-- Demonstrates programmatic changes to size -->
 
<html lang="en">
    <head>
        <title>size</title>
    </head>
    <body>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in tincidunt augue. Duis imperdiet, justo ac iaculis rhoncus, erat elit dignissim mi, eu interdum velit sapien nec risus. Praesent ullamcorper nibh at volutpat aliquam. Nam sed aliquam risus. Nulla rutrum nunc augue, in varius lacus commodo in. Ut tincidunt nisi a convallis consequat. Fusce sed pulvinar nulla.
        </p>
        <select>
            <option value="xx-large">xx-large</option>
            <option value="x-large">x-large</option>
            <option value="large">large</option>
            <option selected value="initial">initial</option>
            <option value="small">small</option>
            <option value="x-small">x-small</option>
            <option value="xx-small">xx-small</option>
        </select>
        <script>
 
            document.querySelector('select').addEventListener('change', function(event) {
                document.querySelector('body').style.fontSize = this.value;
            });
 
        </script>
    </body>
</html>

　

サイトをブリンク（点滅）しているのようにデザインできたり、

<!DOCTYPE html>
 
<html lang="en">
    <head>
        <script>
 
            // Toggles visibility of greeting
            function blink()
            {
                let body = document.querySelector('body');
                if (body.style.visibility == 'hidden')
                {
                    body.style.visibility = 'visible';
                }
                else
                {
                    body.style.visibility = 'hidden';
                }
            }
 
            // Blink every 500ms
            window.setInterval(blink, 500);
 
        </script>
        <title>blink</title>
    </head>
    <body>
        hello, world
    </body>
</html>

　

GPSの座標を取得したり、（これを使えば、UberEatsなどのサービスも作れる）

<!DOCTYPE html>
 
<html lang="en">
    <head>
        <title>geolocation</title>
    </head>
    <body>
        <script>
        
            navigator.geolocation.getCurrentPosition(function(position) {
                document.write(position.coords.latitude + ", " + position.coords.longitude);
            });
 
        </script>
    </body>
</html>

　

自動入力（入力すると同時に候補の単語を表示してくれる）も実装できる。

<!DOCTYPE html>
 
<html lang="en">
 
    <head>
        <meta name="viewport" content="initial-scale=1, width=device-width">
        <title>autocomplete</title>
    </head>
 
    <body>
 
        <input autocomplete="off" autofocus placeholder="Query" type="text">
 
        <ul></ul>
 
        <script src="large.js"></script>
        <script>
    
            let input = document.querySelector('input');
            input.addEventListener('keyup', function(event) {
                let html = '';
                if (input.value) {
                    for (word of WORDS) {
                        if (word.startsWith(input.value)) {
                            html += `<li>${word}</li>`;
                        }
                    }
                }
                document.querySelector('ul').innerHTML = html;
            });
 
        </script>
 
    </body>
</html>

　

Pythonを使って他のローカルネットワークに繋がってる端末（講義の例では照明の電球）をAPI（Application Programming Interface）を使って操作することができる。

import os
import requests
USERNAME = os.getenv("USERNAME")
IP = os.getenv("IP")
URL = f"http://{IP}/api/{USERNAME}/lights/1/state"
requests.put(URL, json={"on": False})

　

このプログラムで、PUTメソッドを使って電球に信号を送ることできる。さらには、電球を点滅させることも可能。

import os
import requests
import time
USERNAME = os.getenv("USERNAME")
IP = os.getenv("IP")
URL = f"http://{IP}/api/{USERNAME}/lights/1/state"
while True:
    requests.put(URL, json={"bri": 254, "on": True})
    time.sleep(1)
    requests.put(URL, json={"on": False})
    time.sleep(1)

次回は、HTML、CSS、JavaScript、Python、SQL、すべてを繋げた話に展開する。