「web備忘録」カテゴリーアーカイブ

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

// 文字列を大文字にして','区切りで配列に格納して返す
// 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" "https://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" "https://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%関数