JavaScriptで困った時に役立つ逆引きリファレンス

JavaScriptで困った時に役立つ逆引きリファレンスを掲載しています。様々な内容を掲載していますので、困った時のリファレンスとしてご利用頂けます。


このサイトについて

当サイトは、JavaScriptのことをまとめているサイトです。

ゆるりと更新しています♪



当サイトへようこそ♪

このページはJavaScriptを中心にいろいろなテクニックを紹介しています。
JavaScriptを使いたいけどどうすればいいのという初心者からJavaScriptを使って
ホームページを作っているけどこんなことできないかなあという中・上級者の方まで
JavaScriptについて興味のある方のお役に立てるページです。

JavaScriptとは?どういうもの?

「JavaScript」とは、ブラウザ上で動作するプログラムを作成することができるプログラム言語です。

元々ブラウザで動作する言語として普及しましたが、この頃ではサーバーサイドで動作するJavaScriptもあります。

JavaScriptをつかえば、HTMLやCSSだけでは実現できないアニメーションやこのほかブラウザ上で動作するフォームの動作や発動のタイミングなどの処理を実装することができます。

アニメーションでは、CSSの値を随時更新したり、画像をリアルタイムにすり替えたり、表示している内容そのものを変更することができます。

このほかフォーム送信前にエラーメッセージを表示したりと、JavaScriptの使い方は様々です。

コメントの書き方

コメントの書き方には。1行のみ有効なコメントや複数行に渡って有効となるコメントがあります。
// は、1行のみ有効なコメントです。/* ~ */ は、複数行に渡り有効なコメントです。

<script><!--
// ここは、1行コメントです。

/*
ここは、複数行にまたがるコメントです。
ここは、複数行にまたがるコメントです。
*/

// --></script>

未対応のブラウザへの対処方法

未対応のブラウザへの対処は以下のとおりです。
・JavaScript に未対応の場合にJavaScriptのコードがエラー表示されてしまうため、JavaScript のコードをHTMLのコメントアウトで囲い画面表示されないようにします。
・JavaScript をサポートしていないブラウザの場合にメッセージを表示するようにするため、<noscript>~</noscript> の間メッセージを記載します。

<script type="text/javascript">
<!--
alert("ようこそ!");
// -->
</script>
<noscript>
JavaScript対応ブラウザを使用してください。
</noscript>

文字列の改行コードを削除する - replace()

replace()を使用した、改行コード「\r\n」「\n」を削除するサンプルを記載します。
以下の例では、改行コードを空の文字列を置換しています。
 

<script type="text/javascript">
<!--
var test = "hello!\nhello!";
test = test.replace(/\r?\n/g,"");
// -->
</script>

文字の文字数をカウントする - lengthプロパティー

lengthプロパティーを使用すると文字の文字数をカウントすることができます。

<script type="text/javascript">
<!--
var test = "hello!";

test_count = test.length;
alert(test_count);
// -->
</script>

◆実行結果
6

指定した文字を削除する - replace()

replace()メソッドを使用して、指定した文字列を削除することができます。

gは、global match(グローバルマッチ)のi意味で、「条件に合う全ての対象を置換する」という意味です。

var text = "こんにちは!" ;

// 置換を実行
var result = text.replace( /!/g , "" );

◆実行結果
こんにちは

指定した文字を置換する - replace()

String.replace()メソッドで文字列を置換することができます。
第一引数には、置換前の文字を第二引数には、置換後の文字列を指定します。

var value = "こんにちわ";

// わ→は 置換
var result = value.replace("わ","は");

前後の空白を削除する(正規表現版)

Javascriptでは、1.8.1 から String.trim()メソッドが実装されて前後の空白を削除することができます。
これ以前は、正規表現を使用して前後の空白を削除することができます。

string.replace(/^\s+|\s+$/g,'');

前後の空白を削除する - String.trim()

trim()メソッドで前後の空白を削除することができます。
Javascriptでは、1.8.1 から String.trim()メソッドが実装されています。

" hello! ".trim();// "hello!"

文字列を連結する(+演算子)

+演算子を使用すると文字列を連結することができます。

var aisatsu = "Hello, " + "World.";

console.log(aisatsu);

//Hello, World.

ステータスバーに文字列を表示する - window.status

window.statusでステータスバーに文字列を表示することができます。

<script type="text/javascript">
<!--
window.status = "おはようございます"; 
// -->
</script>

ウインドウの上端からの位置を取得 - window.screenY

window.screenYでウインドウの上端からの位置を取得することができます。

<script type="text/javascript">
<!--
alert(window.screenY);
// -->
</script>

※IE9以前は、screenX、screenYをサポートしていません。


ウインドウの左端からの位置を取得 - window.screenX

window.screenXでウインドウの左端からの位置を取得することができます。

<script type="text/javascript">
<!--
alert(window.screenX);
// -->
</script>

※IE9以前は、screenX、screenYをサポートしていません。


ウィンドウ外側の幅を取得する - window.outerWidth

window.outerWidthでウインドウ外側の幅を取得することができます。
 

<script type="text/javascript">
<!--
alert(window.outerWidth);
// -->
</script>

ウィンドウ外側の高さを取得する - window.outerHeight

window.outerHeightでウインドウ外側の高さを取得することができます。

<script type="text/javascript">
<!--
alert(window.outerHeight);
// -->
</script>

ウィンドウ内部の幅をを取得する - window.innerWidth

window.innerWidthでウインドウ内部の幅を取得することができます。
 

<script type="text/javascript">
<!--
alert(window.innerWidth);
// -->
</script>
 

ウィンドウ内部の高さを取得する - window.innerHeight

window.innerHeightでウインドウ内部の高さを取得することができます。

<script type="text/javascript">
<!--
alert(window.innerHeight);
// -->
</script>

入力ダイアログを出力する - window.prompt

window.prompt を使用すると、入力ダイアログを出力することができます。
 

<script type="text/javascript">
<!--
var sexName =prompt("あなたの性別は?","男性"); 
if (sexName!=null && sexName!="") { 
	document.write(sexName+"向けの内容を表示しますね!"); 
}
// -->
</script>

確認ダイアログを出力する - window.confirm

window.confirmを使用すると、確認ダイアログを出力することができます。
確認ダイアログは、はいとキャンセルが表示されている確認メッセージのことです。

<script type="text/javascript">
<!--
var result=confirm("本当によいですか?") 
if (result==true) { 
	alert("はいを押しましたね!");
} else { 
	alert("キャンセルを押しましたね!") 
} 
// -->
</script>

文字列をbase64エンコードした値を得る - window.btoa

window.btoa を使用すると、文字列をbase64エンコードした値を取得することができます。

<script type="text/javascript">
<!--
alert(window.btoa("文字列"));
// -->
</script>

文字列をbase64デコードする - window.atob

window.atob を使用すると、文字列をbase64デコードすることができます。

<script type="text/javascript">
<!--
alert(window.atob("base64エンコード済み文字列"));
// -->
</script>

ステータスバーでスクロール

ステータスバーでスクロールするスクリプトを記載します。

<SCRIPT LANGUAGE="JavaScript">

    var stcnt



    function init() {

	stcnt = 0;

	blnk = "                                                       ";

	msg = blnk + document.forms[0].indata.value;

	scr()

    }



    function scr() {

	stcnt = stcnt + 2;

	if(stcnt >= msg.length) {stcnt = 0}

	str = msg.substring(stcnt, msg.length);

	window.status = str;

	timeID = window.setTimeout("scr()",100);

    }

</SCRIPT>

※ポイント
文字を切り取る
str = msg.substring(stcnt, msg.length);
stcntは文字を取り出す先頭位置です。

一定時間でScriptを起動する
timeID = window.setTimeout("scr()",100);
100は1秒です。


テキストボックスでスクロール

テキストボックスでスクロールするサンプルスクリプトを記載します。

<SCRIPT LANGUAGE="JavaScript">

    var stcnt



    function init() {

	stcnt = 0;

	blnk = "                                                       ";

	msg = blnk + document.forms[0].indata.value;

	scr()

    }



    function scr() {

	stcnt = stcnt + 2;

	if(stcnt >= msg.length) {stcnt = 0}

	str = msg.substring(stcnt, msg.length);

	document.forms[0].output.value = str;

	timeID = window.setTimeout("scr()",100);

    }

</SCRIPT>

※ポイント
文字を切り取る
str = msg.substring(stcnt, msg.length);
stcntは文字を取り出す先頭位置です。

一定時間でScriptを起動する
timeID = window.setTimeout("scr()",100);
100は1秒です。


アラートを出力する - alert()関数

alert()関数を使用するとアラートを出力することができます。

<script>

alert("Hello World");

</script>

このページの上へ


応援よろしくお願いします!

お問い合わせは、メールにて承っております。
メール:masahiro801[at]hotmail.com ※[at]を@に置き換えてくださいね♪
JavaScriptで困った時に役立つ逆引きリファレンス