2014/04/08

Javascript入門①

ドットインストールの「Javascript入門」を少しずつまとめていきます。
http://dotinstall.com/lessons/basic_javascript_v2

Javascriptとは何か？

概要

  • 主にブラウザに実装されているスクリプト言語
  • 動きのあるWebサイト制作に使われる。
  • Javaとは別物。

リファレンス

必要な知識知識

  • HTML
  • CSS

ツール

  • ブラウザ(Google Chrome)
  • エディタ

はじめてのJavascript


  • 書き方は2通り

    • HTMLファイル内に記述

      < script>
      console.log(“hello,world”);
      < /script>

    • 外部ファイル参照の場合は以下で取得

      < script src=”myscript.js”>< /script>

  • console.logの確認はChromeならChromeDeveloperToolの「Console」タブで確認
    Chrome Developer Toolは「Ctrl + Shift + i 」で表示。

  • 文末は;(セミコロン）で区切る
  • 複数行のコメントは以下で記述

    / *
    コメント文
    */

  • 単一行のコメントは以下で記述
    // 一行コメント

変数を使ってみよう

変数

  • データにつけるラベルの事。
  • 変数宣言は以下で行う。
    var msg;
    msg = “hello,world!”;
    console.log(msg);
  • 宣言と代入を同時に行う事も可能。
    var msg = “hello,world!”;

データ型

  • 数値
  • 文字列
  • 真偽値（True／False)
  • オブジェクト
    • 配列
    • 関数
    • 組み込みオブジェクト
  • undefined（値が定義されていない）

  • null（意図的に値が無い）

    • -
by trackmyblog.com23:31No comments

2014/04/06

Javascript基礎文法マスター（随時更新）

Javascriptとは

  • オブジェクト指向型（プロトタイプベース）の軽量なスクリプト言語

Javascriptの特徴

  • スタンドアローンの言語としては不便だが、ウェブブラウザなどの他製品やアプリケーション上での実装、動的なWebサイト構築等が得意。
  • Javascriptの仕様は、ECMAScriptというスクリプト言語で定められている。EMACScriptはコア言語とも呼ばれる。
    （ECMAScriptを各社で実装したのが、Mozilla社のJavascriptだったり、MicrosoftのJScript、AdobeのActionScriptだったりする。）
  • クライアントサイドJavascriptは、コア言語に加えて、ブラウザ&DOMコントロール用オブジェクト を拡張している。
  • サーバサイドJavascriptは、コア言語に加えて、サーバ上でのJavascript実行関連オブジェクトを拡張している。
  • Javascript ≠ Java。別物。オーストリアとオーストラリアくらい違う。

他言語との違い

  • クラス（似たオブジェクトを量産するための仕組み）が無い。
    • 通常クラスという「型」を元にして、クラスの特設（属性や機能）を引き継いだオブジェクト（「実体」）を作成する
  • クラスで行っていた、同等特性のオブジェクト量産は、
  • 関数自身もオブジェクト

実行の仕方


  1. HTML／XHTMLファイル内に以下記述で埋め込んで直接実行

    < script >
    　　スクリプト文
    < /script >

  2. 外部スクリプトファイル（「ファイル名.js」)として以下記述で呼び出して実行

    < script src = “ファイル名.js”>< /script>

書き方

  • 文末にセミコロン(;)をつける
  • 大文字、小文字は区別される（NUMとnumは別物。）
  • スクリプトファイル内の空白、改行は無視される。

出力

  • Javascriptの標準ライブラリには入出力関連の関数がほぼ無い。

  • 出力には以下を使用する。

    • ブラウザへの出力関数(alert)

      alert(“Hello,world!”);

    • コンソールへの出力関数(console.log)

      console.log(“Hello, world”);

コメント

  • コメント（単一行）は以下。

    //ここから1行はコメントです。

  • コメント（複数行）は以下。

    /* ここからは複数行でも閉じるまではコメントです。 */

エラー処理

  • 以下でエラー発生する可能性のある処理と、エラー発生時の対応を記述
    try{
    　　test(“test”)　//エラー発生する可能性のある処理
    } catch(e){
    　　alert(“エラーは”+e+”です。”);

宣言

変数

  • 変数宣言はvarで行う。

    var 変数名

  • 変数宣言と初期化は同時実行可能

    var a=1;

  • 変数には型は無い。

  • 命名規則

    1. 1文字目は、英字、アンダースコア(_)、ドル記号($)
    2. 2文字目以降は1+数字
    3. 変数名の大文字、小文字は区別される
    4. Javascriptの予約語は使えない。

    ◯ _test
    ◯　$num
    ×　　1num

定数

  • 定数宣言はconstで行う。
    const 定数名 =183;

データ型

型はalert(typeof(値))などで確認可能。
  • 数値
  • 文字列
  • 真偽値
  • オブジェクト
    • 関数、配列(Array)、日付(Date)、正規表現(RegExp)・・・
  • null //意図的に値が無い
  • undefined //値が未定義

数値

数値は10進数、8進数、16進数を扱う事が可能。
例として

  • 65535（10進数）
  • -123.56（10進数）
  • 0xffff（16進数）
  • 0x9ab4（16進数）
  • 011（8進数）
  • -3.1E12

文字列

  • “（ダブルクォーテーション）か、’（シングルクォーテーション）で囲む。

    ”このように文字列を記述”
    ‘シングルクオーテーションでもOK’

  • ダブルクオーテーション内の文字列として、ダブルクオーテーションを使いたい場合は、\”を使う。
    シングルの場合も同じ。（\’）

    “ここでダブルを使用する場合は\”と記述”
    ‘シングルの場合は\’と記述’

  • 文字列途中に変数を含む場合は以下のように記述

    alert(“このように” + x + “+で連結します”);

  • 文字列から数値への返還は以下

    parceInt(“123”);　//整数値
    parcefloat(“1.5”);　//少数値

演算子

  • 代入演算子
    • +=、-=、*=、／=、%=
    • <<=、>>=、>>>=
    • &=
    • ^=
    • |=
  • 比較演算子
    • ==、!=
    • ===、!==
    • >、>=、<、<=
  • 算術演算子
    • ＋、―、*、/
    • %（余り）
    • ++　（インクリメント）
    • —　（デクリメント）
    • -a　（符号反転）
  • ビット演算子
    • a & b、a | b、a ^ b、~ a、a >> b、a >>> b
  • 論理演算子
    • a && b （aかつb）
    • a || b （aまたはb）
    • !a (aではない）
  • 特殊演算子
    • 条件演算子
    • コンマ演算子
    • delete
    • in
    • instanceof
    • new
    • this
    • typeof
    • void
      }

オブジェクト

  • オブジェクトは以下のように定義される

    var objName = new Object();
    もしくは
    var objName = {}　//こちらは「オブジェクトリテラル形式」と言う。

  • オブジェクトには以下の種類が有り。

    • 標準ライブラリオブジェクト
      • オブジェクト （Object）
      • 真偽値 （Boolean）
      • 計算 （Math)
      • 数値 （Number)
      • 配列 （Array)
      • 文字列 （String)
      • 正規表現 （RegExp）
      • 日付 （Date）
      • 関数 （Function）
      • エラー （Error）

制御文

if文

var num = 2;
if (num >= 6) {
　　alert(“6以上です。”)
} else if ((num<6)&&(num>=3)) {
　　alert(“3以上6未満です。”)
} else {
　　alert(“3未満です。”)
}

while文

while (true) {
// 無限ループ!
}

for文

for (var i = 0; i < 5; i++) {
　　// 5 回実行されます
　　alert(i+”回目の実行です。”);
　}

関数

function add(x, y) {
　　var total = x + y;
　　return total;
}

参考

by trackmyblog.com19:31No comments

2014/04/03

PHP基礎文法マスター（随時更新）

PHPとは

  • 「Php Hypertext Processing」の略。
  • 他の言語との大きな違いとして、HTML内に組み込むことが出来る。

データ型

  • 扱えるデータ型は以下。
    • 文字列
    • 整数(int)
    • 浮動小数点(float)
    • 真偽値
    • 配列
    • オブジェクト
    • リソース
    • null

    書き方

  • ファイルの拡張子は「.php」
  • 文末は必ずセミコロン(;)をつける。
  • PHPコードは以下の文法の間に書く。ただし、PHPコードのみをファイルに書く場合は、終わりの?>は省略する。
    < ?php ~ ?>

出力

  • print文 or echo文 をつかう。

    print “テスト”;
    echo “テスト”;

    コメント

    （単一行）は以下で指定

    //ここから1行はコメントです。

  • コメント（複数行）は以下

    /* ここから閉じるまでは何行でもコメントです。 */

参考

by trackmyblog.com18:01No comments

2014/04/02

【書籍要約】入門 考える技術・書く技術

ドキュメント作成、文章表現のスキルアップのために
気になっていた「入門 考える技術、書く技術」を読んだので、
内容要約してみました。

入門　考える技術・書く技術

わかりやすい伝え方に必要なステップを一から学ぶことができる良書でした。
いくつもあるロジカル本の中でも個人的に一番わかりやすかったです。
-------------------------------------------------------------

0. 誤解に気付く

  • × 【誤解1】自分が書きたい事を書く→ 読み手が知りたい事を書く。
  • × 【誤解2】起承転結で書く → まず結論。それから理由・詳細。
  • × 【誤解3】とりあえず書き始める → まず考えを整理する。それから書く。

1. 読み手を理解する

読み手は、なんで忙しい中わざわざあなたの話を聞くか？
→ 読み手が「この人おれの知りたい事に答えてくれるかも！」と思うから。
→ 読み手の知りたいことに答えないと。
  • 読み手って誰？
  • 読み手の知りたい事って何？
    • OPQ分析の大原則
      • O(Objective)
        読み手の望ましい状況 「読み手はどうしたい？」
      • P(Problem)
        読み手にとっての問題＝Objectiveとのギャップ 「読み手の希望に対して実際はどう？」
      • Q(Question)
        OPで読み手が抱くであろう疑問 「読み手はそういう時どう思う？」
      • A(Answer)
        Qに対する読み手の結論（答え） 「読み手はこうするべきでは？」
        ＋
      • レール
        文章のテーマ、ものさし
    • OPQ分析のポイント
      • 全て主語を「読み手」にして読んでみて変じゃない？
      • レール(文章のテーマ)がずれていない？
      • QOPQAのQへの回答Aは直接の回答になってる？

2. 考えをまとめる

概要
以下を繰り返す
  • WhySo なんでそうなるの？(結論(答え) → なんで？ → 理由）
  • SoWhat だから何なの？(理由 → だから何？ → 結論(答え)）

3. 考えを整理する

  • 帰納法で考える（推論である結論（答え）が本当に正しいか？理由が裏付ける）
    • まず結論(答え)を冒頭に置く。
    • 次に理由。 WhySoチェック。 「なぜならば、例えば、具体的には」+「下部メッセージ」で不自然じゃない？
    • 下部メッセージの「つなぎ言葉」は全て同じ種類か。
  • 演繹法で考える（全ての前提（下部メッセージ）が正しければ、結論(答え)も絶対に正しい。）
    • その前提は本当に間違いなく正しい？
    • 縦と横の2次元を意識する
      • 縦の関係＝「論理の帰結」＝上が結論、下が根拠／説明
      • 横の関係＝「ロジックの流れ」＝同種類のメッセージ群
    • ピラミッドの縦横を無視しない
    • 同じメッセージの繰り返しに注意
  • メッセージ作成のポイント
    • 名刺表現、体言止めは禁止（メッセージでは無く単語になってしまう）
    • 「あいまい言葉」は禁止(見直し、再構築、適切な、問題　等)
    • 1つのメッセージは1つの文章。
    • 構成を、結論とメッセージの構造がひと目でわかるようにする
    • 列挙する事柄は5個まで。(マジックナンバー7±2の下限値)
    • しりてが接続詞は禁止(〜し、〜であり、〜して、〜だが、〜せず)←前後関係がAndで論理関係が無い
    • ピラミッド内で文章を書こうとしない（構成作成と文書作成は分ける）

4. 文章を書く

  • メッセージ毎に段落を作る（メッセージは冒頭に）
  • メッセージの塊をわかりやすく
  • 文章同士をロジカル接続詞でつなげる
    時間／対比／原因・結果／目的／条件

5. 具体的なアクション

  1. まず「だれが何を知りたい？」
  2. 次に「知りたい事の答えは～。なんでかっていうと～だから。」
  3. チェック「文章がロジカル接続詞でつながってる？」
  4. 最後に「自分が読み手だったとしてこれ読んで納得出来る？」
by trackmyblog.com20:41No comments

2014/01/23

「Your VM has become "inaccessible."」メッセージでVagrant起動に失敗した場合の復旧方法

Vagrant環境の起動(Vagrant up)を実行した所、
以下メッセージで起動に失敗した時の復旧方法になります。
-----------------------------------------------------------------------
C:\HashiCorp\Vagrant\localdev>vagrant up
Bringing machine 'default' up with 'virtualbox' provider...
Your VM has become "inaccessible." Unfortunately, this is a critical error
with VirtualBox that Vagrant can not cleanly recover from. Please open VirtualBox
and clear out your inaccessible virtual machines or find a way to fix
them.

C:\HashiCorp\Vagrant\localdev>
-----------------------------------------------------------------------

VirtualBox上で確認すると、「アクセスできません」というステータスで
操作できなくなっているようです。




ここで、
対象のVirtualBox用ディレクトリにある仮想マシンイメージファイル（.vox）
の「xxxxxx.vbox-tmp」を「xxxxxx.vbox」にリネームして、
Virtualboxを再起動すると「中断」状態で正常認識されました。


この状態で再度vagrantupを実行すると正常起動を確認できました。
-----------------------------------------------------------------------
C:\HashiCorp\Vagrant\localdev>vagrant up
Bringing machine 'default' up with 'virtualbox' provider...
[default] Clearing any previously set forwarded ports...
[default] Creating shared folders metadata...
[default] Clearing any previously set network interfaces...
[default] Preparing network interfaces based on configuration...
[default] Forwarding ports...
[default] -- 22 => xxxx (adapter 1)
[default] Booting VM...
[default] Waiting for machine to boot. This may take a few minutes...
-----------------------------------------------------------------------

Virtualbox上でも正常起動が確認できました。




直前にvagarant halt実行しないまま、うっかりPCシャットダウンしてしまったので、間違いなくそれが原因だと思います。。
この時、起動時に参照するべきVirtualBox用仮想マシンイメージファイル（.vox）が正常終了していないためにtmpファイルとして別名保存されていたようです。

同様の現象の場合はお試しあれ。

by trackmyblog.com9:341 comment
登録: 投稿 (Atom)