Webの記録

苦手なJavaScriptをイチから勉強してみる【記述の基礎編】

投稿日:2012年12月7日 更新日:

この記事は約 8 分で読めます。

苦手なJavaScriptをイチから勉強してみる【基本準備編】の続きとしてメモします。

イチから「JavaScript」を学び直しをする為に記録を残しています。少しずつメモを追加していきます。

私の個人的なメモなので、ちょっと違うよ!とか、こうしたら?というのがあると思います。その場合はこっそりコメント等頂けると有難いです!


JavaScript勉強の流れ

  1. 基本準備編
  2. 記述の基礎編 ←今回はココ。
  3. イベント編
  4. 関数編
  5. JavaScriptを外部ファイルにする
  6. 条件分岐(if文)と繰り返し処理(for文)・・・これから更新していきます!

記述する方法の簡単な説明

JavaScriptは、操作する対象「オブジェクト」をはっきりさせて、命令を送る言語なので、まず操作をする対象を決めて記述します。

オブジェクトの後に.(ドット)をつけて記述します。
『オブジェクト.メソッド()』や『オブジェクト.メソッド(値)』、『オブジェクト.プロパティ=値』等という形で記述します。

documentオブジェクトを使って、画面に文字を書いてみる

documentオブジェクト、writeメソッドを使用します!

ひとまず、metaの記述をして・・・JavaScriptをbodyの中に書いてみた例です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<title>JavaScript入門</title>
</head>

<body>
<script type="text/javascript">
<!--
	document.write("<h1>JavaScript入門</h1><p>ドキュメントに文字を表示します!</p>");
//-->
</script>
<noscript>
	<p>このページはJavaScriptを有効にしてください。</p>
</noscript>
</body>
</html>

結果は・・・HTMLでは

<h1>JavaScript入門</h1>
<p>ドキュメントに文字を表示します!</p>

と同じようにブラウザで表示されます。

上記と結果は同じだけれど、document.writeの()の書き方を少し変えてみたら、以下のようにも書けます。
writeメソッドの中の値を複数にしてみました。”○○”,”○○”というように値を『””(’’でも良い)』で囲って『,(コンマ)』で区切れば、複数指定できるんです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<title>JavaScript入門</title>
</head>

<body>
<script type="text/javascript">
<!--
	document.write("<h1>","JavaScript入門","</h1>","<p>","ドキュメントに文字を表示します!","</p>");
//-->
</script>
<noscript>
	<p>このページはJavaScriptを有効にしてください。</p>
</noscript>
</body>
</html>
documentオブジェクトを使って、背景と文字の色を変えてみる

documentオブジェクトにbgColor(背景の色)とfgColor(前景色・文字色)を管理するプロパティがあります。

ひとまず、metaの記述をして・・・JavaScriptをbodyの中に書いてみた例です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<title>プロパティの使用</title>
</head>

<body>
<script type="text/javascript">
<!--
	document.bgColor = "#ffffcc";
	document.fgColor = "blue";
	
//-->
</script>
<p>テキストの文字色</p>
</body>
</html>

色の指定は、cssと同じで#の後にRGB値を指定できます。他に色名でも指定できます。
色名を指定した場合の16進数の値を以下に書きます。

white
#ffffff
yellow
#ffff00
red
#ff0000
green
#00ff00
blue
#0000ff
gray
#808080
black
#000000
注意!

値を複数書く時の『””』や『”』は、『”』で始まった時は終わりも『”』にします。同様に『’』で始まった時は『’』で終わります。
上記のサンプルコードでは、『””』を使いましたが、『”』を使っても良いです。

今回のまとめ

『オブジェクト.メソッド()』や『オブジェクト.メソッド(値)』、『オブジェクト.プロパティ=値』等という形で記述します。

オブジェクトは操作したい対象、メソッドは命令、プロパティは要素という意味。
HTMLドキュメントに文字を表示する場合は、オブジェクトは「document」メソッドは「write」になる。
HTMLドキュメントの背景と文字の色を変えたい場合、オブジェクトは「document」プロパティは「bgColor」(背景の色)と「fgColor」(前景色・文字色)になる。

ひとまず、記述の仕方の基礎を書いてみました。次回は、イベントについて書いてみます。

-Webの記録
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

透明画像を置いて画像をコピーガードする。

この記事は約 2 分で読めます。 今回は画像の上に透明画像を置く事で元の画像を右クリックで保存出来ないようにするテクニックです。 まずは、デモ画面を見て頂きましょうか・・・。 【2016.6.2】一部 …

no image

WordPress お問い合せフォームプラグイン「Trust Form」を試してみた♪

この記事は約 1 分で読めます。 今回は、WordPressのお問い合せフォーム用プラグイン「Trust Form」を試してみました。 ・・・と言っても、まだローカル環境でのテスト操作なので全ての実験 …

no image

WordPress はじめてのオリジナルテーマ作り。【まとめ】

この記事は約 1 分で読めます。 昨年の11月に、私はWordpressのオリジナルテーマをはじめて作成しアップしました。 はじめてなのでまだ高度な事は出来ていませんが、今まで幾つか書きためた記事をこ …

no image

「ページ内リンクはするするスクロール」にチャレンジ!!

今日は・・・、「ページ内リンク」でちょっとイイカンジにスクロールするjQueryにチャレンジです。
ページ内リンクをそのまましても(javaScriptなし)出来ますが、そのままだといきなり戻り先に到着してしまってびっくりするので、「yuga.js」でするするという動きをつけてみました。

no image

WordPressでオリジナルテーマ作りにチャレンジ3【header・footer編】

この記事は約 2 分で読めます。WordPressのオリジナルテーマ作りにチャレンジしています。 手順を数回に分けてメモしています。今回はその3回目です。 前回は、コーディングしたものを貼り付けた「i …