2014年7月18日金曜日

?日目|条件分岐とフローチャート(JavaScript)

if文の構造

今日学んだこと


  • フローチャート

    紙とペンを使って書く練習をしました
  • 比較演算子
  • 条件分岐 if文

    こんなのを書きました。
    テキストボックスに入力した数字が、とある数で割り切れるか、割り切れないかを出すプログラム。
    「%」(余剰演算子)がはじめて出てきました。
    • <title>テスト</title>
      </head>

      <body>
          <script type="text/javascript">
              function keisan(a) {
                  var c = Number(a);
                  var hantei= "";
                  if(c % 100 == 0){
                      hantei="100で割り切れる";
                  }else if(c % 5 == 0 ){
                      hantei = "5で割り切れる";
                  }else{
                      hantei = "100でも5でも割り切れない"
                  }
                  document.getElementById("answer").innerHTML = hantei;
              }
          </script>
          <input type="text" id="num1">
          <input type="button" value="判定する" onclick="keisan(num1.value);">
          <br>答え
          <div id="answer"></div>
      </body>
      </html>
その他メモ

if構文に慣れる練習。

単語がスムーズに頭に入りません。

メソッド、クラス、とか。
この辺りをちゃんと覚えてないのはやばい。
「今のはどういう意味だっけ?」と考えてるうちに授業が先に進んでしまう。


変数、パラメータ(引数)くらいは分かるようになってきました。

function...?
var...?













2014年7月9日水曜日

16日目|CSSの書き方 復習

プログラミングを学ぶ講座ですが、CSSについても勉強しました。
使ってないと忘れてしまうので復習。


  • 書き方が3通り
  1. HTMLファイル内に書く→<head>〜</head>
  2. HTMLタグに直接記述
  3. 外部ファイルに出す→おすすめ


  • 2種類の要素
    • ブロックレベル要素
       例:<p>,<h1>,<li>,<div>など
       これらは段落を形成する。
    • インライン要素
       例:<a>,<b>,<strong>,<span>など
       リンクや強調するときなどに一部分のパーツとして使う。 ブロックレベル要素の内部で使用してこそインラインになる。


ちなみに強調を表す<b>要素の使用は好ましくない。
マークアップのルール上、正しいのは<strong>。
検索エンジン対策的にもこっちの方が良い。
この辺りに詳しい。

i, b, em, strong 要素
多くの HTML4 の要素が変更されることなくそのまま HTML5 にもたらされたが、いくつかの装飾的な要素にはセマンティックな意味が与えられた。
<i> と <b> を、意味的にはっきりとしている <em> と <strong>と見比べてみよう。要約すると:
  • <i> — イタリックだったが、今は“代替の声”を表すテキストになった。外国の単語、技術用語、印刷慣例でイタリック体で表されるテキストなどだ。(W3C:MarkupWHATWG)
  • <b> — ボールドだったが、今は“意味的に区別したい”テキストになった。キーワード、印刷慣例で太字で表されるテキストなどだ。 (W3C:MarkupWHATWG)
  • <em> — 単なる強調だったが、今は強勢になった。つまり、トーンを変えて言いたいようなものに使うのだ。(W3C:MarkupWHATWG)
  • <strong> — さらに強い強調を表していたが、今は強い重要性を表す。基本的には同じだ。(ネストすることで、さらに強い強調や重要性を示すことができるようになった。)(W3C:Markup,WHATWG)

(引用先:html5.jp)

<b>は今は死後になった?掲示板投稿でお世話になった気がする。
当時は文字が太くなるだけでも面白くて、いろいろ使って遊んでいました。

関係ないけどフォントの話。
WindowsのMSフォントは汚い・・・。
個人的にメイリオは好きなんだけど。
Macの人はOSAKAやヒラギノがあって幸せ。
Linuxには「IPA」というオープンソースのフォントがあるらしい。

Windows上でWebページを見ると、
行と行の間の空白、いわゆる行間がとても狭い。
(MSフォントの性質なのか?Windowsの性質なのか?)

CSSでline-height: 1.5くらいにしといて読みやすくしておくとgood。
デフォは「normal」、単位をつけなければ1.5→1.5emと認識される。



2014年7月7日月曜日

15日目|form(HTML)

今日学んだこと

  • コマンドプロンプト(ネットワークの調査)

    単語:ホップ数 TTL
  • FireFoxのアドオン
  • Fire bug 
  • html Validator
  • FireGestures
  • Tab Mix Plus



その他メモ
Windowsコマンド集(機能別一覧):日経Windowsプロ/ITpro

少し記録をサボってしまいました。
ちゃんと数えたら今日で15日目。

毎日頭に知識を詰め込んでいるおかげで、先月の自分と比べて、賢く(?)なっているような気分になります。
実際にはたくさん忘れているので危険です。

それでも新しいことを覚えるのは楽しいです。

そういえば、
最近読んだ本に書いてありました。
“「勉強している」という事実になんとなく安心しているだけだとしたら、それは明らかな死に銭(時間とお金の浪費)です”

マジか・・・。


振り返ったときに、自己満足ではなく自己投資だったと思える日々にしたいです。




ブログの書き方がバラバラだったので統一することにしました。

授業で学んだことは
今日学んだこと→ここに書きます

あとの個人的なメモや気になったこと、記しておきたいリンク先は
その他メモ→ここに書きます


HTMLを学んだのだから全てタグを打って書けそうな感じですが、
時間的に無理なので、bloggerのテキストエディタに頼っています。


2014年7月3日木曜日

9日|JavaScript概論

いよいよ本格的に「プログラミング」っぽい内容に入りました。

それまでは2進数・16進数の計算やプログラムの歴史、(なぜか)EXCELなど、
プログラミング以外の講義を受けました。

でも個人的にはこの「以外」の部分が楽しい。
がっつりプログラムを学びたい人は物足りないかもしれませんが。

でも周りの雰囲気を見ていると、他の皆さんも「以外」の勉強を楽しんでいる気がします。

今日は序盤中の序盤。


  • 言葉の意味(クラス、メソッド、プロパティなど)
  • オブジェクト指向とは
  • 変数
  • アラート
  • If構文


まだ言葉の意味が頭に入っていません。
先生の話は8割くらいしか理解できてません。

先生曰く「難しい話は頭に流すだけ流しておいて、実際に書きながら理解していきましょう」と。


訓練学校では数名の講師が日替わりで授業をします。
JavaScriptの先生は授業スピードが一番早い。

よくわかるJavaScriptの教科書(マイナビ)
たにぐち まこと[著]
ISBN978-4-8399-4187-1
2012/03発売 (2版)


授業ではこのテキストを使って、サンプルを書きながら進めています。
「基礎の基礎から解説されているし、jQueryについても詳しいので学びやすい」のだそう。
難しい言葉を避けて書かれていて読みやすい。
著者のWEBサイトを見てみたら、とても若い方で驚きました。




2014年7月1日火曜日

メモ・HTML5 セクション要素について


その他メモ
  • セクション

    セクション→章・節・項などの範囲
  • セクションの範囲をあらわす要素は4種類
    • section
    • article
    • aside
    • nav


<section>
<article>という要素。つかいこなせる気がしない。

  HTML5流のタグの書き方で特に難しいと感じました。 

勉強している本には「section要素はセクションに対して使う」という説明。
だから、セクションって何???

「章・節・項」もぼんやりしててよく分からない。
学術論文の書き方を勉強した人なら分かるのかもしれません。
文章量が多いWebサイトなら便利なのかも。

本の後半にはお約束の「WEBサイトをまるごと作ってみよう」という章があります。
ここでは主要な部分をHTML5未満と同じようにマークアップしています。

<header>
<ul>
 <li>メニュー1</li>
 <li>メニュー2</li>
</ul>
</header>
<main>
  メインコンテンツ
</main>
<div id="sub">
  サブコンテンツ
</div>
<footer>
 フッター
</footer>


マークアップがある程度できてから
「このままでも問題ありませんが、せっかくですのでHTML5から新しく導入されたセクション関連の要素でもつけてみましょう」と以下のようにしています。

<header>
<nav> …ナビゲーション
<ul>
 <li>メニュー1</li>
 <li>メニュー2</li>
</ul>
</nav>
</header>
<main>
<section>…主コンテンツ
  メインコンテンツ
 </section>
</main>
<div id="sub">
<aside>…主コンテンツではないセクション
<section>
  サブコンテンツ
</section>
</aside>
</div>
<footer>
<aside>…主コンテンツではないセクション
<section>
 フッター
</section>
</aside>

</footer>



書くことだけ増えてメリットが少ないような・・・。
セクションを示すメリットは
  • セクション(章)の範囲が明確に分かる
  • 親子関係・文章構造が明確になる
  • 検索エンジンの検索精度を向上させる?
注意したいこと。
  • 書く順番はarticle>section 
  • CSSでのデザイン目的でセクションを使わない。
    (代わりにdiv要素を使うことが推奨される。)

文章量の多いコンテンツで使いこなせば、「何でも<div>で囲ってしまう」モヤモヤを解決してくれそう。

セクション=章である。
「章」っぽい内容は<section>でマークアップできる。(必須ではない)と解釈しています。

このあたりはHTML5が広まりつつあるなかで、まだ転換期だそうで。

参考リンク ※これから読む

・第5回目 HTML5で新しく定義された新要素「article要素」の使い方の基本をまとめよう(MdN Design Interactive > 特集記事 > Web デザイン)
・HTML5の勉強を始めた際に使い方に迷う新要素「section要素」の基本と使い方をまとめてみました【MdN連載第4回目】
・HTML5“とか”アプリ開発入門(文書構造編:前編)HTML5のセクションで“文書構造”を理解する (1/2) - @IT
・section 要素 - html5doctor - HTML5.JP
・HTML5 アプリケーションをビルドする - HTML5 によるアクセシビリティの設計

最近、自分に「リンクを貼ったら満足して中身を読まない」癖があると気づきました。
とりあえずリンク、とりあえずブックマーク、というのは便利だけど、危ないですね。