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

WordPressプラグイン「Simple Map」でスマホ対応GoogleMapを簡単設置。

この記事は約 1 分で読めます。 GoogleMapは、いろいろとお世話になっています。ただスマホで時々面倒だと思うのが、スクロールしていてGoogleMapに何気に指が触れてしまった時。 画面の横幅 …

no image

初心者のアクセス解析勉強メモ【用語と計算式】

この記事は約 1 分で読めます。 Webサイトを制作し、運営していく中でアクセス解析は重要だと思っています。そのWebサイトを育て、サイト目的を達成させ、信の目的(事業)の達成をする為にも、とても興味 …

no image

レスポンシブサイト制作にチャレンジ。

この記事は約 1 分で読めます。最近、気になっているのが「レスポンシブWebサイト」。 1つのHTMLで、スマートフォンやタブレットなど小さな画面とパソコンなどの大きな画面で見た場合と見た目を切り替え …

no image

WordPressテスト環境をXAMPPで作ってみた♪ for Windows

この記事は約 2 分で読めます。 WordPressのテーマ作りなどをする時、いきなり本番サイトでは試せないので、テスト環境をWindowsのパソコンに作りました。 「XAMPP for Window …

no image

Photoshopでレイアウト設計をする時に便利なエクステンション「GuideGuide」を試してみた

この記事は約 1 分で読めます。 日頃、WebページのデザインはPhotoshopを使っています。何か便利なツールないかなぁ~と思っていたところで知ったエクステンション。 Photoshopでレイアウ …