ITメモ
JavaScript
「Javascript」の基礎知識
「Javascript」の使い方【Javascript】エラーチェックをする方法【Javascript】変数【Javascript】配列(Array)【Javascript】「DOM(Document Object Model)」の使い方【Javascript】関数 / Function【Javascript】条件分岐・繰り返し【Javascript】イベントハンドラー(Event Handler)【Javascript】文字の操作方法【Javascript】文字の検索方法【Javascript】スコープ【Javascript】ファイルの操作方法【Javascript】画像の操作方法【Javascript】情報を出力・チェックする方法【Javascript】ヒアドキュメントの使い方【Javascript】Built-in Object(ビルトインオブジェクト)【Javascript】ライブラリー / Library
Library
「Ajax」の使い方
Library「jQuery」
【jQuery】とは【jQuery】の書式【jQuery】「Javascript」にリンクさせる方法【jQuery】「Javascript」に記述する方法【jQuery】のオブジェクト【jQuery】「CSS」を参照・設定する方法【jQuery】「HTML」要素の情報を参照・設定する方法【jQuery】「HTML」タグを追加する方法【jQuery】ユーティリティ関数【jQuery】イベントアクションを設定する方法【jQuery】イベントオブジェクト「.on」の使い方【jQuery】読み込み完了してから実行する「.ready」の使い方【jQuery】「Ajax」を使う方法【jQuery】「エフェクト」「アニメーション」を使う方法
Reference
数字
【Javascrpt】計算に誤差が出る時の解決方法
ファイル読み込み
【Javascrpt】「XMLHttpRequest」コンストラクタ - サーバーのファイルを読み込む方法
イベント
【Javascrpt】ページ読み込み時に「Javascript」を実行する方法【Javascrpt】画像読み込みが完了してから、次の処理を実行する方法【Javascrpt】「addEventListener()」の使い方 - イベントが発生したのを検知して実行する方法
要素情報
【Javascrpt】HTMLタグの「class」属性値を取得、変更する方法【Javascrpt】「querySelector()」の使い方 - HTML要素の情報を参照・設定する方法【Javascrpt】「querySelectorAll()」の使い方 - 要素内の指定した子要素を参照・設定する方法【Javascrpt】「classList」プロパティ - HTMLタグ属性値「class」の情報を参照・確認・追加・削除する方法【Javascrpt】「getElementById()」の使い方 - HTML要素の情報を「ID名」で参照・設定する方法【Javascrpt】「getElemetnsByClassName()」の使い方 - HTML要素の情報を「クラス名」で参照・設定する方法【Javascrpt】「Node.Childnodes」の使い方 - 要素内の子要素を参照・設定する方法【Javascrpt】「ParentNode.children」の使い方 - 要素内の子要素を参照・設定する方法【Javascrpt】要素の配置位置を確認する方法
Style関連
スタイル属性(色・線・大きさなど)を参照・変更する方法【Javascript】「getPropertyValue」メソッド - 指定されたCSSプロパティの値などを取得する【Javascript】「getComputedStyle」メソッド - CSSを適用したスタイルを参照する
ページ関連
【Javascript】Webページのタイトルを変更する方法【Javascript】「モニター」情報を取得する方法【Javascript】「ブラウザ」情報を取得する方法【Javascript】「ページ」情報を取得する方法【Javascript】「イベント」情報を取得する方法【Javascript】「マウス」情報を取得する方法
サイズ関連
【Javascript】要素の縦・横サイズを参照・変更する方法【Javascript】「モニター」「ブラウザ」のサイズ情報を取得する方法
端末情報
【Javascript】スマートフォンからのアクセスを識別する方法





【Javascript】文字の操作方法



Javascriptの中で、文字として出力などをしたい場合、
普通に、文字を変数などに代入してもエラーとなります。
文字として扱いたい場合、必ず「ダブルクォテーション(")」「シングルクォテーション(')」で囲む必要がある。

また、文字によっては、エスケープ文字を利用しなければならず、注意が必要。
「ダブルクォテーション(")」を文字として扱いたい場合、「\"」と記述しなければならない。



INDEX


文字列の使用方法
「文字列(String)」オブジェクトのメソッド
文字列の数字を数値に変換する方法
要素内のテキストを変更する
「length」メソッドの使い方
「charAt」メソッドの使い方
「substring」メソッドの使い方
「slice」メソッドの使い方
「substr」メソッドの使い方
「split」メソッドの使い方
「concat」メソッドの使い方
「replace」メソッドの使い方
「toUpperCase」メソッドの使い方
「toLowerCase」メソッドの使い方
「indexOf」メソッド(文字検索)の使い方
「lastIndexOf」メソッドの使い方
「match」メソッドの使い方
「search」メソッドの使い方
「charCodeAt」メソッドの使い方
「fromCharCode」メソッドの使い方
文字列のタグ付け方法




文字列の使用方法




文字列の書式


JavaScriptでは、文字列をダブルクォーテーション(")またはシングルクォーテーション(')で囲んで使用する。
「文字列プリミティブ」とビルトイン関数の「文字列オブジェクト「String()」」とは別物。

//文字列プリミティブ
xx = "ABCDEFG";
yy = 'ABCDEFG';


//文字列オブジェクト
string = new String(string)

xx = new String("ABC");




■ エスケープ文字
\nニューライン(改行文字)
\fフォームフィード
\bバックスペース
\rキャリッジリターン(復帰文字)
\tタブ文字
\'シングルクォート(')
\"ダブルクォート(")
\\バックスラッシュ(\)
\nnn8進数による文字コード指定(例えば "A" は "\101")
\xnn16進数による文字コード指定(例えば "A" は "\x41")
\unnnnUnicode文字(例えば "あ" は "\u3042")


Back



「文字列(String)」オブジェクトのメソッド


変数に文字列を代入=文字列オブジェクト
変数にStringオブジェクト生成を利用して代入=「String」オブジェクト

同じ文字でも、代入の仕方で、型が異なる。
比較演算子での比較に注意。



「String」オブジェクトのメソッド

string=文字列、もしくは、文字列の変数。

string = new String(string)文字列オブジェクトを生成
string.length文字列の長さ確認
文字の取り出し
string.charAt(n)stringのn番目の文字を返す
string.substring(from [, to])stringのfrom~to-1文字目の文字列を返す
string.slice(from [, to])stringのfrom~to-1文字目の文字列を返す
string.substr(from [, len])stringのfrom番目からlen文字分の文字列を返す
文字検索
string.indexOf(key [, from])string の from番目から後方に文字検索。
string.lastIndexOf(key [, from])string の from番目から前方に文字検索
string.match(regexp)正規表現 regexp に最初にマッチした部分の文字列を返す
string.search(regexp)string から regexp にマッチする部分の位置を返す
string.charCodeAt(n)string のn番目の文字のコード
分割と連結
string.split([sep [, limit]])stringをsepを区切り文字として分割し配列にして返す
string.concat(string2)stringにstring2を連結
文字の置き換え
string.replace(regexp, newString)stringの内、regexpにマッチする部分を newStringに置き換え
String.fromCharCode(num1, ..., numN)文字コードを文字列に変換
string.toUpperCase()stringを大文字に変換した文字列を返す。
string.toLowerCase()stringを小文字に変換した文字列を返す。
文字列のタグ付け
string.bold()太字
string.italics()斜体
string.fixed()固定幅フォント
string.big()大きなフォント
string.small()小さなフォント
string.blink()ブリンク
string.strike()打ち消し線
string.sup()上付き
string.sub()下付き
string.fontcolor(color)赤い文字
string.fontsize(size)フォントサイズ7の文字
string.anchor(name)アンカー
string.link(name)リンク


Back



文字列の数字を数値に変換する方法


プログラムにおいて、
同じ数字でも、型が異なると、
それは違った値となる。
「Javascript」においても同じで、
数値は「number型」で、文字として扱われている数字は「テキスト」。
数値オブジェクトとして代入した数値は「object型」となっています。

比較演算子で比較すると、すべて異なる値として判断されるので、
数値として判断・計算したい場合は、
文字列としての数値は、数値に変換する必要がある。

数値=普通に変数に代入した数値=「number型」
数値オブジェクト=Numberオブジェクトを利用して代入した数値=「object型」


文字列として扱われている数字を、
数値に変換する方法は、
・parseInt("文字列の数字")
・parseFloat("文字列の数字")
・Number("文字列の数字")
・文字列の数字 - 0
などの方法がある。
一番簡単なのは、計算式の「文字列の数字 - 0」が簡単で良く使います。


文字列数字を数値に変換するサンプルコード

文字列を数値に変換するには parseInt()、parseFloat()、Number() を用いるか、0 を減算することによっても、変換可能。

str = "123";
num1 = parseInt(str);
num2 = parseFloat(str);
num3 = Number(str);
num4 = str - 0;


Back



要素内のテキストを変更する




テキスト情報を取得できる「Javascript」


「innerHTML」

「innerHTML」は、要素内のテキスト情報を取得・変更することができる。
要素をIDなどで取得した上で、「innerHTML」を使用することで、実行できる。

「childNodes」

「childNodes」は、要素と子要素の情報を取得でき、要素のテキスト内容も含まれるので、 テキスト情報の取得もできる。
要素のIDを取得した上で、「childNodes」を実行すると、要素と子要素の情報が配列形式で格納される。



テキスト情報を取得するサンプルコード


「innerHTML」を使って要素内のテキストを取得する

var GetText=window.document.getElementById('指定したいID名').innerHTML;

「innerHTML」を使って要素内のテキストを変更する

window.document.getElementById('指定したいID名').innerHTML="新しいテキスト";


「getElementById('ID名').childNodes」を使ってのテキスト抽出


テキスト抽出 (要素ノードはnull 、テキストノードはノードの文字列)


//子要素の要素と要素内のテキストを抽出する
var Get_Childnodes=window.document.getElementById('ID名').childNodes;

//要素のテキストを取得
var NodeText=Get_Childrens[0].nodeValue



Back



「length」メソッドの使い方


string.length

文字列の長さ
文字列の長さ確認。

str = "あいうえお";
alert("これは" + str.length + "文字です。");


Back



「charAt」メソッドの使い方


string.charAt(n)

文字列の部分取り出し
stringのn番目の文字を返す。

str = "ABCDEFG";
for (i = 0; i < str.length; i++) {
document.write("[" + str.charAt(i) + "]");
}


Back



「substring」メソッドの使い方


string.substring(from [, to])

文字列の部分取り出し
stringのfrom~to - 1文字目の文字列を返す。
負の値を指定すると 0 番目と見なす。
toを省略すると残りのすべてを返す。

"ABCDEFG".substring(2, 4); // "CD" を返す


Back



「slice」メソッドの使い方


string.slice(from [, to])

文字列の部分取り出し
stringのfrom~to - 1文字目の文字列を返す。
to を省略すると残りのすべてを返す。

"ABCDEFG".slice(2, 4); // "CD" を返す
"ABCDEFG".slice(2); // "CDEFG" を返す


Back



「substr」メソッドの使い方


string.substr(from [, len])

文字列の部分取り出し
stringのfrom番目からlen文字分の文字列を返す。
from に負の値を指定すると後ろから数える。
len を省略すると残りのすべてを返す。

"ABCDEFG".substr(2, 4); // "CDEF" を返す


Back



「split」メソッドの使い方


string.split([sep [, limit]])

文字列の分割と連結
stringをsepを区切り文字として分割し、その配列を返す。
limitは配列の個数を制限。
sepを省略するとstring全体を唯一の要素とする配列を返す。

a = "23:59:59".split(":");
document.write(a[0] + "時" + a[1] + "分" + a[2] + "秒");


Back



「concat」メソッドの使い方


string.concat(string2)

文字列の分割と連結
stringにstring2を連結した物を返す。string + string2 と同義。

xx = "ABC".concat("DEF"); // xx = "ABC" + "DEF"; と同じ


Back



「replace」メソッドの使い方


string.replace(regexp, newString)

文字列の置換
stringの内、regexpにマッチする部分をnewStringに置き換えたものを返す。

xx1 = "This is a pen.".replace("pen", "book");
xx2 = "AB".replace("(.)(.)",
function(str, p1, p2) {
return(p2 + p1);
});


alert( "I learn HTML".replace(/HTML/, "$& and JavaScript") ); // I learn HTML and JavaScript

記号置換文字列での動作
$&一致したもの全体を挿入します
$`一致の前の部分文字列を挿入します
$'一致した後の部分文字列を挿入します
$nn が1-2桁の数値の場合、n番目の括弧の内容を挿入します。詳細についてはチャプター キャプチャグループ で説明します
$<name>指定された name の括弧の中身を挿入します。詳細についてはチャプター キャプチャグループ で説明します
$$文字 $ を挿入します


Back



「toUpperCase」メソッドの使い方


string.toUpperCase()

文字列の置換
stringを大文字に変換した文字列を返す。

xx1 = "Abc".toUpperCase(); // "ABC" を返す
xx2 = "Abc".toLowerCase(); // "abc" を返す


Back



「toLowerCase」メソッドの使い方


string.toLowerCase()

文字列の置換
stringを小文字に変換した文字列を返す。

xx1 = "Abc".toUpperCase(); // "ABC" を返す
xx2 = "Abc".toLowerCase(); // "abc" を返す


Back



「indexOf」メソッドの使い方


「indexOf()」メソッドは、
JavaScriptで、文字列の中に、指定文字列があるかどうかを調べるメソッドが「indexOf」メソッド。

携帯電話・スマートフォンを検出するときなどに使われることが多い。
アクセスした端末情報を取得し、その中に携帯電話の名前があれば、PCと携帯の振り分けが簡単にできるようになる。


「indexOf()」メソッドの書式


string.indexOf(key [, from])

文字列の検索
stringのfrom番目から後方に検索し、最初にkeyが現れる位置を、見つからない場合は-1を返す。

xx = "ABCABC".indexOf("C"); // 2を返す
xx = "ABCABC".indexOf("C", 3); // 5を返す
オブジェクト.indexOf("検索文字列",開始位置(数字));
オブジェクト.indexOf("検索文字列");
変数名.indexOf("検索文字列",3);
変数名.indexOf("検索文字列");

オブジェクトで取得した内容や、文字列を格納した変数から、検索文字列を検索する。


開始位置:記載がなければ最初から。
返り値:検索文字列が見つかった最初の文字位置。見つからない場合は「-1」。




JavaScriptでは、「navigator.userAgent」でアクセスしている端末の情報を取得できる。

あなたの「navigator.userAgent」の内容


取得した「navigator.userAgent」の情報から、「indexOf()」メソッドを利用してアクセス端末を特定する。
指定した文字列があれば、指定文字列の位置。
指定文字列がなければ「-1」を返す。


下記のように変数に値を格納して、条件分岐をすれば、PCかスマートフォンかの判定が可能になる。

if(navigator.userAgent.indexOf('iPhone')>0 || navigator.userAgent.indexOf('iPad')>0 || navigator.userAgent.indexOf('iPod')>0 || navigator.userAgent.indexOf('Android')>0){
携帯・スマートフォンに実行したいプログラミング。
}

if(navigator.userAgent.indexOf('Macintosh')>0 || navigator.userAgent.indexOf('Windows')>0 || navigator.userAgent.indexOf('Linux')>0){
PCに実行したいプログラミング。
}



Back



「lastIndexOf」メソッドの使い方


string.lastIndexOf(key [, from])

文字列の検索
stringのfrom番目から前方に、最初にkeyが現れる位置を、見つからない場合は-1を返す。

fileName = "xxx.gif";
if ((n = fileName.lastIndexOf(".")) != -1) {
ext = fileName.substring(n);
}


Back



「match」メソッドの使い方


string.match(regexp)

文字列のマッチング
正規表現 regexp に最初にマッチした文字列を返す。
マッチしなかった時はnullを返す。

if ("ABCDEFG".match(/def/i)) {
alert("Match");
}


Back



「search」メソッドの使い方


string.search(regexp)

文字列のマッチング
stringからregexpにマッチする部分の位置を返す。
見つからなければ -1 を返す。

if ("ABCDEFG".search(/def/i) != -1) {
alert("Match");
}


Back



「charCodeAt」メソッドの使い方


string.charCodeAt(n)

文字と文字コードの変換
stringのn番目の文字のコードを返す。

c1 = "ABC".charCodeAt(0); // "A"のASCII文字コード65を返す
c2 = "あ".charCodeAt(0); // ブラウザによって動作が異なる


Back



「fromCharCode」メソッドの使い方


String.fromCharCode(num1, ..., numN)

文字と文字コードの変換
文字コード num1, ..., numN で表される文字列を返す。

str = String.fromCharCode(0x41, 0x42, 0x43);
alert(str); // "ABC" が表示


Back



文字列のタグ付け方法


文字列に「タグ付け」する書式

・string.bold() - 太字(<b>)
・string.italics() - 斜体(<i>)
・string.fixed() - 固定幅フォント(<tt>)
・string.big() - 大きなフォント(<big>)
・string.small() - 小さなフォント(<small>)
・string.blink() - ブリンク(<blink>)
・string.strike() - 打ち消し線(<strike>)
・string.sup() - 上付き(<sup>)
・string.sub() - 下付き(<sub>)
・string.fontcolor(color) - 赤い文字(<font color=color>)
・string.fontsize(size) - フォントサイズ7の文字(<font size=size>)
・string.anchor(name) - アンカー(<a name=name>)
・string.link(name) - リンク(<a href=name>)


それぞれ、「string」で指定した文字列を
・<b>
・<i>
・<tt>
・<big>
・<small>
・<blink>
・<strike>
・<sup>
・<sub>
・<font color=color>
・<font size=size>
・<a name=name>
・<a href=name>
の「開始タグ」「終了タグ」で囲んだ文字列を返します。


サンプルコード

・document.write("太字".bold());
・document.write("斜体".italics());
・document.write("固定幅フォント".fixed());
・document.write("大きなフォント".big());
・document.write("小さなフォント".small());
・document.write("ブリンク".blink());
・document.write("打ち消し線".strike());
・document.write("上付き".sup());
・document.write("下付き".sub());
・document.write("赤い文字".fontcolor("red"));
・document.write("フォントサイズ7の文字".fontsize(7));
・document.write("アンカー".anchor("xxx"));
・document.write("リンク".link("index.html"));


Back