すごい便利になった！javascript入門の基礎知識と小技まとめ
作成：2013/12/24 更新：2014/11/01 Web制作 > サイト構築中にちょっとした動きをのせたいとき、どうすれば良かったのか何度も調べ直さないといけないことがあります。今回はJavaScript で初心者の方でもすぐ活用できるように、使用頻度の高いリファレンスと基本知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ できること １．リファレンス スクリプトの書き方／基礎知識 ２．スクリプトの記述 ３．文字列／特殊文字 ４．演算子 ５．オブジェクト ６．プロトタイプ ７．イベント ８．変数 ９．if文 １０．配列 １１．連想配列 １２．正規表現 １３．デバッグ できること １．リファレンス JavaScriptは開発環境の準備がほぼ不要で、コピー＆ペーストだけで、動くものができてしまいます。他の言語だとそう簡単にはいきません。サ
CSSのセレクタ部分(IDやCLASS)にハイフンとか使われるの好きじゃないなー。ボクはあまり好きじゃないなー - latest log
「CSS の ID 名や CLASS 名の単語の連結にハイフンを使うべき、キャメルケースとかアンダーバーとかダメ」的な主張を去年ぐらいにどこかで読んだ記憶があるのですが(うろおぼえ)、 /* たしか… これがオススメのスタイルで */ .hoge-huga-piyo {...} /* これとか… */ .hoge_huga_piyo {...} /* これはイケてない(らしい) */ .hogeHugaPiyo {...} 個人的には「ちょっとそれ CSS に寄り過ぎてて、視野せまくないかー」という考えをもっていたので、つらつらと書いてみます。 E:first-child や E[key|="value"] などのハイフンを前提とした構文に関してはもちろんありですよ。ここで取り上げてるのは、属性セレクタや擬似クラスセレクタについてではなく、IDセレクタ と CLASSセレクタ についてです
faviconを円グラフにしてアニメーションできる「Piecon」:phpspot開発日誌
(65%) Piecon / Pie charts in your favicon! faviconを円グラフにしてアニメーションできる「Piecon」。 処理の進捗に応じてtitleタグを書き換える方法もありますが、faviconで円グラフを描くというのは斬新な発想ですね。 画面遷移無しで処理に時間がかかるような時に表示させてあげると他のサイトを見ながら進捗も図形で一目で分かってかなり親切です。 16x16ピクセルをいかに使うかといったところですが、円グラフはちょうどマッチしていて、ナイスアイデアと言わざるをえませんね。 jQuery等に依存せずに単体で使うことが出来る所も特徴。 ブラウザによってはfaviconのアニメーションができませんが、タイトルタグの書き換えによって進捗も分かるようになっています 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js
faviconにアニメーション付きのバッジをつけられる「favico.js」:phpspot開発日誌
favico.js - Make a use of your favicon faviconにアニメーション付きのバッジをつけられる「favico.js」 faviconに通知等の件数を付与し、単に付与するだけではなく、アニメーションをつけられるJS。 タブがバックグラウンドにある時に、分かりやすいですね。 このライブラリを利用して簡単に実現できるので通知等があるサイトの場合は実装しておくとよいかもですね 関連エントリ faviconを円グラフにしてアニメーションできる「Piecon」
昨今のWebアプリケーションのひな形その2 - Grunt - naoyaのはてなダイアリー
昨日の続き。 こういうアプリケーションのテンプレートを管理するのに便利な仕組みはないですかねーと言っていたら @teppeis さんや @omo2009 さんに Grunt や Yeoman はどうかと教えてもらった。 Grunt はユースケースとしては JavaScript の連結や圧縮、SCSS/LESS なんかのメタ言語のコンパイルをするときに使うもの、つまり rake なんかと同じようなものと以前にチラ見した程度で知った気になっていたけども、ちょっと違っていた。Grunt は確かにタスクランナーではあるのだが、Node.js で実装している利点を十分に活かして、任意のファイルが更新されたのをトリガに一連のタスクを実行させたり、Grunt で Webサーバーを立ち上げて他のタスクと連携させたりといったことができるようになっている。プラグインの仕組みがあって、エコシステム的に結構活発に
昨今の自分用Webアプリケーションひな形 - naoyaのはてなダイアリー
ちょっと jQuery と簡単なサーバサイドの処理を組み合わせた処理を試しに書いてみよう･･･なんて時に、いちいち jQuery を取ってきて HTML を書いて script タグを書いてロードして sinatra 立ち上げて云々･･･というのが毎度面倒なので、ひな形になるアプリケーションを作った。 https://github.com/naoya/boilerplate ひとまず sinatra でサーバーサイドを書き、HTML は slim で、CSS は sass 。JavaScript は CoffeeScriptで書くにあたって jQuery、underscore、Backbone をロードしてある、というような構成にしてあります。 まあ、この類のことは人それぞれ自分なりにカスタマイズしてやっていると思いますが、どういうコンポーネントで構成しているかを、備忘録も兼ねてちょっと紹
私が今までクロージャを理解できなかった理由 - プログラミングを勉強するブログ
Javascriptを勉強する上で誰もがつまずくと言われるクロージャですが私も例に漏れず理解できないでいました。 さまざまな解説サイトを読んだりサンプルコードを書き換えてみたりして 静的なスコープの言語で利用できる。 関数が終了したあともそのローカル変数が参照できる。 といったクロージャの「仕組み」や「特徴」については分かったものの、もっとも重要ともいえる 「どういう時にクロージャを使えばいいのか」 が分かりませんでした。言いかえると友人がなんて言って悩んでいる時に 「そう言う時はクロージャを使うといいよ」 と言ってあげればいいのか。 例えばプログラムの勉強を始めた友人が 「これと同じ処理もう何回も書いてるんだよ。コピペばっかりしてる気がする」 と言って悩んでいたら 「そこを関数にすればいいんじゃない？」 って教えてあげますよね。 これと同じように友人が 「○○○○○○なんだよ、うまい方法
Javascript で暗号化
Web API開発をするなら、ドキュメントは自動生成にしておこう！（PHPerKaigi2021） 皆さんの開発現場はAPIドキュメントの自動生成化がお済みでしょうか？ このLTではCakePHP4にSwaggerを導入して、コードのアノテーションからドキュメントを自動生成するまでの流れをご紹介いたします。 ▼こんな方におすすめ ・これからWeb API開発を始める方 ・ドキュメント書くの面倒な方 ・実装とドキュメントの乖離に苦労したことがある方 昨年、社内で実施した勉強会のテーマの中で一番メンバーの反応が良かったのが「アノテーションからのドキュメント自動生成」でした。ドキュメント作成の手間を少しでも減らして、開発体験を向上させていきましょう！ （LTではCakePHPをサンプルコードとして紹介いたしますが、Laravelに導入する手順も別途資料をご用意させていただく予定です。） http
関数から呼び出し元へ値を返す
関数の中で return 文を使用することで呼び出し元へ値を返すことができます。また必要なければ return 文を実行するときに戻り値を省略して呼び出し元へ処理を戻すこともできます。ここでは JavaScript にて関数から呼び出し元へ値を返す方法について解説します。
リテラル, コンストラクタ, それぞれのオブジェクト生成方法のプロファイリングをやってみた - kitak blog
こんにちは. 今日, 研究室の女の子と｢new Object()より{}のほうが早いし, new Array()より[]のほうが早いんだよ｣みたいなことを喋っていた. たしか何かの本に実際に計測していた結果が載っていて, それを覚えていたのだと思う. 実際, 自分で手を動かして測ったわけではないので怖くなって測ることにした. 計測方法 ｢JavaScriptグラフィックス｣に載っている自家製コードプロファイリングを採用する. これは以下のようなプログラムを書いて1秒あたりの実行回数を計測する. var time_elapsed = 0; var start_time = new Date().getTime(); for (var iters = 0; time_elapsed < 1000; iters++) { // ここでテストコードを実行する time_elapsed = new
JavaScriptのnewって本当にいらない子？ - あと味
先日、「JavaScriptのオブジェクトについて考察してみた - あと味」を書いてから、chikuraさんからコメントいただいたり、id:dankogaiさんから「404 Blog Not Found:javascript - にはクラスはない」という記事で言及いただいたり、JavaScript: The Good Partsを読み返したりした結果、newについて調べたいという衝動にかられましたので、その調べた結果を書いてみたいと思います。 newを調べようと思ったキッカケを整理 まずは、そのキッカケから整理します。 chikuraさんのコメントより 押さえるべきポイントは、new演算子の際に何が行われるか？だと思うので、こちらのページもぜひ読んでみてください。 JavaScript の new 演算子の意味: Days on the Moon http://nanto.asablo.j
【コラム】そろそろきっちりJavaScript (2) 無名関数についてもう少し考える | エンタープライズ | マイナビニュース
無名関数のメリット 前回の記事では、無名関数を関数リテラルに割り当てるという操作を紹介した。なぜ、このような記法により関数を定義するのだろうか。 まず、無名関数を採用するメリットには、「命名する必要の無い関数をシンプルに記述できる」「(複数ファイルのJavaScriptライブラリを読み込んでいるときなどにおいて)、既存の関数/変数名との衝突を回避できる」という点が挙げられる。 前回の冒頭で述べた通り、JavaScript関連ライブラリが数多く存在し、多くのシーンでそれを活用している今日、既存のライブラリやソースコードと名前が衝突しない事がどれだけ重要であるかは想像に難くないだろう。 それでは、命名する必要の無い関数とはどのようなものだろうか。また、無名関数だと変数名の有効範囲はどのように決まっているのだろうか。ここで、前回に引き続きFirebugで以下のコマンドを実行し、動作を確認してみよ
JavaScriptのprototypeプロパティに対する理解 - 犬も歩けば棒も歩く
prototypeに対する理解を深めるために少し考えてみた var obj = {}; var func = function(){}; alert(obj.prototype); //undefinedと出力 alert(func.prototype); //[object Object]と出力 まずprototypeプロパティを出力してみる。obj(普通のObject)の場合、undefinedと出力される。つまりprototypeというプロパティ自体もっていない。これに対してfunc(普通のfunction)の場合、prototypeはObjectになる。ここで、prototypeに指定されたオブジェクトはプロトタイプオブジェクトと深い関わりがある。順を追って説明する。 JavaScriptにはプロトタイプチェーンという仕組みがある。このプロトタイプチェーンの仕組みは全てのオブジェク
初心者のためのJavaScriptのスコープ - 小さい頃はエラ呼吸
はじめに JavaScriptのスコープについて、あらためて勉強する機会があったので、まとめてみました。 よくわかるJavaScriptの教科書posted with amazlet at 14.02.04たにぐち まこと マイナビ 売り上げランキング: 11,386 Amazon.co.jpで詳細を見る プログラミングにおけるスコープ はじめに、そもそもスコープとは何なのかを理解する必要があります。プログラミングにおけるスコープとは、変数や関数の有効範囲のことを言います。ある変数や関数が見える範囲と言い換えてもいいかもしれません。 プログラミングでのスコープとは、ある変数や関数が特定の名前で参照される範囲のこと。ある範囲の外に置いた変数等は、通常、その名前だけでは参照できない。このときこれらの変数はスコープ外である、「見えない」といわれる。 スコープ - Wikipedia JavaSc
言語女子会2: varは必要？/privateがない？ - 西尾泰和のはてなダイアリー
言語女子会: undefとnullは両方必要？の続編です。 varは必要なの？ とあるプログラミング言語が集う女子会にて: Python: JavaScriptちゃんってさ、なんでvarだらけなの？ JavaScript: えっ、変？ Python: varなんかいらなくない？私ぜんぜん持ってないよ？ JavaScript: えー、じゃあ変数をどうやって宣言するの？ Python: 宣言っていうか…「x = 1」みたいな代入文があれば変数xが必要なのって自明じゃない？宣言とか必要？ Ruby: 必要ないよね。っていうか変数宣言とか古臭くない？ JavaScript: そうかなー。 Python: 少しダサイかも。ほら断舎離ブームだし要らないものは捨てなきゃ！ JavaScript: 要らないかなぁ、変数宣言。Pythonちゃんは関数がネストしているときに外側のスコープの変数に代入するのって
なぜ次々とJavaScriptコンパイラが生まれるのか。 — DECONCEPTER
最もJavaScriptに近いJavaScriptコンパイラ 先日MicrosoftからTypeScriptというJavaScriptコンパイラが公開されました。ファーストインプレッションとしては今までのJavaScriptコンパイラと比べると若干敷居が低く感じます。まず驚いたのはドキュメントがWordファイルだったこと。早速ダウンロードしてみたら一部文字化けしていました。さすが。PDFも用意されていたのでかろうじてドキュメントを読めました。Webページで用意して欲しい。 JavaScriptの記法そのままに型付けができる TypeScriptでまず好印象なのがJavaScriptのコードをそのまま書いてもコンパイルされるところ。又、「Type」ScriptというだけあってさらにJavaScriptの記法に型を付けられる。例えばstringと指定すればstringのプロパティをシンタックス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptの ++i は i += 1 ではない - rikubaのブログ
照度と近接がDOMに入る
TEST CORDING » Sassの@functionの使い方まとめ – プログラマブルな処理は@function
JavaScriptのイロハ：特集 - builder by ZDNet Japan