calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

すごい便利になった！javascript入門の基礎知識と小技まとめ

  • 作成：2013/12/24
  • 更新：2014/11/01
  • Web制作 >
JavaScript_Reference

サイト構築中にちょっとした動きをのせたいとき、どうすれば良かったのか何度も調べ直さないといけないことがあります。今回はJavaScript で初心者の方でもすぐ活用できるように、使用頻度の高いリファレンスと基本知識をまとめました。

エンジニア速報は Twitter の@commteで配信しています。

Sponsored Link

もくじ

できること

スクリプトの書き方／基礎知識

できること

１．リファレンス

reference_jscript

JavaScriptは開発環境の準備がほぼ不要で、コピー＆ペーストだけで、動くものができてしまいます。他の言語だとそう簡単にはいきません。サイトを構築する上で使用頻度が高く、何度も調べてしまうものをリスト化してまとめました。

スクリプトの書き方／基礎知識

自分のおさらいも兼ねて、最低限覚えておきたい言葉や関数などをまとめました。

２．スクリプトの記述

description_script_jscript

コンパイル言語は事前翻訳後、文章に間違いがないかチェックするイメージ、それに対しJavaScriptはスクリプト言語で１行ずつ同時翻訳しながら機械に伝えていきます。HTML5ではscript要素内にスクリプトを記述する場合は、scriptタグ内（＜script＞～＜/script＞）に挟むだけでよくなりました。

３．文字列／特殊文字

string_jscript

JavaScriptでは、「"」（ダブルクォーテーション）、もしくは「'」（シングルクォーテーション）で囲んだものはすべて「文字列」となります。ダブルクォーテーションで囲まれた文字列内にダブルクォーテーションを含める場合は\"、シングルクォーテーションは\'と「バックスラッシュ」を指定します。こちらは様々な文字列の検索・マッチング・置換・分割・連結などの記述例と特殊文字一覧です。

４．演算子

operator_jscript

演算子とは演算を表す記号で四則演算（加・減・乗・除）、ビット演算子、論理演算子、比較演算子、代入演算子などがあります。こちらは四則演算を示す 「算術演算子」や他のものについて、優先順位も簡単に解説してあります。

５．オブジェクト

object_jscript

JavaScriptは、ほぼすべてのものをオブジェクトとして扱います。オブジェクト指向とはプログラミングの単位を「物」と考えてアプリケーションを構築する概念です。物に話しかけると持っている情報を答えてくれるイメージ。こちらによると「ある事象をオブジェクトという単位で分解・整理して、認識・再現すること」といった感じ。文字や画像、フォームやフレームなどはオブジェクトにあたります。

６．プロトタイプ

prototype_jscript

オブジェクトをつくるためには設計図が必要です。オブジェクトの名前・色・動きなどを決めている設計図をプロトタイプと呼んでいます。

７．イベント

イベントは「出来事」という意味もありますがJavaScriptでは、何か出来事が起こったときに、それを通知してくれる仕組みのことです。クリックされた、キーボードが押されたなどですね。イベントリスナーはイベントの通知を聞く人を指します。イベントを受け取って処理するものです。

８．変数

variable_jscript

変数は数の値や文字列を一時的に入れておく箱。箱に入っている値を参照でき、その箱の名前を変数名といいます。また変数名はアルファベットやアンダーバーの文字で始める、大文字小文字の区別、予約後などの規則もあります。こちらはスクリプトで利用する変数名や関数名として使うことができないキーワード、文の区切り方、変数名の規則など。

９．if文

if～else文は「もし～なら実行する、違うなら～を実行する」というシンプルな構文です。「｛　｝」はブロック文といって処理する範囲。if～elseは沢山つなげて複雑な分岐を設定できます。

１０．配列

配列は変数を列のように並べてひとまとめにしたようなもの。データを列にした情報の固まりで、配列のスタートは「0」から始まります。例えば配列に４つの要素が入っていれば配列は「0~3」となります。

１１．連想配列

associative_array_jscript

連想配列は値に名前を付けることができ、それを順番に取り出すことができます。キーを指定して値をセット出来る配列です。

１２．正規表現

文字列のパターンマッチングを行う際に用いられたりします。以下は正規表現（文字の一致）に関するまとめです。

１３．デバッグ

debug_jscript

デバッグはバグを取り除くことですが、JavaScriptではブラウザを使ってデバッグします。以下はChrome DevToolsを使ったデバッグや基本的な使い方。

スポンサード リンク

関連記事

Comments

Leave a Comment

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。