デイビット·J·マラン：すべての権利、 これは、ここでミョーアームです バンドは、我々のカップル CS50最終プロジェクトのために持っている。 そして、それは我々がキューに入れられたデモだった 事前にどこに本質的であなたアップ ここで、このかなりタイトなアームバンドアップ あなたの筋肉の動きに耳を傾け その後、ソフトウェアでマッピングされていること こっちコルトンのラップトップへ iTunesのを持っていたし、その 歌はすでにキューに入れ。 むしろ私はこれをデモしより、 コルトンは、ラボにされています 明らかにすべての週は、デモンストレーションを取得 1勇敢なボランティアの準備ができて。 誰かが来るしたい場合 up--に最初に手を見た。 アップさあ。 [00:01:09] わかりました。 そして、あなたの名前は何ですか？ [00:01:13] 聴衆：ええと、マリア。 [00:01:14] デイビット·J·マラン：マリア、あなたを見て素敵。 こっちに来る。 私はコルトンにあなたを紹介しましょう​​。 コルトンは、これはマリアである。 [00:01:21] COLTON：こんにちは、はじめまして。 [00:01:23] デイビット·J·マラン：すべて 右、私たちはね、1ステップ あなたが入れているつもり このあなたの前腕に上 それはかなりのように、 あなたの肘近くまでタイト。 そしてその間、さんが持っているましょう 私たちのGoogleのガラスの上に置く 私たちは今日のテクノロジーをミックスします。 [00:01:33] COLTON：まず私たちがする必要があります 物事にこれをフック。 [00:01:36] デイビット·J·マラン：OK。 実際に、のようにあなたの腕を置くましょう できるだけこのケーブルに近い 私たちはまずそれを同期できるようにします。 [00:01:41] COLTON：これをやってみましょう。 [00:01:42] デイビット·J·マラン：そして一方、そう 誰もが近い一見を得ることができることを、 私たちはアンドリューのカメラを投げるだろう そこに、画面上のアップ。 だから我々はのUSBケーブルを持っている マリアの腕章に差し込まれている。 そして私はコルトンの画面を投げてみましょう 次回プロジェクタアップ。 [00:02:00] だから、コルトンは、デバイスを登録されている 今、このケーブルに接続されミョーとして。 そして今、どのようなマリアさん 一瞬何をするつもり 実際にウォークスルーされる 較正ステップ およびソフトウェアを教える どのように彼女の筋肉が反応する 彼女が作るときに、特定の事前定義された ソフトウェアは理解してジェスチャー。 あなたがに行きたい場合 スクリーンの正面。 [OK]を、努力を続ける。 [00:02:30] コルトン：次のように移動します。 そして、そのような。 そして右にすべての方法。 戻る。 [00:02:35] デイビット·J·マラン：OK。 異なる視点。 それはあなたではありません。 それは私たちです。 [00:02:40] MARIA：OK。 デイビット·J·マラン：いいえ。 それでは、より高いアップそれはですので、それを移動しましょう あなたの肘に近い、あるいはより厳しい。 わかりました。 [00:02:52] ここに私達は行く。 これはCS52Xためのよいタイミングです。 私たちはそこに行く。 [00:02:57] 非常に素晴らしい。 [OK]をクリックします。 小指、親指。 [00:03:02] 非常に素晴らしい。 あなたの指を広げた。 グッド。 右の波。 それは不思議見せている 左hand--付きます [00:03:17] COLTON：ええ、それは奇妙だ。 デイビット·J·マラン：への波 右前方に移動。 スキップしたり、次のために早送り。 つまり、Waveは右OKです。 [00:03:25] MARIA：私は待ってdon't--。 [00:03:26] デイビット·J·マラン：いくつかの助けが必要ですか？ [00:03:28] COLTON：だからあなたはこのようになるだろう。 MARIA：それは回しだ 他の事、しかし。 COLTON：それはある。 デイビット·J·マラン：うん、私は知らない なぜそれがあなたにleftieを見せている。 COLTON：なぜtry--はありません ただ、このように起こってみてください。 [00:03:38] デイビット·J·マラン：いいえ？ たぶんあなたの腕に達する 少しまっすぐ出 そして、このような、それがより急峻にする。 うん、[OK]を、来る。 [00:03:48] MARIA：ごめんなさい。 デイビット·J·マラン：それはあなたのせいではありません。 COLTON：それは結構です。 デイビット·J·マラン：すべての権利。 Well-- [00:03:56] MARIA：私たちは、その後、これをスキップするべきか？ デイビット·J·マラン：はい、してみましょう フックを離れてみましょう。 誰もがやりたいのであれば この刃先を使用して最終的なプロジェクト ハードウェア、それだけかもしれない実現 慣れる少しを取る。 そしてthis--現実はこれです 実際には非常にエッジを出血している。 [00:04:10] これはと呼ばれるものである 開発者キット、どの 本質的に、プレリリースであることを意味する 人々は正確に行うことができるように それと戦うthis--、フィギュア 人の身体がどのように働くか出 技術と。 だから、あなたがしたい場合 その後、講演の後、 私たちは、あなたが来るようにすることができ、 それを別の刺しを取る。 しかし、そうでなければ、拍手、もし 我々は、最大に来てマリアのため、可能性があります。 [00:04:26] MARIA：ありがとう。 [00:04:28] デイビット·J·マラン：ありがとうございます。 我々は、このにハングアップしますが、我々は与えるだろう you--どのようにここでのストレスボールはどうですか？ ああ、and-- if--うん、ありがとう。 わかりました。 好奇心のためにそう、あなただったら 音の選択肢に不慣れ 私たちはそこに作られ、その 以前、驚くべきテレビ あなたは絶対にすべきことを示している どんちゃん騒ぎウォッチングNetflixの上にある ここにこの1である。 [00:04:51] SPEAKER 1：ご列席の皆様、 ジョシュというマジシャン。 [00:05:04] デイビット·J·マラン：そしてどうやら、それはだ 今講義中に私をテキストに事。 私はマリアと言われています 昨日誕生日を迎えた。 からとても幸せな誕生日 マリアへのCS50も同様。 [00:05:18] だから、最近の月に読んだことがある そのここでこの紳士、スティーブ 実際にあったバルマー氏、 大学で1977のクラス、 最近のMicrosoftのために引退した。 彼は、ここに学部だった その後数年後に で自分自身を発見 スタンフォードビジネススクール 彼は電話を受けたとき 彼の友人から呼び出す 廊下を住んでいた ここでハーバード大学の彼から。 その友人の名前はビルだった ゲート、同時に、 彼があるとスティーブを募集しようとしていた 最初のビジネスパーソン、本当に、 小さな会社名Microsoftで。 [00:05:45] 長い話を短く、スティーブ 最終的にオーバー勝たれた、 ときにMicrosoftに参加しました わずか30人の従業員を持っていた。 と時間によって彼 ごく最近引退し、 同社は、100,000人の従業員を持っていた 過去数年にわたる。 そしてそうベルジェとして知られているウェブサイト ビデオでこのトリビュートを準備 我々がしようと思いましたことを あなたを与えるその共有 どれだけのエネルギースティーブ感 彼が与えるあらゆるプレゼンテーションにもたらす。 [ビデオ再生] -Microsoftは4番目の子のようなものだ。 子どもたちは、家を出るん。 この場合、私は推測する 私は家を残している。 ビル·ねえ、whazzap？ [00:06:23] -Wazzap？ [00:06:24] -Hey、wazzap？ 私たちが与えられてきた 莫大な機会。 とビルは私たちにその機会を与えた。 私はそのためビルに感謝したいと思います。 私はあなたがあまりにもしたいと思います。 革新のペース 遅くするつもりはない。 [00:06:42] それは、より速く、より速く得るために起こっている。 いくつかの競合他社があるかもしれません それは残念ながら解消される！ [00:06:54] 私はこの会社が大好きです。 うん！ 私は、PC、と私は、この会社が大好き！ [00:07:08] 開発者、開発者、開発者、 開発者、開発者、開発者、 開発者は、開発者。 うん！ Web開発者！ [00:07:19] Web開発者！ Web開発者！ あなたは何を誰に耳を傾ける 追加料金なしで取得！ [00:07:28] MS-DOSの幹部、任命 カレンダー、カードパイル、ノートパッド、 クロック、コントロールパネル。 そして、あなたはそれを信じることができますか？ Reversie！ [00:07:35] CDに焼く！ MSNにそれらを投稿！ あなたは友人にそれらを郵送！ [00:07:40] ワンクリックですべての！ 一つマイクロソフト、1戦略、1 team-- 、プロフェッショナルで、規律、集中 そして私たちはそのすべての専門家。 私は古い映画からのラインを使用してみましょう。 [00:07:52] 関係はサメのようなものです。 彼らは前進または彼らが死ぬ。 私は実際にハイテクを考える 会社は同じである。 [00:08:01] [ENDビデオ再生] デイビット·J·マラン：だから我々はに非常に満足している スティーブがご参加されることを発表 ここCS50内で次の水曜日 ここでいつもの場所と時間。 スペースはおそらく制限されます。 だから、個人的に私たちをしてください参加する その後すぐに頭今日か cs50.harvard.edu/registerへ。 [00:08:22] そして、我々はによってフォローアップします 火曜日には、スポットを確認した。 その隣のを楽しみにしています CS50で講義中の水曜日。 さて、他のニュースでは、私はに起こった ちょうどクリムゾンでこれに出くわす 先日。 [00:08:34] これは、CS50のスタッフの一人と判明 CS50の学生の少なくとも一つ 現在UCのために実行されている 社長と副社長、 戻って私をもたらしたもの 私自身の日に戻って とき、私は無残にUC選挙を失った。 しかし、銀の裏地 その中で私はいつもある ということで話をする 私の一つは確信している 私は失われた多くの理由 選挙は完全な欠如だった 人前で話すの才能の。 そしてそうはっきり言って、それを 私を運転し、その経験 私は私の後輩年は、実際に署名すると思う これハーバードコンピュータ学会、用アップ グループは、キャンパス内にある 様々な技術的協議を保持している や他のもの。 そして、私は彼らの教えを引き継いだ したがって、セミナーや 機会あり、aがあった 素晴らしい機会、 まさにこの作業を開始します。 しかし、また、私は機会がありました この経験の間 自分自身にすべてのHTMLを教えるため。 そして私はによって昨晩procrastinated HTMLベースのウェブサイトを通じて探し 私は私のために、1997年、98年と同様で作られ ここでこのようになりますキャンペーン。 私は知っている。 [00:09:29] Because--そしてもちろん、予告 1998年のこの驚くべき設計上の決定 またはその他もろもろ。 あなたが欲しい最初のユーザー あなたのウェブサイトを訪問する際に行うには ちょうど別のリンクをクリックする必要があるとしている 僧侶とここにあなたのウェブサイトを入力する どこに包ま​​カーテンのように背後に どうやら私のキャンペーンのプラットフォームがあった。 そして、これはあなたが買ってあげるすべてです 今日はちょうどスクリーンショットです。 しかし、私は、同じように、通って読んでいた キャンペーンポスターの最後の夜 と私のプラットフォーム。 [00:09:50] そして、私は当時とても怒っていた。 私のプラットフォームは、それが面白かったwas--。 だから私はそれ以来、落ち着いてきました。 しかし、いつか、私は再び実行され、 このオフ時間、うまくいけばより良い。 [00:10:03] だから、HTML、私が作ったもので、その言語 そのあなたはすぐに多くmore--を作ってあげるin-- 私たちがしてきたものです 後半のの話 そして大部分は今当たり前の服用 私たちは他の言語に移ってきたこと。 しかし、ここでちょっとポーズ聞かせて 文脈でこれらの事のいくつかを置く。 だから、文章で、HTMLは何ですか？ [00:10:18] または、何のために使用されますか？ 誰ですか？ はい。 [00:10:20] 読者：ウェブサイトのためのマークアップ。 デイビット·J·マラン：Webサイトのマークアップ。 だから、そのマークアップ言語です あなたがWebページを構築することができます。 ヘッダーはここを上っていき、タイトル ここに、体がここに行く。 これはこれは、ボールド体である 細部のその種italics--。 [00:10:33] [OK]を、良い。 だから、CSSはyou--と私をすることができます そこにいくつかの自由を取った 大胆な向きやイタリック体であるため それはこれで実装され方が良いでしょう。 CSSは何をis--？ 文章で言う。 誰でも全然。 うん。 [00:10:46] 聴衆：装飾と それを設計する方法のようなもの、。 デイビット·J·マラン：OK、良い。 あなたを許す装飾 それを設計したり、それを型にはめるために 太字のようなものを持つと イタリックや色と、より細かい 要素の細かいポジショニング。 それは一種のあなたが物事取ることができます ラストマイルであれば、例えばその結果、 Pset7で、あなたに気づいたかもしれません ポートフォリオページは、この時点でなら すでにデフォルトのテーブル、その ユーザーの保有株式を表示するように作る そして現金はおそらくかなり恐ろしい見えます に空白を入れず、デフォルトで。 ぎゅうぎゅう詰めのすべての種類 一緒に行と列に。 [00:11:18] さて、少しで CSS、あなたが実現するかもしれないとして、 あなたが実際にそれを微調整し、それを作ることができます ずっと身近でずっと何か きれいを見て。 だから、CSSはについてです ウェブサイトの様式化。 しかし、その後、我々はまだ別のものを導入 私たちは何をすことができ、言語、PHP、？ [00:11:36] ちょうど何をやってみましょう？ 誰でも。 を超えた冒険になった 最初のカップル行。 うん。 [00:11:40] 読者：動的コンテンツを生成します。 デイビット·J·マラン：パーフェクト。 動的コンテンツを生成します。 そして、あなたはでこれを行うことができます 任意の数の言語。 それはだから、私たちは、PHPを使用するために起こる C構文に非常に類似した部分で。 [00:11:50] しかし、PHPは、まさにその作業を行います。 それはあなたが動的に出力を生成することができます。 そして、その出力の一部が考えられ HTMLは、我々としては、一般的に行ってきた。 それはだから、それは、またです プログラミング言語は、ある 経由メカニズム 我々はデータベースに話すことができます。 [00:12:03] そして、私たちはへの照会を行うことができます ヤフーのような他のサーバー そしてプログラムで何でもする 本当にあなたがそうでないかもしれない 行うためにコンピュータを強制したいと思います。 だから、PHPは私たちが始めることができます コンテンツを動的に出力する。 したがって、この論理では、私は持っていなかった バック1998年にダイナミックなウェブサイト。 [00:12:16] それはちょうど、静的なWebページだった。 私のコンテンツがで変更しなければならなかった 手動でgeditのか、いくつかの同等の。 しかし、PHPは私たちが使用したものであるか、 むしろ、使用している可能性があり、 のような何かのために 1年生のIMSウェブサイト、どの 登録を取ることになっていたと そのusers--物事のリストを管理 実際に切り替えている 私たちが起こるにもかかわらず、時間、 Perlの、別のを使用するには 当時の言語。 [00:12:35] その後最後に、私たちは導入 SQL--構造化照会言語。 だから、まだ他の言語 そのは何のために使われている？ 何のために使用される？ 我々は思い切ってすることができますslight-- [OK]を、我々はつもりはない はるか遠く取得する ここオーケストラより。 聴衆：それはプロトコルだ データベースに話をするために使用する。 デイビット·J·マラン：プロトコル データベースに話をするために使用する。 私は微調整しましょう​​。 それは、使用される自然言語だ databases--選択に話をする そして挿入と削除 そして更新と実際 さらに多くの機能がその 私たちも潜っていない にしかし、あなたは持っているexplore--することができます のために探索する、最終的なプロジェクトを言う。 したがって、これらのさまざまな部分があります。 [00:13:09] うまくいけばPset7、たとえ その仕様は、非常に長い それはあなたを歩くことが意図的に長いです どのようにこれらの事はすべてできますを通じて 一緒に入力する。 さて、月曜日に、私たち 私たちの最後の言語を導入 我々は正式にで紹介していること は、JavaScriptでcourse--。 これは、PHPのような、ある インタプリタ型言語。 [00:13:25] しかし、キーの区別 私は月曜日に提案 一方、PHPが実行したりしていることである サーバー上で解釈され、その この場合にはCS50アプライアンスはある、 またはいくつかの商用ウェブかもしれません インターネット上のサーバ、 JavaScriptは、一般的に クライアント側で実行される言語である ブラウザではないサーバーside--そう。 ちょうど私が開いたときのように、言っているである Facebookのソースコードまで、すべての発見 それらの.jsファイルで、含意はなかった あなたは、Facebookやを訪問したときが最も ウェブサイトこれらの日、あなたが得る HTML、CSSだけでなく、だけではない が、JavaScriptの全体の束 の.jsファイルの形式で、多くの場合、コード。 そして、それはあなた自身をbrowser--だ そのコードを実行し、MacまたはPC--。 [00:14:03] しかし、あなたのブラウザがそれを実行します。 あなたはサンドボックスのソートで考えることができます。 JavaScriptのコードがあってはならないように お使いのコンピュータ上のファイルを削除することが。 それのことができるようにはならない あなたに代わって電子メールを送信。 制限しのブラウザの種類 あなたはそれで何を行うことができます。 [00:14:17] だから、そういう意味では、それは少しだ Cよりも、おそらく、それほど強力 しかし、JavaScriptの缶、など 余談ですが、サーバー上で使用すること、 我々は話をしない傾向があるでしょうけれども それについてその文脈で。 だから今のは一緒にこれらを結びつけるましょう。 週プラス前、我々はいくつかのHTMLを提示 left--スーパー退屈なウェブページ上。 [00:14:34] ただのHello Worldは述べています。 そして私は上の提案 右の私たちは一種のアイデアを盗むことができる 我々の議論から Cにおけるデータ構造 とどのようにこの階層を考える 左のマークアップ言語 メモリに描画され、または実行することができる ノードと実際のツリー構造 ポインタと細部のそれらの種類と。 右側には、我々は呼んで DOM--文書化すること ちょうどあるModel--オブジェクト ツリーを言うの空想の方法。 [00:14:56] さて、なぜこの便利です このように考える？ 今であるため JavaScriptは、我々は持っているので、 この中でプレイする取得するコード 環境、だ実際のHTML ブラウザに送信されて すでに、すでに持って によってメモリにロードされ コンピュータの中でツリーにブラウザ このようなRAMは、我々は、JavaScriptを使用することができます 実際に横断するか、歩くか、検索 またはDOMツリーしかし私たちが望むことを変更します。 だから実際には、あなたが思えば 約facebook.com、 あなたがチャット機能を使用している場合、あなたなら Gmailとgchat機能を使用し、 あなたが持っているもの 何度も何度も来るメッセージ そして再び、それらのメッセージは、おそらくあり、 のように、LIタグ、リスト項目タグ、多分。 [00:15:35] それとも彼らはただだ 登場保つのdiv 毎回あなたがインスタントメッセージを取得します。 そしてそうそれはちょうど何を意味し FacebookやGoogleがやっている いつでもあなたが取得される サーバーからのメッセージ、 彼らはおそらくJavaScriptを使用している ちょうど別のノードを追加する これにこれに別のノードをtree-- その後、視覚だけに見える木 画面上のテキストの新しい行のように。 しかし、彼らは挿入している このデータ構造に変換する。 [00:15:57] のようなクラスの中のSO CS124と他の人には、よ 実際にに対してよりコードを書く このようなデータ構造。 しかし、今のためにJavaScriptで、 私達はちょうどと仮定します 我々は、この機能のすべてを取得 言語自体から無料で。 それでは、例を見てみましょう。 [00:16:09] 私はform.htmlと呼ばれるファイルを開くましょう。 それは超簡単です。 それはちょうどこのようになります。 [00:16:15] いいえ、CSSはなく、美学への無思想。 それは純粋に機能だ どうやら私は今 、電子メールのパスワードを尋ね、 もう一度パスワードを入力し、チェック いくつかの条件に同意します。 これは何のソースコード おそらく何かであるように見える あなたが想像 今思考の少し。 私はここで、formタグを持っている。 [00:16:32] アクションが明らかになるだろう register.phpと呼ばれるファイルに移動します。 私が使用するつもりだ方法が取得することです。 そして私は、テキストを持っている 名前が電子メールであるフィールド。 [00:16:40] 私は、パスワードフィールドを持っている 名前がパスワードです。 私は別のを持っている 名前がパスワードフィールド 幾分任意に確認する。 それはちょうど別のHTTPパラメータです。 [00:16:49] そして、我々は、我々は除いて、これらを使用していませんでした class--で1年生のIMデモ以来 あるチェックボックス ただタイプがチェックに等しい。 そして、私はその合意を呼ぶことにします。 だから私は、一種の任意にしましたが、 便利にこれらのフィールドを命名。 今、このフォームは、取得したときになるように 提出された、何が起こるか見てみましょう。 私はmalan@harvard.eduを行う場合、 私は、深紅のパスワードをやる。 私は何のパスワードをやる。 さんが協力しないようにしましょう​​。 [00:17:10] と私はボックスをチェックしません。 私は[登録]をクリックしてみましょう。 そして、それはHM、あなたが登録している、と言います。 いまいち。 [00:17:16] しかし、URLが変更されました。 だから、このフォームは明らかにさせた register.phpに提出する。 しかし、おそらく、私がすべきである これらのエラーのいくつかをキャッチ。 さて、Pset7と一部 私たちの講義例の、 我々は一般的にプリントアウトしたい ここに大きな赤いエラーメッセージ 名前が欠落して、と言って、 またはパスワードが欠落している。 私たちは前にそれをやったし、我々はしました 行うサーバ側エラー検出。 [00:17:37] しかし、多くのウェブサイト、これらの日 クライアント側のエラー検出を行う どこにURLが変更されません。 ページ全体が更新されません。 あなたは即座にフィードバックを得る ブラウザから。 たぶん何かが赤くなります。 [00:17:48] たぶん、あなたはポップ·アップを取得します。 しかし、あなたはへの送信時間を無駄にしない 不完全だサーバーデータ。 それでは、どのように我々はかもしれない見てみましょう 同様に、その機能を実現する。 [00:17:56] 、私はform1.htmlに行こう これと同じに見えます。 しかし、この時間は私が行う場合 malan@harvard.eduと私は深紅を入力 と私はさらに協力しない しかし、[登録]をクリックし、今注目してください。 それは、最もセクシーな解決策ではありません。 私は、少なくともこのエラーをキャッチした。 そして私は、アラートを使用しました JavaScript--関数 どの我々は唯一のクラスで使用している。 一般的には、これを使うべきではありません それは非常に迅速に取得することができますので、 コントロールの。 しかし、パスワードが誤りであると一致していません。 [00:18:19] 私が先に行くし、[OK]をクリックしてみましょう。 しかしここで重要なお持ち帰り URLが変更されていないことである。 だから私は、消耗を気にいませんでした サーバの時刻を尋ねる 私が持っている可能性があることを疑問 自分自身に答えを考え出した。 [00:18:30] そして、ユーザ、たとえ この話して ユーザーのより長い このことについて考えるつもり、 即座にフィードバックを持っているとしている。 待ち時間ではありません ネットワーク接続。 それでは、このソースコードを見てみましょう。 [00:18:40] Form1.htmlルックス ここに構造的に類似。 フォームは、実際には同じである。 しかし、ここで私はここでダウンして何をしたか見てみましょう。 そしてこれを行うためのさまざまな方法があります。 そして、私はほとんどのストレートをやった フォロワーまだいない最もエレガントな方法。 私は、スクリプトタグを持っている。 私はその後、呼び出す のdocument.getElementById（ '登録'）。 そして私は、その値を保存 形で、変数。 [00:19:04] だから私は何をした？ あなたが考えることができます のdocument.getElementByIdものとして 特殊機能その JavaScriptはあなたを与える それは文字通りあなた手渡す いずれかのノードへのポインタ このツリー内または長方形。 だから今それがどのような私たちのフォーム変数です JavaScriptで実際に指している。 [00:19:21] だから今構文は異なっている C.しかし、我々はここにいくつかのことをやっている。 一つは、これは少し奇妙である C.対確かに、見て しかし、35行を見てください。 左form.onsubmit上そう。 のonSubmitがあることを思い出してください 構造体のフィールドのように。 あなたがフォーム変数を考える場合 ちょうどC言語の構造体中である、 それはいくつかのフィールドを持っているかもしれません。 [00:19:42] 戻る日に、私たちは生徒の名前を持っていた、 IDは、住宅、フィールドのもの一種。 ちょうど別のフィールドとしてのonSubmit考える。 ので、しかし、それは特別なフィールドです ブラウザが期待するようにプログラムされている 値ではないために.onsubmit 数値や文字列のような、 しかし、実際に機能することが または関数のアドレス コンピュータのメモリ内。 [00:20:02] そして実際、それは何ですか このキーワードはここにいます。 これは私に新しい機能を与える、と言います。 しかし、その名前は何ですか どうやら、になるだろう？ [00:20:09] 月曜日に戻って考えて。 これの名前は何ですか この構文に基づく関数？ いいえ、私は意味、明確にあります は名前は確かassociated--ん ではない私がここで強調してきたもので。 [00:20:21] しかし、それは実際にはOKです。 これは匿名関数である、または 一部としてのラムダ関数は、それを呼ぶかもしれない。 そして、それはちょうど意味 それはまだ機能だ。 それはちょうど、あなたが名前によってそれを呼び出すことはできませんだ。 しかし、それは大丈夫です。 再び、ブラウザがされているので、 Googleのような企業が事前にプログラム またはMicrosoftまたはMozillaや他の人へ ただ知っている.onsubmitフィールドの場合 要素が持つフォームの内側 値は、function--として扱う 関数ポインタ、もしあなたがします。 フォームが送信されたときに、それを呼び出します。 [00:20:46] だから何コードが実行されるべき フォームが送信されたとき？ どうやら、すべてのもの 中括弧の内側。 そして、これは単なる文体である。 [00:20:53] あなたはこのようなを行うことができます 我々はCS50で行う傾向。 しかし、JavaScriptで、ほとんどの人 同じ行にそれを維持する傾向がある それがより明確であるという理由だけで そのキーワード機能に関連する。 だから今、私は何をやっている？ [00:21:03] form.email.valueはイコールに等しい場合 空の文字列または何も、ここにある 私が言うつもりのアラート、 あなたは、あなたの電子メールアドレスを提供する必要があります その後falseを返す。 そして、それはそれはそれfalseを返します 提出されてからフォームを防ぐことができます。 一方、パスワードの値である場合 ブランク、私は、ユーザーに叫ぶつもりです と言う、あなたはパスワードを入力する必要があります。 [00:21:21] その間のものは取得している ここで少し手の込んだ。 form.password.valueがない場合 等しいform.confirmation.value、 他のフィールドには、大声で叫ぶ ユーザーはそのパスワード 彼らのように一致していない 一瞬前にしませんでした。 その後この1つはです 少しセクシーに私のため 私は概念的に知っていたことを知っている チェックされ、チェックボックスの名前です。 [00:21:40] だから、僕は感嘆符を使用することができます チェックがない場合には言うべきポイント それはブールですchecked-- 値trueまたはfalse-- 私はその理由のため、ユーザーで叫ぶでしょう。 そうでなければ、我々はを介して取得した場合 これらの条件の全て ちょうどtrueを返してみましょう。 フォームが送信されてみましょう。 そして、これはその後に行われます。 [00:21:56] 深紅を入力してみましょう。 のチェックボックスをオンにしましょう​​、[登録]をクリックします。 そして今、私が先に通過します。 さて、そこにはデータベースがありません。 面白いものは何もありません register.phpで。 私はちょうど何かを必要としてい 実際に話をする。 だから私はここに、一時停止してみましょう。 我々だけで何をやったか上の任意の質問 または、この新しい構文の一部は何ですか？ うん、OK？ [00:22:17] 聴衆：だからどのチェックボックス 自動的にブール値です。 あなたはそのようにそれを宣言する必要はありません。 [00:22:21] デイビット·J·マラン：正しい。 からあなたに送られた任意のチェックボックスだ JavaScriptコードにHTMLフォーム ように、はい、扱われます ブールtrueまたはfalse value--。 それは良い質問ですね。 他の値のに対し、の もちろん、テキスト、AKA文字列となっている。 [00:22:36] すべての権利なので、私をみましょう さらに少し巻き戻し。 この全体のポイントは何でしたか？ ただ明確にする。 同様に、我々はすでにさえPset7から、知っている さらには先週の講演から 我々は明らかに確認することができていることを例に、 $ _GET、$ _POST、ユーザーが私たちを与えるかどうかを確認 空の値。 PHPで空の関数を覚えています。 [00:22:54] だから明確にすることが、何 我々はまたかもしれない一つの理由 このエラーチェックをやってみたい ブラウザの内側？ ここ動機は何ですか？ うん。 [00:23:06] 聴衆：高速、そしてあなたはしないでください サーバーへの無駄なデータを送信します。 デイビット·J·マラン：良い。 それは高速です。 あなたは無用送信しない サーバーにデータ。 [00:23:12] だから、より多くを取り戻す 即時応答。 と全体的に、ユーザ 経験が優れている。 代替について考える。 [00:23:17] Gmail--用とあったか 何年も前の場合。 あなたは、新しい電子メールにGmailを得たとします アカウントが唯一の方法を通じて それが挙げられるが、これらにある見るために、 ページ全体をリロードします。 またはあなたがクリックしたとします 電子メールを読むためのリンク。 [00:23:29] すべてがそうリロードする必要がある あなたが電子メールを見ることができる。 それとも、チャットメッセージを取得Facebook--。 あなたがリロードするまであなたはそれを見ることはありません ページまたはいくつかのリンクをクリックします。 [00:23:36] 同様に、これがひどくなります 迷惑なユーザーエクスペリエンス。 そして、これは、それがどのようなものであったかである、 明らかに、バック私はUCのために実行したときに そしてウェブははるかに少ないダイナミックだった 普及のようにJavaScriptはありませんでした それが今のように。 物事は多くを得ている よりダイナミックとはるかに その意味で、クライアント側。 [00:23:49] しかし、そこに落とし穴がここにある、と これは迷惑な落とし穴の一種である。 ちょうどあなたがクライアント側を追加する理由 このような検出は意味するものではありません あなたは、または放棄する必要がありますすることができます サーバー側の検出。 あなたは本質的にあなたを置きたい 両方の場所でエラーチェック。 1だったものので、 学んだ教訓の 記事から私はいくつかの抜粋を読む この愚かなCMS system--持つから たコンテンツ管理System-- その認証システムを実装 どのようなメカニズムを経由して、そのログイン？ JavaScriptを。 [00:24:20] 聴衆：JavaScriptを。 デイビット·J·マラン： JavaScriptは、正確には、右か？ これは、JavaScriptを使用していました。 文字通り、あなたたちは持っている おそらく少しを果たした Chromeのインスペクタを持つ。 私はそれを見つけることができればと、要素を検査する。 [00:24:30] 私がしなければならオーバー行こう Chromeのすべてのオプション。 そして、これはそれがいかに簡単であるかである ブラウザでJavaScriptを無効にします。 、これ以上はJavaScriptをオンにします。 [00:24:38] だから公平さで、たくさん ウェブのこれらの日 という理由だけで破るしようとしている Gmailや他のsites-- ことを前提としていFacebook-- JavaScriptが有効になっています。 しかし、あなたは愚かな何かをやっている場合は、 のようなユーザーのみ入力を検証 とのためにそれをチェックする クライアント側でエラー、 敵は簡単にこれを行うことができます。 その後さえ賢く 君たちのような敵 今Telnetまたはカールを使用することができます あるいは単に、コマンドライン·コマンド そして、実際にサーバーにメッセージを送信 それは、同様にチェックされ、エラーはありません。 [00:25:05] だから、これはの詳細です ユーザインタフェース決定 実際、技術的であるより improvement--実装 このような何かクライアント側を。 だから今チラッが、その後、 私はオンライン散歩に延期するだろう この1のための貫通。 フォーム2では、私たちは実際に通り抜けた そして、コードを少しクリーンアップ。 しかし、私が1に延期しましょう 我々は可能性が高いよビデオの ちょうどあなた示しPset8で埋め込む 似た構文と呼ばれるライブラリを使用して スーパー、スーパーでjQueryの、 JavaScriptで人気のある図書館 その率直ほとんどの人 ただ、これらの日に使用 とさえとして混乱させる JavaScriptは、それ自体である。 [00:25:37] そして、それは関与する傾向がある いくつかのドル記号 およびドキュメントのようなキーワード ここで括弧内。 しかし、再び、私は延期にしましょう オンラインいくつかの遅いチュートリアル だけではなく構文で縛ら取得。 それではに移りましょう 何か少しクーラー この応用の観点から。 [00:25:50] だから、特に、私は手放す 先に、ここでこれを開く。 さあ。 私たちはそこに行く。 [00:25:59] 私はここにこの絵を開いてみましょう。 不必要に複雑 探しているが、それ と呼ばれる技術について説明しAJAX-- 非同期JavaScriptとXML、 XML用のXは実際にある もはや本当に使用されません。 それは何かを使用する傾向があり 他にJSONを呼んだ。 [00:26:13] しかし、ここでどのようなものです GoogleマップやGoogle Earthは動作します。 それでは実際に、その場でこれを試してみましょう。 私が先に行くと、開いてみましょう 私のブラウザ上で、最大のChrome。 [00:26:21] そして、私はに行きましょう maps.google.com、言う。 そして実際に、あなたが古いなら 何を覚えているために十分、 のような、マップクエストは、一日でバックのようだった そしておそらく彼らはまだこのように動作します。 あなたはsomething--を検索するために使用される場合 33オックスフォードストリート、ケンブリッジ、マサチューセッツ州、 あなたをthis--んしてみましょう 実際でしょう、あなたの場合 アップパンしたいと思い、 上下、左右 あなたは次のようになります ビッグ上部にある矢印の方向、およびそれ あなた別を示すであろ ここまでのマップのフレーム。 それとも、あなたの左をクリックしたい こっちに行く、または別のクリックになる そしてあなたはここで上に行くだろう。 しかし、その代わりにこれらの 日、私たちはもちろんのちょうど 私たちが行くことができることを当たり前 ケンブリッジ周辺かなり迅速に ちょうどクリックしてドラッグすることによって。 しかし、いくつかのグリッチがあると気づく。 [00:26:59] 私は十分に速く、これを行う場合は、 何が起こっているように見える 私は少し速すぎドラッグすると、 コンピュータ用についていくには？ あなたは何を見ていますか？ うん。 [00:27:07] 読者：ピクセルが更新されません。 デイビット·J·マラン： ピクセルは更新されません。 あなたはそこにactually--だと 実際に、これを見ることができ、 あなたがオンラインと一時停止を監視していた場合 このまたは実際に物事を遅く once--のためにあなたがそこにいることがわかります タイル、正方形、長方形またはその までのマップから欠落している スプリット秒後、より多くのデータ、 実際に複数の画像 画面に表示されます。 実際に、私たちは見ることによってこれを行う場合は、 Chrome's--のは言わせてまで、Chrome-- 見てみましょう。 我々はそれを行うことはできません。 [00:27:31] おっと、ああ。 maps.google.comを開くのをしてみましょう。 私は大きなウィンドウを再度作ってみましょう。 [00:27:36] 33オックスフォードストリートに戻る。 私は最近にあったウェブサイトは何でしたか？ 私は民間の暴言に、同じように、これを持っていた 私自身は、私は、インスタントメッセージをしたいこと オンラインだったどんな友人 誰がそれを聞きたかった。 いくつかのウェブサイトがあります。 私はそれがとてもComcast--だと思う 非常に大きなアメリカのISP。 あなたは新しいケーブルのため、サインアップすることができたとき モデムサービスやケーブルテレビサービス、 彼らは非常に合理的にフォームを持っている どこにあなたの住所をお願いします。 そしてこの素晴らしいを持っている 自動完全と呼ばれる機能、 Googleのように、それがいっぱいになり始める あなたの質問への答えで。 [00:28:04] 問題は、彼らが完全に自動で行うことで、 あなたが入力し最初のものに。 だから、33でそれを入力して起動した場合 あなたは、文字通りすべての家が表示されます アメリカではその始まり 数33 に進む前に、 あなたがより多くを入力するように期待しています。 あなたはオックスフォード33を入力するのであれば、 それはあなたのすべての道を示してい アメリカでは33オックスフォードを有している 町のその名前に関わらず、 あなたはにいること。 [00:28:25] そして、あなたは入力を続ける。 そして最後に、それはそうではないことを認識 ケンブリッジのご自宅への提供サービス またはそのような何か。 しかし、ポイントは、これが最もある オートの愚かな実装 今までに完了する。 [00:28:34] そして私はちょうどオフつもりです この接線上で、もう一度。 それだけには良い方法があります JavaScriptと悪い方法を使用しています。 そして、それは必ずしも最適なものではありません。 [00:28:40] しかし、この前にここでのポイント、 長広舌は、ここにツールを上下に開くことだった そして、開発者ツールを開く 我々の前に奨励てきたように、 とネットワークを見て タブ私は本当に速いクリックする。 そして全体の束に気付く の要求が起こっ取得。 私はドラッグ以来このすべてが起こった。 [00:28:57] 確かに、そして最も可能性が高い これらの行の多く 今画像スラッシュはJPEGです MIMEタイプまたはコンテンツタイプ。 やっていることをクロームからだ 私はクリックしてドラッグ、クリックするたび そして、私はそれがああ、実現のドラッグである タイル用のGoogleを頼む行く必要がある こっちだ地図上に、 迅速にHTTP経由でダウンロード、 その後、いわゆるDOMに追加 メモリツリー内のWebブラウザへ 表現ユーザように、 私は、その更新されたタイルを見ている。 そして、これが理由である AJAXと呼ばれる技術。 戻る日に、それは本当に ケースは、あなたの場合ということでした 画面上にあるものに変更したい、 あなたがクリックしなければならない、下、左、 右。 その後新しいページが開くだろう。 しかし、これらの日、すべてのもの よりダイナミックである。 それは我々が人間のような方法で起こる それが実際に対話的だろう願っています。 そしてそれは、ことによってこれを達成 と呼ばれる技術の道 おそらく最高である、AJAX、 例で説明。 まず、私が先に行くしましょう そしてファイルを開く でquote.php呼ば 今日の流通コード。 [00:29:53] その後私はsymbol--おっとをやらせる。 私はシンボル= GOOGをやってみましょう ほんの一部の株式の。 または実際に、のやら のPset無料から1つ。 入力してください。 [00:30:05] そして今、私は戻って何を得るに気づく。 だから、これは本当にです その私の短いPHPファイル 単にコードを借用していることを書きました Pset7のlookup関数から そして、この中括弧を使って出してくれると 引用符とコロン記法、どうやら、 のための現在の株式の価格 あなたがGETで渡す会社。 だから、これは異なっている 私たちがした内容のほとんどから 私は、その通知に行わ 文字通り吐き出す 何がJavaScriptコードのように見えます。 [00:30:27] 実際には、これはJavaScriptオブジェクトです。 実際には、ちょうどより明確にするために、 JSON-- Notation-- JavaScriptオブジェクト あなたというの単なる空想の方法です 多くのJavaScriptでデータを表現することができます あなたは、PHPでできるように キーと値のペアを使用して。 私は宣言したいのであれば JavaScriptで変数 のために、Zamylaを表しする Zamyla--ための構造体をinstance-- そして我々はそれを呼ぶことにします 学生は、この変数。 彼女のIDは、1である家がある ウィンスロップ、そして名前がZamylaです。 [00:30:53] しかし、私はまた、オブジェクトの配列を持つことができます。 だから私は実際に持っていると思った場合 JavaScriptで配列を含む 複数のこのようなオブジェクトは、この 時間は、スタッフを代表 私は、これらの3つを持っているかもしれません バックのコードの塊 これらのためにバックアップするバックアップする 3人の元スタッフメンバー。 だから、構文、かわいい PHPにboth--に似ています。 しかし、これは特にJavaScriptがある。 これは、オブジェクトの表記法です。 だから、これはために役立つ何ですか​​？ [00:31:17] 私が出してくれるのコードを記述する場合JSON-- その原料Notation-- JavaScriptのオブジェクト このまたはスタッフのようになります Zamylaの構造のように見え、 私は実際にこれを使用することができます プログラムの中で私が書きます。 私はajax0.htmlに行こう。 そして、これはあまりないtoo-- 美学に与えられたと思った。 しかし、何が起こるかを見る。 [00:31:34] 私が先に行くと、ここで自由に入力してみましょう。 引用符を取得する]をクリックします。 そしてURLが変更されていません注意してください。 しかし、私は明らかにしてポップアップ手に入れた 0.15ドルの今日のペニーの株価。 だから、すべてのことは悪くない。 しかし、違いは、何らかの形である このデータは、直接私に戻ってきた。 しかし、それではに向けた一歩を踏み出すましょう より身近なもの。 このバージョンのいずれかで、私をしましょう 型自由もう一度、見積もりを取得]をクリックし、 とまあnow--、これがあった 実際にjQueryのバージョン。 私はしませんでしたme--そうしましょう かなり遠くに十分な早送り。 私はバージョン2へ行こう、 その私が欲しかったところです。 私がここで何をやったかに注目してください。 私はスーパー当ページのWebを持っている 任意のWebページの簡易版 テキストフ​​ィールドに、今日使用する場合があります ここに無料で、その後明らかにちょうど テキスト。 [00:32:14] これは明らかに、ここではフォームではありません。 しかし、私はクリックすると取得 引用符、私のWebページに気付く 私かのように変わろうとしている 単に新しいインスタントメッセージが表示されました または私はちょうど移動しているかのように マッピングし、より多くのデータを得るために必要 Webページに動的に追加 URLの変更やユーザーなし 経験は中断ばかり。 確かに、私はではまだだ まったく同じplace-- ajax2.html。 [00:32:35] それでは、この例でのみ見てみましょう そしてこれが起こっているかを見る。 私はajax2.htmlに行こう。 そして最初の形式に注目してください。 [00:32:44] ここでダウン、私が回してる オート完全オフ。 時にはそれが取得する ブラウザであれば迷惑 をお見せしようとしている あなたの全体の歴史。 だからによってHTMLでそれを行うことができます ちょうど自動オフ完了と言って。 [00:32:53] 私はこのテキストフ​​ィールドaを与えてくれた シンボルのID、むしろsymbol--。 そして今、これは面白い機能です。 私たちは、スパンの話されていない しかし、あなたはそれについて考えることができます 段落タグやdivタグなどである。 それはと呼ばれるものだ インライン要素は、その あなたは段落を取得しないことを意味します それの上下に分割します。 それはちょうどせずにインラインで滞在する予定だ 入ると同等のものを打つ。 だから私は、HTMLのこのチャンクを与えている 一意の識別子を決定する 私は、任意の価格と呼ばれることに。 と私はSubmitボタンを持っている。 [00:33:21] 今までhere--、これはされているため、 実際にスーパー素晴らしいどのように少しのコード あなたは何を書くことができます 比較的きちんとしthings-- 私場合、私はここに何をやったかに気づく このページの先頭までスクロールします。 私が最初に含めました 私の頭のスクリプトタグ その実際に参照している 他の場所でのJavaScriptファイル。 これは、組織からのものである それは、jQueryを書き込み、 これは単にあなたに、最新のを与えている 彼らのjQueryライブラリのバージョン。 [00:33:42] だから、これは一種の鋭いようなものです C言語に含めるか、PHPで必要です。 あなたはスクリプトタグを使用 ソース属性を持つ。 しかし、今私自身のコードです ここで右になるだろう。 [00:33:52] 私は引用符と呼ばれる機能を持っていることに注意してください。 そして、それが少し見える 一見不可解。 しかし、それではこれを離れていじめるましょう。 私にURLという変数を与える。 文字通り、この文字列を割り当てます。 だから、単一引用符、二重引用符で JavaScriptはちょうど私に文字列を与えます。 プラスは何をしますか？ 連結。 [00:34:08] だから、これは現在、jQueryの構文は次のとおりです これに慣れる少しかかります。 しかし、これはちょうど私のDOMを取りに行く意味 そのユニークな識別子シンボルであるノード。 そこに意味ハッシュタグ 一意の識別子記号。 [00:34:21] ドル記号 ただ意味括弧、これを包む 秘密のソースのjQueryのソートそう あなたは、追加機能を取得します。 その後.valは明らかである 関数、または我々は今言うように、 このノードの内部方法 それはちょうどあなたに値を与える。 だから、短い醜いと紛らわしいで これは一見に見えるように、 これは単なる入力したユーザーと得ることを意味 で、文字列の最後にそれを置く それを連結することによって。 それだけだ。 [00:34:43] だから今、最後の3行。 あなたはたくさんのを絞ることができます 3ラインのうち、機能性。 として、このドル記号、 余談ですが、ちょうどニックネームである 特別なグローバル変数のための jQueryを文字通り呼ばれる。 [00:34:55] ドル記号はただクールに見えます。 だから、jQueryのコミュニティだけの種類 彼らの特殊記号としてそれを使用していました。 それは、PHPで何を意味するのかという意味ではありません。 JavaScriptでは、ドル記号がある ちょうどアルファベットの文字のように または変数の数。 [00:35:07] あなただけの名前としてそれを持つことができます。 ただクールに見えます。 だからコミュニティ ニックネームとしてそれを採用した jQueryのと呼ばれる独自のライブラリの。 [00:35:13] そして、それは超人気です。 だから、JSONはその正確に取得する。 それは、その関数の jQueryのの人々は書いた それはserver--からJSONを取得する JavaScriptのオブジェクト表記法。 何のURLからそれが起こっている その情報を取得するには？ どうやらこちらのURLから。 [00:35:27] とブラウザのように何をすべき それは、この応答を取り戻すとすぐに？ そして、これはそうするためには、AJAXの魔法である XMLでspeak--非同期JavaScriptを。 このようなAで見ることは難しい 我々がここで持っていたような単純な例。 [00:35:41] しかし、これは非同期だった 感覚という私のコード時 にメッセージを送信して実行 私にいくつかのJSONを取りに行くようにサーバー。 そして、それは超高速起こった 私は応答を得たこと。 しかし興味深いのは、このことです コー​​ドの行は、私のコンピュータがハングアップしませんでした。 [00:35:55] 私はスピニングのアイコンが表示されなかった。 私は失うことはありませんでした 私のマウスを移動する機能。 私のブラウザは、実際には完全に大丈夫だった。 [00:36:01] 道にはJavaScriptを処理するため、 次のようにサーバからの応答である。 あなたが呼びたいものを登録する コー​​ルバック関数、その ただ、ちょっと、JavaScriptを意味します。 とすぐにサーバとして JSON形式で応答し、 この匿名関数を呼び出してください。 [00:36:18] そして、この関数に渡さ下さい どんな文字列サーバが吐き出す 引数は、データと呼ばれる。 そこで、他の、すなわち、もし 私は動的に組み立てています この渡したURL quote.php 無料またはGOOGやその他もろもろのようなシンボル、 私はその後、言っている JavaScriptはそのURLを取りに行く。 ブラウザことを忘​​れないでください 何かを返すために起こっている 我々はこれをearlier--見たようにそれが見えます。 [00:36:42] そして、何番目の引数 ここではJSONが言っている取得する この関数を呼び出している サーバーは、バックを取得したとき それは、10ミリ秒のかどうか 現在または今から10秒から。 とすぐあなたがそうであるように、 ページに価格を追加します。 この構文はここだけ ノードを取りに行く意味 そのユニークな識別子ツリーから 我々は前に見たことのスパンprice--です。 [00:37:01] HTML形式と呼ばれるこの方法 ただ置き換える行く、と言う data.priceとそこのHTML。 data.priceは何ですか？ さて、ブラウザ、リコール、 私は、この戻って来ていた。 これはデータである。 [00:37:14] そしてそれは少し不可解だ ここにカンマを表示します。 しかし、実際には、私はこれをやらせる。 私はちょうどこれを貼り付けてみましょう 本当の速いgeditの中に 私たちが示したように、これを示している 以前Zamylaの構造。 [00:37:27] 何サーバが返送されることである このようになります小さな物体。 そしてそうdata.priceです ちょうど私に0.1515を与える。 移動するので、たくさん 一斉にこちらをパーツ。 [00:37:39] しかし、重要なポイントである 我々は、この能力を有すること 追加のHTTPを作るために JavaScriptを使用して要求 ページをリロードする必要はありません。 そして、我々は実際に缶 オンザフライでWebページを変更します。 そして、それはことが判明 JavaScriptとその他の言語 現在、使用することができるだけでなく ウェブページを変異し、 しかし、実際にソフトウェアを書くことが 実際のコンピュータで、 ちょうどクローム等に限ったことではない。 [00:38:00] 実際には、あなたをコルトンをでしょうif-- ここまで私たちに戻って参加したい ラボコードと、そしてチャンも同様？ それでは話をした、先に行ってみよう 匿名関数とコールバック そして本当にここ運命を誘惑 出血をライブデモで 最先端技術の一つ これらのエリート運動装置。 さて、このデバイス、リコール、 小さなUSBデバイスである 同様にそれはbeautiful--だthat-- それはあなたのUSBポートにプラグで。 [00:38:25] その後、入力を提供 人間のジェスチャーの形で 赤外線ビームを用いて検出することにより、 本質的に、あなたの腕の動きから。 だから、マリアが試したものに対し、 前に筋肉だった、 実際に変えているのか感じて あなたの腕は、これがベース赤外線である。 だから、内の動きを探している 足かそこらの球の一種 デバイス自体の。 [00:38:46] では、なぜ私が取ることはありません この最初で刺す？ そしてそれでは先に行くと、投げてみましょう ここにオーバーヘッドにあなたをバックアップします。 それでは、ここでコルトンのノートパソコンを設置しましょう​​。 私たちは、テレビでアンドリューを持っている。 そして、あなたは私が最初に何をすべきかをご希望ですか？ [00:39:00] COLTON：先に、ちょうど行く この男の上に手を置く そしてあなたは、いくつかの素晴らしい輝きを見ることができます。 [00:39:04] デイビット·J·マラン：非常に良い。 これは、すべてリアルタイムで起こっている。 [OK]をクリックします。 すべての権利、およびうん。 とても素敵。 すべての権利、私たちは他に何ができますか？ [00:39:15] COLTON：次の画面に移動し、参照してください。 [00:39:17] デイビット·J·マラン：すべての権利。 [00:39:19] COLTON：楽しい小さなゲーム どこにロボットを作るために得る。 [00:39:21] デイビット·J·マラン：すべての権利なので、この 何をすべきか私を示す偽の手です。 COLTON：はいだから先に行く そしてブロックの一つをつかむ そのロボットの身体の上に置く。 デイビット·J·マラン：ああ、私の手があります。 ああ。 [OK]を、愛らしい。 OK、ちょっと待って。 私たちはそこに行く。 [00:39:41] COLTON：私は事故で1を作った。 [00:39:43] デイビット·J·マラン：OK、私はこの男を取得します。 くそくらえ！ 我々は、この最後の練習されたとき 夜、あなたはこれがに権限を委譲知っている？ [00:39:51] このように。 [OK]をクリックします。 次に1？ [00:39:55] COLTON：確かに。 [00:39:56] デイビット·J·マラン：すべての権利、 そして第三があります。 わかりました。 COLTON：そして、このいずれかで、あなたはto--取得 デイビット·J·マラン：ああ、 この1の美しい。 COLTON：--yeah、この花を離れて選ぶ。 デイビット·J·マラン：OK。 いいえ？ 逃した。 [00:40:14] COLTON：ああ、そこに行く。 [00:40:15] デイビット·J·マラン：ああ、それを見てください。 非常に素晴らしい。 さて、なぜ我々が取る「いけない ここ1ボランティア出 誰がアップに来るしたいと思います。 どの程度すぐそこ 緑色で、それを何ですか？ [00:40:27] すべての権利、およびましょhave--ましょう あなたの代わりにそれを行うの、いくつかの このゲームを知っているかもしれませんhere-- おそらく、ロープをカット？ 見てみましょう。 私たちはこっちで私たちの眼鏡を持っている？ [00:40:37] [OK]をクリックします。 ありがとう。 あなたの名前は何ですか？ [00:40:39] 聴衆：ローラ。 [00:40:40] デイビット·J·マラン：ローラ？ 見てニース。 あなたが入れてもかまわない場合 あなたのメガネの上のGoogleグラス。 これはコルトンです。 [00:40:46] COLTON：こんにちは。 よろしくね。 [00:40:48] デイビット·J·マラン：OK、周りに来る。 すべての権利なので、あなたがしようとしているもの ここで行う、前にこれを果たした、 の上に手を置かれている ここリープモーション。 そして今、あなたの矢印が移動する必要があります。 いや、ああ。 [00:40:57] 聴衆：いいえ。 [00:40:58] デイビット·J·マラン：私たち まだ辞めたくない。 [OK]を、待ってください。 こっち。 あなたを保持するように注意してください 何かを指 マウスが緑色に行くために開始され、 これをクリックする方法です。 [00:41:06] だから、プレイにカーソルを合わせる。 そして、ちょうど1本の指で結構です。 そして今、少しをクリックしてください 左の緑の男。 それは緑がいっぱいになるまで、今開催しています。 グッド。 さて、トップアップレベル1、などである。 [00:41:16] 観客は：ええ、私たちはここで、レベル1が欲しい。 [00:41:20] デイビット·J·マラン：良い。 [OK]を、ので、すべてのあなたが持っている ロープをカットされることができません。 あなたのカーソルがダウンしてそこに白い一つだ。 [00:41:28] 非常に素晴らしい。 すべての権利、それが難しく取得についてです。 だから今、次の指を上に保持します。 グッド。 この1は難しい。 [00:41:39] 聴衆：ああがらくた。 [OK]をクリックします。 それは、その道を行くことを望んでいる。 ああがらくた、that-- [00:41:44] デイビット·J·マラン：うん。 二次の目標は、すべての星を取得することです。 すべての権利、隣。 [00:41:53] あなたは、この第三の1を得ることができるかどうか見てみましょう。 グッド。 [OK]を、あそこに行く。 [00:42:06] かしこまりました。 ああ、非常に素晴らしい。 わかりました。 [00:42:11] では、なぜ私たちは今日ここ休会ませんか？ 誰もがプレイしたい人まで点灯してみましょう。 私たちのボランティアラウラへ本当にありがとうございました。 そして、我々は月曜日にお会いします。 [00:42:18] 読者：あなたは、おそらくこれらのバックが欲しい。 [00:42:21] SPEAKER 2：次のCS50--で