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.

関連記事

『WordPress閲覧しているページが使用しているテンプレートがひと目でわかる!』便利プラグイン「Show Current Template」

この記事は約 1 分で読めます。 WordPressのテンプレートを制作・カスタマイズをしていて、「表示しているページがどのテンプレートを読んでるんだろう」と思ったことはないですか? 「Show Cu …

no image

ムームードメインで取得した独自ドメインをエックスサーバーで使う設定方法

この記事は約 1 分で読めます。「エックスサーバー」を利用する事が決まっていて、ドメインをどこで取得しようかな?と思った時、「エックスドメイン」という選択肢もあったのですが、今回は「ムームードメイン」 …

no image

Facebook タイムラインのカバー画像を設定してみた♪

この記事は約 1 分で読めます。 Facebookのタイムラインが登場して、少し経ちます。 カッコイイ画像をカバー画像にされている方もお見かけするのですが、私はまだ画像がしっくり決まらずジタバタしてい …

no image

WordPress管理画面の不正アクセス防止に「Simple Login Lockdown」

この記事は約 1 分で読めます。 WordPressの管理画面にログインするには、ユーザー名とパスワードさえ合っていれば誰でもどこでも入る事が出来ます。 特に推測しやすいパスワードにしていた場合、全然 …

no image

WordPressでオリジナルテーマ作りにチャレンジ8【トップページ編】

この記事は約 1 分で読めます。 今回、WordPressのオリジナルテーマ作りにチャレンジしました。 ブログサイトならトップページを特別に作る必要はないのかもしれませんが、通常のサイト「index. …