JavaScriptでよく見るエラーとその対策
プログラミングにおいて避けては通れないのがエラーです。JavaScriptにおいても、多数のエラーに悩まされることになります。 エラーはそのメッセージさえ読めば原因がわかることも多いのですが、プログラミングに慣れてない人がJavaScriptの柔軟なコードに振り回されていると、なかなかメッセージからは原因を推察できません。 そこでこの記事ではよくあるエラーとその対策についてまとめます。 よくあるJavaScriptエラーの原因と対策 基本的に以下の環境での実行とします。 Google Chrome しかしエラーメッセージはFirefoxやNode.jsでもそう変わらないと思います。 Chromeにおいて、エラーを確認するためのコンソールはF12キーを押すと表示できます。確認したいページを開いて、そこでF12を押してください。 Uncaught SyntaxError: Unexpected
jQuery 簡単かつ高性能なスライダー【bxslider】の設置 – Divスライド系の中では一番のオススメです。
$(function(){ $('#slider1').bxSlider({ auto:true, speed:1000, pause:500 }); }); <div id="slider1"> <div><img src="images/new1.jpg"></div> <div><img src="images/new2.jpg"></div> <div><img src="images/new3.jpg"></div> </div> $(function(){ $('#slider2').bxSlider({ auto:true, speed:1000, mode: 'fade', captions: true }); }); <div id="slider2"> <div><img src="images/new1.jpg" title="captions"></div> <di
GoFの23のデザインパターンを，Javaで活用するための一覧表 （パターンごとの要約コメント付き） - 主に言語とシステム開発に関して
GoFデザインパターンの一覧表と，活用のためのコメント，および入門者が独学するためのリンク集（サンプルコード付き）。 入門者の独学を支援するために，このページのURLを提示して熟読させ，各パターンを短時間で効率よく学んでもらう。 デザインパターンはプログラマの常識だ。 Java使いかどうかは問わない。 にも関わらず，入門書を買ったまま，途中で挫折する人が多い。 挫折の原因は，パターンの数が23もあって，多いからだろう。 全パターンをすんなり覚えてもらうためには，各パターンごとに 「要するにこういう目的のパターンなんだ。」 「10文字で表現すると，パターンの意味はこうなんだ。」 という要点・本質を，短いコメントで伝えれば助けになるだろう。 こういった学習を通して，Java言語の「設計思想」も併せて感じ取ってゆけるはず。 全パターンの一覧表（要約コメント付き） 全パターンについて，10文字以内
簡単に実装できる、ボタン画像のマウスオーバーイベント 10+ - NxWorld
画像のオンオフ切り替えといったようなマウスオーバーイベントで、簡単に実装できるものをいくつか紹介します。 CSS3やjQueryを使ってちょっと変わった動きを取り入れるサイトも見かけることも多くなりましたが、今回は普段も使用頻度が高いと思う定番のものに絞りました。 サンプルで使用する画像とDEMOについて 各マウスオーバーの動きを実装するにあたって上のような3タイプのボタン画像を用いており、各ボタンはそれぞれ以下のようになっています。 type A 単体のボタン画像 type B オンとオフを1枚の画像にした、スプライト型 type C オンとオフをそれぞれ別の画像にし、オフ時のものは_off、オン時のものは_onを拡張子前に入れています。 また、サンプルも用意したので実際の動きはこちらで確認して下さい。 CSS：マウスオーバー時に透過させる CSSのopacity（IEはfilter）の
[JS]レスポンシブ対応の使いやすいスライダーを探している人にオススメのスクリプト -wallop
アニメーションは他にも、slide, fade, rotateなどが利用できます。 wallopの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトを外部ファイルとして記述します。 <head> <link rel="stylesheet" href="path/to/wallop.css"> </head> <body> ... コンテンツ ... <script src="path/to/Wallop.min.js"></script> </body> アニメーション（scale, foldなど）を利用する時は、アニメーション用のCSSを加えます。 <head> <link rel="stylesheet" href="path/to/wallop.css"> <link rel="stylesheet" href="path/to/wallop-animation.c
![[JS]レスポンシブ対応の使いやすいスライダーを探している人にオススメのスクリプト -wallop](https://cdn-ak-scissors.b.st-hatena.com/image/square/c55fb72cc692f14ab3307eef2042769543abed0d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015090103.png)
[JS]ちょっとかっこいい円グラフをウェブページに簡単に設置できるスクリプト -EASY PIE CHART
シンプルなHTMLで、さまざまなデザインの円グラフが簡単に作成できるjQueryのプラグインを紹介します。 EASY PIE CHART [ad#ad-2] EASY PIE CHARTの使い方 実装は、3ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 外部ファイルはhead内に記述してください。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="/path/to/jquery.easy-pie-chart.js"></script> <link rel="styl
[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 | コリス
以前、紹介した「Page Scroller」のバージョンアップ版「Page Scroller ver.3」の紹介です。 追記： 2013年10月26日 ver.3.0.9をリリース jQueryの旧版によるXSSに対応しました。 2011年5月4日 デモおよびダウンロードファイルをjQuery1.6に変更しました。 2011年1月31日 ver.3.0.8をリリース 機能を追加しました。 2010年11月19日 ver.3.0.7をリリース ライセンスを変更しました。 2010年11月17日 デモおよびダウンロードファイルをjQuery1.4.4に変更しました。 2010年9月19日 デモおよびダウンロードファイルをjQuery1.4.2に変更しました。 2009年7月6日 対応ブラウザ（IE8, Fx2.5, Chrome2）を更新しました。 2009年2月23日 ver.3.0.6をリ
![[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){...})()の全て
(function(){...})()は、 (function($){ $.hoge = function() { }; })(jQuery) みたいに使われていたりするコード。GreasemonkeyとかjQueryのプラグインとか、あれこれ見かけることがあると思います。 この話題はいくつかWebでも取り上げられていますが何がどうなってんのかちょっと難しいですね。しかし、誰でも理解できるレベルではあります。というのも、こういう種の難しさは体系的な知識が備わっているか否かということなのです。 でも、この知識を体系化する作業って結構しんどくて、難しくて、まーハゲるほど悩むこともあるかもしれない。それはきっと、とても毛根に悪いかもしれない。スカルプDも真っ青の状況になるかもしれない。それは、悲しいことなのだと思う・・・っ！ 毛根にはこれからもがんばってほしい！いつだって頭を温かいまなざしで見守
見た目を綺麗に整列する！ブロックレベル要素の高さを揃えるJS3選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れ様です、デザイナーのモモコです。 コーディング中にいざ本番の文言を入れたら、予想以上に長さがバラバラで見た目が揃わない…！なんてこと、ありますよね。今回はそんな時に活躍してくれるブロックレベル要素の高さを揃えるjsを3つご紹介します。 heightLine.js 配布ページ <script type="text/javascript" src="heightLine.js"></script> class名のつけ方によって高さを揃える要素をコントロールできるJavascriptです。 子要素の高さを統一できる「heightLineParent」が便利で良くお世話になっていました。 jQueryAutoHeight.js 配布ページ※このページは現在削除されています。 <script type="text/javascript" src="jquery.js"></script> <s
あなたのブラウザでJavaScriptを有効にする方法とその理由
もしあなたがWeb開発者なら、<span>どうやって<code><noscript></code>のコードをWebページに導入するかの<a href="#developer" id="devinfo">説明を参照してください</a>。</span> Google Chrome Webブラウザーのメニューから"Customize and control Google Chrome"をクリックし、"Settings"を選択して下さい。 "Settings"というセクションにある"Show advanced settings..."をクリックします。 "Privacy"内の"Content settings..."をクリックします。 ダイアログ・ウィンドウが開いたなら"JavaScript"というセクションを探し、"Allow all sites to run JavaScript
汎用性の高そうなjQueryイメージスライダー・Fotorama
よさ気だったので備忘録。jQueryで作るスライダーです。画像や動画にも対応、レスポンシブWebデザインにも対応しており、マークアップもシンプルで済みます。 なかなかいいスライダーでした。タッチイベントにも対応しているのでスマフォでも使えますね。 見た目はよくあるスライダーですが、汎用性は高い印象です。タッチイベント、レスポンシブWebデザイン、ハッシュタグ対応、動画も可能、フルスクリーン化も可能で、マークアップも画像を書けば良いだけ。 動作サンプルがいろいろ用意されています。 Sample コード<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="fotorama.js"></script>本体とプラグインとCSSを読み込みます。 <div class="fotorama"> <
jqueryの基礎
よく使うようになった JavaScript ライブラリの jQuery を簡単に紹介。 jQueryの使い方 まず jQueryをダウンロードして利用する html でロードするようにします。そして、CSSクラスやCSS ID に対して動作させたい内容（アクション）を関数で定義します。どのように jQuery が動作するか簡単な図を以下に示します。 この例では、"ボタン"リンクがクリックされたら、隠れている"panel"をスライド表示されるものです。 実際の動作例： ↓ボタン $()関数 jQuery のもっとも基本となる操作は $() 関数を利用することです。この関数で操作したい対象を選び、様々な操作を行うことができます。$()の指定方法は、CSSとXPathどちらでも利用できます。 指定場所（セレクタ） 概要 例
イベントハンドラを使う/JavaScript講座
JavaScriptでは、HTML文書の読み込み時に自動的にプログラムを実行させる方法のほか、イベントハンドラを使用してさまざまなイベント発生時に自動的に任意のプログラムを実行することができます。 イベントとは、マウスのクリックなどユーザがブラウザ上で行うさまざまな動作をした際に発生するもので、ブラウザはこれを監視します。JavaScriptでは、これらイベントをハンドリングするためのイベントハンドラとして、下記のようなものを用意しています。
JavaScriptのイベントハンドラ一覧｜イベント｜JavaScript/DOM｜PHP & JavaScript Room
イベントハンドラ一覧 onBlur／onFocus〔フォーカスが移動した時に処理を行う〕 onChange〔フォームの入力値、選択が変更されたときに処理を行う〕 onSelect／onSelectStart〔テキストが選択された時に処理を行う〕 onSubmit／onReset〔フォームの送信時、リセット時に処理を行う〕 onAbort／onError〔画像読み込み時に処理を行う〕 onLoad／onUnload〔ページ読み込み時、ページの切り替え時に処理を行う〕 onClick／onDblClick〔クリック、ダブルクリックされた時に処理を行う〕 onKeyPress／onKeyDown／onKeyUp〔キーの状態に応じて処理を行う〕 onMouseOut／onMouseOver／onMouseDown／onMouseUp〔マウスを乗せたり離した時、マウスでクリックした時に処理を行う〕
jQueryのanimateで自由にアニメーションできるようになろう
Posted: 2011.12.27 / Category: javascript / Tag: jQuery, アニメーション jQueryにはアニメーションをするための機能がいろいろとありますが、ここでは「animate」メソッドの扱い方をご紹介いたします。 動かす前の準備 jQueryの前に動かす要素をhtml&cssで作成しておきましょう。 html <div id="box"></div> css #box { width: 100px; height: 100px; background: #3399FF; } jQueryコードを書くときの基本的な形は次のようになります。 javascript <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.m
画像ポップアウト・イメージギャラリー・スライドショー｜jQuery plugin｜Ajax｜PHP & JavaScript Room
Lightweight Circle slideshow〔くるくる回して画像を切り替える円形のイメージギャラリー〕 Smooth Div Scroll〔水平方向に並べた画像をマウス操作でするするスクロール〕 Nivo Slider〔9種類のエフェクトがかけられるイメージスライダー〕 Galleriffic〔画像ギャラリーをリッチかつ高速にレンダリング〕 IMGPREVIEW〔マウスオーバーでリンク先の画像をプレビュー表示〕 jQuery largePhotoBox plugin〔大きな画像対応ポップアップ（マウス移動で画像全体を閲覧可能）〕 PIROBOX〔シンプルかっこいい画像ポップアップ〕 bxGallery〔シンプルな画像ギャラリー〕 A Simple jQuery Slideshow〔シンプルなスライドショー〕 Accessible News Slider〔全件表示や件数に応じて前
RedLine Magazine : ボックス全体をリンクにしたい
ボックス全体をリンクにしたい まずはこちらの発想の元ネタのサイトの紹介。 Link Boxes (Ask the CSS Guy) やりたいことは上記ページの上部の画像のように、見出しやテキストを置いている部分をリンクボックス化したいという主旨。マークアップや正しい書式にこだわらないなら簡単にできるのだが、ちゃんとした事をしたい人向けのTips。 ※以下のソースは上記サイトからの引用です。 上記サイトの言いたい事を簡単な日本語にして主旨だけ書きます。 ※訳とかまとめ要らないという方はその先に「それ、jQueryでやってみる」とか書いてみたので良かったらそちらへ進んでください。 まず中身はこんな感じ。見出しとテキスト。 <h2>About Us</h2> <p>How my life story became a Hallmark movie.</p> これらをボックスにしてリンクを付けたけ
iScroll 4 – Matteo Spinelli's Cubiq.org
iScroll finally received a complete rewrite. Now it’s smoother than ever and adds some new important features: pinch/zoom, pull down to refresh, snap to elements and more custom events for a higher level of hackability. Download Screencast Live Demo GitHub Forum Project info Last code update: 2012.07.14 – v4.2 Device compatibility: iPhone/Ipod touch >=3.1.1, iPad >=3.2, Android >=1.6, Desktop Webk
iPhone / iPadなどでposition: fixedが利用できる「iScroll」
配布元：iScroll ライセンス:MIT-License iPhone / iPad、Androidなどに搭載されているmobile WebKitではCSSのposition: fixedが利用できませんが、iScrollを利用することでこれらのプロパティを利用したようにヘッダーやフッターの固定が可能になります。 利用方法 まずは、head要素内などで配布サイトよりダウンロードしたライブラリ本体を読み込みます。 <script src="iscroll.js"></script> HTMLでは次のようにコンテンツ部分をwrapperとscrollerというidをつけたdiv要素で包んでおきます。 <body> <header id="header">ヘッダー部分</header> <div id="wrapper"> <div id="scroller"> コンテンツ部分 </div>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
