現役システムエンジニアの備忘録

技術スキルや用語などの記録を残していきます

基礎

JavaScriptでオブジェクトを扱う

投稿日:2019年4月17日 更新日:

▲ = new ★(♦, ♦…,♦) 新しいオブジェクトを作成
delete ● オブジェクトを削除
with(■) ▼ オブジェクト名を省略して処理を記述
this 参照中のオブジェクトを示す
▲・・・新しいオブジェクトの名前
★・・・オブジェクトタイプ
♦・・・引数【省略可】
●・・・オブジェクト名
■・・・オブジェクト名
▼・・・処理

オブジェクトを作成したり削除したりする制御文です。

スポンサーリンク

newステートメント

オブジェクトを作成します。具体的には、Array(配列)、Date(日付)、Image(画像)、Object(オブジェクト)のオブジェクトを作成します。Math(数学関数)、RegExp(正規表現)、String(文字列)のオブジェクトについてもnewステートメントで作成できますが、これらのオブジェクトは通常newを使って明示的に作成することはありません。

delete演算子

オブジェクトを削除します。

withステートメント

指定したオブジェクトに対する処理を行います。withを使用すると、オブジェクト名の記述を省略できます。

thisステートメント

イベントハンドラ内などで参照中のオブジェクトを示すことができます。

スポンサーリンク

まずtodayという日付オブジェクトを作成し、document.form1というフォーム(オブジェクト)のそれぞれの入力欄に、年、月、日を表示しています。さらにボタンをクリックした際にthisステートメントによって関数counterにオブジェクトを渡しています。これによってクリック時にボタンの表面の文字列を書き換える際、document.form1.b1という記述を省略しています。

JavaScript

today = new Date(); //日付オブジェクトを作成
myForm = document.getElementById(“form1″);
with(myForm) { //document.form1オブジェクトについて以下の処理を行う
    text1.value = today.getFullYear();
    text2.value = today.getMonth() + 1;
    text3.value = today.getDate();
}
kaisuu = 0;
function counter(obj) {
    kaisuu++;
    obj.value = ” ” + kaisuu + ” “; //objはdocument.form1.b1の代わり
}

HTML

<body>
<form id=”form1″>
    <input type=”text” name=”text1″ size=”4″ />年
    <input type=”text” name=”text2″ size=”2″ />月
    <input type=”text” name=”text3″ size=”2″ />日に

    <input type=”button” name=”b1″ value=” 0 ” onclick=”counter(this)” />
    回クリック!
</form>
<script type=”text/javascript” src=”object.js” /></script>
</body>

スポンサーリンク

-基礎
-

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

JavaScriptの演算子とは?

JavaScriptには計算や比較に利用するさまざまな演算子があります。大きく分けて、四則演算を行う算術演算子、数値をビットとして扱うビット演算子、if構文などで複数の条件を扱う際に使用する論理演算子 …

JavaScriptのコメントの書き方は?複数行書くには?

コメントを書く人、書かない人って、結構分かれますよね。ただ、私は今まで「一切コメントがなくても簡単に理解できるプログラム」というのには出会ったことがありません(笑) もちろん、「そもそも複雑なシステム …

JavaScriptの実装。非対応ブラウザへの配慮

非対応ブラウザへの配慮     noscript要素を使うことで、JavaScriptに対応していない環境でページを開いた人にだけ表示させるHTML文書を記述す …

JavaScriptにおける色の指定

    JavaScriptで色を指定するには、HTML/XHTML同様、RGB値を用いる方法と、色名を用いる方法とがあり、それぞれ次のように指定します。 スポ …

JavaScriptの変数について

    変数とは値や式を格納する箱のようなものです。変数を用いることによってスクリプトが簡潔になり、メインテナンスが容易になります。   & …