[音楽再生] DAVIDマラン：これはCS50です。 これは週9の開始です。 そして、これは持っているであろうものです 氏ブール生誕200歳の誕生日でし。 だから、これは仲間であります 私たちは、それとなく触れてきた人に 使用方法についてかなりの時間 trueとfalseのブール変数、 1と0など。 そして、これはGoogleのでした 彼へのトリビュート今日。 彼は200になっているだろう。 だから、あなたがしたい場合 CS50のランチにご参加、 リンクを見てみましょう コー​​スのウェブサイト。 そして、このような顔や友人など これらは、ここでケンブリッジであなたを待っています。 これらのような顔はニューヘブンであなたを待っています。 INと、実際には、ケン ニューヘブンは親切に作られました イーライのアニメーションGIFと呼ばれるもの ここ最近では、GIFはまだありlunch-- 別のグラフィックファイル形式、 これであなたはそのfamiliar--です このような小さなものになります。 だから順序は、[OK]をof--。 ここでケンブリッジの誰もが笑っていません。 しかし、ニューヘブンで、この 右、本当に面白いのですか？ 大丈夫。 だから、私たちに参加ください。 ここではハーバード大学、 具体的には、この水曜日、 あなたは二年生または新入生ならeven-- 作るのかさえjunior--思考 コンピュータへのスイッチ 科学、知っているだろうことがあります CSはこのフェア助言します まもなくクラス後の水曜日、 コンピュータ4:00 PMに 科学の建物マクスウェルドウォーキン。 私たちはもちろんの上でこれを出してあげます 明日のウェブサイトだけでなく。 ドーナツは、私が聞いている、提供されます。 大丈夫。 私が突っついたとても面白いですstory-- 周りのインターネット上で、 そして、私はいくつかの古いアーカイブを見つけました 私の元のウェブサイトの。 そして、それはこの問題を回避out--なります 時間は、それは非常にタイムリーなようです 私はUCの選挙ことを集めるため、 再びギアアップしようとしています。 だから私は、UCのために走った無残失いました。 そして多分これはなぜ一部にありました。 だから、これは当時の私のウェブサイトでした。 何らかの理由で、私はそれがだと思いました 人々に伝える前に、良いアイデア、 何を私のプラットフォームたとなぜ彼ら 彼らが持っていることを、私のために投票すべき ことを確認するために入力する]をクリックします 振り返っている情報は、 不気味のようなもの。 私は本当にそれが何であったか知りません。 しかし、それは確かにしませんでした キャンペーンを助けます。 私も先輩によることがわかりました year--私はこのマペットのカレンダーを持っていました。 マペットは、当時流行した種類のでした。 それともそうではありませんでした。 私は当時マペットのカレンダーを持っていました。 そして、私はそれが名前に涼しいだろうと思いました ハーバード大学のネットワーク上の自分のコンピュータ frogman.student.harvard.edu。 当時、我々はすべて独自に持っていました 識別可能なホスト名。 そして、あなたはいくつかの虚栄心を選ぶことができます 代わりに自分の名前の名前。 そして、私はいくつかの理由でフロッグマンと一緒に行きました。 そして私は私が多くを費やしstarted-- 時間のこれらのリンクを介してクリック 今朝。 そして、これは、私についてのページでした これは今種類の愛らしいようです。 しかし、それはまた、単にに証言します どこまで技術が来ています。 私は戻って一日で、平均値、 486は何かでした。 このごろ、それは、スーパー、スーパーです スーパースローよく少ないです あなたはあなたの中に持っているかもしれないより 自分のポケット、これらの日。 そこにそれの詳細があります さらに恥ずかしかったです。 だから私はそれでそれを残しておきます。 しかし、それは私の最初でした web--への進出ああ、ありません。 それはありませんでした。 Webプログラミングへの私の最初の本当の進出 私は忘れてしまったこのサイトは、でした。 ある時点で、私はどのように学びました 反復的な背景画像を作成します。 そして私は、このタイルが有効であることが見出さ ホッケー選手、サッカー、ゴルフなどの ボール、または何でもそれはあります 一年生のIMSのウェブサイトのため。 そして、これは純粋に、実際にありました 私はon--取った最初のWebベースのプロジェクト 私は多分年生思います 年、ジュニアyear-- CS50とCS51を取った後、1 一般的な後続のクラスの。 私が探しているに気づきました アーカイブを その私の後継者の一つであり、 友人は、李氏は、種類の変更します 彼自身の著作権。 しかし、これは確かに何かしたこと 私は恥ずかしさにを所有する必要があります。 しかし、時間で、この 最初のWebサイトでした、 私は数週間前に言ったように、 新入生ができたことにより、 ここ学内スポーツのために登録します。 そしてそれが判明します その背景画像 そのように、このような良いアイデアではありません。 しかし、ウェブは、新規であり、 我々はすべての実験を行いました。 そして、これは私です どうやら時でした。 大丈夫。 だから、さらに苦もなく、私たちはスイッチ ギア、今日は本当に、あなたを与えるために、 あなたが見つけるかもしれない最後のピース 最終的なプロジェクトのために特に有用です もに開始されています 全ワールドワイドウェブを作ります もう少し分かりやすい感じ。 実際、我々は導入するつもりです もう一つのプログラミング言語 似ているというJavaScript そして、異なる方法で異なります 言語から、私たちはこれまで見てきました。 だからC、リコールは、このコンパイル言語です。 あなたは、コンパイラを介して実行するようになってきました。 あなたは、オブジェクトのソースコードを取得 コー​​ド、または0と1。 そして、それらは0と1であること あなたのCPU、中央演算処理装置、 実際に理解しています。 PHPは、対照的に、ではありません コンパイル言語。 どのようなことですか？ それはインタプリタ言語です。 だから、いくつかのプログラムがあります インタプリタと呼ばれること にit--トップを読むために持っています right--する左下、 とのどのようなすべてを把握 あなたの構文がないと意味、 それは、ループまたは条件ですか プログラミングのあるいは他の番号 構築。 だから、インタプリタ言語です。 その後、我々は、HTMLを導入しました。 そして、HTMLにもありません プログラミング言語。 私たちは何を呼ぶだろうか？ ちょうどであるマークアップ言語、 それを言っての派手な方法の一種 などのプログラミング構造を持っていません 私たちも、バックスクラッチの日に見ました。 何のループがありません。 何の条件はありません。 それは本当に言語であります あなたのデータをマークアップについて それをフォーマットしますか いくつかの方法でそれを構成します。 CSS、一方、同様に ないプログラミング言語。 それも、より審美的に指向です。 そして、それはあなたが微調整の並べ替えすることができます フォントサイズや色のようなもの 配置とそのすべてと。 その後、我々は持っていました SQL。 だから、SQLは、実際にプログラミングです ある意味で、言語、 いえ仕立て 特にデータベースへ。 しかし、我々は次の目的にのみご紹介していても 選択して挿入して、削除および更新 その他のカップル、 あなたが実際にすることができますが判明 関数を記述したり 彼らがしているような手順、 見てSQLおよび行為で、呼ばれます かなりPHPとC関数のよう。 だから、それらが存在することを知っています。 しかし、私たちも彼らと気にしないでください 私たちはここに表面を傷つけるよう。 そしてJavaScriptの、最後の 私たちの言語が正式に導入されました。 そこでJavaScriptは、あまりにも、です インタプリタ言語。 そして、おなじみのものが行います あなたはそれを区別したいです いくつかの特性を有します CとPHPの両方から？ 何がそれは違うのですか？ 観客：それはコンパイルされていません。 DAVIDマランは：もう一度言って？ 観客：それはコンパイルされていません。 DAVIDマランは：それはコンパイルされていません。 だから、あまりにも、解釈されます。 だから、それがコンパイルされていません。 しかし、それはPHPのようなそれは少しになります。 しかし、それはまだ異なるです いくつかの印象的な方法では、PHP、 少なくとも方法で我々はそれを使用します。 うん？ 観客：それはクライアント側が実行されます。 DAVIDマラン：それは実行されます クライアント側、通常。 それは確かに際立ったのです 今の私たちのために特徴的。 Cは意味では、サーバー側でした 我々はCS50 IDEですべてをしたこと。 PHPはこれまでされています サーバー側限り それは、あまりにも、interpreted--につれて コンパイルされたが、interpreted--ありません もちろんですCS50 IDE、内部 クラウド内だけでサーバーまたはサーバー。 しかし、JavaScriptのも あなたのにあなたが行っています PSET、言う、のためにそれを書き込みを開始します 8、あなたがしているprojects--多分最後の それを右に行きます CS50 IDEとそれを保存 CS50 IDE、CS50 IDE内のファイルで そして、今度は、クラウドサーバー それがホストされているその上に、つもりはありません 解釈またはあなたのコードを実行します。 むしろ、で送信されるだろう ブラウザまで未変化体。 そして、それは、その後、IEになるだろう クロムまたはFirefoxやSafariや またはそれは実際にどのような解釈します それは、上から下へは、左から右へ。 だから際立っ 今日のための特徴 JavaScriptはクライアント側であるということです PHP、例えば、 サーバー側となっています。 さて、これは興味深い意味を持っています 、のように、知的財産のための だれが実際にあなたのコードを見ることができます。 そして実際、あなたが行くことができます ウェブ上で最もを参照してください 誰かが持っている任意のコード JavaScriptで書かれました。 時にはそれが読みやすいですが、 時にはそれは、難読化されています。 しかし、やがてその上より。 JavaScriptのように、きれいに十分であり、 Cに、構文的に、超同様の そして、PHPのような多くの、 何の主な機能はありません。 あなたが書き込みを開始する場合 JavaScriptコードは、あなたが今日わかりますように、 あなたはそれを書き始めます。 しかし、それは特に、あなたが表示されます、です ウェブブラウザのコンテキストで有用。 しかし、私の小さな 通常earlier-- disclaimer-- ますますあなたができると言うことでした 今日は、JavaScriptのサーバー側を使用 Node.jsのと呼ばれる派手なフレームワークを使用して CS50自身のアプリケーションのいくつかのこと で書かれています。 50をチェックし、実際にNode.js.を使用しています しかし、我々は集中するつもりです ここに上のJavaScriptクライアント側。 そこでここではPHPの条件のセットです。 申し訳ありませんが、実際にin--、その 文は、あまりにも正しいです。 ここでの集合でもあります JavaScriptで条件。 構文的には、それはあります CへとPHPと同じ。 氏ブールの表現であり、 同様に、文法的に CとPHPの両方と同じ。 また、内のスイッチを持っています 同一に見えるJavaScriptの。 我々は、ループを持っています 同一の構造、 ループしながら、whileループを実行します。 この1は少し違います。 PHPは、各構築物のために持っていました あなたが使用している可能性があること または、おそらく、PSET 7で使用されます。 JavaScriptは、この特別なバージョンを持っています あなたは、文字通り何かを言うための場所 これは、オブジェクト内の変数キーのような のが非常に簡潔な方法です、 私はobject--を持ってきた場合、私たちはよ moment--で再びこれらについて話します 私はすべての反復処理したいです 内部のキーと値のペアの、 私はどのように把握する必要がありません。 ゼロの数値インデックス、それらを、1、 二つ、三つ。 私は、文字通り、これを言うことができます。 また、各繰り返しでは、JavaScript 私は、変数のキーが更新されますために 最初のキーは、次のキーであるためには、 その後、次のキーは、次のキー、 など。 そして、私は処理することにより、その値を取得することができます 私たちが見るようJavaScriptでのオブジェクト、 それはだかのように PHPの連想配列。 確かに、あなたは最終的に包装された場合は 連想配列が何であるかを周りを気に PHPで、あなたは今のようなことを考えることができます JavaScriptでのオブジェクトと同じ。 しかし、それは少しです 過度の単純化。 配列は同じで、きれいに十分な、見て 一つの文字を除いて、PHPに。 ここで不足している一つのことがあります 私たちは、PHPで先週見たこと。 何を省略していますか？ うん？ いいえドル記号はありません。 だから我々は、に戻っています より正常な世界場所 変数はドル記号を持っていません。 しかし、あなたはそれらを接頭辞行います VARと、一般的に。 そして、VARは変数を意味します。 そして、PHPのような多くが緩くあります typed--それによって種類があります、 数値と文字列があります そして、山車などforth-- JavaScriptは同様のタイプがあります。 しかし、それは緩くことで入力しています私たち プログラマは、それらを指定する必要はありません。 私達はちょうど認識する必要があり 異なるタイプが存在すること。 変数は、meanwhile--ここでどのようです 私たちは "こんにちは、世界"宣言できます 文字列として。 それは同じです注意してください PHPが、無ドル記号。 そして、これは私たちがよものです 今日より多くのを見て開始し、 あなたがオブジェクトを持っていることによって キーと値を持ちます。 そして、あなたは試してみたい場合 最後week--から推論することができます 構文は少し異なります。 しかし、少し正気はどのように多くのcheck-- キーは、このオブジェクトが持っているように見えるのでしょうか？ だから私は4を参照してください。 私は2つを参照してください。 だから、実際には2つです。 だから、これはコレクションです 2キーと値のペアの。 キーは、その値がFBであるシンボルです。 キーは、その値が101.53である価格です。 だから、それらは、二つのキーと値のペアです。 そして、PHP--を覚えて、これは、再びです 構文上の違いだけの一種。 それはすべてのことではありません 知的興味深いです。 PHPはこの同じことを書かれている可能性があります follows--引用符としてのものに等しいです。 そして、私は角括弧にこれらを変更します。 そして私は、これを変更します 引用された言葉、「価格」。 そして私は、コロンを使用しないでください。 私は先週、何を使用しましたか？ うん、等号 ファンキーな表記を矢印。 そして、私はここで同じことをしました。 ここでは同じこと。 そして、それがすべてです。 これがいない場合ので、それは大丈夫です 実際には、メモリに沈ん まだそれは本当にだから 知的面白くありません。 それはちょうど、構文の違いです。 しかし、アイデアはまったく同じです。 この変数の内部に JavaScriptでの引用 キーと値のペアの集合であります 一つは、の一つのシンボルであります 価格です。 そして、私はこれらの値を取得することができます 次の構文を持ちます。 ただ、PHPでは、私ができるように 聞かせlike--何かを 私は、このボックスが少し大きくします。 ただ、PHPでは、私ができるように くそ、ああthis--作ります。 いい加減にして。 ただPHP-- OKのように、我々はよ ちょうど発表者ノートを使用しています。 ただ、PHPのように、私がすることができます ["記号"] $引用$の見積もりを行います、 これは私を取得します 値が "記号"。 JavaScriptでは、それがあることになるだろう 同一の、私はこれを行うことができます。 だ唯一のこと 不足しているドル記号です。 それでうまく十分、その後、あります すべてではないそれほど新しい構文。 それでは、今日に焦点を当てる、本当に、あります アイデアやアプリケーションのいくつか。 そして、最初のそのような アプリケーション、あなたがかもしれません あなたはPSETに潜った場合に見てきました 7は既にこの構文です。 PSET 7でだから、あなたがしている場合 まだそれを見て見ていてもいなくても、 我々が与えるファイルがあることを知っています あなたには、JavaScript config.json--と呼ばれます オブジェクト表記。 なぜ？ 私たちはをご提供できるようにしたかったです いくつかのキーと値のペアを持つテンプレート。 私たちはあなたのリストを与えることができると思いました ホストの、サーバーの名前。 私たちはあなたに与えたかったです あなたのユーザー名のプレースホルダ およびパスワードのプレースホルダ。 あなたが見ていない場合 これはまだ、心配することはありません。 PSET 7でこれについての詳細 [？スペック。 ？] その後、 明らかに、私たちはあなたをしたいです -DOSを記入します あなたがにログインしたときのため あなたの各CS50 IDE、 独自のユーザー名とパスワードを持っています。 だから我々は半ダース使用していたかもしれません 以上の異なるファイル形式。 私たちは、.txtファイルを使用することもできました。 私たちは、CSVファイルを使用することができます。 我々が使用していたかもしれません INIファイル、XMLファイル、 全体の束より頭文字こと あなたは今まで聞いたことがない可能性があります。 これは、任意のようなものです 一日の終わりに。 しかし、これらの日の超人気テキストです JSON-- JavaScriptのオブジェクトと呼ばれる形式 Notation--それは次のようになります。 それは、少し不可解です しかし、パターンに気づきます。 あなたはオープンカーリーで始まります ブレース、あなたは同じで終わります。 その内部のものです。 これは、キーと値のペアです。 だから、これは私がオブジェクトであります ここで画面上を見て それは一つの値を持つ一つのキーを有しています。 そして、ちょうどに基づく推論 前のパターン、ここで重要なのは何ですか？ データベース、事へ コロンの左側。 さて、値があることを起こります 複数行この時間。 しかし、値がカーリーで始まります ブレースと中括弧で終了します。 だから、何を提案することです データベースの値の型？ ちょうどより多くの辞書や、 簡潔に、オブジェクト。 右？ これは、データ構造の一つであります 自身の中に他の構造を使用することができます。 この全体のこと、我々はしているのであれば object--とオブジェクトを呼び出します pairs--キーと値のちょうど束であります データベース自体の値はオブジェクトです。 データベースの値は、全体の束を持っています キーと値のペア、そのうちの最初の あるホストは、その後、その後、名前を付けます ユーザ名、パスワード、 その値のそれぞれが、一方、それはです 二重引用符でちょうど退屈な文字列。 だからではない場合でも、 超クリアなまだ、 これは単にであることを知っています 標準、かなり退屈な方法 標準的な形式でデータを格納します。 しかし、一般的なミスあなたに でもPSET 7に、なるかもしれません、 あなたの場合のように少し愚かなことであり、 偶然そこにカンマを省略します。 それはファイルをもたらすことが起こっています 必ずしも読みやすいではありません。 あなたが誤ってのようなものを省略した場合 引用符は、それが読み取り可能ではないだろう。 だから、それはかなりせこいファイル形式ですが、 それは、超共通だ一つです。 そして私達はあっても、それを使用するために起こります あなたは、それ以外の場合は任意のJavaScriptを使用していません PSET 7インチ 大丈夫。 したがって、この絵を覚えています。 我々は、HTMLで、について話しました コー​​ドは次のようになります。 これは、ハイパーテキストマークアップ言語であります [聞こえない]だけのために "こんにちは、世界。」 しかし、その後、我々は提案 しばらく前に、それは場合に役立ちますこと、 あなたは考え始めるしたいかもしれません これについては既にツリーとして。 実際には、インデント、我々 読みやすさのためだけに使用 やスタイルのためにのために 左缶の種類の この木、あなたをに翻訳します いくつかの特別なルートノードを持っている私たちはよ 一般的に、文書と呼ばれる以下 ルートHTML要素またはタグ、HTMLがあり、 これは、2つを持っています 子供、頭と体。 そして今度は、ヘッドがタイトルを持っています。 そしてタイトルは、テキスト値を有します。 そして体は、同様に、テキスト値を有します。 だからと言って満足している場合 はい、あなたは、このHTMLを取ることができること など絵を​​描きます この、右辺 なぜなら、今の素敵なメンタルモデルであります 我々はJavaScriptを持っていることを、プログラミング 缶をブラウザの言語 実行し、あなたのために解釈し、 それは何ことが判明 私たちは、コード内で行うしようとしています これを操作するために開始されます メモリ内のツリー構造。 私たちは、構築する必要はありません メモリ内のツリー。 私たちは、ソートの行う必要はありません PSET-5形式のデータ構造 複雑。 素敵なことに、時にブラウザ、 下へのHTMLトップの解釈、 左または右、文字通りに起こっています 私たちのポインタと同等のものを手 自由のためのそのツリー全体へ。 これは、ハードワークのすべてを行います。 それは何のMozillaやApple そして他の人が私たちのために行っています。 JavaScriptで、我々はしようとしています 制御し、変更し、行うことができます 面白いことに そのツリー、そうでない場合は、既知の DOMやドキュメントオブジェクトモデルとして。 物事のどのような？ まあ、それはことが判明 JavaScriptで、あります この洗濯物のリスト 場所を取ることができるイベント。 そして、私たちは本当にそれを使用していません 0週目とPSET以来語 我々はスクラッチについて話しましたゼロ。 あなたのほとんどは、おそらく使用しませんでした あなたのスクラッチプロジェクト内のイベント。 しかし、あなたが思い出すかもしれません シンプルマルコポーロ 我々は、2つを持っていた例、 スプライト、マルコ、前記1。 リスニング時に、その人の他 そのイベントを聞いて、ポロ、と述べました。 ない場合は、お気軽に そこまで戻って振り返ります。 しかし、これは単にです 言う、あなたは一種の缶 これらの名前から推測 物事は、JavaScript、結局のところ、 私たちに耳を傾ける方法を与えるために起こっています マウスがダウンまたはマウスが上がっていくために またはダウンキーまたはキー行きます 上がっていくかをonSubmit ONSELECT または何かをonresizing。 換言すれば、任意の物理的作用 人間は、ブラウザで取ることができること あなたが毎日行うことを、あなたが書くことができます そのためのコードはこれらのイベントをリッスン し、適切な何かを。 たとえば、Googleマップを使用している場合、 あなたがクリックして移動する場合、何が起こります マウス、一般的に？ あなたがクリックしてドラッグした場合は？ うん？ その通りです。 マップが移動を開始します。 だから、一種の何見ることができます こっち、あそこです。 そして、どのようにGoogleはそれを実装していますか？ まあ、おそらく、彼らがしています これらのイベントのカップルを使用して、 リスナー、1 マウスのために聞く、言います ときに、ユーザーが物理的にそうdown-- 彼のトラックパッドまたは彼または彼女のマウスをプッシュ ダウン。 そして、我々は、探しています 動きのようなもの またはいくつかの他のイベントこと 私たちは、ドラッグをキャプチャすることができます。 そして、実際には、ドラッグして、この中でも同様です 可能なオプションのドットドットリストに点在しています。 だから、これは強力になるだろう ユーザへの応答を開始する方法 彼または彼女は実際にクリックする前であっても、 提出するよう明示的に何か。 しかし、我々は導入するつもりです そこに着くカップルのトピック。 しかし、最初に、しましょう​​移行 いくつかの実際のコードに。 だから私は行くつもりです 先にと、DOM-0を開きます これは非常に単純な例であり、 ここで私は単純にズームインするとき、その 私のために、ここで、この入力されています。 そして、私は先に行くと入力するつもりです 私の名前は「デビッド」[送信]をクリックします。 そして、ソートの安価ではあるが、私は 、と言うそのポップアップし、このプロンプトを持っています 「こんにちは、デビッド！ " だから、これは一種のです 私たちの "こんにちは、世界"のような 私たちはしばらく前にC言語でやったことと でもPHPで私は動的にしましたので、 私の名前を出力します。 私はここで誰か他の人の名前を行うことができます。 私は単純に、これを変更することができます 以下のような、ハンナは、[送信]をクリックします。 そして実際、少しポップアップ変更。 さて、ポップアップはの一つであります ウェブの最も乱用され特徴。 そして、実際には、後ろに 日のポップアップブロッカー 流行に入って来ますので、 いくつかのwebsite--に行くだろう おそらく疑問place-- それが突然、次に希望 あなたのスクリーンをpeppering開始 ポップアップの全体の束を持ちます。 だからこの能力がポップアップします ユーザーの前にある窓 特にされていません 人類によって好評。 あなたが見るだから、なぜです これは事を防ぎます、 これはちょうどこの全体のことは醜いになります。 だから我々は必要になるだろう ユーザにプロンプ​​トを表示するためのより良い方法。 しかし、今のところ、それは動作するようです。 だから直感的に、どのような ここで起こっているように見えますか？ 私が先に行くと、Submitをクリックして、 その後、何かが明らかに、起こっています。 しかし、起こったこと何が起こっていません 先週、私はクリックした任意の時間が送信しますか？ 画面上に何が起こるのではないのですか？ ごめんなさい？ リロードしてください。 URLは全く変化しませんでした。 私は、これはDOM-0と言いました 私は、DOM-0のままです。 通常、我々はいくつかの他に変更を取得したいです register.phpなどのようなURL、。 しかし、私は却下場合でも、 [OK]をクリックしてこの事、 URLことに気付きます 滞在は完全に置きます。 そして、実際に、私は少しだ場合 懐疑的な、私はChromeを開きましょう。 私は、[ネットワーク]タブを開いてみましょう。 そして、それは現時点では空白です注意してください。 私が先に行くとマリアを再送信してみましょう。 一切のネットワークトラフィックはありません。 だから、何のHTTPはありません。 だから確かに、私は、ソースコードを見れば this--のために私は、このウィンドウを閉じてみましょう そして、ソースの表示を参照してください。 面白い。 いくつかありますように見えます 新しいタグ、それらの間のスクリプト。 それでは、CS50内を見てみましょう 私は、ユーザーに送信された、まさにIDE。 だからここのを聞かせてis-- HTMLのみに焦点を当てています。 ここでは、DOM 0.htmlの下半分です。 そして、それはタイトルを持っていることがわかり、 headタグ、bodyタグ、formタグ。 しかし、何としてあなたに飛び出します 異なる、あなたは決してきていない場合は特に 任意のJavaScriptを自分で書かれました。 私は少しをスクロールしてみましょう ここで右に。 私は入力を持っています、 提出するための別の入力。 私は新しいの一種であるIDを、持っています。 しかし、我々は、CSSでこれを見ました。 間違いなく新しい他に何ですか？ うん？ ニース。 大丈夫。 だからここでは、onSubmit検証言います 従うように思われるものに気づきます。 これは属性であります HTML形式の命名法インチ その値は、ここで、この引用符で囲まれた文字列です。 そして、これは少し見えます 一見奇妙な。 これは、HTMLではありません。 これは、CSSではありません。 お察しのように、これは、JavaScriptのです。 だから、このに組み込まれているようです Webページには、挨拶と呼ばれ​​る関数です。 そして、私はちょうどそれを推測してい それは言葉だから、挨拶。 それは、オープン括弧を持っています 近い括弧、セミコロン。 C言語の関数のように見えます、 PHPの関数のように見えます。 そして実際、それがために起こっています JavaScriptの関数です。 それから私は、falseを返しますよ。 我々は戻ってくるだろう 一瞬でその。 しかし、ここでこの機能が定義されていますか？ まあ、私はスクロールアップしましょう ファイルの先頭に。 そして、それは長い行だにも関わらず、 それは比較的簡単です。 私はここでズームアウトしてみましょうと これらの4つのラインに焦点を当てます。 ただ、JavaScriptでそう PHP、あなたのような 「機能」、文字通り、単語を言います 関数の名前、 し、任意で括弧 この場合には、引数をarguments--ません。 、ノーリターン型がありません JavaScriptで、ちょうどPHPのような。 だから、Cよりも少し緩いです 中括弧、近くに中括弧を開きます。 JavaScriptのに組み込まれfunction--です ないことをお勧めfunction-- しかし、関数が呼び出され、警告 生活の中で、その唯一の目的 それはかなり醜いをプルアップすることです 私たちは一瞬前に見たことを促します。 さて、これは一口の一種です。 何が起きてる？ それではに始めましょう ここですべてを強調表示します。 それは警告する同じ議論です。 そして、何が起こっているのですか？ これはただの文字列のように見えます。 そして、それは、PHPとは異なりとは異なり、判明します Cには、JavaScriptで問題ではありません あなた単一引用符または二重引用符の場合。 それらは同等になるでしょう。 そして率直に言って、それだけです これらの日の人気 常にJavaScriptのプログラマのための 何らかの理由で単一引用符を使用しています。 それは実行するだけのことです。 しかし、我々は、同様に、二重引用符を使用することができます。 だから、プラスは、新キャラクターです。 しかし、あなたのものをやった人 これは前に、プラス何を意味するのでしょうか？ うん。 連結します。 だから我々は、PHPでこれを見ました。 ただドットがあります PHPの演算子こと 一緒に2つの文字列を連結します。 Cはこれを行うには、首の痛みでした。 たPSET 6からリコール 首の特別な痛み、 あなたが使用する必要があります STRCATのようなもの メモリを割り当てた後 スタックまたはヒープ上。 あなたはフープを介してジャンプしなければなりませんでした ちょうど2つの文字列を連結します。 JavaScriptでは、それは超簡単です。 ただ、それらの間のプラス演算子を使用します。 だから、複雑に見えます 事は、このように思わ 理由の終わりに この文字列全体、ちょうど私 感嘆符に連結します。 だから何をしてポップアップされた場合 「こんにちは、デビッド、 ""こんにちは、ハンナ、 " 「こんにちは、マリア」など、明らかに 両者の間にその中間のもの プラスは私に何へのアクセス権を与える必要がありますか？ 確かにそこに何がありますか。 うん。 だから私はここにふります 右、自分の名前を答えますか？ だから、自分の名前は、最終的にポップアップ 結果。だから、これは何を意味するのでしょうか？ まあ、私はそれに先に提案しました DOMいわゆる画像 この特別なルート要素を有しています 途中までトップの文書と呼ばれます。 そして今、それが判明し、それが起こっています 特別なグローバル変数であるために JavaScriptで、あるに内蔵 便利な機能の全体の束。 便利な機能の中にあります いずれかの子孫ノードを取得する機能。 これらの正方形または長方形または楕円 ただいわば、ツリー内のノードです。 だから、に組み込まれていることが判明 JavaScriptののドキュメントオブジェクト それ以外として知られている関数であり、 この方法は、そのはgetElementByIdのと呼ばれています。 呼び出すための構文 JavaScriptで関数 それは、オブジェクトまたはAの内側にあります 変数は、単にドット表記を使用することです。 そして、我々はC言語でこれを見ました どのような構造体の構文。 あなたは、一種の、PSET 7でこれを参照してください。 ソートの、あなたはCS50 ::クエリを見たとき。 PHPのコロンコロンは別です だ関数を呼び出す方法 いくつかのオブジェクトの内部。 しかし、今のJavaScriptで、 それだけでドットです。 それで、この関数、 きれいに十分な、種類の それはIDに​​よって要素を取得does--何と言います。 要素は、単に別の名前であります DOM内のタグまたはノードのため。 それでID「名前」で要素を取得 this--はここに私のHTMLであることを意味します。 そして、このHTMLに基づいて、どのような ノードまたはどのようなHTMLタグ私は プログラムで利きになるだろう document.getElementByIdを呼び出すこと？ うん、まさに。 私は入力を取得するつもりです IDが存在要素「名前」。 そこで具体的には、次のことができます この機能を考え、 与え方としてgetElementByIdを、 その特定のノードへのポインタをバックアップ ツリーインチ 我々はこれを描かれていません ツリーが、それは方法です それへのアクセスを取得します 長方形またはその長方形 一意のIDを経由して、それを識別することもできます。 さて、なぜこれが便利なのですか？ まあ、それは判明します あなたが得ている一度その そのノードから、その長方形 絵、それの内側そのノード、 今度は、の全体の束を持っています properties--キーと値のペア またはデータ、値と呼ばれているそのうちの1。 だから、文字通り、それはのようなものです 全部を説明するための一口。 しかし、一日の終わりに、 このすべては、あなたを与えるあるん ユーザーが入力した文字列 この階層的です。 しかし、私は好きではありません これらの事のカップル。 か、いくつかの好奇心はまだあります。 そのすべてが動作するように見えました。 なぜあなたは私が返されると思いますか 挨拶呼び出した後、偽？ これは、少し醜いです 私はそこに二つの文を持っています セミコロンで区切られています。 当ててみて。 私は削除した場合はfalseを返し、何 ただ本能的に、起こるかもしれませんか？ 申し訳ありませんが、もう一度言って？ Windowsのの束を開きます。 だから、潜在的に多分何か それが起こるように。 ほかに何か？ どこにリクエストを送信する可能性がありますか？ 同じページに移動します。 したがって、実際には、それはそれをです ここに近い答え、 でもとは違って、しかし 過去に、私はいませんでした action属性を指定し、 これは通常、私たちがしなければなりません。 デフォルトはありますが判明。 アクションを指定しない場合、 それは引用符を言ってようなものだ、引用終わり またはファイル自体の名前、 この場合、どのだろう DOM-0.htmlようです。 これは、だけの種類の推論されたのです か暗示。 そして、私はこれをしないそうであれば、のが気づくしましょう​​。 私はこれを保存してみましょう。 そして、私は偽のリターンを削除しました。 私はこれに戻りましょう 例と力がそれをリロードします。 そして、あなたは私が提案する見たことがあるかもしれませ これはCS50で倍の束を話し合います。 何が今まで演技した場合ファンキーで あなたが期待するようブラウザが動作していません、 しばしばあなたが保持したいと思います シフトして、[再読み込み]をクリックします。 それがリロードするすべてのファイルを強制します そして、ブラウザのローカルキャッシュを使用しません または今すぐ、私が先に行くとしましょう​​ように、 私のインスペクタ、[ネットワーク]タブを開きます。 私はクリックするつもりです ログを保存するので、私 それは行を削除する必要はありません 私は別の場所に離れて泡立て得れば。 私はここで先に行こうと アンディを入力し、[送信]をクリックします。 大丈夫。 予想通りそれはそうです。 それは「こんにちは、アンディ "と述べています。 私は、[OK]をクリックしてみましょう。 面白い。 、ページが変更されていることに注意してください 元のページにもかかわらず。 変更後のURLの種類に注意してください。 これは、疑問符を追加しました これは通常の指標であります 私たちは何かを提出しようとしたこと。 そして一番下に、 さらに、明示的に、 ここで、実際のHTTPリクエストは、 200の応答を得たもの ここに私を持ち帰りました。 だから、これはものではありません 我々は正しい、何をしたいですか？ 私はしたくないので ページ全体をリロードします。 私の代わりに戻りたいと思いました そう短絡などの偽 ブラウザのデフォルトの動作、どの ページを送信するために、当然のことながら、でした。 それでは、見てみましょう わずかに良い例。 これは、DOMのバージョン1です。 そして、以下の点に注意してください。 あなたが完全に理解しない場合、それは大丈夫です コー​​ドの行のすべて。 しかし、根本的に異なるものです この実装は？ 私はそれが動作します規定します 同じことは、同じことを行います。 私は明らかに異なって何をしましたか？ うん？ 聴衆：[聞こえません]。 DAVIDマラン：うん。 だから、関数が定義されていますdifferently-- フォームからの不在つまり、で、 そこまで行7--のか むしろ、ライン8--もはや 私はonSubmit検証属性を持っています。 前の例では、私はこれを持っていました。 そして私は、文字通り、ここに私のコードを書きました。 そして私はfalseを返すと述べました。 そして、それはこすっていなかった場合 あなたはまだ間違った方法、 それはに開始する必要があれば ただ、HTMLのように、のように、 我々はそれを一緒に付き合うようになったとき スタイル属性でCSSを使用しました、 それはほんの少しを得るために始めました 乱雑または少し間違っている感じ。 同様にここで、 あなたは、HTMLを取り始めます そしてその後、自動的に いくつかのJavaScriptコードをウンチ 引用符で囲まれた文字列の途中で、それはです 非常に保守するつもりはありません。 右？ 最初はさえ明らかではありません JavaScriptコードがどこにあるかに配置します。 だから、として本当にいいだろう よりよい設計の原則、 私たちのHTMLを完全に維持させます 私たちのJavaScriptのとは別。 だから私たちはきたもの、それを行うには ここで行わfollowing--です 単純にのみマークアップのHTM​​Lを使用しています。 だからバージョンこののいずれかで、すべての 私は、固有のIDを持つフォームである必要があります。 そしてここに至るまで、私が利用しています JavaScriptを特別な機能の 私が何を持っていることができます 無名関数と呼ばれます。 だから、もし私が呼び出すことが判明 「デモ」ののdocument.getElementById それはに私にポインタを与えるようなものです 私のツリーで、このノード、フォーム要素、 いわば。 今、私はちょうどから知っています HTMLのビットを知ります 今、私たちはいくつかのオンラインを読みました フォーム要素をサポートしていることを参照、 イベントlisteners--の全体の束で つまり、イベントの洗濯物のリスト 私たちは一瞬前に見たリスナー。 私は、ドキュメントを読んでから知っています それをonSubmitは有効なイベントであります フォーム要素のリスナー。 だから私はそれを知って一度、 私がすることは安全です そのノードを取得しfollowing-- ツリーから、フォーム要素、 そのいわゆるアクセスします onSubmit検証プロパティ。 だから、ドットはただ意味します これは、プロパティです その中の特別な値のように。 そして、どのようなデータ型の私は 明らかに、割り当て、 である、ONSUBMITします 内部に効果的変数 ツリー内のそのノードの？ それは、その構造体の内部フィールドです。 データ型は何ですか？ 機能、ええ。 だから、PHPはこれを持っていることが判明しました。 とにもかかわらず、我々 それについて言いませんでした、 Cはまた、関数ポインタを有しています 合格と機能を割り当てる機能 変数の値そのものとして。 そして、我々はつもりはありません Cに戻って退行します しかし、今のところ、それはことが判明 ここでは右側に、 それが少し見えるにもかかわらず、 ファンキー、これは、ちょっとブラウザ手段、 私に機能を与えます。 私も与える気にするつもりはありません それ名前私は文字通りだから のはそれを呼び出すせ割り当てるつもり この関数のアドレス すぐONSUBMITします。 つまり、ブラウザで、あなたがする必要はありません この関数が呼び出されているもの知っています。 あなただけ知っている必要があります ここで、それがメモリ内にあります。 そしてそれはちょうどすればよいです そこに等号を持っています そして、同様、このような名前を付ける気にしないように FOOまたは挨拶、または任意の他の単語。 そして今、これは単なる文体のものです。 私はこの中括弧を移動することができます the-- sorry--次の行に 私たちは通常、CS50を行うように。 しかし、JavaScriptで、それはです 実際文体共通 単に中括弧を保つために、 その最初の行の最初の1、。 しかし、以後、あります 何も面白いです。 そのオープン中括弧だけ 私の関数の開始を画定します。 機能は今 私き除いて、同一の リターン偽を含ま この関数の内部。 それはout--なりますので あなたが唯一の希望 読書からこれを知っています documentation-- あなたが機能を割り当てている場合に onSubmitハンドラにfalseを返し、 ブラウザだけ知っていて、同意します サーバーにフォームを送信することはありません。 それがtrueを返した場合は、提出します それ我々が表示されますの理由からサーバへ 一瞬に有用です。 そして、セミコロンの後 中括弧があるだけ 私は関数を定義終わりだことを意味します。 あなたは、すぐに呼び出すことを知っています あなたが提出を聞くよう。 大丈夫。 これはまだ間違いなく一種の醜いです。 だから我々は、より多くの何ができるのでしょうか？ まあ、それはその後に判明します last--あるバージョン2、 そして我々はこの時だけで一目よ。 作るの危険に 醜い、それが判明 ライブラリは、中があること 世界はjQueryのと呼ばれます。 jQueryはスーパーです 人気のJavaScriptライブラリ それはほとんどのように人気です いずれかが、それはありませんJavaScript-- 人々が混乱するのは珍しいです JavaScriptでjQueryの。 なぜ？ JavaScriptの自体は非常に持っています things--を行うための詳細な方法 document.getElementById、dadadadadada。 あなたは非常に終わります コー​​ドの長い行。 だからジョンルシという男が、 誰が実際に起動のために働きます これらの日まで、出てきました このライブラリの年で 前に多くの人々が貢献していること 変化するjQueryのと呼ばします 次のように構文。 そして、ちょうどそのように、あなたは、これを見てきました あなたは常にだろうから やっ場合は、これを参照してください。 Webベースの最終的なプロジェクト、 これは、同等の方法だろう 使用して、同じ機能を実現 この特別なライブラリ。 今、むしろいじめより 離れてその全体がそれ、 ちょうどいくつかのパターンを見てみましょう。 この構文は、持っているように見えます どのように多くの無名関数 または無名関数 またはAKAのラムダ関数？ 二、右？ そして、あなたが知っている、その場合でも、 あなたは、これに超快適じゃありません それという事実によって、 関数（）を2回は言います。 そして、それはことが判明 このコードは何をされdoing-- 私たちはオンラインリファレンスを参照してくださいよ、 最終的には、これでいくつかの助けのために。 これは、ちょうどその時あることを意味 文書は、準備ができています 先に行くと登録 次の関数 HTMLのためのハンドラを提出するように そのユニークなアイデアデモです要素。 そして、それが起こるとき、 次の2行のコードを呼び出します。 そして、これは、悲劇的に、より多くのです falseを返すと言っての詳細な方法。 そして、私たちはちょうどので、これを言及しました あなたは、このオンラインのようなコードが表示されます。 そして、それはひるむべき何もないです。 むしろ、何だことを覚えておきます JavaScriptで共通になるだろう このパラダイムです。 我々は今のところそれを表示する理由となるようです。 大丈夫。 だから、あまりにも住居なし その構文に多く、 上の任意の質問がありますされています これらの例やアイデア、これまで？ 大丈夫。 それでは、何か役に立つのためにこれを使ってみましょう。 ただ挨拶Webページを作ります、 そうので、すべてが興味深いものではありません ひどくがっかりさせるものではありません。 この1は、美しくなることはないだろう それは有益な何かをしようとしています。 私は私のディレクトリに戻りましょう ここに、たとえば、フォーム0.htmlを開きます。 だから、これは新入生であると仮定 学内スポーツ登録ページ 任意のCSSやデザインの任意の感覚なし。 そして、私は先に行くとしたいです パスワードを使用して、ここで登録します。 そして、私は条件に同意するつもりです 条件と登録]をクリックします。 そして今、ウェブサイトは、あなたがしている "と言います 登録！ （まあ、それは本当に。）」 すなわち、それは働いたように思えるが、 私が先に行くと、リロードを強制してみましょう。 そして、いや、そうしない、私は言わせて 私の実際の電子メールアドレスが必要です。 それとも、私たちはそこにメールを言うでしょう。 パスワードは12345、のようになります。 そして、私はちょうどので、 馬鹿は、今では123456789です。 そして、私はあなたのチェックボックスをオンにするつもりはありません。 うーん。 大丈夫。 だから、いくつかの機会があります ここでは改善のため。 そして、あなたは知っている、またはPSETに表示されます あなたがcode--を書くことができること7、 そして次のように記述する必要があります PHP--のコードは、守るために ユーザーのこれらの種類に対して、 エラー明確にユーザーのため 協力していません。 そして彼または彼女はあなたに与えられていないすべての あなたが望んでいた値、あるいはフォーマットで あなたがそれらを望んでいます。 だから、そのPSET 7で表示されます 我々は確かにいくつかを持つことができます 言う条件であれば 電子メールアドレスの場合 username@something.eduではありません、 私たちは可能性 申し訳ありませんと言うと、ユーザーに謝罪 あなたのような、多くはPSET 7にあるかもしれません。 それとも、彼らはそのボックスをチェックしていない場合は、 PHPで判明し、あなたがそれを検出することができ、 あまりにも。 そして、確かにパスワードの場合 register.phpのように一致しません PSET 7のために、あなたはそれを検出することができます。 しかし、それは痛みです その中で首今、彼らは要求します 私たちは、サーバーへのすべての道を行きます。 ユーザーは、エラーが通知されます。 そして、少なくとも、あなたは使用しない限り、 いくつかの手の込んだ技術、 今、彼らは戻って矢印をクリックする必要があります。 それは次のように、素晴らしいと思いません 多くのウェブサイト今日、 あなたはより多くの即時いた場合 フィードバック、即座に？ 言い換えれば、私はバージョンに行きましょう 何もきれいにならないようにしようとしているもの、。 しかし、それは、この機能を持っています。 マラン、12345、123456789、ありません ボックス、登録を確認する予定。 パスワードが一致しません。 だから、このポップアップはugly--であっても、 我々は最終的にこれを置き換えることができます ブートストラップのようなもので、 あなたはPSET 7で表示されますします 私は非常に人気library--です パスワードが一致しないことを検出します。 大丈夫。 まあ、私はユーザーとしてこれを修正しましょう​​。 私が先に行くと12345、12345を言ってみましょう。 まだ合意をチェックしていません。 あなたは、に同意する必要があります 規約と条件。 なぜ？ 我々は既に仮定した場合 方法があることを、 私たちはであなたを必要としました エラーを検出するためのpset 7 このような条件 サーバー側は、なぜ私がすべき また、JavaScriptでこれをやってわざわざ？ 引数には何 何を追加することに賛成 あなたはsome--として参照しようとしています 追加の複雑さがあります。 たぶん何も利点はありません。 それは何だろうか？ 聴衆：[聞こえません]。 DAVIDマラン：ああ、面白いです。 潜在的な攻撃。 だから必ず、あなたが処理していない場合 その偉大な誤ったユーザー入力、 それならば多分それはすべて良いです でも、あなたのサーバに到達しません。 私はそこに押し戻すことになると 言う、あなたはおそらくべき これらの問題の両方を解決します。 しかし、それは公正です。 ほかに何か？ 聴衆：[聞こえません]。 DAVIDマラン：うん。 私たちは前にも言ったように、このコードは、あります クライアント側で解釈されます。 これは、サーバーを気にしません、 これは意味し、そうでありません サーバの負荷や容量に影響を与えます。 そして今、少し古い私のために、 これは意味のある効果がありません 私は今一人のユーザーを持っているので。 しかし、あなたは任意のなら まともなサイズのウェブサイト、 特に最大の、Facebookのような、 より多くのあなたは人々をオフにしておくことができます サーバーのより良いです サーバーのため、当然のことながら、 RAMのみの限られた量を持っています、 ギガヘルツの有限数、 物事の有限数 それは、単位時間当たりに行うことができます。 だから、より多くの人々がである場合 世界は、あなたのサーバーを打ちます 偶然にログイン 間違って、ちょうど同様にあなたの場合 あなたのサーバーからその負荷を維持することができます。 さらに、特に携帯電話で あなたがしている場合device-- my.harvardにログインまたは エールのNETIDなど、 多くのこの待ち時間があります それが取ることにより、そのようなウェブサイト、 以下のような、気の1秒か2秒時々。 そして、私の神、あなたが間違えた場合は、 その後、あなたが戻ってヒットし、それをやり直す必要があります。 だから、特に、待ち時間ありま​​す 遅いネットワーク接続で。 しかし、JavaScriptの、なぜなら それは、クライアント上で実行 そして前後に移動する必要がありません。 潜在的に遅いインターネット上で 接続、あなたが得ることができます ほぼ瞬時にフィードバック。 それでは、これを見てみましょう。 私は、フォーム-0を開くしようと ここにHTMLを見てください。 そして、ちょうど何が起こっているのか見てみましょう。 これは、その形式です アクションはregister.phpです。 私はちょうどので、取得使用しています 私は、URLを見ることができます。 しかし、パスワードを、私たちは確実にしたいと思います 実際に投稿するために、これを変更します。 ここではテキストタイプの入力フィールドです。 ここで別の入力です タイプのパスワードのフィールド。 あなたが見たことがない場合はここで、です、 型チェックボックスの入力。 しかし、誰JavaScriptはありません ここ何。 これは、単なるHTMLです register.phpに進みます。 しかし、バージョン1で、どこ これらのポップアップを得るために始めました、 それでは、ここで実際に何が起こるか見てみましょう。 バージョン1では、どのような 私は私をsee--するつもりです 私は十分に失速と考えていました 十分な言葉で、私は走りました。 バージョンが存在選ぶ - で私達は行きます。 バージョン1では、following--に気付きます そして最良の実装ではありません、 それは私の最初のです。 以下のことに注意してください フォーム、私はスクリプトタグを持っています。 スクリプトタグは、意味します ここでちょっと、ブラウザ、 いくつかのコードが入って来、 一般的には、JavaScript。 そして今、私がやっているものに気づきます。 line--上の私がやっとでき 、それが言う、it--ライン32を読みます そう私を与えるform-- VAR フォームと呼ばれる変数。 そしてdocument.getElementIdを取得 「登録」の これは何ですか？ まあ、私はここまで巻き戻してみましょう。 予告、ああ、私は、フォーム要素を与えました 任意であるが、記述のアイデア 登録。 だから、これは私にその変数を提供します 私は、そのノードをつかむことができます、 フォームと呼ばれる木でその長方形。 form.onsubmit手段、ちょっとブラウザ、 イベントリスナーを登録します このフォームの。 このフォームがあるつまり、 提出は、次のコードを実行します。 これは、名前のために必要はありません なぜあなたは名前を知っている必要がありますか？ あなただけ知っている必要があります エルゴ、何を実行します それは、匿名やラムダ関数です。 そして、その関数であります ここではこれらの行のすべて。 そして今、も、あなたも、正直に言うと これまでにJavaScriptを書かれていない可能性があります 前、それだけで、CとPHPロジックです。 だからform.email.value場合== "" - そう電子メールのフィールドが空白の場合、 あなたがしなければならない」とのユーザーで叫びます あなたのメールアドレスを提供します。」 それ以外の場合form.password.value ユーザーに空白気合であり、 "あなたはあなたのパスワードを入力する必要があります。」 さらに興味深いことに、論理的に、 form.password.valueがない場合 同じform.confirmation.value-- 確認はどこから来ましたの？ 私は巻き戻してみましょう。 まあ、私はこの入力と呼ばれます フィールドここでパスワードを入力します。 そして、私はここで確認この1と呼ばれます。 私はそれを求めている可能性が パスワード2または何か他のもの。 私は論理的にチェックしています これらの二つは同じであること。 これは氏ブールであることが判明しElse-- ブール値は、チェックボックスをagain--。 だから私はと言えば、感嘆point-- form.agreement.checkedない場合は、 同様に、ユーザーで叫びます。 だから、あなたが参照してくださいよ、この構文は次のとおりです。 JavaScriptで非常に一般的な、 どこでこのドット表記を持っています。 ここにオブジェクトを開始します。 あなたはへのより深いで潜ります パスワードのようなプロパティ。 そして、あなたは、その実際の値を取得。 そして再び、ここに入力されます。 ここでは名前のパスワードです。 そして、その値が何であれ 人間が実際に入力しました。 これらのすべてでそう ケースは、私はfalseを返されました。 ていない場合でも、私はtrueを返します。 そして今、我々はを参照してください。 魅力的な使用 あなたはにfalseを返すだろう ユーザーのは、何をして停止 そして彼または彼女が選ぶ作ります 再びか、もう一度入力します。 そうでなければ、trueを返します。 そして、私は1をご紹介しましょう この他の変種だけ それらのいくつかの理解をシードします。 さて、このバージョン2で、フォーム2-- 私は手を振ってそれをやります。 これは、好奇心のためのものであり、 jQueryのバージョン、 することができますあなたの人々 その特定のライブラリに手を出します。 しかし、それでは、start--とご質問させて？ 私はしばらくの間、一時停止してみましょうので、 それは速く、たくさんあり​​ました。 しかし、ここで素敵なものが全てということです コー​​ドのほとんど同じです。 新しいものは、DOMで何ですか？ これらの長方形は何ですか？ これらのノードは何ですか？ 匿名関数とは何ですか？ イベントハンドラとは何ですか？ しかし、ありがたいことに、それのほとんどはちょうどです 週ゼロ、たとえば、より完全な円。 大丈夫。 だから、もう少し面白いこと？ さて、最初にすべての、私を手放します 先とGoogleマップを開きます。 そして、あなたはそのために気付くでしょう 瞬間、一瞬に、 ときに何が起こるか気づきます 私は十分に速くクリックします。 そして、ハーバード大学のこの接続はそうです あなたが本当にそれに気づかないことが速いです。 しかし、あなたは一種の種の何を見ています 私はクリックして、本当に速いドラッグすると？ あなたがオンラインで見てのもの、 あなたは0.5倍の速度にこれを遅くする場合は、 あなたはこの良いを見ることができます。 何が起こっていました 私はクリックしてドラッグする前に？ 私はさせて頂きhere--してみましょう 90210のような何か他のもの、。 のは、遠くに行きましょう。 それも、本当に速かったです。 どのようにディズニーワールドはどうですか？ そうしよう。 OK。 あなたは一瞬のために何を見たのですか？ ただ、正方形のような、右？ タイルのためのプレースホルダ？ さて、ここで何が起こっているのですか？ Googleマップは、良い例です AJAXと呼ばれるこの技術。 我々が開始しますどこで、これは 特にではJavaScriptを使用します 魅力的な方法です。 戻る日であったが、 マップクエストと呼ばれるこのウェブサイト。 そして、私が撮影している必要があります 1990年代からこのスクリーンショット、 どこにあなたがしたい場合 地図上ここまで見て、 あなたは文字通りの矢印をクリックします、 あなたを示した上部のアップ マップの異なる正方形。 あなたが左に移動したい場合は、 あなたが示された矢印をクリックしました マップの異なる正方形。 そして、いくつかのウェブサイトは、今日でも、これを行います。 しかし、たとえマップクエストは得ています Googleマップのような、より良いです。 代わりに、これらは良いものです 日は、AJAXを使用するWebサイトです。 AJAX--そうでないとして知られています 非同期JavaScriptとXML、 これというのがちょうど空想の方法です 技術やテクニックこと JavaScriptを使用してブラウザを許可します 追加のHTTP要求を行うことが ページの後にロードされています。 だから、これは何を意味するのでしょうか？ まあ、それは親切になります Gmailで迷惑なの もしあなたが望んでいたすべての時間 メールをチェックするために、 あなたは文字通りコントロール-Rまたはヒットしていました コマンド-Rまたはリロードボタンをクリックします 全体くそページがリロードでしょう。 右？ それはホワイトフラッシュだろう おそらく秒。 あなたは愚かなプログレスバーを参照してくださいだろう。 あなたは新しいしている場合そして、ちょうど確認してください メール、ウェブページ全体およびURL あなたがリロードしなければならないでね。 しかし、それはGmailで何が起こるかではありません。 右？ あなたは、新しい電子メールでを取得すると Gmailでは、何が画面になりますか？ それはちょうど、現れますか？ それはちょうど魔法のように表示されます。 テーブルに新しい行として。 それが実際に関与 複雑のまともな量。 実際には、あなたがこの木を考える場合、 これは、ここで簡単なものであっても、 Gmail--と私は見ているだろう コー​​ドでsure--されるように おそらく、多分、HTMLテーブルを持っていますか それがレンダリング順不同リスト あなたの受信トレイの電子メールの各として。 だから、あなたがこれを想像した場合 あなたがしているメモリ内のツリーがあります ソートの種類に見えるのGmailを使用して、 このように、Googleはoohの、実現したときに、 あなたが新しいメールを持って、それはしていません ツリー全体を再構築したいです。 むしろ、それは、ノードを見つけたいです あなたの受信トレイを表すツリー そしてちょうど新しいノードを挿入します。 あなたPSET 5、に非常に非常に似て ハッシュテーブルにノードを挿入しなければなりませんでした、 同様にGoogleは、ビアはありません それが書かれたJavaScriptコード、 このツリーを横断、どこに把握 その受信ボックスは、ウィンドウの一部であり、 して、新しい行を挿入します。 また、新しい行が1つだけ意味します ツリー内の新しいノード以上。 そしてそうAJAXは、この技術であり、 それはまさにそれを可能にします。 URLを訪問した後、 しかし、それは長いクレイジー、 そして、ページが持っていたら、 あなたはまだ、することができますロードされて からより多くのデータをつかみます それはだかどうかinternet-- 電子メールまたはmap--のタイル 舞台裏でそれをつかみます し、ページに挿入 人間は本当にしないように それを待たなければなりません。 Facebookのメッセンジャーは、同じように動作します。 他websites--任意の数 ああ、実際には、これでも。 私は、これは、率直に言って、一種のですが、意味します 迷惑な機能、これらの日。 私はこのcats--の検索を開始した場合 恐ろしいユーザーエクスペリエンスの一種です。 それはちょうど私のために検索を開始します。 まあそれは何をしているのですか？ URLが実際に変更されていません 私はタイピングを開始して以来。 しかし、何が全体で起こっています 興味深いうーん、OK wire--。 何が全体で起こっています ワイヤは、ここだけの奇妙取得します。 OK。 だから私は先に行くと点検してみましょう 要素とネットワーク]タブに移動します これを作ってみます 技術的、猫はあまり。 私は、文字通り、猫を入力すると 何が起こっていますかand-- per--私はそれをクリックするつもりはありません。 大丈夫。 だからダウンここでは、すべての何が起こっているのか 私は明らかに、文字を入力する時？ 低レベル、気に入りましたか？ 何がそれらのそれぞれに起こっています 私は私のキーボードで文字を入力していますか？ うん？ 聴衆：[聞こえません]。 DAVIDマラン：その通り。 これらの文字の各々は Googleは、一度に一つに行きます。 彼らは文字列を構築しています 表し、そのサーバー上の 私はこれまでに入力したすべてのもの。 I型とするたびに 別の文字、彼ら 彼らの秘密のソースを使用 アルゴリズムを検索し、見つけ出します、 彼はこの猫のページを意味しています この猫のページなどまたは？ だから、ある意味で、それは私を提供します その中でより良い経験私もありません 私の考えを完了する必要があります。 そして実際、それは便利です 事、一般的にはオートコンプリート。 そのアルゴリズムは十分に良好である場合 私の検索は十分に明白である場合には、 私は、全体の単語を入力する必要はありません。 彼らは私に何を伝えるつもりです 私は実際にを探していますされています。 そこでGoogleはインスタント呼ぶもの 検索はただ、AJAXを使用しています 要求にそれらを可能にするコードを使用して Webブラウザ経由で追加コンテンツ これを使用して舞台裏 新しい言語は、JavaScript。 だから我々は、左のカップルの分を持っています。 そして、私は私の友人を呼び出してみましょう ステージ上にアップコルトン、 それが見えたので、 特に楽しい最後の時間 技術を導入します あなたのいくつかのこと 関心を表明しています 最終的なプロジェクトのためのインチ 我々は、それが持って楽しいだろうと思いました ボランティア、しかし、今日まで あなたに加えを表示します ええyou--を可能にするこの、 私が最初にこの手を見ました。 アップさあ。 非常によくやりました。 よくやった。 私はこれを上のプロジェクトするつもりです 一瞬の画面。 皆のためのあなたの名前は何ですか？ EFA：私はEFAです。 DAVIDマラン：ETHA？ EFA：EFA。 DAVIDマラン：EFA？ EFA：うん。 DAVIDマラン：あなたを見てニース。 大丈夫。 私はこれの準備ができて取得してみましょう。 にかけて、さあ ここコルトンと真ん中。 コルトンは彼の手に持っているもの 今日は、リモートコントロールです。 そういうだけでそこに立ってより 三次元の世界を見て回っています コルトンがしたように、今、EFAができます 実際に、上がっていくことで歩き回ります 下、左、右など 任天堂やXboxのコントローラ。 EFA：私は舞台から落ちるつもりです。 DAVIDマラン：私は意志 こっちおおよそ立っています。 しかし、それは危険です。 OK。 だから先に行くと、それらを置きます。 私は先に行ってみようと ここで画面に切り替えます。 私はライトを暗くしてみましょう。 そしてコルトンは、私を聞かせて あなたの隣のスタンドを付属しています。 あなたはここで説明しますか マイクと私たちは何をやっていますか？ どうぞ。 COLTON：確かに。 だから今、私たちはしています オクルスをロードし、 私はoperating--が動作していないと思います システムが、メインプログラム、 あなたはすべてのゲームにアクセスすることができますし、 あなたのライブラリーにあるアプリ。 だから、今、それは言う必要があります 開始するにはタッチパッドをタップします。 タッチパッドが上になるだろう ヘッドセットの右側。 だから先に行くとtap-- EFA：ああ、男。 DAVIDマラン：うん、そこに行きます。 EFAが見ている品質 はるかに高い品質があります。 これはここだけのWi-Fiです。 COLTON：だから何をしています やりたいつもり 上の方を見ています 画面の右。 うん、非常に右上にそのゲーム。 そして、あなたが選択しているとき それは、再びタッチパッドをタップします。 私はそのDreadhallsだと思います。 そしてここにしましょう​​、ここA--です 私はあなたのために眼鏡を保持します。 だから、僕は彼にコントローラを与えました。 だから今、彼はゲームをコントロールすることができます。 彼はそのように周りやものに移動することができます。 だから先に行くとトップに見上げます。 あなたは新しいゲームが表示されます。 だから先に行くと、あなたはそれを行うことができます。 今、あなたがコントロールすることができるはずです コントローラと自分自身、 だけでなく、できるだけ早く ゲームがここにロードします。 これは少し怖いかもしれません。 EFA：今、あなたは私に言います。 OK。 COLTON：すべての権利。 だから、あなたの周りに移動することができますことを確認します。 OK。 あなたの周りに移動することができます。 パーフェクト。 あなたがダウンして見えるのであれば、あなたは、地図を持っています。 あなたがどこにあるか地図を示しています。 あなたは部屋を見て回ることができます。 あなたは完全に好転させることができます。 うん、まさに。 振り向く。 だからあなたの左に見えます。 私はあなたができる何かがあると思います 客室内にバレルに拾います。 EFA：どのように私は入手できますか 邪魔にならないようにマッピングしますか？ コルトン：ルックアップします。 ただ見上げます。 大丈夫。 そこに行きます。 今先に行くと、ちょうど好転させます。 だからあなたの左に遠くに見えます。 左に移動してください。 左を見てください。 立ち止まるな。 うん。 EFA：ああ、その方法。 COLTON：う​​ん。 コントローラとそれに向かって歩きます。 そこに行きます。 今ではそれを拾うと言うべきです。 そこに行きます。 それを拾います。 大丈夫。 さて、この部屋の外に出てみましょう。 先に行くと、そのドアに歩いてください。 だから、それが言うhold--するつもりです オープンそれを強制するためにボタンを押したままにします。 だから先に行くと、ボタンを押したままにします。 うん、それは開いて強制的に。 大丈夫。 よくやった。 今、私たちは部屋を出て歩いています。 だから私は残りを任せるつもりです あなたに、あなたが見つけるものを参照してください。 EFA：私は暗い部屋でつもりはありません。 ああ、待ってください。 今、私は暗い廊下を行くことがありますか？ [OK]を、私は[聞こえない]バックつもりです。 COLTON：すべての権利。 いくつかのより多くの項目をピックアップします。 いくつかのコインのように見えます。 それはロックピックです。 あなたが見つけた場合は、ロックされています ドアは、あなたはそれを使用することができます。 怖いのか？ EFA：まだです。 COLTON：[OK]をクリックします。 ええPretend--。 ちょうどあなたがしているふり 実際にそこに立って。 そして、あなたはaround--オンにした場合 あなたはそれに慣れるようになってきました。 しかし、それは理にかなっています。 DAVIDマラン：そしてEFAはし続けます 私たちは一日これを行う可能性があるので、遊びます、 ここでは、すべてのチップつま先アウトすることができます。 しかし、我々は他の二つのペアを持っています、 あなたが出てくるとプレイしたい場合。 そうでなければ、我々が表示されます 来週の水曜日にあなた。 今日の私たちのボランティアに感謝します。 [拍手] [MUSIC - 「となりのサインフェルドのテーマ」] SPEAKER 1：まあ、私は 新しいPLを置くことにマウントします。 私はちょうどOLPF--を変更しました SPEAKER 2：だから何 正確にあなたがやっていますか？ SPEAKER 1：まあ、一人一these-- ここで、私はここにあなたに、このいずれかをお見せします。 あなたは右のそれをここに見ることができます。 SPEAKER 3：私はこれらとの良好だと思います。 あなたはいくつかの詳細をしたいですか？ スピーカ4：いいえ、私は良いですよ。 [聞こえません]。 SPEAKER 3：いいえ、[聞こえません]。 いくつかを持っています。 SPEAKER 1：別の色。 SPEAKER 2：[OK]をクリックします。 SPEAKER 1：だから、最終的にどのようなこと それは色を調整しているんof--