Cheat sheet for moving from jQuery to vanilla JavaScript
jQuery is still a useful and pragmatic library, but chances are increasingly that you’re not dependent on using it in your projects to accomplish basic tasks like selecting elements, styling them, animating them, and fetching data—things that jQuery was great at. With broad browser support of ES6 (over 96% at the time of writing), now is probably a good time to move away from jQuery. I recently re
console.log(); しか使えなかった自分へ。。。 - Qiita
この記事について Webエンジニアになって早１年半。railsのデバッグをする時にはエディターのデバッガーでスマートにできていたが、javascriptになるといつもconsole.log();ばかりを使って原始的なデバッグをしていた。。。 そんな脳筋な過去の自分に教えてやるための記事です。 console.log({変数名}); 「いきなりconsole.log();の紹介かい！！！」って思われるかもしれませんが、この技を知ったときは「なんで知らんかったんや。。。」って思うくらい便利だったので最初に紹介します。 以下のようなHTMLがある場合 <form> <input type="text" value="名無しの権兵衛" id="name"> <input type="text" value="80歳" id="age"> <input type="text" value="バスケ"
(初心者向け) JavaScript 配列の作成と初期化 - Qiita
#概要 JavaScript の配列は動的なもので、他の言語で言えば ArrayList に近いものです。そして、作成(構築)と初期化の方法も様々なので、ここでまとめてみました。 Array コンストラクタを使って長さ 0 の配列を作成する。 [] を使って長さ 0 の配列を作成する。 初期値を持つ配列を Array コンストラクタを使って作成する。 初期値を持つ配列を [] を使って作成する。 初期値を持たない指定した長さの配列を作成する。 from メソッドを使って配列から新しい配列を作成する。 from メソッドを使って文字列から文字の配列を作成する。 of メソッドを使って値の並びから配列を作成する。 #サンプル ##Array コンストラクタを使って長さ 0 の配列を作成する。 昔の JavaScript ではこういう書き方しかできなかった気がします。
W3Schools.com
W3Schools offers a wide range of services and products for beginners and professionals, helping millions of people everyday to learn and master new skills. Free Tutorials Enjoy our free tutorials like millions of other internet users since 1999
色んなXSS – nootropic.me
2015/4/16(木)：ページの一番下に追記を記述しました。 その昔、なんとかキャンプというセキュリティのイベントに参加した時「アウトプットが大事」と言われたのを思い出しました。 でも、普通自分の見つけた知識は後生大事に抱えておきたいもんだと思います。 そこで今回はそういった何かしょーもないものを捨てるべく、溜め込んだ色んなXSSのPoCを少し書き出してまとめました。 今まで自分で見つけたものや海外のSecurity Researcher達から収集したものもあります。 さて、今回リストアップしたPoCの見方ですがいくつかの項目があります。 一番上の「手法」はタイトルみたいなものだと思って下さい。 二番目の「PoC」はスクリプトを実行する為のコードです。殆どがアラートが出るだけのスクリプトの為危険なコードは無いつもりですがご自分のブラウザで実行する際は自己責任でお願いします。リンクをクリッ
最近の行儀のよい JavaScript の書き方 - Qiita
JavaScriptは移り変わりの早い言語です。 もう1年以上経っていますし、記事のメンテもちゃんとできていないので、消し線を入れることにしました。 参考程度のために記事は一応残しますが、より新しい情報を読まれることをお勧めいたします。 はじめに --- 最近では JavaScript の実行環境はブラウザに限りません。（node.js, Web Workers） また、旧来のような <script> 経由でのロードもとうに古くなっています。今は CommonJS スタイルで、require を用いたモジュールのロードを行なうことがより良いとされています。 ですから、次のようなことは改める必要があります。 - var YourModule = {}; などとして、外部から YourModule.hoge(); などと呼び出す書き方 - this === window だと思うこと 今回は、
今、本当に人気がある「JavaScriptライブラリ＆ツール」を調べてみた
Web制作者／開発者が「今後、使いたい」JavaScriptライブラリおよびWeb技術を、ランキング形式で発表。2014年度前半はこれらを押さえよう。 ← 前回 連載 INDEX 次回 → 今年の初めに「人気上昇中のJavaScriptライブラリを調べてみた［ジャンル別に比較］」という記事を公開したことで、JavaScriptライブラリの人気ランキング情報へのニーズは高いことが分かった。しかし、その記事でのランキング決定では、検索キーワードの流行を調査可能な「Googleトレンド」を用いた。このため、ライブラリ名が一般的な英単語（例えば「LESS」など）の場合、どうしてもライブラリとは無関係の検索も含まれてしまっていることが懸念された（※それでも「人気上昇中かどうか」を計測する面ではある程度有効な手段だと考えている）。 そこで今回、より正確な情報を読者に提供するために、実際にWeb制作者／
JavaScript イディオム集
JavaScriptでは、初見の人にはさっぱりわからないけれども、ある程度慣れた人は当たり前に使うイディオムが結構たくさんあります。知ってしまえば何てことはないので、私の知っている限りのイディオムとその意味を解説します。 （7/3追記: twitter等で教えていただいた内容を追加しました） +v （数値化） var v = "123"; console.log(+v + 100) // 223 console.log(v + 100) // 123100 vを数値化する方法では最もメジャーです。parseFloat(v) に比べて高速なのに加えて、parseFloatとは細かい挙動が異なります（例えば空文字列の場合、parseFloatならば NaN になりますが、 +v の場合はゼロになります）。必ず数値になることが保証されており、文字列などで数値化出来ない場合はNaNが返ります。 v
xuldev.org :: userChrome.js scripts
Language: English | Japanese userChrome.js Scripts userChrome.js 拡張機能用のスクリプト集です。 いくつかのスクリプトは、 Greasemonkey 風メタデータによって非ブラウザウィンドウ上で動作させるために userChrome.js 0.8 + Sub-Script/Overlay Loader v3.0 が必要となります。 userChrome.js に関する説明については、技術評論社 Software Design 2008年3月号の特集記事「～今どきJavaScript活用術～ userChrome.jsでFirefoxを自由自在にカスタマイズ！」をご覧ください。 Tab Preview
ニコニコ動画のプレーヤーをJavaScriptから操作するAPI一覧 - kiyohoge
調べてみたのでメモ。 ちなみにいかのplayerは var player = document.getElementById('flvplayer');で取得できるようなプレーヤーの要素。 player.ext_play(boolean) -> void引数がtrueの場合実行、falseなら停止。 player.ext_setPlayheadTime(number) -> voidnumber秒後にシーク。 player.ext_setMute(boolean) -> void引数がtrueの場合ミュート、falseならミュートを解除。 player.ext_setVolume(number) -> void音量を0〜100の範囲で音量を調節、それ以外の値が引数だと無効。 player.ext_setCommentVisible(boolean) -> void引数がtrueの場合コメン
jQueryでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。 | Ginpen.com
必要ならどうぞ。 デモ jQueryでフォームの値を取得する方法をまとめ – jsdo.it – Share JavaScript, HTML5 and CSS jQueryでフォームの値を取得する方法をまとめ – jsdo.it – share JavaScript, HTML5 and CSS 共通：要素の探し方 input要素なんかにid振っちゃうのが一番なんだけど、属性セレクターを使うと楽な場合があります。つまり[name=xxx]で検索するやり方。 <form id="my-form"> <input type="text" name="my-text" value="This is text." /> </form>
CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
直リンでお困りの管理人さんへ
とりあえず、色々と直リン関係に役に立つサイトのリンク集を作ってみました。 よかったら参考にしてください。 ダウンロード必須の素材には使えませんが 大きな画像を表示させている、イラスト展示サイトなら 画像を分割して表示させれば、コミュニティータウンの壁紙に使われたり 悪意のある直リンは防げると思います
jQuery 開発者向けメモ
jQuery 開発者向けのメモです． ずっと以前に，jQuery に関する日本語の情報がまだ少ない頃に作ったページですが， その後 jQuery を再び利用する機会があったので，最新バージョン向けに記述を更新しました． 住宅ローンシミュレーションです． jQueryを利用したフォームの動的な追加や，flotプラグインによるグラフ描画などを行っています． 本ページの記載に間違い等見つけた方はブログのエントリまで連絡いただけるとうれしいです． 最終更新：2009/1/10 jQueryとは jQuery は様々な処理を短く簡単に書ける JavaScript ライブラリです． 独自のXPATH/CSSセレクタを利用することで，多くのDOM操作を非常に簡単に書くことが出来ます． JavaScriptのDOM操作や，XMLHTTPRequest，XMLの操作などを覚えなくとも， Ajaxを利用したイ
User JavaScript - Opera Wiki
[編集] User JavaScriptについて User JavaScriptとは？ 制作者の用意するJavaScriptに加え、ユーザがローカルに保存した任意のJavaScriptを処理できるようにする仕組み。 Firefoxの拡張機能Greasemonkeyとある程度の互換性を有している。 UserJSと省略して呼ばれることもあります。 ユーザー JavaScript による制御http://jp.opera.com/support/tutorials/userjs/ [編集] User JavaScriptを使うには？ フォルダを作成します。(よくわからない場合はマイドキュメントなどに「userjs」などというフォルダを一つ作るよよいでしょう。) 作成したフォルダに、任意のユーザーJavaScriptファイルを保存します。 メニューバーの「ツール > 設定」から「設定」ウィンド
ふと今日は・・・・・・ Custom Buttons の自作ボタン配布
02«|12345678910111213141516171819202122232425262728293031|»04 文字サイズ Firefox 43 より、署名なしの拡張が無効化されることとなりました。 その為、使用できなくなるこのブログ上のすべての拡張は今後更新されることがありません。 どっかにあるかもしれないが、自作した Custom Buttons 用ボタンを晒してみる。 Custom Buttons を入れていたらリンククリックで追加される。 アイコン（16ｘ16のみ）は適当に作ってるんで汚い。適宜入れ替えてもらえるといいかも。 JavaScript があんまりわかってないので、自己責任にてよろしく！ あと、翻訳系のボタンは WEB 上のサービスを使っている。 変なところがあったら教えてもらえると嬉しいです。 更新履歴（随時追加していく） -----------------
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptの配列の使い方まとめ。要素の追加,結合,取得,削除。 - Qiita
JavaScriptからDOM - Webデザイン初心者の勉強 | Web勉強法
IBM Developer
