Underscore.jsを使って、簡単に絞り込み検索を実装する ｜ Tips Note by TAM
以前作ったサイトで、扱っている商品をカテゴリや値段で絞り込みできる検索機能をつけたいという要望がありました。 どうしたもんかと思っていたのですが、Underscore.jsを使って実装してみたら、とても簡単に良い感じにできたので紹介します！ Underscore.jsの説明については、以前TipsNoteで紹介されているので詳細な説明は省きますが、簡単に言うとJavaScriptの便利な命令がたくさん詰まったライブラリです。 Underscore.jsの使い方 個人的には、配列やオブジェクトを使った処理がすごく楽になるところが特にお気に入りです！ デモ いきなりデモからいきます！ 色 形 を指定して 検索 を押すと絞り込み検索が行われます。 See the Pen underscore.jsを使った絞り込み検索 by daichi (@kandai) on CodePen. 良い感じに絞り
「JSオジサンに怒られない脱初心者JavaScript」に行ってきました - WEBデザイナー2年目
html5j-begin.doorkeeper.jp javascriptの勉強が一通り終わったので、参加してきました！ javascriptの勉強会に参加するまでの道のりが長かったぜ...(T_T) 話の内容 4名のJSオジサンからのありがたきお話＋質問タイムって感じでした。 一つずつ、つらつら書いていきます（※長文注意ですぞ！） 1.ソースレビューから学ぶ Javascript + 1 株式会社サイバーエージェントの、宗定 洋平さんのお話です。 speakerdeck.com ざっくりまとめると、以下の4点についてのお話でした。 レビューでみているポイント 「バグがない」という言葉の定義 関数名のつけ方 ステップアップするために必要なこと 印象的だったのが...ステップアップするために必要なこと...それは... 「情報処理技術者試験を勉強する」です。 な、なんじゃそりゃー！初耳です。
JavaScript・jQueryの関数について - Qiita
jQuery 最高の教科書を読んで、 javascript・jQueryを改めて勉強・まとめていこうと思いました。 よく使う「関数」についてまとめてみた。 関数とは 「何らかの一連の処理を行う、複数の命令の集まり（命令群）」 関数は、同一コード内は元より、他のコードからも呼び出すことができる。 繰り返し実行する処理 何度も利用する処理 また、一連の処理をまとめることによって、処理内容を変更する際の手間を大幅に軽減することができる。（保守性） 関数を使用しない場合 $(function(){ $('#typo') .on('mouseover', function(){ // 処理A // 処理B // 処理C }); $('header') .on('mouseover', function(){ // 処理A // 処理B // 処理C }); $('footer') .on('mous
javascript DOMの基本操作まとめ
javascriptのDOM操作の基本をおさらいしておこうと思います。jQueryは少し触ったことがあるのですが、javascript自体はほとんど使ったことがないのでこれを機会に勉強していこうと思います。 ここではDOMの操作とイベント処理をまとめてみます。これが出来るようになると、Web上でインタラクティブな要素を盛り込むことができるようになります。 javascriptの基本 DOM操作 まずはiavascriptのDOM操作から。ここで使うHTMLはこちらです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>javascriptの練習</title> </head> <body> <div id="main" style="border:1px solid #555;width:400px
JavaScriptのコーディングTips集 - 主に言語とシステム開発に関して
JavaScriptのプログラミングに関するTips集。 主に中級レベルの話題とノウハウを掲載する。 なお，JavaScript初級〜中級をクイズ形式で網羅的に学習するためには，下記のエントリを参照。 JavaScriptの動かないコード (JavaScriptエラー集) http://language-and-engineering.hatenablog.jp/entry/20080912/1221297779 ※JavaScript以外のプログラミングについては，こちらを参照。 ピュアJSを極める： JavaScriptで，クラスを継承する方法 （複数のサブクラスから共通クラスのプロトタイプを参照する） JavaScriptでの例外設計 （throw，try-catch-finally構文のイメージと利用パターン） JavaScriptで，動的に追加されたイベントリスナの実行順序を保
WebStormによるJavaScript開発のすすめ - maru source
Qiita JavaScript - Client Side - Advent Calendar 2013 12月20日の記事です。 みなさんはJavaScriptをどんなエディタで書いていますか？僕はこれまでVimで開発していたんですが、最近はもっぱらWebStorm(PhpStorm)を使ってJavaScriptを書いています。 というわけで今日はWebStorm使ったJavaScript開発における便利な機能をいくつか紹介していきます。 Inspections Code Completion JSDoc File Watchers Deployment(Automatic Upload) REST Client Directoies JavaScript Libraies Code Style ファイル検索 Vim Plugin Look and Feel WebStormとは？ J
JavaScriptのnewって何？一体何なの？という話 - 愛と勇気と缶ビール
マクラ JavaScriptを使っている人なら知っていることだろうけど、JavaScriptはプロトタイプベースのオブジェクト指向を採用しているので「クラス」がない。オブジェクトしかない。 でも、組み込みの演算子としてnewがあって、それを使って var obj = new Object(); とか書けちゃう。クラスってものはJavaScriptにはないはずなのに、new ClassName();と書くとあたかもClassNameクラスのオブジェクトのインスタンスが生成され、それが返ってくるかのような挙動をしている。 これは気持ち悪い。言語仕様としてはクラスは本来存在しないのに、クラスのようなものが導入されている。まともな神経を持った人間なら、一体new演算子って何なの？という疑問を持つのが当たり前である。「{}はnew Object()のシンタックスシュガーです」とか言ってふんぞり返って
[JS]スマフォアプリのように左右にスライドしてコンテンツを表示するスクリプト -mmenu
mmenuの使い方 スクリプトの使い方は下記ページにステップごとの解説があります。 tutorial Step 1: 外部ファイル head内に「jquery.js」と当スクリプト・スタイルシートを記述します。 <head> <script type="text/javascript" language="javascript" src="jquery.js"></script> <script type="text/javascript" language="javascript" src="jquery.mmenu.js"></script> <link type="text/css" media="all" rel="stylesheet" href="jquery.mmenu.css" /> </head> Step 2: HTML コンテンツの基本構造は、下記のようになります。
初心者向けのjQuery入門講座
使い方 まず最初にチェックするコンテンツです。どのような考えをもとにプログラムを組み立てていくか、設計力を学びます。 サンプル 使い方で学んだことを生かして、簡単なサンプルの作成を学んでいきます。 プラグイン jQueryで利用できる便利なプラグインを紹介していきます。 リファレンス jQueryのリファレンスです。辞書代わりにご利用ください。 使用例 企業サイトでのjQueryの使用例を紹介していきます。 始めに jQueryはデザイナーにも利用しやすいjavaScriptプラグインです。このサイトはhtmlやcssを充分に理解しており、さらに基礎的なjavaScriptをマスターしている方を対象に記事を書いています。 現在はスマートフォン用のゲーム制作に注力しているため、本サイトの更新は休止状態（2014年3月が最終更新）です。ゲーム制作に関するブログ：スマゲー作るよ！はほぼ毎日更新し
IT戦記 - 一行で IE の JavaScript を高速化する方法
以下の一行をすべての JavaScript の前に読み込む /*@cc_on _d=document;eval('var document=_d')@*/ この一行を読み込むことによって IE での document へのアクセスが 5 倍速くなります。 たとえば 以下のように、読み込む前と読み込んだ後を比較してみます。 // Before var date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date - date); // 643 /*@cc_on _d=document;eval('var document=_d')@*/ // After date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date -
あなたはJavaScriptを知らない - 杉風呂2.0 - A Lifelog -
この記事はMichael Woloszynowicz氏のブログWeb 2.0 Development And Business Lessonsの記事"You Don't Know JavaScript"を翻訳したものです。本人の許可を得て公開します。原文は2011年4月16日にポストされました。私自身のJavaScriptの学習が浅く、誤訳の指摘等はコメントを下さると助かります。 原文は以下のURLから。 http://www.w2lessons.com/2011/04/you-dont-know-javascript.html 去年ぐらいから、いらいらする現象が目に留まるようになった。プログラマが、少ししか触っていない技術でありながら、それで履歴書を脚色するパターンに何度も出会った。多くの言語で起こることではあるが、最も冒涜を受けている言語がJavaScriptだ。 あなたは自分が知らな
JavaScriptで全角/半角判定 — shibu.jp
Note 本コンテンツの一部は、業務時間内に調べた内容を含んでおり、株式会社ディー・エヌ・エーの提供でお送りしております。 とある理由で全角、半角の判定が必要になったのですが、簡単技(SJISなどに変換してバイト数計測など)はつかえなかったため、自作する方向で調べて見ました。 Pythonには unicodedata.east_asian_width() という関数があり、 エキスパートPythonプログラミング というすばらしい書籍の日本語オリジナルの文字コード関連の章によると、この関数が "F" 、 "W" 、 "A" (ただし、Aはフォントにより変わる曖昧な文字)が返すと全角としてカウントすればよい、と書かれています。 こちらを参考にJavaScriptの全角/半角判定を行った幅計算を実装してみます。 まずJavaScriptを知る¶ JavaScriptは内部では、UTF-16とい
無料で使えるポートフォリオサイト用 WordPress デザインテーマ | MakeLeapsブログ
この記事について 国内外で人気のブログプラットフォーム WordPress。 豊富なデザインテーマが魅力の一つですが、今回はポートフォリオサイトに用途を絞ったテーマを紹介します。 文句なしにハイクオリティなものやアイデアがユニークだったもの等、バラエティに富んでいますのでお楽しみいただければ幸いです。 デザインテーマの紹介 Monte Cristo スライドショー部分に画像の拡大と記事へのジャンプ機能が備わっていてギャラリーサイトにもポートフォリオサイトにも使用が可能なテーマ。 見たまま使える、ユーザービリティに優れたデザインも魅力。 個別記事ページはテキスト部分を広く使える2カラム構成。 PICK UP「個別記事ページ」 Me’gusta スライドショー隣の大きな About 部分も手伝い、とにかくトップページのインパクトが大きいテーマ。 スライドショー部分は画像、テキスト、動画の em
はてなブログ | 無料ブログを作成しよう
来年も作りたい！ふきのとう料理を満喫した 2024年春の記録 春は自炊が楽しい季節 1年の中で最も自炊が楽しい季節は春だと思う。スーパーの棚にやわらかな色合いの野菜が並ぶと自然とこころが弾む。 中でもときめくのは山菜だ。早いと2月下旬ごろから並び始めるそれは、タラの芽、ふきのとうと続き、桜の頃にはうるい、ウド、こ…
レディースカジュアル[HIRAKI Shopping -生活上手のやさしい安さ。ディスカウント通販ヒラキ-]
このウェブサイトはヒラキ株式会社が著作権を有しております。このウェブサイトの内容の一部または全部を無断でコピー、変更、使用することは法律で禁じられています。 このウェブサイトは日本国内を対象にした情報です。このウェブサイトの内容は、予告なく変更されることがあります。 All rights are reserved HIRAKI CO.,LTD Reproduce or coples of modification are not allowed Content of this web site apply in the country of Japan only Contents of this website shall be changed without notice.
もっと少量のjQueryコードでHTMLテーブルの列にリンク先を指定できるようにする方法
ちょっとしたコードの解説 せっかくなので、どういうコードなのかというのを、さらっとみましょう。 jQuery(function($) { //data-hrefの属性を持つtrを選択しclassにclickableを付加 $('tbody tr[data-href]').addClass('clickable') //ata-hrefの属性を持つtrをクリックしたら動作 .click( function() { //data-href属性の値をattr()メソッドで取得し、ページを遷移させる window.location = $(this).attr('data-href'); //もしtr内にa要素があれば、a要素にホバーした時に以下動作させる }).find('a').hover( function() { //a要素の先祖要素trのクリックイベントを解除 $(this).paren
[JS]リスト要素の一部をアニメーションで表示・非表示させるスクリプト -aPartHide | コリス
長いリストを省スペースに設置するのに便利なリストの一部を非表示にし、隠したアイテムをアニメーションでスライド表示させるjQueryのプラグインを紹介します。 aPartHide デモ [ad#ad-2] 非表示にするアイテムの数は設定が可能で、デモでは七つのアイテムを配置したリスト要素の初期状態では3アイテムだけ表示し、「more」をクリックするとすべてのアイテムが表示されます。 また、全アイテムを表示した状態で、「less」をクリックすると3アイテムのみ表示されます。 aPartHideの実装 HTML リスト要素をdiv要素で内包し、表示・非表示用のdiv要素を配置します。 <div id="box1" class="demo"> <h3>Demo</h3> <ul> <li>Demo list item 1</li> <li>Another list item</li> <li>Th
これからは電子書籍でもJavaScriptプログラミングができる
これから普及が予想される電子書籍や電子雑誌がインタラクティブになっていくことは間違いありません。映像が埋め込まれたニュース、好きな角度から洋服が見られるファッション雑誌、操作しながら解いていけるパズル、途中で登場するモンスターを倒さないとその先が読めないロールプレイング小説、なんていうのもあるかもしれませんね。 将来の電子書籍はアプリケーションと区別がつかなくなる、と僕は考えています。 先日ワーキングドラフトが公開された次世代電子書籍フォーマット「EPUB 3」では、JavaScriptが仕様の中に組み込まれる予定です。将来の電子書籍でのインタラクティブな実装はJavaScriptによって行われることになります。 HTML5/SVGで定義されたスクリプティングをサポート 昨年の12月22日にインプレスR&Dが創刊した電子出版をテーマにした電子雑誌「On Deck（オンデッキ）」の1月18日
新JavaScriptライブラリ例文辞典
■画像関連ライブラリ [要jQuery][Liquid Image FXライブラリ] (画像を液体のように流す) [Liquid Image FXライブラリ] 画像にリキッド（流体）エフェクトを指定する [Liquid Image FXライブラリ] 画像が流れる方向を指定する [Liquid Image FXライブラリ] 画像が流れる速度を指定する [Liquid Image FXライブラリ] 流れる画像のスケールを指定する [要jQuery][dwImageProtectorライブラリ] (画像コピー禁止ライブラリ) [dwImageProtectorライブラリ] 画像をコピーできないようにする [要jQuery][Fullsizeライブラリ] (画像拡大ライブラリ) [Fullsizeライブラリ] 画像を拡大して表示する [Fullsizeライブラリ] 拡大された画像の影を表示しないよ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5です | 日本のHTML5 WEBデザインリンク集