0ぷろ!

PCに対しての知識が0の人間が半年でどこまで成長するかを自分で記録するブログ

九日目。

 

昼間はカツカレーを食べました。

大盛りを食べたのですが、自分が思ってた2倍は量が多くてそれでもなんとか食べきったのに、隣に座って"飯を残すやつは嫌いだ"と豪語して並盛りを頼んだ某k田氏が食べれそうにない自分のカツを3枚も僕の皿に載せた時の顔は一生忘れません。

 

はい。では今日の進捗です。

今日は

自分がいまいち理解していないだろうと指摘された単語

 1、静的ページ

 2、動的ページ

 3、HTTP(プロトコル)

 4、HTML

 のちゃんとした言葉の意味、目的を自分で考えて(一部引用ですが...)まとめる。

JavaScriptに対しての理解を深める

をやりました。

他少しcloud9を使ったりPHPを編集したのですがまだ形には出来ていないです。

 

最初はそれぞれの単語の意味の説明からです。

静的ページとは?

更新されない限りは内容が変わらないページの事。

HTMLなどのデータがそのまま応答のデータとして送信せれる方式のWebページのこと。

英語ではStatic Pageと呼ばれる。

内容を変更する為にはHTMLとCSSを編集、さらにそのファイルをサーバーにup以前のファイルを上書きする。

 

 

 

動的ページとは?

その場で作られるページの事。

ユーザーからリクエストがあってから初めてページを作り、それを表示するもの。

英語ではDynamic Pageと呼ばれる。

例をあげると、

1、googleで”wordpress”を検索

2、googleのサーバーが検索結果ページを作成。

3、ページ作りが完成したらブラウザに表示させる。

つまり、何かをgoogleyahoo!で検索した時に出る検索結果のページはまさしく

動的ページということですね。

クライアントのリクエストに対してWebサーバーがその場でリクエストされた内容のページを作成、レスポンスするという流れになっています。

 

昔は動的ページを作る為には環境設定および様々な言語に対しての知識が必要でしたが、

最近では個人でもCMSが出回ったために動的ページを簡単に作れるようになりました。

 

CMS

コンテンツ・マネージメント・システムの略称。

Webコンテンツを構成するテキストや画像、レイアウト情報などを一元的に保存・管理し、サイトを構築、編集したりするソフトウェア。

デジタルコンテンツの管理を行うシステムの総称という言われ方もする。

具体的には、HTMLやCSSなどでレイアウトや装飾や記述、ページ間のリンクを設定するなどをしなくてはならないが、これらの異なる種類の要素を分離してそれぞれデータベースやファイルに保存、自動的にサイト構築をソフトウェアで行うようにしたもの。

CMSを導入すれば、文章や画像を作成する人はHTMLを習得して記述する必要がなくなりデザイナーやコーダーは文字や画像が変更される、そして新たなページが追加される度にページの更新をする必要がなくなる。

 

 それぞれの違い

 静的ページではWebページがhtmlとして存在するので、リクエストされたページ(html)をブラウザにレスポンス(表示)するだけなので実行するまでが早いが、

動的ページはWebサーバ上でプログラムが作動するので、プログラムを実行するためのCPUに負荷がかかり静的ページよりは表示するのが遅い

 

さらにこの二つのページには決定的な違いがある

静的コンテンツはWebページHTMLとして存在しており、そのホームページからたどることの出来る全てのデータが検索エンジンに蓄積する。

対して、動的ページはWebページ中に表示用として存在する動的コンテンツのURLは蓄積の対象になるがそれ以外に表示パターンは検索エンジンの巡回の対象とならない。

 

作成したWebページを検索エンジンの検索結果に表示させたい場合は

・ホームページをGoogleに登録する

・メタタグを最適化する

ソーシャルメディアのプロフィールにホームページをリンクさせる

などの努力を自分でする事によりなるべく自分のWebページが検索結果の先頭にくるように努力する必要がある。

 

 

HTTPとは?

”Hyper Text Transfer Protocol”の略称

WWW ”World Wide Web”上でWebサーバーとクライアント間でHTMLで書かれた文章などをやりとりする際に使われるプロトコル(通信手順)を意味する。

 

プロトコル

手順、手続きなどの意味を持つ英単語で、通信におけるプロトコルとは、複数の主体が滞りなく信号やデータ、情報をやりとりできるように決められた手順の集合体のこと。

PCや通信機器がデータを送受信する際にそれぞれに対応したプロトコルでないと通信する事が出来ない。

簡単なイメージいうとHTMLの文字コードエンコードが対応したものでないと文字化けしてしまい読めないのということに近いですが、通信が出来ないと言う事は画面にも表示できないですね。

 

PC通信ではプロトコルの役割を複数の階層(段階)に分けて考えている。

複数の階層にする事により、上位プロトコルは自分のすぐ下の(ディレクトリに属する)下位プロトコルインターフェイス(使い方)を知っていればそれより更に下のディレクトリに属するプロトコルの事を気にせずに通信を行える。

要約すると、どのような手段、手順を行うかを指定するソフトウェアのこと。

 

基本的にはテキストデータを使い、ブラウザなどのクライアントがWebサーバに対して特定のコマンドを送るとそれに応じた結果がサーバから送られてくる。

送られてきたHTML、JPEG(静止画像データの一つ.jpg or .jpeg拡張子)といったデータを人間が見やすいようにまとめるのがWebブラウザの仕事。

ブラウザの性能によってはテキストしか表示できないWebブラウザもあるので必ずしも全てのWebブラウザで同じ見た目になるとは限らない。

 

HTTPの特徴として、ステートレス(1回コマンドを送ると一回結果が送られてくるという意)であるということ。

メリットはプログラムがシンプルであるということ。

デメリットは複数回のコマンドのやりとりを追跡できないということ。

またHTTPファイルはデータが暗号化されないため、通信経路のどこかで内容を知られる危険性がある。

なので第三者に知られたくない情報のやり取りをする場合には別途暗号化を行うか、暗号化されたHTTPSという通信手順を使う必要がある。

 

 

 

HTMLとは?

Hyper Text Markup Languageの略

Webページを作るための最も基本的なマークアップ言語の一つ。

テキストファイルに様々なタグを使うことで文字や画像を表示させることが可能な命令文の集合体文書。

もう何度も使っていますが使えるだけでは本当に意味を理解したことにはなりませんね。

 

ハイパーテキストリンクとは?

普通のテキストとは違い文書中の指定箇所にリンクを貼ることができ、他のページに移動することが出来る。

マークアップとは?

印を付ける、という意味だが、HTMLにおいてはソースにタグを付けていることからその名前がついた。

 

 

というわけで、これらの意味を調べていた訳ですがまとめると、

静的ページ・・内容が固定されたページ

動的ページ・・内容がリクエストによって変化するページ

HTTP・・クライアントとWebサーバーが通信しあう為の手段を指定するソフトウェア

HTML・・作成者の構成により文章、画像、デザインなどを幅広く指定出来るテキストファイ

ということです!

 

 

 

JavaScriptに対して理解を深める。

先日やったところも復習を兼ねてやっていました。

HTML、CSSPHPJavaScript と様々な言語を扱うようになってきたのでだんだん

どれがどういう使われ方、書き方なのかを忘れないように定期的にやっていきたいです。

 

実際に簡単な変数を使ってルールや使い方を確認していました。

僕が作ったHTMLです。Jaba

f:id:ysm_0pro:20160323195837p:plain

これのソースがこちらです。

f:id:ysm_0pro:20160323195959p:plain

f:id:ysm_0pro:20160323201150p:plain

本来なら画像ではなくてページで参照したいのですが...

これも昨日言っていた事なのに、出来なかったというのは時間の使い方を間違えたなぁと思うところです。

 

前回やっていなかった所の説明です。

まず43行目から51行目ですね。

変数に代入と宣言を同時にする事が出来るというのは前回やりましたが、

文字と数字を複合させて表示するのはやっていなかったと思います。

これは50行目を見れば一発なのですが、

  document.write(c+month+w+days)  

この式の+というのは変数と変数を繋ぐためのもので

"1+2=3"のような算数的"+"ではありません。

なので変数に指定された内容を代入した時に

"3月22日" という今日の日付が出てきます!

 

続いては53行目から59行目ですね。

まず55行目からです。

これは変数の中身を変えてしまうソースです。

ここで登場する"A"という変数は25行目で宣言されているものです。

"A=100"となっています。

document.write(A+"<br>");のソースを書いた後、

    A=A+50  という数学的にはあり得ない数式を書きます。

ですがもちろんこれはあくまでJavaScript内での話です

    A=A+50  は、Aを「A+50」の変数に変更しろ!という命令を出しています。

なのでこのソースは"150"と答えを出します。

 

続いて57行目のA=A++の意味についてです。

このA=A++はAを「A+1」の変数に変更しろ!という命令を出しています。

つまりA=A+1の式と一緒ですね。ですが注意点が一つ。

55行目でAを150に変えてしまっているのでここで出される答えは

"151"となります。

この変数を元に戻すソースもありますがそれはまた後日記載します。

 

 

では最後にタイピング結果です。

f:id:ysm_0pro:20160317193734p:plain

ミスがの減りが安定しています。

スピードを早くするためにはタイピングを正しい指で正しく入力するのが

一番早道だそうです。今まで我流だったので...

以上が本日の進捗になります。

 

 

参考サイト

http://juen-cs.dl.juen.ac.jp/html/www/005/

e-words.jp

http://abhp.net/hp/HP_JS_002000.html

http://www.pori2.net/js/kihon/6.html

http://www.htmq.com/html/script.shtml

http://www.ajaxtower.jp/js/num/index2.html

http://www.ocn.ne.jp/support/words/ghi/HTTP.html

https://www.nic.ad.jp/ja/basics/terms/http.html

http://e-words.jp/w/%E3%83%97%E3%83%AD%E3%83%88%E3%82%B3%E3%83%AB.html