プログラマメモ2 - programmer no memo2

wwdc2013のダウンロードリンク 2013/11/11

jqueryでいろいろと。
 githubでページ(github pages)を公開できたので、それを利用して、wwdc2013のWWDC 2013 Session Videos - Apple Developerのpdfをmovieとかおとしやすようにしてみた。 数があるので、まとめておとすのはしんどいので、リンク形式で。

もとねたは All WWDC 2013 Session Videos URLs in https://developer.apple.com/wwdc/videos/ dumped with Chrome. You can download these videos **without** a Apple developer account by running the download.sh script. There is also a sample code downloader here: https://github.com/jfahrenkrug/WWDC-Downloader ここにあるファイルを使って、リンクページを作成。

 ネタとしてはもう古いけど。

 http://ugo-nakawaka.github.io/page/download.html

iframeに一度テキストファイルを読み込ませて、それを使ってリンクを作成させてます。
もっといい方法ないかなー。

githubいろいろできるのね。
gitむずかしいけど。。。

参考
一番参考になりました。

iframeにtextを読み込ませて取得したい - jquery 2013/11/10

jqueryです。iframeの読み込ませたtextファイルの中身を取得したいです。
読み込ませるのは、同一ドメインのファイルです。
 使ったブラウザはfirefoxです。
自信ないです。
どうもブラウザのほうでpreで囲んでいるようでした。
どうなんでしょう？

iframeのタグはこんな感じで読み込み。

<iframe id="t" src="TITLE.txt"></iframe>

ロードが終わったら起動させるようなイメージです。


            $( document ).ready(function() {
                $( "#t" ).load(function(){
                    var s = $( this ).contents().find( "pre" ).html();
                    console.log(s);
                });
            });

あとづけevent - jquery 2013/11/08

jqueryです。生成した部品に後付けでイベントをつけたいなと。
で、

例）だめだった。

$(".addmbody").on("click", function(){

例）うまくいった。
 jQuery(document).on("click", ".addmbody", function(){

もしくは
$(document).on("click", ".addmbody", function(){

参考


TypeError: $(...).live is not a function 2013/11/08


jqueryです。liveを使って下記のエラー。どうも、どこかの時点のjqueryのバージョンから置き換えられているみたい。live➡onに置き換えればいいみたい。

TypeError: $(...).live is not a function


jQueryのプラグインの第一歩。 2013/11/01

jQueryのプラグインの第一歩。
呼び出すとき$.plugIn.xxx()でいけるのかなと思ってたのだけど、$().plugIn.xxx()として動かせた。自分勉強不足だなー。

(function($) {
    $.fn.myPlugin = function( option ) {
        return this.each(function() {
        });
    };
    $.extend($.fn.myPlugin , {
        aaa : function(){ alert(this);  },
        bbb : function(){ alert("bbb"); }
    });
})(jQuery);


$(document).ready( function(){
    $().myPlugin.aaa();
    $().myPlugin.bbb();
    console.log("*** this line OK");
});

くろーじゃー じゃばすくりぷと - 手習い 2013/10/02

５、６年前からの悩みは、クロージャーがよくわからないということでした。
なんとなくはわかりますよ。もちろん。でも、体に染みこまないというかなんというか。
 
 今回は、jqueryのイベントハンドラ登録使ってみました。
登録する際に関数を登録しますが、この関数に引数を渡したいなーと思ったわけです。

で、最近,ジョンレシグさんの翻訳本をぱらぱら勉強しているのですが、なんかちょっとわかった気がしたんですよね。

クロージャーを使えば、渡された引数の値を内部で保持できることがわかったので、以下、かなりわかりづらいサンプル。

モダンなjavascripitでは、htmlにインラインでイベント設定しないのがはやりっぽいので、jquery使って、ロード時にイベントハンドラを登録。その際の関数を返す関数を引数つきで実行させて、それがハンドラごとのパラメータ値になるイメージです。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>タイトル</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script> function initThisPage() { // 関数を返すようにして、返す関数がイベントに反応するようにしたい。 // 渡された引数をクロージャーからみえる var f = function(a, nf){ var len = a; var nf = nf; return function(){ // 桁数が指定された桁より大きいと反応するようにする if(this.value.length >= len){ alert('*** bingo' + nf);} }; }; // id=txtに何か入力したら反応するように設定 $('#txt').keyup(f(3, '#btn')); } </script> </head> <body onload="initThisPage()"> <input id="txt" type="text" size="4" max="6"> <br/> <button id="btn">aaaaa</button> </body> </html>



ninjya本ためになります。

JavaScript Ninjaの極意 ライブラリ開発のための知識とコーディング (Programmers’ SELECTION)
ジョン・レシグ John Resig ベア・ビボー Bear Bibeault 勝亦 勇
4798128457

jquery ちぇっくぼっくすの値を集めてカンマで連結するよ 2011/05/28



jqueryです。
checkboxの値を全部収集して、RESTな感じで送りたいなーと思ってたのでした。

こんな感じ
// チェックされたチェックボックスの値をカンマ区切りで連結
var s = $( "input:checked" ).map( function() {
return $(this).val();
}).get().join(",");

alert(s);

リンクでなくてボタンとかで対応させたい場合 - prettyPopin 2011/05/16

javascriptです。prettyPopinです。



リンクでなくてボタンとかで対応させたい場合下記のようなコードで動きました。
function a() {
var $d = $("<a href='test.html' rel='prettyPopin'></a>").prettyPopin({width: 550,followScroll:false});
$d.click();
}



参考
jQueryでポップアップ(モーダルウィンドウ)「prettyPopin.js」 - amuns:blog

jsoup html parser 　- スープ？ 2011/02/19
2011/02/20


年に一度は弄びたくなるhtml parserです。

なかなか決め手がなかったのですが、jsoupよさげです。
Jquery風のapiなのできっと便利なのでしょう。

というわけで使ってみます。
下記のようなHTMLがあります。
preタグのテキストだけとりだしたいわけです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=shift_jis">
<title></title>
</head>
<body>
<pre>
<b>SEGMENT SPACE MANAGEMENT</b> { <b>AUTO</b> | <b>MANUAL</b> }
</pre>
</body>
</html>


そしてコードです。
import java.io.File;
import java.io.IOException;
import java.net.URISyntaxException;

import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;

public class TestHtmlParser {

public static void main(String[] args) throws IOException, URISyntaxException {
a();
}

static void a() throws IOException, URISyntaxException{

File file = new File(TestHtmlParser.class.getResource("doc-files/segment_management_clause.htm").toURI());
Document doc = Jsoup.parse(file, "Shift_JIS");

Elements tags = doc.getElementsByTag("pre");
Element tag = tags.get(0);
System.out.println(tag.text());
}

}


結果はこんな感じ
SEGMENT SPACE MANAGEMENT { AUTO | MANUAL }

[jquery]アコーディオン - 開いて再度クリックして閉じたい場合 2008/10/20

jqueryです。
アコーディオンで開いて再度クリックして閉じたい場合には、

alwaysOpen: false

とします。

コードは、
$(document).ready(function(){
$("#example").accordion({
alwaysOpen: false
});
});


この alwaysOpenはデフォルトではtrueのようです。

[jquery]Validation,Impromptu,Formのプラグイン 2008/10/08

シナリオ
「フォームの内容を送信します。フォームの内容はバリデーションします。バリデーションしたあとに確認ダイアログをだして、OKだった場合、AJAXして、結果ダイアログをだします。」

使うのはjQueryプラグイン３種類。



Validationはsubmitすると勝手にvalidateしてくれます。
Impromptuはプロンプト、ダイアログをだすに使えます。
Formプラグインは、フォームの中身をajaxして通信してくれるみたい。

僕が注意した要点だけかいつまんで。
まずフォームのsubmitの処理を変更。

$('#f').submit(function(){ return true; });


ValidationのruleでsubmitHandlerをコールバック関数を定義。
フォームの内容がOKの場合呼ばれるようにします。

バリデーションのルールを定義。
例)
var rules = {
submitHandler: function() { prompt(); },
rules:{
fullname_kanji:{ my_check:'お名前（漢字）' }
// そのルールを記述
}
};


バリデーションのルールの渡し方は、
$("#f").validate(rules);

次にsubmitHandlerで呼ばれる関数を定義します。
この中でダイアログをだします。
やっていることは確認ダイアログだしてOKなら通信してsuccessならまたダイアログをだす。
※ここのコードはおおざっぱ。
function prompt(){
$.prompt(msg, { buttons: { Ok: true, Cancel: false }, focus: 1,
callback:function(v, m){
if(v){　 // OKの場合
var options = {
url: '通信先.php',
type: 'post',
success: function() {
//処理が成功のときのダイアログ
$.prompt('送信しました。',{
buttons: { 'トップページに移動': 'トップページに移動', Bye: 'Good Bye' }
});
}
};// options end
$('#f').ajaxSubmit( options );
}// if end
}
});
}


jQueryのプラグインのコードをいろいろみて、寄せ集め的に作成したので、参考にならないけど....

[jquery]Validationに独自ばりデータの追加。 2008/10/05

独自バリデーターの追加です。


バリデーションのプラグインを追加して独自のバリデーターを追加してみます。

参考コードは、ダウンロードしたパッケージの中に、additional-methods.jsがありました。

jQuery.validator.addMethod("my_check", function(value, element, param) {
//トリムして判断
var s = jQuery(value).text().replace(/^\s+|\s+$/g, '');
return (0 == s.length);
}, jQuery.format("▼「{0}」の項目は必ず入力してください。"));


つぎに、HTMLコードには手を入れずスクリプト側からの設定します。
フォームのオブジェクトにnameが設定されていることを前提にしてます。

$("input[@name=fullname_kanji]").attr("my_check", 'お名前（漢字）');

[jquery]jQuery plugin: Validationでエラーメッセージの色を変えたいんだけども。 2008/10/05
2008/10/05



エラーのメッセージの色を赤にしたくて試行錯誤の上下記のCSSを追加でいい感じ。
メッセージの日本語化は、jQueryでフォームの入力チェックする、jquery.validate.js とエラーの日本語化：Goodpicを参考に。

<style type="text/css">
form.cmxform label.error, label.error {
color: red;
}
</style>


jqueryを使って、<textarea>値</textarea>の値の読み書きです。 2008/02/03

jqueryを使って、<textarea>値</textarea>の値の読み書きです。

読み
s = $('#id').val();

書き
$('#id').val(値);

でいいようです。

css DisplayとVisibility 2007/11/25

CSS Properties: Display vs. Visibility

何がしたかったというと、Visibilityをhiddenにして、後からjavascriptで表示させたかったわけです。

ですが、そうすると、隠していた文字列がどうもみえていないだけで、あきらかに領域をとってしまって表示されていました。思い通りのレイアウトではない！！

それで、style="display:none;"というふうにあらかじめしておいた文字列をあとから,
jQueryを使って、

$('.crr').css("display", "block");


としてどうにか解決。

dislayを使えばいいというわけですね。

jqueryでラジオボタンの値を取得 2007/11/24

jQuery: The Write Less, Do More, JavaScript Library

prototypeをあきらめてjqueryを使ってみようと画策中...
正直どっちもつかったことがないし、何ができるかわかってないので、なんとなく流されるままという感じです。

Radio button values using jquery - JavaScript - Snipplr

jqueryを使ってラジオボタンから値をとる方法です。
nameで取得しています。

var r =$("input[@name=名前]:checked").val();
if(r){
//処理
}

投稿 ()