サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
JavaScriptまたはjQueryを使い、html要素が存在するかどうか調べる方法はいくつかあります。 jQueryを使ったやり方については、こちらで5つの方法が紹介されています。以下は三項演算子で短く書きなおしたものです。 ( $("selector")[0] )? "有" : "無"; ( $("selector").length > 0 )? "有" : "無"; ( $("selector").get(0) )? "有" : "無"; ( $("selector").size() )? "有" : "無"; ( $("selector").is() )? "有" : "無"; これに加え、IDが設定されている要素の有無を調べるのなら、jQueryを使わずJavaScriptのみで以下のように書くのも良いでしょう。 ( document.getElementById("id")
コンピュータプログラムの世界では、1970/01/01 00:00:00 は『UNIXエポック』などと呼ばれる特別な時刻。この時刻から数えた秒数のことを『UNIXタイム』と呼ぶ。PHPやPerlでは、 time() っていう関数でUNIXタイムを知ることができる。JavaScript では、Date.getTime() というのを使うんだが、これが実は注意が必要。PHP やPerl で取得できるUNIXタイムは、単位が "秒" なんだが、JavaScriptでは "ミリ秒" で返ってくるという点が異なる。 だから、JavaScript でPHP のような秒単位のUNIXタイムを使いたい場合は、1000で割るとちょうど近い値が取れる。 次の例は、2つの時刻情報を比較して、30日以上過去かどうかを調べたい場合。 // 【×】間違った例 var dateNow = new Date(20
HTML 5 +Javascriptで作る動的なコンテンツ 前回の授業では、HTML 5について、その成り立ちや特徴を解説した上で、新しい構造化のための要素について解説しました。また、あわせてCSS3によって格段に進歩した表現力について実際にサンプルページを作りながら解説しました。 今までは、Webページで動的に図や画像やアニメーションを描画するにはFlashが代表的な選択肢でした。しかし、ここ数年でその状況が大きく動きつつあります。Flashに代表されるような動的なコンテンツが、専用のプラグイン無しに、HTMLの要素とそれと連携するスクリプトだけで実現できるようになりつつあるのです。こうした技術は、今後のWebの動向を大きく変える可能性を秘めた技術として脚光を浴びています。HTML 5で動的に画像やアニメーションを生成するためには、canvas要素という新規に導入された要素と、can
jQueryでアニメーションを実行させる「.animate()」。 一つのfunctionの中で複数実行させることも可能だったりするのですが、 アニメーション実行後、実行したアニメーション処理が完了した時点で別の処理を実行させたい、 という場合がたまにあったりするのですが、その記述方法をつい忘れてしまうことがあるので、 ここにメモ書きがてら紹介してみます。 jQueryでアニメーション処理完了後に別の処理を実行 $(function(){ $(セレクタ).stop().animate({アニメーション処理},1000,function(){ ～ここに処理を記載～ }); }); 例えば、画像にマウスオーバーした際に、 画像をアニメーション拡大させ、 拡大処理完了後に影を付ける（CSS3で）場合は。 $(function(){ $('img').hover(function(){ $(thi
こんにちは。荒井です。 Facebookもtwitterもgoogleも画面遷移のときには、非同期で次のページを読み込むような作りになってますね！ これは、ajaxで次のページを読み込むのと同時に「HistoryAPI」というHTML5の機能を使って、URLを更新することで実現してます。 毎回全部読み直さないから通常の画面遷移よりも早いし、URLが変わるから履歴に残るし、良いことばっかり！！SEO的にも「#!」を使ったやつより良いよっていうのを何かで読みました！！！ これからWebサービスを作るなら、導入したいですね！！！ これpjaxを使えば簡単に導入できるんです！！！よし！！！ PJAX!! pjaxとは、GithubのChris Wanstrathって人が作ってるjqueryプラグインです。 上で説明した、HistoryAPIとajaxを使った非同期の画面遷移を簡単に導入すること
こんにちは！プロダクト企画担当の林です。 今回は、前回予告していた通り、タッチイベントについて書かせていただきます。 他所でもタッチイベントについて取り扱っていますが、当記事でのポイントは、 jQuery を使っている。（jQuery Mobile は不要です） iOS /Android で動作確認済み。 タッチできないPC の場合、マウスで動く。 この３点です。 こちらを実際に動作するコードにて解説します。 動作確認環境 タッチ環境 →iPhone /iPad /Android マウス環境 → Sleipnir / IE / Firefox /GoogleChrome / Safari / Opera タッチイベントについて タッチイベントとは、スマートフォンなどで画面を直接指でタッチしたときに発生するイベントのことです。 イベントの種類 touchstart : タッチし
<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>サンプル</title> <script type="text/javascript"> <!-- function openwin() { window.open("./window.html", "", "width=500,height=400"); } // --> </script> </head> <body> <a href="javascript:openwin();">新しいウィンドウ</a> </body> </html> <a href
This feature is well established and works across many devices and browser versions.It’s been available across browsers since July 2015. Learn more See full compatibilityReport feedback The conditional (ternary) operator is the onlyJavaScript operator that takes three operands: a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a
実はまだまだ知らない事が多いJavaScriptの基本、 ちゃんと勉強しないとなーなんて思うのですが、 ちょくちょく気づいた時にしかできなかったりします。 そんな今回「あれ？なんだっけな、これ？」 なんて思ったのが「?」の使いどころ。 調べてみたら、条件演算子ということ。 どういう使い方ができるのか、少し試してみた。 条件演算子を使ってみた 条件演算子を使ったサンプルを作ってみる事にした。 ついでにifの条件分岐とちょっとだけ正規表現とかも入れてみた。 $(function(){ $('button').click(function(){ $('form').attr('action',''); xx = $('input').val(); if(xx >= 21 || xx <= 0){ alert('数字は１から20の間で入力してください。'); return false; }else
iPhoneの検索窓をMyFindに乗り換えました！ お久しぶりですぶち(@mtnkne)です。iPhoneには様々な検索窓となる良質なアプリがありますが、最近はMyFindに夢中です。 MyFind – 大辞林/ウィズダム/Oxford カテゴリ: 辞書／辞典／その他 価格: 無料 無料でありながらその拡張性は検索窓となるアプリの中で随一。 まだ僕の勉強不足のため、独自で明確な差別化ができていないのですが、探してみるとMyScriptsを組み合わせたりしてとても上手に使っている方も沢山います。 そういった難しい話は何か面白い使い方を見つけたらにとっておいて、今回はMyFindに登録したjavascriptについて書いていきます！ MyFindでのjavascriptの使い方 MyFindでは、javascript(ブックマークレット)として使いたい項目も、普通の検索のよ
引数 searchElement 検索する配列要素です。 fromIndex 省略可 検索し始める位置のゼロから始まるインデックスで、整数に変換されます。 インデックスが負の場合、配列の末尾からさかのぼって数えます。 -array.length <= fromIndex < 0 の場合、 fromIndex + array.length が使用されます。ただし、この場合でも配列は前から後ろに向けて検索されます。 fromIndex < -array.length または fromIndex が省略された場合は 0 が使用され、配列全体に対して検索が行われます。 fromIndex >= array.length の場合、配列の検索は行われず、 false が返されます。 返値 配列内にある最初の searchElement のインデックスです。見つからなかった場合は `-1`` です。 解
photocredit: Alan Cleaver via photopin cc 2013.06.14追記 コメント欄の指摘を受けて、記事を一部修正しました。 はじめに jQueryでチェックボックスのチェック状態を調べる方法をまとめてみました。Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)posted with amazlet at 14.02.01西畑一馬 アスキー・メディアワークス 売り上げランキング: 6,298Amazon.co.jpで詳細を見る jQueryのバージョン jQuery v1.10.1 jQueryでチェックボックスのチェック状態を調べる方法１ jQueryでチェックボックスのチェック状態を調べるには、以下のようなコードを書きます。#check1はチェックボックス要素のIDを指定します。$("#check1
checkboxがcheckされてるかどうかを判別するメソッドってjQuery側に用意されてないんですよね。twitterでも色々教えてもらったけど方法としては3つくらいかなー。 https://twitter.com/kyo_ago/status/11685019866 https://twitter.com/songmu/status/11675950113 https://twitter.com/rea/status/11675545507 素のHTMLエレメントから取得 var checked = $('#elem').get(0).checked; せっかくjQuery使ってるのにという感じがいなめない。。これはないかな。 is()で取得 var checked = $('#elem').is(':checked'); これが一番直感的ではある。これでいいっちゃいい気もする。
前々から自分でスライダーを作ってみようと思いつつ途中で詰まっていたのですが、本を買ったりいろいろ調べたりして出来たので残しておこうと思います。 スライドのパターン よく使う配布されているスライダーを見ると画像の動き方が何種類かありますよね。なので、今回は6種類作ってみました。 サンプルページ サンプルページは以下から。全種類並べています。また、ダウンロードも出来ます。 サンプルページ ダウンロード 設置方法HTML 設置したい箇所に以下のように記述します。 <div id="slide01"> <ul> <li><a href="#"><img src="img/img01.gif" width="700" height="426" alt=""></a></li> <li><a href="#"><img src="img/img02.gif" width="700" height="
昨日のVieraのリモコン、リモコンを作りたかったのもあるけど、svgとJavaScriptを組み合わせた簡単なプログラムを試しに書いてみたかったというのがあります。html5ではsvgをhtml中に埋め込んで、更にそのsvgにcssでスタイルを当てたり、JavaScriptでいろいろやったり出来ます。 この時、要素のクリック領域は要素の形そのままなので、昨日のリモコンのような変な形のクリック領域を簡単に作ることが出来ます。 以下の画像の色のついた箇所にマウスを乗せたりクリックをしたりしてみてください。 100km 画像はWikipediaより。 上記の画像は、クリックできる箇所に .svg-area というクラス名と、data-name属性に市町村の文字列が入っており、以下の様なcss/jsによって動作を実現しています。 path.svg-area { cursor: pointer;
Events/jQuery.Event jQueryのイベントシステムは、W3C標準に準拠した実装になっています。イベントオブジェクトはjQueryのイベントハンドラーに確実に渡されます。（コールバック関数に引数として渡されず、window.eventなどから取得するタイプのブラウザであっても、そのようなチェックは必要ありません） オリジナルのイベントオブジェクトが持つ殆どのプロパティは、このオブジェクトにコピーされます。 このオブジェクトのコンストラクタも公開されており、triggerを呼ぶ際に用いられます。 コンストラクタではありますが、newオペレータはあってもなくても構いません。 どういった場面でEventオブジェクトを作成するのかは、trigger関数のドキュメントを参照して下さい。 Example: jQuery.Eventを new をつけずに作成する var e = jQu
【リスト】 <form> ここは、おすすめ！ → <input type="button" value="Tatsuya's Home Page" onClick="window.open('http://www.red.oit-net.jp/tatsuya/index.htm')"> </form> <form> ここは、おすすめ！ → <input type="button" value="Tatsuya's Home Page" onClick="window.open('http://www.red.oit-net.jp/tatsuya/index.htm')"> </form> 【説明】 新しくウィンドウを開くのは、window.open() を使います。 open( ) のパラメータにURLを指定すれば新しいウィンドウを作ってそこにリンク先をロードします。 例）
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryの"含む" にif containsを使おうと思ったけどjsのindexOfが使い勝手良かった件
