JavaScriptをもっと上達したい人へのヒント（JavaScript おれおれ Advent Calendar 2011 – 24日目） | Ginpen.com
JavaScript おれおれ Advent Calendar 2011 – 24日目（最終日） JavaScriptを書くプログラマーさんでも、JavaScriptも書くデザイナーさんでも。 僕なんかがおこがましいとは思うんですが。 いっぱい書く とにかく書く事です。何でもいいです。作りたいものがあれば作ってもいいし、面白そうなものを見かけたら真似してみましょう。 ライブラリーやフレームワークは躊躇なく使う 簡単に書けるならそれに越した事はありません。どんどん使いましょう。そもそも便利なライブラリーを習得する事だって大切です。 分かりやすいと最近評判の本ですね。プログラミングの知識が全く無い状態の読者を想定しているそうです。 「Webデザイナーのための jQuery入門」という本を書きました – Takazudo hamalog で、私が書いた本の話に戻りますが、「Webデザイナーのため
jQueryコーディングの基本的なことからプラグイン化までの注意書き（Webデザイン）
jQuery でのプログラミングの、基本的なことからプラグインを作るところまで、初心者の頃につまずいた部分を中心にまとめてみました。公式ドキュメントなどで使われている、少し難しい印象の専門用語も織り交ぜながら書きました。jQuery で Webデザインのパーツを作るときの注意書きという感じです。 Webサイトを作るとき、私的にはとってもよく使っている jQuery。jQuery を勉強しだしたころは、自分の書いたコードが動いたりするのが、とっても楽しくて嬉しかった覚えがあります。私はあまり JavaScript でのコーディングが得意ではないので、今でもよく jQuery を使ってコーディングしてます …。 以前：CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました という記事を書いたのですが、今回はその復習 & jQuery
【入門】webアプリ開発を習得するための手順、言語、本、フレームワークまとめ | らふらく^^ ~ブログで飯を食う~
【重要な追記】プログラミング独学はキツいと、本題になる前に重要なことを書いておきます。 僕も最初そうでしたが、JavaScriptなどプログラミングは独学だと難しくて投げ出したくなります。 僕もできずに心が折れかけていました。 そんな時に東京でプログラミング教室をやっていることを知り、参加してみたのでした。 ＞＞プログラミングでできること、日常生活での活用例、主要言語などまとめ プログラミング教室で理解速度は格段に上がる結果、プログラミングへの理解度がかなり高まり、その後の勉強がスムーズにいきました。 なので、僕はお金を払ってでも、プログラミング講座、スクールには行った方がいいと思っています。 当時、学生ながら3万円くらい払いましたが、そこに投資して本当に良かったです。 今月から有料プログラミングスクールに通うことに 独学だと概念理解できなくてつまずいてしんどかったので 結果として行ってよ
jQuery高速化！処理速度を10倍上げるテクニック20選
Aircraft manuevers during an airpower deomonstration. / Official U.S. Navy Imagery Javascriputを簡単に書けるようにしてくれるライブラリのjQueryですが、使い方をちょっと変えるだけで、パフォーマンスに大きく差がでます。ハイスペックPCでは分かりづらいかもしれませんが、スペックの低いPCやモバイルではWebページの表示速度が遅くすぐに閉じられるかもしれません。 Webページがたった1秒高速化するだけでECサイトなんか、売上が10％向上した事例もあります。そこで、jQuery高速化のポイントや方法をここにまとめておきます。 jQueryの最新バージョンを使う 図1 jQueryのバージョンによる速度 https://jsperf.com/speed-comparison-of-jquery-vers
[JS]操作感が楽しい！左右にドラッグ・フリックしてコンテンツを表示するスクリプト -Snap.js
表示されているページを左右にドラッグ（フリック）して、アニメーションで左右にコンテンツをスライド表示するデスクトップにもスマフォにも対応したスクリプトを紹介します。 jQueryなどの他のライブラリには依存しません。 Snap.js -GitHub Snap.jsの特徴 Snap.jsのデモ Snap.jsの使い方 Snap.jsの特徴 jQueryなどの他のライブラリへの依存は無し CSS3を使った強力なアニメーション スライドは右・左に対応 ドラッグ操作のサポート ドラッグ操作禁止要素も定義可能 スマフォのフリック操作のサポート フックイベントのサポート イベントの有効・無効の設定 カスタマイズが簡単 対応ブラウザ IE10を含む全てのモダンブラウザに対応しています。 IE7/8/9はCSS3での一部の機能が制限されます。 Firefox 10+ Chrome, SafariなどのWe
jQuery の on() と off() を理解する - tacamy--blog
初心者向けの本とかだと、イベントを jQuery オブジェクトの後に直接指定する、 $('.foo').click(); のような書き方で説明されている場合が多いけど、少し複雑なことをしようとするとそれだと困ることが出てきます。そんなときに便利なのが on() を使ったイベント設定です。 on() ひとつで bind() live() delegate() を表せる jQuery 1.7 で、bind() live() delegate() がすべて on() に統合されたそうです。 つまり on() の書き方によって、3 パターンの使い方ができるということです。 .foo という要素をクリックしたら何かするという例で、イベントの設定と削除の方法をそれぞれ書いてみます。 bind() $('.foo').bind('click', function(){...}); は $('.foo')
jquery小技まとめ３２
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
背景に動画をフルスクリーンで表示できるjQueryプラグイン
tubular, a YouTube Backg... / BigVideo.js - The jQuery... / jQueryで背景に動画をフルスクリーンで表示す...他...全3件
| blog.ryow.net
jQuery.lazyloadという画像の遅延読み込みライブラリが一時期はやっていましたが、かつてのスクリプトでは最近のブラウザで正しく動いてくれないそうです。 古いブラウザでは、画像のsrc属性を指定した状態で、laz […]
[JS]jQueryのプラグイン100選 -2013年総集編
今年も数多くの素晴らしいjQueryのプラグインがリリースされました。当ブログで紹介したものをはじめ、未紹介のものまで、jQueryのプラグイン100+α選です。 今年目立ったのは、アニメーションを使ったスクロール関連のスクリプト。 スクロール前提の1ページサイト、パララックスなど、コンテンツをより大きなサイズで楽しむものが増えました。また、スマフォ・タブレットに大きく影響を受けたインタラクションも目立ちましたね。 1ページコンテンツ用のスクロール関連 パララックス スクロール関連 スクロールで定位置関連 その他スクロール操作・補助関連 スクロールバー関連 レスポンシブ関連 エフェクト関連 ナビゲーション関連 レイアウト関連 画像ギャラリー関連 画像拡大・配置・キャプション関連 コンテンツスライダー関連 カルーセル関連 アニメーション関連 フォーム関連 コンテンツのツアー関連 テキスト関連
jQueryのpropメソッドとattrメソッド
jQueryのpropメソッドとattrメソッド このエントリーはjQuery Advent Calendar 2013の 4日目のエントリーです。(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。) jQueryのattrメソッドの仕様がjQuery 1.9から変わったのでpropメソッドと含めて現在の仕様の解説を行ないます。 次のスクリプトではattrメソッドとpropメソッドでチェックボックスの状態を監視して取得しています。 $("input").change(function(){ alert("attr:"+$(this).attr("checked")+"\n"+"prop:"+$(this).prop("checked")) }); この挙動をjQuery 1.10.2とjQuery 1.8.3で比較してみまし
HOME | CYOKODOG
2022-07-14 WebpackベースのVueプロジェクトのビルド環境バージョンアップの作業記録 2022-07-13 動的サブセッティング下でのWebフォントのCanvasへの適用方法 2022-04-12 アップロード処理の周辺実装のざっくりまとめ 2020-10-16 セッション切れ時のフロント側の制御について 2020-10-10 Code Splitting と非同期コンポーネント 2020-07-30 Enum の代わりに使う union 型 2020-07-09 Redux Toolkit の EntityAdapter をさわってみる 2020-06-04 Redux Toolkit の AsyncThunk をさわってみる 2020-05-28 Redux Toolkitをさわってみる 2020-04-08 foreverとAutomator.appでMac起動時にH
jQueryのbind/live/delegateの違いまとめ、と新API .on()の使い方 - y-kawazの日記
jQueryのイベント記述方法はいくつかあり、大雑把におさらいしたのが以下の3パターンです。 まず一番基本的なのが $("a").click(fn) や $("a").bind('click', fn) です。click(fn)はbind('click', fn)の省略形です。 次にjQuery1.3で $("a").live("click", fn) という機能が出来ました。liveの良いところはDOM操作で出たり消えたりするエレメントに対して再バインド無しでイベント定義ができる利便性と、内部的にはbind個所がdocumentの1か所になり複数個所へのbindが無くなることによるメモリ効率と実効速度の向上です。 更にjQuery1.4.2で $("#foo").delegate("a", "click", fn) という書き方が出来るようになりました。これは特定要素以下に限定するliv
jQuery の each() の continue / break は・・・ : 地潜の日記
2009年03月14日 18:41 カテゴリプログラム・スクリプト jQuery の each() の continue / break は・・・ No Comments No Trackbacks 忘れそうなので覚書〜 JavaScript で配列なんかをイテレーション処理する時は、for を使うのが一般的。 ● JavaScript の書き方 for (var i=0, numArity=arrHOGE.length; i<numArity; i++) { (なんか処理); } jQuery を使ったときは、イテレーションのために each を利用できる。 ● jQuery の書き方 $(arrHOGE).each( function(i) { (なんか処理); } ); 便利だねー。 ■ continue / break のやり方 さて、for でグルグル回している処理を 「その時だ
レスポンシブWebデザインに対応した「jquery.heightLine.js」
レスポンシブWebデザインに対応した「jquery.heightLine.js」 多くの方に方に愛用いただいている要素の高さを揃えるJavaScriptライブラリ「heightLine.js」の新バージョンとして「jquery.heightLine.js」を公開しました。 heightLine.jsとの違いとしては、 jQueryプラグイン化したのでjQueryが必要です 高さを揃えたい要素をclassではなくjQueryのセレクタで指定します レスポンシブWebデザインに対応、特定のウィンドウ幅の場合のみ高さを揃えます destroyとrefreshメソッドを追加、高さ揃えの無効化や再揃えが簡単にできます などがあります。 ダウンロード / サンプル / GitHub 利用方法 まずは、jQueryとjquery.heightLine.jsをページ内で読み込みます。 <script sr
カルーセルの決定版！スマホにも対応した「OWL Carousel」 - Tecuration .com
「OWL Carousel」はスマホからのタッチ操作や、レスポンシブデザイン、クロスブラウザ対応がされたカルーセルスライダーを実装するjQueryプラグインです。 OWL Carousel 最近は多くのプラグインがスマホからのタッチ操作に対応しつつあります。時代の流れですね。このプラグインにおいても例外ではなく、しっかりタッチ操作に対応しております。PCではドラッグが相当します。 レスポンシブデザインが取り込まれており、画面幅をかえるとページネーションも作り替えられます。例えばこの状態から画面幅を狭めると。 この通り、ページネーションの個数が2個から4個に変わっています。 そしてクロスブラウザ対応により「IE7, IE8, IE9, IE10, Chrome, Safari, Firefox, Opera, Dolphin, iPhone, iPad, Google Nexus」に対応して
[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する | CreativeStyle
タイトルに書いてあることを実現しようとして、少し悩んだのでメモ。 ウインドウのリサイズ操作やjQueryに限らず、短い周期で連続してイベントが発生する場合に、一連の最後のイベントが発生した時にだけ何らかの処理を行いたい時に使えるパターンです。 何も工夫せずに書くと… こんな感じになります。
一定範囲で position:fixed させる Ex Flex Fixed がかゆいとこだらけだったので作り直しました - Cyokodog :: Diary
かゆいとこだらけの Ex Flex Fixed (サイドメニューなどを一定の範囲でのみ position:fixed させる jQuery Ex Flex Fixed)を作り直しました。 改善内容 fixed 要素の幅を自動調整するようにした リキッドレイアウト(可変幅)でちゃんと表示するようにした fixed 要素がコンテナからはみ出ないようにした fixed 要素がウィンドウ高さに収まらない状態でのスクロール時の表示を見やすくした 動的にレイアウトサイズが変更されても、ちゃんと表示されるようにした カラム高さを揃えるプラグインと併用できるようにした という訳で半年も放置しておいてあれですが、ちょくちょく問い合わせもあるので、ご利用の際には新バージョンでどうぞ。 動作確認 以下のレイアウトのデモページで、新旧それぞれのバージョンの動作を確認してみます。 <div class="heade
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VMware Fusion からネットワークにつながらなくなる場合の覚え書き - おたくマニアのココロ
http://yp.xenophy.com/?p=71