JavaScriptってこうなる（JS基礎知識編）

著者：Eve Cole 更新時間：2009-06-11 16:26:36

コンテンツプログラムコードを参照する

スクリプトブロックを作成する

<スクリプト言語="JavaScript">
ここにJavaScriptコードが書かれています
</script>

2 スクリプトコードを非表示にする
参考コンテンツプログラムコード
<スクリプト言語="JavaScript">

</script>
JavaScript 3 をサポートしていないブラウザでは、該当するコードは実行されません

。ブラウザがサポートしていない場合に表示されます。
参考コンテンツプログラムコード
<スクリプトなし>
JavaScript 非対応ブラウザへようこそ。
</noscript>

4 外部スクリプトファイルをリンクする
参考コンテンツプログラムコード
<script language="JavaScript" src="/"filename.js""></script>

5 コメントスクリプト
参考コンテンツプログラムコード
// これはコメントです
document.write(“こんにちは”); // これはコメントです
/*
これらすべて
コメントです
*/

6 ブラウザへの出力
参考コンテンツプログラムコード
document.write(“<strong>こんにちは</strong>”);

7 変数を定義します。
参考コンテンツプログラムコード

var myVariable = "何らかの値

;

参考コンテンツプログラムコード
var myString = “String1” + “String2”

9 文字列検索
参考コンテンツプログラムコード
<スクリプト言語="JavaScript">

</script>

10 文字列の置換
参考コンテンツプログラムコード
thisVar.replace(“月曜日”,“金曜日”);

11 フォーマット文字列
参考コンテンツプログラムコード
<スクリプト言語="JavaScript">

</script>

12 配列の作成
参考コンテンツプログラムコード
<スクリプト言語="JavaScript">

</script>

13 配列のソート
参考コンテンツプログラムコード
<スクリプト言語="JavaScript">

</script>

14 文字列の分割
参考コンテンツプログラムコード
<スクリプト言語="JavaScript">

</script>

15 ポップアップ警告メッセージ
参考コンテンツプログラムコード
<スクリプト言語="JavaScript">

</script>

16 ポップアップ確認ボックス
参考コンテンツプログラムコード
<スクリプト言語="JavaScript">

</script>

17 カスタム関数
参考コンテンツプログラムコード
<スクリプト言語="JavaScript">

</script>

18 JS関数を呼び出す
参考コンテンツプログラムコード
<a href=”#” onClick=”functionName()”>リンクテキスト</a>
<a href="/”javascript:functionName"()">リンクテキスト</a>

19 ページが読み込まれた後に関数を実行します。
参考コンテンツプログラムコード
<body onLoad="関数名();">
ページの本文
</body>

20 条件判定
参考コンテンツプログラムコード
<スクリプト>

</script>

21 ループ回数を指定する
参考コンテンツプログラムコード
<スクリプト>

</script>

22 今後の実行を設定する
参考コンテンツプログラムコード
<スクリプト>

</script>

23 スケジュール実行機能
参考コンテンツプログラムコード
<スクリプト>

</script>

24 スケジュールされた実行をキャンセルします
参考コンテンツプログラムコード
<スクリプト>

</script>

25 ページがアンロードされたときに関数を実行します
参考コンテンツプログラムコード
<body onUnload="関数名();">
ページの本文
</body>

JavaScriptはこんな感じ 2: ブラウザ出力

26 ドキュメントオブジェクトにアクセス
参考コンテンツプログラムコード
<スクリプト言語="JavaScript">
var myURL = ドキュメント.URL;
window.alert(myURL);
</script>

27 HTMLを動的に出力する
参考コンテンツプログラムコード
<スクリプト言語="JavaScript">
document.write(“<p>このドキュメントに関する情報は次のとおりです:</p>”);
document.write(“<ul>”);
document.write(“<li>参照ドキュメント: “ + document.referrer + “</li>”);
document.write(“<li>ドメイン: “ + document.domain + “</li>”);
document.write("<li>URL: " + document.URL + "</li>");
document.write("</ul>");
</script>

28 改行を出力する
参考コンテンツプログラムコード
document.writeln(“<strong>a</strong>”);
document.writeln(“b”);

29 出力日
参考コンテンツプログラムコード
<スクリプト言語="JavaScript">
var thisDate = 新しい日付();
document.write(thisDate.toString());
</script>

30 日付のタイムゾーンを指定する
参考コンテンツプログラムコード
<スクリプト言語="JavaScript">
var myOffset = -2;
var currentDate = 新しい日付();
var userOffset = currentDate.getTimezoneOffset()/60;
var timeZoneDifference = userOffset - myOffset;
currentDate.setHours(currentDate.getHours() + timeZoneDifference);
document.write(「中央ヨーロッパの日時は次のとおりです:」 + currentDate.toLocaleString());
</script>

31 日付の出力形式を設定する
参考コンテンツプログラムコード
<スクリプト言語="JavaScript">
var thisDate = 新しい日付();
var thisTimeString = thisDate.getHours() + “:” + thisDate.getMinutes();
var thisDateString = thisDate.getFull Year() + “/” + thisDate.getMonth() + “/” + thisDate.getDate();
document.write(thisTimeString + " on " + thisDateString);
</script>

32 URLパラメータの読み取り
参考コンテンツプログラムコード
<スクリプト言語="JavaScript">
var urlParts = document.URL.split("?");
var パラメータパーツ = urlParts[1].split(“&”);
for (i = 0; i <parameterParts.length; i++) {
var ペアパーツ = パラメータパーツ[i].split("=");
var ペア名 = ペアパーツ[0];
var ペア値 = ペアパーツ[1];
document.write(pairName + " : " +pairValue );
}
</script>
まだ HTML はステートレスだと思いますか?

33 新しいドキュメントオブジェクトを開く
参考コンテンツプログラムコード
<スクリプト言語="JavaScript">
関数 newDocument() {
document.open();
document.write(“<p>これは新しいドキュメントです。</p>”);
document.close();
}
</script>

34 ページジャンプ
参考コンテンツプログラムコード
<スクリプト言語="JavaScript">
window.location = “http://www.x-force.cn/”;
</script>

35 Web ページの読み込み進行状況ウィンドウを追加します
参考コンテンツプログラムコード
<html>
<頭>
<script language='javaScript'>
var placeHolder = window.open('holder.html','placeholder','width=200,height=200');
</script>
<title>メインページ</title>
</head>
<body onLoad='placeHolder.close()'>
<p>これがメインページです</p>
</body>
</html>

JavaScript 3 については以上です: 画像

36 画像属性の読み取り
参考コンテンツプログラムコード
<img src="/”image1.jpg”” name="myImage">
<a href=”# ” onClick=”window.alert(document.myImage.width)”>幅</a>

37 画像の動的ロード
参考コンテンツプログラムコード
<スクリプト言語="JavaScript">
myImage = 新しい画像;
myImage.src = “Tellers1.jpg”;
</script>

38 簡単な画像置換
参考コンテンツプログラムコード
<スクリプト言語="JavaScript">
rollImage = 新しい画像;
rollImage.src = “rollImage1.jpg”;
デフォルトイメージ = 新しいイメージ;
デフォルト画像.src = “画像1.jpg”;
</script>
<a href="/"myUrl"" onMouseOver="document.myImage.src = rollImage.src;"
onMouseOut=”document.myImage.src =defaultImage.src;”>
<img src="/"image1.jpg"" name="myImage" width=100 height=100 border=0>

39 画像のランダム表示
参考コンテンツプログラムコード
<スクリプト言語="JavaScript">
var imageList = 新しい配列;
imageList[0] = "画像1.jpg";
imageList[1] = "画像2.jpg";
imageList[2] = "画像3.jpg";
imageList[3] = "image4.jpg";
var imageChoice = Math.floor(Math.random() * imageList.length);
document.write('<img src="' + imageList[imageChoice] + '">');
</script>

40 関数による画像置換実装
参考コンテンツプログラムコード
<スクリプト言語="JavaScript">
変数ソース = 0;
var 置換 = 1;
function createRollOver(originalImage,replacementImage) {
var imageArray = 新しい配列;
imageArray[ソース] = 新しい画像;
imageArray[ソース].src = オリジナル画像;
imageArray[置換] = 新しい画像;
imageArray[置換].src = 置換画像;
画像配列を返します。
}
var rollImage = createRollOver("image1.jpg","rollImage1.jpg");
</script>
<a href=”#” onMouseOver=”document.myImage1.src = rollImage1[replacement].src;”
onMouseOut=”document.myImage1.src = rollImage1[ソース].src;”>
<img src="/"image1.jpg"" width=100 name="myImage1" border=0>
</a>

41 スライドショーを作成する
参考コンテンツプログラムコード
<スクリプト言語="JavaScript">
var imageList = 新しい配列;
imageList[0] = 新しい画像;
imageList[0].src = “image1.jpg”;
imageList[1] = 新しい画像;
imageList[1].src = “image2.jpg”;
imageList[2] = 新しい画像;
imageList[2].src = “image3.jpg”;
imageList[3] = 新しい画像;
imageList[3].src = “image4.jpg”;
関数 slideShow(imageNumber) {
document.slideShow.src = imageList[画像番号].src;
画像番号 += 1;
if (imageNumber < imageList.length) {
window.setTimeout(“slideShow(” + imageNumber + “)”,3000);
}
}
</script>
</head>
<body onLoad="slideShow(0)">
<img src="/”image1.jpg"” width=100 name=”slideShow”>

ランダムな広告画像 42 枚
参考コンテンツプログラムコード
<スクリプト言語="JavaScript">
var imageList = 新しい配列;
imageList[0] = "画像1.jpg";
imageList[1] = "画像2.jpg";
imageList[2] = "画像3.jpg";
imageList[3] = "image4.jpg";
var urlList = 新しい配列;
urlList[0] = "http://some.host/";
urlList[1] = "http://another.host/";
urlList[2] = "http://somewhere.else/";
urlList[3] = "http://right.here/";
var imageChoice = Math.floor(Math.random() * imageList.length);
document.write('<a href="' + urlList[imageChoice] + '"><img src="' + imageList[imageChoice] + '"></a>');
</script>

JavaScript 4: Form

43 フォームの構成

は以上です

参考コンテンツプログラムコード
<form method=”post” action=”target.html” name=”thisForm”>
<input type=”text” name=”myText”>
<select name="mySelect">
<option value="1">最初の選択肢</option>
<option value=”2”>第 2 の選択肢</option>
</選択>
<br>
<input type=”submit” value=”Submit Me”>
</form>

44 フォーム内のテキストボックスの内容にアクセスする
参考コンテンツプログラムコード
<フォーム名="myForm">
<input type=”text” name=”myText”>
</form>
<a href='#' onClick='window.alert(document.myForm.myText.value);'>テキストフィールドのチェック</a>

45 テキストボックスの内容を動的にコピーする
参考コンテンツプログラムコード
<フォーム名="myForm">
テキストを入力します: <input type=”text” name=”myText”><br>
テキストのコピー: <input type=”text” name=”copyText”>
</form>
<a href=”#” onClick=”document.myForm.copyText.value =
document.myForm.myText.value;">テキストフィールドのコピー</a>

46 テキストボックス内の変更の検出
参考コンテンツプログラムコード
<フォーム名="myForm">
テキストを入力します: <input type=”text” name=”myText” onChange=”alert(this.value);">
</form>

47 選択した選択にアクセスします
参考コンテンツプログラムコード
<フォーム名="myForm">
<select name="mySelect">
<option value=”第一選択”>1</option>
<option value=”第 2 の選択”>2</option>
<option value=”第 3 の選択肢”>3</option>
</選択>
</form>
<a href='#' onClick='alert(document.myForm.mySelect.value);'>選択リストの確認</a>

48 選択項目を動的に追加する
参考コンテンツプログラムコード
<フォーム名="myForm">
<select name="mySelect">
<option value=”第一選択”>1</option>
<option value=”第 2 の選択”>2</option>
</選択>
</form>
<スクリプト言語="JavaScript">
document.myForm.mySelect.length++;
document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text = “3”;
document.myForm.mySelect.options[document.myForm.mySelect.length - 1].value = “第 3 の選択”;
</script>

49 フォームフィールドの検証
参考コンテンツプログラムコード
<スクリプト言語="JavaScript">
関数 checkField(フィールド) {
if (フィールド.値 == "") {
window.alert(“フィールドに値を入力する必要があります”);
フィールド.フォーカス();
}
}
</script>
<form name="myForm" action="target.html">
テキストフィールド: <input type="text" name="myField" onBlur="checkField(this)">
<br><input type=”submit”>
</form>

50 選択項目の確認
参考コンテンツプログラムコード
関数 checkList(選択) {
if (selection.length == 0) {
window.alert(“リストから選択する必要があります。”);
false を返します。
}
true を返します。
51

フォームのアクションを動的に変更する
参考コンテンツプログラムコード
<form name="myForm" action="login.html">
ユーザー名: <input type=”text” name=”ユーザー名”><br>
パスワード: <input type=”password” name=”password”><br>
<input type=”button” value=”Login” onClick=”this.form.submit();”>
<input type="button" value="Register" onClick="this.form.action = 'register.html'; this.form.submit();">
<input type="button" value="パスワードの取得" onClick="this.form.action = 'password.html'; this.form.submit();">
</form>

52 画像ボタンの使用
参考コンテンツプログラムコード
<form name="myForm" action="login.html">
ユーザー名: <input type=”text” name=”ユーザー名”><br>
パスワード: <input type=”password” name=”password”><br>
<input type="image" src="/"login.gif"" value="ログイン">
</form>

53 フォームデータの暗号化
参考コンテンツプログラムコード
<SCRIPT LANGUAGE='JavaScript'>
<!--
関数暗号化(アイテム) {
var newItem = '';
for (i=0; i < item.length; i++) {
newItem += item.charCodeAt(i) + '.';
}
newItem を返します。
}
関数 encryptForm(myForm) {
for (i=0; i < myForm.elements.length; i++) {
myForm.elements[i].value = encrypt(myForm.elements[i].value);
}
}

//-->
</スクリプト>
<form name='myForm' onSubmit='encryptForm(this);'>
テキストを入力してください: <input type=text name=myField><input type=submit>
</form>

JavaScript 5: ウィンドウとフレーム

54 ブラウザのステータスバーのテキストプロンプトを変更する
参考コンテンツプログラムコード
<スクリプト言語="JavaScript">
window.status = “新しいステータスメッセージ”;
</script>

55 ポップアップ確認プロンプトボックス
参考コンテンツプログラムコード
<スクリプト言語="JavaScript">
var userChoice = window.confirm(“OK またはキャンセルをクリックしてください”);
if (userChoice) {
document.write(“OK を選択しました”);
} それ以外 {
document.write(“キャンセルを選択しました”);
}
</script>

56 入力のプロンプト
参考コンテンツプログラムコード
<スクリプト言語="JavaScript">
var userName = window.prompt("名前を入力してください","ここに名前を入力してください");
document.write("あなたの名前は " + ユーザー名);
</script>

57 新しいウィンドウを開きます
引用された内容 //myNewWindow という名前の新しいブラウザウィンドウプログラムコードを開きます
<スクリプト言語="JavaScript">
window.open("http://www.liu21st.com/","myNewWindow");
</script>

58 新しいウィンドウのサイズを設定する
参考コンテンツプログラムコード
<スクリプト言語="JavaScript">
window.open("http://www.liu21st.com/","myNewWindow",'height=300,width=300');
</script>

59 新しいウィンドウの位置を設定する
参考コンテンツプログラムコード
<スクリプト言語="JavaScript">
window.open("http://www.liu21st.com/","myNewWindow",'height=300,width=300,left=200,screenX=200,top=100,screenY=100');
</script>

60 ツールバーとスクロールバーを表示するかどうか
参考コンテンツプログラムコード
<スクリプト言語="JavaScript">
window.open("http://www.x-force.cn/",toolbar=no, menubar=no);
</script>

61 新しいウィンドウのサイズを変更することはできますか?
参考コンテンツプログラムコード
<スクリプト言語="JavaScript">
window.open('http://www.x-force.cn/', 'myNewWindow', 'resizable=yes' );</script>

62 新しいドキュメントを現在のウィンドウにロードします
参考コンテンツプログラムコード
<a href='#' onClick='document.location = '125a.html';' >新しいドキュメントを開く</a>

63 ページのスクロール位置を設定する
参考コンテンツプログラムコード
<スクリプト言語="JavaScript">
if (document.all) { //IE ブラウザの場合は、scrollTop 属性を使用します
document.body.scrollTop = 200;
} else { //NetScape ブラウザの場合は、pageYOffset 属性を使用します
window.pageYOffset = 200;
}</script>

64 IE で全画面ウィンドウを開く
参考コンテンツプログラムコード
<a href='#' onClick=”window.open('http://www.devdao.com/','newWindow','fullScreen=yes');”>全画面ウィンドウを開く</a>

65 新規ウィンドウと親ウィンドウの操作
参考コンテンツプログラムコード
<スクリプト言語="JavaScript">
// 新しいウィンドウを定義する
var newWindow = window.open("128a.html","newWindow");
newWindow.close(); // 親ウィンドウで開いた新しいウィンドウを閉じます。
</script>親ウィンドウのプログラムコードを新しいウィンドウで閉じます。
window.opener.close()

66 新しいウィンドウにコンテンツを書き込みます
参考コンテンツプログラムコード
<スクリプト言語="JavaScript">
var newWindow = window.open("","newWindow");
newWindow.document.open();
newWindow.document.write(“これは新しいウィンドウです”);
newWIndow.document.close();
</script>

67 ページをフレームページにロードします
参考コンテンツプログラムコード
<frameset Cols=”50%,*”>
<frame name="frame1" src="/"135a.html"">
<frame name="frame2" src="/"about:blank"">
</フレームセット>
フレーム2のページをフレーム1にロードします
parent.frame2.document.location = “135b.html”;

68 フレームページ間でのスクリプトの共有
内容の引用frame1のhtmlファイルにスクリプトコードがある場合
関数 doAlert() {
window.alert(“フレーム 1 がロードされました”);
}

次に、フレーム 2 でメソッド

プログラムコードを

次のように呼び出すことができます。

<body onLoad="parent.frame1.doAlert();">
こちらはフレーム2です。
</body>

69 データ公開
参照コンテンツはフレームページ内のデータ項目を定義できるため、複数のフレーム内のページユーティリティコードでデータを使用できます。
<スクリプト言語="JavaScript">
varpersistentVariable = “これは永続的な値です”;
</script>
<frameset Cols=”50%,*”>
<frame name="frame1" src="/"138a.html"">
<frame name="frame2" src="/"138b.html"">
</frameset>

このようにして、変数persistentVariableはframe1とframe2の両方で使用できます。

70 フレームワークコードライブラリ
引用された内容上記のアイデアのいくつかによれば、非表示のフレームページをフレームセット全体のコードベースプログラム

コード

として使用できます。