使い方aboutお問い合わせ広告掲載すごい便利になった!javascript入門の基礎知識と小技まとめ作成:2013/12/24更新:2014/11/01Web制作サイト構築中にちょっとした動きをのせたいとき、どうすれば良かったのか何度も調べ直さないといけないことがあります。初心者の方でもすぐ活用できるように、使用頻度の高いリファレンスと基本知識をまとめました。Linkもくじできること1.リファレンススクリプトの書き方/基礎知識2.スクリプトの記述3.文字列/特殊文字4.演算子5.オブジェクト6.プロトタイプ7.イベント8.変数9.if文10.配列11.連想配列12.正規表現13.デバッグできること1.リファレンスJavaScriptは開発環境の準備がほぼ不要で、コピー&ペーストだけで、動くものができてしまいます。他の言語だとそう簡単にはいきません。サイトを構築する上で使用頻度が高く、何度も調べてしまうものをリスト化してまとめました。自分のおさらいも兼ねて、最低限覚えておきたい言葉や関数などをまとめました。2.スクリプトの記述コンパイル言語は事前翻訳後、文章に間違いがないかチェックするイメージ、それに対しJavaScriptはスクリプト言語で1行ずつ同時翻訳しながら機械に伝えていきます。HTML5ではscript要素内にスクリプトを記述する場合は、scriptタグ内(<script>~</script>)に挟むだけでよくなりました。HTML5タグリファレンス3.文字列/特殊文字JavaScriptでは、「"」(ダブルクォーテーション)、もしくは「'」(シングルクォーテーション)で囲んだものはすべて「文字列」となります。ダブルクォーテーションで囲まれた文字列内にダブルクォーテーションを含める場合は\"、シングルクォーテーションは\'と「バックスラッシュ」を指定します。記述例と特殊文字一覧です。「算術演算子」や他のものについて、優先順位も簡単に解説してあります。演算子/JavaScriptリファレンス演算子5.オブジェクトJavaScriptは、ほぼすべてのものをオブジェクトとして扱います。オブジェクト指向とはプログラミングの単位を「物」と考えてアプリケーションを構築する概念です。物に話しかけると持っている情報を答えてくれるイメージ。こちらによると「ある事象をオブジェクトという単位で分解・整理して、認識・再現すること」といった感じ。文字や画像、フォームやフレームなどはオブジェクトにあたります。MDN6.プロトタイプオブジェクトをつくるためには設計図が必要です。オブジェクトの名前・色・動きなどを決めている設計図をプロトタイプと呼んでいます。maeharinの日記7.イベントイベントは「出来事」という意味もありますがJavaScriptでは、何か出来事が起こったときに、それを通知してくれる仕組みのことです。クリックされた、キーボードが押されたなどですね。イベントリスナーはイベントの通知を聞く人を指します。イベントを受け取って処理するものです。変数は数の値や文字列を一時的に入れておく箱。箱に入っている値を参照でき、その箱の名前を変数名といいます。変数名はアルファベットやアンダーバーの文字で始める、大文字小文字の区別、予約後などの規則もあります。こちらはスクリプトで利用する変数名や関数名として使うことができないキーワード、文の区切り方、変数名の規則など。Javascriptの変数とコメント言語仕様/JavaScriptリファレンス9.if文if~else文は「もし~なら実行する、違うなら~を実行する」というシンプルな構文です。}」はブロック文といって処理する範囲。if~elseは沢山つなげて複雑な分岐を設定できます。配列は変数を列のように並べてひとまとめにしたようなもの。データを列にした情報の固まりで、配列のスタートは「0」から始まります。配列に4つの要素が入っていれば配列は「0~3」となります。連想配列は値に名前を付けることができ、それを順番に取り出すことができます。キーを指定して値をセット出来る配列です。文字列のパターンマッチングを行う際に用いられたりします。以下は正規表現(文字の一致)に関するまとめです。MDN13.デバッグデバッグはバグを取り除くことですが、JavaScriptではブラウザを使ってデバッグします。DevToolsを使ったデバッグや基本的な使い方。投稿者:commte株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。した話し方をするおっさん。この後によく読まれている記事2016/02/8意外と今っぽくなる、CSSやjQueryで実現するエフェクトまとめCSSやjQueryで実現する、今までにないようなエフェクトを実現するために知っておくと便利なエフェクトをまとめました。トレンドをおさえた最近のものを厳選してピックアップ。2015/10/5スマートフォンサイト構築時に気をつけたいポイント集スマートフォンサイト構築時のコーディングで気を付けたいポイントを次回コーディングの時のためにメモしておきます。デバイスを横向きにした2014/01/27完璧に分かる!コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)前回、Web制作の一連の流れを書きましたが、今回は少し掘り下げて「コーディング」についてのフローをまとめます(HTML5+レスポンシブ+WordPress)。会社によって違うと2013/10/15見栄えが良くなった!CSSやHTML5の役立つ総まとめ先週、WordPressとEC-CUBEのレイアウトを変更しなければいけなくて、久しぶりにいじっておりましたが、忘れていたり知らなかったことが沢山ありました。コメントデータの処理方法の詳細はこちらをご覧ください。