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

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

<p class="p1"><!DOCTYPE <span class="s1">html</span>></p>
<p class="p1"><span class="s1"><html></span></p>
<p class="p1"><head></p>
<p class="p1"><meta <span class="s1">charset</span>="UTF-8"></p>
<p class="p1"><title><%=title %></title></p>
<p class="p1"><link type="text.css" <span class="s1">href</span>="style.css" <span class="s1">rel</span>="<span class="s1">stylesheet</span>"></p>
<p class="p1"></head></p>
<p class="p1"><body></p>
<p class="p1"><h1><%=title %></h1></p>
<p class="p1"><p><%=<span class="s1">msg</span> %></p>
<p class="p1"></body></p>
&lt;p class=&quot;p1&quot;&gt;&amp;lt;/html&amp;gt;&lt;/p&gt;</p>

<p>&lt;h3&gt;node.js&lt;/h3&gt;
var http = require('http');
var fs = require('fs');
var url = require('url');
var ejs = require('ejs');
var cookie = require('cookie');</p>

<p>var index = fs.readFileSync('./index.ejs','utf8');
var style = fs.readFileSync('./style.css','utf8');
var server = http.createServer();</p>

<p>server.on('request',doRequest);
server.listen(1337);</p>

<p>function doRequest(req,res){
var path = url.parse(req.url);
switch(path.pathname){
case '/' :
var msg = &quot;クッキーはありません&quot;;
if(req.headers.cookie != null){
var ck = cookie.parse(req.headers.cookie);
msg = &quot;クッキー:&quot; + ck.lasturl + &quot;,&quot; + ck.lasttime;
}
var tmp = ejs.render(index,{
title : 'index Page',
msg : msg
});
res.setHeader('Content-Type','text/html');
res.write(tmp);
res.end();
break;
case '/style.css':
res.setHeader('Content-Type','text/css');
res.write(style);
res.end();
break;
case '/time':
var d = new Date().toDateString();
var ck1 = cookie.serialize('lasttime',d,{
maxAge : 100
});
res.setHeader('Set-Cookie',ck1);
res.setHeader('Content-Type','text/plain');
res.write('SET - COOO_KIEE!');
res.end();
break;
case '/favicon.ico':
break;</p>

<p>default :
res.setHeader('Content-Type','text/plain');
res.setHeader('Set-Cookie',['lasturl=' + path.pathname]);
res.write('SET COOKIE!');
res.end();
break;
}
}
console.log('Server runnning at http://127.0.0.1:1337');</p>

<p>

Nod.jsを扱うときのEclipseの設定方法とプラグインを使って日本語化(Pleiades)めもめも

①ここのサイトからダウンロード

<

h4>Eclipse IDE for Java EE Developers

<

h4>
https://eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/keplersr2

自分のOSにあったものを右端のところから
bit数はOSの(調べてね)そのものを。
64bitのやつで32bitをダウンロードしたら使えるけど、自分のOSが32なのに64はダメ

わたしはMacなので
ここから
http://www.eclipse.org/downloads/download.php?file=/technology/epp/downloads/release/kepler/SR2/eclipse-jee-kepler-SR2-macosx-cocoa-x86_64.tar.gz

この写真の緑のところ

<

h4>Pleiades – Eclipse プラグイン日本語化プラグイン

<

h4>
http://mergedoc.sourceforge.jp/

写真

気持ち悪い

ここの安定版のほう
ここ

一瞬迷ったけどダウンロード数多い方選んだ

③今ダウンロードしたpleiadesの中の「features」内にある[jp.sourcefore.mergedoc.pleiades]を
コピーしてEclipse内の「features」内にペースト

次にダウンロードしたpleiadesの中の「plugins」内にある[jp.sourcefore.mergedoc.pleiades]を
コピーしてEclipse内の「plugins」内にペースト

eclipse.iniを編集する
※Macの方はeclipse.appをctr+右で「パッケージ内容を表示」でcontentフォルダの中にあるよ

    // var tar = document.getElementById("price")
    // var elem = tar.getElementsByTagName('p');
    // var tagleng = tar.getElementsByTagName('p').length;
    // var str =[],addEleme = '';
    // var re =[],result;
    // for(var i = 0;i<tagleng;i++){
    //   addEleme += elem[i].innerHTML + ',';
    //  result = addEleme.replace(/([0-9]{3}),/g,',$1_');
    //   re = result.split('_');

// re.pop();
//最後の要素を取得して削除
// }
// re;

    // p要素に入っているtextNodeの値を全て取得
    // stringにする
    // 全てのそれに
    // 一番最後から数えて3番目の前にカンマをつける


    //正解
    // function numberFormat(source){
    //  var s = new String(source);
    //  var ret = '';
    //  for (var i = s.length-3; i>0;i-=3){
    //      ret = '.' + s.substr(i,3) + ret;
    //  }
    //  ret = s.substr(0,i+3) + ret;
    //  return ret;
    // }
    // document.write('合計金額は' + numberFormat(2895 * 5) +  'です');円
    // window.alart('保存しました');

var reg = new RegExp(‘^[0-9]’);
reg.test(‘foo’);
false
reg.test(‘123’);
true
var reg = /’^[0-9]’/;
undefined
var reg = /’^[0-9]’/;
function RegExp(){

}
undefined
var reg = /’^[0-9]’/;
reg.constructor;

function RegExp() { [native code] }
var reg = /’^[0-9]’/g;
var reg = /^\s+/;
undefined
reg
/^\s+/
var reg = new RegExp(‘^\s+’);
undefined
var reg = new RegExp(‘^\s+’);
undefined
reg
RegExp {}
var text = ‘abc def ghi jkl’;
var reg = /(\w+)\s(\w+)/;
reg.exec(text);
[“abc def”, “abc”, “def”]
var reg = /(\w+)\s(\w+)/g;
undefined
reg
/(\w+)\s(\w+)/g
var text = ‘abc def ghi jkl’;
undefined
reg.exec(text);
[“abc def”, “abc”, “def”]
reg.exec(text);
[“ghi jkl”, “ghi”, “jkl”]
reg.exec(text);
null
var text = ‘moritakenji’;
var result = text.search(/^kan/g);
result;
-1
var text = ‘moritakenji’;
var result = text.search(/^moirta/g);
result;
-1
var text = ‘moritakenji’;
var result = text.search(/^(moirta)/g);
result;
-1
var text = ‘abc def ghi jkl’;
text.replace(/\s/,’,’);
“abc,def ghi jkl”
var text = ‘abc def ghi jkl’;
text.replace(/\s/g,’,’);
“abc,def,ghi,jkl”
text.replace(/(.)\s/g,’,$1′);
“ab,cde,fgh,ijkl”
text.replace(/(.)\s/g,function(01m,02m){return ‘,’+ 02m});
Uncaught SyntaxError: Unexpected token ILLEGAL VM50:732
text.replace(/(.)\s/g,function(m0,m1){return ‘,’+ m1});
“ab,cde,fgh,ijkl”
var text = ‘abc def ghi jkl’;
undefined
text
“abc def ghi jkl”
text.match(/\w/g);
[“a”, “b”, “c”, “d”, “e”, “f”, “g”, “h”, “i”, “j”, “k”, “l”]
text.match(/(w+)\s/g);
null
text.match(/(w)\s/g);
null
text.match(/(.)\s/g);
[“c “, “f “, “i “]
text.match(/(.)\s/g);
[“c “, “f “, “i “]
text.match(/([a-z]{,3})\s/g);
null
text.match(/([a-z]{3})\s/g);
[“abc “, “def “, “ghi “]
text.match(/([a-z]{1,2})\s/g);
[“bc “, “ef “, “hi “]
text.match(/([a-z]{0,1})\s/g);
[“c “, “f “, “i “]
text.match(/([a-z]{3})\s/g);
[“abc “, “def “, “ghi “]
text.match(/(\w+)\s(\w+)/g);
[“abc def”, “ghi jkl”]

再帰呼び出し
アクセサプロパティ
with()
apply call

var gloval;
var re = /(.)@(.+).(.)/;
var callback = function(){
gloval = arguments;
return arguments[1] + ‘at’ + arguments[2] + ‘dot’ + arguments[3];
}
‘kennjirmotaitata@yahoo.co.jp’.replace(re,callback);
//”kennjirmotaitataatyahoo.codotjp”

var arry = [];
var csv = ‘one, two, three’;
var re = csv.replace(/\s/g,”);
arry.push(re);

/<(\S+)(?:\s+.+)?>/
//配列に含めないタグ正規表現

文字列の位置。sliceとsubstringの第二引数に-1を与えた場合

var s = ‘moritakenji’;
s.slice(0,5);
“morit”
s.slice(0,-1)
“moritakenj”
s.substring(0,-1)
“”
s.substring(1,-1)
“m”

substr(0,3)
長さ

s.charAt(0)
位置にある文字を取得

全部とるにはslice(0,-1);

検索位置を返すstring.indexOf();
‘moritakenji’.indexOf(‘o’,2)//-1
‘moritakenji’.indexOf(‘o’) //1

.コールバック関数

3つある任意の数字を2倍にして配列で返す関数を実行した後、1を足す関数を実行
//失敗
function multi(a,b){
var arr = [];
for(var i in arguments){
var result = arry.push(i *2);
}
return result;
};
var result2 = multi(3,4);
result2

//見本
var i,arr = [];
function muliti(a,b,c){
for(i = 0;i<3;i++){
arr[i] = arguments[i] *2;
}
return arr;
};
function add(a){
return a + 1;
}
var my = [];
my = muliti(10,30,40);

for(var i = 0;i<3;i++){my[i] = add(my[i])};

ループをへらすことで実行コストを抑える。
1つのコードでやる。
コールバック関数を受け取るようにして繰り返しごとに関数を呼び出す
var my = [];
function muliti(a,b,c,callback){
var i,arr = [];
for(i= 0;i<3;i++){
arr[i] = callback(arguments[i] * 2);
}
return arr;
}
function add(a){
return a + 1;

}
my = muliti(2,3,5,add);

add()の代わりに無名関数を使うとグローバル関数を減らせることができる
var my = [];
function muliti(a,b,c,callback){
var i,arr =[];
for(i=0;i<3;i++){
arr[i] = callback(arguments[i] *2);
}
return arr;
}
my = muliti(2,3,5,function(a){return a + 1})

1

独自オブジェクトのコンストラクタ
function Product(name,price){
    this.name = name;
    this.price = price;
}
var prod_data = [];
prod_data.push(new Product('リラックスチェア','4000'));//{name:'リラックスチェア',price:'4000'}
prod_data.push(new Product('リラックスデスク','12000'));//{name:'リラックスデスク',price:'12000'}
prod_data.push(new Product('ブックスタンド','800'));//{name:'ブックスタンド',price:'800'}
window.addEventListener('load',function(event){
    createTable();

},false);
//表作成関数
function createTable(){//HTMLの生成
    var table = document.getElementById('prod_table');
    var tbody = document.getElementsByTagName('tbody')[0];
    for(var i = 0;i<prod_data.length;i++){
        if(!(prod_data[i] instanceof Product)){
            continue;
        }
        var tr = document.createElement('tr');
        var td = document.createElement('td');
        td.innerHTML= prod_data[i].name;
        tr.appendChild(td);
        td = document.createElement('td');
        td.innerHTML = prod_data[i].price;
        tr.appendChild(td);
        tbody.appendChild(tr);
    }
}

2
//他の関数を作成する場合

//独自オブジェクトのコンストラクタ
function Product(name,price){
    this.name = name;
    this.price = price;
    //コンストラクタに定義
    this.calcPrice1 = function(amount){
        return this.price * amount;
    }
}
//プロトタイプで共有
Product.prototype.calcPrice2= function(amount){
    return this.price * amount;
}
var prod_data = [];
prod_data.push(new Product('リラックスチェア','4000'));
prod_data.push(new Product('リラックスデスク','12000'));
prod_data.push(new Product('ブックスタンド','800'));

window.addEventListener('load',function(event){
    createTable();

},false);
function TableTool(){}//静的メソッドを作成
TableTool.createTdStr = function(value){
    var str = '';
    for(var i= 0;i<value.length;i++){
        str += '<td>' + value[i] + '</td>';
    }
    return str;
}
//表作成関数
function createTable(){
    var table = document.getElementById('prod_table');
    var tbody = document.getElementsByTagName('tbody')[0];
    for(var i = 0; i < prod_data.length; i++){
        var tr = document.createElement('tr');
        tr.innerHTML = TableTool.createTdStr(
            [prod_data[i].name,
            prod_data[i].price,
            prod_data[i].calcPrice2(10),
            prod_data[i].calcPrice2(20),
            prod_data[i].calcPrice2(30)
            ]
        );
        tbody.appendChild(tr);
        }
    }

3

// オブジェクトの継承
//独自オブジェクトのコンストラクタ
function Product(name,price){
    this.name = name;
    this.price = price;
}
Product.prototype.calcPrice = function(amount){
    return this.price * amount;
}
function HardProduct(name,price){//継承元と同じプロパティを定義する必要がある。そうしないとprototypeで継承元をたどってしまうから
    this.name = name;
    this.price = price;
    this.zaiko = 0;
}
HardProduct.prototype = new Product();//継承したいオブジェクト(継承元)のインスタンスを代入する

function SoftProduct(name,price){
    this.name = name;
    this.price = price;
}
SoftProduct.prototype = new Product();//継承はprototypeに対しての代入になる。これ逆にするとprototypeに対して追加していたメソッドが消えてしまう
SoftProduct.prototype.calcPrice = function(){
    return '---';
}
var prod_data = [];
prod_data.push(new HardProduct('リラックスチェア','4000'));
prod_data.push(new HardProduct('リラックスデスク','12000'));
prod_data.push(new HardProduct('ブックスタンド','800'));
prod_data.push(new SoftProduct('設置サービス','2800'));
prod_data.push(new SoftProduct('1年保証','5800'));
window.addEventListener('load',function(event){
    createTable();
},false);

function TableTool(){}//静的メソッドを作成
TableTool.createTdStr = function(value){
    var str = '';
    for(var i= 0;i<value.length;i++){
        str += '<td>' + value[i] + '</td>';
    }
    return str;
}
//表作成関数
function createTable(){
    var table = document.getElementById('prod_table');
    var tbody = document.getElementsByTagName('tbody')[0];
    for(var i = 0; i < prod_data.length; i++){
        if(!(prod_data[i] instanceof Product)){
            continue;
        }
        var tr = document.createElement('tr');
        tr.innerHTML = TableTool.createTdStr(
            [
            prod_data[i].name,
            prod_data[i].price,
            prod_data[i].calcPrice(10),
            prod_data[i].calcPrice(20),
            prod_data[i].calcPrice(30)
            ]
        );
        tbody.appendChild(tr);
        }
    }

<style> 
table{border:solid 1px orange;border-spacing:0px;}
th,td{border:solid 1px orange;padding: 4px}
</style>


新製品価格表

</table>



–>

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%関数

製品名 価格 10個 20個 30個
2017年8月
« 7月    
 123456
78910111213
14151617181920
21222324252627
28293031