********良く忘れるfunctionの呼び出し方********
Onclickを押下しなくても、loadされると実行される。
<body>
<form>
<input type="button" value="exe" onclick="add()"> // 不要
</form>
<script type="text/javascript">
function add(a,b){
var c = a+b;
alert(c);
}
add(3,4)
</script>
</body>
********良く忘れるfunctionの呼び出し方 終わり********
＊外部スクリプト・ファイルを参照する場合
<htmlサイド>
*書く場所は<head></head>内。 または、</body>の直前。
スクリプト言語であることの特性に留意して決める。
<head>
<script src="./loan5.js"></script>
</head>
<script src="./loan5.js"></script>
</head>
<Scriptサイド>
特に書かない。 以下参照。
(1) Parameterなし
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head></head>
<body>
<script type="text/javascript">
function funky(){
alert("Ouch!!!");
}
</script>
<form>
<input type="button" value="click" onclick="funky()">
</form>
</body> </html>
<html>
<head></head>
<body>
<script type="text/javascript">
function funky(){
alert("Ouch!!!");
}
</script>
<form>
<input type="button" value="click" onclick="funky()">
</form>
</body> </html>
(2) Parameterあり
<html>
<head></head>
<body>
<script type="text/javascript">
function tempConvert ( f ) { //Fereinheitの変数を指定: function [関数名][パラメータ]
var c = (f - 25)/2; //変数定義の後にもセミコロン(;)が必要。
return C; //Return値の指定。 このスクリプトでは記述しなくても結果は同じ。
document.write( f + " Fereinheit is " + c + "Cellucius.!" +"<br/>");
}
tempConvert (105); //Functionのコールは<script>タグ内
tempConvert (66);
</script>
</body>
</html>
結果）” 105 Fereinheit is 40Cellucius.! " <head></head>
<body>
<script type="text/javascript">
function tempConvert ( f ) { //Fereinheitの変数を指定: function [関数名][パラメータ]
var c = (f - 25)/2; //変数定義の後にもセミコロン(;)が必要。
return C; //Return値の指定。 このスクリプトでは記述しなくても結果は同じ。
document.write( f + " Fereinheit is " + c + "Cellucius.!" +"<br/>");
}
tempConvert (105); //Functionのコールは<script>タグ内
tempConvert (66);
</script>
</body>
</html>
" 66 Fereinheit is 20.5Cellucius.!”が連続して表示。
*複数行コメントは、/* コメント記入できます。 */
2. For Loop
<html>
<head></head>
<body>
<script type="text/javascript">
var i = 0
for ( i=0; i<=10; i++)
{
sum += i;
}
</script>
</body>
</html>
<head></head>
<body>
<script type="text/javascript">
var i = 0
for ( i=0; i<=10; i++)
{
sum += i;
}
</script>
</body>
</html>
☆リストの長さを使ったループ
var lists = ['apple', 'orange', 'grape', 'melon', 'pear', 'berry'];
for ( var i = 0; i < lists.length; i++ ) {
console.log ( lists[ i ] );
}
☆for - in文（in の対象がオブジェクトに使用可）
myContacts = {
name: 'Tom',
age: 20,
phone: '123-456-789'
}
for( var item in myContacts ) {
console.log( item );
}
//Output:
name
age
phone
☆For Each文
array.forEach( function( value, index, array ) {
// 繰り返し処理を書く
});
・「value」は、配列データの値
・「index」は、配列のインデックス番号
・「array」は、現在処理している配列
var lists = ['リンゴ', 'バナナ', 'メロン'];
lists.forEach( function( value, index ) {
console.log( 'index: ' + index + ' | value: ' + value );
});
//Output
index: 0 | value: リンゴ
index: 1 | value: バナナ
index: 2 | value: メロン
参考）
【JavaScript入門】forEach文の使い方と配列の繰り返し処理まとめ！
3. While Loop
<html>
<head></head>
<body>
<script type="text/javascript">
var i = 0
while ( i<=10)
{
if (i==8)
{
break;
}
if (i==3)
{
continue; // i==3の時は、functionの実行がスキップされて、４以降が表示。
}
document.write(i+"<br/>");
i = i +1;
}
</script>
</body>
</html>
結果： "break"1から７ まで表示。"continue" 3をスキップして表示。<head></head>
<body>
<script type="text/javascript">
var i = 0
while ( i<=10)
{
if (i==8)
{
break;
}
if (i==3)
{
continue; // i==3の時は、functionの実行がスキップされて、４以降が表示。
}
document.write(i+"<br/>");
i = i +1;
}
</script>
</body>
</html>
4. Style String
<html>
<head></head>
<body>
<script type="text/javascript">
var word="hello bob";
document.write(word.fontcolor("red"), word.toUpperCase());
</script>
</body>
</html>
結果： hello bobHELLO BOB <head></head>
<body>
<script type="text/javascript">
var word="hello bob";
document.write(word.fontcolor("red"), word.toUpperCase());
</script>
</body>
</html>
その他： indexof #Tutorial #19, match#Tutorial #20, replace#Tutorial #20
word. match("bob") -> bob, word. match("Tom") -> null
document.write(word.replace(/bob/,"Robert"));
5.Math Operation
<html>
<head></head>
<body>
<script type="text/javascript">
document.write(Math.round (3.4);
</script>
</body>
</html>
結果：3.4 =>3 , 3.5=>4, その他のMath：random()<head></head>
<body>
<script type="text/javascript">
document.write(Math.round (3.4);
</script>
</body>
</html>
0 件のコメント:
コメントを投稿