SPEAKER 1：すべて、右後ろ歓迎。 これはCS50です。 そして、これは週9の始まりです。 そして、これは他の部分の始まりです CS50で、あなたの時間、我々に 今、最終的に、ウェブへの移行 あなたはよもちろん側面、 ファンダメンタルたくさんのことがわかり 我々は数週間のために輸出してきた まだ、訪ねて戻ってくる または、私たちを悩ませ。 しかし、今、あなたはそれがだと見つけることができます 大きさの順に簡単に 特定のタスクを実行し、 特定の問題を解決 - あまりにも多いので、あなたが思っていてもすること 特定の問題セットは自分で楽しかった 独自の方法で、私はあなたが見つけると思う pは7を設定して、pは8を設定して、 最終的に、最終的なプロジェクトは次のようになります すべてのより満足してだろうから 私たちが当たり前のように始めることがわかり 今メモリ管理のようなもの、とは ポインタ、何が起こっている ボンネットの下に。 そして再び、テーマ別、全体のすべての 学期は、この階層化されている とレイヤー。 そして今、我々は最高のようなものだ ここでは、上に立って 過去数週間の肩。 今、我々が最後の時間を思い出して インターネットが働いたかについて話しました。 そして、これは、おそらくあった 単純化、それを覚えている 世界のすべてのコンピュータは、IPを持っている のビットだもののアドレス、 まだ単純化。 そして、それらのアドレスは一意にするために使用され マシンを識別するように あなたは、情報、またはパケットを送信するとき いわば、彼らは起源を持つことができます アドレスおよび宛先アドレス。 そして、同じIPアドレスを使用することができる 双方の利益のために、また、悪のために、 例えば、あなたを追跡する。 実際には、ラップトップであなた一人一人 今開いたり、あなたに電話 ポケットは、IPアドレスを持つ ハーバード大学のネットワーク上。 そしてそれはすべてのことは難しいことではありません 誰が、どこにすることを相互に関連付ける これらの日です。 おそらくその上で、より多くの 将来である。 今私は、私はいくつかを取り戻すだろうと思っていた [の思い出？ ？強化]とあなたを与える ショーあなたから別のクリップ おなじみかもしれません。 私たちは薄暗いライトができれば ほんの数秒間。 ショーNUMBERS天才数学者の事件ファイル。 SPEAKER 2：それは32ビットのIPP4アドレスです。 SPEAKER 3：IPP、インターネットのように？ SPEAKER 2：プライベートネットワーク。 アミタのプライベートネットワークへ。 彼女はとても素晴らしいです。 SPEAKER 3：さあ、チャーリー。 SPEAKER 2：それは。 ミラーのIPアドレス。 彼女は私たちは何を見せている 彼女はリアルタイムでやっている。 SPEAKER 1：OK、そういくつかのこと この絵と間違っ。 一つはそうと、この1つは許容される、 これは実際にある ではない有効なIPアドレス。 有効なIPアドレスは数値でなければならない フォームw.x.y.z、それぞれの これらの文字は0〜255です。 しかし、それが原因と同じようにいいのよ 映画のどこに偽の電話番号、 彼らは、IPアドレスを偽る。 実際には、実サーバにヒットしません。 しかし、あなたを気に、これはブラウザです。 とブラウザが出力を開始しないでください このようなコンピュータコード。 そして、我々は少し深く見れば、気付く 彼らが見ていることを言語 画面上と呼ばれる言語である の言語であるObjective Cの、 そのiPhoneアプリが書き込まれ、 関与特にもの あなたから見ることができるようにクレヨン、 ここでソースコード。 [OK]を、私はこれが面白いと思った。 だから、このコードスニペットは、絶対に持って 何でもこれを行うには何もない 特定のエピソードがあった。 だから冗談は人々に一種である この当たり前の服用。 しかし、これは取得するすべてのことは難しいことではありません これらの技術的な詳細右。 そして、私はあなたを促すでしょう。 実際に、50は非常によく台無しかもしれません テレビ番組や映画やあなた方の多く あなたはそれだけだと見つけることができますので、 彼らがしているものはできません 画面上でやって。 しかし、確かに、これはあなたのことをコードである iPhoneアプリケーションでそれを見るかもしれません またはMac OSアプリケーション。 それは全く何の関係もありません セキュリティを行う。 だから、多くのために目を光らせる そのようなそのような楽しいこと。 しかし、今日我々は本当にでダイビングを始める 深く言語の全範囲に。 包括的なの確かに、1 のこの部分の持ち帰り コー​​スは、プログラムする方法を学ぶことではありません PHPで、それ自体はSQLを学ぶためではなく、しないように それ自体は、JavaScriptを学ぶのではなく、する 教えるためにどのように自分自身を教えるために 自分で新しい言語、確かに、理由 我々は今、取るために始める 補助輪オフするようにした後 当然の終わりには、20を期待していない どのように指示するページ仕様 いくつかのプログラムを実装する。 あなたはあなたに十分な成分を持っている 心、そしてあなたのツールで十分なツール 構築を開始するとのキット、 にとって関心のある問題の解決策 いくつかのためのいくつかの学生グループのあなた、 研究プロジェクト、または本当に何 あなたに関心の。 だから端に向かって、これがあったことを思い出す 絵は、我々はそれに最後の時間を描いた。 そして、これは、2台のコンピュータは、クライアントとです お互いに話し、断つ。 とプロトコル、言語、そうする これら2台のコンピュータが起こることを、話す HTTPと呼ばれて話すことができます。 そして、それはただで使用されるプロトコルです 情報を上の転送するコンピューター ワールドワイドウェブ。 ウェブは、当然のことながら、一つのサービスである それは上で動作 いわゆるインターネット。 上で利用可能な他のサービスは何です 昨今、インターネットのトップ？ いくつかの他のプロトコルまたは - それは何ですか？ 読者：FTP。 SPEAKER 1：FTP。 だから、ファイル転送プロトコルは、別です。 あなたのほとんどは、おそらくそれを使用していない。 しかし、あなたのほとんどは、おそらく使用している Gchat、またはインスタントのようなもの より一般的にはメッセージング、 確かに電子メール。 そして、それらは、あまりにも、上で実行するサービスです インターネットの一番上にある、なぜなら 一日の終わりに、インターネット自体 本当にただのポイントからデータを取得 点Bそしてそれは数を使用しています 粒子自体、そのうちの1つまたは2つの 最も一般的にはTCP / IPと呼ばれるそれらの、 これは、その一台のコンピュータ上でと言うことです インターネットは実際にやっていることができます 異なるもの、電子メール、 そしてウェブなどが挙げられる。 Googleは、このたくさんのを行います。 それでは、どのようにこれらのサービスはユニークである コンピュータ上で、我々は言った、識別 それは実際にやっているかもしれません 複数のもの？ ポート番号。 そして、これらは単なる任意人間である 80のような規則では、Web、443です 暗号化されたウェブは、25がメールです。 と他人の束があります。 そして、それらの数字は単純に含まれています 情報のこれらのパケットは、それらの 仮想封筒、実際に 要求または応答を含んでいた。 だから、あなたが戻ってからの応答を取得するとき ウェブは、一般的には、いずれかが表示されません の点では全く数字 応答のステータスコード。 あなたが実際に表示されていない の内部の仕組み 戻ってくるパケット。 しかし、200は確かにOKを意味します。 そして、それはすべてが順調であることを意味します。 あなたはこれらの束を見ている可能性があります。 これは、おそらく最も一般的です あなたは、ウェブ上で見てきた？ 404。 それだけでファイルが見つかりませんを意味します。 それは、誰かが台無し意味。 あなたがURLをタイプミスでやった、または誰か 他に与えることで、やった 無効なURL、またはそれらが削除された ファイルやURLはまだです 人々によって使用されている。 理由は、任意の数を説明できるように なぜファイルが見つかりません。 そして、あなたは、来て数週間で、表示されます これらの他のエラーコード、あなたはよ それらのいくつかを活用する。 最悪は500です。 あなたがしたコード内で500エラーが発生した場合 書かれた、のようなものとしてそれを考える の障害をワンセグのアナログ Webプログラミングの世界。 それはかなりのように悲惨ではありません。 しかし、それだけで、どこか、ということ あなたはめちゃくちゃ。 だから、それらを楽しみにしています。 我々はできるなら見てみましょう コンテキストでこれらを参照してください。 私はここでブラウザに行こう し、次の操作を行います。 だから、これはに起こるクロム、です 機器にインストールされている。 これらの日がありますが、ほとんどすべてのブラウザ いくつかの同等の機能。 私は、Chromeのメニューを行くつもりです とツールに行き、私は行くつもりです 開発者ツールに。 そして、あなたはそれがこの小さなパネルがわかります ウィンドウの下部に表示されます。 別のショートカットが、正直に言うと、そのI 普段自分自身を使用右クリックすることです またはコントロールは、Web上の任意の場所をクリック ページとだけ要素を点検するために行く。 そして、それだけで開くことができません これはあなたのために持っている。 また、具体的には、表示された 上の要素の部分 左側。 だから我々は、Googleを見て当然だ。 彼らは今日、彼らのロゴを変更しました。 しかし、私はここまでスクロールダウンしている場合に、気付く 要素の下で、あなたが見ること HTML、ハイパーテキストマークアップと呼ばれるもの 言語、これは言語である そのこれとすべてのWebページ、 本当に、インチ書かれています しかし、それは実際に用にフォーマットだ 当方そんなに多く読み出し可能 それは通常であるより。 実際には、代わりに私がズームアウトする場合、およびI ただ右クリック、またはコントロールをクリック ページ上でクリックし、[ビューに移動 ページのソースは、これは文字通り何ですか Googleは私のブラウザに送ら。 だから、いくつかの個人または人が書いた このソースコードを使用してGoogle.com。 これのほとんどはHTMLではありません。 それは実際に呼ばれる言語です JavaScriptを、その 我々は水曜日に来るでしょう。 しかし、どのようなクロム、どのすべてのブラウザ 私たちのために行うことができますが、参照の一種である の気晴らしのすべての過去 クレイジー構文、および再挿入空白 私たち、さらにはシンタックスハイライ​​トの、 または私達のために物事を色付け。 それで、あなたは見つけることができます、これらのいわゆる ブラウザに組み込まれている開発者向けツール そう、そんなに簡単にあなたの人生を作ります このメニューを経由して、探索することができますので、 インタフェース、まさに基礎 ソースコードのためのものです インターネット上の任意のページ。 そして実際、これが最もの一つです 行う方法を学ぶための効果的な方法 新しい何か、少なくとも場合ページ 、圧倒するほど複雑ではありませんです それは、HTMLの周り突っつい開始する、見える 我々は来るそのいわゆるCSS、で ビットにも同様に、取得する どのようにプログラマの理解 いくつかの特定の実装 ページの特徴。 しかし、もっと技術的に興味深いの右 今ではこれになるだろう。 私は、[ネットワーク]タブに移動した場合、 今、これをクリアしてみましょう。 私は少しをクリックするつもりです ここで記号を渡り、その後 別のWebサイトにアクセスしてください。 そして、私はちょうど入力するつもりです Facebook.comた。 いいえHTTPなし、HTTPS、ないWWW。 実際にここで何が起こるか見てみましょう。 入力します。 今だけのものの全体の束に気づく で、この下のパネルに登場 Webページに加え、 上部に表示される。 私はに戻って上にスクロールするつもりです ここで、私はするつもりだ[ネットワーク]タブ 最初の行をクリックしてください。 このツールは私たちに明らかに何が起こっているか HTTPリクエストのすべての一つです 急速にだけ戻っている 前後の間に私のブラウザ とFacebookのサーバー。 これらの行のなど一つ一つ 1そのような要求を表すか、または 応答、一つ以上 これらの仮想封筒。 以上何気なく、それが人のようだ の人物のように、顧客 レストランで、何かを求め 再び、再び、再び。 とウェイターは持参続ける 戻って一つずつ。 だから今、私はこの上にズームインすると、予告 これはものの一種になります あなたはに歓迎し、奨励していること ので、自分でと遊ぶために我々 すべてを通過しません 偉大な詳細に示す。 しかし、そこに気付く ここではいくつかのサブタブ - ヘッダ、プレビュー、応答、 クッキー、タイミング。 私はちょうど、ヘッダーを見に行くよ 今のところ、これらは少しあるので その封筒の内側に成分 データは場所にしてから得るのを助ける。 だから最初に、見る、私はこれをクリックしてみましょう リクエストヘッダに次のソース。 私のブラウザは、その要求があり、 クロムは、この場合には、内部の送信された その仮想封筒。 あなたは、先週私を思い出すだろう それを手動で入力している間 ブラウザのふり。 それはそれがサーバーを思い出した というホストを探している Facebook.com。 そしてもう少し難解あり 我々は振るだろうという情報 今の我々の手。 しかし、私は今でスクロールし始める場合 このウィンドウでは、私がに取得させ レスポンスヘッダ。 これは仮想に何があるかだった から帰ってきた封筒 Facebook.com。 そして私はちょうどソースの表示]をクリックする それの生のテキストを見て、 いくつかのことに気付く。 一つは、Facebookはまた同じように話す プロトコル、そのバージョン1.1。 だからうれしいです。 しかし、ステータスコード301、 恒久的に移動しました。 さて、Facebookはどこに一体を行ったのですか？ これは私たちに伝えようとは何ですか？ さて、もう一つは、ここでダウンして気づくあり ヘッダーには、場所と呼ばれる。 なぜFacebookが、彼らと私に語っている そのURLに恒久的に移動した 場所の隣に？ 私は、WWWのを忘れてしまった。 だから、それは私の選択だった。 実際には、稀に、おそらく私たちのほとんどは、 このごろwww.whatever.comを入力します。 それは、システム管理者が判明 Facebookの、することができますように このような方法で彼らのサーバーを構成 Facebook.comいずれかが動作するか、という www.Facebook.com作品、または、本当に、 彼らの目の前でそのような接頭 ドメイン名。 そこで、彼らは私たちのためにあることをやった。 そして、彼らはおそらく、私たちをリダイレクトする いくつかの技術のために、 いくつかのマーケティング上の理由。 彼らはただ正規化したい www.Facebook.com上。 しかし、それは非常にそれはありません。 私はここで下にスクロールした場合、してみましょう 何が起こるかを参照してください。 これは私たちを語っている に恒久的に移動した http://www.Facebook.com。 だから、第二のリクエストを見てみましょう 私のブラウザが送信する。 残念ながら、それはFacebookのように見える 第二のため、再び移動した 代わりに、そのURLを選択することにより、要求、 あまりにも、移動した、と言う 永久に。 そして、私がここで下にスクロールしてみましょう レスポンスヘッダへ。 どこにFacebookは今行っている？ HTTPSだから。 だから今はFacebookが開始しました、 特に、現在の光で 特に、ここ数カ月の間にイベント、および また、過去数年間で 良いでは、彼らのすべてのユーザーを強制する 以上でHTTPSを使用する方法、 ただし、完全に安全ではない、固定します。 そして今、私のページに、私のブラウザです この第三のURLを要求するつもり。 そして今、最終的に、我々は得る そうしないと目に見えない200 OK。 だから、世界で何かのすべて ここでダウンしてこれらの他の行。 私は文字通り一つのことを入力して、私の ブラウザは以下のように要求しているようだ 20いくつかの奇妙なもの。 それは何ですか？ 聴衆：スクリプト？ SPEAKER 1：スクリプトなので、他のファイル と呼ばれる言語で記述された 再び、我々はよは、JavaScript、 水曜日のビットを参照してください。 ほかには？ スタイルシート。 だからと呼ばれる言語で何か 我々は少しでわかりCSS、。 GIFアニメーション、およびJPEGファイル、およびPNG画像、イメージ、 とムービーファイル - どんなウェブページ の中で最も可能性が高いしている ファイルの形式。 そして我々は左に見ているもの 右辺のすべてのファイルがあります Chromeはダウンロードしなければならなかったこと、 再帰的に、可能ならば、するために ページの全体を構成している。 それでは我々は、Googleと一瞬前に見た 私は、要素をクリックした場合 タブには、これは、確かに、HTML、です このページを構成する言語。 しかし、他のものの束があります。 ロゴがあります。 それらは、青色っぽいあり あそこアイコン。 そして、他の要素が上まだあり 自身があるかもしれないページ 別々のファイル。 ブラウザに関することはとても素敵何だ それは我々が行っている言語を見て 開始する書き込み、またはすでにた Pセット7、図に書き始めた 外にそれらのファイルが住んでいる、と 行くとだけでなく、それらをつかむ。 と私も、十分に強調することができません このうちのいくつかは少し見えるかもしれませんが 一見難解または圧倒的、 プログラムする方法を学ぶ Web用アプリケーションは、それがだ どのようにこれらを理解する貴重な 少しツールが動作します。 これらは、ツールのようなのようなGDBの一種である 使用して、最終的には、しかし、はるかに簡単 - と本当にあなたのものに目を与え 我々はのために当然の取ってきた 今かなりの時間。 だから我々は今で何ができる この情報は？ まあ、実際に見てみましょう HTMLの基礎となる概念。 我々はすでに持っているとして、我々はに、延期します 問題のセクション今週、 より多くのいくつかに、7の仕様を設定 これらの言語の細目。 しかし、我々は描くことができないかどうかを確認してみましょう あなたが理解すべきかの写真 全体的にここに。 だからHTML、ハイパーテキストマークアップ言語、 プログラミング言語ではありません。 それは本当に何を意味するのでしょうか？ だから、HTMLは次のようになります。 そして、あなたのいくつかは既にこれを知っている。 あなたのいくつかは、やっている しばらくの間、この。 しかし、我々は埋めることができないかどうかを確認してみましょう いくつかの空白だけでなく。 だからここに物事のカップルに気づく。 一つは、それは単なるテキストです。 だからそれだけでソースコードのようなものだ C、またはいくつかの他の言語。 あるように思われることに注意してください ここでのパターンであることが。 技術的にはそこにインデントですが、 インデントは単なる人間である 慣例。 新しいがあればブラウザは気にしない 行とタブは、我々はそこを参照してください好きです。 しかし、そこだということに気付く ここで対称。 の上部にある、私が呼ぶこと何あり このファイルは、開始タグ、または開始 HTMLというタグ、。 そして、下方に、完全に並ぶ まで、多くの我々は、中括弧で行うような、 我々は前方に、オープンブラケットを参照してください スラッシュ、HTML、近いブラケット。 だから対応近いです そのことのためにタグ、終了タグ、。 の内側に合わせて、すべてのもの 開始タグと終了タグ、いわゆる 我々は要素を呼ぶことに何の作曲。 そして、我々はわかります、ただ瞬間に、それはだ 本当に木でノードが好きです。 なぜならあなたが今考えてみれば ここで暗黙のインデント、あなた 好きな、持っている一種の、祖父母 ノードは、HTMLと呼ばれる。 あなたはベース、どのように多くの子供たちを言うかもしれない この画像に、HTML要素は持って？ だからおそらく2。 一つは、明らかに、ヘッド素子である。 そして、もう一つは、本体要素である。 そして、なぜ二人の子供？ まあ、私は推測するだけの種類だということであれば 私は開いているheadタグを持って、次に 近いheadタグ、要素です。 そして、別のオープンボディは、があれば タグとようなものだ近いbodyタグ、 別の要素。 だから私は種類の回転場合という意味で その側に絵、それは HTMLタグを持つようにしてから、 headタグ、次にbodyタグ、および その後いくつかのテキスト、こんにちは世界、ダングリング bodyタグ自体をオフにします。 だから私たちは絵を描くことができます このように見えるかもしれません。 形状は任意である。 しかし、私はのようなものを使用したことに気付く 表現するために上部の楕円 自身を文書化します。 他のものが存在することができるうちそれは変わり 私はいませんでしたことをWebページの内部 ここに描かれた。 だから私たちも、HTMLをハングアップするつもりだ いわゆるドキュメント·ノードのノードをオフにします。 そして、我々は頭を持っていると 本文とタイトル、予告、 これらはさらにネストされています。 私は、追加の行を入れて気にしませんでした タイトルタグの内側に休憩。 それはなっていたようにそれだけで感じた ちょっとあまりに冗長。 だから私はと、そこに1行でそれを残した オープンタイトル、こんにちは世界、近いタイトル。 そして、我々はいくつかのテキストを持っている ここのオフぶら下がり。 だから、この写真は、に戻ってくるだろう 当方ときに我々はJavaScriptに飛び込む。 理解とそのとき 何、このようなHTMLを書く ブラウザがやっている？ さて、私たちは心配する必要はありません それがどのようにこれをやっている、または何で アルゴリズムが、一日の終わりに、 ブラウザは、HTMLのように受信したとき それは、FacebookやGoogleからは、解析し それは、いわば、それは、それを読み出す トップにはfreadのようなもの、と 右へ左下、そしてそれのように 閉じて、ああ、開いたタグを実現し、 タグ、それはいわば、malloc関数を開始、 ツリー内のノード。 そして、それが発生したとき、我々は暗黙てきたように ここでインデントと、 子ノードは、そのノードをmallocを そして木に取り付けること。 ツリー構造、2分木は、そう 三の木、そして大きな木、その 我々は前の週または2つのをちらっと見た、予告 同じ原理であること 私達に戻ってくる。 と誰でも実装、クロームどんな チームはおそらくあったが、それをした ツリー構造のいくつかの種類を実装する ボンネットの下に。 と自体は、おそらくあること Cのような言語、またはC + +、または下 我々はだろうというレベルの言語 今やウェブ上に使用しています。 だから今、多分、これは意志 方が理にかなっている。 かもしれないいくつかの男から実際のタトゥー 種類で、最終的にはそれを後悔。 [OK]を、ので、すべての権利、ウェブユーモアがたくさん。 それは実際にはないだろう 以上のように、今日。 だから我々は先に進むでしょう。 わかりました。 それでは、今、見てみましょう いくつかの例で。 最も単純な 事はこれかもしれない。 私が先に行くとで開くつもりだ hello.phpというファイルをgeditの。 そして、ここの中、私はすぐに行くよ ただこれを行う、printfを、引用 引用終わり、 "こんにちは、世界。" だから、気づくと、私はバックスラッシュNをやる 私はメインを宣言する気いませんでした。 これは、PHPで、判明し、多くの 言語は、メインを必要としない それ自体機能。 あなただけの書き込みを開始することができます プログラム。 今、私は、このファイルを保存するとき、私は気づく 次の操作を実行しているつもり。 私はmakeを使用するつもりはない、と私はないんだけど とは異なり、PHPので打ち鳴らすを使用するつもり Cは、コンパイルされた言語ではありません。 それは解釈と呼ばれるものだ あなたがそれを実行することを意味し、言語、 別のプログラムを介して入力として インタプリタと呼ばれる。 そして、そのプログラムは上から、それを読み取って 一番下、左から右へ、そしてない 何あなたは何をそれを教えてください。 したがって、この場合には、ここで私が持っている printfの言う一行。 だから私はこのソースコードを実行すると、 プログラムそのけれどもhello.php、 、PHPと呼ばれるように、便利に、起こり プログラムはPHPが読みしようとしていること このファイルは、上から下へ、左から右へ、 そしてそれは何を私がやろうとしている やってそれを伝える - コードを実行し、場合 それだけで、何かを認識しません それを吐き出し。 だから私は先に行くつもりだと hello.phpのPHPを実行します。 入力します。 そして、それは、私が意図したものはかなりありません。 まあ、理由です？ さて、PHPは、実際の言語です かなりなるように設計 ウェブと絡み合っ。 この言語でWebページを作るとき PHP、我々はすぐに表示されます、私たちが説明するように プリントのような何かをしたい このような行外。 だから私はこれを行うつもりです。 オープンブラケット、疑問符、PHP、および 今私はちょうど保つためにインデントつもり 素晴らしいこと。 そして今、私は質問をするつもりです 閉じ括弧をマーク。 だからここに非対称のビットがあります。 あなたがこれをしない。 そして、あなたはそう、スラッシュをしない PHPは少し異なっています。 しかし、今、私はこのプログラムを再実行した場合、 今PHP hello.php、I 実際のHello Worldを得る。 これは貴重である理由と我々が表示されます。 一つ、それは私が指定することができ、 明示的にスーパー、これは コー​​ドは、これを実行します。 そして、それは確かに何これら 特別なタグがここに示唆している。 しかし、それはまた、私だけで行う場合のことを意味します 私はこっちを目指すような何か、その 文字通り、、でしょうただ手段 必要とせずに印刷すること 実際に、printfの呼び出し、または印刷 または任意の同様の機能。 だから私たちはそれに戻ってくる ほんの一瞬である。 まず、これを行うてみましょう。 アプライアンスの内部では、我々は持っている ディレクトリは、仮想のために、バーチャルホストと呼ばれる ホストは、ローカルホストを大幅に削減、公共スラッシュ。 だから、それは少し冗長ですが、長い話だ 短い、アプライアンスがないように設計されてい Cのみをサポートするために、それはまたです PHPをサポートするように設計された。 しかし、それはまた、ウェブように設計されています サーバ、データベース·サーバ。 それは、設計されており、真に設定されている 任意のを連想されるように 商用Webホスティング会社その あなたがのために月額5ドルを支払う可能性があります 100ドル月。 サービスが何であれ、それが構成されている 非常によく似ているように 現実世界の本番サーバー。 そして、何を意味することで実行されていること アプライアンスはWebサーバソフトウェアである。 それは、Apacheと呼ばれるように起こる。 それは、単に無料で、オープンソース と非常に人気があります。 そして、私たちは知っているようにApacheを設定している 私は、特定のURLを参照してください場合に、と クロムまたは内部の任意のブラウザ アプライアンスは、このディレクトリに見て そのファイルの ユーザーが要求している。 言い換えれば、私を聞かせて 先に行くと、これを行う。 私の公開ディレクトリの中に、私は行くよ 先に行くと、ファイルを作成する index.htmlを呼んだ。 それがここで私にタブを提供します。 そして、私は非常に迅速に行くつもりです と先に行くと外に強打 ここにこのプログラム。 今のところ、単にDOCTYPE HTML、 あなたが入力する必要が前提としています。 それだけで難解なタグだ、それではありません ことを指定します本当にHTMLタグ、 ここでいくつかのHTMLが付属しています。 私が先に行くと再作成するつもりです 我々は一瞬前に見たもの。 ここでは、ページの先頭です。 頭の中があった - そうタイトル。 だから我々は、世界、こんにちはと言うでしょう。 そして、ダウンここでbodyタグだった。 私はbodyタグを閉じてみましょう。 そしてここで私はまた、言うよ 単にわかりやすくするために、世界こんにちは。 だから、これは、間違いなく、最も単純で 可能なWebページあなた 有効だとすることができます。 これは、構文的に有効です。 開いているすべてが閉じられている。 すべてがうまくでだ スタイルとインデント。 だから今、どのように見てみましょう このファイルにアクセスすることができる。 まあ、私はChromeのためにここに行きましょう。 と私はに手放す http://localhost/index.html。 だから、ローカルホストは何ですか？ まあ、世界で最も任意のコンピュータ、 は、Linux、Mac OS、Windowsは、ニックネームを持っている ローカルホストと呼ばれる。 あなたは今まで話をしたいのであれば 自分のコンピュータへ - 奇妙なことに反射的に、とはいえ - あなたは自分のローカルホストと呼びます。 あなたの実際のコンピュータが何であるかは関係がありません それはダビデのMacBookののかどうか、と呼ばれる 空気、またはそれ以上の何か そのような冗長。 だからこのURLは明らかに使おうとしている ローカルホストと話をするHTTP、 同じコンピュータ、アプライアンス、および それだけで取る、を求めるために起こっている 推測、どのファイル？ index.htmlを。 だからアプライアンスで設定されている 私が求めている場合のことを知って進める index.htmlのようなものを、探し フォルダ内には、バーチャルホストと呼ばれる フォルダ内にはlocalhostという名前のフォルダ、 そこに公共と呼ば。 どこで私の国民のすべてのことです ファイルがあることを行っている。 だから私は今、Enterキーを打つつもりです。 そしていまいましい、その禁止があります そうでなければ403として知られているメッセージ、 そのための数値コード。 だから、ここで間違って何ですか？ まあ、それはただ置くのに十分ではありません 私のフォルダの内のファイル。 私は実際には次の操作を実行する必要があります。 私に、私のバーチャルホストディレクトリに行こう localhostを、公衆に、とさせて 私はLSダッシュ​​lを行う。 といくつか他のものがある ここに今日の目的のために。 しかし、次の、左側に気づく index.htmlをするため、我々は唯一の1 RWを参照してください。 過去に、何 RWはのため立っている？ ただ、読み取りまたは書き込み。 それが左側にRWと言う事実 私は、このファイルの所有者、することができますを意味 それを読み取りまたは書き込み。 しかし、私はすべての人々を聞かせする必要があります 世界はこれを読んで、しかしそれを記述しない。 だから私は、のモードを変更するつもりです ファイルはchmod、与えるためにすべてのプラスR 誰もが上の読み取り権限 のindex.htmlというファイル。 そして、私は今、再入力LSダッシュ​​L、気づけば つまり、こっちに、いくつかのより Rはポップアップしてきた。 そして今では、スペックが行く 詳細へ。 ただみんなを意味Pセット7、用 今、このファイルを読むことができます。 私は自分のブラウザに戻った場合 今とリロード、出来上がり。 こんにちは、世界。 と私も私のChromeのツールを開くことができます 、ちょうどGoogleと同じように、見て、 私のHTMLがあることを、Facebookや 少しフォーマット 異なると色付け。 私はネットワーク]タブに移動し、リロードした場合 ページでは、取得があることに気付く Chromeが送信していることを要求 アプライアンスに。 そのための200があります 特定のファイル。 だから要するに、これがどのようにこれらのすべてのです。 様々な作品が一緒に来ている。 それはちょうどように、Webサーバが起こる 我々は、リモートではない、今使っている Facebookのような。 それは、同じコンピュータ上で文字通りだ これは完全にOKです。 だから我々は、Webページでより多くの何ができますか？ まあ、ただ、みましょうを通してそよ風 これらのもののカップル。 しかし、私が先に行くと、再び開きましょう index.htmlをとgeditの。 そして、私が先に行くと挨拶CS50言わせて に戻って、このファイルを保存 ブラウザ、本当にがっかり変化。 しかし、我々は実際に何をしたい場合 今、何かへのリンク？ だから、それは我々が持つことができることが判明 ただタグでHTML内のリンク 自分自身。 それは呼ばれるように起こる アンカータグ。 hrefが等しい https://www.cs50.net、www.cs50.net 近い引用、近いブラケット。 そして今、何を見てみましょう 他に次に来る。 私はタグを開いた。 私は今それを与える必要があります CS50のようなフレーズ。 私には、タグを閉じてみましょう。 といくつかのことを気づく。 この不可解な事がありにもかかわらず ここで、私はそれを繰り返していないとき タグを閉じます。 あなただけのタグを閉じる 一人で、その名前を持つ。 そして、これは次のように何か知られているされている 値を持つ属性。 属性は、単に動作を変更 ページの内部にいくつかのタグの。 だから、これは指定されているハイパー 参照、というのファンシー方法 このために、このアンカーのURL、 リンクは、CS50.netでなければなりません。 そして、我々は表示したいテキスト ユーザーは、その生のURLではなく、むしろ 単語CS50。 今場合だから私は私のためにズームインさせ、リロード 明瞭さ、私はページをリロードしてみましょう、 我々はこの古い学校を持っていることに気付く 青色のリンクを強調した。 そして、私はそれを上にカーソルを移動し、それが起こっている場合 見てタフでなければ、底に残って 画面の隅、予告 それは言うことへのURL 私は行くつもりです。 そして、出来上がり、私はそこをクリックした場合 今私は、Webページを作ってるんだ。 そして、私たちは自分自身を率いてきた ホームページへ。 潜在的な何かに気づく これは私たちを提供しています。 セキュリティは非常によく似ています 流行で、これらの日。 私の代わりに何を何かのように言えば これ、私が代わりにしてみましょう、と言う、に行く 、fakeCS50.netを参照してください。 このページをリロードします。 [OK]を、ので、私は私のように、それはまだ見え気付く 鋭い目を除き、CS50に行く 私は偽のCS50につもりに気づくでしょう。 私は、このドメインが取られていない推測している。 [OK]を、ので、それは利用できない。 だからそれは良いことだ。 誰も実際にそのドメインを持っていません。 しかしみましょうもう少し悪意がある それは愚かなものだからです。 我々はペイパルにこれを変更した場合。 そして、我々はこれを呼んでいる場合、のように、 www.paypal.badguy.com、 どんなドメインがある。 それはおそらく存在しています。 だから今私はページをリロードしてみましょう。 そしてここで我々はフィッシング詐欺のようなものを持っている 攻撃であり、P-H-I-S-H-I-N-G、 その攻撃のために与えられた愚かな言葉 魚の情報にしようとし、または、より良い まだ、だましによって人々のお金、 それらのことを情報を提供へ 彼らはそうしないとしないかもしれません。 これは右、完全に合法的に見える？ 私はPaypal.comにここのリンクを持っている必要があります。 公平であれば私はいくつかでそれを性欲を刺激する グラフィックスは、我々はそれが見えるようにすることができます PayPalのようなもっと。 右？ 私は可能性があるため、余談として、 私はPaypal.comに行くことができます。 そして、私たちはただ見てきたどのように私がすることができます そのHTMLのすべてを参照してください。 私はちょうどそれをコピーして再現性が ペイパルの美学よりもむしろ行く ここに古い学校。 もちろん、気付く、そしてそれは少しだ 唯一の底に、まだ小さい 10点のように左手のコーナー、 フォント、あなたがしているもののURLを参照してくださいますか 実際に導くことになるだろう。 あなたがこれまで得ているそうだとすれば、スパムと言っ 先に行く、あなたはアカウントだ 侵害されている。 このリンクをクリックして、私たちに知らせてください あなたのパスワードは私たちは、あなたがしていることを確認できるように あなた、今までにそんなことはありません。 これらの事は言わずに行く必要があります。 しかし、それは素晴らしく面白いですし、 悲劇的な、毎年これにどのように思われる いくつかの非ゼロに起こる 人々の数。 そして、それは美しさだ フィッシング攻撃の。 あなたは、万人のメールを送ることができます。 そしてたとえ実際に人々の0.01％ ペイパルをクリックして、あなたを与えるあなたの パスワード、依然としてゼロ以外の数値だ ただ与えてきた人々の あなたのお金。 そして、もちろん、電子メールを送信することは非常にある 簡単で、基本的に、自由に このごろ。 だから長い話短い、素晴らしく 美しいアイデア、右？ 数年前、これが最古のでし ウェブのウェブを可能にする リソース間のハイパーリンク。 しかし、こんなに早く、それは可能性があります 病気の目的で使用される。 や電子メール、これらの、それが言えば十分 日、HTML内に埋め込まれている。 まあ、ただもうひとつ私を聞かせて。 そして、我々のセクションを大幅に延期するよ 問題は、あなたができるようにするために7を設定 事項を探る。 しかし、私は先に行こうと ここではいくつかのことを行う。 私はに行くと宣言するつもりだ または、div要素と呼ばれるもの ページの一部門。 私はそのdivタグを閉じてみましょう。 と私は言うつもりです ここでは、ページの上部。 そしてこの下には、私はするつもりです 別のdivのようなものが、これを閉じる タグ、およびページの下部を行う。 との、それを保存してみましょう。 だから今の私のファイルに戻ってみましょう。 非常にがっかり。 しかし、どのような部門のために使用され ボンネットの下に、それが実際だです 素敵な構造要素。 それはこれまでのように任意の美学を持っていない 我々は、明らかに、以外に、見ることができます 新しい行で物事を置く。 しかし、通知は、余談として、ただ打つ 入力してそれのようにHTMLでそれをカットしていません Cであなたはそれがだと思うかもしれません 間に素敵な大きなギャップを置くつもり ページの上部と下部。 しかし、それは無視されている。 ホワイトスペースは、基本的に無視されます 一番最初の以外のWebページ スペースバーの文字、またはキャリッジリターン、 あなたは、キーボードで打つこと。 あなたがより多くの改行をしたい場合は、 それを自分で指定する必要があります。 だから私はいくつかのことをするつもりです ここで何が起こっているか表示されます。 私は属性を追加するつもりだという あなたが学ぶようにして、再び存在し、 何が、タグが存在するか、存在している属性 本当に、オンラインリファレンスです。 HTMLは言語の一種である - それはだ しないプログラミング言語。 これは、マークアップ言語だ - その後 良い時間半、多分、との時間 それは、あなたは確かにほとんどの、把握します おそらく、基本的な考え方。 そして離れてGoogle検索が全てです あなたかもしれない可能性タグ 興味 そしてスペックあたり、それはかなりです 歓迎し、ここに奨励した。 だから今、私が先に行くと、う このような何かを。 背景色。 そして今、私が何かをするつもりです のような赤、セミコロン。 そして、あなたがでこれを行うことができます いくつかの異なる方法。 私はスーパーのようにそれを入力するだけの種類だ 明示的に、可能な限り。 しかし、それは、ここで、この値が判明 CSS、カスケーディング·スタイルと呼ばれるもの シートは、別です。 完全言語。 CSSは、とは何の関係もない タグと終了タグを開きます。 それは性質に関係しています。 とプロパティは、単にキー値です ただいくつかの単語を意味ペア、 コロン、その後いくつかの他の単語。 そして、ちょうどあなたが複数のものを持っている場合、または ここでは1、あなたは、それを終了することができます 単にわかりやすくするためにセミコロン、。 しかし、それは、あまりにも、ここで動作します。 今、何これはどうするつもりだ？ おそらく推測することができます。 私が先に行くと、このページをリロードしてみましょう。 そして今、それは実際に一緒に来て。 だから、私のページの上部には赤です。 しかし、ここで重要なのは、私が述べたように、ということです 以前、そのdi​​vがあなたを与える ページの分割。 そして、それはそれが何をするか確かだ。 それは本質的にページに分割 四角形のあなたがしてできること 操作します。 や長方形のこの概念は、種のある あなたが考える場合は、その中で説得力のある ほとんどの任意のウェブサイト、おそらくそこ それにはいくつかの構造。 あなたのほとんどは、おそらくめったに見られなかった あなたがログインしている場合、Facebookのホームページ すべての時間である。 しかし、Facebookのホームページで、そこ 上部にdiv要素のいくつかの種類。 そしてそれは同じくらい簡単ではないかもしれません 1 div要素としてではなく、そこ そこに矩形領域。 ページの残りの部分のようです はるかのような巨大なdiv要素、 大きな矩形領域。 ただ持っていることによって、そう長い話短い これらのほとんどのビルディング·ブロック、 四角形などのモデルのものにする能力、 広いまたは狭い、あなたもできるかどうか 潜在的に列を作る、あなたのことができます あなたは本当に、しかし、ページをレイアウト たいと思います。 私たちは本当にただスクラッチしている ここで表面。 確かに、私は1つの他のいずれかの操作を実行する場合、 私が先に行くとスタイルをさせ、 背景色は、我々は何かをやる 青、近く符のように。 これをリロードしてみましょう。 だから今はそれも醜いなってきた。 しかし、今、私は一種の誇示することができます 私のPは右、5スキルを設定していますか？ 赤。 これは、RGB、赤のことを思い出す グリーンブルートリプル。 まあ、それは、Webプログラミングで判明 またはこれでWebデザイン、、我々はしました まだ何もプログラムされていない それ自体が、あなたが実際にすることができます 16進コードを持っている。 だから何かの何か、何か 何か、何か何か。 だから、6進数を持つことができます 文字、または3、いくつかのケースでは、 そしてそれらの疑問符の各 16進数字でなければならない ゼロからf。 私は赤をたくさん持つようにしたい場合、および 全く緑ず、無青、何 六角を使ってゼロの反対？ それはFです。 だから私はFF、ゼロゼロ、ゼロゼロを行うことができます これを保存して、今ここに降りてくる。 そして、私は実際に変更が表示されません。 だから引用引用終わり "赤色"は明らかである すべての赤のための代名詞、 全く緑なし、青。 一方、意図的に変更してみましょう これは何かであることが ランダム、ABCDFような。 それが何であるかを見てみましょう。 それは、本当に素晴らしい青だ 実際に、ベビーブルー。 そうすべての権利、これらはちょうど今です 多少ランダム組み合わせの 文字。 だから私たちはここでで行き詰まることはありません。 しかし、再び、これは精度に話す あなたが始めることができます 適用される - あなたは非常に圧倒している場合でも 美学によって。 実際には、あなたが本当になりたい場合 感銘を受け、私が先に行くと変更させ 例えばフォントサイズ、。 とセミコロンに気づく、その そこに必要である。 フォントサイズ、私達はちょうどばかげできる ここでは、96点。 それを保存します。 うわー、それは、大きなフォントサイズです。 すべての権利は​​、ので、それは非常に簡単です。 実際には、本質的に見ている 私が作った一番最初のウェブページ 数年前、ときに私の最初 このようなものを学びました。 これは非常に作ることは非常に簡単です すぐに恐ろしいもの。 そして、あなたはウェイバックに精通している場合 archive.org上のマシンに、 すべての私の恐ろしいを見つけることができます 学部のWebページを参照してください。 一つは、前面にカーミットがありました。 私は思った段階を経て それは背景を取るクールだった 私はあなたの方法を学びました赤いカーテン、 タイル画像は、再び、再びすることができ、 再び、とページを埋めるために 大きな粘着赤いカーテン。 次いで、この上に、アイコンであった あなたは私の家に入るためにクリックしなければならなかったことを ページだったので、 非常に流行した。 そして、私の最初のプログラムは、私が今まで書いた PHPで、しかし、言語ではなかった ゲストブックを書いた、真珠と呼ばれる、その 本当にクールなものです 多くの人があなたを期待する ホームページに持っている。 ページに到達したとき、彼らはあなたが欲しい に署名し、あなたが誰であるかと言って そしてなぜあなたはそこにいる。 これは非常に1990年代スタイルのWebデザインです。 しかし、これらの日は、確かに、我々はしました たくさん遠く来る。 そして、あなたはセクションで、参照して、さらによ 問題にすることにより、7を設定 、これらの日のライブラリを活用する それは作るためにそんなに簡単だ すぐにきれいなもの。 本当にここに、私達はちょうどスクラッチしている あなたは何ができるかの表面 文体。 実際には、すでに、私が強調してみましょう これはすでに、醜いではないなっていることを ただ審美的​​、しかし言葉で 私のコードのスタイル、またはの 私のコードの設計。 私は現在、どのHTMLを、comingledた 緑がかったオープンタグはと、そこにある CSSプロパティ、どの 完全に合法です。 これは本当にある言語 その起源を持っていた。 しかし、クリーンなデザインの利益のために、 私たちは、ファクタリングのものを始め多くのように hファイルにCファイルから出て、みましょう 私は実際にその種類の練習を 原理とやって起動 この代わりに。 私はここでstyleタグを設置しましょう​​、その また、HTMLに存在し、私を聞かせて 次のように指定します。 私はこれを削除してみましょう。 背景色は赤になるだろう。 私は完全にこれを削除するつもりです。 私はスタイルを取り除くつもりだ 属性、および私が一意に行くよ 一言でこのdiv要素を識別 - 任意ですが、合理的に、引用 引用終わり "トップ"。とidは特別です 一意的に定義する属性 特定のHTML要素 そのidを持つように。 、ここまでで私は今、様式化され、それにしたい場合 私のページの頭の内側 styleタグ、その予告 私はハッシュトップを行うことができます。 そして私は中のカップルを置くことができます 次にブレース、Cを彷彿とさせる、とさせて 私には、その様式に貼り付けます。 そして、私はここに先に行くと予想してみましょう ここで私はこれで行くよ。 私も作成してみましょう1 一番下のdivのために。 私がダウンしてから、この恐ろしいコードを取得しましょう ここ、ここに入れて、私はなるでしょう もう少し今肛門と様式化されたそれ ただ自分自身で物事を置くことによって セミコロンで終わる行、。 私はスタイルタグを取り除くましょう。 しかし、私はまだいないよ。 私はもう一つのことを行う必要があります。 うん、idは、 "ボトム"を、引用引用終わりに等しい または任意のID私がしたい その要素を与える。 さて、私はここで振り返っ手放す。 そして、これはひどいです。 私は96点に対処することはできません。 24点を行うましょう。 または、より正確かもしれません。 あなたが実際にピクセル、ピクセルを使用することができますので、 あなたは本当に細かい粒を得ることを あなたのページの上にコントロール。 余談ですが、それは必ずしもありません ためのユーザーであれば最高のもの、 アクセシビリティの理由は、したい サイズを増加させることができる。 そうする方法があることを認識 必ずしもないもの ハードコードすべて。 すべての権利なので、それは大きいです、24点、 デフォルトは何より。 しかし、今それは少しクリーナーです。 そして、私は、この一歩いきましょう。 ただ、ヘッダファイルのアイデアのように、 我々はそれに一歩近づいているに気づく。 私は、因数外を持っているが、まだ残って 私のページの内側に、それらのCSSルール。 なぜ私は、この一歩を取ることをお勧めします さらに、完全にこれを削除し、 別のファイルに入れて？ だから私は右、それを再利用することができますか？ これはただの直感のようなものです 今。 前に、私はそれだけだったと主張し 醜いスタイルを持つばかり の内部属性 自らをdiv要素。 しかし、それを通して考えるだけの種類。 、もしあなたのページがどんどん長くなるにつれ あなたがここに入れて、ここで、としている ここで、ここでは、これらの異なる全ての 色、およびそのような他のフォントサイズ、 属性には、あなたのページは非常に迅速です。 あなたのために管理不能になることだろう。 誰かがあなたにまで来て、場合 と言い、ああ、あなたは何を知っていますか？ 私は実際のフォントサイズを変更したい 二つの追加点によって、あなた 行くと、検索と置換する必要がある場合があります コー​​ドの行の膨大な数。 これは、集中化するはるかに魅力的だ ここにすべてのそのような美学。 しかし、あなたはそれらを再利用したい場合 複数のWebページで美学、すべて のために、より説得力のある インスタンス、ファイルを作成します それらの内容で呼びかけた。 そして、私がこれを行うことができます。 このファイルを保存します。 私が言うのstyles.css、任意の、 しかし、従来の。 私はジョン·ハーバードの家に入れてよ 簡略化のために今のディレクトリ。 そして、私は私のウェブページで行うことができます取得することです 、完全にstyleタグを取り除く とややunintuitively、リンクを使用し あなたのリンクを与えるものではありませんタグ、 ハイパーリンク、クリック可能な感覚が、 私は、リンクのhrefに等しいと言うところ のstyles.css。 この要素とその関係 Webページに持っているとして機能することです そのスタイルシート。 それでは、どのように私はこれを知っていましたか？ 一つは、あなただけ、マニュアルを読む またはあなたの周りグーグル、そしてあなた さまざまなリソースを見てください。 私は本当にあなたが拾う方法である、という意味 このようなテクニック、そして、一貫性のある 自分が新しい教育のこの考えに 言語は、再び、あなたはそれを見つけることができます 物事の有限数しかありませ あなたが得れば、任意の言語へ 彼らは、それを取得ことがわかります 速く書くこと。 確かに、新しいプログラミングを学ぶ 言語は、新しいよりもはるかに高速です 話し言葉なぜなら、これらの事 はるかに小さく、はるかです 正確に定義された。 しかし、私は少しを強調してきた ここで異常。 なぜ私はこれを強調している 前方のここにスラッシュ？ 私はタグを閉じる必要があるため。 私はタグを閉じる必要があります。 そして、あなたは無数のリソースを見つけることができます ないオンライン 終了タグは必ずしも。 そして現実的に、それは厳密にはありません 技術的に必要な、そこにある 現実の理由は、ブラウザだけである ウェブの間違いはかなり寛容 ページ、良くも悪くも、 しかしほとんど悪化。 だからここに、これはただのクリーンな方法です このような愚かな何かを言って、 あなたは、リンクタグを開きたい場所場合 しかし、それを閉じて、という概念は本当にありません リンクタグのコンテンツの。 それはちょうど、これをロードすることを意味 提出し、ここでそれを置く。 それはあなたがすることができ、Cでシャープインクルードようなものだ すべてを一度にタグを開いたり閉じたり 同じタグ内。 そして、この他の例があります。 これは、これを行う方法はありませんが、 BRタグ、改行のために、もし私が 本当に私が何であったかを達成したかった Enterキーを押すことで、前にしようとし、場合 私は、改行、改行を明示的に言う 改行、改行、および その後、今、あなたは気づくでしょう、このページをリロード そのページの一番下にある、 確かに、はるかに遠くダウンで ページの一番下。 しかし、はるかに行うことができる きれいCSSで、と余白と、 および他のそのような美学と テクニック。 だから今のところ、持ち帰りはされています。 HTMLでは、私たちはこれらを持っている 物事は、タグと呼ばれる。 CSSでは、これらのものを持っている プロパティと呼ばれる。 我々は、これら二つの言語をcomingleできます どちらのスタイル属性を使用して、 またはstyleタグ、またはベストまだ、ファクタリング 完全にそれから、我々がそうであるように 問題7に設定してください。 質問、その後、約 ここで概念的基礎？ 読者：私は質問があります。 SPEAKER 1：ああ、ごめん。 読者：なぜそれは着色しませんでした - SPEAKER 1：ああ、他のタブの？ ここにこれ？ 読者：いいえ、それはのようなものだ - SPEAKER 1：ああ、からです 私はずさんされていた。 私は間違った場所にファイルを置く。 だから私は実際にここにそれを置けば、私 chmodのそれ、のstyles.cssのためのすべての+ R、および 今、私たちは今、ページをリロード 様式を取り戻す。 とフォントサイズがあるので、 別の、我々は非常に限り表示されない ホワイトスペース。 私たちは、代わりに何を参照してください デフォルトではなくなります。 良い質問です。 はい？ 聴衆：なぜリンクである ヘッダ内部のタグ？ SPEAKER 1：なぜのリンクです ヘッダのタグの内側 - 短い答え、という理由だけで。 それが決定されたものです。 リンクタグは、ときに行くところです あなたはと呼ばれるものを持っている 外部スタイルシート。 その他の質問は？ すべての権利は​​、よくこれを行うてみましょう。 今日は私たちの前はとても楽しいを持っている。 ただスクラッチだ CSSの表面。 これを実行してみましょう。 Let 'sは、ここで5分間の休憩を取る なぜなら、私の電子メールごとの更新でハングアップさせて そこに今日の2時30分っぽいまで。 しかし、あなたがする必要がない場合 去る、それは大丈夫です。 しかし、我々は後に押し進めるだろう 5分間の休憩。 そして、私たちは少し何かを学びます PHP、MySQLは、などについて。 右のすべて、そう結ぶために、今、のは試してみましょう 一緒にこれらのアイデアのいくつかとする、 、我々の独自の検索エンジンを言う。 私は、むしろ不思議なことに、気づいた 次。 あなたはGoogle.comにいるときは、している 通常はここでこのようなURLで ドットコムの後に何もない。 しかし、私のような愚かな何かを検索した場合 猫、と入力し、Enterを打つ、我々は得るだろう - ではない 愚かな、しかし、あなたは知っている。 [OK]を、ので、ページの上部に、気付く 現在、URLは、もちろん、変化した。 そして、これは何もない 私たちのいずれかに新しい。 あなたがリンクをクリックしてくださいとか Web上で行われます。 しかし、ここで興味深いものだ 次のとおりです。 そこに混乱の全体の多くは、ですが、う 私は離れて私にはないものを投げる 非常に理解したりしない 本当に関連見える。 私は、このを取り除くましょう。 私は、このを取り除くましょう。 そして、私はただ取り除くう このすべての。 そして今、猫がURL内にあることに気づく 等しいその後、Qに続く それの前にサインインします。 だから、これがどのように判明 それが来るとき、それが動作する方法 入力および出力である。 我々は長い間について説明しました ブラックボックスは、右？ これが実現される機能であるのであれば ここにブラックボックスとして、それは入力を受け取り、 と手段、よく、出力を生成します あなたへの入力を提供することで ウェブサイトは、そのURLの、多くの場合、方法によってです。 あなたは、単に疑問符を置く その後キーが値に等しい。 そして多分アンパサンド、その後 他のキーは多分、次に値に等しい 別のアンパサンドは、キーが値に等しい。 それはあなたが鍵を渡す方法だと、 入力の値は、ペア。 だから私は今、[Enter]をヒットした場合、何 グーグルについての興味深いことがすべてです 私が削除した混乱は表示されません 厳密には必要であるように。 私がGoogleに送信する必要があるのは問題である マークqは猫が取得することに等しい いくつかの猫をバックアップします。 まあ、そのの意味、、 私はgeditのを引き上げた場合、私が始めたさ ここに私の独自の検索エンジンを作る sea​​ch0.htmlと呼ばれるファイルに記録します。 そして、私が先に行くと、削除させて あなたそのさらに1行 見ることを想定していなかった。 そして今、私は私自身のブラウザに手放す そうではないGoogleに、とに行く http://localhostと。 そして、それが邪魔になるために起こっている。 だから我々は、に別れを言わなければならないとしている 今のところ、これはこっちに移動することを、 ああ、今、私たちは、必要があるとしている そのファイルに別れを告げる。 あなたと呼ばれるファイルを持っているときはいつでも 内のindex.htmlやindex.phpを ディレクトリ、ウェブサーバである場合 このように構成され、何をよ 参照し、デフォルトでは、その内容です ファイルではなくのリスト ディレクトリ、私はここで欲しかったよう。 スペックでこれについての詳細。 あなたはそれを見ていない。 だから、これは私が実際に欲しかったものです。 しかし、先ほどありました と呼ばれるこのフォルダ内のファイル index.htmlをとindex.phpを。 そしてWebサーバがあった 私にそれらのファイルを示す。 代わりに、私は、このディレクトリが欲しい ここにリストされます。 だから私はに行くつもりです CSSとsearch0に行く。 そして、私は、これは、それがあることを行っていると主張している 私自身の競争の始まり 検索エンジン。 そして、これを行うために、私はに行くつもりです ここでは、CSSに変換し、で開く geditの、検索0。 しかし、残念なことに、そこ ずっとここで起こっていない。 私がしたすべては、見出しタグを使用だった 、H1と呼ばれるように起こる 本質的に大きな意味 大胆で、そしてそれはそれだ。 しかし、我々はできる手段 提供する入力は、これらを経由しています 物事は、フォームと呼ばれる。 だから私は先に行くと、開いたり閉じたりさせて、 先制、formタグがある。 そして、私が先に行くとやらせる このような何か。 入力、タイプはtextと等しい。 その後のは、内にタグを閉じてみましょう 括弧自身。 私は、テキストフ​​ィールドを起動する必要はありません とテキストフ​​ィールドを停止します。 それはちょうどそこかどうかになるだろう。 そして以下、やらせるのこと 入力タイプは提出等しい。 これを保存します。 そして今まさにそれにしましょう 迅速な健全性チェック。 リロードしてみましょう。 [OK]を、ので、それは悪くはない。 それは、Googleのスタイルではありません それはかなり近いです。 テキスト·フィールドがあります。 私は、Enterキーを打つ、でいくつかのものを入力することができます しかし、まだ何も起こりません。 そして、私は指定していないので、それはだ このフォームのアクションは、いわば。 だから私は、フォーム要素に戻った場合、 それが判明した、と私はこれを知っている ドキュメントを読んでたから、その formタグには、属性を取り URLであるというアクション ウェブサイトのどのあなたに フォームを送信したい。 私は本当に我々はする時間がないと思う のための全体のバックエンドを実装 検索エンジン今日。 だから、私達はちょうどええ、言おうとしている、 google.com /検索してください。 そして今、私は私の引用符を閉じてみましょう。 そして、私がさらにあることを指定できます 使用する方法が起こっている 取得と呼ばれていました。 長い話を短く、で、2つの方法があります 少なくとも、あなたは情報を提出することができます ブラウザからサーバへ。 一つは、今日の目的のために、取得しており、 それはただ、URLに意味しています。 あなたは、正確に疑問符を参照してください 看板、そのアンパサンドに等しい 我々は前に見た。 またはPOSTと呼ばれる代替手段はあり。 今のところ、ポストがしばしば使用されていることを知っている あなたがファイルをアップロードしたいときに、などの 画像など場合、またはあなたがしたい クレジットカード情報を送信し、又は それがないこと、パスワード、何 本当に概念的に、意味をなすか、 のURLに終わるためにセキュリティ面では、 お使いのブラウザ、スヌーピング両親、 またはルームメイト、またはアクセスとのだれでも コンピュータに表示される場合があります。 それでは、そのここに保存してみましょう。 そして、私はもう一つのことを行う必要があります。 それだけには十分ではありません 私のテキストフ​​ィールドを与えると言う。 私は、そのフィールドのを与える必要が 名前を大切にしています。 だから私はGoogleの選択肢を借りてみましょう 名前、q、およびその第二の指定 私は本当に気にしない属性 [Submit]ボタンの名前。 私が気にすべてが提出され どのユーザがタイプインチ そして今、これは醜いの一種である。 それはちょうど提出すると言います。 それは結局、私はからこれを知っている マニュアルには、私は実際に言うことができます 値は引用符引用終わり "CS50に等しい sea​​chでき、 "閉じる引用。 その後の、再度リロードしてみましょう。 だから私は、Command-Rを打つ続ける、または リロードするために私のキーボードのControl-R。 今、私たちは、もっと面白いを持っている 検索エンジン。 それは非常に似ていない まだGoogle、しかし。 それでは、ここで先に行こうと 少し改行を行う。 [OK]を、ので、今我々は、Googleを持っている。 私たちは、実際にはほとんどのGoogleを持っている。 だから今何が起こるだろう？ 私は何を入力するつもりです 猫のような。 とブラウザを解析しようとしている その私が定義したフォーム。 そしてそれは、送信するために起こっている そのURLへのユーザー。 今回だから、いくつかの好奇心の理由で、 私は、株式に関する詳細な情報を得た 実際の猫の約。 まだ我々に気づくので、しかし、それは大丈夫です ここで終わった、qは猫に等しい。 だから長い話短い、それはかなりそうです ユーザーからの入力を取得するのは簡単。 かつ公正であるためには、束はあり フォームフィールドの他のタイプ。 少し相互にそこのチェックボックスです、と 排他的なラジオボタン、 メニューなどをドロップダウン。 しかし、それらのすべてが比較的通りである。 簡単として実装 このテキストフ​​ィールドがあった。 そして最終的に、我々だけで行う必要があります 誰かが他のリッスンしていることを確認 行の末尾にあることを得るために 情報が何らかの形で、処理され、 私たちの猫をお返し。 少し見てみましょう より複雑な例。 、私は私のバーチャルホストのディレクトリに移動してみましょう にローカルホスト、公共、およびI 今日のソースコードを置く。 これはすべてのコースの上になります いじくり回すにあなたのためのウェブサイトと。 そして、私はfroshimsに行けば、私は開いてみましょう 今、このファイルをバックアップし、froshim0.php。 こちらは、そう、もう少し冗長だ 我々は最初からこれを書いてません。 しかし、ちょうど今、いくつかの多少に気付く おなじみの特性。 One、formタグ、別のアクション。 それは完全なURLではありません。 さて、それはと呼ばれるファイルに明らかだ register0.php、一瞬で、なぜなら 私は自分自身を少し教えるつもり PHP、プログラミングについて何か 言語、PHPはに使用することができるので Googleがどのような実装として実装 それらの検索エンジンのバックエンド。 Googleは、現実には、おそらく使用してい いくつかのPythonの、いくつかのC + +、および 他の言語の束。 しかし、我々は確かに検索を実装することができます 我々が望んでいる場合、PHPを使用して結果。 しかし、今のところ、我々はそれをシンプルに保つでしょう。 そして、これは実際に1を彷彿とさせる 他の非常に最初のウェブサイトのI 年前に作られた。 戻って私の日では、に登録さ で新入生として学内スポーツ 歩いて、一枚の紙に記入 庭を横切って、そして、それをドロップする におけるプロクターのメールボックス ウィグルスワース、そしてそれはあなたの方法であった 登録された。 そして私のプロジェクトまもなくCS50後、 どれが完璧になり、ことを入れていた 感覚が、ウェブ上に、それはありませんでした それが今のように、その後流行のように。 しかし、我々がしなければならなかったすべては、作成しました 本質的には、HTMLフォーム。 そして、そのフォームに見えた 大体このような。 私はのための入力を持っていた 新入生の名前。 私がいるかどうかのために別のチェックボックスがありました または、彼らは船長になりたかったではないか、何 自分の性別があって、 彼らの寮は何だった。 そして私は難しいことでコーディング Apleyコート、そしてCanadayような、 灰色などが挙げられる。 だからもう一度、新しいタグ。 前に、これらを見ていない、新しい 属性が、かなりアクセス。 一度の例を参照してください、あなたは優しいことができ そのアイデアを借りて、ドロップをするの ほとんど何のためのプルダウンメニュー。 しかし、どのようなキーのはつまり、各 これらのことは、名前を持っています。 そして、このフォームの下部に、そこ そのラベルの送信ボタン、 または値が、レジスタです。 それでは、このページに行きましょう。 私に戻ってみましょう ディレクトリのリスト。 、私はfroshimsに行こう とfroshim0.phpに行く。 だからそれは、公正であるためには、恐ろしいです。 だから私は間違いなくこれを型にはめることができ いくつかのCSSで、私はいくつかを作ることができる グラフィック、おそらくいくつかの色を追加し、 これはきれいにします。 しかし、機能的に、私はこのことを主張するだろう 実際にはかなり完了です。 残念ながら、私は、これに必要事項を記入するとき デビッド、船長、男、我々が選択します、 みましょうと言うマシューズ、レジスタ、 これが起こることすべてです。 しかし、持ち帰りのカップルを気づく。 一つは、どのようなファイルには、それらを返し その結果、明らかに？ だから、確かに、register0.phpです。 我々は、そのアクションを見たという事実は、そう 一瞬前値レジスタ0のため、この 我々は確かに終わったことを裏付ける その特定のファイルでアップする。 さて、これは単なる醜いテキストです。 しかし、このテキストがあることに気付く ローカルホストから来て、 これは、アプライアンスからです。 たった今としてアプライアンスを考える にある可能性があり、Webサーバ 科学センター。 これは、実際のWeb上で可能性があります。 だから、公にアクセス可能です。 だから明らかに、合格のいくつかの方法があり サーバへの入力フィールドを形成する それは彼らと何かをすることができるように。 残念なことに、レジスタ0 かなり愚かです。 それがない全ての配列をプリントアウトです それは次のようになります。 そしてそれは、配列ではありません 我々はそれを知っているという意味。 そのPHPが判明し、多くの 言語だけではなく、数値的に持っている その最初のインデックスであり、インデックス付き配列 ゼロ、1つ、2つ、その後ドット、 ドット、ドット、nはマイナス1。 これはと呼ばれるものです。 連想配列。 連想配列は1つです どこにキーと値のペアを格納することができます キーは数字とは限りません。 それは実際には文字列、単語である可能性があります。 それで、これは、実現することができる ボンネットの下に、それは結局、 と呼ばれるデータ構造を使用して？ 劇的な何かは考えた 約起こることだった - ハッシュテーブル。 だからハッシュテーブル、リコール、あなたのそれらの 誰がPセット6のためにそれをやった、あるいはリコール それ、あなたがしようとしました少なくとも場合であっても、 ハッシュテーブルは、我々の使用では、に使用されていました 言葉だけを格納します。 しかし、実際には、保存された キーと値。 あなたは、Pのためのハッシュテーブルを実装した場合 6辞書を設定し、キーがあった 言葉自身、および値 効果的にtrueまたはfalseでした。 はい、ここに、または暗黙的に、 いや、ここにいない。 さて、私たちはその考えを一般化することができます。 そして、我々は非常に類似したデータを使用することができます ていない文字列を格納する構造 あなたのハッシュテーブル内の一人で、それ自体が、 あなたのハッシュの一人一人でのことを仮定し テーブルのノード。 あなたも試しにこれを行うことができます だけではなくブール値を持っている。 あなたは、何か他のものを持つことができます。 キーがマクスウェルではなかった場合はどうすれば、用 インスタンスが、引用引用終わり "名"、または 引用終わり "キャプテン"を引用すると内部の Cのデータ構造には、置く 値だけでなく、ブールが、値の 引用引用終わり "ダビデ"など "M"、または "マシューズ"などが挙げられる。 私たちが使用したものと同じデータ構造だから 明らかに他の言語に存在する。 そして私は、彼らが実際に多くのだと主張するだろう ここにアクセスすることがはるかに簡単。 実際に見てみましょう 現在いくつかのような構文で。 私はPHPのディレクトリに行くつもりです。 そして、私はより良いを開くつもりだ 前からのhello-0のバージョン。 私がしたすべてがあったことに注意してください いくつかのコメントを追加します。 だから我々は気晴らしを取り除くことができます。 そして、このプログラムは、実際にプリントしない こんにちは私は間に指定したので、 私は、そのコードを実行したいタグ。 今、我々はすぐに説明します なぜこれが便利です。 しかしみましょう、ここでもう一つの例を開きます。 、私が先に行くと言うを開くう 条件1のgeditの。 これは今の時間に道戻ってきました。 しかし数週間前、私が思うに、週に一つ以上で 週2、我々はと呼ばれる例があった conditions1.c。 そして、私は、PHPでそれを再実装することを決定 単に強調の一種と PHPは、構文的には、ほぼ同じです Cにこれは大きな飛躍ではない 先週からこれまで。 このプログラムの一番上に注意してください、どの いくつかと、前と同じように、始まります 私は取り除くだろうコメント、 気晴らしとしての。 私はPHPにいることに注意してください このファイルのモード。 このコードのように、我々が表示されます、 実行されてしまいます。 readlineのがあることに注意してください、 おそらくある GetStringメソッドのPHPのアナログ。 それは少し違うことに注意してください。 あなたが実際にプロンプ​​トを指定します この関数は、読み込んだ行と呼ばれ、そのう ユーザーが見ているもの。 だから、printfを手動でする必要はありません。 しかし、それは大したことではありません。 私は、$ Nの中、保存するつもりです この属性の値を返すので、何 ユーザーの種類には、そのintです。 そしてここでは、別の好奇心だ。 これは、PHPで、任意の変数が判明 ただ先頭にする必要があります ドル記号。 それは少し迷惑なんだ。 しかし、私はPHPで行っていない何かに気づく。 何が左側から欠けている の側は、等号？ タイプの言及はありません。 だから、これは良いではC.とは異なります も悪くも、PHPは疎です 型付けされた言語。 それは数字を持っています。 これは、文字列を持っています。 これはブール値を持っています。 そしてそれは数を持っていません その他のデータ型。 しかし、プログラマは、通常 それらを気にする必要はありません。 これの利点は、それがなることです プログラムへのそれは少し楽。 あなたは、少し考えることができます。 欠点は、それはまたあなたの最大開きです 誤った場合の潜在的なバグ 文字列として数値、文字列を扱う 数など、潜在的に、それでも その後、PHP、および言語の多くは、 かなり寛容である。 彼らはと呼ばれるものを使用します 暗黙的キャスト。 そして、あなたはコンテキスト内でn個を使用しようと 数値の状況、それは意志 になるだろうここで何を変換 ユーザタイプであれば理由文字列、 で何か、あなたは結果を得るため、 readlineのと同様に、または、文字列を取得する それは、文字列を返すことが起こっている。 しかし予告、数行の後、私 nはゼロよりも大きいかどうかを確認。 だからPHPは暗黙のうちにキャストしようとしている私の "文字列" 123、または任意のユーザ int型に、内の型。 だから要するに、スタッフだけの作品 より直感的にたくさん。 だから我々は今のいくつかをリラックスし始める 我々は過去にやっている事。 このようなものがたくさんある しかし、同じ。 まだ等しいに等しいた。 余談PHPも等しい等しくたよう で、多分、それに等しいが、より 未来。 それがあった。 タイプミスが、2つの等号と同じことを意味し 比較のために以前のようなもの、。 printfの前と同じことを意味します。 バックスラッシュnは同じことを意味し 前と同じようなもの。 だから、どのように私はこのプログラムを実行するのですか？ さて、以前のように、私はPHPを行う場合、 conditions1.php、およびタイプ 123のような数字。 それは正の数です。 私は0を入力した場合、私は0を選択します。 私は負の123に入力した場合と、私が取得 だけで戻って負の数、 、構文的に、PHPを避ける スーパー、スーパーと似ています。 では、なぜこれが便利になりました Webコンテキストで？ まあ、のはこのfroshimsに戻ってみましょう 例えば、見て、 もう一度、ここでこのように。 実際にWebページを引き上げてみましょう 再び、それはこのように見えた。 と我々に何ができる 提出されているデータは？ まあ、私は新しいを開くせ このバージョンの。 そして、あなたはその問題が表示されます セットの仕様では、順を追って説明 これらのいくつかを通して。 ゼロで始まるのではなく、 froshims3を見てみましょう、 これは、もう少しありません。 のを開いてみましょう、実際には、最初に注意してください まで0が何であったかなので、参照してください レジスタ0は何であった。 レジスタ0が何をしたかに注目してください。 一つは、私が先頭のコメントを持っている。 それらを削除して、これだけに焦点を当てる。 register0.phpの内容の大部分 明らかに、ですが、どのような言語？ ただ、生のPHP。 予告だから、このファイルが起動しない 、オープンブラケット、現時点では、との 疑問符、PHP。 PHPは、あなたが混在することができません HTMLタグでPHPコード。 しかし、私はここで内側やった こっちのページ。 さて、もう一度、あなただけからこれを知っていると思います マニュアルを見た。ますprint_r、 それは、判明print_recursiveです。 _recursiveそして、これは単に便利です ただプリントアウトユーティリティ関数、 再帰的に、どのようなあなたはそれを渡す。 あなたはそれを配列を渡す場合は、 それは、配列を印刷します。 あなたはそれに番号を渡す場合は、 それは番号を印刷します。 それよ、それを文字列を渡す 文字列を出力します。 あなたはそれをハッシュテーブルを渡す場合は、 ハッシュテーブルを出力します。 あなたはすべてを記述する必要はありません 自分でそのコードの。 今、私は入るんだことに気づく こっちPHPモード。 私はこっちPHPモードを終了しています。 だから、Webサーバがこのファイルを読み込むとき 上から下へ、ので、左から右へ それは、。PHPと呼ばれるファイル名で終わる PHPタグの中ではありません何です ただ唾になるだろう 外に、生のHTMLのように。 大したことはありません。 しかし、すぐにWebサーバの通知など これ、それは言うだろう、私はすべきでない 、文字通り、ポストますprint_rを吐き出す。 私は次のことを実行する必要があります コー​​ドの行。 最後の質問は、だから、その後、このファイルの 、まあ、一体この何ですか？ 推測してください。 おそらく、$ _POSTとは何ですか？ 読者：[聞こえない] SPEAKER 1：うん、ポストされたデータ。 思い出して、みましょうに戻ってスクロール ちょっと時間。 froshim0は、再び、このように見えた。 このスーパー大部分は単なるHTMLです。 繰り返しになりますが、いくつかのタグあなたはそうではありません まだ見て、またはそのと あなたはすでによく知られている。 しかし、興味深いのは、これだった。 この1行は、本当にリンクです それは私たちのregister0.phpファイルへ。 私は、メソッドのポストを経由して提出しています。 そして、それはつまり、パラメータ におけるユーザタイプではありません どこで終わるつもり。 彼らはするつもりはない URLに表示。 彼らはまだから送信されるしようとしている クライアント、ブラウザから、へ サーバーが、ちょうど他の経由 我々は我々の手を放棄するだろうという仕組み 今日のために、それがURLではありません。 しかし、で今の関係を気づく 慣例によって、である、ポスト、 ここに小文字。 しかし、私はregister0.phpを開く場合、 私は明らかにこれを印刷しています。 だから、これは奇妙なの一種である 命名規則。 しかし、PHPでの素敵なのはであるとき で、Webコンテキストでは、PHPを使用していない 私は一瞬前に行ったように、コマンドライン、 あなたが実際にウェブでそれを使用しているとき ページ、バーチャルホストのディレクトリに、我々はあるとして、 自動的にPHPはこれを記入します 連想配列であること、 そうで、ハッシュテーブルを話す ユーザがログイン入力し、すべて 要するに、すべて大文字で$ _POSTです ちょうどそのPHPグローバル変数 ときに魔法のように、あなたのために作成 Webコンテキストでは、PHPを使用した。 そしてそれは、すべてのそれの内側に置く そのフォームでパラメータの名前 このファイルのすべてに提出されました ユーザがログイン入力した値 だから、それはあなたに渡し何ユーザー そのフォームに入力しました。 だから前に、私たちは本当に愚か出力を得 すべて私がやったので、これだけを見ての 再帰的にこの配列をプリントしました。 キーは名前で、値はデビッドです。 キーはキャプテンです。 値がオンになっています。 と二重矢印や角度 ブラケットそこに、これは単なる任意です。 これは、コードではありません。 これはちょうどあなたを示すのPHPの方法です いくつかのキーの値は何ですか。 しかし、今私が提案してみましょうでその froshIMs3、それはほとんど同じだ それは、このファイルに提出除き。 そして再び、我々だけのようなものになるだろう この一目、単にいくつかを参照するには 構文が、予告何 このファイルはありません。 だけの行に基づいて推測を取る おそらくのように見えるんコード、 ギリシャ、ある程度、 明らかにやっている。 このファイルは、何らかの形で関係している メールには、電子メール。 したがって、このプログラムは、何をやっている？ このバージョンでは、私が実際にあった場合 このフォームに記入して - そして私に行かせて froshIMs3なく、froshIMs0 - 形は同じに見えます。 デビッド、船長、男性、寮、マシューズ。 しかし、私はこれを提出する場合、このファイルは register3.phpに行くつもり。 そして、私はそれのを見て、請求 ソースコードは、それがに起こっている 何とかメールを含む。 私が先に行くと、これを開いてみましょう アップ大きなウィンドウで、私たち もっときれいにそれを見ることができます。 我々は、バーチャルホスト、ローカルホストにいる 公共、froshims。 私は別のを開くつもりだ プログラムは、単にので もっと一度に見ることができます。 だから今、ここで、いくつかのことを気づく。 ファイルの最上部に開いている ブラケット、疑問符、PHP。 その後、コメントの束があり、 我々は無視することができる、ある 今のつまらない。 さて、これはあり。 これは、PHPがたくさん持っているが判明 のコードを必要と呼びかけた。 それは精神で、Cのと非常によく似ています 、どのハッシュインクルードを含める 本質的に、いくつかの内容をつかむ ただ、他のファイルとは、ここでそれらをplops ので、それらを使用することができます。 このケースでは、アプライアンスは持って、 プリインストールされ、図書室、無料で PHPと呼ばれるオープンソースのライブラリ メーラー誰にできること インターネットからダウンロードしてください。 私たちはあなたのためだけにそれをやった。 そして、これは私が今、電子メールを持っていることを意味し 私の処分で機能。 さて、いくつかのことを気づく。 私が検証するつもりだ フォームの提出。 PHP、一つは、感嘆符を持って判明 同じようにしないオペレータのためのポイント、 C.しかし、PHPは機能を持ってい 空と呼ばれる。 空の値だけあればtrueを返します あなたがそれを手の事 括弧のように、空である ユーザーは、インチは何も入力しなかった だから、これは言って、そして気付くさ 構文は、Cの非常に連想させる、もし 名前のキーなので、フォームに名前フィールド、 によって、ポスト経由で提出された ユーザは、空にされず、その 性別としての形で空ではありません よく、その寮は空ではありません - しかし、私はキャプテンを気にしないに気付く その後、我々は何をするつもりですか？ 私は実行するつもり このコード行。 そして、あなたは、この種のものと考えることができ malloc関数のように、それは少しだ それよりも手の込んだ。 しかし、今のところ、これは私に特別なを与え 型PHPメーラーの構造体。 しかし、今日のために新しいキーワードを無視します。 今、私は呼び出された関数を呼び出すつもりだ 言うIsSMTPは、SMTPを使用してください。 これはただのビデオのように、ポート25です ものは投げていた先週、 ファイアウォールへの電子メール。 ポート25は、SMTPです。 SMTPは、メールサーバを使用することを意味します。 どれ、私たちは、ハーバード大学のを使用することができます SMTP.fas.harvard.edu。 我々はアドレスから設定することができます ジョン·ハーバードのすること。 私はさらに下にスクロールすると、私が設定することができます 単に受信者のアドレス、 任意に、ジョンであることが ハーバード大学も同様だ。 そこで彼は、自分自身を電子メールで送信することになるだろう。 今私は、件名を設定することができます 登録されるように。 そして、私は体を設定することができます の電子メールには、次のとおりであります。 この行は、もう少し不可解に見える それはたくさんの理由だけだ それに含まれる情報の。 一つは、ドット演算子はあり。 誰かがすでに何を知っている必要があります ドット演算子ではありません。 それは連結です。 だから、PHPで文字列を取りたい場合、 とに、それを追加するか、それを付加 PHPで別の文字列には、神に感謝します strcopyとmal​​loc関数を使用する必要はありません、 そしてもうすべてのこと。 あなたには2つの文字列を連結したい場合は、 誰がメモリを気に。 あなたのためにその外にPHPの姿をしましょう​​。 PHPは、ドット演算子を使って何をするか ここでは、単に大きな文章を作るさ この行は、この行の このライン、このライン。 そして今気づく、それが起こっている 値をプラグインすることができます。 ジョン·ハーバードは起こっている電子メールのように、 受信するために文字通り言うために起こっている 名、コロン、何か、むしろ、我々 文字列を閉じて、上の連結 どのようなユーザーが入力 で、次に新しいライン。 その後、ジョン·ハーバードのの次の行に 電子メール、それは言うために起こっている キャプテン、Onまたは何も。 それは、性別を言うために起こっている 男性または女性。 寮はマシューズになるだろう 私の場合である。 そして、おなじみのセミコロンに気づく 一番最後に。 そして、ダウンここで、気づく、やや 続いて、再びまだ不可解な、しかし より身近になるパターン メールを送信する場合、Pは、7を設定した後 falseを返し、その後、先に行くと死ぬ。 だからPHPは、ダイと呼ばれる機能を持ってい 文字通り、ただ殺す、 ウェブサイトとだけ何をプリントアウト あなたはそれを伝える - それは、死にかけている 言葉、いわば。 と場合に、それが印刷されます、という エラー情報が何のためにあるのか外に 何が間違って行くことが起こった。 我々が持っているもの、ここで短いので、長い話、 ときに、ユーザー一例です フォーム、froshim0を提出 froshims3.php、それに行く register3.php。 しかしregister3.phpは次に進み これらのすべての行を実行する。 だから、ここではいくつかのテイクの遠かっはあり。 一つは、それが、明らかにかなり簡単です プログラムで、電子メールを送信するには、 これは良いです。 ユーザーがあなたのサイトに登録すると、内 彼らはあなたのために登録し、この場合、 スポーツには、新入生を電子メールで送信することができます プロクター、またはジョン この場合にはハーバード大学、。 しかし、それはまた、あなたは何を行うことができることを意味？ 誰から誰にもメールを送信します。 そして、これは非常に本当です。 これは、簡単に行われていない場合 あなたは、Gmailの使用に慣れている。 しかし、あなたは今までにEudoraを使用した場合または Outlookを、あなたはかなり伝えることができます あなたがいることを、メールサーバ あなたが望む誰でも。 そして、私は上に置く必要がある場所である その帽子と言うには、これをしない。 しかし、これはどれだけ簡単の証です それはフィッシング攻撃を実行することであり、 匿名の電子メールを送信し、 スパム、より一般的。 に、それは本当に沸騰ダウン あなたが必要とするすべては、一部であるという事実 プログラムによるアクセス。 と余談として、私の最も近い出会い 広告ボード、私自身年生、 私はこのクールを発見したときだった することができ、すごい、そのトリック 誰からもメールを送信。 そして、我々はいくつかの愚かなをしていた 引数、文字通り、マシューズ、 私のプロクター群の中。 私も覚えていません 問題は何だった。 しかし、私は入れて試してみたかった この愚かな議論に終止符。 だから私は、私はちょうど電子メールが送信されますことを決めた 私のプロクター·グループに、ふりをし その意見、私と他の男、 反対、彼はに黙認している どのような私の考えが入った この特定の議論。 そして、私は使用してこのメ​​ールを偽造 精神でこれに類似した手法。 しかし、それは実際に簡単だった 一度。 送信を押してください。 彼は喜んでもいなかっただろう 広告ボードであった。 そして、私は非常に迅速に内に巻き込まれた ご存知のように、私はサインインしているので秒 特定の方法で私のメール。 そして、私はそれを手動で行うものの、大型で 一部、15年後、私がいたので それによって心に傷を負った。 私は、署名を持っていない 私の電子メールになりました。 しかし1995年に、私はちょうど、SIGを持っていた 私の電子メールに署名。 だからこのノート親愛なる、と言ってはなかった プロクターグループは、私は私の考えを黙認 と、デビッドに同意そう署名し そう、新しい行は、新しい行、DJM。 だから、そのためか、一般的には、服用しないで この技術の利点。 しかし、ウェブサイトを作るとき、のために好き 作るあなたの最終的なプロジェクト、 起業家何かのためのウェブサイト、 これがどのように、実用的には、することができますです インターネット上で活用する他のサービス メールのように、その後、実際に コー​​ドを使用してのものを送ることができます。 それでは、どのように我々は、この際に改善できますか？ さて、最初のはのクイックツアーを取りましょう おわかりだろうという事のいくつか、 その後を見てみましょう 例のカップル。 安心させるためには、そう、なぜなら 我々は、PHPを飛んでいます。 そして、私はいくつかの点で、知っている、あなたが持っているでしょう 実際にこれを書いて開始する場合 既にいない。 、一つは、メインが一種であることを認識 PHPで窓の外の。 あなたが取得するコードを書きたい場合 実行されると、あなただけでそれを書き始める 限り、。PHPと呼ばれるファイル あなたは、オープンブラケットを持っている 疑問符PHPタグ。 しかし、これらに気づくです PHPでの条件。 通知は、これはまったく同じであるスライド 我々が持っていたときに我々は週1で持っていた 中で条件の状況 PHPは構造的であり、 構文的に同じ。 あなたが持っている場合にのみ、本当の違いは、 関係する変数は、それらを持っている ドル記号。 一方、ブール式 ただ、このように見える 一緒に、または-ingやとする。 スイッチは、まったく同じに見える。 、Cのに対し、PHPでの素敵な何です スイッチは、上の例でなければならない PHPでは整数や文字などのプリミティブ、 あなたのcase文は、実際にすることができます 全体の文字列で、これはです すてきなの実際に一種。 あなたにいくつかの時間を節約できます。 Cでそれを行うことができませんでした ここではPHPでのためのループです。 それは同じだ。 いくつかのドル記号を持っているかもしれません 変数の。 あなたはそれを言及する必要はありません 何かはintです。 あなただけのドル記号でそれを宣言 と変数の名前。 しかし、ループでも同じです。 whileループは同じである。 ループは同じですしながら行う。 これは、少し異なっています。 だからPHPで、配列を使用すると、次のことができます 静的に、C言語のように、配列を宣言 しかし、あなたは、角括弧を使用しています。 Cでは、中括弧を使用することになり、 あなたも知っていた場合。 しかし、これはPHPで実際には非常に一般的です この場合には、配列を宣言するために、 数字、およびコール 変数番号。 変数自体はこのように見えます。 ここでは文字列は、こんにちは "引用終わり引用 世界は。 "あなたはバックスラッシュn個を持つことができます。 私は単純にこのケースではない。 さて、これは面白い構造です。 Cはこれを持っていません。 しかし、これは超便利です。 そして、あなたはPセット7でこれを表示されます スペック - 各構築のために。 あなたは、すべての上に改めてしたい場合 配列の要素は、あなたが持っていない $ iと$ Nに対処するため、 と+ +、およびすべてのこと。 あなたは、文字通り、PHPで、これを言うことができます - 数として各数値のため、 私は$数字と仮定してい 数字の配列です。 そして、私はそれぞれの番号を言うとき 数としては、これはに起こっている 自動的に、私のループが実行されるように、 、各反復で、値を更新 ドル記号番号の内側 - 再び、再び、再び歩くこと 私にとっては、その配列上。 だから、ちょうど私達にコードを保存します。 いいえセミコロンなし、+ +の、いいえ、私の、 ないn個の、それだけでうれしいですん。 しかし、PHPはこれを持っています。 そして、これは超強力です。 そして、あなたがこの手を使います で、Pに7を設定します。 と連想配列も宣言されています 角括弧で。 しかし、今の構文に気づく。 それは我々が見たものを連想させるだ 一瞬前にしますprint_rと。 どのように多くのキー、少し健全性チェックとして、 この配列には、持っているように思えません。 だからそれには2つを持っています。 そして、私はこの配列を呼び出す。 それは場合に役立ちますしかし、あなたは考えることができます このようにハッシュテーブルの、または 連想配列。 しかし、それだけで違います 配列の型。 そして再び、異なる言語 これらを持っている。 我々は同じような何かが表示されます JavaScriptで同様に。 つのキーがあります。 一つは、 "記号"、引用引用終わりあるものです 引用終わり "価格"を引用するとそれらのキー 各々が値を有する。 この場合、シンボルの値がため、FBです Facebookの、価格の値は、49、26です。 これは、Facebookの株式であった 今朝の時点で価格。 だから何について便利です 連想配列。 私は数値を持っていたかもしれない だけとされているインデックス付きの配列 シンプルな角括弧。 と私は、ドル記号があったかもしれない 引用はこれだけに等しい。 私は実際にそれをやってみましょう。 私はだけではなく、宣言されたと仮定します そのようなこの配列。 つまり、完全に有効です 構文。 それは、任意の情報を失うことはありません それ自体。 私はまだ、シンボルがFBであることがわかり 価格は、26 49であること。 なぜ連想です 説得力のある配列？ 読者：あなたは覚えておく必要はありません あなたはものを置く場所。 SPEAKER 1：正確に、あなたが持っていない あなたはものを置く場所を覚えています。 あなたは、任意に覚えておく必要はありません 銘柄記号、ブラケットがゼロであることを、 そして株価は、ブラケット1にある あなたであれば特に危険である 最終的には、物事を変更します。 これは、関連付けることが非常に良くだ 我々は、メタデータと呼ぶことに何 あなたの実際のデータを使用して。 私は何が本当に気にしていると主張するだろう ここで約FBと49、26です。 シンボルと価格がメタデータです それは、データを記述する我々 実際に気に。 しかし、これはちょうどそんなにある アクセスしやすい。 さて、余談何だとし​​て 我々が支払う価格？ 我々はこれを行ってきた 週間CS50た。 この機能は、いくつかのコストで来なければなりません。 メモリ。 だから、あなただけの32ビットを格納していない 例えば整数。 おそらく、シンボル/ 0を格納している。 だから、より多くのメモリを使用しています。 とのパフォーマンスは何 で何かを調べる 連想配列、おそらく？ それはおそらく遅い。 ランダムアクセスはいいです、特に するときは、バイナリ検索を行うことができます。 しかし、あなたは実際に今ではない探しているなら 数字のために、しかし、文字列を、このために 本当に下に実装されています フード、おそらくハッシュテーブルとして、どこ あなたはどちらのハッシュテーブルを使用し 独立したチェーンと。 またはあなたが実際に試して使う 値を格納する。 だから、多分あなたは、一定の時間を行うことができますが、 それでも、S-Y-M-B-O-Lを見ている 潜在的に、だけではなく、32の ビットが何かを検索する。 だからもう一度、それらの同じアイデアが来る この文脈で再発に戻る。 しかし、再び、PHPは現在、いくつかのスーパーを持ってい 、それは結局、あるグローバル 連想配列。 私たちは、$ _POST、一瞬前に1を見た。 そして、そのスーパーグローバル キーと値を持っています。 具体的には、キー 何で並ぶ？ $ _POSTのキーはどこから来るのでしょうか？ ただ要約する？ AUDIENCE：名前。 SPEAKER 1：名前、？ 読者：[聞こえない] SPEAKER 1：名前が属性です。 まあ彼らはやったどこ、 もともとから来るの？ フォーム。 だから、HTMLページ、フォームタグを持つ場合 いくつかの入力であるの内側に、のような チェックボックス、テキストボックス、ドロップダウン メニュー名をそれぞれ有する、それらの 名前は、$​​ _POSTのキーとして終わる、と 率直に言って、そのことについては、$ _GET。 方法は、get、同じ考えである場合。 それはちょうど別のスーパーグローバルでだ。 と値はもちろん、から来る どのようなユーザーが自分でで入力 彼女のブラウザ。 しかし、いくつか他の人がそこにあります。 我々はよクッキーは、あります 最終的に戻ってくる。 しかし、それらは、あなたが知っているものです ウェブは、いくつかの良いまたは悪のために使用しています。 しかし、我々はそれに戻ってくる。 サーバとセッション、およびそれら二つ いくつかの特別な有用性を有する。 しかし、のは、これを見てみましょう。 私が先に行くと、例を開いてみましょう MVCいわゆるmvc0.php 次の略です。 そして、私たちは以前のよりも、このご紹介 あなたが設計し得ることが、実際には、典型的な 問題セット7、また、最終的なプロジェクトは、 業界のソートで 標準的な方法、そしてきれいな方法。 それは良いデザインだ。 だから、参照しようとしている、あなたはよ Pセット7、パラダイム、ソートの経験、 プログラミングの考え方、そのルックス このような小さなもの。 コントローラのモデル、CのためにM、 ビューのV。 長い話を短く、MVCは単なる一種です 作成の方法論、方法 ウェブサイト、特に、それによってあなた あなたの、愚かなフレーズのすべてを入れて - ビジネスロジック - あなたの知的財産のすべて コントローラと呼ばれるものは、ファイル index.phpのように、あるいは我々が表示されます、 quote.php、またはbuy.​​php。 問題の文脈ではあなたの、7を設定 モデルは一般的に、あなたのデータが含まれ データベースに関連した何か、私たちが説明するように 最終的に見て、あなたの意見 自分の美学を含む サイト、HTML、CSS。 だから我々はすでにC少しでこれを見ました hファイルを使用してビット。 私たちは本当に、CSSで一瞬前にそれを見た ファクタリングによってCSSの様式 我々のHTMLの外に詰め込む。 だからMVCは本当にちょうど約描いている 砂の中にラインと言って、 あなたのための興味深いプログラミングコード ウェブサイトは、我々は呼ぶことにします何に属している コントローラ。 通常、データベースに関連するもの モデルで終わる。 しかし、あなたは私たちは、問題のセット7に、表示されます それをシンプルに保つためにCとMをマージ。 しかし、ビューがある場合は、HTMLのすべて と美学は通常行く。 だから、これは実質的に何を意味するのでしょうか？ まあ、私は我々のMVCに手放す ディレクトリは次のとおり。 そして、あなたはこれらの詳細を参照してくださいよ スペックに貫通見学。 だからmvc0で、私はこれが、好きであることを主張する CS50のウェブサイトのバージョン0。 のように、いくつかのHTML私たちが持っているすべてのです ビッグh1タグ、明らかに。 そして箇条書き。 私は、箇条書きを見​​たことがない 前ですが、大したことない。 すぐにソースコードを見てみましょう。 弾丸と順不同リストが判明 オープンブラケットULは、1つ以上を使用することです より多くのリスト項目、李。 だからここに通知はアンカータグです。 私たちは、少し前を見た。 だから、これは私が実装方法です このページ。 私には2つのリンクは、2つのリストの項目、いずれかを持っている 順不同のリストについては、UL、およびエンド 結果は、審美的に、非常にこれです かなりウェブサイト、ここにバージョン0。 しかし、今では興味深いのは、どのようにこの ボンネットの下に実装されています。 私はgeditのに行くと、これを開くみよう 絵を描くことは非常に最初の例。 そして我々は、欠陥のある何を見てみましょう 潜在的に、ここにいます。 今私がlocalhostに行けば、公共、 MVCは、いくつかのファイルに注目してください。 私はのために、これらを呼び出すつもりだ 瞬間、すべてのコントローラ。 しかし、それは虐待のビットからだ あなたはすべてを混ぜ合わせて表示されます それらの内側。 と私はindex.phpの内部に手放す。 そして、私たちは、文字通り、同じHTMLを参照してください。 このファイルには、で終わるので、にもかかわらず、 。PHPは、それはしなければならないという意味ではありません 任意のPHPコードを持っている。 それだけでも、生のHTMLことができ それは愚かなのようなものだ。 しかし、誰オープンブラケットPHPがない気付く タグ、これを除いて、その、率直に言って、 コメントとしての役割を果たすためだけにあります。 しかし、それは機能的ではありません でも、面白いこと。 しかし、これに気づく。 何が今面白いのは何ですか このページで変更。 私は講義をクリックしてみましょう。 とURLが変更されようとしているに気づく。 今私はlectures.phpにいる。 私はゼロをクリックしましょう​​。 今私はweek0.phpにいるそして今ましょう 私はgeditのにこれらのファイルを開く。 だけでなく、インデックスが、う 私は講義を開く。 そして、私は、コメントを取り除くましょう この部分のみに集中する。 そして今、私はただもう一つを開いてみましょう week0.php、コメントを捨て、 ちょうどこのアップをきれいにする。 そして今、次のことに気づく。 慎重には本当にソートを考える デザイン、みましょうそれの行を作る 同じまで、何ができるか 良いここで、あなたは思いますか？ どのように私は週1を行いましたか？ これはどう。 だから、これは私が週に1を作った方法です。 私は、保存、ファイル、新規作成、貼り付けに上っ week1.php、そして私はここに行きました。 そして、私は1つを変更 - これは、金曜日の1だったもの。 私は1にゼロを変更しました。 私は一にこれを変更しました。 [OK]を、ので、今私のファイルを見てください。 何が異なって行うことができる？ おそらく機会が、どこにありますか。 だから起動する機会があり ファクタリングこのようなものを。 私のために、スポイラーとして、開くう 何をPセット7で表示されます。 バージョンでは、私が今、開く場合は、index.phpを この五、それが道に見える 確かに、多くの不可解な。 しかし、これは、今、私が呼ぶだろうものです 制御のコントローラ 私のページのロジック。 そして、あなたは種類で、再構築することができます 直感的には、おそらく、何が起こっているの。 最初の行では、それはだ 少し不可解。 しかし、と同じように、私が必要としているに気づく シャープインクルード、ファイルが呼ばれる helpers.php。 そして私は、明らかに、呼んでいる 渡してレンダリングと呼ばれる関数、 二つの引数。 一つは引用引用終わり、ヘッダーです。 そして、他には、どのようなです データ型は、ベース、これです 我々の構文の以前の？ これは連想配列です。 具体的には、タイトルに渡している 思い出させるいくつかのメタデータを 私にそれが何であるか、その値。 それから私は、ハードコーディングを参照してください UL、ので、いくつかの生のHTML。 しかし、私はPHPモードで戻ってきた 機能レンダリングを呼び出す。 あなたは、HTMLやPHPを使ったことがないので、たとえ 前に、これに見えるにもかかわらず 恐ろしい、なぜこれはおそらくです 良いデザイン？ 、それについての良いものだ 推論に基づいて？ 読者：[聞こえない] SPEAKER：1点で少ない冗長 もうHTMLタグ、これ以上はありません 頭部タグ、これ以上bodyタグ すべてのいまいましいファイルに記録します。 その代わりに、私は因数分解をしました 共通点とおそらくそれらを置く 何とか関連ファイルに ヘッダに。 近いボディ用と同じもの タグ、近くにHTMLタグ。 それがダウンして、ここで内部おそらく フッターどこかの。 そして、あなたは、問題のセット7に、表示されます これを通じて少し見学。 だから、何が待ち受けている？ 我々は能力を持っていない一つのこと まだためには、実際にデータを格納することである。 そして私たちは見ることから始めましょう 水曜日、例えば、つまり今 古くからの友人Excel、または数字、 あなたの多くを保存することができます 行および列のデータ。 あなたは何で、それを行うことができます判明 プログラムでは、データベースと呼ばれる。 躁そしてそれは、その後、判明 私たちは、のようなものを保存することができるでしょう これは、Pセットに再び表示されますた 7、ユーザー名の全体の束と パスワードであり、そのうちの後者 ずっと彼らのように、実際に暗号化された Pセット2のハッカー版であった。 そして最終的に、あなたは、これを実装します 独自eトレードのようなウェブサイトその CS50金融まとめて実装しています。 最後に、ここにこんなに遅くとどまったので、 今日は、この部分に戻ってくる場合 キャンパスの、午後4時今日、我々は あなたにSCESでだけでなく、アドバイスを与える 4:00 PMに、フェアに助言 マクスウェル·ドウォーキン、私たちはあなたにいくつかをあげる Americoneドリーム、チェリーガルシア、 チョコレートファッジブラウニー、チョコレート チップクッキーの生地、そして、ときにグーグル がっしりした猿は、これを取得する。 だから4時に待っているすべての マクスウェル·ドウォーキンのPM。 同様に水曜日にお会いしましょう​​。 SPEAKER 2：次の時 CS50、RJはインチ眠る RJ：私のセクション！ ハ！ ああ、