javascript 入門講座目次

Boolean 演算子 ===と==の違い javascript

RegExp 正規表現 javascript

hello world javascript

プログラミングするなら
誰もが知ってるおまじない
hello world

とりあえずボタンを押したら
アラートメッセージが表示されるプログラムを
解説します。

htmlはご存知ということで
書いていきます。

まずはheadの中にjavascriptを書きますよと
お知らせしてあげます。

イベントは直接要素に書くのと
関数を呼び出す方法がありますが
関数を呼び出す方法で書いていきます。

関数には自分で作成する関数と
javascriptで定義されている
関数があります。

自分で作成する関数の定義

function 関数名(){
ここに処理を書く
}

今回はjavascriptで定義されるalert関数
alert(“文字列”);

プログラミングは言語によりますが
文字列は””でくくります。

これだけなら関数を定義しただけなので
何も起こりません。

イベントを紐付けましょう。

イベント名=”関数名()”

onClickはクリックイベントで
javascriptで定義されています。

イベントはいろいろありますので
時間があれば調べてみて
下さいな。

簡単でしたね。
関数はいろいろありますので
呼び出して使ってください。

プログラムの醍醐味は
モノ作りだと私は考えています。

いろいろ自分なりに仕様を考えて
プログラミングを作成して見てください。

勘違いから動かなくて失敗してからの
動いた時は大変嬉しく感じますね。

サンプルソース

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

</body>
<html>

実行結果はようこそ helloworldと表示されます。

var javascript

javascriptの変数の宣言は
var を使います。

変数の宣言
var 変数名;

変数を複数宣言

var 変数名,変数名;
コンマでつなぎます

変数の宣言と同時に代入

var 変数名 = 値;

スコープは関数の中だと
関数の中で

関数の外だとグローバルで使える感じですね。

変数の型ですがvarは何でもいけますね。
言語によりますが宣言時に型を宣言するものなんですが。

データ型は大きく分けてプリミティブ型と参照型があります。

プリミティブ型
数値
文字列
論理値
null
未定義値

参照型
オブジェクト
配列
関数

未定義値はundefinedと言って変数宣言時に値を入れるまでは
undefinedになります。

数字や16進数はそのまま書けばいいです。
var a;
a= 12;

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

alert(a);
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=”helloworld()”>
</form>

</body>
<html>

実行結果は10

文字列は’か”でくくります。

var a;
a= “12”;

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

alert(a);
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=”helloworld()”>
</form>

</body>
<html>

実行結果はこんにちは

論理値はtrueとfalseがあります。

全て入るので数値の1と代入してから
文字列のにーが代入出来てしまう仕様です。

時間と日付がないと思いますよね。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

alert(a);
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=”helloworld()”>
</form>

</body>
<html>

結論から言うと参照型を使用してます。

既存のオブジェクトを使用しているということです。

ビルトインオブジェクトとはjavascriptが用意してくれているオブジェクトです。

typeof javascript

データ型を調べるにはtypeof演算子を使います。

使い方
typeof 変数

サンプルソース

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

var a,b,c,d,e,f;

a = 1;
a = typeof a;
b = “str”
c = true;
d = function(){return 1};
e = {a,b,c};

alert(a + ‘/’ + typeof b + ‘/’ + typeof c + ‘/’+ typeof d + ‘/’+ typeof e + ‘/’+ typeof f);

}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=”helloworld()”>
</form>

</body>
<html>

実行結果は
number/string/boolean/function/object/undefined

戻り値は
number　数字
string　文字列
boolean　論理型
function　関数
object　オブジェクト
undefined　未定義

その他の戻り値は
シンボルとか
xmlオブジェクトとか
あるみたいですね。

objectが曲者でして
ビルトインオブジェクトとか
全部オブジェクトになってしまいます。

dateとか配列とかは
どう区別するんだと思います。

二つ方法があるみたいです。
標準のオブジェクトはObject.prototype.toStgingを使用します。
自分で作成したオブジェクトはinstanceof演算子とconstructorの併用する方法です。

ある程度prototypeの理解が必要なので
ここでは説明はしません。

簡単なものからやっていけばいいですし。
一歩ずつ進んでいきましょう。

そこまで型判定しないいけないプログラムも
あまりありませんし必要あるのが
疑問ですね。

だいだいそんなに型に厳密な言語でもありませんしね。
ここではデータ型の理解を深める為に書いてみました。

どうしても必要だという人はググればろいろでできますよ。

私はその必要性を感じないですが。

配列 array javascript

配列には配列リテラルとarrayがあります。

配列リテラル

配列リテラルとは[]で配列を作成します。

var 配列名 = [値,値];

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

alert(ary);
}
</script>
</head>
<body>
<form>

実行結果は123です。

配列の添え字は0から始まります。

アクセスするには

配列名[添え字]

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

alert(ary[0]);
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=”helloworld()”>
</form>

</body>
<html>

実行結果は1です。

値の変更は

配列名[添え字] = 値;

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

</body>
<html>

二次元配列

結論から言うとjavascriptには二次元配列はありません。
二次元配列みたいなこうぞうにすることはできます。
どういうことかというと配列に配列が格納できるみたいです。

var a = [1, 2, 3, 4];
var b = [1, 2, 3, 4];

var ary = [a, b,];

aとbの配列をaryの配列に代入してます。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

</body>
<html>

実行結果は1,2,3,4,1,2,3,4です。

連想配列

連想配列とは添え字の番号が文字の表現します。

<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

実行結果はtanaka99です。

lengthプロパティ

配列の要素数です。

変数名.length

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

alert(a.length );
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=”helloworld()”>
</form>

</body>
<html>

実行結果は2です。

連想配列はインデックス数ではないので使用しないほうがいいでしょう。

popとpush

pushは配列の最後の要素を追加します。

戻り値は要素数です。

配列名.push(値);

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

</body>
<html>

実行結果は1,2,3です。

popは配列の最後を削除します。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

</body>
<html>

実行結果は1です。

戻り値は削除された要素です。

sort

sortは配列要素を並び替えます。

配列名.sort();

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

</body>
<html>

実行結果は0,1,200です。

もしソートしない場合は配列の中身を見直してください。

同じ値を入力モードを意識して再入力することをお勧めします。

join

joinは値の区切りを指定します。

戻り値として文字列を返す。

デフォルトでは,です。

戻り値を格納する変数 = 配列名.join(“区切り文字”)

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

alert(str);
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=”helloworld()”>
</form>

</body>
<html>

実行結果は0/200/1です。

reverse

reverseは要素を逆に並べ替えます。

数値の順番を逆に並べ替えではありません。

配列名.reverse();

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

alert(a);
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=”helloworld()”>
</form>

</body>
<html>

実行結果は0,200,1です。

Array

ArrayはArrayオブジェクトを使用します。

var 変数名 = new Array;

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

</body>
<html>

実行結果は1,2,0です。

if else javascript

if文もし～なら条件を満たしているか判定しますね。

if

それでは書いていきましょう。

if (条件){
処理
}

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

var a = 7;

if (a>6){
alert(a);
}

</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=”helloworld()”>
</form>

</body>
<html>

実行結果は7です。

簡単ですね。

条件に演算子を使って条件を作っていくのが基本ですね。

以下　以上　未満　超えるには注意してください。

それでは6以下の値だったらどうすればいいのか。

if else

elseとは他という意味ですね。

if (条件){
処理
}

else{
処理
}

先ほどの文にelseを後ろに追加しました。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

if (a>6){
alert(a);
}
else{
alert(“aは6以下です”);
}

}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=”helloworld()”>
</form>

</body>
<html>

実行結果はaは6以下です。

6以下とは大雑把な作りですねw

他の条件を付けたいですね。

else if

if (条件){
処理
}

else if (条件){
処理
}

else{
処理
}

とりあえずマイナスか判定してから条件を判定するサンプル

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

if (a<0){
alert(“エラーマイナスの値です”);
}

else if(a>6){
alert(a);

}

else{
alert(“aは6以下です”);
}

}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=”helloworld()”>
</form>

</body>
<html>

実行結果は7です。

ifのネスト

あますオススメしませんがif文を入れ子することができます。

if (条件){

if (条件){
処理
}

else{
処理
}
}

else{
処理
}

ワードプレスの仕様でタブが入ってなくて見にくいとは思います。

例えばaとbを満たしている時とか初心者はこう書いてしますのではないでしょうか？

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

if (a == 7){
if (b == 3){

alert(“条件を満たしました”);
}

else{
alert(“条件を満たしていません”);
}

}

else{
alert(“条件を満たしていません”);
}

}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=”helloworld()”>
</form>

</body>
<html>

実行結果は条件を満たしましたです。

==で比較しています。

vbでは=でも書けますが普通の言語は代入として判定して条件を満たしてしまいます。

ややこしいですね。

この場合だと論理演算子の&&を使いますね。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

if (a == 7 && b ==3){

alert(“条件を満たしました”);

}

else{
alert(“条件を満たしていません”);
}

}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=”helloworld()”>
</form>

</body>
<html>

実行結果は条件を満たしましたです。

他にもあるので色々試してください。

for in javascript

for文は処理を繰り返す。

for (初期値;条件式;;インクリメント他){

処理

}

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

alert(i );

}
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=”helloworld()”>
</form>

</body>
<html>

実行結果は０から７まで表示されます。

for 多重ループ

for文の入れ子ですね。

for (初期値;条件式;;インクリメント他){

処理

for (初期値;条件式;;インクリメント他){

処理

}

}

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

alert(“iの値” + i);

for (j=0;j<2;j++){

alert(“iの値” + i + “jの値” + j);
}

}

}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=”helloworld()”>
</form>

</body>
<html>

実行結果は

iの値0
iの値0jの値0
iの値0jの値1
iの値1
iの値1jの値0
iの値1jの値1

です。

for in

オブジェクト等を繰り返すことができます。

for (変数名 in オブジェクト){

処理

}

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

for (i in ary){

alert(ary[i]);

}
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=”helloworld()”>
</form>

</body>
<html>

実行結果は1から3まで表示されます。

do while javascript

whileの意味はする間とかする限りです。
つまり条件式が満たされている間繰り返します。

while (条件式){
処理
}

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

var i =3;
while (i < 9){
alert(i);
i++;
}
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=”helloworld()”>
</form>

</body>
<html>

実行結果は3から8まで繰り返します。

もしインクリメントを書き忘れたらこの場合は無限ループになります。

do while

do whileは必ず1回は処理を実行します。

do{
処理
}while (条件式)

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

var i =3;
do{
alert(i);
i++;
}while (i < 9)
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=”helloworld()”>
</form>

</body>
<html>

実行結果は3から8まで繰り返します。

条件式が後ろにありますよね。

その時点で処理を判定しています。

条件式に満たさないとwhileは実行されませんが

do whileはdoの1回だけ実行されます。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

var i =10;
do{
alert(i);
i++;
}while (i < 9)
}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=”helloworld()”>
</form>

</body>
<html>

実行結果は10になります。

switch javascript

switchは一つの値に複数の処理を作るときに使います。

if文でも書けますがswitchのほうがいいです。

switch(式){
case 値:
break;
case 値:
default:
break;

}

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

var i =0;
switch(i){
case 1:
alert(i);
break;
case 2:
alert(i);
break;
case 3:
alert(i);
break;
default:
alert(i);
break;

}

}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=”helloworld()”>
</form>

</body>
<html>

実行結果は0になります。

breakで文から抜けます。

break

breakは文を抜けるときに使います。

if,for,while,swich文で使用可能です。

多重ループで内側のループにbreak文があると内側のループを抜けて外側にいきます。

breakはラベル名を指定することでそこまでのループを抜ける事ができます。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

alert(“iの値” + i);

for (j=0;j<2;j++){
if(j==1){
break;
}
alert(“iの値” + i + “jの値” + j);
}

}

}
</script>
</head>
<body>
<form>
<input type=”button” value=”ここをクリック” onClick=”helloworld()”>
</form>

</body>
<html>

実行結果は

iの値0
iの値0jの値0
iの値1
iの値1jの値0

です。

try catch 例外処理 javascript

try catchはvb.netでもc#でもありますね。
javascriptにもあるんです。

関数橙を例外エラーを拾うことができます。
何でもtry catchではなく入力チェック等は正規表現をつかえばいいですね。
例外処理が起こる処理ファイルを開く等などは
try catchをつかえばいいですね。

DOM javascript

DoMとはDocument Object Modeです。
Document Object Modeとの名前の通り
ツリー構造にオブジェクトがなっております。
Documentが最上位になってます。
htmlの構造もhtmlの下にheadとbody要素がありその下にhやimgがありますね。
W3C DOMでjavascriptで要素を指定してアクセスします。

要素のアクセスには簡単に言うと二つあります。

要素のタグをしてする場合と要素にidを付けた要素をid名で指定する方法です。

getElementsByTagName()

名前の通りタグで指定する

getElementsByTagName(“p”)[0]

要素を配列形式で返すので[]で指定してください。

getElementByid()

idで指定する

getElementByid(“id名”)

idは単一です。

childNodes()

childNodesとは子ノードのことですね。

getElementsByTagName() や
getElementByid()　は要素しか返しません。

テキストはテキストノードを返す必要がありので
childNodes[0]でテキストノードを含めた子ノードを返す

正確にはdocument.getElementByid((“id名”) .childNodes[0]

テキストノードの変更には
nodeValue テキストノードを返す

getElementByid((“id名”) .childNodes[0]

正確にはdocument.getElementByid(“id名”) .childNodes[0].nodeValue = “文字列”;

属性の変更には
setAttribute で属性を変更できる

document.getElementByid(“id名”) .childNodes[0].setAttribute(“属性名”,”変更するファイル名や文字列”)
getArrribute で属性を参照できる

document.getElementByid(“id名”) .childNodes[0].getArrribute(“属性名”,”変更するファイル名や文字列”)

属性値を変更してもわかりにくいのでp要素のテキストノードを変更するサンプル。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

document.getElementsByTagName(“p”)[0].childNodes[0].nodeValue = “変更されました”;

}

</script>
</head>
<body>
<form>
<p>変更前</p>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>

</body>
<html>

createElement javascript

createElementは要素を追加します。

document.createElement(“追加したい要素”);

createTextNode

createTextNodeはテキストノードを追加します。

document.createTextNode(“文字列文字列”);

appendChild

appendChildは要素に親子関係を紐づけてやります。
追加しただけではどこに追加したらいいかわかりませんよね。

親要素.appendChild(子要素);

サンプルソース

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){
var p = document.createElement(“p”);

var text = document.createTextNode(“追加されました。”);

p.appendChild(text);

var setbody = document.body;

setbody.appendChild(p);
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果はクリックするたびに追加されました。と表示されます。

サンプルソースの解説

変数pにp要素の要素を新規に追加してます。

var p = document.createElement(“p”);

変数textにテキストノードを新規に追加してます。

var text = document.createTextNode(“追加されました。”);

変数pに変数textを紐づけてます。

p.appendChild(text);

変数setbodyにbodyを追加。

var setbody = document.body;

変数setbodyに変数pを紐づけ。

setbody.appendChild(p);

よくやるミスとして大文字小文字等に注意して下さい。

あとメモ帳で環境がない方はミスがあってもどこまで

動いてるかわかりませんよね。

コンソールでもアラートでもいいですが仕込んでどこまで

動いてるか確認してみるのもいいかもしれません。

removeChild javascript

emoveChildは子要素を削除します。
子要素があるということはどの親要素なのが必要だと思います。

要素.parentNode.removeChild(要素);

サンプル

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(node){
var p = document.createElement(“p”);

var text = document.createTextNode(“追加されました。”);

p.appendChild(text);

var setbody = document.body;

setbody.appendChild(p);

node.parentNode.removeChild(node);
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果はボタンが消えて追加されました。が表示されます。

前回のソース残してるのでp要素が作成されてます。

全部消したいなら引数を取らずにbody要素を消せばいいですね。

サンプル

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){
var p = document.createElement(“p”);

var text = document.createTextNode(“追加されました。”);

p.appendChild(text);

var setbody = document.body;

setbody.appendChild(p);

setbody.parentNode.removeChild(setbody);
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果は全部消えましたね。

p要素だけ削除したい時は

サンプル

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){
var p = document.createElement(“p”);

var text = document.createTextNode(“追加されました。”);

p.appendChild(text);

var setbody = document.body;

setbody.appendChild(p);

p.parentNode.removeChild(p);
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果はなにもおこってませんがp要素を作成して削除してますね。

画面の表示を消したいならこれでいいでしょうか。

文法的に気持ち悪いというかp要素のテキストノード消してるだけの

ような気がしますがとりあえずこれでいいのだ！

css javascript

cssをjavascriptで設定できます。

やり方は簡単です。

変数名.style.プロパティ名 = “値”;

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){
var p = document.createElement(“p”);

var text = document.createTextNode(“追加されました。”);

p.appendChild(text);

var setbody = document.body;

setbody.appendChild(p);

p.style.backgroundColor = “#ccc”;
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果はp要素に灰色がつきます。

けどjavascript とcssを分離したいこともあるかもしれません。
クラス名をつけて管理することができます。

p.className =”クラス名”;

楽勝ですね。
おちゃのこさいさいです。

function helloworld(){
var p = document.createElement(“p”);

var text = document.createTextNode(“追加されました。”);

p.appendChild(text);

var setbody = document.body;

setbody.appendChild(p);

p.className =”red”;
}

</script>
<form><input type=”button” value=”ここをクリック” />

</form>

実行結果はp要素に赤文字になります。

style属性の読み出しはブラウザによって違うし
あまりオススメしません。

ライブラリー等では実現できますが。

クラスでデザインとプログラミングは分けてるだけでよくね。

ビルドインオブジェクト

ビルドインオブジェクトとはECMScriptで標準仕様になってます。

ECMAScript（エクマスクリプト）はjavascriptの標準仕様です。

じゃあ他にどんな種類があるんだと思ったと思います。

オブジェクトには4種類あります。

DOM
WEBブラウザのオブジェクト
ビルドインオブジェクト
自分で定義したオブジェクトです。

DOMはドキュメントオブジェクトモデル
ですね。

WEBブラウザのオブジェクトはブラウザごとに定義した
オブジェクトです。
最近は標準化の動きが進んできましたね。
ブラウザごとに処理を考えるのが手間だと
ライブラリー等を使うのもアリですね。

自分で定義したオブジェクトは自分で定義したオブジェクトです。
javascriptにはクラスはありませんが
オブジェクトを自分で定義することができます。
クラスみたいに定義することができます。
継承はできませんし無理矢理ぽいことはできます。
インターフェースや構造体はありません。
オブジェクト指向ではありますがプロトタイプ型で少し
変な感じですね。

オブジェクト	説明
Array	配列のオブジェクト
Boolean	論理値のオブジェクト
Date	日付と時間のオブジェクト
Error	普通のエラーオブジェクト
EvalError	eval関数のエラーオブジェクト
Function	関数のオブジェクト
Math	数学のオブジェクト
Global	グローバルのスコープのオブジェクト
Number	数値のオブジェクト
Object	全てのオブジェクト
RangeError	有効範囲外のエラーオブジェクト
RegerenceError	無効な変数のエラーオブジェクト
RegExp	正規表現のオブジェクト
String	文字列のオブジェクト
SyntaxError	構文エラーのエラーオブジェクト
TypeError	異なるオブジェクトのエラーオブジェクト
URLError	URLのデコードとエンコードのエラーオブジェクト

エラーオブジェクトはエラーを返すオブジェクトです。

Arrayは配列を使うオブジェクトですね。
Globalはグローバルのスコープのオブジェクトです。
Globalとうオブジェクトがありません。
ビルドインプロパティとビルドイン関数があります。
参照にはGlobalの記述は必要ありません。

プロパティ	説明
Infinity	無限大
NaN	非数を示す
undefired	未定義

Array javascript

Arrayオブジェクトについて解説します。
宣言
変数名　= new Array(配列の要素数);

代入
変数名[添え字] = 値;

宣言と同時に代入
変数名　= new Array(値1,値2);

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

Array1　= new Array(2);
Array1[0]　= “1”;
Array1[1]　= “2”;
Array2　= new Array(“3″,”4″);

alert(Array1);
alert(Array2);
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果は12と34
変数名.プロパティかメソッド
オブジェクトにプロパティとメソッドがあります。

Array constructor プロパティ

constructor プロパティはコンストラクタを参照します。

変数名.constructor

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

Array1　= new Array(2);
Array1[0]　= “1”;
Array1[1]　= “2”;
Array2　= new Array(“3″,”4″);

alert(Array1.constructor);
alert(Array2.constructor);
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果はfunction Array() { [native code] }が二回返します。

Array length プロパティ

Array length プロパティは要素数を参照・設定できます。

要素数を参照
変数名.length

要素数を設定する
変数名.length = 値;

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

Array1　= new Array(2);
Array1[0]　= “1”;
Array1[1]　= “2”;
Array2　= new Array(“3″,”4″);

alert(Array1.length);
Array2.length = 5;
alert(Array2.length);
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果は2と５です。

Array prototype プロパティ

prototype プロパティは配列にプロパティを作成する。
Array.prototype.プロパティ名 = 値；

Array concat メソッド

Array concat メソッドは文字列を連結します。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

Array1　= new Array(2);
Array1[0]　= “1”;
Array1[1]　= “2”;
Array2　= new Array(“3″,”4″);

alert(Array1.concat(Array1,Array2));
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>
実行結果は1,2,1,2,3,4です。
Array1は初期化されるわけではないので空のオブジェクトを戻り値に使用しましょう。

Array join メソッド

Array join メソッドは要素を指定された値で区切ります。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

Array1　= new Array(2);
Array1[0]　= “1”;
Array1[1]　= “2”;
Array2　= new Array(“3″,”4”);
Array2　= Array1.join(“/”);
alert(Array2);
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果は1/2です。

Array pop メソッド

Array pop メソッドは要素の末尾を削除する。
戻り値として削除された値が返る。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

Array1　= new Array(2);
Array1[0]　= “1”;
Array1[1]　= “2”;
Array2　= new Array(“3″,”4″);

alert(Array2.pop());
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果は４です。

Array push メソッド

Array push メソッドは末尾に要素を追加する。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

Array1　= new Array(2);
Array1[0]　= “1”;
Array1[1]　= “2”;
Array2　= new Array(“3″,”4”);
Array2.push(“5″);
alert(Array2);
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果は3,4,5です。

Array reverse メソッド

Array reverse メソッドは要素を反転されます。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

Array1　= new Array(2);
Array1[0]　= “1”;
Array1[1]　= “2”;
Array2　= new Array(“3″,”4″);
Array2.reverse();
alert(Array2);
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果は4,3です。

Array shift メソッド

Array shift メソッドは要素の先頭を削除

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

Array1　= new Array(2);
Array1[0]　= “1”;
Array1[1]　= “2”;
Array2　= new Array(“3″,”4″);
Array2.shift();
alert(Array2);
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>
実行結果は4です。

Array slice メソッド

Array slice メソッドは指定した範囲を抽出する

変数名.slice(開始位置,終了位置);

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

Array1　= new Array(2);
Array1[0]　= “1”;
Array1[1]　= “2”;
Array2　= new Array(“1″,”2″,”3″,”4″);
Array3 = Array2.slice(1,3);

alert(Array3);
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>
実行結果は2,3です。

Array sort メソッド

Array sort メソッドは要素を並び替え

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

Array1　= new Array(2);
Array1[0]　= “1”;
Array1[1]　= “2”;
Array2　= new Array(“3″,”4″,”1″);
Array2.sort();
alert(Array2);
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>
実行結果は1,3,4です。

Array splice メソッド

Array splice メソッドは要素を置き換え

変数名. splice(開始位置,置き換える数,”置き換える値”);

開始位置は0から数えます。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

Array1　= new Array(2);
Array1[0]　= “1”;
Array1[1]　= “2”;
Array2　= new Array(“3″,”4″,”1″);
Array2. splice(1,1,”100″);
alert(Array2);
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>
実行結果は3,100,1です。

Array toStringメソッド

Array toString メソッドは文字列に変換

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

Array1　= new Array(2);
Array1[0]　= “1”;
Array1[1]　= “2”;
Array2　= new Array(“1″,”2″,”3″);
Array3 = Array2.toString();

alert(Array3);
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>
実行結果は1,2,3です。

何も変わらないですね。

配列の参照や文字列を表すときは自動的にtoStringが呼び出されています。

Array unshift メソッド

Array unshift メソッドは先頭に要素を追加

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

Array1　= new Array(2);
Array1[0]　= “1”;
Array1[1]　= “2”;
Array2　= new Array(“3″,”4″,”1”);
Array2.unshift(“7″);
alert(Array2);
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>
実行結果は7,3,4,1です。

string javascript

String

stringオブジェクトについて解説します。

宣言
変数名　= new String(値);

代入
変数名 = 値;

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

str1　= new String(“3″);

alert(str1);

}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果は3です。

String constructor プロパティ

constructor プロパティはコンストラクタを参照します。

変数名.constructor

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

str1　= new String(“3″);

alert(str1.constructor);

}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果はfunction String() { [native code] }が返します。

String length プロパティ

String length プロパティは文字列の長さを参照・設定できます。

文字列の長さ
変数名.length

文字列の長さを設定する
変数名.length = 値;

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

str1　= new String(“3″);

alert(str1.length);

}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果は1です。

prototype プロパティ

prototype プロパティは配列にプロパティを作成する。
String.prototype.プロパティ名 = 値；

String anchor メソッド

anchorのneme属性を設定できます。

変数名(“アンカーネーム”);

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

str1　= new String(“3”);

document.write(str1.anchor(“anchorname”));

}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果は３です。

見た目では分かりませんが<A>のneme属性がanchornameが設定されています。

String big メソッド

bigで文字が一回り大きくなります。

変数名.big();

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

str1　= new String(“3″);

document.write(str1.big());
alert(str1.anchor);

}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果は3です。

bigでひと回り文字が大きくなってます。

String blink メソッド

文字を点滅します。

ブラウザの独自仕様でhtml5で廃止されたので使用しなくていいでしょう。

String bold メソッド

文字が太字になります。

変数名.bold()

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

str1　= new String(“3″);

document.write(str1.bold());
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果は3です。

文字が太字になります。

String charAt メソッド

charAtは文字列の位置から文字を習得します。

変数名.charAt(抽出する位置)

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

str1　= new String(“abcdef”);
document.write(str1.charAt(1));

}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果はbです。

String concat メソッド

concatは文字を連結させる。

変数名.concat(連結文字)

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

str1　= new String(“abcdef”);
document.write(str1.concat(1));

}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果はabcdef1です。

String find メソッド

IEでも非対応なので使用しなくていいですね。

String fixed メソッド

文字が等幅文字になります。

変数名.fixed()

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

str1　= new String(“3″);

document.write(str1.fixed());
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果は３です。

文字が等幅文字になります。

String fontsize メソッド

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

str1　= new String(“3″);

document.write(str1.fontsize (72));
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果は3です。

フォントサイズが72ポイントになります。

String fontcolor メソッド

変数名.fontcolor(色)；

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

str1　= new String(“3”);

document.write(str1.fontcolor(“red”));
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果は3です。

文字が赤くなってます。

String indexOf メソッド

indexOfは検索位置から右に検索する。

変数名.indexOf(検索文字,検索位置)

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

str1　= new String(“abcdef”);
document.write(str1.indexOf(“c”,1));

}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果は2です。

String italics メソッド

変数名.italics())

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

str1　= new String(“3″);

document.write(str1.italics());
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果は３です。

文字がイタリック体になります。

String lastIndexOf メソッド

lastIndexOfは検索位置から左に検索します。

変数名.lastIndexOf(検索文字,検索位置)

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

str1　= new String(“abcdef”);
document.write(str1.lastIndexOf(“c”,5));

}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果は2です。

String link メソッド

リンクができます。

変数名1.link

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

str1　= new String(“A”);

document.write(str1.link());
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果はAです。

リンクができてます。

String match メソッド

matchは検索の指定を正規表現で指定します。

変数名.match(検索する正規表現)

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

str1　= new String(“abcdef”);
document.write(str1.match(/a/));

}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果はaです。

String replace メソッド

replaceは文字を検索して置き換え文字で検索文字を置き換える。

str1.replace (検索文字,置き換え文字)

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

str1　= new String(“abcdef”);
document.write(str1.replace (“e”,”z”));

}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果はabcdzfです。

String search メソッド

searchは検索文字列を検索してインデックスを返す。

要素がない場合は-1を返す。

変数名.search (検索文字)

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

str1　= new String(“abcdef”);
document.write(str1.search (“e”));

}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果は4です。

String slice メソッド

sliceは文字を抽出します。

変数名.slice(開始位置,終了位置)

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

str1　= new String(“abcdef”);
document.write(str1.slice(1,3));

}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果はbcです。

String small メソッド

文字が小さくなります。

変数名.small()

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

str1　= new String(“3″);

document.write(str1.small());
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果は3です。

文字が小さくなってます。

String split メソッド

splitは区切り文字で分割して要素数の配列を取得する。

第二引数の要素数がない時は全て取得する。

変数名.split(区切り文字,要素数)

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

str1　= new String(“a/b/c/d/e/f”);
document.write(str1.split(“/”,5));

}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果はa,b,c,d,eです。

String strike メソッド

文字が取り消し線になる。

変数名.strike()

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

str1　= new String(“3″);

document.write(str1.strike());
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果は3です。

文字が取り消し線になってます。

String sub メソッド

変数名.sub()

文字が下付き文字になります。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

str1　= new String(“3″);

document.write(str1.sub());
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果は3です。

文字が下付き文字になりました。

String substr メソッド

substrを抽出する。

変数名.substr(開始位置,文字数)

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

str1　= new String(“abcdef”);
document.write(str1.substr(1,3));

}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果はbcdです。

String substring メソッド

substringは文字を抽出する。

str1.substring(開始位置,終了位置)

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

str1　= new String(“abcdef”);
document.write(str1.substring(1,3));

}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果はbcです。

String sup メソッド

文字が上付き文字になります。

変数名.sup()

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

str1　= new String(“3″);

document.write(str1.sup());
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果は3です。

String toLowerCase メソッド

アルファベットが小文字になります。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

str1　= new String(“A”);

document.write(str1.toLowerCase());
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果はaです。

String toUpperCase メソッド

アルファベットが大文字になります。

変数名.toUpperCase()

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

str1　= new String(“a”);

document.write(str1.toUpperCase());
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果はAです。

String valueOf メソッド

valueOf()は文字の値を取得する。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

str1　= new String(“abcdef”);
document.write(str1.valueOf());

}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果はabcdefです。

Number javascript

Number
Numberオブジェクトについて解説します。
宣言
変数名　= new Number値);
代入
変数名 = 値;

sample1

実行結果は100です。
Number constructor プロパティ
constructor プロパティはコンストラクタを参照します。
変数名.constructor
実行結果はfunction Number() { [native code] }
prototype プロパティ
prototype プロパティは配列にプロパティを作成する。
Number.prototype.プロパティ名 = 値；
MAX_VALUE プロパティ
MAX_VALUEは最大の値です。
この値は固定値で決まっています。
オブジェクトに対してではなく
Number.MAX_VALUEで使用します。

sample1

実行結果は1.7976931348623157e+308です。
MIN_VALUE プロパティ
MIN_VALUEは最小の値です。
この値は固定値で決まっています。
オブジェクトに対してではなく
Number.MIN_VALUEで使用します。

sample1

実行結果は5e-324です。
toString メソッド
toStringは引数に数字を指定するとN進数になります。

sample1

実行結果は1100100です。
valueOf メソッド
valueOfは値を取得します。

sample1

実行結果は100です。

Boolean 演算子 ===と==の違い javascript

Booleanrオブジェクトについて解説します。

宣言
変数名　= new Boolean(値);

代入
変数名 = 値;

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

bool　= new Boolean(true);
document.write(bool);
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果はtrueです。

Boolean constructor プロパティ

constructor プロパティはコンストラクタを参照します。

変数名.constructor

実行結果はfunction Boolean() { [native code] }

prototype プロパティ

prototype プロパティは配列にプロパティを作成する。
Boolean.prototype.プロパティ名 = 値；

toString プロパティ

変数名.toString()

文字列に変換します。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

bool　= new Boolean(true);

str = bool.toString();

if (str === true){
alert(1);
}
else{
alert(0);
}
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果は0になります。

文字列を比較したいときは””でくくります。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

bool　= new Boolean(true);

str = bool.toString();

if (str === “true”){
alert(1);
}
else{
alert(0);
}
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果は1です。

valueOf メソッド

valueOfは値を取得します。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

bool　= new Boolean(true);

num = bool.valueOf();

if (num === 1){
alert(1);
}
else{
alert(0);
}
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果は0になります。

なぜでしょうか？

どうすればいいでしょう。

==にすれば1を評価します。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){

bool　= new Boolean(true);

num = bool.valueOf();

if (num == 1){
alert(1);
}
else{
alert(0);
}
}

</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果は1です。

javascriptは

==は大雑把に評価します。

===は厳密に評価します。

RegExp 正規表現 javascript

RegExp 正規表現

RegExpオブジェクトについて解説します。

宣言
変数名　= new RegExp(文字列);

代入
変数名 = 値;

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){
reg　= new RegExp(“n”);
alert(reg);
}
</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果は/n/と表示されます。

ここではマッチされる文字列をnに指定しました。

RegExp constructor プロパティ

constructor プロパティはコンストラクタを参照します。

変数名.constructor

実行結果はfunction RegExp() { [native code] }

prototype プロパティ

prototype プロパティは配列にプロパティを作成する。
RegExp.prototype.プロパティ名 = 値；

input

検索する文字列をしています。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){
reg　= new RegExp(“n”);

reg.input = “night”;

alert(reg.input);
}
</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果はnightです。

multiline

検索条件の改行コードを無視しないか。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){
reg　= new RegExp(“n”);

reg.input = “night”;

RegExp.multiline = true;

alert(RegExp.multiline );

}
</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果はtrueです。

source

sourceは正規表現を参照します。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>

function helloworld(){
reg　= new RegExp(“n”);

reg.input = “night”;
alert(reg.source);
}
</script>
</head>
<body>
<form>

</form>

</body>
<html>

実行結果はnです。

Enter your email Address

javascript 入門講座目次

hello world javascript

var javascript

typeof javascript

配列 array javascript

配列リテラル

二次元配列

連想配列

lengthプロパティ

popとpush

sort

join

reverse

Array

if else javascript

if

if else

else if

ifのネスト

for in javascript

for 多重ループ

for in

do while javascript

do while

switch javascript

break

try catch 例外処理 javascript

DOM javascript

getElementsByTagName()

getElementByid()

childNodes()

createElement javascript

createTextNode

appendChild

removeChild javascript

css javascript

ビルドインオブジェクト

Array javascript

Array constructor プロパティ

Array length プロパティ

Array prototype プロパティ

Array concat メソッド

Array join メソッド

Array pop メソッド

Array push メソッド

Array reverse メソッド

Array shift メソッド

Array slice メソッド

Array sort メソッド

Array splice メソッド

Array toStringメソッド

Array unshift メソッド

string javascript

String

String constructor プロパティ

String length プロパティ

prototype プロパティ

String anchor メソッド

String big メソッド

String blink メソッド

String bold メソッド

String charAt メソッド

String concat メソッド

String find メソッド

String fixed メソッド

String fontsize メソッド

String fontcolor メソッド

String indexOf メソッド

String italics メソッド

String lastIndexOf メソッド

String link メソッド

String match メソッド

String replace メソッド

String search メソッド

String slice メソッド

String small メソッド

String split メソッド

String strike メソッド

String sub メソッド