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

Chromeの拡張機能FireBugとSnifferを入れてみた♪

この記事は約 1 分で読めます。Webサイト作っている時、大活躍しているのがFirefoxの「FireBug」です。 私が確認しているブラウザは、IE,Firefox,Safari,Chromeですが …

no image

Google Analyticsでユーザーの「年齢・性別・興味」を知るには?

この記事は約 1 分で読めます。昨年10月に追加されたGoogle Analyticsの「ユーザー属性・インタレストカテゴリ」。 サイトに訪問したユーザーの「年齢・性別・興味」が分かるようになりました …

no image

easySlider1.7.jsを使ってFlashのようなスライドショーにチャレンジ♪

この記事は約 1 分で読めます。「easySlider1.7.js」を使って、数枚の画像のスライドショーを作りたいと思います。 自動で画像がスライドしますが、見ている人の意思で前後の画像へ戻したり進め …

no image

Google Mapの吹き出しを消してみた

この記事は約 1 分で読めます。 Google Mapをサイトに表示させる方法は、たくさんあると思います。 単純にGoogleMapを開いて、「ウェブサイトへの地図埋め込み用 HTMLコード」をそのま …

no image

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

この記事は約 1 分で読めます。 苦手なJavaScriptをイチから勉強してみる【基本準備編】の続きとしてメモします。 イチから「JavaScript」を学び直しをする為に記録を残しています。少しず …