この資料では、JavaScript でオブジェクト指向プログラミングを行う際に備えておくことが望ましい、基礎知識や概念について解説します。 【対象者】 ・JavaScript でアプリケーションを構築できる方 ・JavaScript におけるオブジェクト指向プログラミングの 実現手法や原理への理解を深めたい方 ・Java 的なクラスベースの言語との違いに違和感や混乱を 感じてらっしゃる方
最強オブジェクト指向言語 JavaScript 再入門！
この資料では、JavaScript でオブジェクト指向プログラミングを行う際に備えておくことが望ましい、基礎知識や概念について解説します。 【対象者】 ・JavaScript でアプリケーションを構築できる方 ・JavaScript におけるオブジェクト指向プログラミングの 実現手法や原理への理解を深めたい方 ・Java 的なクラスベースの言語との違いに違和感や混乱を 感じてらっしゃる方
メンテナブルなJsってなんだろう
実務でよく使うhtml,css,jsの小技をつらつらと紹介します。 ※2/11のスクーの授業中で使った資料です。 https://schoo.jp/class/1776 【オシャレCSS編】 1. transformを使って要素を変形させるワザ 2. transitionを使い、CSSだけで簡単なアニメーションを行うワザ 3. keyframesを使ってCSSだけで複雑なアニメーションを行うワザ 4. 矢印アイコンをcssだけで表現するワザ 5. アイコンをアニメーションさせるワザ 6. CSSプロパティ”filter”で画像を加工するワザ 【地味だけど使えるワザ編】 7. 今どきの、要素を上下中央寄せにするワザ 8.「flexbox」で要素を自由自在に整列させるワザ 9. Windowsでwebfontをちょっとマシに見せるワザ 10. ア
【JavaScript】デザインパターンを知ってみる。モジュール・パターン編 | バシャログ。
JavaScriptで書くデザインパターンが気になっているので、手始めに一番よく見ているであろうモジュール・パターンについていろいろ調べてみました。 なぜ使うの？ モジュール・パターンは名前の通り、処理を他の処理とぶつからないように安全に切り離し、モジュールの形として提供する考え方です。YUI などの大規模なフレームワークから小さなライブラリにも取り入れられています。以下のようなメリットがあります。 グローバル変数を極力減らして、機能をモジュールの形で提供できる。 コードの成長に合わせて構造を作れる コードを見通しやすくする 要件に応じて追加、置き換え、削除ができる シンプルな書き方 Sample というオブジェクトを作って、いろいろ便利な機能をつけていきたい、という場合、下記のような書き方ができます。 var Sample = { name: 'sampleくん', age: '30',
アイテムをクールにアニメーションしつつフィルタ・ソートが出来るjQueryプラグイン「MixItUp」:phpspot開発日誌
MixItUp アイテムをクールにアニメーションしつつフィルタ・ソートが出来るjQueryプラグイン「MixItUp」 これはなかなか汎用性があって便利そう。デモサイトではレスポンシブにもなっていて、タッチデバイスでも快適に使えそうです。 ブログ、ポートフォリオサイトなど、実装すればよりモダンでクールなサイトに仕上がりそうです。 関連エントリ 画像表示をレスポンシブ対応にするjQueryプラグイン「Data Img」 レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 レスポンシブでタッチフレンドリな軽量LightBox実装jQueryプラグイン「Image Lightbox」 クールに実装できるレスポンシブなモーダルダイアログ「Remodal」 レスポンシブサイト用レイアウトフレームワーク「Grid」 レスポンシブかつフラットなソーシャルボタンを実
JavaScriptの動かないコード (JavaScriptエラー集) - 主に言語とシステム開発に関して
「このJavaScriptコードが動かないのは，なぜですか？」というミニクイズ集。 すべて制限時間は１分。 別名，JavaScriptのエラー事典。またはアンチパターンのまとめ。 中級編 初級編 番外編 2015年５月現在，全５３記事。 中級編 JavaScriptの仕様関連 p要素への appendChild() で失敗する かけ算を間違える イベントハンドラが見る値のエラー クロージャを使わない場合に起きるエラー オブジェクトのprototypeを変更した時のエラー 正規表現で同じ文字の連続を検出したい - 置換前パターン中での後方参照 jsonオブジェクトをevalできないエラー 不要なイベントが連鎖で発生してしまう （バブリングの対処） オブジェクトのプロパティ定義にthisを使って失敗するエラー setTimeoutのタイマーが指定時刻に動かないエラー オブジェクトのメソッドを
JavaScript で throw "" ではなく throw new Error() を使ったほうがよい(些細な)理由 - latest log
JavaScript で人為的に例外を発生させるには、大きく分けると以下の2種類があります。 throw new しない書き方 throw "ソフトウェアでエラーが発生しました。サポート担当者に連絡し、この問題を報告してください。"; o_o は String 扱いで、o_o.stack も undefined になっています。 throw new する書き方 throw new Error("一般的なエラーだよ"); throw new TypeError("型がちがうよ"); throw new SyntaxError("文法おかしいよ"); throw new URIError("URIちがうよ"); 他にも、RangeError, ReferenceError, MediaError, FileError, EvalError などがあります。 throw new した場合は、o_
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で，動的に追加されたイベントリスナの実行順序を保
画像表示をレスポンシブ対応にするjQueryプラグイン「Data Img」:phpspot開発日誌
Data Img - Two Blokes 画像表示をレスポンシブ対応にするjQueryプラグイン「Data Img」 単に横方向に拡大・縮小するだけのレスポンシブ対応ならCSSで出来ますが（Bootstrapのimg-responsiveみたく）、 幅に応じて複数の画像を切り替えたいような場合に、使えます。単なる縮小だと文字が小さくなりすぎて読めないなんて場合に別の画像を使うことも考えられますが、そういったケースに使えるプラグインとなります マークアップ的には次のように複数の画像を指定してプラグイン初期化する感じの使い方みたいです 関連エントリ レスポンシブでモバイルフレンドリなツールチップ実装ライブラリ「Mobile-Friendly Tooltip」 レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 レスポンシブかつフラットなソーシャルボタン
あれ、いつも書いてるな～というJavaScript の小技集 | バシャログ。
いい加減髪を切りたいminamiです。 JavaScriptでいつも書いてるな～という処理や、知っていると便利なTipsを簡潔に集めた記事を見てほお～と思ったものがいくつもあったので抜粋してみました。 ※追記1： ご指摘がありましたので一部修正しました。「配列をソートする」ではなく「配列をシャッフルする」でした。 ※追記2：「HTMLをエスケープする」のソースがまちがって表示されていました。修正しました。 ※追記3：予想以上に反響が大きく、多数ご指摘を受けてしまいました。よく使う処理の書き方もいろいろあるんだな～という参考程度にご紹介したのですが、参照元の記事の内容の検証が不十分なまま紹介してしまい申し訳ありませんでした。いろいろと勉強になりました！ 45 Useful JavaScript Tips, Tricks and Best Practices 配列からランダムで値を取り出す v
[JS]異なる高さを単に揃えるだけでなく、グルーピングや列に応じて揃えることも可能な便利スクリプト -matchHeight
デモページ：幅1,200pxで表示 これは、ボーダー無しの状態。 jquery.matchHeight.jsの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとしてhead内に記述します。 <head> ... <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.matchHeight.js"></script> </head> Step 2: HTML 適用するパネル全てに同じclassを付与します。 各パネルが横一列に配置された場合は、全て同じ高さに。複数の列に配置された場合は各列で一番高いも
[CSS]画像やボタンなどのクリック・ホバー時にCSS3アニメーションを簡単に与えることができる -All Animation
画像やボタンなどの要素にclassを与えるだけで、さまざまな面白いCSS3アニメーションを利用できるスタイルシートを紹介します。 トリガーにjQueryを使うことで、クリックやホバーなどのアクションでも簡単に利用できます。 All Animation All Animation -GitHub All Animationのデモ All Animationの使い方 All Animationのデモ デモでは数多くのCSS3アニメーションが楽しめます。 ほんの少しですが、gifアニメーションにしてみました。 ぶるぶる震えて拡大して、フェードでスライドして、ぱたっと開いて、ぷら〜んと落ちます。 実装できるアニメーションの一覧 All Animationの使い方 アニメーション自体はCSSで、クリックなどのトリガーにjQueryを使用します。 もちろん、ホバーなど他のアクションを利用することもでき
Webアプリ開発者のためのHTML5セキュリティ入門
Enterprise x HTML5 Web Application Conference 2014の発表資料です。
jQuery：チェックされたら or 入力されたら送信可能にするボタンを実装する方法 - NxWorld
割と頻繁に使うので備忘録。 jQueryを使用して「チェックボックスにチェックされたら送信可能にするボタン」と「文字が入力されたら送信可能にするボタン」をそれぞれ実装する方法です。 特にチェックボックスの方は利用規約などに同意してもらったかの部分で用いたりと使う場面が多いのではないかと思います。 チェックボックスにチェックされたら送信可能にするボタン ページが表示された際はイメージ左のようにボタンにはdisabledが指定されて送信できない状態になっています。 それを「利用規約に同意します」というテキスト横にあるチェックボックスにチェックが入ったら、ボタンに指定してあるdisabledを解除して送信可能にするというものです。 実装にはjQueryを使用するので予め読み込ませおき、それぞれ下記のように記述をします。 <input type="checkbox" id="check" /><l
あなたが読むべきJavaScript Promises | JSer.info
はじめに この記事は、 JavaScript/ES6 promisesについてを理解するために読んだ方がよいと思われる記事やスライド等を紹介しています。 PromisesやDeferredといった言葉を非同期処理の話などで聞いた事があるかもしれませんが、 現在Promisesは次のECMAScriptの言語仕様として策定が進められています。 ECMAScript Language Specification ECMA-262 6th Edition – DRAFT domenic/promises-unwrapping まだES6は策定段階ですが、既にPromisesについてはpolyfillとして利用できるライブラリ等もあり、また他のライブラリ内でもjQuery.Deferred()やAngularの$q等類似する実装が存在します。 そのため、Generators等に比べると今すぐ使える
jQuery.pjaxとjQuery.bottomを使ってSEO対策つきの無限スクロールを実装する
jQuery.pjaxとjQuery.bottomを使ってSEO対策つきの無限スクロールを実装することにより、追加されたコンテンツをインデックスに登録させる方法を紹介します。 １．はじめに 「Googleが推奨するSEOに適した無限スクロールの構成方法」で「無限スクロールのページにpushStateを実装する。（ことを推奨）」とあります。 同じページにサンプルへのリンクが掲載されていますが、自前の実装らしく、汎用的に使えるようなサンプルが紹介されているサイトはひとつもみつかりませんでした。 ということで、配布されているjQueryプラグインを組み合わせて、SEO対策つきの無限スクロールを実装してみたいと思います。 利用するjQueryプラグインはタイトルのとおり、jQuery.pjaxとjQuery.bottomの2つです。 defunkt / jquery-pjax jimyi / jq
スクロールが使いやすいカレンダーピッカー実装jQueryプラグイン「continuous-calendar」:phpspot開発日誌
スクロールが使いやすいカレンダーピッカー実装jQueryプラグイン「continuous-calendar」 2014年02月18日- reaktor/jquery-continuous-calendar スクロールが使いやすいカレンダーピッカー実装jQueryプラグイン「continuous-calendar」 通常カレンダーというとペジネーションがはいっていて、月ごとにページ送りという形ですが、こちらはスクロールで過去にさかのぼれてサクサク動くのがいいです。 ドラッグ＆ドロップによる日付の範囲指定等も可能です。 月をまたいだ範囲指定等は従来のカレンダーピッカーでは難しそうですが、これなら便利に使えそうです。 関連エントリ カスタマイズが容易なカレンダー生成jQueryプラグイン「CLNDR.js」 フラットデザインがクールなカレンダー実装jQueryプラグイン「kalendar」 Go
サイト内にパノラマ画像をモダンな感じに読み込めるjQueryプラグイン「Panorama Viewer」:phpspot開発日誌
jQuery Panorama Viewer by Pete R. | The Pete Design サイト内にパノラマ画像をモダンな感じに読み込めるjQueryプラグイン「Panorama Viewer」。 パノラマ画像をよみこんで、D&Dやスワイプによって動かせるという感じのUIを作れます 実装されたページはなかなかいい感じ 関連エントリ 色々なタイプのスライダーが実装できる「sGlide」 HTML5＆CSS3なレスポンシブなスライダー実装jQueryプラグイン「Slippry」 スライダーの背景もダイナミックに切り替えるクールなスライダ実装jQueryプラグイン「Immersive Slider」 クロス環境で動作するレスポンシブスライダー実装jQueryプラグイン「FerroSlider」 レスポンシブでタッチ対応な軽量なスライダー実装jQueryプラグイン「Unslider」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IBM Developer
プログラミング言語Dartの基礎
JSONデータからtableを作成するためのスクリプト・「DYNATABLE」 - かちびと.net