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

Google Maps表示用スクリプト「google_map_api_js」を試してみた♪

この記事は約 1 分で読めます。 以前「jquery.gmap3.js」を使ってGoogle Mapsを表示させてみました。(「jquery.gmap3.jsを使って、Googlemapを簡単にカスタ …

no image

Yahoo!アクセス解析を使ってみた感想【レポート】

この記事は約 1 分で読めます。 以前、「Yahoo!アクセス解析を設定してみました!」でYahoo!アクセス解析を設定し、Google Analyticsと一緒にこのブログのアクセス解析を開始しまし …

no image

WordPressプラグイン「WP-Copyright-Protection」で右クリック・ドラック禁止でコピーガード

この記事は約 1 分で読めます。 以前、「右クリック禁止で画像のコピーガード」など、画像のお持ち帰りを禁止したい措置について記事を書きました。 3年ほど前の記事にもかかわらず、今も毎日閲覧数が多いです …

no image

はじめてのHTML5。

この記事は約 1 分で読めます。 そろそろいろんなところで、HTML5を見かけるようになり・・・今イチバン気になっているのがHTML5です。 これからHTML5を覚えていこうと思っているところなので、 …

no image

Photoshop で入力したテキストの「縦書き」「横書き」を変更する方法

この記事は約 1 分で読めます。 Photoshopを使うようになってもう何年も経つのに、意外と知らずに無駄な事をしていたり・・・が多かったりします。。。 効率よく作業するには、やっぱり便利な方法は活 …