@charset "UTF-8"; /* CSS Document */ html,body{ background-color:#fff; margin: 0; padding: 0; } #animation_area{ width: 500px; height: auto; position: relative; margin: 0 auto; margin-top: 150px; } h1{ padding: 0; margin: 0 0 30px 0; height: 40px; line-height: 40px; text-align: center; } #animation_area .contents{ position: relative; width: 100%; } #animation_area .contents p{ font-weight: bold; }

＊ はじめに!! お疲れ様です！ぴーすけです！ JavaScriptで処理のタイミングを遅らせる方法として「window.onload」に処理を登録する方法があります。 今回はそのいろいろな書き方についてまとめたいと思います。 ＊ 書き方!! JavaScript① window.onload = function() { 処理 }; JavaScript② window.addEventListener('load', function() { 処理 }); jQuery $(window).on('load', function() { 処理 }); この３つの書き方はどれも同じタイミングで処理が動きます。 ＊ 処理が実行されるタイミング!! loadイベントに紐付いている処理は画面の表示が始まってから、HTMLの構造はもちろん、画像のロードなどが全て完了してから処理が走ります。 なの

どうも、まさとらん（@0310lan）です。 今回は、毎日のように誕生する新しいJavaScriptライブラリの中から、思わず使ってみたくなるようなオススメのライブラリを厳選してご紹介しようと思います。 そのままWebアプリとして活用できそうなモノから、コードの書く量を大幅に減らしてくれたり、ユーザー体験を一気に向上してくれるモノまで、幅広いジャンルをまとめていますので、ご興味ある方はぜひ参考にしてみてください！ ■入力された内容を自動検証する！ 【 Cleave.js 】 フォームなどでよく使う「inputタグ」で、何が入力されたかを検証して意図しないデータ入力を簡単に防ぐことができるのが「Cleave.js」です。 使い方は非常にシンプルで、例えば「電話番号」を入力する「inputタグ」があったとします。 <input type=”tel” id=”input-tell” /> 「in

cssだとメディアクエリーを使うことで、デバイス毎にcssを分離出来るから便利だったり。 けどjsにはそんな都合がよいものはないわけで、じゃあどうするかって考えると、 $(window).width()で条件分岐してあげるって考えるけど、 画面サイズが変わった場合って考えると$(window).resize()を使う事になるんだけど、 resizeはwindowサイズが変わるたびにイベント発火するし、 そもそもwindowsサイズが変わらなかったら発火できないからイベントを付与する前に発火を一度しないといけない。 まぁそこら辺考えると面倒だし、そもそも640pxみたいに指定した大きさで発火してほしいんだけど、 それに対応するにはwindow.matchMedia()を使うと対応する事が出来る。 ということで今日はそのwindow.matchMedia()の使い方についてをば。 $(docu

return false;はa要素にclickイベントを設定する際に必要な記述で、 return false;がないとclickイベントを実行した後にリンク先に移動してしまう それを防ぐ為の記述らしい return false;をclickイベントの最後に記述すれば、イベントハンドラ自体がfalseを返すことで、 本来イベントが行う処理をキャンセルすることができる 例えば $(functin(){ $("a").click(function(){ $("img").attr("src","cat.jpg").attr("alt","にゃー"); return false; )} )} <a href="cat.jpg">画像を変更</a> <p><img src="dog.jpg" alt="わん"></p> この場合、a要素がクリックされた際にはjQueryの命令だけが実行され、href

標準組み込みオブジェクトStringコンストラクターString() コンストラクター静的メソッドString.fromCharCode()String.fromCodePoint()String.raw()インスタンスメソッドString.prototype.anchor() 非推奨 String.prototype.at()String.prototype.big() 非推奨 String.prototype.blink() 非推奨 String.prototype.bold() 非推奨 String.prototype.charAt()String.prototype.charCodeAt()String.prototype.codePointAt()String.prototype.concat()String.prototype.endsWith()String.prototyp

Page Not Found Where are you going to fly? You seem to have followed a route that does not exist.

さて引き続き関数の勉強です！(｀・ω・´) グローバルスコープとローカルスコープがある スコープとは 「変数が作りぷとの中のどの場所から参照できるか」 を決める概念である JavaScriptのスコープは以下の2つに分類できる グローバルスコープ スクリプト全体から参照できる ローカルスコープ 定義された関数の中でのみ参照できる ここまではトップレベルで定義する (関数の外で定義する)変数だけ見てきたので スコープを意識する必要はほぼなかったが いよいよ関数が登場したところで このスコープについても理解しておく必要がある はーい！がんばりまーす！ グローバル変数とローカル変数の違い グローバルスコープを持つ変数のことをグローバル変数 ローカルスコープを持つ変数のことをローカル変数という とりあえず一旦は グローバル変数 関数の外で宣言した変数 ローカル変数 関数の中で宣言した変数 と覚えて

スコープとは、変数の有効範囲のことで、プログラムのどの場所から参照できるかを決める概念です。 スコープの種類 JavaScript のスコープには、グローバル変数とローカル変数の 2 種類あります。 グローバル変数 ローカル変数 関数の外（トップレベル）で宣言した変数 関数の中で宣言した変数, 関数の仮引数 プログラム全体から参照できる その関数の中でのみ参照できる ブロックスコープは存在しない Java などの言語では、if や for などの {} で囲まれたブロックごとにもブロックスコープがありますが、JavaScript には存在しません。 JavaScript でどうしてもブロックスコープを使いたい場合は、with 命令を使う方法や、無名関数を定義と同時に呼び出すなどの方法で、擬似的にブロックスコープを作ることは可能です。 補足 : let を使うとブロックスコープがつくれると教

変数に代入される値が数値や文字列といったプリミティブ型の値だった場合には「値渡し」と呼ばれるような処理が行われます。また変数に代入される値が配列や関数などのオブジェクト型だった場合は「参照渡し」と呼ばれるような処理が行われます。ここではプリミティブ型とオブジェクト型の値が変数に代入されるときに実際どのように行われるのかについて解説します。

JavaScript チュートリアル 初級編 JavaScript の基礎 JavaScript の第一歩 JavaScript の構成要素 JavaScript オブジェクト入門 JavaScript ガイド 入門編 文法とデータ型 制御フローとエラー処理 ループとイテレーター 関数 式と演算子 数と日付 テキスト処理 正規表現 インデックス付きコレクション キー付きコレクション オブジェクトを利用する Using classes プロミスの使用 JavaScript 型付き配列 イテレーターとジェネレーター メタプログラミング JavaScript モジュール 中級編 クライアントサイド JavaScript フレームワーク クライアントサイド Web API Language overview JavaScript のデータ構造 等値比較と同一性 プロパティの列挙可能性と所有権 クロ

Movable Type, Craft CMS, Drupal, HTML, CSS, JavaScript, jQuery etc. jQueryAutoHeight.js とは jQueryAutoHeight.js とは、複数のボックスの高さを自動的にそろえるシンプルな jQueryプラグインです。高さのそろえ方は、次の２通りです。 セレクタで指定したすべての要素を、その中の最大値にそろえる セレクタで指定した要素を、オプションで渡した数ごとに、その中の最大値にそろえる（1行ごとにそろえられる） サンプル 複数のボックスの高さを最大値にそろえるjQueryプラグイン ダウンロード Releases · tinybeans/jQueryAutoHeight ※jQuery 1.9 以降で利用する場合は v0.04 以降をお使いください。 使い方 ファイルの読み込み ダウンロードしたファ

半年ほど前にここで、「jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」と題して、画面幅めいっぱいでのコンテンツスライダーを紹介しましたが、当時紹介したスクリプト構成だとレスポンシブには対応していませんでした。 同じ、画面幅めいっぱいでのコンテンツスライダー構成でレスポンシブ対応させたパターンを必要に駆られて作成してみたので、ここでも紹介してみたいと思います。 【2014/01/15】 スライダー部分にフリック動作を追加しました。スクリプト内の設定でフリック動作のON／OFFを設定が可能です。 このスライダーはなかなか言葉では説明しずらいのでまず動作サンプルから。 「jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」サンプルを別枠で表示 スライダー中心にメイン表示エリアを設置して、その

こんにちは。SNS mixi の JavaScripter、kuniwak です。 新しい仲間たちが入社する季節になりましたね。 さて、ミクシィを支えるエンジニアが作成した JavaScript 研修の資料を Github にて公開しました。 ミクシィは 2013年から研修資料を公開していましたが、今年は JavaScript の進化に合わせて内容を刷新しています！ 2015年度の JavaScript 研修は、Web アプリケーションの部品（モジュール）をつくれるようにすることを目標とした、実践的な研修として計画されました。 JavaScript 研修のために与えられた期間は2日ということもあり、MVC や Flux といった設計方面の話題には踏み込めていませんが、Promise、Fetch API、Bower など、現在・未来のフロントエンド開発に必須の要素を盛り込んだ最新のJavaS

HTML5(Canvus)、Javascript向けの画像処理ライブラリについてまとめたので紹介します。 続きを読む

JavaScriptでモジュールを作る方法を幾つか調べていると見つかった本や長めの記事を記録する． 長いので，pdfでダウンロードするか，pdfに変換してDPT-S1に入れた． (ウェブページ→pdf→短縮URL→DPT-S1を楽にするものを作りたい．．．) 長い記事．PDFとして保存した Google流 JavaScript におけるクラス定義の実現方法 Google流 JavaScript におけるクラス定義の実現方法 JavaScript Module Pattern: In-Depth JavaScript Module Pattern: In-Depth 生のJavaScriptでモジュールパターンを表現する話が結構しっかりまとまっていてわかりやすかった． 後発の仕組みを実現しているのかなぁと思っている． 本．PDFがあれば直接．なければPDFとして保存した Learning J