webの勉強!!初心者!脱出マニュアル!!

webの勉強を、初心者から脱出するためのメモを残していきます

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>

f:id:meglez1:20150204094131p:plain

クリックを押すと、

 

f:id:meglez1:20150204094137p:plain

 

OKを押すと消えて、再度、ボタンを押すと、

 

f:id:meglez1:20150204094147p:plain

 

なります。

イベントハンドラといいます。

 

イベントハンドラの参考サイト

その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>

 

f:id:meglez1:20150204114611p:plain

 

str1 = "あいうえおかきくけこさしすせそ";
document.write(str1);

var char;
for (var i = 0; i < str1.length; i++) {
char = str1.charAt(1);
document.write(char);
}

 

f:id:meglez1:20150204115034p:plain

 

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);
}

 

f:id:meglez1:20150204115339p:plain

 

となります。

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