Webの記録

苦手なJavaScriptをイチから勉強してみる【基本準備編】

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

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

今更なんですが、実はJavaScriptはちょっと苦手です。。。
jQueryのライブラリーを使って、部分的にいじる事はあっても・・・何となく「JavaScript」って苦手~と思っちゃう。
でも、やっぱりそれではイケマセン!
・・・ってコトで、イチから「JavaScript」を学び直したいと思います。
私の個人的なメモなので、ちょっと違うよ!とか、こうしたら?というのがあると思います。その場合はこっそりコメント等頂けると有難いです!



JavaScript勉強の流れ

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

JavaScriptの特徴

  • HTMLファイル内に直接記述、もしくは別にjsファイルとして保存しHTMLファイルから読み込まれる
  • Webブラウザ上で実行される
  • オブジェクト指向言語(操作する対象「オブジェクト」をはっきりさせて、命令を送る)
  • JavaとJavaScriptは別物
  • メモ帳などのエディタソフトとブラウザがあれば、特別な環境は必要としない

JavaScriptで使う用語

オブジェクト
操作する対象(window、document、imageなど)
メソッド
命令
プロパティ
オブジェクトの持つ性質(HTMLファイルの背景色や、ブラウザウィンドゥのURLの「参照先」など)

JavaScriptのコメント

1行コメント
1行のみ、//(スラッシュ2つ)以降の文字がコメントになる
複数行コメント
/* ココの部分がコメント */

最初に必ず記述するもの

headの中に以下のmetaタグを記述します。(htmlで通常記述するmetaタグは書いているものとします。

<meta http-equiv="content-script-type" content="text/javascript" />

あとは、headerかbodyの中(実行させたい場所)にJavaScriptを記述していきます。

scriptの中とか・・・

<script type="text/javascript">
	//ここに命令を記述していく
</script>

実行させたいタグの中とかに記述していきます。(イベントハンドラと関数の説明は後日書きます)

<p><a href="#" onclick="windowOpen();">新しいウィンドウを開く。</a></p>
JavaScriptに対応しないブラウザ対策

対応してないブラウザでは、JavaScriptが読み込めずにそのまま文字として全部表示をしてしまうので、表示をしないようにコメント化する。

ただし、対応しているブラウザでコメントはマズイのでわざとコメントの最後をJavaScriptのコメントで消しておく。
(対応してないブラウザではJavaScriptのコメントは読み込めないので)

以下は、画面に「JavaScriptに対応してないブラウザではこの文字は表示できない」という文字を表示した場合の記述例

<script type="text/javascript">
<!--
	document.write("<p>JavaScriptに対応してないブラウザではこの文字は表示できない</p>");
//-->
</script>
JavaScriptオフにしている環境の為に

以下の記述を追加します。言葉はお好きなものに変更してください。

<noscript>
	<p>このページはJavaScriptを有効にしてください。</p>
</noscript>

ここまでのまとめ

参考にJavaScriptの中身がない状態の基本的な記述の仕方、htmlファイル全体をメモ。

例では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">
<!--
	//ここに命令を書きます。
//-->
</script>
<noscript>
	<p>このページはJavaScriptを有効にしてください。</p>
</noscript>
</body>
</html>

JavaScriptの中身を書く方法は、次回書きます。

-Webの記録
-,

執筆者:


comment

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

This blog is kept spam free by WP-SpamFree.

関連記事

no image

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

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

no image

WordPressがいきなり真っ白になった時。

この記事は約 1 分で読めます。 WordPressでこのサイトを作って、約2年になります。 地道に継続していて、当たり前に使っていたのに・・・。 ある日、ブラウザに表示させてみると・・・真っ白になっ …

no image

WordPress プラグイン「Dynamic To Top」で上に戻るボタンを簡単に設置♪

この記事は約 1 分で読めます。 よくいろんなサイトを閲覧していて、ページの下へスクロールしていくと・・・「上に戻る」ボタンを見かけます。 そこで今回は、Wordpressのプラグイン「Dynamic …

Basic認証を簡単に設置する方法

この記事は約 1 分で読めます。 特定の人にだけ公開する場合、IDとパスワードを用意する「Basic認証」という方法でアクセス制限をするのができます。 「Basic認証」で必要な「.htaccess」 …

no image

初心者のアクセス解析勉強メモ【用語と簡単にサイトをチェックしてみた】

この記事は約 1 分で読めます。 最近、興味があるのは・・・アクセス解析関係。 Webサイトを作った後、運営していくのにはやっぱり重要!アクセス解析をして、そのサイトの現在の状態を見て、それから目標を …