WEBの勉強~JavaScript3日目~
こんにちは! メグルです!!
今日のwebの勉強もjavascriptです。
今日のJavaScriptの勉強は、ボタンをクリックする回数をアラートで表示させていくscriptと、イベントハンドラと、ニュー演算子で
明日のJavaScriptの勉強は今日の続きです。
<script>
var i =0;
while (i<15) {
if (i%2==0) {
document.write('<p><span class="blue">おはようございます</span></p>');
} else {
document.write('<p><span class="pink">おはようございます</span></p>');
}
i++;
}
----------------------------------------------------------------------------
for (var i = 0; i < 15; i++) {
if (i%2==0) {
document.write('<p><span class="blue">おはようございます</span></p>');
} else {
document.write('<p><span class="pink">おはようございます</span></p>');
}
}
</script>
次にボタンをクリックする回数をアラートで表示させていくscriptです。
var count = 0;
function clickCheck() {
alert("クリック回数" + count);
count++;
}
</script>
<body>
<input type="button" value="クリック" onClick="clickCheck()">
</body>
、
クリックを押すと、
OKを押すと消えて、再度、ボタンを押すと、
なります。
イベントハンドラといいます。
イベントハンドラの参考サイト
その1
JavaScript/DOM|PHP & JavaScript Room
その2
イベントハンドラ | JavaScript プログラミング解説
<script>
function kinri() {
var uketori;
uketori = gankin;
for (var i = 1; i <= kikan; i++) {
uketori = uketori * (1 + rishi / 100);
}
return Math.round(uketori);
}
function calcUketori() {
var kikan, rishi, gankin;
gankin = parseInt(document.calcForm.gankin.value);//ノード
rishi = parseFloat(document.calcForm.rishi. value);
kikan = parseInt(document.calcForm.kikan.value);
document.calcForm.uketori,value = kinri(gankin, kikan, rishi);
}
</script>
でHTMLが
<body>
<form name="calcForm">
金利:<input type="text" name="rishi" size="8">%<br>
金額:<input type="text" name="gankin" size="8">円<br>
預入期間:<input type="text" name="kikan" size="3">年<br>
<input name="calc" type="button" value="計算" onclick="calcUketori()">
<input type="reset" value="クリア" ><br>
受取金額:<input type="text" name="uketori" size="15">円
</form>
</body>
になります。
次は、ニュー演算子です。
<script>
var str;
str = new String("あいうえお");//ニュー演算子
str = str.fontcolor("green");
str = str.link("http://www.yahoo.co.jp");
str = str.small();
str = str.italics();
document.write("<h1>");
document.write(str);
document.write("</h1>");
str1 = "あいいうえおかきくけこ";
document.write(str1);
</script>
str1 = "あいうえおかきくけこさしすせそ";
document.write(str1);
var char;
for (var i = 0; i < str1.length; i++) {
char = str1.charAt(1);
document.write(char);
}
charAt(1);は2番目を繰り返すというメソッド。
str1 = "あいうえおかきくけこさしすせそ";
/*document.write(str1);*/
var char;
for (var i = 0; i < str1.length; i++) {
char = str1.charAt(i).fontsize((i % 7) + 1);
document.write(char);
}
となります。
0÷7→ 0
1÷7→ 1
2÷7→ 2
3÷7→ 3
4÷7→ 4
5÷7→ 5
6÷7→ 6
7÷7→ 0
8÷7→ 1
9÷7→ 2
10÷7→ 3