[音楽再生] DAVID Jマラン:すべての権利、戻って歓迎します。 これはCS50です。 これは週7の終わりです。 そして、それはそのスカベンジャーの終わりです 問題の狩りは4を設定 あなたが思い出すかもしれない。 のすべてを回復した後 スタッフのそれらのJPEG、 あなたが好きな場合は、チャレンジした できるだけ多くを自分で撮影する することができますように、これらの人々の。 私たちは、提出の全体の束を持って 過去数週間で、 正午前に確かに、かなりの数の右 今日、そのうちのいくつかは、ここにするものである アネンバーグlike--見えるin--ここにキャッチ 営業時間は、ここ1でホール ニックとのローウェル·ハウスで。 ここでは携帯電話に巻き込まれるラモンだ。 これはCS50ランチにあった。 これはジェイソンSkypingとあった より創造的な同級生、 誰が彼にこのように電話をかけ。 私たちは、これが何であったかわからない。 [笑い] DAVID Jマラン:しかし それはギガバイト価値がある。 ここではチャンは、誰であるか 文字通りステージから走った 1を撮影してくるのを防ぐために 一日が、最終的に逮捕された。 ここでニックはある。 ここでニックはある。 ここでニックはある。 そしてここでアリソンはフィールドによってダウンしています。 そしてZamylaも発見された 社交競争で。 だから我々は通過します これらの写真は、把握 誰が提出されたほとんどの 最古の、そして報酬 1素晴らしい賞品として、 スペックに約束した。 そして、我々はまた、約フォローアップします 関与していたスペース。 announcements--ので昼食のカップル 1:15 PMに、再び、今週の金曜日です。 あなたは私たちに参加したい場合は、 ここでそのURLにRSVP。 ジェイソンは1からここに再び表示されます 年のセクションのカップル 背中、起こっている ハロウィンに落下する。 そして実際、彼が扮 その特定の年のカボチャ。 あなたはこのセクションを見ると 彼の2011年から区間の 8、あなたが興味があれば、 CS50.tvで、私は思います これは、年でした 彼の空気ポンプが働いていた。 あなたはそれから見ると 2012年にも同じようなセクション、 あなたは、はるかに収縮し、このジェイソンが表示されます スーツは、もはや機能していないので、 唯一言うことである 今週の金曜日、あなたが希望の場合 Davenでカボチャを彫るのが好き そしてゲイブなどは、ヘッドにRSVP cs50.harvard.eduアドレスにある。 それはとても楽しいことを約束。 Daven、私たちは言われ、彫刻しているしている 彼の人生のすべてをカボチャ。 ブラジルからのガブリエルは決してありません ハロウィン用のカボチャを刻んでいた。 彼は学ぶように彼らとがある。 セミナー、meanwhile-- ので、あなたはすぐに学びます 私たちの期待が探しているものについて 本質的に最終的なプロジェクト、 まで煮詰めるます 設計と実装 興味のある任意のプロジェクトに対して最も 承認の対象とはいえ、あなた、 そして、あなたの指導の仲間から指導。 年末に向けて 学期、私たちは数を導入 オプションのクラスであるセミナーの 指導フェロー、ハーバード率いる スタッフ、全体ではもちろんの友人 さまざまなトピックのキャンパス、その 接線方向にある もちろんの基礎となるシラバス それにもかかわらず、適用、楽しく、 潜在的な最終的なプロジェクトのために異なる。 例えば、第1、よろしければ そこに、そのURLに頭を登録します。 そして、これはためにラインナップです 今年だけのセミナー。 しかし、我々は数十を持って実現する 過去数年からセミナー、すべての セミナーメニューにリンクされている もちろんのウェブサイトのオプション。 だから、あなたが考えている場合は、 あなたの快適ゾーンを越えて行く またはいくつかの新しいスキルを拾う、 例えば、iPhoneのプログラミング スウィフト、新しい言語でのアプリ アップルまたはObjective-Cのから やAndroidのアプリやプログラミング[?合図?] 電球、またはトピックのいずれか ここより、原因チェックアップ 登録ページアウト。 だから我々が始まり、上の結論 HTTPを見てと月曜日。 だから、迅速refresher-- HTTP、 ハイパーテキスト転送プロトコル。 しかし、それは本当に何を意味するのでしょうか? それは本当に何を意味するのでしょうか? その手はあり​​ますか? 私はあなただけであなたの頭を悩まている知っている。 しかし、あなたは、HTTPが何であるかを提案したいですか? 聴衆:どのようにコンピュータ [聞こえない]と通信します。 DAVID Jマラン:私は最後の部分を逃した。 コンピュータはwith--通信する方法 聴衆:インターネットサーバ。 DAVID Jマラン:インターネット付きGood-- サーバ、および具体的には、Webサーバ。 リコールので、一束あります インターネット上のサービス、そのうちのいくつか あなたがチャットの間、毎日、おそらく使用 とメッセージ、チャット、およびWeb、および電子メール、 等が挙げられる。 とHTTPだけです プロトコルそのWebブラウザ と通信するときに話す Webサーバ、およびその逆。 そしてアナログ 人間の世界では、可能性があります 私はいくつかを振るために私の手を差し伸べる 他の人間の、彼または彼女 拡張することで認めて 彼または彼女の手にも。 だから、それはただのプロトコルですが、 一連の規則。 そして、それらの規則は確かに何ですか? まあ、それはちょうどに集約 前後にメッセージを送信する、 我々はここで描かれているように。 そしていくつかの方法であります そのあなたがこれらのメッセージを送信することができます。 そしておそらく最も 共通はGETとして知られています。 そして、我々は、コントラストが表示されます この長い前。 しかし、ブラウザからのGETリクエスト サーバにだけこのようになります。 それが置くことをテキストの束だ 仮想エンベロープの内側。 そのエンベロープの外側に 詳細のカップルのピースを移動します。 に行くために必要なもの いわば封筒、 のような要求を得るために この私からWebサーバへ? うん。 読者:あなたのIPアドレス。 DAVID Jマラン:私のIPアドレス Fromフィールドで、いわば、 そしてもちろん、 受信者のIPアドレス。 しかし、ウェブ·パケットの場合には、 我々はもう少し詳細が必要です それはちょうどするのに十分ではありません サーバに封筒を送って、 そのサーバーは、可能性があるため さまざまなタイプのリスニング インターネットトラフィックの。 だから我々は他に何が必要なのですか 受信者のIP以外にも? うん? 読者:それは、TCPですか? DAVID Jマラン:良い。 TCP-- 聴衆:アドレス。 DAVID Jマラン:住所、 またはポート、それが呼ばれるように。 近いが、TCPポート番号。 そして、これらの束があります。 しかし、確かにほとんどの おなじみのはず結局 デフォルトである80も 一つのWebトラフィックに使用。 そしてもうお馴染み 1はすぐに443になります セキュアなWebのために使用される トラフィック、httpsで始まるURL。 だから、これは何が起こっている その封筒の内側。 とGET /ちょうど、与えることを意味 私はデフォルトのWebページ。 私にハードのルートを与える そのWebサーバー上に駆動します。 うまくいけば、ウェブ サーバーは、[OK]を、で応答します ただで数200、 すべて、はい、と言っ大会 確かにOKです。 こちらのページです。 ウェブページのタイプには、起こっている テキストであるが、より具体的には、HTML、 どの我々は戻って飛び込むしようとしています。 ドットドットだけドット 手段、ここではHTMLです。 そしてそれはどこだ、私たち 今日の話を拾う、 実際にHTMLを書いて、 どのハイパーテキストマークアップ言語、 言語であるもので ウェブページが書き込まれる。 これは、プログラミング言語ではありません。 何の機能がありません またはループまたは条件。 これは、マークアップ言語ですが、 同様に今日も参照してください。 それはあなたが指定することができます 構造化型にはめるする方法 審美的にWebページ。 だから、これは1つだった そしてページのみ、私たちは本当に 簡潔にあれば月曜日に、見た。 といくつかに気付く 顕著な特性。 オープン角度付きがたくさんあり​​ます ブラケットと近い角度付きブラケット。 角度のついたものとの間での ブラケットは言葉です。 そして、我々は開始するつもりだ それらの単語タグを呼び出す。 だから、オープンブラケットヘッド と閉じブラケットヘッド 開閉タグがあり、 または開始タグと終了タグ それぞれ、HTML要素の、 我々はそれを呼ぶことにしますように、頭と呼ばれる。 そして、同じ専門用語が適用されます HTML内など身体へ。 そして素敵なものですそれは HTML--そして実際、我々はよ その上でひどく少し時間を過ごす、 あなたは、ほとんどがちょうど把握しますので、 ときにそれが持っているものの特徴 実際に具体的な問題を抱えている あなたがそれを見つけることができますsolve--する ブラウザはかなりダムです。 それはちょうどとは違っていないdo--になるだろう computer--何をすることを教え。 だからあなたが開いているとき 非常に上部のブラケットのHTML そこに、その本質 ただねえ、ブラウザ、意味、 ここではHTMLで書かれたWebページが付属しています。 それは、オープンブラケットを見るとき 頭だけを意味し、 ねえ、ブラウザは、ここに頭が来る、または 私のWebページの最上部。 それは、閉じブラケットを見るとき 頭部、ちょうど意味、ちょっと、 それは頭のためにそれだ。 何か他のもののためにスタンバイ。 そして何か他のものであること どうやら体になるだろう。 そして、あなたは同じように、タグを持っていないとき あなただけこんにちは、カンマ、世界を持っている、 それはちょうどその生のテキストになるだろう 最終的に画面に表示されます。 さて、あなたはあまりにもわかります ここでインデント。 あなたはおそらく推測することができ どのように我々はそれをstylizingいる。 私は、タグを開くたびに、 いわば、私がインデント。 私は閉じてたびに タグ、私はアンインデント、 中括弧とその精神においては似た。 そして、それを超えて、私は親切だ 私の判断を使用する。 私は打つ気にしませんでしたお知らせ そのタイトルタグの内側に入力します。 なぜ? まあ、私はちょうどそれが見えた決定 私には少しクリーナー、ヒト、 ちょうどそれをやって気にしないように。 だから、再び、いくつかがあります 判決は、単に呼び出す Cまたは任意の言語でありますように。 しかし、あまりにも気づくこのインデントは、その メンタルモデルに向いている、 オーバーそれを複雑にしないように。 しかし、ツリー、右? あなたがウェブを考える場合 ページ、明らかに書かれた このような、あるとして うまく、そのようにインデント あなたはほとんど開いてブラケットと考えることができます HTML閉ブラケットタグが画定されている ノードのルート、家系図 木々のスタイルでスタイルノード 我々は先週の金曜日を見た。 そして実際、我々はここで、右側にあります 私たちは、DOM、D-O-M、ドキュメントと呼ぶことにします何 オブジェクトモデル、というのがファンシーな方法 そのHTMLを表しツリー。 そしてHTMLは、私たちが言うだろう、持っていることに気付く 家系図、二人の子供のように。 左側にヘッドである。 右側に体がある。 そして、ちょうど愚かな思考運動など、 ヘッドは、当然のことながら、どのように多くの子供があります この構造によれば? だから1、title-- そして我々が持っている理由です 矢印は、タイトルに頭から行く。 だから、その人であるかのようだ 家系図は一つの子孫であった。 その後、タイトル自体ができ あまりにも子供を持っていると言うこと。 HTMLが持っていたことを思い出してください こんにちは、カンマ、その下の世界。 そして、私は単に以内にそれを描いた 代わりに四角形の楕円形だけ そのたとえ意味的に伝えるために それはいわば、ツリー内のノードですが、 それは一種の根本的に違う。 それはタグではありません。 またはより適切に、それは要素ではありません。 あなたはかどうかは、単なるテキストノードだ。 しかし、これらは完全にある 任意の人間の慣習。 これはちょうど今の私の方法です 骨材として私はよを表す 文書を呼び出します。 余談として、時の事 スーパー左上、 オープンブラケット感嘆符ドキュメント 型HTMLは、これは、タグのように見える それはどこで愚かなコーナーケースです それはコピー&ペースト、ただそこにある ブラウザを指示する これは、HTMLバージョン5である。 世界はどのような変化し続け ページ内のコードの最初の行は次のようになります。 これは単にバージョン5を意味します。 だから、それはかなりありません 他人のように見える。 それとので、すべての権利 あなたが今感謝します、と述べ このかなりこの愚かな タトゥー誰かが得た。 [笑い] DAVID Jマラン:すべての権利、 そして今、実際にダイビングしてみましょう これで何かをするに。 あなたは、その最後の時間を思い出すだろう 私はCS50アプライアンスを開いた と私はとして何かをした 開放geditのような単純な。 と私も上のファイルを保存した 私のdesktop--どこspecial-- hello.htmlとして。 だから私はそれをやらせる again-- hello.htmlを入力してください。 そして今、このファイルでは、私はするつもりだ 先に行くと、ちょうど何を私達を複製 ドキュメントタイプのHTM​​L saw--それから私はするつもりです オープンブラケットHTMLはブラケットを閉じてください。 そして私は先制するつもりです 開いてタグを閉じます。 なぜ? ちょうどので、私は後で忘れないでください。 これは、開口部のように、ちょうど良いプラクティスです と一斉に中括弧を閉じる。 その後次に何が来たの? あなたは入れ墨と考えることができます。 聴衆:頭。 DAVID Jマラン:頭。 その後、ここで、私は 私が思うに、タイトルを持っていた。 タイトルは任意だった、 こんにちは、世界に近いタイトル。 その後、ここでダウンして、体の 我々はbodyタグを閉じcourse--。 その後ちょうどやや冗長に、 私がダウンして、ここで同じことをしていた。 だから私は、これはウェブページであると主張している。 これは何かある 今ウェブ上で住むことができる、 でも当然のも、それは文字通りの 今、私のデスクトップ上に住んでいる。 しかし、確かに、私はgeditのを最小限に抑える場合には、 私は私のデスクトップのアイコンを表示されます。 これは、アプライアンスであっても、 あなたは、Mac OS上でこれを行うことができます テキストエディットの有無にかかわらず でも、メモ帳を使用してWindows。 そして、私は先に行くと、ダブルクリックした場合 それも、としてみましょう、うまくselect-- ので、それを選択しない Chromeは開いていない。 それでは先に行くとChromeを開いてみましょう。 その後のオープンについては、コマンド-Oを行う そして、私のデスクトップに移動します そのファイルを開きます。 つまり、ブラウザがどのように解釈するかである HTML、上から下には、左から右へ。 ねえ、ブラウザがここにはHTMLです。 ここでは頭です。 ここではタイトルです。 ここでボディです。 そして実際に、これはどのようにある そのウェブページをレンダリングする。 しかし、URLを気づく。 あなたはどれも、この特定を引き上げることができなかった 今すぐあなたのラップトップ上のページ、 も、あなたの内側 そのURLを経由して、アプライアンス、 ファイルので://は、それが実際だことを示し 私のファイルシステム上の、私のハードドライブ、 ではないあなた。 だから、これはすべてのことは有用ではありません。 それでは向かって移動しましょう 実際のWebサーバーを使用。 そして、それはCS50アプライアンスが判明 ここだけの環境以上のものです あなたは、Cコードを記述し、コンパイルすることができます そして、これまで行ってきたようにそれを実行します。 また、により構成されている 典型的なウェブを表現するスタッフ インターネット上のサーバー、 あなたが支払うかもしれない1 いわゆるクラウド内でのOne。 そして、それは実行している 標準的なフリーオープンソース ソフトウェアは、例えば、何か おそらくと呼ばれるアパッチ、 依然として最も人気のあるWeb 世界でのサーバーソフトウェア ウェブサイトの何千人もが今日使用すること。 そしてそれはまた、さえあります MySQLのようなソフトウェア、 どのデータベース·サーバである 我々は最終的にに買ってあげることを、 唯一言うことである 私は治療を開始することができ 本格的なサ​​ーバーとしての私のアプライアンス ことを私は他の場所のために払っていないよ。 それはちょうどのために自分のラップトップ上で住んでいる 開発および便宜上の目的のために。 それでは、先に行くとしましょう これを利用する。 私が先に行くつもりだと ターミナルウィンドウを開きます。 そして、私は先に行くつもりだと 最初私は、実際にmove-- 私のデスクトップに移動する予定。 私はlsコマンドを実行すると、hello.htmlあります。 そして、私は行くつもりです 先行して使用を開始 私たちがした新しいディレクトリ 今日の前に使用されていません。 hello.html--私は移動するつもりです 仮想hosts--用../vhostsへ その後future--とのそれの詳細 localhostと呼ばれるディレクトリに、 ほとんどに与えられたニックネームはある 任意のコンピュータ、それはMac、Windowsパソコンのかどうか、 その後またはLinuxコンピュータ、および 特に我々のディレクトリに、 スタッフはすでにときに作成 あなたが呼ばれるアプライアンスをダウンロードした パブリック。 その名前は、何かを示唆するように 私は、理論的には、このフォルダに入れる 今になるだろう 公共、少なくとも人々に ダイレクトを持っている人 私のコンピュータへの接続。 だから今私が先に行くとしましょう その同じディレクトリにcdを行う 私は何見ることができます 上行くとタイプLS。 そして実際、それはだ そこに唯一のもの。 私は今、私はこれを入れているので、と主張している ディレクトリ内hello.htmlファイル ディレクトリの公共の内側と呼ばれる ディレクトリの内側と呼ばれるローカルホスト これ、バーチャルホストと呼ばれる CS50のスタッフのおかげ なるように事前に構成されている Webサーバーのルート、 私は今、うまくいけばこれを行うことができます。 私は、新しいタブを開くつもりです。 そして、私はファイルにしない行くつもりです://。 私が実際に使用するつもりだ HTTP / localhostを、どの 再び、ニックネームはある 私自身のサーバー用。 そして私は何に行くつもりです ただ明確にする、ファイル名? この物語は、おそらくどこに行くのですか? hello.html。 換言すれば、私は今までこの欲しい 私自身のコンピュータ、私自身のアプライアンスは、ある それは実際のサーバーだかのように。 そのニックネームはlocalhostです。 しかし、localhostの考えなど Facebook.com google.com、何でも。 それはちょうど私のローカル名です。 そして私が望む最後のはです ハードドライブのルート、いわば、 またはウェブサーバのルート その後スラッシュをエルゴと ファイル名のhello.html。 私はズームアウトし、Enterキーを押してみましょう。 そして実際、今私のWebページがある。 だから、少し違う。 そして、それは同じようにがっかりだ。 これは、古いバージョンです。 私は戻ってフォントを縮小してみましょう。 これは古いです。 これが新たに追加されました。 しかし、根本的に何が起こっている 現在、HTTPが使用されていることである。 それではこのもう少し明確にしてみましょうか、 あなたがする場合は、もう少し複雑。 私は右下へ行こう 私のアプライアンスの隅。 そして、すべてこのことに気づく 時間は、数がなされています。 つまり、固有のアドレスである あなたのCS50アプライアンスの。 それは、プライベートアドレスだ 172.16によって暗示として、 これだけであなただけの物理的意味 このWebサーバにアクセスすることができます。 すべてがファイアウォールされており、 素敵な休息から保護 このため、世界のアドレッシング。 私が行けば、今でも気付く ではない私のアプライアンスでこのアドレス、 が、Mac OS--に私が行くよ こっち戻ります。 これは今私のMacです。 そして今、私は開くつもりだ ここでのChromeのこのバージョン。 そして、私は、httpに行くつもりです。//172.16.25 /私はrest-- 133を忘れる。 だから私は私のMacから訪問するつもりだ そのIPアドレスは入力し/hello.html。 そして今、私は自分のMacから参照してください。 のMy CS50アプライアンス、その IPアドレスは、ということです 数、実際に動作している インターネット上のウェブサーバのように。 それはに簡単に素敵なを持っていません Facebook.comのように名前を覚えて、 それはHTTPを使っている どうやら、たとえクローム 種類の世界を簡素化されている 私たちのためではなく、HTTPを私たちに示していない。 しかし、これは確かに、まさにそれである。 Chromeはほんの一部を保存している このごろキーストローク。 そして、それは我々が今見ているものだ。 だから、すべての罰金と良いことだ。 しかし、それはかなりがっかりページです。 私は中に入って何かをやってみましょう 今少し異なる。 だから私はgeditのに戻ってみましょう。 代わりにハローの、 世界は、の画像を入れてみましょう。 そして、私は私が行かせbefore--から主張 私のlocalhostのディレクトリ公衆へ。 そして、私が先に行くと、コピーしてみましょう 今日からのファイルの全体の束 私のDropboxフォルダからこちらへ。 今、私はlsと入力すると、見て すべてのこれらのファイルで 私はによって配布したので 今日の事前にコースのウェブサイト、 一つは、まだhello.htmlある。 だから1があります。 そして、この愚かな1をリコール 最後time-- cat.jpgから。 だから私は、埋め込むしてみましょう 私のWebページの内部cat.jpg。 私が先に行くつもりです そして、cat.jpgを行い保存します。 私はクロームに戻ってみましょう。 そして私は、ズームインしましょう フォントと今リロード。 おっと、私はこれをどこに置く? Standby--私はまだ古いを持っている 私のデスクトップのオープンからバージョン。 だから私の、私のバーチャルホストに行こう localhostを、私のパブリック、およびhello.html。 だから今私が先に行くとしましょう 身体の内側cat.jpgを言う 私はそれになりたい場所 表示され、リロード。 もちろん、これは正しくありません。 だから私は、ブラウザを少し伝える必要があります もっと意図的に私はそれが何をしたいか。 単純に名前を入力している 明らかに十分ではない。 だから、別のがあったことを思い出す タグ、画像、略してIMG。 それはちょうどので、人間だ タイプフル言葉が好きではありません。 そして、我々は、ソース= "cat.jpg"を行うことができます。 そして今、私は何をするつもりです ここでは異なる一つのこと。 のにもかかわらず、すべての 我々のタグは、これまで持っている この概念を持っていた 開始タグと終了タグ それは本当にありません 画像用のセンス、右? イメージは、どちらかそこがあるか。 だから人間が来た 単純な規則で最大。 あなたは、両方の可能なタグを持っている場合 同じtime--で開始および終了 ただspeak--するので、それは、空にすることができます タグの内側にスラッシュを入れて 最後の最後で。 今、私は私のブラウザに戻ってみましょう。 くそーリロードを打つ、何かが間違っている。 あなたはおそらくこれを見てきました 時折ウェブ上、 場合でも、それはあなたのせいではなかっだ。 これは、Webサーバのせいです。 何頌歌これが示しているように思わ? それは壊れている。 画像が属するところである。 うん? 聴衆:しかし、それはしません 画像へのアクセス権を持っている。 DAVID Jマラン:それはない 画像へのアクセス権を持っている。 その、またはさらに悪いことに、多分 それも存在しません。 我々はそれを診断できない場合は、見てみましょう。 前回からリコールすれば、その Chromeで、アプライアンスでは、 あるいはあなたのMacまたはPC上で、 あなたが開発者メニューに移動 と開発者ツールに行く オプション、おそらくあなたがした 今までずっとかを使用していない。 そして、私はネットワークに行けば とページをリロード、 それでは実際にはHTTPを見てみましょう 行われている要求。 hello.htmlがあるように見えます したがって200、確かにOK。 しかしcat.jpgは403である。 だから、404ではありません。 ファイルは、おそらく存在します。 403は禁止を意味します。 だから、これは少し混乱しています。 私は戻って行くつもりです 私の端末ウィンドウに。 私はここまで拡大してみましょう。 そして、私はlsとやらせる。 それらの同じファイルがあります。 今、私はLS-Lをやらせる、 あなたはおそらく済ませた ファイルを見るために前に使用 多分サイズやタイムスタンプ。 そして、我々は全体の束を参照してください 圧倒的な情報。 しかし、いくつかの詳細に注目してください。 ここでは、この中でhello.htmlだ 行はこことここcat.jpgだ。 そして、それはあることだけで、アプライアンスの JPEGの強調表示によるユーザーフレンドリー このような紫で。 しかし、ほかに何かすることは横に異なっている ファイルサイズとファイル名? 読者:[聞こえない]。 DAVID Jマラン:ええ、あります さらに2つのRはこっち。 hello.htmlが起こったかに注目してください。 だから、名前のことが判明 このディレクトリの国民が重要です。 このディレクトリには何も パブリックであることを意味する。 しかし、それは十分ではありません ちょうどそこにファイルをドロップします。 また、変更する必要があります ファイルのモード のパーミッションを変更 ではない積極的にファイル デフォルトの設定であること、 これは私が読むことができるということです と私は所有者である、それを書く。 私は、全世界がみんなにしたい いわば、私のファイルを読むことができる。 読むだけでそれを見ることを意味します。 そして実際、あなたが問題に見るよう 7を設定し、それがどのようなこれらの研究の平均です。 これらの二つのRの平均値は、誰を聞かせて 他の世界でも、それを読む 特に今その それは、このディレクトリにあります。 だから、これを修正する最も簡単な方法はにある 私のプロンプトに移動し、変更のためには、chmodを行う モードその後完全に、+ rを行い、 誰もが、すべてに加え、読み取りのためのR、 と入力し、Enter cat.jpg。 何も、起こらないように見えるもの 通常は良い​​事を意味します。 今again--だから、LS-L cat.jpgを見てみましょう。 そして、この許可 変更されているように見える。 余談として、あなたが作る場合は、 ミスし、例えば、 ちょうど私がエッセイをknow--ませんyour--た 事故による公的にアクセス可能な、 あなたは反対のことを行うことができ、-rはchmodする。 率直に言っても、それはすべきでない publicディレクトリにある とにかくそれが心配だ場合。 だから今のはに戻ってみましょう 私のブラウザとリロード。 そして、私はクリックするつもりです 少しゴーストバスターズ のその部分をクリアするシンボル 画面には、私たちは新しい要求を見ることができます。 そして実際、ここにある 前から不機嫌猫。 しかし、もっと重要なのは、 技術的には、そこにある 番号200、その 我々はそれがOKだことを意味します。 すべての権利、それはすべての罰金と良いことだそう。 しかし、我々は行っていない ウェブサイトの最高の、 また、私たちはあまりにもハードしようとしている ウェブサイトのファンシー今日を作る。 しかし、ここで、少なくとも何かをやらせる カタカタ前にスーパー馴染み 他のいくつかのタグをオフにします。 だから私はちょうどここに猫を望んでいないと仮定します。 私は実際にこれをするとします 猫は何かにリンクする。 私はともかく、例えば このような何かを。 ためのアンカーのhrefのため ハイパーリファレンスequals-- そしてちょうど何かをやらせる www.google.comに近いような 閉じ括弧を引用。 そして今、猫を検索します。 閉じるアンカータグ。 だから、これは1つの並べ替えを持って 根本的に新しいディテールの。 もちろん、タグが、異なっている。 これは、アンカーの名前Aの HREFまたはハイパー参照。 しかし、もっと重要なのは、あります ここで、この構文機能。 これは、我々が呼び出しを開始しますものです ていないタグ、属性。 そして属性は、そのものです タグの動作を変更します。 この属性、hrefの手段 このアンカーの動作を変更 それがクリックさたときに、 それはここに、このURLに行きます。 そしてもちろん、そのURLは、Googleである。 一方、これは何ですか テキストはここになるだろう? まあ、それはなるだろう 実際にどのような人間 下線のように見ている リンク、そのような単純な。 それでは、これを試してみましょう。 私はそれを保存してみましょう。 私はhello.htmlまだよ。 しかし、オンラインのバージョンでは、あなたが表示されます 私たちは、準備されたプレ実際のファイル名。 私が先に行くと、リロードしてみましょう。 そして今、それは非常にです それでもがっかりページ。 しかし、私は上にマウスを移動した場合there-- そしてそれは少し小さいですが、 but--あなたが底に見ることができます 画面の左上隅、 それは確かにgoogle.comになるだろう。 私はそれをクリックした場合と、それは意志 私に実際のGoogleへの道を泡立て器。 しかし、ここでの機会に気づく ただ余談として搾取、。 そして、私たちは相互に戻ってくる 長い前に、セキュリティの問題。 この二分法がありますので あなたが行くとあなたの言うところの間に、 あなたのような何かができる this-- http://www.google.com。 [OK]を、今私がリロードした場合 そのページを保存した後、 私はGoogleに行くつもりのように見えます。 しかし、理由はありません、私 Googleに行かなければならない、右? 私は実際のような何かに行くことができる badguy.com、こっちのページをリロードしてください。 と通知は、それはまだGoogleのように見えます。 そして、私はシャープだ場合にのみ、 こっちにホバリングするのに十分な 私はそれがあってもために起こっている見ていますか 別の場所に移動します。 あなたがこれまで得ているのであれば 特に電子メール、 ペイパルから1つ、または 一見ペイパルから ログインするためにあなたを求めて あなたのアカウントに、この なぜあなたはいけないです これまでの電子メール内のリンクをクリックして、 率直に言って、電子メール内の任意のリンク。 あなたが知っている場合は、実際持っている ペイパルまたは銀行にお金 アメリカまたはフィデリティまたはいずれかの ウェブサイトは、それを手動で入力します。 それがいかに簡単であるかに見えるので、 何を提示に誰かをだまし リンクのように見えます。 しかし、それは実際に可能性 絶対にどこにでも行く。 そしてはるかに大きなあります これよりも脅威。 実際には、これはビットである 接線の今が、一 私が今まで見た最高のものの それ以来、閉鎖されています 誰かが人を導いている 、これは言うかもしれないのでto-- あなたへのログインにはこちらをクリック アカウント、銀行口座。 そして、これはバンク·オブ·ザ·ウェストだった。 だから、誰かがこれを買った。 そして、それは見るために少し簡単です それズームモノラル間隔のフォントで 30フィートのプロジェクターの中で。 しかし、それは小さなフォントでだとき あなたが受信している電子メール、 これはbankofthewest.comように見えますが、 いないbankofthevvest.com、 その誰かが買うために10ドルを支払っていた。 そして、これはにそれらを導いた いくつかの悪いウェブサイトの同等。 そして、あなたは実際に私たちが行うことができますtoo--表示されます 私は、実際のウェブサイトに行けば、this-- bankofthewest.com、再び、 前回からのリコール これは自分のWebページである場合にと あなたはそれがどのように機能するかについての興味が、 あなたは確かに行くことができます Chromeの開発者ツール。 そして、あなたはすべてを見ることができます HTMLはきれいにそこにフォーマット。 しかし、ポイントにより、 あなたがのが閉じてみましょうcam-- あなたがビューに行くことができるthis-- デベロッパーソースの表示。 なぜ私はちょうどコピーしないでください すべてのことそして私 私の小さなgeditのウィンドウに行くことができます ここで、自分のWebページを作る。 hello.htmlでこれを保存します。 おそらくこれは、破るしようとしている それは通常、この簡単ではありませんので。 しかし、私は私の自身のページをリロードした場合、今 私自身のCS50 Applianceおよびリロードヒット、 [OK]を、いくつかのものが壊れた。 しかし、私は持つことにかなり近いよ 私自身の銀行のウェブサイトは、右? このすべてHTML-- [笑い] DAVID Jマラン:--I actually--しませんでした 誰かがそこにあります知っている人 実際にあまりにもこれらのリンクをクリックしますでしょう。 そうはっきり、いくつかのものが壊れた。 しかし、それはリードして起こっている 議論に私達、 不必要に、今、何に関して CSSは、カスケーディング·スタイル·シートは、ある 実際に、どのよう 他のHTMLファイルをダウンロード とJPEGはGIFファイルを提出すること ウェブサイトでは、使用している場合があります。 しかし、それのすべてが達成できるである。 しかし、それは本当にに集約 これらの非常に単純な経験則。 だから今ちょうど拾い読みしましょう HTMLのの他の例のカップル ちょうどあなたに意味を与えるために あなたができる他に何の。 例えば、これはするlist.htmlある。 私は、Webページを作りたかったとします クワッド内の家屋のリスト。 私は、順序付けられていないため、ULタグを使用する場合があります リスト、リスト項目の子 その後、over--またはリストを反復処理 問題の家をrather--。 私がこれを開くなら、はこのやろう。 それではhello.htmlしないように行こう、 しかしするlist.htmlへ。 ふざけんなよ。 私はこれをどのように修正すればよい? それは右、前と同じ問題です? だから私はchmod-- oops--をやらせる するlist.htmlの+ rをchmodし。 そして今、私は自分のブラウザに戻ってしまったら とリロードをクリックし、そこにそれがある。 だから、あなたが作りたいと思ってしまった場合 箇条書きリスト、あなたはそれを行うことができます。 あなたはスーパー空想であることとしたい場合は 順序付きリストではなく、順不同リスト、 、OLにそれらを変更するページをリロードし、 今ブラウザがあなたのためにそれに番号をします。 私たちは他に何ができますか? さて、others--のカップルであれば あなたがtext--の長いパラグラフを持っている 例えば、いくつかの this--のようなラテン語のテキスト あなたが別々のパラグラフでそれをしたい、 オープンP、段落タグの近くのp。 そして何度も何度もそれを行う。 そして、私は今、このファイルを開く場合には、 paragraphs.html、よく、この 迷惑になっている。 だから今ちょうど戻って私に行こう プロンプト、+ R rのスターます。chmod .html-- いわばちょっといいワイルドカード。 それはすべてを修正する必要があります 私にとっては、これらの問題。 それではリロードしてみましょう。 3段落があります。 そして今、先に進みましょう もう一方を開く。 どのように表はどうですか? あなたは、テーブルルックスを気づくでしょう 少し複雑。 しかし、それは同じだidea-- 開始タグ、開始タグ、 オープン、オープン、オープン、クローズタグ、開始タグ。 これらは放置してしまった その境界線は明らかである表、 厚1--どんなことになるだろう そのmeans--テーブル行、テーブル 細胞を意味するデータ。 そして、私は私のブラウザに戻った場合 こことtable.htmlに行く、 あなたが何かを見ることができます このような、恐ろしい。 しかし、我々はポイントに買ってあげる どこに私たちは実際にできます それよりも物事がきれいにする。 だから私は、今のところ定めましょう。 複数のタグの束があります。 そしてHTMLは拾うのは素晴らしいです 率直に言って、なぜなら、あなたがする必要があるすべて 既存のWebページを見ている これであなたは慣れている。 そして、あなたはああ、それはどのようだが、似ている 彼らは、審美的にこれをした。 それとも、すべてのオンラインを調べることができます HTMLはどのように機能するかについての資源、 そしてあなたはそこだということがわかります 他のタグの全体の語彙。 しかし、シンプルなメンタルモデルを持つ 一人で開くことほぼすべてのタグ 実際に、それを閉じなければならない 自分を教えるために十分ではない HTMLは、後に理解 タグのこれらの基本的な考え方 属性と整形 我々は話をしたので、 私たちが開くかもしれない何を閉じる 我々はブラウザを混同しないようにします。 それでは、今、このてみましょう もっと面白いレベル 実際に行くことによって。 との私のMacに行こう ここで、google.comへ。 そして今notice--はこのやろう。 私はに行くゴングだ [設定]、[検索の設定。 私は、この厄介な瞬間をオフにする 結果の事どこにすぐに あなたのタイピングへの対応を開始します。 それではので、この古い学校をやってみましょう 私たちは実際に何が起こっているかを参照してください。 だから、私は内容を保存するつもりです ここではGoogleの設定を行います。 そして今、私はするつもりですnotice-- 猫のようなものを検索します。 そしてそれはまだオートをやって ここで完全なが、物事に基づく 人々が過去に入力した。 しかし起こる何が起こっているかに気づく。 現時点ではURL内 これは、ちょうどgoogle.comである。 技術的に、それはスラッシュだ。 Googleは単に文字を保存するだ そして、私たちのことを示していない。 彼らはただ、私たちにはhttpsを見せている 私たちがしていることを、スーパー安心すべき セキュアなまたは暗号化されたページで。 だから私は先に行くと猫を探してみましょう。 さて、これは本当に持って 迅速圧倒的。 このURLの長さを見てください。 しかし、それはこのようなもののほとんどが判明 URLに実際にはかなり無駄です。 私は削除を開始するつもりだ 私は理解していないもの。 私は猫を参照してください。 私は猫を理解する。 猫は再びそこにある理由を私は知らない。 私は本当に知らない このナンセンスは何ですか。 だから、僕は続けるつもりです ハイライトとかを削除 私は理解していないこと、 ちょうどこのにURLを蒸留する。 今、私は再び入力しましょう​​。 Googleはまだ動作しますように見えます。 だから、いくつかの理由で、彼らは追加しています デフォルトでは、それらのURLのへの多くのもの。 しかし、それは厳密に必須ではありません。 だから、これについての素晴らしい何ですか? さて、私が先に行く聞かせて Chromeのインスペクタを開く。 それのための小さなマウスのショートカットがあります。 [ネットワーク]タブに移動します。 そして今、私はリロードせ このページもう一度。 と私はShiftキーを押しています。 余談ですが、ブラウザなど キャッシュまたは保存する傾向がある ただ、効率の日本酒のための情報。 しかし通常は、Shiftキーを押しながら すべてを強制的にリロード 最初からやり直すこと。 そして、それは私がここで何をしたいのです。 これらの全てに気付く ちょうど現れた行。 これは、任意のウェブ与えられたことが判明 ページ、1つのファイルがあるかもしれません hello.html--またはそこinvolved-- この場合のように、52であろう。 私はgoogle.comにアクセスすると、 どうやら、私のブラウザ 52の別々のHTTPリクエストをキックオフ。 これはなぜですか? さて、中身を見て このWebページアップトップの。 テキストだけではありません、 しかし、実際のイメージがあります 右にオーバー猫。 カラフルなロゴが左上にここまであります。 これらのアイコンのすべてがあります マイクなど。 作品の多くは、建物は、あります ブロック、スクラッチ片、あなたがする場合は、 このWebページに移動します。 ブラウザが時に何をしているか 、非常に最初のファイルを取得している この行は、それが本質的に、ここにある HTMLのトップを反復 底に、探して、左から右へ イメージタグやその他のタグのようなもの 他のファイルに言及していること、および それがそれらを見るとき、行くと、それらをフェッチ HTTP経由で、生存全体 封筒のメタファー、 その後に表示します Webページ内の適切な場所。 私が焦点を当てる場合は、しかし、ここで気づく 最初のスロー、検索猫、 確かにそれはHTTP 1.1を使っている、ことがわかります。 残念ながら、グーグル バージョン39で、今クローム 種類のものをレベルを下げるとされている 私たちに実際のヘッダを表示しない。 しかし、どのような実際に送信されたことは要求され しかし/検索、スラッシュではない?Q =猫。 さて、なぜそれが重要なのですか? まあ、私は推測するつもりです このことから、もし、あなたのGoogle なぜ、このフォームのクエリをサポート 私は自分の検索を実装していない CS50用のエンジンが、ちょうどフロント 終わり、ちょうどグラフィカル·ユーザー·インターフェース。 そして、我々は、バックエンドを外部委託します、 実際の検索は、Googleに結果。 だから私はこれをどのように行うことができますか? さて、私はこっちのgeditに行きましょう。 そして、私が先に行くと、開いてみましょう アップ、の言う新しいファイルをしてみましょう。 そして、私はこれを保存するつもりです 一時的に検索0.htmlなど。 その後、最終的に、我々は速いだろう フォワード私は1に予め用意した。 そして、私はするつもりだ 迅速にドキュメントの種類をかき立てる htmlのオープンブラケットHTML 近いブラケットのhtml。 それから私は頭をするつもりです 近い頭部オープンタイトルCS50 検索の代わりに、Google検索。 ダウンここに私が持っているつもりです ボディ、ダウンここに近いボディ。 そして今、私はCS50検索を必要としています。 そして実際に、してみましょう インクリメンタルにこれを構築する。 私が先に行くと、これを閉じてするつもりです 実際に私の公開ディレクトリに配置します。 だから、私にちょうど一瞬を与える。 私はするつもりだ検索0.html-- 一時search.htmlのそれを呼び出す。 私はそれを+ Rがsearch.htmlのをchmodするつもりです。 そして今、私はそれを開くつもりです。 すべての権利、それは高速だったので。 しかし、目標は、単にだった ポイントに私たちを取得する このテキストを持っていることの ファイルはsearch.htmlのと呼ばれる。 まだ見てそんなにはない。 確かに、私は私のブラウザに行けば、と それはそれがすべてだ、search.htmlのに行く。 しかし、あなたは何を知っていますか? 私は少し手の込んだことができます。 私はそこだと本で読ん 見出しタグは、H1と呼ばれる。 そして、私は先に行くつもりだと そのオープンh1及びクローズH1を使用しています。 ページをリロードします。 今では、大きく、大胆だ すべてのこと面白くない、 しかし、少なくともそれと構造 もっと面白い。 しかし、今私は別のタグをご紹介しましょう​​。 これは、formタグがあると判明した。 そして私はそのタグを閉じてみましょう。 そして、それはそこのが判明 inputタグその 、タイプという属性を持っている フィールドのデータ型であり、 可能ならば。 とtext型であることが起こっている。 その値が起こっている CS50検索することができます。 終了タグ。 との概念はないように起こっている 開いて別々のタグを閉じる。 私はこちらに戻りましょうと 何が起こっているかを参照してください、リロード。 興味深いの取得。 それはテキストフ​​ィールドのように見えます。 そして実際に、私が望んでいない まだそこに価値を置くために。 私はここに戻って、実際に取得してみましょう それをシンプルに保つためには、この値を取り除く。 代わりに私が何を望むかの値の この事を与えるために名前があった。 そして私は、それが何であるかを知らない ので、私は戻ってそれに来る。 しかし、その下に、私が欲しい 入力タイプを行うに=提出する。 この値はCS50検索になります。 なぜ私と我々が表示されます これに値を移動しました。 私がリロードするとき、私は今持っているように見える 私自身の探索の始まり エンジン、スーパー恐ろしい、 率直に言っても、それはだ 何から遠くないスロー Googleのデフォルトページは次のようになります。 私は今ここに行くなら、私は入力することができ 猫とうまくいけば検索]をクリックします。 しかし、私はかなり、まだいないよ 私が実装していないので、 明らかに、データベース。 私がクロールされていない 検索結果のためのウェブ。 だから私はGoogleにそれを委託する必要があります。 だから私はこれをどのように行うのですか? 私はすべてのさて、最初 追加および行動する必要があります 私のformタグとは、属性 http://www.google.com/searchある。 そして、私は知っているだけ持っていることから 密接に見て、推論 自分のURLで。 そして今、推測を取る。 何このテキストフ​​ィールドは、おそらくべき 私たちが来た場所に基づいて、呼び出すことが 前から? 読者:?Q。 DAVID Jマラン:?Q。 そして、我々は実際に質問をする必要はありません それは結局のところ、しかしqは確かにそれでマークし、 クエリのQ恐らくによる デフォルトでは、それはだという理由だけで 何ラリーとサーゲイ 年前に思い付いた。 だから今私は、このページをリロードしてみましょう。 それはすべて、異なる見ていません。 しかし、今何が起こるかを見る。 私は猫とクリックで入力した場合 CS50検索と行かせ、 私は泡立て取得気づく 離れて実際のGoogleに。 さて、Googleは少しされている 彼らがしているという点で、迷惑な 追加のパラメータを追加、 URLへ、可能ならば。 それはすべて起こっている 自動的にGoogleの側に。 重要な部分は、私が見えるということです ここにこの要求を生成しているため。 そして実際、それは何が起こるかだ。 あなたは、HTMLを持っている場合、その これは、次のようになります ウェブ開発者の表記法の一種である と言ってために、先に行くと、フォームを作成 それが提出さだときに、 それは次のURLを参照してくださいになるだろう。 そしてURLが提供しているとき Qのようなものの値は、 ちょうどこのURLに行っていない。 実際には、質問に行く マークした後、Q =猫。 パラメータを追加し、 そのようなHTTPパラメータ。 そして、ちょうど、スーパー正確には 何が推測されていますhere-- しかし、私はもっとexplicit--されるだろう 私が使用する方法 代わりのようなもので、ある取得 私たちは最終的に表示されますポスト、。 だから、要するに、単に理解することによって HTMLといくつかの非常に単純なタグを使用して、 我々は今作成し始めることができます 当社独自のフロントエンドユーザー 検索とのインタフェース その背後にあるエンジン。 しかし、これは、もちろん、かなり恐ろしいある。 だから私が実際に開いてみましょう わずかに良いバージョン。 これは私が中で調製したものである いくつかのコメントを持って前進。 しかし、あなたはその私が表示されます かなりそれを再現し。 だから、これはすでにオンラインで入手可能です。 そして、私は先制に起こった ちょうどそれをシンプルに保つためにhttpsに行く。 そして今のアップ開いてみましょう これの次の反復。 バージョン1の代わりに0である。 何として少しあなたに飛び出す この例では、異なる? 読者:[聞こえない]。 うん、このテキスト整列センターがあります。 これはここに少し奇妙です。 しかし、これは確かに新しく追加されました。 そして多分起こる何が起こっているかと思います。 私は今、私のブラウザに行けば と検索-1.htmlを訪れ、 それはほとんど同じことだ。 しかし、それは近い段階だ もう少しきれいであること。 それはまだ醜いですが、その中できれい 少なくともすべてが今中心にいます。 だから、私は何を使用していることが判明 別の言語が完全に呼び出された CSS、カスケーディングスタイルシート。 そしてCSSは、率直に言って、親切である の、私の個人的意見では、 atrociously設計された言語。 これは覚えておくことは非常に迷惑です すべての様々な詳細。 しかし、それはstylizes何ですか 全体ワールドワイドウェブ、今日。 私は誰かを怒ら。 わかりました。 それでは、ここに戻って見てみましょう どのように我々は実際にこれを使っている。 そして、それは少なくともそれはだ、判明 実際にはかなり単純な言語。 それはちょうど、キーと値のペア、プロパティだ と値、プロパティと値。 実際、ここに一つです そのようなプロパティと値。 単にスタイルを使用して、 私のbodyタグの属性 それにの値を与える 単語コロンと別の単語、 またはプロパティと値、 私は美学に影響を与えることができる ウェブページのではなく 必ずしもまだ構造、 それの美学。 そして、ちょうど周りにグーグルによって、私は実現する そのCSS、カスケーディングスタイルシート、 というプロパティをサポートしています その値は缶のtext-align、 例えば、右、または中央に残される。 だから今、私はリロード時 このページは、私が何を手に入れた 中心のページだった、 それでもかなり醜い。 それでは先に行くと、開いてみましょう 検索のバージョン2まで。 そして今、私はもう少しやった気づく。 頭部の内側に、ここでそれをアップに注目 タグは、タイトル以上が存在し得る。 実際には、スタイルのタグがあります。 それだけで取得する場所と、これはある 少し厄介な、時にはCSSを見て。 私は何かを持っているように見えることに注意してください それは、構造的に非常に異なって見えます。 しかし、ここでの名前です。 タグは、私が様式化したい。 ここに私たちの古くからの友人は、中です 中括弧と閉じ中括弧。 その後ここにということです プロパティとその値。 私はこのファイルをロードすると、search2.html、 最終結果は同じである。 しかし、それはよりよい設計に向けた一歩だ。 このCSSをファクタリングすることで、私がしました 私はHTMLでそれを混ぜ合わせていない。 我々が表示されますようにそして実際、私ができた これらのプロパティと値を再利用します。 私はの束を作りたかった場合 私のウェブページの一部が中心 私はスタイル=のtext-alignを入力する必要はありません すべての場所の上の中心。 私は1つの場所に置くことができます 多分、一番上にアップするのが好きです。 しかし、たとえこれが最適な設計ではありません。 実際には、物事の一つは、あなたが学びます あなたはより多くの時間を費やすように Webプログラミングは、より多くのあなたができることです 物事や因子物事をモジュール化 .hファイルと同じように、私たちに係数のものを出す 私たち因子物事を出すhelpers.c好き 少数のpset前。 同様に、私たちかもしれない これを達成したい。 だからバージョンで気づく 私がしたsearch.htmlのの3 頭のクリーンアップ ページとちょうど置く この中で、リンクタグ、これ 名前に反して、 あなたにハイパーリンクを与えるものではありません。 これは、経由で別のファイルにリンクする その値は、この場合のhref、 検索3.cssです だから私は、我々はすぐに実現するつもりだ。 しかし、私がやっているすべての一種である 周りのものを移動する。 検索3.css私は開いてみましょう。 それは本当に、何もありません。 私はちょうど新しいにそれをコピー&ペースト 私たちはものを因数分解のと同じようにファイル、 前他のファイルに変換する。 そしてresult-- 完全underwhelming-- 全く同じになるだろう。 しかし、我々はtoward--移動しているいいえ、そうではありません。 ああ、私はなぜ知っている。 だから、バグのようです。 そして、それは、ある意味である。 しかし、私は私の[ネットワーク]タブを開いてみましょう。 私はページをリロードしてみましょう。 ああ、なぜCSSが適用されていない? さて、CSSファイルは、同様に有している いわば、世界の読み取り可能に。 そして、それはあまりにも、現在禁止されています。 だから私は、chmodのaの+ Rをやらせる スターのドットCSS-- whoops-- 私たちは、ドットCSSがちょうどですね CSSファイルのファイル拡張子。 今、私はに戻ってみましょう 私のブラウザとリロード。 [OK]を、少し良く。 今、私は最後のことをやらせる。 検索-4.html中。 私はちょうど思ったバージョンを持っている 道よりもかかわらず、道涼しかった 複雑。 それでは、最初の結果を見てみましょう。 私たちに多くの部屋を与えるために、これを閉じます。 入力し、検索-4をするために、これを変更してください。 そして今、物事の束が壊れている。 私は戻って行くつもりです ここに私のディレクトリにコピーします。 そして今、私はちょうどするつもりです file--の上に+ rのは、chmod 私はそれが呼び出さexists--知っているので、 イメージですlogo.gifを、。 そして今、リロード。 そして今、私はそうwow-- 率直に言って、非常に近い、 グーグルの1999バージョンを好きに、そして 率直に言って、グーグルの2014バージョン、 右? だから、今、彼らのウェブサイトに起こっている 最終的に、私は猫を検索する場合。 そして実際、それはある。 しかし、私は違った何をした このバージョン4で? だから我々はここでそれにあまりこだわることはありません。 あなたは問題でこれが表示されます 最終的には7に設定してください。 しかし、私はいくつかのことをやった気づく。 私はdiv要素を導入しました 部門であるタグ、 段落タグとその精神においては似た。 しかし部門はここにあるだけで、似ています 長方形の不可視領域 画面の。 さんはそれをユニークに挙げてみましょう ちょうど識別子、フッター、 我々は約話すことができるように、 それ他の場所で私たちのHTML内。 こちらのページの別のdivがある そのIDは、コンテンツになるだろう。 それは、ページの内容です。 とここまでページのヘッダーである。 言い換えれば、私はしました 基本的にHTMLで精神的に午前 このWebページなどを閲覧する 3成分ヘッダ この目に見えない長方形で、ここまで、 その後、途中でコンテンツ、および ダウン下のフッター、偶数 けれども私たちはそれらのものが表示されません。 私は私の頭の中にしたいので こちらのページ、または.cssのファイルで、 私はこの構文を使用することができます。 ヘッダーはタグではありません。 それはターンだから、IDだ #headerを実行していることが、 私は今1つ以上​​を適用することができます ヘッダーにプロパティ。 私は、同じ内容を行うことができ、 ここにコンテンツのために同じ。 例えば、フッターに、予告そう 私が追加しているこれらの特性のすべて。 そして、私は彼らが読書によって単に存在を知って CSSのマニュアルのアップ。 フォントサイズは​​smaller--になるだろう ので、いくつかの相対的なフォントサイズ。 重量が太字になるだろう。 どのように多くのピクセルをMargin-- it--周り20ピクセルです。 そして、それは中心になるだろう。 しかし、今、ページは次のようになります。 私はに満足していないよ場合 右が私のコピー、 私は色の赤のような何かを行うことができます。 その後、私はこれを保存することができ、リロード、 そして今私はフッターを様式化しました。 だから、これは単に電力を示唆されている あなたは、Webページで何ができるかの 物事を周りに変更します。 そして、これよりもさらにクーラー、あなたがしたい場合 実際のウェブサイトの周り突くために、 あなたは永久にそれらを変更することはできません。 しかし、私は開いている場合 再びChromeのインスペクタ と私は、左手側にはない行く ここでは、FacebookのHTMLを示しており、 しかし、右側に示しています 右側のCSSのすべて、 あなたはどちらかとすることができ その場で状況を変える。 だから私は先に行くとこれをやらせる。 私が先に行くとコントロールしましょう ここで、このランダムな単語をクリック、 署名し、その要素を点検します。 Chromeは非常に便利にジャンプします Facebookが使用しているのh1タグ。 そして、ここでのFacebookに気付く 種類の遅延している ハードここにプロパティとして、フォントサイズをコード化された。 とてもクールなことは、しかしである 私は実際にここに行けば とまあ、Facebookは、私はそれを好きではない、と言う 64ピクセルは、我々は今のFacebookを変更することができます。 もちろん、我々はそれだけを変更している 私にとって個人的に現時点では。 しかし、これはちょうど別です 私たちのツールキット内のツール それは私たちが微調整できるようにするために起こっている と把握し、また診断 私たち自身のウェブページでの問題。 そして、我々は、同様に上に行くことができる ここでは、同じことである。 あなたが本当に空想取得したい場合、私は 今あなたが本当にページを変異することができ、意味 そしてクレイジーなことを行う。 では、なぜこれがすべてに役立ちましたか? まあ、最終的には、我々はしている になりたいだろう そのWebページを作成すること 私たち自身のバックエンドで駆動され、 だけでなく、Googleによると そこにバックエンドをアウトソーシング。 私たちは、実際にしたい 値は、例えば、 Googleの検索エンジンのアクションの 他の誰かにしない行くために属性を、 しかしsearch.phpのようなものに、 sea​​rch.phpは私たち自身のサーバ上にある場合、 ではない他の誰かの上。 だから、実際に私たち、そこに着く 新しい言語を導入する必要があります。 だから我々はすでに1新を見てきました ここで実際の言語、または2つのHTML とCSS。 しかし、彼らは本当にただです 構造的および審美的な言語。 彼らは、プログラミングしていない 言語はそれ自体。 そして、それは正式な約限りだ 私たちはそれらに費やすような時間。 私たちが今始まるだろうから PHPに移行する。 だから、PHPは実際ある プログラミング言語。 これは、スクリプト言語です それはだという意味で、 軽量であることを意味 C.のようなものよりも そして、それはインタプリタ言語ですが、 それがコンパイルされていないことを意味します。 だから、一言で言えば、それは何を意味した 我々はCのような言語を使用したとき そして我々はそれをコンパイルする必要がありました? それはに何を意味する Cのソースコードをコンパイル? 読者:[聞こえない]。 DAVID Jマラン:再びそれを言う? 読者:[聞こえない]。 DAVID Jマラン:パーフェクト。 それは、バイナリに変換します。 それは、0と1に変換します 実際の英語のようなソースコードから。 そして、我々は実際に缶 これらの0と1を実行 を介してそれらを通過させることにより ダブルのアイコンをクリックすることで、CPU またはコマンドを実行している。 PHPやPythonとRubyの PerlとJavaScriptと およびその他の束 言語が解釈されます と言うことです言語、 あなたはそれらをコンパイルしないでください。 むしろ、あなたがへの入力として、それらを養う インタプリタと呼ばれるプログラム。 そのインタプリタ、 どの他の誰かが書いた、 、一番下にあなたのソースコードのトップを読み込む 右だけ解釈に委ね これらのラインとあなたの言うことありません。 だから、あなたが発生した場合 プリントが書かれた行、 それは必ずしも印刷を変換しない 対応する0と1に。 それはちょうどように、このインタプリタを持って 言う大きなif条件、 プログラマの指示がある場合 印刷後、次の手順を実行します。 だから、それを解釈する 推論の種類によって あなたがしなければ、それを言っているのかを通して。 そしてPHPはこれらの言語の一つです。 とPHP年前に設計されました 正確にWebプログラミングのため。 そして、それは最初だった 非常にずさんな乱雑な言語。 そして実際、巨大ながあります そこに悪いのPHPコードの量。 しかし、言語そのもの 年間で成熟した、 今それはだように、そんなに 実際に素晴らしい次のステップ 教育学Cからのそれはだから すべてのものになじみそうとびきり あなただけの過去数週間で見てきた。 私たちが表示されます1初期差異 全く主な機能はもうありませんです。 あなたがコードの記述を開始するとき、それはちょうどだ どんな実行されない取得するつもり、 私たちは一瞬で表示されますように。 一方、ここでは何 変数は、PHPのように見えます。 それはちょっと違う、 だけかろうじて。 PHPでは、強い型付けはありません。 週タイピングがあります、 それだけでそこに意味 文字列のようなデータ型です と数字や他のもの。 しかし、あなたが指定して気にしないでください 彼らはもう何。 PHPはあなたのためにそれを見つけ出し。 ドル記号はちょうど決定である PHPの人々が長年行われていること 前ようにPHPで任意の変数 ただドル記号で始まります。 それは、その中で実際にこの種の便利だ それはもう少しあなたに飛び出す。 しかしその後、この PHPの条件である。 C対異なるとは何ですか? 何もquestion--トリックない、 これ実際に本当にいいです。 PHP--同じでブール式。 とし、対ブール式 または、スイッチ、ループ、ループ、[OK]をloops--、 この1は異なっている。 だから、そこにい判明 PHPの他の機能のカップル。 その一つは、実際にある これ素晴らしく便利です。 $数字はあなたがした配列の場合 プログラム内で以前に宣言、 あなたは各構築のために、この空想を持っている その代わりに、すべてのことをやって 迷惑な私はある、0に等しい この未満、[?私は++?]、 数、各各番号について それらのドル記号値のちょうどです 変数、後者 あなたはIとして考えることができます あなたが欲しいもの、それを呼び出すことができます。 私は数それを呼んだ。 これは反復処理しようとしている アレイは、番号と呼ぶ。 各反復で、それはだ 自動的に更新する予定 あなたのためにドル記号番号 可変するように、あなたは常に あなたがしたい変数へのアクセス権を持っている どの角括弧を行うことなく、 配列への表記やインデックス作成。 それを超えて、私たちも、のようなものを持っている ほとんど同じに見えるのアレイ、 我々はよように、それは、非常に一般的です除き 両方のPHPとJavaScriptで、参照してください。 事前に配列を初期化する 角括弧を使用した。 Cは、中括弧を使用しています。 だから、にもかかわらず、わずかに異なるです 私たちは本当に多くのことトリックを使用していませんでした。 しかし、さらに力強く、 PHPは連想配列を持って、 その空想的な方法です ハッシュテーブルを言うの。 実際には、ハッシュを宣言したい場合は、 C--でどのように多くのとは異なり、PHPのテーブル、 コー​​ドの行は、それがにかかりました 実際にC言語でハッシュテーブルを実装する? それとも、何行のコードである Cでハッシュテーブルを実装するために取って? だから、右、おそらく多くのですか? それは多分、100または200数十です。 それは自明だ。 それともとして、であることが約だ あなたはすぐに、自明でない表示されます ハッシュテーブルを実装する [聞こえない]とも試してみる。 しかしPHP--でかつ率直に言って、私は おそらくあなたにこれを言うべきではありません PHPでMonday--までは、もし あなたが行って、テーブルが欲しい。 つまり、ハッシュtable--そうだ コー​​ドの1行を持つ。 と 言語の多くは、それを行う。 PSET 5を楽しんでいる。 だから、言語の多くは、これを行う。 彼らはあなたにこれらの抽象を与える 他の人、他のプログラマ、 そのようにあなたのために作成した あなたは彼らの肩の上に立つことができる とスーパーであるアイデアの使用を開始 ハッシュテーブルや木のような、説得力のある としようとします。 しかし、あなたは必ずしもする必要はありません それらのものを自分で実装しています。 だから最終的には、どのような 我々はPHPを使用するつもりだ 潜在的にプログラムを書いている いわゆるコマンドライン。 私たちは、すべてのプログラムを作り直すことができ 我々は、これまで、この学期を書きました SPLを使用しています多分ブレイクアウトを除いて、 その瞬間に、Cに固有のものです。 しかし、他のすべての問題が設定され、 確かにマリオとシーザー そしてVigenereと [? ?クラック]以降、私​​たち PHPで再実装でき、 おそらく、もう少し簡単に。 しかし、我々は最終的に起こっているのか WebプログラミングでPHPを使用する。 そして、私たちは次の紹介するつもりだ 週メンタルモデル、と呼ばれるパラダイム MVCは、モデル·ビュー·コントローラ、 そのあなたがプログラミングをやった場合には Pythonで前または Rubyや他の場所で、あなた このチームと知っているかもしれません RailsとDjangoとなどである。 しかし、あなたはに新しいしている場合は、 これも、あなたが表示されます これは実際には非常に自然であること 因数分解の延長 とデザインのソート 私たちはしたコードの Cでやって我々は今するつもりだ PHPにそれらの教訓のいくつかを適用する 最終的に、私たちはあるように 私たち自身のウェブサイトを実装する。 そして、あなたはソートのなら 魅了または驚い 私たちはやろうとしていること こんなに早く、すべての、 ほとんどすべてのことを実現する 学期、90%近く ものを含めて学生CS50の 誰が、以前にプログラムされたことがない 最終的なプロジェクトを作ってしまうこと Webプログラミングに基づいています。 だからあなたが戻っていることがわかります 今後数週間で高い。 だから我々は月曜日に、あなたが表示されます。 SPEAKER 1:そして今、ディープ Davenファーナムによって思考。 ハッシュテーブル。 [笑い]