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

WordPressログイン画面にオリジナルロゴを表示させる

この記事は約 1 分で読めます。 パッとひと目でそのサイトだと分かりやすくしたいなぁと思って、ログイン画面のロゴをオリジナルに変更してみました。 WordPressのバージョンによって、ロゴ部分のサイ …

no image

軽量で簡単に設置出来るjQueryスライダー「FlexSlider」。

この記事は約 1 分で読めます。 今までいくつかのjQueryスライダーライブラリを利用しました。今回も軽量で簡単に設置が出来る「FlexSlider」を見つけたので、早速メモです。 スマートフォンで …

no image

WordPressサイト内検索でのキーワードが分かるプラグライン「Search Meter」を試してみた。

この記事は約 1 分で読めます。 アクセス解析をしていると、どんなキーワードで検索されたのか?を知ることができます。 しかし、キーワードを入力して検索できなかった結果を知る事はなかなか知る事ができない …

no image

画面のスクリーンショット(キャプチャー)をとる3つの方法+1

この記事は約 2 分で読めます。 Webサイトのスクリーンショット(キャプチャー)をとる時、画面に表示されている部分のみの場合や、Webサイト1ページ分全体などあります。 特にWebサイト1ページ全体 …

no image

WordPressでシンプルな自作SNSボタンを設置してみた

この記事は約 1 分で読めます。 ブログの記事下に、いろんなSNSアイコンをよく見かけます。 このブログにも付けていたのですが、時々ちょっと重たさを感じていたのですが、先日書いた記事「WordPres …