読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

オブジェクトとプロパティとメソッド

オブジェクトとプロパティ

オブジェクトとは

操作の対象となる部品のようなものを「オブジェクト」と呼びます。

ブラウザのオブジェクト

ブラウザのオブジェクトは、ECMAScriptで標準化されていないためブラウザごとに独自のオブジェクトが実装されています。


プロパティとは

プロパティ」とは、オブジェクトの状態や属性のことです。
プロパティは「参照」や「設定」が可能です。


プロパティの参照・設定
Windowオブジェクト」のプロパティを参照するには、次のようにwindowプロパティと参照するプロパティ名を「.ドット」でつなげます。
このような記述のしかたを「ドットシンタックス」と呼びます。



window.defaultStatus

windowプロパティ

Windowオブジェクトを参照します。

defaultStatusプロパティ

ステータスバーに標準で表示される文字列を参照・設定します。



window.document.fgColor

documentプロパティ

Documentオブジェクトを参照します。

fgColorプロパティ

文字の色を参照・設定します。


《color.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>プロパティ</title>
</head>
<body onload = ' window.defaultStatus = "色の設定" ' >
<script>
document.fgColor = '#FF0000';
document.bgColor = '#EEEEEE';
</script>
<p>文字色と背景色を変更しました。</p>
</body>
</html>
onLoad

ページが読み込まれたとき。



onLoad="window.defaultStatus='色の設定'"
ページが読み込まれたとき、ステータスバーに文字列を表示します。

bgColorプロパティ

背景の色を参照・設定します。



document.fgColor = ' #FF0000 ' ;
文字色を赤に設定します。



document.bgColor = ' #EEEEEE ' ;
背景色を明るいグレーに設定します。

メソッドとは

メソッド」とは、オブジェクトに対する処理をまとめたものです。
メソッドを呼び出すと、そのオブジェクトに対して何らかの処理をさせることができます。

  • メソッドには「()」がつく

メソッドの実行

メソッド」を実行するには、プロパティと参照したいメソッド名を「.(ピリオド)」でつなげます。

alertメソッド

警告ダイアログを表示します。

  • windowオブジェクトのalertメソッド
  • windowオブジェクトの記述を省略可能(自動的にwindowオブジェクトが割り当てられる)


window.alert()



《method.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メソッド</title>
</head>
<body>
<p>ボタンをダブルクリックしてください。
<input type="button" value="ボタン" onclick="alert( 'Perfect!' )">
</p>
</body>
</html>

writeメソッド

文字列を書き出します。



window.document.write()

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptの練習</title>
</head>
<body>
<script>
document.write( '<h1>Hello JavaScript!</h1>' );
</script>
</body>
</html>