ページに埋め込んだYouTubeをJavaScriptで制御する機会が何度かあったので、 YouTube Player API の使い方をまとめてみます。 今回使用するのは、以下のIFrame API になります。 iframe 組み込みの YouTube Player API リファレンス - YouTube - Google Developers ■目次 基本的な埋め込み JavaScriptでの操作 プレーヤーの状態に応じて処理をする プレーヤーの準備ができてからJavaScriptでの操作を行う パラメータを設定する 基本的な埋め込み まずはYouTubeプレーヤーをページに埋め込んでみます。 1.YouTubeを埋め込む場所を指定 ■HTML <div id="sample"></div> ※id="sample"内にYouTube(iframe)が埋め込まれるのではなく、#sa
jsで配列の最後の要素の取得方法です。 配列.lengthで配列の数を取得することができることを利用します。 配列の添字は0始まりなので、を指定してあげること で最後の要素を取得することができます。 実装部分 var array = ; console.log(array);jsで配列の最後の要素の取得方法です。 配列.lengthで配列の数を取得することができることを利用します。 配列の添字は0始まりなので、[配列の要素数-1]を指定してあげること で最後の要素を取得することができます。 実装部分 var array = ["りんご","みかん","ぶどう","もも","れもん"]; console.log(array[array.length-1]);
サイトやブログをJavaScriptを使って動きのあるページに、スタイルシートで見栄え良く装飾してみませんか? コピーしてご自由にご利用ください。 replace メソッド 文字列置換。 String.replace(); 文字列.replace(検索文字列,置換文字列); テキスト置換 文字列を指定して、置換したい文字列を検索(検索文字列)して 置換文字列に置き換えます。検索文字列にマッチしなかった時は、 元の文字列をそのまま返します。 最初のマッチした文字列のみ置換します。 var str="奈良時代 奈良観光"; str= str.replace("奈良","xxx"); 正規表現による置換 ・検索文字列を /....../で囲みます。 最初のマッチした文字列のみ置換します。 var str="奈良時代 奈良観光"; str= str.replace(/奈良/,"xxx"); ・一致
What is NicEdit? NicEdit is a Lightweight, Cross Platform, Inline Content Editor to allow easy editing of web site content on the fly in the browser. NicEdit Javascript integrates into any site in seconds to make any element/div editable or convert standard textareas to rich text editing. Take boring textareas like this one in your application A Full featured rich text editor in your application i
jQueryを使ってDOM要素を削除しようとしたときにかなり戸惑ったのでメモ代わりにブログ更新。jQueryにはDOM要素を削除するためのメソッドが2つあってremove()とempty()がそれ。 remove():それを呼び出したDOM要素自体とそのすべての子要素を削除する。 empty():それを呼び出したDOM要素のすべての子要素を削除する。 大まかな理解はこれで合ってるのかな。でもjQueryオブジェクトは残るとか書いてあるし、深いところはわからない。具体的には、 <body> <div id="div1"> div1要素 <p>div1要素の子要素1</p> <p>div1要素の子要素2</p> <p>div1要素の子要素2</p> </div> </body>に対して $("#div1").remove();を実行すると、 <body> </body>となり、また以下のように
ソースコードリーディングとかしてると、ただコード読んでてもどうしようもなく、オブジェクトの中身や変数などを見るためにデバッグツールを使いながらでないとやっていけないことが今になって分かりました。自分でもどうしようもなくアホだと思いながら戒めのために覚書。 デバッグツールの機能 僕自身まともに触れる言語はjavascriptとphpくらいなもので、どちらもeclipseのようなIDEを使わず頑なにvimを使って組んできました。phpの場合はxdebugと連携させる方法*1や、javascriptならrhinoなんかを入れてquickrunとかって方法も考えられますが、僕はある程度は知っていながらもひたすら標準のスタックトレースやalert,console.log,console.dirばかりしていたので、まずはIDEなどに搭載されている一般的なデバッグ機能を復習をかねて覚書。 ブレークポイン
いつもどれだったけ?と成ってしまうのでそれぞれのメソッドを使った時にどの様にタグが挿入や移動されるかのメモ。 さっと確認したい人向けのまとめ after 引数に指定したタグを並列な階層の最後に追加。 例) #a の後に <div>new tag</div> を追加。 $('#a').after('<div>new tag</div>'); insertAfter 引数に指定したタグの後ろに移動。 例) #b の閉じタグ後に #b が移動。 $('#d').insertAfter('#b'); append 引数に指定したタグを自身のタグ内の最後に追加。 例) #a タグ内の最後に <div>new tag</div> を追加。 $('#a').append('<div>new tag</div>'); appendTo 引数に指定したタグの最後に自身のタグを移動。 例) #d タグ内の最後
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く