Week 8 HTML, CSS, JavaScript
ようこそ！
- これまでの数週間で、C言語で学んだのと同じ構成要素を利用する高水準プログラミング言語であるPythonを紹介しました。今日は、それらの構成要素をHTML、CSS、JavaScriptへとさらに広げていきます。
インターネット
インターネットは、私たち全員が使用しているテクノロジーです。
これまでの数週間で培ったスキルを使って、独自のウェブページやアプリケーションを作成できます。
ARPANETは、インターネット上の最初の地点同士を接続しました。
2つの地点の間にあるドットはルーターと考えることができます。
ルーター
データをある場所から別の場所へルーティングするには、ルーティングの決定を行う必要があります。つまり、データが地点Aから地点Bへどのように転送されるかを誰かがプログラムする必要があります。
ルーターが混雑しているときにデータが別の経路を通れるように、地点Aから地点Bまでデータが複数の経路を通る様子を想像できるでしょう。データのパケットは、あるルーターから別のルーターへ、あるコンピュータから別のコンピュータへと転送されます。
TCP/IPは、コンピュータがインターネット経由で相互にデータを転送できるようにする2つのプロトコルです。
IP（インターネットプロトコル）は、コンピュータがインターネット上で互いを識別するための方法です。世界中のすべてのコンピュータは、一意のアドレスを持っています。アドレスはこの形式です：
#.#.#.#
数値は
0から255の範囲です。IPアドレスは32ビットであり、40億以上のアドレスを収容できることを意味します。128ビットを実装した新しいバージョンのIPアドレスでは、さらに多くのコンピュータを収容できます！現実の世界では、サーバーが私たちのために多くの仕事をしてくれます。
パケットは次のように構成されています：
0 1 2 3
0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|Version| IHL |Type of Service| Total Length |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| Identification |Flags| Fragment Offset |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| Time to Live | Protocol | Header Checksum |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| Source Address |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| Destination Address |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| Options | Padding |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
- パケットは標準化されています。送信元と送信先は各パケット内に保持されます。
TCP（トランスミッションコントロールプロトコル）は、送信されるパケットの順序を追跡するのに役立ちます。
さらに、TCPはウェブサービスを互いに区別するために使用されます。たとえば、
80はHTTPを表し、443はHTTPSを表すために使用されます。これらの数値はポート番号です。情報がある場所から別の場所へ送信されるとき、送信元IPアドレス、送信先IPアドレス、およびTCPポート番号が送信されます。
これらのプロトコルは、大きなファイルを複数の部分またはパケットに分割するためにも使用されます。たとえば、猫の大きな写真は複数のパケットで送信できます。パケットが失われた場合、TCP/IPはオリジンサーバーから欠落したパケットを再度要求できます。
TCPは、すべてのデータが送信および受信されたときに確認応答を返します。
DNS
- ウェブサイトにアクセスするためにIPアドレスを覚えておく必要があるとしたら、非常に面倒でしょう。
DNS（ドメインネームシステム）は、harvard.eduのようなウェブサイトのアドレスを特定のIPアドレスにルーティングするために使用される、インターネット上のサーバーの集まりです。
- DNSは単に、特定の完全修飾ドメイン名を特定のIPアドレスに関連付けるテーブルまたはデータベースです。
DHCP
DHCPは、デバイスのIPアドレスを確認するプロトコルです。
- さらに、このプロトコルは、デバイスが使用するデフォルトゲートウェイとネームサーバーを定義します。
HTTPS
HTTP（ハイパーテキスト転送プロトコル）は、ある場所から別の場所へのデータの転送を通じて、開発者が強力で有用なものを構築するために使用するアプリケーション層のプロトコルです。HTTPSは、このプロトコルの安全なバージョンです。
https://www.example.comのようなアドレスを見る際、実際にはそのアドレスの末尾に/を付けて暗黙的にアクセスしています。パスは、そのスラッシュの後に存在するものです。たとえば、
https://www.example.com/folder/file.htmlはexample.comにアクセスし、folderディレクトリに移動して、file.htmlという名前のファイルを閲覧します。.comはトップレベルドメインと呼ばれ、このアドレスに関連付けられた組織の場所またはタイプを示すために使用されます。
httpsは、そのウェブアドレスに接続するために使用されるプロトコルです。プロトコルとは、HTTPがサーバーに情報を要求するためにGETまたはPOSTのリクエストを利用することを意味します。たとえば、Google Chromeを起動し、右クリックして「検証」をクリックします。「デベロッパーツール」を開いて「Network（ネットワーク）」に移動し、「Preserve log（ログを保持）」を選択すると、「Request Headers（リクエストヘッダー）」が表示されます。そこにはGETについての言及があるはずです。これは、他のブラウザでも少し異なる方法で可能です。
たとえば、GETリクエストを発行すると、コンピュータは次のような内容をサーバーに送信する場合があります：
GET / HTTP/2
Host: www.harvard.edu
これは、www.harvard.eduで提供されているコンテンツをHTTP経由でリクエストしていることに注意してください。
通常、サーバーにリクエストを送信した後、Response Headersで次のような内容を受け取ります：
HTTP/2 200
Content-Type: text/html
これらのログを検査するこのアプローチは、必要以上に複雑かもしれません。HTTPプロトコルの動作はcs50.devで分析できます。たとえば、ターミナルウィンドウに次のように入力します：
curl -I https://www.harvard.edu/
このコマンドの出力は、サーバーのレスポンスのすべてのヘッダー値を返すことに注意してください。
- ウェブブラウザのデベロッパーツールを使用すると、上記のウェブサイトを閲覧する際のすべてのHTTPリクエストを確認できます。
さらに、ターミナルウィンドウで次のコマンドを実行します：
curl -I https://harvard.edu
301レスポンスが表示されます。これは、ブラウザに正しいウェブサイトがどこにあるかのヒントを提供します。
同様に、ターミナルウィンドウで次を実行します：
curl -I http://www.harvard.edu/
httpsのsが削除されていることに注意してください。サーバーのレスポンスは301を示し、ウェブサイトが恒久的に移動したことを意味します。
301と同様に、404というコードは、指定されたURLが見つからなかったことを意味します。他にも次のような多数のレスポンスコードがあります：
200 OK
301 Moved Permanently
302 Found
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
500エラーは、自分が作成した製品やアプリケーションに関するものである場合、常に開発者であるあなたの責任であることを覚えておく価値があります。これは来週の問題セット、そしておそらく最終プロジェクトにおいて特に重要になります！
HTML
HTML（ハイパーテキストマークアップ言語）はタグで構成されており、各タグにはそれを説明するいくつかの属性が含まれる場合があります。
ターミナルでcode hello.htmlと入力し、次のようにコードを記述します：
lang="en">
hello, title
hello, body
htmlタグがこのファイルの開始と終了の両方を行っていることに注意してください。さらに、htmlタグの動作を変更するlang属性に注目してください。また、headタグとbodyタグの両方があることにも注意してください。インデントは必須ではありませんが、階層を示唆します。
http-serverと入力してコードを提供できます。提供されたコンテンツは、非常に長いURLで利用可能になります。それをクリックすると、自分のコードによって生成されたウェブサイトにアクセスできます。このURLにアクセスすると、URLの最後にファイル名
hello.htmlが表示されることに注意してください。さらに、URLに基づくと、サーバーはポート8080経由で提供していることがわかります。
タグの階層は次のように表すことができます。この階層の知識は、後でJavaScriptを学ぶ際に役立ちます。
- ブラウザはHTMLファイルを上から下へ、左から右へと読み取ります。
HTMLでは空白とインデントは実質的に無視されるため、段落を開始および終了するには<p>段落タグを使用する必要があります。以下を考えてみましょう。
lang="en">
paragraphs
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.
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.
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.
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.
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.
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>タグで始まり、</p>タグで終わることに注意してください。
HTMLでは見出しを表現できます：
lang="en">
headings
One
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.
Two
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.
Three
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.
Four
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.
Five
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.
Six
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.
<h1>、<h2>、<h3>が異なるレベルの見出しを表していることに注意してください。
HTML内に順序なしリストを作成することもできます：
lang="en">
list
foo
- bar
- baz
<ul>タグが3つの項目を含む順序なしリストを作成していることに注意してください。
HTML内に順序付きリストを作成することもできます：
lang="en">
list
foo
- bar
- baz
<ol>タグが3つの項目を含む順序付きリストを作成していることに注意してください。
HTMLで表を作成することもできます：
lang="en">
table
1
2
3
4
5
6
7
8
9
*
0
#
表には、内部の各要素を開始および終了するタグもあります。また、HTMLのコメントの構文にも注目してください。
HTML内で画像を利用することもできます：
lang="en">
image
alt="photo of bridge" src="bridge.png">
src="bridge.png"は、画像ファイルが配置されているパスを示していることに注意してください。
HTMLに動画を含めることもできます：
lang="en">
video
controls muted>
src="video.mp4" type="video/mp4">
type属性が、これがmp4形式の動画であることを指定していることに注意してください。さらに、controlsとmutedがvideoにどのように渡されているかに注目してください。
さまざまなウェブページ間をリンクすることもできます：
lang="en">
link
Visit href="https://www.harvard.edu">Harvard.
<a>またはアンカータグを使用して、Harvardをリンク可能なテキストにしていることに注意してください。
Googleの検索を彷彿とさせるフォームを作成することもできます：
lang="en">
search
action="https://www.google.com/search" method="get">
name="q" type="search">
type="submit" value="Google Search">
formタグが開き、どのようなaction（アクション）を実行するかという属性を提供していることに注意してください。inputフィールドが含まれており、名前qとタイプとしてsearchが渡されています。
この検索を次のように改善できます：
lang="en">
search
action="https://www.google.com/search" method="get">
autocomplete="off" autofocus name="q" placeholder="Query" type="search">
Google Search
autocompleteがoffになり、autofocusが有効になっていることに注目してください。
- サイトに追加できる多くのHTML要素のほんの一部を見てきました。まだ見ていないもの（ボタン、音声ファイルなど）をサイトに追加したい場合は、「HTMLでX」とGoogle検索して正しい構文を見つけてみてください！同様に、cs50.aiを使用して、より多くのHTML機能を見つけることもできます！
正規表現
正規表現（regexes）は、ユーザーから提供されたデータが特定の形式に適合することを確認するための手段です。
次のように正規表現を利用する独自の登録ページを実装できます：
lang="en">
register
autocomplete="off" autofocus name="email" placeholder="Email" type="email">
Register
inputタグに、これがemailタイプであることを指定する属性が含まれていることに注意してください。ブラウザは、入力がメールアドレスであることを再確認することを知っています。
ブラウザはこれらの組み込み属性を使用してメールアドレスをチェックしますが、pattern属性を追加して、特定のデータのみがメールアドレスに含まれるようにすることもできます：
lang="en">
register
autocomplete="off" autofocus name="email" pattern=".+@.+\.edu" placeholder="Email" type="email">
Register
pattern属性に正規表現が渡され、メールアドレスに@記号と.eduが含まれている必要があることを示していることに注意してください。
- 正規表現の詳細については、Mozillaのドキュメントをご覧ください。さらに、cs50.aiにヒントを問い合わせることもできます。
CSS
CSS（カスケーディングスタイルシート）は、HTMLファイルの美学を微調整できるようにするマークアップ言語です。
- CSSはプロパティ（キーと値のペアを含む）で満たされています。
ターミナルでcode home.htmlと入力し、次のようにコードを記述します：
lang="en">
css
style="font-size: large; text-align: center;">
John Harvard
style="font-size: medium; text-align: center;">
Welcome to my home page!
style="font-size: small; text-align: center;">
Copyright © John Harvard
いくつかのstyle属性が<p>タグに提供されていることに注意してください。font-sizeはlarge、medium、またはsmallに設定されています。そしてtext-alignはcenterに設定されています。
正しいのですが、上記はうまく設計されていません。次のようにコードを変更することで冗長性を排除できます：
lang="en">
css
style="text-align: center">
style="font-size: large">
John Harvard
style="font-size: medium">
Welcome to my home page!
style="font-size: small">
Copyright © John Harvard
<div>タグを使用して、このHTMLファイルを特定の領域に分割していることに注意してください。text-align: centerはHTMLのbody全体で呼び出されます。body内のすべてのものはbodyの子であるため、center属性はそれらの子にカスケード（継承）されます。
HTMLには、より新しいセマンティックタグが含まれていることがわかります。コードを次のように変更できます：
lang="en">
css
style="text-align: center">
style="font-size: large">
John Harvard
style="font-size: medium">
Welcome to my home page!
style="font-size: small">
Copyright © John Harvard
headerとfooterの両方に異なるスタイルが割り当てられていることに注意してください。
スタイルと情報をすべて同じ場所に配置するこの方法は、良い習慣ではありません。次のように、スタイルの要素をファイルの先頭に移動できます：
lang="en">
.centered
{
text-align: center;
}
.large
{
font-size: large;
}
.medium
{
font-size: medium;
}
.small
{
font-size: small;
}
css
class="centered">
class="large">
John Harvard
class="medium">
Welcome to my home page!
class="small">
Copyright © John Harvard
すべてのスタイルタグが、head内のstyleタグのラッパーに配置されていることに注目してください。また、要素にcentered、large、medium、smallというクラスを割り当て、.centeredのように名前の前にドットを置いてそれらのクラスを選択していることにも注意してください。
すべてのスタイルコードをCSSファイルと呼ばれる特別なファイルに移動できることがわかります。style.cssというファイルを作成し、そこにクラスを貼り付けることができます：
.centered
{
text-align: center;
}
.large
{
font-size: large;
}
.medium
{
font-size: medium;
}
.small
{
font-size: small;
}
これは、HTMLファイルに表示されたものと逐語的に同じであることに注意してください。
次に、このHTMLファイルのCSSがどこにあるかをブラウザに伝えることができます：
lang="en">
href="style.css" rel="stylesheet">
css
class="centered">
class="large">
John Harvard
class="medium">
Welcome to my home page!
class="small">
Copyright © John Harvard
style.cssがスタイルシートとしてこのHTMLファイルにリンクされており、作成したスタイルがどこにあるかをブラウザに伝えていることに注意してください。
フレームワーク
- Pythonで活用できるサードパーティライブラリと同様に、HTMLファイルで使用できるフレームワークと呼ばれるサードパーティライブラリがあります。
Bootstrapは、HTMLを美しくし、ページをより読みやすくするためにデザイン要素を簡単に完成させるために使用できるフレームワークの1つです。
Bootstrapは、HTMLファイルのheadに次のlinkタグを追加することで利用できます：
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
bootstrap
次のHTMLを考えてみましょう：
lang="en">
phonebook
Name
Number
Carter
+1-617-495-1000
David
+1-617-495-1000
John
+1-949-468-2750
提供されたこのページのバージョンを見ると、いかに簡素であるかに注目してください。
次に、Bootstrapの使用を実装した以下のHTMLを考えてみましょう：
lang="en">
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
phonebook
class="table">
scope="col">Name
scope="col">Number
Carter
+1-617-495-1000
David
+1-949-468-2750
このウェブサイトがいかにきれいになったかに注目してください。
同様に、以前に作成した検索ページの以下の拡張を考えてみましょう：
lang="en">
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
search
class="container-fluid">
class="m-3 nav">
class="nav-item">
class="nav-link text-dark" href="https://about.google/">About
- class="nav-item">
class="nav-link text-dark" href="https://store.google.com/">Store
- class="nav-item ms-auto">
class="nav-link text-dark" href="https://www.google.com/gmail/">Gmail
- class="nav-item">
class="nav-link text-dark" href="https://www.google.com/imghp">Images
- class="nav-item">
class="nav-link text-dark" href="https://www.google.com/intl/en/about/products">
xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-grid-3x3-gap-fill" viewBox="0 0 16 16">
d="M1 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2zM1 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V7zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V7zM1 12a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-2z"/>
- class="nav-item">
class="btn btn-primary" href="https://accounts.google.com/ServiceLogin" role="button">Sign in
class="text-center">
alt="Happy Cat" class="img-fluid w-25" src="cat.gif">
action="https://www.google.com/search" class="mt-4" method="get">
autocomplete="off" autofocus class="form-control form-control-lg mb-4 mx-auto w-50" name="q" placeholder="Query" type="search">
class="btn btn-light">Google Search
class="btn btn-light" name="btnI">I'm Feeling Lucky
Bootstrapのおかげで、このバージョンのページは非常にスタイリッシュになっています。
- これについての詳細は、Bootstrapドキュメントで学ぶことができます。
JavaScript
- JavaScriptは、ウェブページ内でのインタラクティブ性を可能にするもう1つのプログラミング言語です。
JavaScriptとHTMLの両方を含むhello.htmlの以下の実装を考えてみましょう：
lang="en">
function greet()
{
alert('hello, ' + document.querySelector('#name').value);
}
hello
onsubmit="greet(); return false;">
autocomplete="off" autofocus id="name" placeholder="Name" type="text">
type="submit">
このフォームがonsubmitプロパティを使用して、ファイルの先頭にあるscriptをトリガーしていることに注意してください。スクリプトはalertを使用してアラートポップアップを作成します。#name.valueはページ上のテキストボックスに移動し、ユーザーによって入力された値を取得します。
一般的に、onsubmitとJavaScriptを混ぜることは悪い設計であると考えられています。次のようにコードを進めることができます：
lang="en">
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('form').addEventListener('submit', function(e) {
alert('hello, ' + document.querySelector('#name').value);
e.preventDefault();
});
});
hello
autocomplete="off" autofocus id="name" placeholder="Name" type="text">
type="submit">
このバージョンのコードでは、フォームのsubmitがトリガーされるのをリッスン（待機）するためのaddEventListenerを作成していることに注意してください。DOMContentLoadedによって、JavaScriptが実行される前にページ全体が読み込まれることが保証される様子に注目してください。
このコードを次のように進めることができます：
lang="en">
document.addEventListener('DOMContentLoaded', function() {
let input = document.querySelector('input');
input.addEventListener('keyup', function(event) {
let name = document.querySelector('p');
if (input.value) {
name.innerHTML = `hello, ${input.value}`;
}
else {
name.innerHTML = 'hello, whoever you are';
}
});
});
hello
autocomplete="off" autofocus placeholder="Name" type="text">
ユーザーが名前を入力すると、メモリ内でDOMが動的に更新されることに注意してください。input内に値がある場合、キーボードのkeyup（キーを離したとき）にDOMが更新されます。そうでない場合は、デフォルトのテキストが表示されます。
- JavaScriptを使用すると、メモリに読み込まれたHTMLドキュメントを動的に読み取って変更できるため、ユーザーは変更を確認するためにリロードする必要がありません。
次のHTMLを考えてみましょう：
lang="en">
background
id="red">R
id="green">G
id="blue">B
let body = document.querySelector('body');
document.querySelector('#red').addEventListener('click', function() {
body.style.backgroundColor = 'red';
});
document.querySelector('#green').addEventListener('click', function() {
body.style.backgroundColor = 'green';
});
document.querySelector('#blue').addEventListener('click', function() {
body.style.backgroundColor = 'blue';
});
JavaScriptが、特定のボタンがクリックされたときをリッスンしていることに注意してください。そのようなクリックがあると、ページ上の特定のスタイル属性が変更されます。bodyはページのボディとして定義されています。次に、イベントリスナーがいずれかのボタンのクリックを待ちます。その後、body.style.backgroundColorが変更されます。
同様に、以下を考えてみましょう：
lang="en">
// 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);
blink
hello, world
この例では、設定された間隔でテキストを点滅させます。window.setIntervalは、呼び出される関数と、関数呼び出しの間の待機時間（ミリ秒単位）の2つの引数を取ることに注意してください。
テキストを自動補完するJavaScriptの以下の実装を考えてみましょう：
lang="en">
autocomplete
autocomplete="off" autofocus placeholder="Query" type="text">
src="large.js">
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 += `${word}`;
}
}
}
document.querySelector('ul').innerHTML = html;
});
これはオートコンプリート（自動補完）のJavaScript実装です。これは、単語のリストであるlarge.jsというファイル（ここには示されていません）から取得します。
- JavaScriptの機能は数多くあり、JavaScriptドキュメントで見つけることができます。
まとめ
このレッスンでは、独自のHTMLファイルを作成し、スタイルを設定し、サードパーティのフレームワークを活用し、JavaScriptを利用する方法を学びました。具体的には、以下について議論しました…
TCP/IP
DNS
HTML
正規表現
CSS
フレームワーク
JavaScript
また次回お会いしましょう！