カテゴリー別アーカイブ: web備忘録

普段はwebのほうの仕事も多いのでそちらのお勉強の際のちょっとしたメモ書きです。

animate()とqueue()とstop()の備忘録まとめ

animate()

  • animateの第二引数にオブジェクトをわたしqueueプロパティでfalseにすると並列して動く
  • queue()に続くanimateはnext()で実行しなければいけない

dequeue()

  • 引数にnextを渡し関数内でnext()ことで次に設定されているqueueを実行できる
  • 第一引数にqueue名、dequequeの引数にして実行
  • 配列に入れて関数を実行

stop()

  • 第一引数trueは今のアニメーションを最後の状態にする。第二引数trueはキューの終了状態にする

$(function(){
//1
// $(‘#square’).animate({width:’+=50px’,height:’+=50px’}).delay(1000).animate({fontSize:’+=25px’});

//2
// $(‘#square’).animate({width:’+=50px’,height:’+=50px’}).animate({fontSize:’+=25px’},{queue:false});

//3
// $(‘#square’).animate({height:’+=100px’});
// $(‘#square’).queue(function(){
// $(this).animate({width:’+=100px’});
// });
// $(‘#square’).dequeue();

//4
// $(‘#square’).animate({
// width:’+=50px’
// });
// $(‘#square’).queue(function(){
// $(this).animate({
// height:’+=50px’
// });
// });
// setTimeout(function(){
// $(‘#square’).dequeue();
// },3000);

//5
// $(‘#square’).queue(function(next){
// $(this).animate({height:’+=50px’});
// next();
// }).queue(function(){
// $(this).animate({height:’+=100px’});
// });
// $(‘#square’).dequeue();

// 6
// $(‘#square’).queue(function(next){
// $(this).animate({width:’+=100px’});
// next();
// });
// $(‘#square’).animate({height:’+=50px’});

//7
// $(‘#square’).queue([
// function(){$(this).animate({height:’+=100px’});},
// function(){$(this).animate({width:’+=100px’});}
// ]);
// $(‘#square’).dequeue().dequeue();

//8
// $(‘#square’).queue(‘myq’,function(next){
// $(this).animate({height:’+=50px’});
// next();
// }).queue(‘myq’,function(){
// $(this).animate({width:’+=100px’});
// });
// $(‘#square’).dequeue(‘myq’);
// $(‘#square’).clearQueue(‘myq’);

//9
// var speed = 1000;
// $(‘#square’)
// .animate({height:’+=150px’},speed)
// .delay(speed/2)
// .animate({width:’+=150px’},speed);
// setTimeout(function(){
// $(‘#square’).stop();
// },speed*2);

//10
// var speed = 3000;
// $(‘#square’)
// .animate({width:’+=130px’},speed)
// .animate({height:’+=130px’},speed);
// setTimeout(function(){
// $(‘#square’).stop(false,true);
// },speed/3);

//11
var speed = 3000;
$(‘#square’)
.animate({width:’+=130px’},speed)
.animate({height:’+=130px’},speed);
setTimeout(function(){
$(‘#square’).stop(true);
},speed/2);
});

「武骨日記」TOPページへ
全記事リンク集

JQueryのanimate()、queue()、dequeue()、のリマインド

queueをfalseにすることでanimateと同時に実行

// 1 $(function(){
// $(‘#yellow’).animate({width:’+=150px’,height:’+=150px’},5000).animate({fontSize:’+=25px’},{queue:false});
// });

queueに設定した後、dequeueで実行
// 2 $(function(){
// $(‘#yellow’).animate({height:’+=100px’});
// $(‘#yellow’).queue(function(){
// $(this).animate({width:’+=100px’});
// });
// $(‘#yellow’).dequeue();

// }); 続きを読む

chrome開発ツールでデバッグ覚えた

コンソールパネルでデバッグ。こんな便利なのか。。

最近自分の周りで「気になったwebの記事を発表する(なんでもいい。専門の奴じゃなくても)」という話がありまして、
順番がまわってきて、 続きを読む

こちらはTOPページではありません。

TOPページへ

こちらTOPへ行かれてブックマークして頂くと一層色んな記事が頻繁に更新され、ご覧頂けます。
お手数ですが宜しくお願い致します。。

いつもこの画面でご覧頂いてた方へ
半年前からTOPの方では色々な記事がUPしていました。
すみません。このページで行き止まりだったみたいです。。
どうりで他の記事見られてないなぁと。。

いろんな記事が上がっているのでよかったら見てやってください

もりたけんじ

// var str1 = ‘にわにはにわにわとりがいる’;
// document.writeln(str1.indexOf(‘にわ’));//0(先頭から検索)
// document.writeln(str1.lastIndexOf(‘にわ’));//6(末尾から検索)
// document.writeln(str1.indexOf(‘にわ’,3));//4文字目から右方向に検索
// document.writeln(str1.lastIndexOf(‘わ’,5));//4(6文字目から左方向検索)
// document.writeln(str1.indexOf(‘ガーデン’));//-1(不一致)

// var str2 = ‘Wingsプロジェクト’;
// document.writeln(str2.charAt(4));//sを抽出
// document.writeln(str2.slice(5,8);//プロジ(6~8文字目を抽出)
// document.writeln(str2.substring(5,8));//プロジ(6~8文字目を抽出)
// document.writeln(str2.substr(5,3));//6番目から3文字を抽出
// document.writeln(str2.split(‘s’));//Wing,プロジェクト
// document.writeln(str1.split(‘わ’,3));//に,にはに,に(3つに分割)

// document.writeln(‘トップ’,anchor(‘top’));//トップ
// document.writeln(str2.link(‘http://www.wings.mns’));
// document.writeln(’10’,sub());//10下付き文字
// document.writeln(’10’,sup());//10上付き文字

// document.writeln(str2.concat(‘有限会社’));//Wingsプロジェクト有限会社
// document.writeln(str2.length);//11(日本語も一文字と換算)

// //substring,sliceとsubstrの違い。前者は番目を返す。後者は番目から文字数を返す
// // substringとsliceの違い
// var str = ‘WINGSプロジェクト’;
// document.writeln(str.substring(8.5));//プロジ(6~8文字目を抽出)引数startと引数endをend+1、start-1文字目までを抽出
// document.writeln(str.slice(8.5));//空文字。入れ替えはしない

// var str = ‘WINDOWプロジェクト’;
// document.writeln(str.substring(5,-2));//WINDO(1~5番目を抽出)substringは-2を0とみなしend、startを交換するから0から5番目までを抽出
// document.writeln(str.slice(5,-2));//(5,9)になる。負の数は後方の文字数とみなす。-2は後方から3文字目、つまり9文字目slice(5,-2)はstr.slice(5,9)と同じ動作をする

// Arrayオブジェクト

// var ary1 = [‘Sato’,’Takae’,’Osada’,’Hio’,’Saitoh’];
// var ary2 = [‘Yabuki’,’Aoki’,’Moriyama’,’Yamada’];

// document.writeln(ary1.concat(ary2));
// //Sato,Takae,Osada,Hio,Saitoh,Yabuki,Aoki,Moriyama,Yamada 配列通しで繋げる
// document.writeln(ary1.join(‘/’));
// //Sato/Takae/Osada/Hio/Saitoh 第一引数で繋げる
// document.writeln(ary1.slice(1));//Takae,Osada,Hio,Saitoh Satoを削除
// document.writeln(ary1.slice(1,2));//Takae
// document.writeln(ary1.splice(1,2,’kakeya’,’Yamaguchi’));
// //Takae,Osada(置き換え対象の要素を取得)
// document.writeln(ary1);
// //Sato,kakeya,Yamaguchi,Hio,Saitoh(置き換え後の配列)

// document.writeln(ary1.pop());//Saitoh(削除した要素)

// 文字列を大文字にして’,’区切りで配列に格納して返す
// var target = ‘aaa,bbb,ccc,ddd’;
// var target2 = target.toUpperCase();
// var arry = target2.split(‘,’);
// // alert(arry.length + arry);

// var str4 = ‘aaa,bbb,ccc,ddd’;
// var uper = str4.toUpperCase();
// var arry4 = uper.split(‘,’);
// // alert(arry4);

// //A もし文字列の最後の部分が,だった場合それを抜いた文字列を抽出する
// var str = ‘aaa,bbb,’;
// if(str.substring(str.length -1) == ‘,’){
// var s = str.substring(0,str.length -1);
// // alert(s);
// }
// var str2 = ‘ddd,ccc,’;
// if(str2.substring(str2.length -1) == ‘,’){
// // alert(str2.substring(0,str2.length -1));
// }
// var str3 = ‘ccc,gggm,’;
// if(str3.substring(str3.length -1) == ‘,’){
// // alert(str3.substring(0,str3.length -1));
// }

// //indexOfメソッドとsearchメソッドの違い//
// //indexOfメソッドの引数には正規表現は利用できませんが、serch()メソッドでは正規表現を利用した検索が可能
// var r = ‘aaa,bbb,ccc’;
// //indexOfは正規表現が使えないので’-1’になる
// // alert(‘indexOf:’ + r.indexOf(‘,.*,’));
// //serchは正規表現が使えるので’3’になる
// // alert(‘search:’ + r.search(‘,.*,’));

// // 検索文字が何番目にあるか、ないかの判定
// var str5 = ‘1234567890abcdefghijk’;
// var result5 = str5.search(‘a’);
// if(result5 < 0){ // // alert(',はみつかりませんでした'); // }else { // // alert('aは' + result5 + '番目にあります'); // } // //配列を文字列に型判定して変換 // var arry6 = new Array('aa','bb','cc'); // var aryString = arry6.join('/'); // // alert(typeof aryString + ':' + aryString); // // 配列要素の追加/取り出し(pop/push、LIFO(Last In First Out:スタック(後入れ先出し処理))) // var ary1 = new Array('aa','bb','ccc'); // ary1.push('ddd'); //末尾にdddを追加 // document.writeln(ary1 + '
‘); //aa,bb,ccc,dddになる
// var pop1 = ary1.pop();//配列の末尾から要素を取得
// document.write(pop1 + ‘
‘);
// var pop2 = pop1.pop();
// document.write(pop2 + ‘
‘);
// //もう一度push()メソッドで配列の末尾に要素を追加
// //配列の末尾に’ee’を追加
// ary1.push(‘ee’);
// document.write(ary1 + ‘
‘);//aa,bb,ccになる

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″>
<title>0611javascript</title>
<script type=”text/javascript”>
文字列の数値変換 ///////////////////
var n = ‘123’;
document.write(Number(n));
document.write(parseFloat(n));
document.write(parseInt(n));

文字列を数値に変換した際の型判定////////
document.write(typeof(‘123′ – 0));

文字列で渡されたメソッドををeval関数で解析///////
var str =’window.alert(“evel関数”)’;
eval(str);
関数・三角形の面積(function命令文)

function sankaku(base,height){
return base*height/2;
}
document.write(‘三角形の面積’ + sankaku(5,10));

関数・三角形の面積(コンストラクタ:書き方1)
var trailangle = new Function(‘base’,’height’,’return base * height/2;’);
document.write(‘三角形の面積:’ + trailangle(5,2));
document.write(‘<br />’);
関数・三角形の面積(コンストラクタ:書き方2、new演算子を省略してあたかもグローバル関数であるように記述することも可能)
var trailangle = Function(‘base’,’height’,’return base * height/2;’ );
document.write(‘三角形の面積:’ + trailangle(5,2));

コンストラクタを使用するメリットは関数本体を文字列として定義できる
var param = ‘height,width’;
var formula = ‘return height * width/2;’;
var diamond = new Function(param,formula);

document.write(‘ひし形の面積:’ + diamond(5,2));

//関数 三角形の面積:関数リテラルでの書き方
var triangle = function(base,height){
return base * height/2;
};
document.write(‘三角形の面積:’ + triangle(5,2) );
function命令と関数リテラルは似ているが以下の違いがある
function命令 関数triangleを直接定義している
関数リテラル function(base,height){}と名前のない関数を定義した上で変数traiangleに格納している(宣言した時点で名前を持っていない「匿名関数、、無名関数」と呼ばれる)

 

グローバル変数とローカル変数
scope = ‘Global Variable’;
function getValue(){
scope = ‘Local Variable’;
return scope;
}
document.write(getValue());
document.write(‘<br />’);
document.write(scope);

varを使わずに宣言された変数は全てグローバル変数とみなす
ローカル変数を定義するには必ずvar命令を使用する

スコープの解釈が変わる関数リテラルとコンストラクタ関数
var scope = ‘Global Variable’;
function checkScope(){
var scope = ‘Local Variable’;
var f_lit = function(){return scope;};
document.write(f_lit());
var f_con = new Function(‘return scope’);
document.write(f_con());
}
checkScope();
javascriptは引数の和をチェックしない
function showMessage(value){
document.write(value);
}
showMessage();
showMessage(‘山田’);
showMessage(‘山田’,’鈴木’);
引数の妥当性をチェックする
argumentオブジェクトを使って与えられた引数の数と要求するそれの数が異なる場合にはエラーを返す
function showMessage(value){
if(arguments.length != 1){
throw new Error(‘引数の数が間違っています’ + arguments.length);
}
document.write(value);
}
try{
showMessage(‘山田’,’鈴木’);
}catch (e){//Errorオブジェクトを受け取る変数e
window.alert(e.message);//Errorオブジェクトのmassageプロパティ
}

 

引数の数が違うときに渡されるundefindを利用したデフォルト値を設定する
function traiangle(base,height){
if(base == undefined){base = 1};
if(height == undefined){height= 1};
return base * height /2;
}
document.write(traiangle(5));//省略できる引数は後ろの引数のみ

 

★高階関数
function arrayWalk(data,f){
for(var key in data){
f(key,data[key]);
}
}
var result = 0;
function sumElement(key,value){
result += value;
}
function showElement(key,value){
document.write(key + ‘:’ + value);
// }
var ary = [1,2,3,4,16];
arrayWalk(ary,sumElement);
document.write(‘合計:’ + result);
★を匿名関数で書き換える
function arryWalk(data,f){
for(var key in data){
f(key,data[key]);
}
}
var arry = [1,2,4,8,16];
arryWalk(
arry,
function (key,value){
document.write(key + ‘:’ + value);
}
);

スコープチェーンの振る舞い
var y = ‘Global’;
function outerFunc(){
var y = ‘Local Outer’;
function innerFunc(){
var z = ‘Local Inner’;
document.write(z);
document.write(y);
document.write(x);
}
innerFunc();s
}
outerFunc()

 

クロージャ
function outerFunc(){
function innerFunc(){
alert(‘hello’);
}
innerFunc();
}
outerFunc();

無名関数を宣言と同時に即実行
(function(){alert(‘fafafa’)})();
関数を返す関数
function outer(){
var innner = function(){
alert(‘hellow’);
}
return innner;
}
var f = outer();
f();
function outer(){
var x = ‘ken’;
return function(){
alert(x);
}
}
var c = outer();
c();

function outer2(){
var x = 1;
return function(){
alert(x);
x = x +1;
}
}
var s = outer2();
s();
s();
s();

</script>

</head>
<body>
<p>fafafa</p>
</body>
</html>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″>
<title>0611javascript</title>
<script type=”text/javascript”>
コンストラクタで初期化する
var Member = function(firstName,lastName){
this.firstName = firstName;
this.lastName = lastName;
this.getName = function(){
return this.lastName + ” + this.firstName;
}
};
var men = new Member(‘kenji’,’morita’);
document.write(men.getName());

動的メソッドを追加する

var Menber2 = function(lastname,firstname){
this.lastName = lastname;
this.firstName = firstname;
};
var men2 = new Menber2(‘kenji’,’morita’);
men2.getName = function (){
return this.lastName + ‘:’ + this.firstName;
}
alert(men2.getName());

 

プロトタイプオブジェクト
var Membber = function(firstName,lastName){
this.firstName = firstName;
this.lastName = lastName;
};
Membber.prototype.getName = function(){
return this.lastName + ‘:’ + this.firstName;
};

var men = new Membber(‘fujimaki’,’takashi’);
var men2 = new Membber(‘morita’,’kenji’);
document.write(men.getName());
document.write(‘<br>’);
document.write(men2.getName());
</script>
</head>
<body>
<p>fafafa</p>
</body>
</html>

javascript消費税8%関数(実際のコード付、消費税10%になった場合のjavascript関数も対応)です。

よかったらコピペして使ってください。

javascript消費税8%関数のコード(下に実際に価格を入れてみて「計算」を押してください)

JS Bin on jsbin.com

inputに入れられた数値をcalcuに渡して1.08を乗算、小数点以下を丸めて(捨てて)返しています。返されたresultはそれをあらかじめ作られた要素のid取得してinnerHTMLとして代入しています。 htmlに埋め込んでありますので使うとき移行してください。 10%のが欲しかったらコード内の1.08を1.1に変更して使ってくださいね

javascript消費税8%関数が実際動作する様子

JAVASCRIPT消費税8%関数

]1 JAVASCRIPT消費税8%関数