【翻訳】 2016年にJavaScriptを学んでどう感じたか - Endo Tech Blog※何度投稿しようとしてもBad Requestが出てしまったのでgistで投稿します。ご了承下さい。 gist.github.com
連想配列がうまくJSON.stringifyされなかった話 | bobobo.bona.blog
KABEGAMI Boxesのデータベース機能実装のため、設定パラメータをJSONに変換しようとしたら詰まった。 コードは以下。 var assoc = new Array(); var json; for( var key in ControlId_Array ){ assoc[key] = $("#"+ControlId_Array[key]).val(); } json = JSON.stringify( assoc ); ControlId_Arrayに格納されている各コントロールのIDをキーに、対象コントロールの値を配列assocに格納していくコードだ。 実際にはjQuery.ui.sliderも使っているのでもうちょっと処理が足されるのだが、本題とは関係ないので省いている。 ともあれ、これでJSON.stringify()を実行しても、期待のものは返ってこなかった。 返ってきた
バニラJavaScriptを選択する
jQueryを用いて書いたコードと同等な働きをするコードをjQuery抜きで書くとどのようになるのかを示したWebサイト「You Might Not Need jQuery」（jQueryは必要ないかも）が先日話題になりました（はてなブックマークも180以上付いています）。 ちょうどこのWebサイトを話題にした記事「Choosing Vanilla JavaScript」が、Webデザイナ向けに情報発信をしている著名なWebサイト、A List Apartに掲載されていました。 Vanilla JavaScriptとは、要するに何もトッピングされていないバニラアイスクリームのように、jQueryなどのライブラリを使わない素のJavaScriptのことを示しています。 この記事は何でもjQueryを使うのではなく、正しい選択をしようというテーマの内容になっており、参考になりそうだったので翻訳
[JS]Webサイトの使いやすさ・かっこよさを向上させる、チェックしておきたいスクリプトのまとめ
コンテンツの邪魔にならず操作も快適な画像拡大、スクロールすると一旦ヘッダが隠れるけど上にスクロールすると出現、サーチアイコンをクリックするとにょい～ん伸びて検索ボックスになるなど、ユーザビリティ・アクセシビリティに配慮され、タッチデバイスやレスポンシブ対応にも一役買う優れもののスクリプトを紹介します。
![[JS]Webサイトの使いやすさ・かっこよさを向上させる、チェックしておきたいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/0bc338c3b019bd35cf84848dd648330728cc081c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015082406.png)
[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ
最近のWebサイトで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。
![[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/4df978511120c0727c18646f1d386ecdc2ab3a59/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072304.png)
jQuery で Ajax でデータを POST 送信する際にオブジェクトで値を渡すと自動的にエンコードしてくれる
私は jQuery で Ajax を使ってデータを POST で送信する際に以下のようにコードを書いていて躓きました。 var hoge = 'str&ing'; var fuga = 'string'; var data = 'hoge=' + hoge + '&fuga=' + fuga; $.ajax({ type: "POST", url: "/ajax/add", data: data, success: function() { alert('success'); } });
今っぽくなった！トレンドをおさえたjQuery プラグインまとめ
作成：2015/04/6 更新：2016/06/29 Web制作 > トレンドとなりつつある視覚効果や、細部にちょっとした動きを取り入れたいときに使えるjQuery プラグインをまとめました。ユーザーが使いやすくなるよう、ページにひと工夫したいときに。少し前のプラグインもありますが、今から使えそうなものもピックアップ。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マイクロインタラクション １．粘性 ２．移動するプレースホルダー ３．滑らかにページ移動させる ４．パスワード強度を可視化 ５．オートコンプリート ６．テキスト入力 ７．Google Map（吹き出し・マーカー） ８．オートページャー ９．プログレス12パターン １０．ノーティフィケーション レタリング １１．１文字ごとに指定 フルスクリーン １２．モーダルウィンドウ（全画面） １３．フォーム（全
shadowboxをクリッカブルマップで使う方法｜WEB Drawer
lightbox風のプラグインでshadowboxというのがあるのですが、これをクリッカブルマップで使った時に動かなかったのでそれのメモです。 shadowboxとは lightbox風に表示してくれるJavaScriptのプラグインです。jQueryの他にPrototypeなどのJSライブラリと組み合わせられるのが特徴です。 Shadowbox.js クリッカブルマップと組み合わせて使う 一枚の画像から複数の画像へリンクを貼ってshadowboxを起動させたかったので、クリッカブルマップを使いました。 ですので、普通ならaタグにrel="shadowbox"などとして使う所をareaタグに書いてみたのですが動きませんでした。 JavaScriptに追記が必要 そこで検索したらこちらのサイトに解決方法が載っていました。 Shadowbox « NMN WebDesign <head>内に書
初心者でもほぼ無料でJavaScriptを勉強できるコンテンツ16選 - paiza times
Photo by dotConferences こんにちは。谷口です。 プログラミングをこれから学ぼうとしている方で、「JavaScriptを使えるようになりたい！」という方は多いと思います。 JavaScriptは実行環境が主にWebブラウザに実装され、動的なウェブサイト構築や、リッチインターネットアプリケーションなど高度なユーザインタフェースの開発に用いられます。（JavaScript - Wikipedia） Webサービスの作成・運用をする機会がある方には必要不可欠なJavaScriptですが、これから勉強を始める方の中には「プログラミング経験ゼロなんだけど、一体どうやって勉強したらいいの……？」と思っている方も多くいらっしゃるのではないでしょうか。中には「エンジニアではないんだけど、仕事でJavaScriptを触る機会があるから覚えたい！」という方や、「初心者だけど、なるべくコス
jQueryを使用したjExpandの導入方法 | どすこい！人生
本日は、Blog関係の記事を書きたいと思います。 随分前から自作PCの記事を書いてきましたが、そこで使用されている「表組み」について解説します。 以下が、実際に表組みが使用されている記事のリンクです。 大関の自作PCへの道！電源とCPUクーラーとOS編 表組みを作るにあたって、各製品を比較しやすいものが良かったのですが、比較しやすいように詳細を記載すると表組みが長くなってしまうので「折りたたみ」で必要な情報を任意に見れるようにする必要がありました。 このような動的な表組みを実現するには「jQuery」が必要でした。 jQueryは、JavaScriptとHTMLを相互に使用するWEBプログラムの一つです。 プログラムというと難しい印象がありますが、テンプレートやサンプルが多く配布されているので、それを使用するだけでも簡単に導入出来ます。 実際に今回の表組みは「jExpand」というものをベ
Firebugを活用しよう！jQueryの動作チェックに最適な『FireQuery』
皆さんご存知のFirefoxのアドオン「firebug」コーダーとかであれば、これを入れている人はかなり多くいると思います！ しかし、中には『linker』のまーしーさんや『スグラボ』のフジカワさんのように、”いまいちFirebugを使いこなせていない”なんて人もいるのではないでしょうか？ 今回はそんな方もふくめ「FireQuery」のご紹介を仕様と思います！個人的にかなり便利だと思います。 FireQueryとは？ FireQueryは、Firebugを便利にさせる機能強化アドオンで、Firebugのコンソールで楽々jQueryを使えるようにしたり、DOM画面イベントがどこについているのかとかを確認することができるようになるツールです。 ただのFirebugでもJavaScriptのデバッグや動作の確認をすることはできたのですが、FireQueryを入れることによって、jQueryを使っ
HTML／CSS、PHP、jQueryの基礎を学ぶなら超オススメ！プログラミング学習サービス「Progate」
まずはProgateへアクセスしてアカウントを作成。私はTwitterで認証しました。 現在学べる言語は HTML & CSS PHP jQuery の3言語の基礎部分。 とりあえずHTML & CSSをやってみましょう。 学習の流れ 学習の流れは3ステップ。 スライドで基礎知識を学習 ブラウザ上のエディタにコードを書いて実際に学習 プレビュー画面で実際に挙動を確認→答え合わせ といった感じです。 スライド スライドは非常に丁寧な作りとなっておりますので、よく読みこめば初心者でもしっかりと理解をしながら学習することが出来ます。 矢印キーでページ送りができるのがCool。 1レッスンにつき数枚のスライドが表示されますので、見終わったらエディタ画面へとGO！ エディタ画面 こちらがブラウザ上で動作するエディタ画面。左側が問題文、真ん中がエディタ、右側がプレビュー画面となります。 もう一度スライ
レスポンシブ Web デザインとイメージマップ（クリッカブル・マップ）
今年も残すところあと数日。 今日が仕事納めというところも多いのではないでしょうか。 気がつけば今月は全然ブログを書いてない。 いかんなぁ〜… ということで最近気づいたことを備忘録を兼ねてメモメモ 〆(._.) レスポンシブ Web デザインでイメージマップを使うとき… このあいだ久しぶりにイメージマップ（クリッカブル・マップ）を使った。 私が関わっている仕事ではあまり使う機会がないんですけど、皆さんはよく使うのでしょうかね？ で、そのイメージマップを使う案件がちょっと前にあったのですが、その時にふと疑問が… その疑問というのは、『レスポンシブ Web デザインだと座標がズレるのでは？』という疑問。 あまりイメージマップを使う機会がないので今まで気がつかなかっただけで、皆さんにとっては周知の事実なのかも知れませんが、ちょっとお付き合いを… 🙂 イメージマップは、画像ファイルの左上を原点とし
Webサイトの背景をおしゃれに演出 Particleground
「Particleground」は、Webページの背景にパーティクルアニメーション（爆発時の飛散物のように、たくさんの点が同時に動くアニメーション）を表示するプラグインです。ユーザーの目を引くおしゃれな背景を手軽に導入でき、マウスカーソルに追従して動く視差効果（パララックス）の機能もあります。 ParticlegroundプラグインはGoogle ChromeなどのモダンブラウザーとInternet Explorer 9以降、スマートフォンではiOS 7.1のSafari、Android 4以降の「ブラウザ」に対応しています。 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、 Particlegroundを配布ページからダウンロードします。ページ中央の「Downl
jQuery UI Draggableを使って付箋(sticky)を作ってみる - jQuery入門 - ポンクソフト
目次 jQuery入門 jQueryのインストール・簡単な使い方 クイズゲームの作り方 秘密の暗号を作ってみよう（たぬき暗号） アクションゲームを作ってみよう（ぬりかべ） 画像を使ったジグソーパズルを作ってみよう もぐらたたきっぽいゲーム ドラッグ可能なポップアップウインドウを作ろう jQuery UI Sortableで１ラインオセロゲーム ブラウザ全体をブロックしてみる Geolocation APIを使って都道府県のセレクトボックスを現在地に近い順にソートする 発生したイベントの状態を保持・保存する6つのパターン Ajaxを利用したシンプルなイメージギャラリーを作ってみる テーブルにページ送り（ページング）を実装してみる jQuery UI Draggableを使って付箋(sticky)を作ってみる カラムでソートできるテーブルを自作してみる テーブルを使ったシンプルなドット絵エディ
初心者向けのjQuery入門講座
使い方 まず最初にチェックするコンテンツです。どのような考えをもとにプログラムを組み立てていくか、設計力を学びます。 サンプル 使い方で学んだことを生かして、簡単なサンプルの作成を学んでいきます。 プラグイン jQueryで利用できる便利なプラグインを紹介していきます。 リファレンス jQueryのリファレンスです。辞書代わりにご利用ください。 使用例 企業サイトでのjQueryの使用例を紹介していきます。 始めに jQueryはデザイナーにも利用しやすいjavaScriptプラグインです。このサイトはhtmlやcssを充分に理解しており、さらに基礎的なjavaScriptをマスターしている方を対象に記事を書いています。 現在はスマートフォン用のゲーム制作に注力しているため、本サイトの更新は休止状態（2014年3月が最終更新）です。ゲーム制作に関するブログ：スマゲー作るよ！はほぼ毎日更新し
ExcelのコネクタのようなことができるjQueryプラグイン【jsPlumb】:ADWAYS ENGINEERS BLOG
2013年12月20日 ExcelのコネクタのようなことができるjQueryプラグイン【jsPlumb】 アドウェイズエンジニアのイシマルです。 あっと気づけば、もう12月。忘年会のシーズンになりましたね。 飲みなどでハメを外すこともあるかと思いますが、程々に＾＾； では、本題のjQueryのプラグインjsPlumbの紹介に入りたいと思います。 Web系エンジニアの皆様、Web上で画面遷移図を描いたり、樹形図を描いたりしたいと思ったことはありませんか？ 「えっ、ないですって！？」 そのうち描きたくなると思うので、勝手に紹介させていただきます(笑)。 ■jsPlumbを利用した遷移図サンプル jsPlumbを利用すると、こんな図が簡単に描けます！ ■pluginのダウンロード 今回は、以下のように、jsPlumbのデモサイトからjsを取ってきました。 $ wget ht
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
http://www.designwalker.com/2009/09/jquery-table.html
jQuery TOOLS Demo Menu