What Is Your Birthday? - Web Development Udacity English Japanese

What Is Your Birthday? - Web DevelopmentYouTube↗ IA↗(long shot)
Education 5.3K views 4 likes 0 dislikes 22 Apr 2012

Udacity 651K subscribers United States YouTube↗

So we're going to go back to the live web app we were working in before.

Webアプリケーションに戻りましょう

This is the main file we were using.

これが前に使用していたファイルです

I'm not going to ask you to follow along with me anymore

ここからはコードの入力はせず

because I'm going to be writing more code,

私の行うことを見てください

and it'll be tedious for you to try and keep up.

コードを多く使うので大変になると思います

I'll try to type slowly, and we'll quiz as I go.

コードはできるだけゆっくり入力し小テストも行います

So the first thing we're going to do is adjust this file to work better for our needs.

まずはファイルを使いやすいようにきれいにしていきましょう

So remember, we we're submitting to a different URL before.

ここに送信するURLを設定していましたね

We were submitting to /testform.

/testformです

That's when we were learning about multiple handlers.

ハンドラもいくつか設定しました

We're going to get rid of that.

すべて消しましょう

We're going to get rid of that action parameter,

action属性を消し

and we're going to get rid of that whole handler.

ハンドラも削除しましょう

We're not going to be using that anymore.

これは使いません

And we're also going to get rid of the URL reference to that handler.

ハンドラに送られるURLリファレンスも

We don't need that anymore.

消しましょう

So now I've simplified this file quite a bit.

ファイルをきれいに整理しました

We have our simple form that we were using before,

ここにはシンプルなform要素が残り

and we have our main handler that's mapped to by /.

メインハンドラがマッピングされる場所は/です

/ maps the MainPage. Here's MainPage with a get function.

/はMainPageにマッピングされ

And this get function just prints our form.

GETメソッドがフォームを表示します

This is a very simple example we started with from the very beginning.

最初にお見せしたシンプルなフォームのコードです

Let's make sure this still works.

確認してみます

Here we are in our browser.

ブラウザを開くと

We've got our basic form. Everything is as we expected it.

予想どおりフォームが表示されました

Okay, let's go back to the Editor.

ではエディタに戻ります

So instead of having this basic form of just a text field,

このシンプルなフォームに手を加えます

we're going to make a form to ask somebody for their birthday.

誕生日を入れるフォームを作り

So we can validate their inputs.

値を検証しましょう

So let's get rid of this input.

このinput部分を消し

and we're going to ask the user, what is your birthday?

誕生日はいつ?という質問を入れてみましょう

We'll have a blank line.

ここにbrタグを入れましょう

Then we'll have 3 inputs--1 for the month, 1 for the day, and 1 for the year.

月と日と年を入れる3つのinputタグを作ります

So I'll go ahead and add those.

今から足します

So I've updated our form a little bit.

フォームを更新しました

It has a string, what is your birthday?, a blank line, 3 inputs, all of type text

誕生日はいつ?という質問が表示され行を挟んで3つの入力欄が出るはずです

and they're named month, day, and year, 2 more blank lines,

入力欄にはname属性があり

and then our submit button.

2行挟んで送信ボタンです

Let's check how that looks in our browser.

ではブラウザで確認してみましょう

Here we are in our browser.

ブラウザを開くと

We've got our text, what is your birthday?

質問が表示されています

We've got our 3 inputs for month, day, and year, and our submit button.

3つの入力欄が表示されており送信ボタンがあります

I made the font a little bigger in the browser, so we could read it better.

読みやすいようにフォントを大きくしました

Now this is not very clear what we're asking for.

これでは何をどこに入力すべきか不明確ですが

Remember we have a solution for that though.

これは解決できましたね

Let's add some labels so we can see month, day, and year next to our text inputs.

label要素を作成し入力欄の横に名前を表示させます

So here we are in our Editor again.

エディタに戻ります

I'm going to add a few labels.

label要素を追加します

Okay, so all I did is, I added label elements like we did in the previous examples.

先ほどのファイルに3つのlabel要素を入力しました

Here's an opening label, our old month input,

inputタグの前にlabelの開始タグと

some month text to appear next to our text input, and then the closing label.

入力欄の名前を入れ終了タグを入れます

I did that for each of these inputs--month, day, and year.

3つの入力欄にlabelタグを追加しました

Let's see how that looks in our browser.

もう一度確かめてみましょう

Okay, here we are in our browser.

更新すると

I've reloaded it, and things are looking nice.

とても分かりやすくなりましたね

Now we can see that we're asking for the month, the day, and the year.

どの入力欄に何を入力すべきか明確になりました

Now I'm going to type in some data here,

では早速入力してみましょう

and I'd like you to tell me what you think is going to happen when I click submit.

必要事項を入力し送信ボタンをクリックします

So when I hit submit on that form, what do you think is going to happen?

送信した後何が起こるでしょうか?

Will the form clear?

フォームが消える

Will we get an Error 405 because we never added a post() handler to /?

/に対するPOSTハンドラがないので 405のエラーメッセージが出る

We'll see the form values in the URL?

入力した値がURLに表示される

Or will the app count down to my birthday?

アプリケーションが誕生日までのカウントダウンを始める

Similar videos:

Making Links
Udacity
53.9K views 21 likes 0 dislikes 23 Feb 2015100% match

Memcached - Web Development
Udacity
13.5K views 115 likes 3 dislikes 23 Feb 2015100% match

HTML Basics
Udacity
16.5K views 75 likes 2 dislikes 16 Jul 2014100% match

More Handlers - Web Development
Udacity
9.1K views 9 likes 2 dislikes 22 Apr 2012100% match

Components of the Web Solution - Web Development
Udacity
9.6K views 19 likes 0 dislikes 23 Feb 2015100% match

Paragraph Tag - Web Development
Udacity
8.6K views 4 likes 0 dislikes 23 Feb 2015100% match

Shopping List Take 1 - Web Development
Udacity
841 views 1 likes 0 dislikes 23 Feb 2015100% match

Span and Div Solution - Web Development
Udacity
17.4K views 7 likes 0 dislikes 23 Feb 2015100% match

Correct URL - Web Development
Udacity
10.9K views 6 likes 1 dislikes 23 Feb 2015100% match

Components of the Web
Udacity
28K views 54 likes 0 dislikes 23 Feb 2015100% match

Types of Databases - Web Development
Udacity
8.5K views 43 likes 4 dislikes 25 Apr 2012100% match

File Types
Udacity
34.4K views 11 likes 3 dislikes 23 Feb 2015100% match

Introduction - Web Development
Udacity
23.3K views 107 likes 0 dislikes 23 Feb 2015100% match

Query Parameters - Web Development
Udacity
22.6K views 78 likes 3 dislikes 23 Feb 2015100% match

Database Architecture - Web Development
Udacity
8.3K views 29 likes 1 dislikes 27 May 2012100% match

Part 2 - Web Development
Udacity
643 views 2 likes 0 dislikes 07 May 2012100% match

Valid Headers - Web Development
Udacity
7.9K views 1 likes 0 dislikes 23 Feb 2015100% match

Caching Techniques - Web Development
Udacity
34.4K views 216 likes 7 dislikes 23 Feb 2015100% match

Span and Div
Udacity
50.3K views 27 likes 1 dislikes 23 Feb 2015100% match

Google App Engine - Web Development
Udacity
10.1K views 13 likes 3 dislikes 17 Apr 2012100% match

Rot13 - Web Development
Udacity
9.3K views 46 likes 8 dislikes 23 Apr 2012100% match

The Action Attribute - Web Development
Udacity
7.5K views 7 likes 0 dislikes 22 Apr 2012100% match

Frameworks - Web Development
Udacity
28.7K views 154 likes 25 dislikes 23 Feb 2015100% match

Security - Web Development
Udacity
5.7K views 64 likes 0 dislikes 23 May 2012100% match

Cookies - Web Development
Udacity
38.4K views 315 likes 11 dislikes 23 Feb 2015100% match

Cookie Domains - Web Development
Udacity
5.1K views 22 likes 0 dislikes 23 Feb 2015100% match

App Server Scaling - Web Development
Udacity
28.2K views 277 likes 8 dislikes 23 Feb 2015100% match

Datastore Types Solution - Web Development
Udacity
656 views 1 likes 0 dislikes 25 Apr 2012100% match

Introducing URLs - Web Development
Udacity
7.1K views 21 likes 0 dislikes 23 Feb 2015100% match

Growing Reddit - Web Development
Udacity
82.7K views 484 likes 27 dislikes 27 May 2012100% match