1. 現在位置:
  2. トップページ
  3. tipsトップ
  4. JavaScript
記述する方法 |  noscript |  リンク色の変更 |  ボタンいろいろ |  フォーム |  プルダウンメニュー |  サブウインドウ |  コピー禁止 |  送信完了をポップアップ | 
■ページ内に記述する方法

<SCRIPT TYPE="text/javascript">
<!--
ここにJavaScriptの内容
// -->
</SCRIPT>

※ページ内に複数の関数を指定する場合
<SCRIPT TYPE="text/javascript">
<!--
function disp1(){
関数1の内容
}
function disp2(){
関数2の内容
}
// -->
</SCRIPT>
関数名(disp1やdisp2の部分)が同一のページ内で重複しないように

■外部ファイルで指定する方法

外部 JavaScript ファイルの拡張子は .js

外部 JavaScript ファイルにスクリプトを記述する場合は、
<SCRIPT TYPE="text/javascript"> 〜 </SCRIPT> や <!-- 〜 //--> は入れません。
スクリプトの内容のみを記述

外部 JavaScript ファイルの内容をページに読み込むには、
<HEAD> 〜 </HEAD> 内、または <BODY> 〜 </BODY> 内に次のタグを記述
<SCRIPT TYPE="text/javascript" SRC="script.js"></SCRIPT>
script.js → 読み込むスクリプトの名前
上へ戻る
■noscript

JavaScript未対応のプラウザ用に<noscript>タグを使う

<body>の中に書く
<noscript>
JavaScript未対応のプラウザか、またはJavaScript機能がオフにされています。Scriptは実行できません。
</noscript>

(この注意書きは、JavaScript対応のプラウザには表示されません)

■JavaScriptへの対応/未対応によって開くページを分岐する

JavaScript対応のHTML(script-on.html)
JavaScript未対応のHTML(script-off.html)

分岐するためのHTML(script.html) リンクの際、script.htmlへリンクする
<html>
<head>
<script language="JavaScript">
<!-- location.href="script-on.html";// -->
</script>
<noscript>
<meta http-equiv="refresh" content="0;URL=script-off.html">
</noscript>
</head>
<body>
</body>
</html>
上へ戻る
リンク色の変更(レインボーカラー)

<script language="javascript" type="text/javascript">
<!--
var colorList = new Array('blue','aqua','green','lime','yellow','orange','red','pink','purple');
var n = 0;
function al(){
    var aobj = document.body.getElementsByTagName("a");
    var anum = aobj.length;
    n++;
    c = n%(colorList.length);
    for(i=0;anum>i;i++){
        aobj[i].style.color = colorList[c];
    }
}
function acolor(){
    var aobj = document.body.getElementsByTagName("a");
    var anum = aobj.length;
    for(i=0;anum>i;i++){
        aobj[i].style.color = "black";
        aobj[i].onmouseover=al;
        aobj[i].onmouseout=al;
    }
}
window.onload=acolor;
//-->
</script>
上へ戻る
ボタンを押すと印刷できる

<FORM>
<INPUT TYPE="button" VALUE="印刷する" onClick="print()">
</FORM>
テキストリンクで印刷できる

<A HREF="javascript:print()">印刷する</A>
印刷する

閉じる

<FORM><input type="button" name="OK" value="閉じる" onClick="window.close()"></FORM>

画像ボタン

<input type="submit" name="submit" value="完了">
を下記のようにします。

<input type="hidden" name="submit" value="完了">
<input type="image" src="画像ファイルのパス/画像ファイルの名前" align="top">
を下記のようにします。


バックボタン

<FORM> <INPUT TYPE="button" VALUE="BACK" onClick="history.back()"> </FORM>
テキストリンクでバック

[<A HREF="JavaScript:history.back()">BACK</A>]

[BACK]

マウスがボタン上にくると画像が変わる

<FORM>
<INPUT TYPE="image" src="0.gif" align="top" OnMouseOver="this.src='in2.gif'" OnMouseOut="this.src='0.gif'" VALUE="BACK" onClick="history.back()">
</FORM>

キャンセル(ウィンドを閉じる)

<input type="button" name= close  value= キャンセル  onClick= window.close() >

キャンセル(ウィンドを閉じる)gifボタンを使う

<A HREF="javascript:window.close()"><IMG SRC="in2.gif" BORDER="0"></A>


ボタンで数字(数)を変える

●head
<script language="JavaScript">
function count_change(temp)
{
var test=document.form1.amount.value;
if(temp==0){
test++;
}else if(temp==1){
if(test> 1) test--;
}
document.form1.amount.value=test;
}
</script>
●body
<form name=form1 method=post action="">
<table border=0 cellpadding=0 cellspacing=0>
<tr><td rowspan=3 class=woong width=30>数量</td>
<td rowspan=3 width=30><input type=text name=amount value="1" size=2></td>
<td><a href="JavaScript:count_change(0)"><img src="basket_up.gif" border=0></a></td>
</tr>
<tr><td class=line height=1> </td></tr>
<tr><td><a href="JavaScript:count_change(1)"><img src="basket_down.gif" border=0></a></td></tr>
</table>
</form>

ボタンをクリックしてテキストの表示・非表示

●head
<script language="javascript" type="text/javascript">
<!--
function disp(){
//表示・非表示するid名
var divname="samp";
//現在のスタイル属性visibility値を取得
var sflag=document.getElementById(divname).style.visibility;
//現在hidden(非表示)の場合はvisible(表示)に
//それ以外の場合はhidden(非表示)にする
if(sflag=="hidden"){
document.getElementById(divname).style.visibility="visible";
}else{
document.getElementById(divname).style.visibility="hidden";
}
}
//-->
</script>
●body
<!--クリックするとdisp()が呼び出される-->
<form>
<input type="button" value="ボタン" onclick="disp();" />
</form>
<!--ボタンをクリックすると表示・非表示されるテキスト-->
<div id="samp">表示・非表示</div>
上へ戻る
<form action="アドレス" method="post" name="data">〜</form>

<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女

<input type="checkbox" name="check[]" value="1">1
<input type="checkbox" name="check[]" value="2">2
<input type="checkbox" name="check[]" value="3">3

全てチェック
<FORM>
<INPUT type=checkbox name="check">赤
<INPUT type=checkbox name="check">青
<INPUT type=checkbox name="check">緑
<BR>
<INPUT type=button value="全てOn" onClick="all_on(this.form.check)">
<INPUT type=button value="全てOff" onClick="all_off(this.form.check)">
</FORM>
<SCRIPT language="JavaScript">
<!--
function all_on(chk){
for (i = 0; i < chk.length; i++) {
chk[i].checked = true;
}
}
function all_off(chk){
for (i = 0; i < chk.length; i++) {
chk[i].checked = false;
}
}
// -->
</SCRIPT>


HEAD
<script language="JavaScript">
<!--
chmax=3; //最大チェック数
//--------------------------
function check(chobj){
if(!chobj.checked)return;
chname1=chobj.name;
chint=0;
elementleng=document.forms[0].elements[chname1].length;
for(i=0;i if(document.forms[0].elements[chname1][i].checked){
chint++;
if(chint>chmax){chobj.checked=false;break;}
}
}
}
// -->
</script>

BODY
<input type="checkbox" name="what[]" value="1" onclick="check(this)">

<textarea rows="10" cols="50" name="message">ここへ入力</textarea>

<input type="text" name="name" size="20">

テキストボックスを入力不可にしてみる

<INPUT type="text" onFocus="this.blur();">

テキストボックスにカーソルをもっていく

function setFocus(){
    window.document.form1.text1.focus();
}

<BODY onLoad="setFocus();">
<FORM name="form1">
<INPUT type="text" name="text1">
<INPUT type="reset" value="reset" onClick="setFocus();">
</FORM>

半角文字入力(IEのみ)

<input type="text" name="code" maxlength="6" size="20" STYLE="ime-mode:disabled">
上へ戻る

<SCRIPT LANGUAGE="JavaScript">
<!--
function jump(sel) {
if (sel.options[sel.selectedIndex].value) {
top.location.href = sel.options[sel.selectedIndex].value;
}
}
// -->
</SCRIPT>
<FORM>
<SELECT onChange="jump(this)">
<OPTION VALUE="">-----menu-----
<OPTION VALUE="../../index.php">トップページ</OPTION>
<OPTION VALUE="../../cook/index.html">料理レシピ</OPTION>
<OPTION VALUE="../../ran/index.html">花と豆知識</OPTION>
<OPTION VALUE="../../tips/index.html">HP作成</OPTION>
<OPTION VALUE="../../sozai1/index.html">素材</OPTION>
<OPTION VALUE="../../game/gamebako/index.html">GAME</OPTION>
</SELECT>
</FORM>



<SCRIPT LANGUAGE="JavaScript">
<!--
function jump(sel) {
if (sel.options[sel.selectedIndex].value) {
top.location.href = sel.options[sel.selectedIndex].value;
}
}
// -->
</SCRIPT>
<FORM>
<SELECT size="1" style="BACKGROUND-COLOR: rgb(255,223,230); COLOR: rgb(0,0,0)" onChange="jump(this)">
<OPTION VALUE="">-----menu-----
<OPTION VALUE="../../index.php">■トップページ</OPTION>
<OPTION VALUE="../../cook/index.html">┣■料理レシピ</OPTION>
<OPTION VALUE="../../ran/index.html">┣■花と豆知識</OPTION>
<OPTION VALUE="../../tips/index.html">┣■HP作成</OPTION>
<OPTION VALUE="../../sozai1/index.html">┣■素材</OPTION>
<OPTION VALUE="../../game/gamebako/index.html">┣■GAME</OPTION>
</SELECT>
</FORM>



<SCRIPT LANGUAGE="JavaScript">
<!--
function jump(sel) {
if (sel.options[sel.selectedIndex].value) {
top.location.href = sel.options[sel.selectedIndex].value;
}
}
// -->
</SCRIPT>
<FORM>
<SELECT onChange="jump(this)">
<OPTION VALUE="" STYLE="background-color: #ff7788;">-----menu-----
<OPTION VALUE="../../index.php" STYLE="background-color: #ff7788;">トップページ</OPTION>
<OPTION VALUE="../../cook/index.html" STYLE="background-color: #ff7788;">料理レシピ</OPTION>
<OPTION VALUE="../../ran/index.html" STYLE="background-color: #ff7788;">花と豆知識</OPTION>
<OPTION VALUE="../../tips/index.html" STYLE="background-color: #ff7788;">HP作成</OPTION>
<OPTION VALUE="../../sozai1/index.html" STYLE="background-color: #ff7788;">素材</OPTION>
</SELECT>
</FORM>


年令


<select name="age">
<OPTION VALUE="" selected>下記より選択</option>
<option value="20〜25歳">20〜25歳</option>
<option value="26〜30歳">26〜30歳</option>
<option value="31〜35歳">31〜35歳</option>
<option value="36〜40歳">36〜40歳</option>
<option value="41〜45歳">41〜45歳</option>
<option value="46〜50歳">46〜50歳</option>
<option value="51〜55歳">51〜55歳</option>
<option value="56〜60歳">56〜60歳</option>
<option value="61〜65歳">61〜65歳</option>
<option value="66〜70歳">66〜70歳</option>
<option value="71〜75歳">71〜75歳</option>
<option value="76〜80歳">76〜80歳</option>
<option value="81歳以上">81歳以上</option>
</select>

都道府県


<SELECT NAME="area">
<OPTION VALUE="" selected>下記より選択</OPTION>
<OPTION VALUE="北海道">北海道</OPTION>
<OPTION VALUE="青森県">青森県</OPTION>
<OPTION VALUE="岩手県">岩手県</OPTION>
<OPTION VALUE="宮城県">宮城県</OPTION>
<OPTION VALUE="秋田県">秋田県</OPTION>
<OPTION VALUE="山形県">山形県</OPTION>
<OPTION VALUE="福島県">福島県</OPTION>
<OPTION VALUE="茨城県">茨城県</OPTION>
<OPTION VALUE="栃木県">栃木県</OPTION>
<OPTION VALUE="群馬県">群馬県</OPTION>
<OPTION VALUE="埼玉県">埼玉県</OPTION>
<OPTION VALUE="千葉県">千葉県</OPTION>
<OPTION VALUE="東京都">東京都</OPTION>
<OPTION VALUE="神奈川県">神奈川県</OPTION>
<OPTION VALUE="新潟県">新潟県</OPTION>
<OPTION VALUE="富山県">富山県</OPTION>
<OPTION VALUE="石川県">石川県</OPTION>
<OPTION VALUE="福井県">福井県</OPTION>
<OPTION VALUE="山梨県">山梨県</OPTION>
<OPTION VALUE="長野県">長野県</OPTION>
<OPTION VALUE="岐阜県">岐阜県</OPTION>
<OPTION VALUE="静岡県">静岡県</OPTION>
<OPTION VALUE="愛知県">愛知県</OPTION>
<OPTION VALUE="三重県">三重県</OPTION>
<OPTION VALUE="滋賀県">滋賀県</OPTION>
<OPTION VALUE="京都府">京都府</OPTION>
<OPTION VALUE="大阪府">大阪府</OPTION>
<OPTION VALUE="兵庫県">兵庫県</OPTION>
<OPTION VALUE="奈良県">奈良県</OPTION>
<OPTION VALUE="和歌山県">和歌山県</OPTION>
<OPTION VALUE="鳥取県">鳥取県</OPTION>
<OPTION VALUE="島根県">島根県</OPTION>
<OPTION VALUE="岡山県">岡山県</OPTION>
<OPTION VALUE="広島県">広島県</OPTION>
<OPTION VALUE="山口県">山口県</OPTION>
<OPTION VALUE="徳島県">徳島県</OPTION>
<OPTION VALUE="香川県">香川県</OPTION>
<OPTION VALUE="愛媛県">愛媛県</OPTION>
<OPTION VALUE="高知県">高知県</OPTION>
<OPTION VALUE="福岡県">福岡県</OPTION>
<OPTION VALUE="佐賀県">佐賀県</OPTION>
<OPTION VALUE="長崎県">長崎県</OPTION>
<OPTION VALUE="熊本県">熊本県</OPTION>
<OPTION VALUE="大分県">大分県</OPTION>
<OPTION VALUE="宮崎県">宮崎県</OPTION>
<OPTION VALUE="鹿児島県">鹿児島県</OPTION>
<OPTION VALUE="沖縄県">沖縄県</OPTION>
<OPTION VALUE="その他">その他</OPTION>
</SELECT>

星座


<SELECT NAME="astrology">
<OPTION VALUE="" selected>下記より選択</OPTION>
<OPTION VALUE="aries">牡羊座</OPTION>
<OPTION VALUE="taurus">牡牛座</OPTION>
<OPTION VALUE="gemini">双子座</OPTION>
<OPTION VALUE="cancer">蟹座</OPTION>
<OPTION VALUE="leo">獅子座</OPTION>
<OPTION VALUE="virgo">乙女座</OPTION>
<OPTION VALUE="libra">天秤座</OPTION>
<OPTION VALUE="scorpio">蠍座</OPTION>
<OPTION VALUE="sagitarius">射手座</OPTION>
<OPTION VALUE="capricoun">山羊座</OPTION>
<OPTION VALUE="aquarius">水瓶座</OPTION>
<OPTION VALUE="pisces">魚座</OPTION>
</SELECT>

生年月日


<SELECT name="month">
<OPTION VALUE="" selected>下記より選択</OPTION>
<OPTION VALUE="01">1</OPTION>
<OPTION VALUE="02">2</OPTION>
<OPTION VALUE="03">3</OPTION>
<OPTION VALUE="04">4</OPTION>
<OPTION VALUE="05">5</OPTION>
<OPTION VALUE="06">6</OPTION>
<OPTION VALUE="07">7</OPTION>
<OPTION VALUE="08">8</OPTION>
<OPTION VALUE="09">9</OPTION>
<OPTION VALUE="10">10</OPTION>
<OPTION VALUE="11">11</OPTION>
<OPTION VALUE="12">12</OPTION>
</select>

<select name="day">
<OPTION VALUE="" selected>下記より選択</OPTION>
<OPTION VALUE="01">1</OPTION>
<OPTION VALUE="02">2</OPTION>
<OPTION VALUE="03">3</OPTION>
<OPTION VALUE="04">4</OPTION>
<OPTION VALUE="05">5</OPTION>
<OPTION VALUE="06">6</OPTION>
<OPTION VALUE="07">7</OPTION>
<OPTION VALUE="08">8</OPTION>
<OPTION VALUE="09">9</OPTION>
<OPTION VALUE="10">10</OPTION>
<OPTION VALUE="11">11</OPTION>
<OPTION VALUE="12">12</OPTION>
<OPTION VALUE="13">13</OPTION>
<OPTION VALUE="14">14</OPTION>
<OPTION VALUE="15">15</OPTION>
<OPTION VALUE="16">16</OPTION>
<OPTION VALUE="17">17</OPTION>
<OPTION VALUE="18">18</OPTION>
<OPTION VALUE="19">19</OPTION>
<OPTION VALUE="20">20</OPTION>
<OPTION VALUE="21">21</OPTION>
<OPTION VALUE="22">22</OPTION>
<OPTION VALUE="23">23</OPTION>
<OPTION VALUE="24">24</OPTION>
<OPTION VALUE="25">25</OPTION>
<OPTION VALUE="26">26</OPTION>
<OPTION VALUE="27">27</OPTION>
<OPTION VALUE="28">28</OPTION>
<OPTION VALUE="29">29</OPTION>
<OPTION VALUE="30">30</OPTION>
<OPTION VALUE="31">31</OPTION>
</select>
上へ戻る
サブウインドウ(スクロールなし)

<script language="JavaScript">
<!--
function openwindow(loc) {
var wnd="openwindow";
var width='800';
var height='790';
var myWindow = window.open(loc, wnd, 'resizable=no,scrollbars=no,status=0,width='+width+',height='+height);
if (myWindow.focus!=null) {
myWindow.focus();
}
}
//-->
</script>

<BODY onLoad="setFocus();">
サブウインドウ
<A HREF=JavaScript:openwindow('03a.html');>スクロールなし</A>
</BODY>
スクロールなし
上へ戻る
コピー禁止

body の中に入れる
<body onselectstart="return false" oncontextmenu="return false" ondragstart="return false">

文字選択不可
onselectstart="return false"
右クリック不可
oncontextmenu="return false"
画像ドラック不可
ondragstart="return false"
上へ戻る

送信完了をポップアップ

<script type="text/javascript">
function mailSubmit(mailAddress){
window.open("", "new", "width=350,height=200");
}
</script>
<form action="com.php" target="new" method="post" name="com">
<input type="text" name="com" /><br />
<input type="submit" value="送信" onclick="mailSubmit(this.form.com.value);" />
</form>

PHP送信ファイル(com.php)
$submit = $HTTP_POST_VARS["submit"];
$com = $HTTP_POST_VARS["com"];
if (empty($HTTP_POST_VARS['com'])) {
print("メッセージを入力して下さい");
}else{
mb_language("Ja") ;
mb_internal_encoding("Shift_JIS") ;
$from ="From:" .mb_encode_mimeheader("MILD") ."<000@0000.or.jp>";
$reply = "000@0000.or.jp"; //受信者アドレス
// メール送信
$to= "$reply";
$from = "$com";
$subject = "メッセージが送信されました";
$mail = "メッセージが送信されました\n\n";
$mail .= "メッセージ:$com\n\n";
mb_send_mail($to,$subject,$mail);
// 表示
print("メッセージを送信しました");
}
?>
メッセージを送信します

上へ戻る