[Powered by Google Translate] [週9] [デビッド·J·マラン - ハーバード大学] [これはCS50です。 - CS50.TV] かしこまりました。お帰りなさい。これはCS50であり、これは9週目の始まりです。今日、我々は、Cの文脈ではもはやデザインに特に焦点を当てるしかし、PHPのコンテキストおよびSQLのビットとJavaScriptのビットで、特にpsetの7の両方の端に向かって、また、あなたの最終的なプロジェクト。実際には、あなたがあなたの最終的なプロジェクトに、その時点である場合おそらく、少なくともいくつかの考えを与えるために開始時間かそこら前にあなたのような場所あなたの最終的なプロジェクトに、あなたが1または2のクラスメートと協力したいのですが考えている、あなたが言ったクラスメートとの接続問題がある場合は、 cs50.net/partners/formのフォームに記入して自由に感じる。それはちょうど、あなたが考えているプロジェクトの種類、あなたが誰であるかを尋ねあなたは物流上の理由からだけでどこに住んでいます。そしてあなたは、来週かそこらそこスプレッドシートのURLの上に目を維持したい場合あなたは、Googleドキュメントの読み取り専用バージョンを見ることができます採用された場合は、その情報を収集している。あなたが誰かと仕事をしたいのであれば、すべての手段で人々に手を差し伸べるして自由に感じるそのメカニズムを介して。しかし、人々の大半はソロで働いていますか。それは全く問題ありません。だから、これは義務でどのような方法であることを感じることはありません。金曜日にそれは、ちょうど私とここのチームのいくつかあったほとんどの部分は空の劇場。 3、観光客はそこに座っていた、それは少し厄介だったので。我々が話をすると、データベースであった、そして我々は、pset 7について少し話をしました。そして、あなたはちょうどまだビデオでそれをキャッチするために実現しなかった場合、それは大丈夫です。私は当たり前の我々がそうでなければかかるだろうと、任意の用語を定義しようとするでしょう金曜日の講義に基づいています。しかし、今日、我々はポイントにあなたを取得しようとするつもりだちょうどPSET 7のような何かを行うことができないというしかし実際には、フードの下で何が起こっているか理解する特にいくつかの我々はfunctions.phpファイル内の定位置に置くの抽象化あなたの生活が少し楽にしますが、最終的に理解するようにする補助輪が数週間後にオフに来たとき、あなたはまだ生き残ることができるように現実の世界で、あなたの下に任意のCS50枠組みがなければこのようなものを行う。精通している人のためにこの$ _SESSION、または誰がすでに金曜日にビデオを捕まえ、SESSIONは私たちは何をすべきかを聞かせていない PHPベースのWebアプリケーション内の？これは、GETとPOSTの精神と類似であることを意味しますスーパーグローバル変数であるといくつかの他のですが、この事は便利何のためですか？に使用されるセッションとは何ですか？うん。 [学生]がログイン中申し訳ありませんが？ログイン中確かにログイン中[学生]。 PSET 7では、我々はログインし促進するために、このセッションスーパーグローバル変数を使用しているそして、何このスーパーグローバルの良いのは、それは連想配列であるということです。連想配列、リコールは、単にアレイですが、インデックスがもはや数字である必要はありません 012のような。彼らは数字を使用できますか、彼らも、文字列にすることができます。そして、あなたはまだPSET 7に飛び込んだきそうだとすれば、あなたは我々がIDと呼ばれる鍵を保管していることを思い出して値が123のようなものですこの連想配列の内側 - 何でも現在のユーザのIDでログインです。この動機は、ユーザがローカルホストを訪問した後でも、ということであるまたは私のウェブサイトは、より一般的にし、彼らがログインしました、彼らはリンクをクリックするか、5分のための私のウェブサイトに戻っていない場合でも、あるいはあっても、1時間または1日が、彼らは、ブラウザウィンドウを開いたまま、このスーパーグローバル変数を介して、私は彼らがログインしていることを覚えていること言い換えれば、それは私が欲しいユーザーに関する若干長期何かを保存することができます。そして、あなたは、ショッピングカートの化身として本当に考えることができます。アマゾンのような場所は明らかにあなたがショッピングカートに商品を入れることができ、しかし、HTTPプロトコルは、Webに電力を供給し、ステートレスであることあなたがウェブサイトを訪問するという意味で、ほとんどの部分は、いくつかのネットワークに常時接続していないブラウザとサーバの間。あなたは、HTMLやJPEGやGIF、すべてのことをダウンロードした途端、接続が消え、あなただけのサーバーからのHTMLやその他もろもろのコピーを持っている。しかし、サーバーはあなたについての何かを覚えたいなら、負担は実際にその情報を記録するサーバー上にあります。そしてあなたのサーバーを管理しているプログラマこのスーパーグローバル連想配列の内側にあなたが望むほとんど何を置くことができますそしてそれは、そこにユーザが戻ってくる次の時間になります、その分、あるいは数日後かどうか、彼らが彼らのブラウザウィンドウを閉じない限り、その時点でセッションが消えます。だから、それははかない記憶だ、それは非永続だし、それは離れて行くことを意味しているユーザがブラウザを閉じるとすぐに - だけではなく、そのタブ、頻繁にブラウザ全体、それによって効果的にユーザをログアウトする。だから、このことは、実際にどのように実装されている？のは、我々が金曜日に見て簡単な例を簡単に見てみましょう。慣れていない人にとっては、これほど単純なものでした。これは、その唯一の目的は生活の中で教えているWebページです何回私はこのページを訪問した。これは、私はそれを訪問したことを月曜日にここで初めてなので、0回言う。しかし、私はこのページを再読み込みを開始した場合、それは、1時間、2、3、4、5を語るこれは最終的にはちょうど、アップ、アップ、アップ、カウントアップについていけますたびに私は実際にそれを再読み込み]をクリックします。だからこの仕事はどうですか？私はcounter.php呼ばれるこのファイルの中に入りましょう。それの上部には、すべての青のコメントですが、面白い部分はここです。 13行目で、私たちは、この関数を呼び出すにsession_start、それは文字通りあなたがアクセスできるようにしたい場合は、あなたがする必要があるすべてであるこの特別なスーパーグローバル変数に$ _SESSIONを呼んだ。つまり、すべてが可能になり、我々はそれがすべて可能なのかすぐに説明します。 16行目では、私がやっていることに気づく。キーは、カウンターで呼ばれた場合 - つまり、インデックス値 - "カウンタ" セッションと呼ばれるこの配列の内部に存在し、私は、下の行にそれを使って何をやっている？ 18行目は何をやっている？ [聞き取れない生徒の応答]それは何ですか？ [学生]は、値を格納します。グッド。それは、新しいローカルの一時変数に現在SESSIONでの値を格納しているすべて小文字でカウンタ$。 PHPはすでにここで少し怠けていることに注意してください。我々はそのようなintやfloatまたは文字列か何かについての言及がありません注意してください PHPは弱く型付けされているので、それによってあなたは、変数の型を指定する必要はありませんこの場合には私はここにいても、まだそれを宣言していませんでした。私は、これらの中括弧の中にそれを宣言しているとCとは違って、これは実際には大丈夫です。深く変数の宣言をネストどんなにPHPで書かれていません - - 内側の中括弧などの括弧の内側それはその時点での時間で、プログラムの残りのために存在します良くも悪くも。だから、すぐに我々がここで行っているように、あなたがそれを定義するとすぐにグローバルになる。そうでなければ、私はセッションスーパーグローバルで何かがあることを見つけていない場合、私は明らかに、これを0に変数カウンタを初期化していますこれにより、ユーザは単に前にここに来たことがないと仮定しています。そして、このコースはどのようにカウンタをインクリメントしていますか？私は、この連想配列の内部の値を更新しています現在+ 1であるものは何でもカウンターと等しい値に設定することによって。私は、ページのHTMLにここに下にスクロールすると、それは実際に非常に簡単です。私はこのページの本文内で持っているすべては、 "あなたは何某回このサイトを訪問しました"です。そして、これはPHPの構築物である。あなたが<を行う場合は？=、これはどういう機能に効果的に同等ですか？それは、我々はC言語で何度も見てきたprintfのようなもの、と本当に同等だあなたはPSET 7の仕様から既に知っている可能性があるものの、プリントもちょうど何かをプリントアウトする機能であり、それは実際には、書式コードを使用していませんそして実際にもエコーを言うことができます。彼らはすべての正味の効果は、最終的に同じであっても、ほんの少し異なっている。だからのこの使用は、記号はそれを行うための洗練された方法のほんの一種であるに等しいより簡潔に比べてあなたは、そうでなければすることができるかもしれません。そうだ、すべてこのサイトではありません。これは、カウンタの値を出力します。これはすべて、実際にどのように起きているのか？あなたが週を思い出すかもしれないほど前に我々はフードの下に探し始めた Webページは、このInspectorタブを使用してどのように動作するかで。 ChromeはMac版、Windows版、さらにはLinuxのバージョンではこの両方を持っているこの組み込みデバッガを持ってそれによって、FirefoxとIEは似たようなメカニズムを持っていますブラウザの内部。のは、次を見てみましょう。我々は、ここでのタブの全体の束を持って、一番左の1は要素であることを思い出しました HTMLおよびJavaScriptは、ページ内にある方法godawfulに関係なく、 Elementsタブで、あなたが実際に階層的に表示されているHTMLをナビゲートすることができたことを思い出しといい、きれい。あなたは、GoogleやFacebookのようなサイトから学ぼうとしているのであればまたは実際に任意のウェブサイト、あなたはおそらくオフに優れていることを認識生のソースを表示するのではなく、この方法では、ソースコードを見これは、我々が特にGoogleのサイトで見てきたように、混乱することができます。私の代わりに、ここで、[ネットワーク]タブをクリックしてそうだとすれば、私はこのページを訪問したときに何が起こっているのを見てみましょう。最初に、私のキャッシュをクリアしてみましょう。私はChromeの設定に移動して、過去に行くつもりですし、すべての閲覧データを消去します。あなたは他の目的のためにこれを行うために使用される可能性があり、[笑い] それは開発のウェブサイトに来るとき、それは実際に便利です - あなたが笑っている場合、あなたは知っている。 [笑い] Webサイトを開発する際に、現実があるので、それは実際には本当に便利だキャッシュされたHTMLファイルは、キャッシュされたJavaScriptファイルのようなクッキーや物事のようなものなぜなら実際に何らかの理由で、大きな頭痛の種になることができますブラウザを使用すると、サーバ上のそのファイルへの変更をしましたまだいくつかのファイルをキャッシュすることを決定し、しかし、ブラウザは本当にファイルが変更されたことを実現していないしたがって、実際にはありません再ダウンロードそれはあなたが、[リロード]ボタンを選択した場合でも、ただ障害があなたのコードを使用していないことを確認する最も確実な方法のいずれか、それはブラウザの挙動との、あなたのブラウザーでここに行くことです全く混乱がないように、ただ全体の履歴をクリアします。あなたが本当に偏執狂的にしたい場合は、その後、ブラウザを終了し、それを再起動するその後すべてが期待どおりに機能していることを確認します。開発を行う際に非常に短いで、キャッシュをクリアしても良いです。そこでここでは、[ネットワーク]タブを持っています。私は、以前サイトを9回訪れたが、私は今では先に行くと、[再読み込み]をクリックしてみましょうしていた。そして、私は再び0にダウンだ。実際にそれがこのセッションスーパーグローバル変数が実装されていることである方法を見てみましょう。私は、なされたHTTPリクエストをクリックするつもりだそして、このデバッグウィンドウは、私はそれの内部を見ることができます。ここで私が興味深いものではありません、サーバーからの応答だけを参照してください。私は、任意の数の方法でこれを見てきました。しかし、どのような技術的に興味深いのは、ヘッダーです。私はここにスクロールダウンして、リクエストヘッダに注力し、[ソースの表示]をクリックすると、私は何を見に行くつもりだと、文字通りHTTP要求ですそれはちょうど、私のブラウザからサーバーに行きました手術の単語であるGETしてから、/ counter.phpファイル名であること、 HTTP/1.1は、ちょうど私のブラウザが使用しているHTTPのバージョンである。ここでこの行は、サーバーの名前が何であるか、ブラウザからサーバーへの少し思い出させてくれますそれに話をしようとしている。そして、この残りの部分は時々面白いけど、今は関係ありません。これは単なる好奇心の一種である。この文字列があるが不可解な、いつでもお使いのブラウザはウェブサイトを訪問それはあなたが使用しているか、ブラウザサーバーに通知され、あなたが使用しているバージョンをしているか、そのオペレーティングシステム。あなたは、CNNやその他もろもろのようなウェブサイトをどのように今まで不思議に思っていましたので、もしパーセンテージは、Web、PCユーザーでMacユーザーであるか知って、 IEユーザーは、Chromeのユーザーと同様に、それは私たちのすべてのブラウザからです我々が何であるかそこに一つ一つのウェブサイトを指示しています。それは必ずしも、個人を特定できる情報は含まれていませんそれはあなたのIPアドレスとは何か、どのようなブラウザやOS、使用しているサーバーを教えていない。この情報がどこにあるようだ。しかし、何それは、これらのセッションに来るとき、今より興味深いのは、レスポンスヘッダです。私はレスポンスに次のソースを表示]をクリックしてみましょう。ここで何が面白いのは、いくつかのことです。 1、我々は200のステータスコードが戻ってきました。それはすべてが順調であることを意味しますので、我々はこのステータスコードを参照してくださいことは決してない。それは何か他のものとは対照的に、文字通り大丈夫ということです。我々は時々悪いことがわかり数は何ですか？ [学生] 404。 404ファイルが見つかりません、403はすでににひっかかったかもしれません、禁止されている、それはあなたがchmodする可能性が最も高いものを、忘れてしまったことを意味します。と他人の束があります。ダウンここでは、これはちょっとクレイジーです。私は実際にはgeditのに貼り付けて数分前に、このファイルを書いた。実際にWebがあった前になぜこのページは1981年に期限が切れた？そこに何が起こっているのか？ [聞き取れない生徒の応答]タイムスタンプ。しかし、なぜですか？それは幾分恣意的だが、それは実際に便利です。これは何を私のブラウザに言っていることは、先ほどすでに期限切れ要求したこのPHPファイルです。実際には、それは30年前に失効した。しかし、それは実際に何を意味するのか？それだけで、ユーザーがこのページを訪れた次の時間を意味するアドレスバーにURLをリロードするか、または入力しているかどうか、あなたが行くとそれの新しいコピーを取得することを確認してください。これは、キャッシュの無効化の例のようなものです単にブラウザを落胆させるために頑張るという愚かな言葉実際にサーバから送信されたHTMLをキャッシュするからあなたが誤ってリロードを押すと、そのファイルの同じバージョンが表示されないようにします。あなたは実際にサーバが新しいコピーを送信する。だから、それは1981年だという事実はまさにそのアプライアンスが選択されているものだということを意味します過去の任意の日付など。しかし、本当のジューシーな行はこの一つです。でも、50前には、おそらくクッキーと漠然と精通している。特に、あまり快適または間にそれらの間で、今のようにあなたの理解のクッキーは今何ですか私達はあなたの理解は、より技術的なことしようとしているにもかかわらず？クッキーとは何ですか？うん。 [学生]ユーザーに関する情報、彼らがユーザー名か何かを書いたことがあるのなら好きです。グッド。それは、彼らはすでに自分のユーザー名に入力したかどうか、ユーザーに関する情報です。クッキーとは、サーバーはユーザーについての何かを思い出すことができる方法です。そして、何のクッキーは本当にですと、テキストファイルまたはバイトのいくつかのシーケンスですブラウザの内部サーバによって植えられていること、し、そのファイルへのまたはそれらのバイトの間で内部は、識別子のいくつかの種です。多分それは文字通りあなたのユーザー名ですが、より頻繁に、より不可解に見える何か bo8dal3ctなど - - これは本当に大きな英数字の文字列ここでこのような事それは本当にちょうどあなたのためのユニークな識別子であることを意味している。それともバーチャルハンドスタンプのようなものとして考えることができます。あなたが実際に支払ったことを覚えておくことは、いくつかのクラブや遊園地に行く場合とで行った、彼らはいくつかの並べ替えのあなたの手に小さな赤いステッカーを貼って、そしてそれはあなたが既に支払われてきたカウンターで人々を連想させる好きなように、あなたが行ったり来たりすることができます。クッキーとは、精神のそれと少し似ています。私はちょうど私のキャッシュをクリアした後に行ったように私は、このウェブサイトを訪問し、初めて、 Webサーバーでは、この場合のアプライアンスは、私の手に切手を貼る PHPSESSID、セッションID、名前があるその値は、この本当に長い英数字の文字列です。だから、次回は私がリロードを打つように、私の手に今飾られのようなものだまたは手動で、ブラウザでこのURLにアクセスしてください HTTPの定義により、私のブラウザはハンドスタンプを提示しようとしている何度も何度も。サーバーは、必ずしも私が誰だか知りませんので、あっても、彼らは、少なくとも私は少なくとも、より具体的に、同じユーザまたは、同じブラウザだということを知っています。それで、これはセッションスーパーグローバル変数がどのように実装されるか、最終的にある。サーバーは、2番目のためのウェブサイトまたは第三者の時間を再訪したときにいてもアイデアを持っていませんあなたは、この手のスタンプを提示しない限り。とするとすぐにその手のスタンプを提示するように、 Webサーバーは、基本的に独自の小さなデータベースに入るとチェックが、大丈夫、私はちょうどユーザーbo8dal3ctなどのハンドスタンプを見てきました。私はプログラマーが記憶されているどのような情報を見てみようこのユーザーについてのスーパーグローバルの内側、その後私は、そのデータはスーパーセッション内であることをもう一度確認しましょうプログラマは、そのデータを再利用することができるようにそれはいくつかの分または数時間前に設定されている場合でも。しばらくの間、いわれのない非難を得たので、言い換えると、クッキー、、ブラウザでの不安のために、彼らは本当に私たちのプライバシーとこのすべてに違反する可能性があります彼らは実際にあるためそれらなしで偉大なユーティリティを持っているあなたは常にあなたが訪問したすべてのFacebookのページにログインするであろうブラウザが覚えてのいくつかの方法を持っていなかった場合は、読み取りまたはすべてのGmailのメールあなたは既に認証されてきた。だからこの方法でクッキーがワイヤーを行き来送信されます。クッキーについてのもう一つの好奇心が、特にここでは、これは平文で完全であるということです。全くここで起こっている暗号化は、ありませんそして実際に私は、現時点ではHTTPを使用しています。 2年前になりましたCS50で私たちのお気に入りの瞬間の一つ、頃Firesheepと呼ばれるツールが出てきた。これは、セキュリティ研究者によって作られたソフトウェアの自由な作品だったコミュニティのためのウェイクアップコールはatrociously実装だけでどのように言うことのように Web上の特定の認証メカニズムであった。そこで、いくつかの時間のために、Facebookは、HTTP、HTTPSではなくにわたってほぼ完全だった。そして、あなたは暗号がどのように機能するか見当がつかない場合でも、Sは安全ですので、それは関与し、少なくともいくつかの暗号化があることを意味します。 Facebookは、ユーザー名とパスワードを暗号化するために使用でしたしかし、すぐにあなたが見たとして、ポークまたはあなたのメッセージやニュースフィード、そのすべてが暗号化されていました。だから、年または2前までのGmailだった。あなたはログインしていつでも、はい、彼らは安全な暗号化を使用し、しかし、その後、彼らはそうしなかった。そして、なぜそうなのでしょうか？理由だけではなく、すべての時間は、このようなユースケースで暗号化を使用しませんか？それは何？私は何かを聞いたと思う。 [学生]スピード。スピード、右か？これを回避する方法があります。しかし、あなたが何かを暗号化する場合は、ただ一種の、論理的に考えてみれば、あなたは少なくとももう少し作業をする必要があります。 PSET 2ではあなたはカエサルやVigenereあるいはクラック、実装されている場合単に文字列を出力するのは比較的簡単です。暗号化してから、最低限の文字列を出力すると、もう少し作業が必要です。 GoogleやFacebookのような超人気サイトのために、あなたは、彼らが訪問したすべての単一のWebページに対してユーザーごとに多くの作業を行う必要がある場合それはちょうどより多くのCPU時間がかかります。あなたがより多くのCPU時間を必要とするなら、あなたは、より多くのサーバーを必要とするかもしれないそれはあなたがより多くのお金を必要とするかもしれないことを意味します。と非常に多くの年のために、これは本当にベストプラクティスではありませんでした。人々は、彼らがするために必要な唯一のSSL暗号化を使用します。しかし、それが判明し、Firesheepと、この仲間としてスーパークリアは行われ時現在Facebook上で現在君たち - 好奇心から、あなたは素直に認めるだろうか見てみましょう。それが前景ていない場合でも、あなたは、現在いくつかのタブでFacebookを使っているのであれば、あなたのURLにHTTPまたはHTTPSですか？ [複数の学生] S. S？ [笑い] オーケー。任意のHTTP？わずか1？オーケー。だから、私たちのすべては今その男のFacebookのアカウントをハックすることができます。ほとんどの部分については、これは、少なくともいくつかのウェブサイトでは、デフォルトではオンになっています。あなたのWebトラフィックは暗号化されていない場合、ショートストーリーと長い、 HTMLには、暗号化されていないWiFis渡っ行き来しないだけでなく、ように、クッキーのようなものが空気を通して前後に行くのですか暗号化の任意のフォームなし。あなただけのプログラミングに精通のビットやスキルをグーグルのビットを持っているので、もしこれを行うフリーソフトを見つけるために、あなたがしなければならないすべては、スターバックスに座っているまたは一般的に無線LANが暗号化されていないの空港で座ってまたはPHPSESSID：とだけのSet-Cookieなどのキーワードを監視あなたが技術に精通している場合だけで無線LANを監視するためこのパターンの空気全体に流れているすべてのビットのために、あなたは、次に男のPHPSESSIDがbo8dalなどであることを起こると言うことができます。そして、再びあなたは、十分に技術的に精通しているか、適切なツールを持っている場合あなたは、ちょうど再構成し、独自のブラウザがその手のスタンプを提示することを開始することができます Facebook.com、Facebookにちょうどあなたがその人であると仮定しようとしている彼らが知っているすべてはあなたが誰であるかではありませんが、このユニークな識別子を持っていること。のであなたがそのユニークな識別子を盗み、自分のようにWebサーバに提示しそうだとすれば、彼らはただあなたにその人のニュースフィードを表示しようとしているまたはその人のメッセージやポーク。そして、私はおそらくFacebookのHTTPSを有効にする方法を現在はGoogleだろう。しかし、それは本当にそのように簡単です。そしてそうFacebookとGoogleなどが、これで本当に良い得ているしかし、HTTPを使用していないあなたが訪問するあらゆるウェブサイトのためのすべてのより多くのアウト目を離さないそして、それらの上の機密情報のいくつかの種類があるそれは金融や個人だか好きかどうか。彼らがこれを使用していない場合は、かなり可能性がこのようなクッキーは非常に簡単に盗まれる可能性がありますその後偽造、それは正確にFiresheepがやったことだ。あなたがプログラマである必要はありませんでした。あなたがしなければならなかったすべては、この無料のツールをダウンロードし、インターネットに接続されていましたあなたはログインしたあとに、それはあなたのFacebookの名前が表示されるでしょう、何がどうなることですあなたの周りに、この特定のデモでは、サンダースのみんなのそしてあなたがしなければならなかったすべては、自分の名前をクリックすると、ソフトウェアは、プロセスを自動化した自分としてFacebookにそれを提示、そのCookieを盗聴、そして、ほら、あなたがログインしているだから、これはそれらの公式には "これをしない"の別の1つです。あなた自身のホームネットワークを持っていて、手を加えたい場合は、すべての手段によって、しかし、これは大学の環境上のラインを越えるん実現。しかし、ここでの目標は、これを実行しないことをどのように強調するために実際にあるしかし、物事のこれらの種類を防御する方法について説明します。それ自体には欠陥があるにもかかわらず、ここと自明な解、本当に常にHTTPSを使用していないサイトの使用を減らすことである。だからFacebookとGoogleのようなサイトはますますチェックボックスを持っているどこで、この種のことにで選ぶことができます銀行が同様の理由で年間これを持っていた。だから不安要因我々ができる場合のほんの少し。しかし、それは一言で言えばそれだ。この機能では、サーバーはあなたが誰であるか覚えているかということです。とすぐに、彼らはあなたが誰であるかを思い出すことができるように、彼らはあなたについての何かを覚えることができるプログラマは、$ _SESSIONスーパーグローバル変数と呼ばれるこの特別の内部に格納されていること。とPSET 7のために我々は、単にint型を覚えておくことが自明にそれを使用しているつまりログインしているユーザの一意のIDは、ので、我々は知っている彼らは前にそこにしてきた。その後、セッションやクッキーなどに何か質問はありますか？ Firesheepは、もはやとしてうまく機能しませんそしてあなたは特別な無差別モードにコンピュータを配置する必要がありますので、実際に自分自身以外のトラフィックをリッスンしています。あなたが現在Firesheepをダウンロードしているそうだとすれば、それは非常に簡単ではありません実現それは、かつて実証することであったとして。かしこまりました。とサンダースでそれを行うことはありません。自宅でそれを行う。データベース。我々は非常に意図的にpsetの7でやったことの一つ我々は、いくつかのユーザーIDを持っているユーザーのためにあなたにサンプル·データベース·テーブルを与えるたその中にいくつかのユーザー名、およびいくつかの暗号化パスワード。実行済みでない場合、あなたがわかるように、あなたがテーブルを少し変更する必要があるとしている。あなたは、そのテーブル内の各ユーザーにいくつかのキャッシュを追加する必要があるとしているそしてあなたは、ポートフォリオのテーブルを別の履歴テーブルを追加する必要があるとしている、または多分それは何か他のものと呼ぶ。しかし、これを行う方法を考えるという点で、このツールを開いてみましょう我々は金曜日に使用されますが、慣れていない場合、アプライアンスは、ツールに付属している偶然PHPで書かれていると呼ばれるphpMyAdminは、しかし、生活の中で、その目的は、私は真紅とjharvardとしてここにログインした後、私に私のデータベースを表示したり、変更するユーザーフレンドリーな方法を提供することです。私は、アプライアンス上で実行しているというデータベースはMySQLと呼ばれています。、これは非常に人気があり、それを使うのは驚くほど簡単です、無料のオープンソース·データベースの特にこのようなフロントエンドである。このツールは私が行うことができますどのような、例えば、テーブルの周り突くです。私が先に行くとこれをやってみましょう。金曜日に、我々は超簡単だった学生と呼ばれるテーブルを作成しました。 ID、名前、電子メール - - それは3つの列を持っていたと私は手動で行のカップルを挿入この特定の例のようにダビデとマイク。のは、このビットをさらに見てみましょう、我々は多くを覚えておきたいことを想定してみましょうユーザについてだけ、名前と電子メールより。上部にここにアップ構造私をクリックしてみましょう。そして再び、psetには、ここで必要な手順を、順を追って説明これのいくつかは少し速いがないような場合は心配しないでください。それから私は、ここでクリックするつもりです。私は電子メールの後に列をいくつか追加するつもりだ私は家のようなものを追加したいので。私は学生の家を記録するのを忘れていました。私は、[Go]をクリックします、そして、今、私たちは残念ながら左から右へ少し広いです、このフォームを、持ってみましょうしかし私は、このフィールドの家の名前を呼ぶつもりですと入力し、私はここで選択する必要があります。それでは、MySQLで様々な種類についての簡単なチャットをお聞かせなぜなら、PHPは弱く型付け、それは一種の高速と型を持つ緩い果たしているのに対し、データベースでは特にそれが実際にあなたの利点に型指定を使用する超重要だ物事MySQLと他のデータベースエンジンの1つがあなたのために行うことができるので、あなたのデータベースに不正なデータを入れていないことを確認しています。これは、使用可能なチェックエラーフリーのようなものです。家のために、我々は、明らかにそれはMySQLの32ビット値であるint、なりたくない。我々は、char型の変数の長さを表しvarchar型、約金曜に簡潔に話した。これは何ですか？これは、あなたが、これはある種の文字列にしたいことを指定することができます。あなたは本当に、それがどれくらい長いか事前にわかっていない従って私達は任意に、家の名は255文字以下に設定できますと言うでしょうしかし、あなたは32、64で行くことができる - 任意の数を本当に。しかし、charと呼ばれるフィールドの上にvarchar型を使用することの利点は何ですか？私はここだけで直感的にスクロールダウンする場合は、CHARありとvarcharがあり気付く。 varchar型はchar可変長であり、charは固定長のCHARです。だから、唯一のその定義に基づいて、これらのそれぞれの利点や欠点は何ですか？言い換えれば、誰が区別気遣うか、なぜあなたは気にする必要があります？うん。 [学生] VARCHARは、より多くの柔軟性を持っていますが、より多くのメモリを占有します。グッド。 VARCHARはもっと占有 - 見てみましょう。私はその権利を聞いたかどうかはよく知りません。あなたはもう一度それを言うことはできますか？ [学生]私はvarchar型は、おそらくより多くの柔軟性を持っていますが、それはより多くのメモリを占有すると述べた。興味深い。オーケー。 VARCHARは、おそらくより多くの柔軟性を提供しますが、より多くのメモリを占有します。後者は必ずしも真ではありません。それは文脈に依存しますが、のはそれに戻ってくることができます。 [聞き取れない生徒の応答]その通りです。これは、実際にはcharが一般的に多くのメモリを使用する場合だ charは、C言語のように、文字列のようなものですので、それは文字の配列です。ですから、長さが255のCHARフィールドを言えば、データベースには、文字通りあなたに255文字を与えるために起こっている。家はMatherと6文字が合計されて終了した場合、あなたは200を超える文字を無駄にしています。必要であるように効果的にvarchar型だけ多くの文字を使用するようにまで最大量まで。しかし、あなたが支払う価格は、潜在的に、実際のパフォーマンスです。 - あなたのすべての文字列が8文字になるだろうしていることが事前にわかっている場合例えば、あなたは長さ8のパスワードを必要とすると仮定する - 的ではありませんが、多くの場合、機会にchar型のフィールドを使用する利点パスワードのような何かのために固定長を指定することです今ので、データベースも賢くすることができます。それはすべてのCHARフィールドは、列内のすべての文字列が同じ長さであることを知っている場合、あなたは、ランダム·アクセスの機能を取り戻す。あなたは、データベーステーブルにさまざまなcharフィールドの間を飛び回ることができますなぜなら、行と列としてデータベースのだと思います。ので、文字列の一つ一つの長さが同一の場合、あなたが最初のものが0バイトであることを知って、次の1バイトは8ですその後16とし、24など。すべての文字列が同じ長さであれば、あなたは、はるかに効率的に飛び回ることができます。だからそれは、パフォーマンスの面で利益になることができますしかし通常は、事前に知ることの贅沢を持っていないそうvarcharには、移動する方法です。ここにも、Facebookが結局に走ったことを別の詳細です。は、intは偉大であり、我々は、ソートのデフォルトでは、我々は数が欲しいときにいつでもそれらを使用それは32ビットのみです。 Facebookはかなり現在4億人を持っていないにもかかわらず、複数のアカウントを持つそこに何人かの人々は間違いなくそこだ開いて閉じられているか、アカウント、ので、Facebook自身は、私は数年前にintから移行しなければならなかったと信じてにだけではなく、64ビットで適切に呼ばれるように、BIGINT、。だから、これはあまりにも設計上の決定です。あなたの最終的なプロジェクトが始動判明した場合には、驚くほどラッキーだろう与えるか、または取る、4億円、1人のユーザーを持ち、その場合にはintを使用して、少し近視眼的であるかもしれません。しかし、現実には、あなたのユーザテーブルは、intとおそらく大丈夫です。しかし、psetの7のような何かのために、あなたの履歴テーブルのように、あなたはetrade.comに進化した場合は、何千、何百万ものユーザーを持っているかもしれません。だから一方であなたは、40億以上のユーザーを持っていない可能性がありあなたが持っているそれらのユーザーは時間をかけて40億以上のトランザクションを持っているかもしれない - 購入し、販売しており、彼らの歴史の中で物事。あなたが予想するようなら - もう一度、これらはあなたがこの大量のデータを持っている場合があるのは良い問題です - あなたは、intのサイズを超えるデータを予測しなければ、 bigintのような何かと一緒に行くことは頻繁に十分な設計者によって採用されていない方向で問題であることを行っていないため、人々の姿、それはそれよりも大きいものを選択するには、この簡単だ。我々は一定の精度を指定しPSET 7で使用している進ので、単精度や倍精度の浮動小数点数と実数などを含む問題を回避することができます。そして、いくつかの他のフィールドがここにあります。我々は、いくつかの範囲にそれらに手を振ってます。しかし、日付、時間、すべてのMySQLで所定のフォーマットを持っていと日付ではなくVARCHARと格納日付の利点データベースは、実際に、様々なフォーマットにそれらを再フォーマットすることができることを意味し米国形式やヨーロッパ形式等はどうか - しかし、あなたはそれをしたい - はるかに効率的にそれだけでいくつかの一般的なデータ型はvarcharである場合よりも。そして、いくつかの他のBINARY、VARBINARY、BLOBはそこだ。これらは、バイナリ·ラージ·オブジェクトであり、あなたはまた、バイナリデータを格納することができます同様に、データベース内の幾何学的なデータとして。しかし、私たちのために、我々は一般的にint型とVARCHARのなど気にします。家でこの例を完了してみましょう。ハウス私は勝手に255文字になると言うつもりです。デフォルト値は、我々はこれを行うことができます。我々は、デフォルトでは、例えば、マザーハウスで皆を置くことができます。それは我々がそのデータベースを指定することができる方法です誰かが常に値を持っていることを確認する必要があります。しかし、私はそれがあるままにしておきます。実際には、家の中にキャンパスを離れて住んでいるとしない人々のために、多分私は実際に、家のためのデフォルト値がNULLであることを指定したいそして私は、このチェックボックスをオンにし、ユーザーの家がNULLである場合、それは大丈夫だ、データベースを指示する必要があります。繰り返しますが、これはあなたの場所に置くことができる別の防御機構であるので、あなたも、必ずしもあなたのPHPのコードでそれを配置する必要はありません。データベースは、物事があるか、またはNULLでないことを保証します。そして、最後に、属性。これらのどれもあまり関係ありません。バイナリは、署名されていない - それらのどれもvarchar型に関係ありません。インデックス。誰もが知っているか、またはインデックスが何かについて推測を覚えているか、持っていますか家のような何かのために？これも実際に重要であり、比較的容易に設計上の決定です。まだそれを見ていない人のために、金曜日に、私たちは、主キーについて簡単に話をしました。データベーステーブルに、主キーは、フィールドまたは列ですそれは、表の行を一意に識別します。だから我々はIDを持っている現在のテーブルでは、我々は名前と電子メールを持っている。それらのどれが、主キーに最適な候補である行を一意に識別するため、その役割は？おそらくIDを指定します。間違いなく、我々はまた、何でも使用できますか？理論的にはそれはユニークなので、たぶん、あなたは電子メールを使用することができます人々は、電子メールアカウントを共有している場合を除きます。しかし、現実には、1234のような数字のIDを使用している場合ということですメールアドレスはこのバイト数またはこのバイト数かもしれない一方で、それは、32ビットのみです。だから、一意の識別子のための効率の観点から、それだけでint型を使用することをお勧めする傾向があるあなたは間違いなく使用することができることをいくつかの文字列候補を持っている場合でも。家のようなものは、これは主キーであってはならないその後、唯一1人がメイザーに住んでいて、製革などで1人。可能性があるため、同様に、これは一意でなければいけません。プライマリとユニークの違いは、私たちの現在のテーブルの場合とで IDが主であろうが、電子メールは、我々は先に述べた理由により、プライマリではありません - パフォーマンス - しかし、それはまだ一意でなければなりません。だからあなたはまだ主張をせずに一意性を強制することができますそれは超重要な主なフィールドだという。しかし、この1つは非常に便利です：インデックス。あなたは、PSET 7用、または一般的に、あなたの最終的なプロジェクトのために、事前に知っていればこのフィールドの家はあなたがたくさんで検索するものであることを行っている selectキーワードまたは何か他のものを使用して、その後は先手を打って、その魔法を動作するようにデータベースを伝えることができますそれは必要なメモリ内の任意の空想のデータ構造を作成していることを確認してください家に基づいて検索を迅速化する。たぶんそれは、ハッシュテーブルを使用しますが、多分それはリンクされたリストを使用します。現実には、それは木を使用する傾向があり、しばしば構造は、B-treeと呼ばれる - しないバイナリツリーが、Bツリー - 非常に広い木であるあなたは、CS124のようなクラス、データ構造クラスに表示される可能性がある。しかし、短期的には、スマートデータベースソフトウェアを使用しているときに心配する必要はありません。 "私はより効率的にそれを検索できるようにインデックスは、このフィールドを"あなたはただ、それを伝えることができますあなたがこれをオフのままにして、マザーに住んでいる、データベース内のすべての人を検索しようとする場合、それは線形探索に委譲されます。そして、あなたは、いくつかの家の中で6000学部生すべての生活を持っている場合あなたは、Matheritesを見つけるためにテーブル全体を検索するつもりだ [インデックス言うなら、うまくいけばそれは対数検索に近いものになり、一方学生のこれらの種類を見つけることができます。これは、オンにするだけで無料の機能ですそれは空間の一部の金額の価格で来ていなくても。最後に、自動インクリメント、このAIフィールド、それはちょうどそれがintの場合を意味し、あなた自身でそれをインクリメントするために気を使いたくなかった新規ユーザーがあるたびに、それを確認し、そして挿入され、各ユーザーは、自動的に新しいIDを取得します。 Let 'sは、[保存]をクリックし、今度はこの設計の欠点を見つけることができます。私は、Browse、マイクと私の家の両方がNULLであることを通知に行けば。私はこれを手動で編集するためにphpMyAdminを使用することができます。私は、Enterを押して次にここに行くとマザーの型とすることができます、今からテーブルに気づくとは異なります。しかし、私は同様に他の何かを行うことがわかります。 DavidさんのIDは1ですので、phpMyAdminは再び単なる管理ツールです。これは、ユーザーが今まで見に行くされてものではありません。私の代わりにトップアップ[SQL]タブをクリックしそうだとすれば - そして再び、PSET 7は、これらのクエリの多くを紹介します - 私は手動でSQL構造化クエリ言語のコマンドを実行することができます WHERE ID = 1家= 'Pfoho' SETユーザーを更新。これらのSQLクエリは、素敵なことに、左から右にかなり読みやすいです。 usersテーブルを更新し、Pfohoに家と呼ばれるフィールドを設定するユーザーのIDは1です。または私も先の電子メール= 'malan@harvard.edu'行うことができます。だから長い一意私を識別するように、それは同様に動作します。しかし、IDは、より高いパフォーマンスになりがちなので、そんなことしてみましょう。 [Go]をクリックしてみましょう。さて、lecture.usersは存在しません。私のエラーは何ですか？実際にここに呼ばれるテーブルは何ですか？それは我々が左上にここまでやったことだからといってそれは学生と呼ばれています。それは学生ではなく、ユーザーと呼ばれています。だから今、Goをクリックします。 1行が影響を受ける。クエリーは0.01秒かかった。私はPfohoに今、今マラン生活を参照]をクリックした場合。だからそれはSQLの別の味だが、psetにはそのもう少し見ていきます。私はすでにここに作った愚かな決定があります。私は、このデータベース設計が非効率的であると主張するだろうなぜなら、私が学生のテーブルに追加する、より多くの人々、私達のより多くの私は、私は追加を開始TFのより多くの追加を開始我々は、この表に冗長かを見るために開始するつもりだ？うん。それは学生のだということを見て、我々は同じを使用している[学生] [聞こえない] 同じ - そう、まさに。 400人メイザーに住んでいるのであれば、与えるか、または取る、最終的には、この表では、 ""マザー "、"メイザーを言う400行を持っているとしている "マザー" "マザー" "マザー"。我々は、これらのすべてのバイトを無駄にしていると、持ち帰りのカップルはそこだ。 1、誰かがたくさんのお金を支払えばクレイジーコーナーケースはありと改名メイザー、我々は今我々のデータベース全体のテーブルを変更する必要があります。 Pfohoがかつて15年前に北家と呼ばれていたにもかかわらず、しばしば起こることはないだろうつまり、ので、それが起こる。しかし、それがすべてではその説得力はありません。バルク·データを更新する必要があるのようなコーナーケースより魅力的なあなたが何度も何度も何度も何度もマザーを格納しているデータベース理由のためですか？つまり、文字、6文字の多くのです。特にPforzheimerため、それよりもさらに良い我々を行うことはできませんか？確かに私たちは多くの文字よりよくすることができます。理由だけではなく、それぞれの家で、固有の識別子を関連付けないでと、ユーザーごとにその店？それでは、これを試してみましょう。ちょうど学生のテーブルを使用するのではなく、私は左上にここまで私の講演データベースまで行くことができます。ここで注意してくださいそれはテーブルを作成しますと言います。私は家と呼ばれる新しいテーブルを作成してみましょう。列の数が2であることを行っている。入力します。今、私は2つのフィールドを持っています。私はこの名前を呼ぶつもりです、そして、それは長さが255のvarchar型になるだろう、それはかなり恣意的だ。私は慣例によりここにこれを入れてみましょう。だからここにIDを入れます。家ごとに一意の識別子を指定してみましょう。すべての家に名前をつけましょう。の識別子は、正数のみを使用するだけで慣例により、符号なしとなることを指定しましょう。先に進み、今のところ、この自動インクリメントフィールドを挙げてみましょう。そして、我々は何が必要なのでしょうか？先に進み、[保存]をクリックしてみましょう。今、私は2番目のテーブルを持っています。余談ですが、これは少し不可解なSQLコマンドであることに気づくあなたは、phpMyAdminのような管理ツールを使用していない場合は、手動で入力しなければならなかったであろう。我々はそれを使用するもう一つの理由は、そう。あなたの周りをクリックすることができますので、それは素晴らしく教育的に有用なものだそして物事がコピーとphpMyAdminが何をしたか貼り付けて、作業方法を見つけ出す。しかし、CREATE TABLEコマンドは直前に実行されたものであり、ここに私のテーブルです。私は今、先に行くと、[挿入]タブをクリックすることで、単純化し過ぎるのではなく、生のSQLを使用してみましょう。私は、家にINSERTやってみましょうと私は家の名前は 'マザー'の値を持っているとしていると言うつもりです。それはそれだ。この構文はもう少し謎めいています。これは、我々は挿入したいフィールドの名前です。これらは、我々は、これらのフィールドに挿入する値です。私は、[Go]をクリックしてみましょう。挿入された1行が0.02秒かかった。私は今、[Browse]をクリックしてみましょう。私は、[Browse]をクリックした場合に注意し、そのIDを自動化することによって数字の1でメイザーは、あります。私は別のものをやってみましょう。私は、[SQL]タブに移動してみましょう。住宅INSERT INTO。家の名前などPfohoの値を持つことになるとされています。行く。と私は何度も何度も何度もこれをやっておくことができます。あなたはphpMyAdminを使用して飽きた場合、または、あなただけの[挿入]タブを使用することができますと生のSQLを入力する必要はありません。あなたはただ、入力、製革、例えば、次のように入力して、より迅速にそれを強打することができます我々は[参照]をクリックした場合、現在は、3のIDを使用してキュリアあり。だから、これは、我々は、自動インクリメントは何を意味です。しかし、今、私たちは生徒たちに何かを修正する必要があります。学生の家のフィールドのデータ型は、今何をすべきですか？それはint型、右すべきですか？だからここでの目標は、正規として知られているそうでなければ、テーブルを睨むものですように、私たちは私のテーブルのいずれかに重複した情報を格納しないでください。そして再び、我々はここにあったパスは、マザー、マザーを言おうとしているメイザー、非常に冗長ですメイザー、Pfoho、Pfoho、Pfoho、Pfoho、 charsの無駄に関して。だから、私が先に行くと構造をクリックして、これを変更してみましょうそして、私が先に行くと家のフィールドを使用してチェックし、[変更]をクリックしてみましょうそして今、私はintであるためにこれを変更するつもりです。 255は関連はなくなりました。私が先に行くと、それはまだNULLの場合、罰金だと言うことができます。保存します。今すぐテーブルの学生は正常に変更されている、と再び気づく家はintです。それはint型になると余談ですが、カッコ内の数字は無視してください。これは、レガシーの理由からです。戻るあなたはGUIを持っていなかった日には、代わりに、コマンドライン環境を持っていたあなたが表示されるはずです10と11は、それぞれ指定された文字数端末ウィンドウで実際にフィールドを表示します。これは、実際のフィールドのビット長とは何の関係もないので、我々はちょうど今のことを無視します。今私はこのテーブルに行かなければならない。ダビデはメイザーに住んでいるならば、その家は、0であってはならないこれは、NULLに最も近いデフォルトのint値です。彼は家1に生きなければならない。任意Pfohoでマイクの生活なので、家の番号2としましょう。今、私のテーブルにはもう少し不可解に見える。しかし、効率を考慮してください。私は今、家を識別するために32ビットだけを使用していますこれは、私の家MatherとPfohoのわずか1正規定義があることを意味それは家のテーブルにあります。私は今、これらのテーブルに再び参加したいのであれば、それはこのように考える。ここで私は生徒たちのテーブルがあり、右側には、これらの番号は、1と2があります。 1メイザー、2はPfohoです。私たちは、家と呼ばれるこの他のテーブルにある同じ番号を持っているそれらの3軒の家のために1と2と3。私たちが今やりたいことは、コード、PHPとSQLの能力を持っているこれらは学生であり、これらは家であれば、これらの表は、再参加のソートする私たちは、何とかして1となるように1行まで、それらを結合したい 2 2とラインアップし、私たちはどこにデビッドを把握することができますどこでマイクと場所誰もが住んでいます。これを行うには、我々は次のようなSQLクエリを実行することができます。学生のSELECT * FROM ON住宅を登録しよう - そして今、我々に参加するどのような分野をしたいですか？だからstudents.house = houses.id。ちょっと不可解ですが、この部分は、文字通り新しいテンポラリ·テーブルを作成することを意味それは、学生や家屋を結合した結果だ。そして、どのようにあなたはここに私の指の先端を結合したいのですか？ IDフィールドの生徒の家に等しい家のフィールド 'を設定します。そして、私は今、[Go]をクリックした場合、私は私が望んだものを正確に取り戻す。ダビデはメイザーにあり、マイクはPfohoである、と私はまた、ユニークな識別子を参照してください。しかしポイントは、私は完全なテーブルを持っているようになりました。 PSET 7用または本当に最終的なプロジェクトのために、こことそう持ち帰り：あなたは、重複した情報のどの部分を保存していることが判明した場合それは家であろうと、多分それは、都市、州、およびZIPだ ZIPは通常、常にではないが、ユニークな識別子として使用することができる場所、 phpMyAdminのようなもので、精神的に、その後の運動を経るんその共通のデータのうちファクタリングのあなたのウェブサイトは、よりよく使われるようなので、特に多くの人気、これは、あなたはすべてが超高速であることを確認する方法です。できるだけユニークさなど、多くのヒントとしてデータベースを与えることによって。それがたくさんあった。何か質問？かしこまりました。のが5分間の休憩を取ると、再編成しよう。かしこまりました。以下は、私がCS161を取ったときに、何年か前に使用した例です。大学でオペレーティング·システム·クラスはどれですか驚くべきであることで知られますが、仕事のクレイジーな量されている、そしてそれは、オペレーティング·システムで発生する低レベルの問題のいくつかに焦点を当てて本当にとさえもデータベースの世界インチその年の私の教授、マーゴ·セルツァー、と言われた話は次のとおりであった。あなたとあなたのルームメイトのために少しの寮の冷蔵庫を持っていると仮定そしてミルクのような本当にあなたの両方。したがって、クラス1日から家に帰ってくる、あなたのルームメイトは、まだありませんあなたは冷蔵庫を開け、あなたは気付く、 "いまいましいああ、私たちは牛乳から出ている。" ですから、冷蔵庫を閉めるには、CVSに通りを歩いて渡るとCVSでいくつかの牛乳を買うためにますます長い列に並んでもらう。一方、あなたのルームメイトは、彼または彼女のクラスから戻ってくると、部屋に入って、実際にいくつかのミルクを欲しがっ冷蔵庫が開き、冷蔵庫を開いて、 "くそー、ノーミルク。" だから、彼または彼女は、冷蔵庫を閉じたドアを出て行くと、ABPに行くあなたがお互いにぶつかるつもりはない、CVS以外の場所または牛乳を買いに行くために。もちろん数分後、あなたの両方が戻って家に帰るそして今、あなたは、あなたが実際に望んで2倍のミルクを持っています。あなたは牛乳が好きなので、牛乳であること、今ではそれは悪い行くつもりだしかし、あなたは牛乳好きじゃないので、今、あなたはあまりにも多くのミルクを持っているので、それはすっぱくなるだろう。これはひどい、ひどい状況です。あなたが最初のルームメイトの家だった場合、何がこの苦境を解決しているだろうか？はい。 [学生]あなたがメモを残しておく必要があります。 [笑い] グッド。あなたがメモを残しておく必要があります。あなたは "ミルク用に去りぬ"、と言うようなポストイットノートや入れているはずその後あなたのルームメイトは、概念的には実際にそれをやってからロックアウトされていただろう。それとも、1歩先に行くことができます。あなたは文字通り、南京錠のいくつかの種類で冷蔵庫をロックする可能性そして今あなたのルームメイトは文字通り冷蔵庫からロックアウトされます。我々は、プログラミングに戻って一般化する場合は、あなたはほとんど、種の変数または構造体として冷蔵庫から考えることができます情報のコンテナのいくつかの種類。根本的にここでの問題は、あなたの両方を検査することを許されたということですまたは、このデータ構造の状態を読み取るしかし、あなたは別の回でそれを見て、まだ両方のあなたの決断を下した時間内にこれらの異なる瞬間に世界の状態に基づいて。ですから、冷蔵庫をロックしていた、あなたは少なくともあなたのルームメイトを避けられただろう世界の状態を検査することができましたから、ので、彼または彼女は、同じ決断を下していることができなかった。だからデータベースは、結局のところ、常にこの問題を抱えている。私たちはシナリオを構築できるかどうか見てみましょう。あなたが悪者のようなものだと仮定し、バンク·オブ·アメリカへ行く側でカップルのATM側を持った矩形内の他の場所のうちの一つであるか、そして、どうにかして、ATMカードを複製する方法を考え出した - すべてのそんなに難しいことではありません。それはちょうど磁気帯です。それで、あなたがやろうとしたいのか、このゲームをプレイしているそれによってあなたは、他のマシンに、1機に別のカードを1枚のカードを入れてそしてあなたは本質的に、同時にお金を引き出すに試してみたい想像するので、その話は次のようになります。左のマシンは、あなたのカードと暗証番号を取るそして、あなたは "私に100ドルを付けます"と言う。 ATMは、最初にそのデータベースまたはそれに相当する上のselectを実行するようプログラムされて - それが使っているものは何でもデータベース - 表示するには、このユーザは、自分の口座に少なくとも100ドルを持っているのですか？もしそうなら、100ドルを吐き出すとそのバランスから100ドルを差し引きます。しかし、もちろん、ここに複数のマシンがある場合、検査などの複数の方法その世界の状況、銀行の金庫室は、あなたが持っているどのくらいのお金を見て、左のマシン、右はただ偶然にそれを仮定する両方は時間的にほぼ同じ瞬間にその質問をする。そして、これは確かに起こることができます。 ATMは、これらの日のコンピュータです。左のマシンが言うのであれば、 "はい、あなたは、少なくとも100ドルを持っている" 一方、右側のマシンは、 "はい、あなたは、少なくとも$ 100を持っている"と言う。その後、それらの両方が自分のプログラムを終了し、実際に100ドルを吐き出すに進みますと "以前は、200ドルを持っていた"と言う。 "私は今、アカウントに残って100ドルであるために、変数を更新してみましょう。" しかし、それらの両方は、あなたの口座の残高をチェックし、それが200ドルだということを発見した場合両者はその後、数学をやると言う200 - 100、マシンは、潜在的には、各マシンに2つの100ドル札を吐き出すたしかし、彼らは唯一の100ドルであることがあなたの合計口座の残高を更新しました。言い換えれば、あなたは200ドルを取り出してきましたが、彼らは世界の状態を検査しているため同時にして、その値に基づいて決定を下し、彼らは最終的に正しく計算を行うことではないかもしれません。だから、銀行のような状況でもあなたは本当にロックのいくつかの種類を持ってしたいので、できるだけ早くあなたには、いくつかの変数の状態をチェックしてきたようにアカウント残高のように、本当に重要なことだが、、あなたがあなたのことをやって終了するまで、他の誰かがそれに基づいて意思決定を行うことはできませんこのケースでは、左側にATMの場所です。皆をロックアウトします。あなたは実際にいくつかの異なる方法でこの効果を達成することができます。 MySQLでの最も簡単な方法は、我々はあなたを与えたSQLの行ですまさにこのように見える問題セット仕様インチそれが呼ばれるものは何でも - - ID、シンボル、および共有、株式数、テーブルに挿入例えば、以下の値。あなたはまだ仕様を読んでいない場合、これはどのように行くのですかに関する例です社長Skroob、このペニー株の10株を買って、ユーザーIDが7番であることを起こる？これは、テーブル、次の番号、記号、株式数にINSERT言う 7、 'DVN.V'、および10。しかし - しかし、しかし、しかし - 二行目は重要なものです。 DUPLICATE KEY UPDATE株式に関する株式= +値（株）。だから、完全に一目見ただけで不可解な見通し。それが2行に折り返されていても、このSQLクエリーことが、実際、 1長いクエリですが、それがアトミックであることを意味しますこのクエリは、まったくすべて一緒かに関係なく実行されるという意味で。とMySQLの定義によると、それは彼らがこのクエリを実装する方法は以下の通りです。それがすべてでは一度かに関係なくすべてを実行するために保証されたマニュアルで定義することです。この動機は以下の通りです。このケースでは、株式の10株を購入しようとしている場合は、それは牛乳と同じ話のようなものだ、それはATMと同じ話のようなものだ。あなたは、この構文を使用していないのを間違えた場合その代わりに、このペニー株式の株式数は何株を参照するには、データベースから選択する社長Skroobは、持っている、と彼は10株が含まれているとしないその後いくつかの一瞬後には、UPDATE文を実行し、これは、先に行くと、10以上の株式を追加すると言うSQLで別の文ですそう理想的に合計が20であることを彼の現在〜10、問題は、今日のデータベースシステムで、今日のコンピュータの理由からですあなたは、複数のプロセッサ、複数のコアを持っている - つまり、コンピュータは文字通り、一度に複数のことをやってすることができます - あなたの選択して、このケースでは、UPDATE、その保証はありません背中合わせに起きようとしている。そんなに悪いシナリオでは、SELECTを実行するだろう Skroobがどのように多くのこのペニー株式持っていません見て、し、ただ偶然、別のデータベース·クエリが実行されます - 多分別のブラウザウィンドウでそのSkroobは10株を購入しようとし別のウィンドウに完全に、多くのATMのような - と別のクエリがSELECT、UPDATEの間に取得することを仮定します。それはSkroob現在株式のいくつかの番号を失うことをそうであるかもしれません別のプロセスが彼の世界の状態を検査していますので、または彼は彼が持っている必要以上の株式を取得します。我々は、それらの特定のストーリーラインは次のようになります正確に何の子細に入ることはありませんあなたは、変数の値を確認してから決断をしなければならない場合、ポイントはあるそれらの2つの文の間に何かをやって、他の誰かの危険性があったのなら、としては、マルチコア·システムでは、マルチプロセッサシステムで発生する可能性があります一度に複数のことを実行する能力を持つコンピュータは、悪いことが起こることができますのような銀行口座は、二回ほどミルクを買って、間違って引き落とされている株式またはこの場合の番号が間違っていた。しかし、このことを考えて、もっと簡単な方法があります。それは、あなたのテーブルを正しく設定している場合、SQLもサポートしていることが判明私が主張したいの取引と呼ばれるものは、理解することは実際にも簡単ですこれよりも、それは1ライナーではないので、実際にはもっと複雑だ。のSTART TRANSACTIONと呼ばれるSQLステートメントでは、文字通りあります。そこに、SELECT、INSERT、UPDATE、DELETE、および結合がだと他人の束と同じようにすると、のSTART TRANSACTIONなどのキーワードがあります。そして、あなたはその後のpset 7のコンテキストで何をすべきか - あなたは、pset 7のためにこれを行う必要はありません、それは必要ではないように明示的に否認だが、しかし、最終的なプロジェクトでは、それは便利です - あなたは、START TRANSACTION、その後、別のクエリのクエリを呼び出す場合その後、別のクエリし、別の、もう一つの、別の、は、SQLステートメントは、COMMITを呼び出すまで、それらのクエリは実際には実行されませんその時点で、それは2文か20文なのか、それらはすべて、一度に実行されますそれは誰もが偶然すぎて牛乳やデビットあまりお金を買うことができないことを意味あなたのクエリのすべてが実行されるので、またはあまりにも多くの株式を購入する背中合わせに背中合わせにします。そして、これはあなたがこのような何かをやっている場合は特に、超重要です。これはletの銀行口座を更新すると言う任意の例です。口座番号が2である場合$ 1000 - バランスに等しいバランスを設定することによって。そして、2番目の文では、今度はその千ドルを堆積させているその口座番号は1です誰かの銀行口座に。言い換えれば、これはあなたが確認したい場所の完璧な例ですこれらのステートメントの両方が全く起こらないかというそうでなければ顧客がねじ込まために行っているので、あなたは、彼らのお金を取ることにして他の場所に堆積しないつもりだや銀行はあなたがお金を入金するつもりだどこにねじ込むために起こっているしかし、実際にユーザのアカウントからそれを減算しない。それで、あなたはそれらの両方が一緒に実行したい。したがって、世界の取引を締結している。だからそれは、あなたの心の奥に留めておくべきものだただ最終的なプロジェクトの目的のためにそんなにしない、しかし、あなたはどこかにあなたの最終的なプロジェクトを利用したい場合は、あなたは、その周りにいくつかの会社を立ち上げたい場合あなたは、キャンパス内にいくつかの学生グループの問題を解決したい場合そして実際に生きている、アクティブなウェブサイトを持っている、これらが発生する可能性が微妙なバグの夫婦ですあなたは非常に2人いる場合何が起こるかをよく考えていない場合時間内に文字通り同じ瞬間にあなたのウェブサイトにアクセスしようとしている、これにより、クエリは、他に織り込まれてしまうかもしれません。いくつかのJavaScript、そのお誘いの準備はできましたか？これは学期のための私達の最後の言葉です。かしこまりました。ありがたいことに、JavaScriptは、2言語、CやPHPに非常に、非常に、非常によく似ています我々はこれまでに行ってきました。そこのpset 7にはJavaScriptはありませんが、それは非常に便利なツールだそれは、Webベースの最終的なプロジェクトをやったり、実際には単なるWebプログラミングより一般的になると。 DOMと呼ばれるものの概要を簡単そう。ここは本当にちょうどこんにちは、世界と言う超簡単なWebページがあるタイトルと本体の両方で。インデントは、いくつかの時間を示唆してきたように Webページへの階層は確かに存在する。私は、木のように、HTMLのこの同じスニペットを描くこと C言語でのデータ構造のわれわれの議論に戻って考えると、次のとおりであります。私は、文書ノードと呼ばれるいくつかの特別なルートノードを持つ私達はちょうどその瞬間にJavaScriptでこのアナログを見ることができます。この場合の第一子とその唯一の子は、HTMLタグです。 doctypeの直接的なマッピングはありません。、それは特別なことなので、それはこのDOMに来るとき、我々はそれを無視するべきであるこのドキュメント·オブジェクト·モデル·ツリー。私は矩形として任意に描かれたHTMLタグ、その予告頭と体：2人の子供を持っています。それらは同様に矩形として描かれています。それは頭が体の左側にあることを模式的に意味があります。含意は頭がツリーに最初に来るということです。ですから、このようにそれを描画するときに、ツリーに順序が実際にあり形状やその他もろもろは、任意であるにもかかわらず。ヘッドは、一方、タイトルと呼ばれる単一の子を持ってとタイトルが実際には、 "hello、world"である独自の子を持っていますこれは私は意図的に四角形から、それがわずかに異なるにするには、ここに楕円形として描きました。こんにちは、世界が本当にテキストノードであるのに対し、これらの長方形は、要素です。だからそれは、ツリー内のノードが、それはノードの異なるタイプですので、私は勝手に違ったように描きました。同様にhelloという名前の子だけでなく、世界を、身体を持っていません彼らが偶然同じテキストいるにもかかわらずとても異なるノード、しかし、私は、同じ形状を使用して、それを描いています。だから、誰も気にしない？さて、HTMLについて素敵なものだ、それがこの階層的な性質を持っていないということです。そして、何JavaScriptについて素敵だし、自由に利用できます特にライブラリとjQueryのような人気のある、あなたはとても驚くほど簡単にツリー構造をナビゲートすることができます。我々は、ポインタと横断木を使用してCでやったようなもののすべてとノードで再帰する右の子の左の子、我々が当たり前のように並べ替えることができますすべての突然の少しイライラしない場合は、驚くほどの啓発であるとしてはなく、ほぼプログラミングについて移動する効率的な方法です。それで、JavaScriptのようなこれらのより高いレベルの言語で我々は、はるかに直感的にこのツリーをナビゲートすることができるでしょう。そして確かに構文は非常に精通していることになるだろう。あなたが前にJavaScriptを見たことがないなら、これは本当に素晴らしい参照です Mozillaの人々は、Firefoxを作る人、からので、あなたの都合に合わせてそれを拾い読みして自由に感じています。あなたは何を見つけることができます - そしてこれらのスライドは、我々は先日使用したものと同じです - 同様に、メインがなくなっています。だから、JavaScriptでプログラムを書くとき、何主な機能はありません。あなただけのコードを書き始める。しかし、JavaScriptとCとPHPの間の重要な違いつまりCとPHPはこれまでサーバー側を実行されたのに対し、この場合のアプライアンスによって、またはより一般的に、サーバーによって、デザインではJavaScriptを通常ブラウザで実行されています。言い換えれば、あなたは、我々がうとしているように、JavaScriptコードを書くかもしれないアプライアンス内のサーバが、あなたはあなたのCSSの間では、HTMLの中でそれを含んで、あなたのGIFやPNGを使い、あなたのJPEGファイルの間でもしそうなら、あなたはJavaScriptを使用している場合、ユーザーがWebページを訪問したときにそのそのJavaScriptコードは、サーバーからブラウザに来るそしてそれは実際にそれを実行するブラウザーです。だから、これはあっても知的財産のための有意義な意味を持っています。それも、それはJavaScriptのコードに来るとき、あなたのIPを保護を考える愚かなものだ言語の性質によって、それは通常ブラウザ側に実行されますので。あなたはそれが狂気と醜い見えるようにすることができますを意味し、それを難読化することができスペースなしで、人々があなたのIPアドレスを盗むことが難しくなるために恐ろしい変数名、しかしキーは、それがブラウザ側に実行されるということです。さておき、JavaScriptなどのサーバー側を使用することができるにもかかわらず、最も一般的なユースケースは、現在ブラウザに残っている。そして、ここではそれがどのように見えるのです。ここでのif-else if-elseのただPHPのように、ちょうどCのような構築物である。とき "または" 2物事が一緒にここにブール式です。ここで一緒にしたときには "と" 2物事。ここではPHPに似ているswitch文があり、という点では、様々なタイプの値に切り替えることができます。ループは、同様に、我々は前に見たものとまったく同じように構造化されているここでループのために持っている。しながらループしておりますが、ループしながらやるんだ。変数は、ほんの少し異なる。あなたはPHPとC言語で行うようにして、変数を宣言し、しかし、同様にJavaScriptを弱く型付けされています。通常は、そのようなintやfloatや文字列または何も指定しない。あなたは、varを指定することができます。あなたは、varを指定する必要はありませんが、そうでない場合、それは意味を持っています。 varを省略した場合は通常、あなたが誤ってではなく、ローカルのグローバル変数を作成します。だから、変数の名前、あなたはほとんど常にちょうどvarの言うことを私は提案してみましょうと。それはタイプではない、それは変数のVARだけだ。これは、123または "hello、world"のものかどうか、例でしょう。配列が存在し、PHPの文法的に似ています。私はvar数字を言うだろうし、私は変数を宣言するには、もう一度、角括弧を使用その型はコンマで区切られ、その中にこれらの特定の番号を持っている配列です。そして、最後に、これは本当に違って見えるだけです。 PHPで私たちは学生のための連想配列を実装しているであろうことを思い出してください Zamylaような変数は学生と呼ばれる場所だから、このようになります。角括弧は、ここで配列が来ることを意味します。私は数値インデックスが、文字列を使用していないという事実 - イド、家、名前 - これは連想配列であることを意味します等号と角度ブラケット付きとこれらの矢印キーは "id"があることを意味し、値は1です。鍵は "家"であり、値はウィンスロップハウスです。キーは "名前"ですが、値がZamylaチャンです。だから内部の独自の値をそれぞれ有するこの連想配列、の3つのキーがあります。我々は、pset 7であることを見てきたか、あなたは間もなく、JavaScriptの同じ考えで、それはこのように見えるだろう。だから、varの学生は - noドル記号と種類には言及しないが、それでもVAR - は、キーと値のペアを持っている場合、JavaScriptであるため、中括弧を開き等しく、実際にはオブジェクトと呼ばれるものを使用しています。とAPCを取るかのようでしたあなたの人々は、Javaのオブジェクトを思い出すかもしれないまたはそれに似た言語。 JavaScriptは、まず第一に、Javaではありません。それは、人気がありました何か他のものをノックするために数年前に意図的な設計上の決定だったその名前、それ自体がJavaには根本的な関係を持っていないにもかかわらず。 JavaScriptはオブジェクトを持って、あなたは中括弧の表記の方法で作成してください。 JavaScriptでのオブジェクトはPHPの連想配列のほとんど同等であるそれはそれらの内部のデータを保存するために来るとき。しかし、さらに強力にJavaScriptで、非常に簡単に機能を関連付けることができますオブジェクトの内側に、あなたは、他の言語でこれを行うことができますけど我々が見るように、それは、かなり一般的なパラダイムです。要するに、このオブジェクトには、特にZamylaある学生を、表し、そしてそれは、概念的にはこれよりわずかに異なる構文的に似ています。実際にファイルにJavaScriptを使用してみましょう。 scriptタグがあるとアウトそれは変わります。我々は、styleタグを見てきたし、我々は他のHTMLタグを見てきました。スクリプトタグは、実際にいくつかのJavaScriptコードが含まれます。私は、我々はいくつかのソースコードがあらかじめセットされているアプライアンスに行こう。私はウェブサイト上でそれをまだ投稿していないが、私は授業の後それをやる。この1、blink.htmlを開いてみましょう。 1990年代に、BLINKタグと呼ばれるHTMLタグは、文字通りありましたこれはインターネット上で最も素晴らしく使い古さタグの一つであったそれによってあなたは、いくつかの90年代スタイルのWebページにアクセスし、このようにあなたを点滅するテキストを見て起動したいテキストこのように起こっていた侯爵タグの結果、。世界が実際にWeb標準に合意している数少ない例の一つ、軒並み皆は、何年か前にブリンクタグを殺した。しかし、我々はあなたが持っている力のデモンストレーションとして、JavaScriptでそれを復活させることができますあなたがWebページ内のプログラムを書くことができるとき。まず最初は新しいものを飛ばし、古いだけに集中しましょう。ここでは、この例では、古いものです。私は、HTMLタグ、headタグ、タイトルタグを持っている。それから私は、リコールはちょうど長方形のページの分割であるdiv、とここでbodyタグを持っている私は、への "挨拶"の任意の一意のIDを与えてくれたことちょうどので、私はいくつかの非常に単純なテキストを持っている唯一それを参照する方法を持っている：こんにちは、世界。今私は、このファイルの先頭までスクロールして、何が新しくなったのか見てみましょう。新しいアップ上部にある最初の事は、スクリプトタグですとscriptタグの通知の中に私は、関数を宣言した。 PHPに非常に類似したJavaScriptの関数を宣言するには、あなたは、文字通り、その関数の名前、かっこを、関数を書くそしておそらくいくつかの引数は、任意のを取る場合。、それから私はいつものように私の中括弧を持っている、そして今我々はいくつかのわずかに新しいコードを持っているしかし、これが何を意味するのか見てみましょう。だから、varのdivは、これはちょうど私と呼ばれる変数のdivを与えることを意味します。私はそれをfooと呼ばれるかもしれないが、私はそれはdiv要素と呼ばれることを望んで第二には明らかであろう理由のため。それはJavaScriptで判明 - そしてこれは私のWebページに埋め込まれたJavaScriptのコードです - ドキュメントと呼ばれるある種の特別なグローバル変数があります。 JavaScriptは、実際にはオブジェクト指向言語です。我々は、それが何を意味するかのように50で詳細には触れませんしかし、今のオブジェクトが構造体と非常に良く似ていることを知っている。最古の問題のいずれかで設定したとき、我々は戻って道を見たようなここで我々は、構造体で多くの情報を入れ同様に、ブラウザに付属の専用構造を文書化されている任意のWebページが付属しています。それは私が作成したものではない。この文書構造の内部には、しかし、あなたはデータだけでなく、持っているしかし、あなたはまた、機能を持っています。あなたはオブジェクトの内部、構造体の内部機能を持っており、いつでも、それはメソッドと呼ばれています。しかし、それは同じことだ。方法はちょうどので、何か他のものの中にあることを起こる機能です。この特別なグローバル変数はドキュメントと呼ばれることを意味しますので、この関数は、文字通りその行いgetElementByIdを呼びかけている。それはあなたのDOM、ドキュメントオブジェクトモデルツリーから要素を取得するこの場合の挨拶で、そのIDである。言い換えれば、我々は、データ構造に費やしたすべての時間は、ここで場に出る。我々は少し前に持っていたDOMのこの絵、私はこの絵にdivを持っていた場合、ページは、少し異なっているにもかかわらず、何のdocument.getElementByIdが私に戻ってくると、効果的にポインタであろうツリーは、ツリー内の矩形を基準に四角形へ。だから、それはそれは実際にそれらのいずれかの関数を呼び出すために何を意味するかだ。この場合、再びそれはdivです。それは、身体またはタイトルはありません。だから私は、その後すぐに私はそれは、この変数と呼ばれるdivの内側に持っていることをこのdivで何かを見てみましょう。それはあなたが動的にページのCSSを微調整する能力を持っているJavaScriptを使用して判明した。今まで、我々は限られたとはいえ、やったCSS、のすべてが、style属性であるまたは他にどこ私たちは、CSSを入れている？甘やかされて育ったその1の私は一種。ファイルの先頭にあるstyleタグで。または3位はでてきた？外部ファイルは、何か。CSS。だからそれらは、我々はCSSのこれまで行ってきた3の場所ですしかし、漁獲量は、我々は一生懸命それをすべてコーディングしています。私たちのCSSはどのようになるか講義前にPSET 7に鳩のようにして決定した、我々は決めた。あなたのCSSを変更したい場合は、しかし、あなたが実際にそれを行うことができます一度は、実際のプログラミング言語を持っています。 CSS、HTML、 - しないプログラミング言語。 JavaScriptがある。だから、できるだけ早くあなたが木からこれらの矩形のいずれかを持っていることが判明 DOMと呼ばれる、それ自体がその中のいくつかのデータを持っています。だから、僕は木から取っているdiv要素は、我々はその中にプロパティを呼んでいるものがありますスタイルと呼ばれ、スタイルプロパティは、それ自体が視認性と呼ばれる性質を有している。私はCSSのユーザーズマニュアルを調べることによって、このことを知っているだろう。それが言うことない視認性のCSSプロパティがあるとアウトそれは変わります。それが見えるか見えない、見えるか見えない何かになります。そして、これはどのようにこれを行うことである。このdivの視認性が隠されている場合、私は、プログラムで求めている私はそれを何を変更するのですか？目に見える。このページの視認性が隠されていない場合は、Else、論理的に私はそれが隠されたことはない。私はそれが目に見えると隠されたと目に見えるものと見えないではない理由はわかりません。これは、道に沿って貧弱な設計上の決定だった。表示と非表示：しかし、それらは確かにCSSで反対語です。このすべては、オンとオフ、それはオンとオフを私のファイルのCSSを変更することを意味しているんその特定のdivの。しかし、再び、これは点滅に呼び出される関数である。点滅機能はいつ呼ばれているのですか？それは、他の特別なグローバル変数と呼ばれるウィンドウがあることが判明、文書とその精神においては似ていますが、文書のに対し、あなたのWebページを参照する DOMツリーのように、HTMLは、サーバーから送られてきたウィンドウには、その周りにクローム、アドレスバー、タイトルバーを指しますあなたのウェブページの周りにそのようなもののすべて。そしてそれは、windowオブジェクトは、setIntervalと呼ばれるそれの特殊な機能を内部に持っていることが判明それはそれは言うことありません。それは間隔を設定します - この場合500ミリ秒ごとに - と、推測を取る、何それは500ミリ秒ごとに何をするつもりだ？その関数の点滅を実行するために起こっている。そして、何ここでは素敵なのは、私たちがやったことがないにもかかわらず、我々はC言語でこれを行っている可能性があることです。 Cは、あなたの周りの関数を渡すことができ、関数ポインタと呼ばれるものを持っていません引数として。同様に、JavaScriptで別の関数に関数の名前を渡すことができます。と私がやっていることに気づく。私はこれをやっていないよ。私は瞬きの後に括弧を置く場合、それは点滅関数を呼び出すことを意味する。私はここで意味し、それらを省略した場合は点滅機能ですようのsetIntervalは500ミリ秒ごとに呼び出すことができます。だからそれでありながら凶悪な最終的な結果は、、、私はlocalhostに行くとblink.htmlに行けば、ということである私は今、何度も何度もこの出来事を持っています。そして、私は実際に要素を検査した場合、我々はこれを見ることができるかどうか見てみましょう。私はエレメントを点検してみましょう、私は少しだけ下にスクロールしてみましょう私はこっちの要素を選択してみましょう、とChromeのインスペクタのDOM内側に気づく。それは文字通り、前後に500ミリ秒ごとに変化しています。私達は私達の友人ネイトに行けば、あなたは今までの間隔で、これはどのように動作しているか、同様の考えを疑問に思い、場合しかしネイトは、ここで実際にこの特定のケースの色の非常に有効に活用されています。だから何より、我々は実際にこれを行うことができますか？別の例を開き、何かを試してみましょうそれはプログラムで物事が点滅を作るよりも、さらに便利です。私は今日の我々のformsディレクトリに移動して、form0に行こう。これは、私が思い付くことを醜い形だった可能性と私はちょうどそれがブラウザでどのように見えるかお見せしましょう。私は、localhost /フォームに行こう、これはform0です。これは、パスワードの入力、電子メールのためのいくつかのフィールドを持っている超醜いHTMLフォームですパスワードを入力し、いくつかの諸条件に同意する]チェックボックスを少し。私はこのフォームを訪問し、私はあなたに私のメールアドレスを与えたくない場合は、catchは、です私は多分契約条件に同意したくない、私は、[登録]をクリックすることができますそして、それはとにかく私を介してすることができます。これはdump.php呼ばれる愚かなPHPファイルに提出することを起こる。それはないすべては、単に診断目的のための$ _GETの内容をプリントアウトしています。それはちょうど今、ユーザによって提出されたものだった。しかし、我々は実際にユーザのフォーム送信を検証したいとしましょう。私はバージョン1に行こう。これはform1.htmlです。それは審美的に同じように悪いように見えますが、それがどのように空想に気づく。協力せずに私の登録]をクリックした場合、私は怒鳴りつけられる。 "あなたはあなたの電子メールアドレスを提供する必要があります。" かしこまりました。だから私はそれを試してみましょう。だからmalan@harvard.edu。私は、パスワードは必要ありません。登録します。 "あなたはパスワードを入力する必要があります。"かしこまりました。だから私は、真紅のパスワードを提供します。登録します。 "パスワードが一致しません。"私は今ここに真紅で入力しなければなりません。私は誤っていることを確認しました。登録します。 "あなたが契約条件に同意する必要があります。"かしこまりました。そこに同意するものとします。登録します。そして今、それは私のあそこに診断出力を示しています。だから、何が起こったのか？我々は、フォーム送信を検証するには、この能力を持っていた。あなたはPSET 7にダイブをした場合は実際には、謝る機能はありそれは、画面上のメッセージを持つユーザで叫ぶことをとても簡単に行うことができます。私はわずかに異なるメカニズム、アラート機能を使用していますそれはそれは非常に醜いユーザメッセージを作る際に微笑んだので、関数ではありません。しかし、私がここでやってるのか見てみましょう。これはform1.htmlです、と私はいくつかの非常に使い慣れた構文を持っていることがわかります。 bodyタグ、formタグのaction属性、method属性。しかし、私は私のフォームの利便性の一意のIDを与えてくれたのに気づく。それから私は、そのタイプがテキストである電子メールのフィールドを持っているそのタイプがタイプされたパスワードですパスワード、確認フィールドでパスワードフィールド、その後、名前がこっちに合意ですチェックボックスは、タイプはチェックボックスです。そして私は送信ボタンを持っている。しかし、より多くの私が持っているものを一番上に気付く。まず第一に、scriptタグの別の使用方法があります。あなただけのCSSと同じように、別のファイルにいくつかのJavaScriptコードがある場合、あなたはそれを含めることができます。そして、あなたはスクリプトのソースを使用して行うことが、その後私は明らかに接続しているに気づく googleapis.comに非常に長いパスへのが、そのファイル名jquery.minで終わる最低。JS。 jQueryにはJavaScriptを行うJavaScriptのための超人気のライブラリです使用するすべてのより多くのユーザーフレンドリー。それは効果的にデファクトスタンダードになってきた。それで、あなたが見ることについてだがそれ自体が純粋なJavaScriptでなくても、それははるかにCS50のようなJavaScriptライブラリの上にライブラリが層である低レベルのCコードの上に、現実にはほとんどインターネット上の誰もがそれを使用しています。したがって、これらは補助輪ではありません。これは、単に最高のこれらの日の練習である。今、私の独自のスクリプトタグでその下に気づく、と私はここで何をやったかがわかります。これは、jQueryが何か少し派手なないことが判明した。 JavaScriptは、ドル記号がありますが、それらは意味がありません。彼らは、文字またはBまたはCのようなもの jQueryは単に事実をのんびりとクレームの慣習やソートを採用しています $は、彼らの特別なシンボルとなること。だから、できるだけ早くあなたがスクリプトタグと一緒にここにこのグローバルJavaScriptファイルをロードするように、あなたは$と呼ばれる特殊なグローバル変数にアクセスすることができます。それは、より適切にはjQueryと呼ばれるが、それは$とほぼ同じくらいセクシーに見えることはありません。しかし、$は特別な意味はありません。 PHPでそれは特別な意味を持っていた。あなたは、変数の前にそれを持ってしなければならなかった。これは、ちょうど彼らが上にかかったセクシーなものです。ここで何が起こっている？私はjQueryの関数に私のグローバル変数文書を渡しているに気付くそして私は呼んでいる。準備が整いました。何が本質的にjQueryのそれはあなたには、いくつかのバニラのJavaScript物事を取ることができないです documentオブジェクトのように、ウィンドウオブジェクト、そしてあなたは、jQueryの関数に渡した場合 - そして再び、明確にすること、これはjQueryと呼ばれる関数です - それが何をするかそれはあなたの文書の特別なバージョンを返すそれは、それに関連付けられた多くの機能を持っています。だから、生のJavaScriptでなくレディ機能はありません、しかし、あなたが最初にjQueryの関数に文書を渡した場合、それはあなたに、ドキュメントオブジェクトの特別なバージョンを返すそれはもっと派手な機能を備えています。人々がそれを好む理由だ。それはちょうど私たちが見るうとしているように、やることが容易になります。だから、このコード行はどういう意味ですか？ドキュメントの準備ができたときにこのコード行は、ここでいう - 言い換えれば、一度ブラウザがこのファイル上から下へを読んで行われる - 先に行くと、次の関数を実行します。何がJavaScriptで本当に面白い - とPHPもこれを持っています - 匿名関数です。 JavaScriptではあなたには名前がありませんが、彼らは肉体を持って行う関数を宣言することができます。ここで何が起こっているかに注目してください。これは、準備と呼ばれる関数であり、それだけで次の手順を実行します。意味それは、すべてのサーバーから読み込まれているとき、すべてのWebページには、準備ができています。あなたは何をしたいのですか？私は、コードをまとめて実行したいと思います。我々はすぐにこのコードを実行しないことに注意してください。私はこれを省略した場合は、これらのコード行を実行して起動した直後を意味するでしょう。しかし、私は、いや、いや、いや言っているという事実は、このように無名関数でこれをラップ手段はまだそれを実行しません。最終的にそれを呼び出します。私達は私達の前のフォームの例で一瞬前にこれを見た。我々は、500ミリ秒後に、最終的にどのような関数を呼び出したのか？が点滅します。同じ考え方はそう。繰り返しますが、これは少し奇妙に見えても、ただ信仰で今のところ取る最終的に呼ばれて無名関数を宣言することが、あなたは単に関数を（）{書くだから、どのようなコードを、我々は最終的に実行するつもりですか？以下。これは、あまりにも少し新しいように見えるが、これはここでは、jQueryの関数であることを意味しますそしてこれは今ショートカットです。もちろん、画面の下部に表示されているHTMLのスニペットは、いくつかのツリー表現を持っています。これはありません。このページには、このハロー、世界の例よりも興味深いものです。しかし、このHTMLに対応していくつかの木があります。これは、再帰関数のいくつかの種類を実装する必要があり、首の痛みであろうルートノードから開始し、その後、IDが登録しているノードを見つけることができます。それでは、jQueryは私たちのために超簡単になり、文字通りこれです。先に行くと、私を得るものは何でもdivまたはどんな形、どんなHTML要素登録のIDを持っています。これは、document.getElementById（ '登録'）と等価である。なぜ、jQueryのような人がいますか？それは入力するより短いだから。しかし、それはすべてです。それは同じ考えです。私には、ID登録でタグを取得する。とフォームであることを起こる、そのタグは、送信されたとき、先に行くと、このコードを実行します。それでは、我々はフォームの検証をやっている方法を見て今見て1を取ることができます。構文は、最初は確かに謎めいていますが、何が起こっているのでしょうか？このコード行がtrueであれば、私は彼または彼女の電子メールアドレスを提供するためにユーザーを怒鳴りつけるつもりです。だから、このコード行は何ですか？ $はjQueryのことを意味します。さて、これに気づく。これはCSSのような種類のものである。あなたはまだCSSに潜ったことがあれば、これは、IDが登録である要素を意味することがわかります。スペースは、子または名前が入力され、登録の子孫を見つけることを意味します。そして、角カッコで囲まれた、このことは、少しフィルターです。そして、これは不可解なように見えても、これは単に、そのIDを登録した形式に行く意味名前電子メールであることのinput要素の内側に移動し、その後、その値があることを起こるものは何でも、その値を取得する - それは私が入力したものなら、それがすべてのI型またはmalan@harvard.eduだ場合空自。だから、フォームのemailフィールドの値の場合==何も、ユーザーで叫ぶ。他のパスワードフィールドの値は==何も、ユーザー怒鳴らない場合。他のパスワードフィールドの値が確認フィールドの値と等しくない場合には、他のフォーム要素であった、ユーザー怒鳴りつける。そして、最後に - そして、この1つはあまりにも、いくつかの独自の構文が新しく追加されてい一度あなたがそれを見てきたけど、それは、少なくとも、もう少し合理的だ - IDを持つ登録フォームでは、名前が合意されているinput要素を持っている他の場合それがチェックされて、先に行くと、ユーザーで叫ぶ。だから私は完全にこれは一見しただけでは完全に圧倒していると認めている。これは、新しい構文の多くのです。しかし、jQueryのすべてのパターンのこれらの種類を次の。そして正直なところ、私も数分前までは、これは存在を知らなかった。私は、 "チェックボックスをjQueryでチェックされている場合はどのようにチェックしますか？"ググそれを行うためのさまざまな方法があるので、これは、構文は次のとおりです実際の生のJavaScriptコードで置き換えます。だから問題セット7の非常に最初のページが強調するように、 PSET 7は非常に自分自身をブートストラップすることで練習ですここで我々は、うまくいけば、PSETに取り組むとの概念的なフレームワークを提供してきました。しかし、Webデザインでよくあるケースですが、それは周りをウロウロするのは本当にあなた次第です、限り、あなたがそれらを引用するように、Webからのコードと例のスニペットを組み込むその最初のシート上の条件につき、その学習は、HTML、CSS、JavaScript、さらにはSQLの実現本当に我々はこれらの補助輪を脱ぎ始めると、このアットホームな運動であることが意味されます。そして、あまりにもあなたがブラウザを使って行うことができ、よりたくさんのことがあると認識しています。これらの要素のほとんどの内にイベントハンドラと呼ばれる他のものがあります。そして、我々だけ、onSubmitおよびonready呼ばれるものを見ていてもあなたは、onkeydownを、onkeyupのようなことを行うことができユーザがキーに触れたときのように、あなたはそれとキーアップのために聞くことができます。 Gmailのキーボードショートカットを持っています。どのようにGoogleが作成するためのCのようなキーボードショートカットを実装するのですか？彼らは、OnKeyPressまたはOnKeyUpし、onKeyDownと同様に、彼らが呼ばれているように、イベントをリッスンする。あなたは今までにいくつかのメニューオプションの上にマウスをホバーしている場合そして突然、出来上がりのすべてと、メニューが表示され、またはグラフィックの色が変わりますどのように彼らはそれをやっている？ onreadyまたはonSubmitを待ち受けるのではなく、あなたは、onmouseoverイベントやonmouseoutを聞きます。だから簡単に言えば、これらの非常に簡単な基本から、我々は今日の表面に傷を付け始めていることをそして我々は、ますます、あなたが持っている、水曜日にさらにに飛び込むよあなたは既に精通していることの種類を実装するための電力。それでは、そこに終わらせ、私たちは水曜日にこれを続けていきます。 [CS50.TV]