`button`要素で画像ボタンを作る
フォームのボタンを画像で表現したい場合、input要素のtype属性をimageにしますが、button要素を使うこともできます。src属性とalt属性を使うinput要素と異なり、button要素は のように要素の内容を持てるので、画像とテキストを両方含められる、JavaScriptで動作するボタン（type="button"）も画像で表現できるなど自由度が高いです。 ただし、CSSでのスタイル当てにはいくつか注意しなくてはいけないことがあります。また、input要素による画像ボタンは HTML 2.0（RFC1866） で既に定義されていたのに対し、button要素は HTML 4.0 で登場したこともあり、古いブラウザ（IE6, 7）での対応状況が芳しくないので解決法を探ってみました。 リセットスタイルを書く Firefoxの ::-moz-focus-inner Internet
JavaScriptエラーを表示・確認する方法のまとめ
JavaScriptエラーを表示・確認する方法をまとめました。 １．はじめに ブラウザでページを表示したときに正しく表示されない、あるいはjQueryで設置したパーツなどが動作しない場合、JavaScriptエラーが発生している可能性があります。 JavaScriptエラーが発生しているかどうかを確認するためにはエラーを表示するためのコンソールを開く必要がありますが、コンソールの開き方が分からなかったり、ブラウザで操作方法も異なります。 このエントリーでは、以下のブラウザを対象にしてJavaScriptエラーの表示・確認方法を解説します。 Google Chrome Firefox IE ビギナーの方向けの内容です。 ２．エラーになるJavaScriptのサンプル エラーになるJavaScriptのサンプルとして、次のサンプルを用いて解説します。このJavaScriptを実行するとシンタッ
イメージスライダーを付けてみよう
それでは順を追って説明していきますね。ダウンロードしたファイルを解凍すると、以下のようにたくさんのファイルやフォルダがありますね。今回は Anything Slider を使っていますが、大体どんなプラグインも似たような構成になっていると思います。 anythingslider folder 2. HTMLをマークアップ HTML ファイルがいくつかありますが、これはデモ用のファイルです。プラグインによっては 1枚しかない場合も多いですね。Anything Slider の場合は、たくさんのデモファイルが用意されています。これら HTML ファイルは、HTML でのマークアップを参考にしたりするのにも使えますよね！ それではデモファイルを参考にして、HTML をマークアップしていきましょう。今回は一番シンプルなスライダーを作ってみたいと思います。マークアップは単純に<ul>と<li>で画像
WordPressでjQueryが動かないときの対策 | リノベーター（旧ザ・サイベース）
こんにちは。@tomicciです。 WordPressで運営しているブログやサイトで、jQueryを使ったスクリプトを使用したい場合に動作しないことがあります。。 HTMLタグの貼り付け方には問題はないはずなのに、どうにもこうにも動かない。 そんな時は、原因を調べるためにブラウザのコンソールを使ってJavascriptのエラーが発生していないかチェックをしましょう。 僕はFirfoxの場合はFirebug、ChromeやIEでデバッグをおこなう場合は「F12」キーで起動する開発ツールのコンソールを使用しています。※Windowsユーザーです。 「TypeError: $ is not a function」 こんな感じのエラーが表示されていたら、「$」を使ったコードが無効になっています。 WordPressでは、jQueryやPrototypeといった、他のJavascriptのライブラリ
チェックボックスに合わせてテキスト入力欄の有効・無効を切り替える方法 - JavaScript TIPSふぁくとりー
《2017年6月15日 12:30 PM 公開/更新》 チェックボックスに合わせてテキスト入力欄の有効・無効を切り替える方法 [入力フォーム] チェックボックスと連動するテキスト入力欄があるフォームでは、チェックボックスにチェックが入っているときにだけ対応するテキスト入力欄を有効化(＝文字が入力できる状態)し、チェックが入っていない場合はテキスト入力欄を無効化(＝文字が入力できない状態)すると分かりやすくて便利です。JavaScriptを使って、条件に応じて対象テキスト入力欄のdisabledプロパティの値を変えるだけで、簡単に有効化・無効化を切り替えられます。 チェックボックスに合わせてテキスト入力欄の有効・無効を切り替えると分かりやすくて便利 チェックボックスのチェック状態と連動するテキストフォームを作るHTML＋JavaScriptソース 有効化・無効化は、disabledプロパティ
引数を使って関数へ値を渡す
関数を呼び出す時、呼び出し側から関数へ値を渡すときに使うのが引数です。関数は渡されてきた値を受け取り引数のところに記述した変数に格納したあと、関数のブロック内で利用することができます。ここでは JavaScript で引数を使って関数へ値を渡す方法について解説します。
チェックボックスに合わせてテキスト入力欄の有効・無効を切り替える方法 - JavaScript TIPSふぁくとりー
《2017年6月15日 12:30 PM 公開/更新》 チェックボックスに合わせてテキスト入力欄の有効・無効を切り替える方法 [入力フォーム] チェックボックスと連動するテキスト入力欄があるフォームでは、チェックボックスにチェックが入っているときにだけ対応するテキスト入力欄を有効化(＝文字が入力できる状態)し、チェックが入っていない場合はテキスト入力欄を無効化(＝文字が入力できない状態)すると分かりやすくて便利です。JavaScriptを使って、条件に応じて対象テキスト入力欄のdisabledプロパティの値を変えるだけで、簡単に有効化・無効化を切り替えられます。 チェックボックスに合わせてテキスト入力欄の有効・無効を切り替えると分かりやすくて便利 チェックボックスのチェック状態と連動するテキストフォームを作るHTML＋JavaScriptソース 有効化・無効化は、disabledプロパティ
【JavaScript】ウィンドウを閉じるリンクを実装する方法。
現在開いているウィンドウを、任意のリンクをクリックしたときにJavaScriptを使用して閉じる方法を紹介します。 簡単に考えるとアンカータグにonClick="window.close();"を追加すれば実装できそうな気がしますが、実際にはこれだとブラウザによってうまく挙動しないケースがあります。 以下のように記述すればほぼすべてのブラウザに対応するようです。 <p><a href="javascript:window.open('about:blank','_self').close();">このページを閉じる</a></p> 一度対象のウィンドウに対して空のタブを開き、JavaScriptの操作を可能にして、その後に「close();」を実行しています。 なお、この方法を用いても、FireFoxでタブを利用してウィンドウを開いている場合、ページは非表示になりますがタブ自体は残ってしま
Modern JavaScript概観、そしてElectronへ | さにあらず
この一か月分の学習成果を整理したリポジトリを作ったので、その成果についてまとめておく。 作ったサンプルプロジェクトだけを手軽に欲しければ、このリポジトリを clone してほしい。 taichi/js-boilerplatemaster ブランチには、ミニマムな JavaScript 開発環境がサンプルコード付きで入っているfrontend ブランチには、React/Redux/webpackなウェブアプリケーション用の開発環境が入っているデフォルトブランチにしてある electron ブランチには、frontend ブランチの内容に加えてElectronでアプリケーションを開発するための環境が入っているはじめに#最近の JavaScript について#僕は仕事として JavaScript を書いている訳ではないけども、この半年くらいの間にちょっとしたツールならいくつか作った。どちらも便利
JavaScriptエンジニアなら知ってるよね？ エラー処理のいい書き方、悪い書き方
JavaScriptのエラー処理、ちゃんと書いていますか？ エラーを無視せず、どこに問題があるのか、きちんと確認できるコードの書き方をデモで紹介。 この記事はTim SeverienとMoritz Krögerが査読を担当しています。最良の記事を提供することができ、SitePointの査読担当者の皆さんに感謝します。 JavaScriptのエラー処理には危険が潜んでことを知っていますか？ もしマーフィーの法則を信頼しているとしたら、不具合が生じる可能性が本当に高いです！ この記事では、JavaScriptのエラー処理について考え、その落とし穴から便利な実践例までを説明します。さらに最後には、非同期コードとAjaxにも触れます。 JavaScriptはイベント駆動型プログラムで、プログラミングをより豊かなものにしてくれます。ブラウザーをイベント駆動型プログラムと考えると、発生するエラーは同一
jQuery逆引きリファレンス - 処理対象別インデックス
処理対象別インデックス 【Ajax】 イベント ／ 簡略表記メソッド ／ 基本 【Core】 ライブラリバージョン 【CSS】 スタイルプロパティの取得／設定 【アニメーション】 スライド ／ フェード ／ 基本 【イベント】 イベントオブジェクト ／ イベントリスナー ／ フォーカス ／ 基本 【エフェクト】 一時停止 【コア】 jQuery3への移行 ／ jQueryMigrationプラグイン ／ jQueryオブジェクト ／ ライブラリインポート ／ ライブラリの共存 ／ ライブラリフォールバック ／ 基本 ／ 控えめなJavaScript ／ 最新版へのマイグレーション 【セレクター】 jQuery拡張 ／ 階層 ／ 基本フィルター ／ 子要素フィルター ／ 属性 【トラバーシング】 オブジェクトの操作 ／ ツリー上の範囲選択 ／ ツリー上の要素選択 ／ フィルタリング ／ 検索
JavaScript初級者から中級者になろう — uhyohyo.net
このページの最終更新日：2019年7月4日 JavaScript。主にWebページを作るのに使われるほか、現在ではさまざまなところで活躍しているプログラミング言語です。 このページはJavaScriptの中級講座です。最新鋭ではないかもしれませんが、読み進めれば大抵のものを自分で作れるようになることでしょう。 言い訳とJavaScriptの歴史 / 問い合わせ 最近の更新2017/10/05 全ページを手直ししました。十六章第六回を追加。2017/11/9 十六章第二十一回・十六章第二十二回を追加。2017/12/2 十七章第三回・十七章第四回を追加。2017/12/3 十七章第五回・十七章第六回・十七章第七回を追加。概要コンテンツは第一篇と第二篇に分かれています。 JavaScriptは昔からWebページに動きを与えるものとして用いられてきましたが、第一篇ではそのような、昔からあるJav
JavaScript入門
JavaScript はクライアント側で実行されるオブジェクト指向型のスクリプト言語です。 JavaScript を用いることで、動的にWebページの内容を書き換えたりフォームに入力された内容をクライアント側でチェックしたりできます。ここでは JavaScript の使い方として JavaScript のプログラミングの方法をサンプルを用いて解説していきます。
Canvasで実装するシンプルなローディング画面3パターン - Qiita
はじめに 読み込みに時間が掛かるようなコンテンツの場合、エラーでは無く読み込み中ということをユーザーに伝えるため、ローディング画面（スプラッシュ画面）を用意することはよくあるかと思います。 gifアニメーションで意図を伝えるのも良いと思いますが、できることならその読み込み状況を合わせて表示させると、よりフレンドリーかと思います。 今回はCanvasを使用して、シンプルな3種類のローディング画面を作成してみました。3種類とは単に思いついただけのものですが、基本的にはこれらの応用で色々なローディング画面を作成できるかと思います。 実際の動きは↓ページで確認ができます http://nekoneko-wanwan.github.io/demo/canvas/loading/ 使用したライブラリ preloadJS CreateJSのモジュールの一つで、色々なファイルの読み込み率が取得可能 ※なお
scroll, resizeイベントの負荷を抑制する
Updated 2015.05.29 / Published 2013.11.21 特定の場所までスクロールしたら要素を表示させたり・動かしたり、またはリサイズに応じてレイアウトを再調整したりなど、JavaScriptではscrollやresizeに応じたイベントが頻繁に用いられますが、これらのイベントは断続的に処理を実行することになるので、制作者の意図せぬ形でユーザ側では負荷の高い処理になっているかもしれません。そこで、ちょっとの工夫だけでこれらのイベントの負荷を抑制できるポイントを紹介します。 スクロール時におけるサンプルコード try { //IE9+, Other Browsers window.addEventListener( 'scroll', sample, false ); } catch (e) { //for IE8- window.attachEvent( 'ons
jQueryで「Now Loading-30%」みたいなプリローダーを作る方法
フラッシュサイトの専売特許だったNowローディング（プリローダとも）ですが、jQueryやHTML5の登場で、最近では、非フラッシュサイトでも見かけるようになりました。この記事では、jQueryを使ってプレローダーを表示する方法を考えて見ます。 デモ 今回作るプリローダーのデモです。一度読み込むとキャッシュされてしまうので、もう一度みたい方は、ブラウザをキャッシュを消して見てください。 デモ 考え方とコード イメージファイルが重いサイトの場合であれば、イメージをプレローディングしながら、読み込んだイメージ数に応じた％を表示することでプリロード します。すべて読み込んだらメインコンテンツを表示します。 このサンプルコードでは、画像のロードイベントを拾って読み込んだイメージをカウントし、%とプログレスバーの表示を変えています。 <!DOCTYPE html> <html> <head> <sc
マウスポインターが要素に出入りした時の処理を実装するには？（mouseover、mouseout、mouseenter、mouseleave、hover）
違いが分かりにくい「mouseover／mouseout」と「mouseenter／mouseleave」イベントの使い分け方法を解説。また、これらに関連する「hover」イベントメソッドについても説明する。 ← 前回 連載 INDEX 次回 → 別稿「イベントに応じて処理を実行するには？」の表でも触れたように、jQueryではさまざまな＜イベント名＞メソッドが標準で用意されています。そのうち、ほとんどが直感的に理解できるものばかりですが、mouseover／mouseoutとmouseenter／mouseleaveの違いは一見して分かりにくいものです。 本稿では、具体的なサンプルの中で、両者の違いを示すと共に、マウスの出入りを簡単に検出するhoverメソッドについても触れます。 mouseover／mouseoutとmouseenter／mouseleaveイベントの基本 まずは、具体
mousemove(fn) - jQuery 日本語リファレンス
各要素のmousemoveイベントに関数をbindします。 mousemoveイベントは通常、マウスなどのポインティングデバイスが要素上で動いた際に呼び出されます。 イベントハンドラはコールバック関数にイベントオブジェクトを渡します。イベントオブジェクトはclientX/clientYというプロパティを持ち、マウスカーソルの位置を取得できます。 jQueryのイベントは、コールバック関数の最初の引数でjQuery.Eventオブジェクトを受け取ることができます。このオブジェクトを使って、規定のイベント動作のキャンセルや、バブリングの抑制などを行います。 <p> Try scrolling too. <span>Move the mouse over the div.</span> <span> </span> </p> <div></div> $("div").mousemove(func
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
【JavaScript】要素の位置にスクロールする at softelメモ
