Javascript入門編
「home」フォルダの中にjava.htmlを作成しましょう。
以下のものをコピー貼り付けして試します。
みんなでいっしょに説明しながらやりましょうね。
フライング禁止で-す！！
--------------------------------------------
１．ボタンクリックでダイアログを出す
<html>
<head>
<title></title>
</head>
<body>
<form>
<input type="button" name="" value=" 押してください "
onClick="alert('ようこそ\nかねだworldへ(^^)/\nまぁ、ゆっくり遊んでいってください\nあとで、メールもちょうだいねっ。')" >
</form>
</body>
</html>
--------------------------------------------
２．文字をクリックしたらダイアログを出す
<a href="javascript:function voi(){};voi()"
onClick="alert('これはリンクではありません(^^)')"
>
説明はここをクリック
</a>
--------------------------------------------
３．文字にさわったらダイアログを出す
<a href="javascript:function voi(){};voi()"
onMouseOver="alert('さわっちゃ(#^^#)いやん')">
この文字にさわってはいけません
</a>
--------------------------------------------
４．写真をクリックしたらダイアログを出す1 -onClickを使うケース-
<a href="javascript:function voi(){};voi()"
onClick="alert('これはonclickでalert文を実行しました')">
<img src="sample.png" width="120" border="0"></a>
写真をクリックすると説明が出ます。
--------------------------------------------
５．写真をクリックしたらダイアログを出す2 -javascript:を使うケース-
<a href="javascript:alert('これはjavascript:でalert文を実行しました')">
<img src="sample.png" width="120" border="0"></a>
写真をクリックすると説明が出ます。
--------------------------------------------
６．写真にさわったらダイアログを出す
<a href="javascript:function voi(){};voi()"
onMouseOver="alert('これは元日早朝の牛久大仏です\n500メートル離れたところから\n私が撮りました(^^)。')"
><img src="sample.png" width="120" border="0"></a>
写真に触れるとメッセージが出ます。
--------------------------------------------
６．写真から離れたらダイアログを出す
<a href="javascript:function voi(){};voi()"
onMouseOut="alert('はなさないでね～(^^;')">
<img src="sample.png" width="120" border="0"></a>
写真に触れたあと離れる時にメッセージが出ます。
--------------------------------------------
７．リセットボタンを押したらダイアログを出す
<form
onReset="alert('ほんとに消すからね(^^;。');return true">
<input type="text" name="">
<input type="reset">
何か書いてからresetを押してみてください。
</form>
--------------------------------------------
８．送信ボタンを押したらダイアログを出す
<form action="mailto:xx@xxxx.or.jp"
method="post"
onsubmit="alert('どうも、ありがとねー(^^)/')">
<input type="text" name="">
<input type="submit" value=" 送信 ">
何か書いてから 送信 を押してみてください。
</form>
--------------------------------------------
９．数字入力後クリックで入力確認を出し、未入力だと再入力メッセージを出す
<form>
<input type="text" value=""
onBlur="
if( this.value == '' ){
alert('再入力')
} else {
alert('入力したのは\n'+this.value+' ですね')
} "
>
</form> 数字入力後フォーム以外の場所をクリックしてください。
--------------------------------------------
１０．Javaが使えるかどうかのダイアログを出す（<head></head>の中で使用）
<script language="JavaScript">
<!--
if(navigator.appVersion.charAt(0)>=3){
if(navigator.javaEnabled()==true){
alert("あなたの環境はJavaが使えます(^^)v")
} else {
alert("Javaが使えません(;_;) 設定でJavaを選択してください。でもこのダイアログが見えるということはJavaはだめでもJavaScriptは使えるわけです(^^)v")
}
}
//-->
</script>
--------------------------------------------
１１．ページに入ったとたんにダイアログを出す1 -読み込み完了前-
<head>
<title></title>
<script language="JavaScript">
<!--
alert('いらっしゃいませ(^^)/')
//-->
</script>
</head>
--------------------------------------------
１２．ページに入ったとたんにダイアログを出す2 -読み込み完了後-
<body onLoad="alert('いらっしゃいませ(^^)/')">
</body>
--------------------------------------------
１３．ページを出る時にダイアログを出す
<body onUnload="alert('さよ～なら～(^^)/~ また来てね～')">
</body>
--------------------------------------------
１４．XX秒後にダイアログを出す
<head>
<title></title>
<script language="JavaScript">
<!--
function msg(){
alert('おまたせ～待った～(^^ ?');
}
//-->
</script>
</head>
</head>
<body>
<form>
<input type="button" value=" クリックして5秒まつのだ(^^)/ "
onClick="window.setTimeout('msg()',5000)">
</form>
</body>
</html>
0 件のコメント:
コメントを投稿