読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

JavaScriptをHTMLに書く

JavaScript

書き方のルール

  1. 基本的に「半角英数字と記号のみ」を使う
  2. 文字列を扱う場合は「シングルクォート」か「ダブルクォート」で囲む
  3. 大文字と小文字は区別される
  4. 命令文の末尾には「セミコロン」をつける
  5. 複数行にわたるまとまりの命令文は「{}波括弧」で囲む(囲まれた範囲をブロックと呼ぶ)

文字コード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
<div class="container">
<p>↑タブのタイトルを見て下さい</p>
<p>↓コンソールを見て下さい</p>
</div>
<script>
document.title = 'JavaScriptで書き換え';
console.log( 'JavaScriptで出力' );
</script>
</body>
</html>
document.title
  • 文書のタイトルを取得 / 設定します

f:id:web-design-lesson:20160505224824p:plain

コメント

  • コメントとは、スクリプトの中に自由に記述できるメモ書きのようなもの
  • 使用できない文字はありません
1行コメント
  • 「//(スラッシュ2つ)」よりも後ろの文字がコメントになります
  • 命令文の後ろに記述することもできます
複数行コメント
  • 「/*」と「*/」で囲んだ範囲がコメントになります
/*
コメントとして記述した内容は、
スクリプトには影響しません。
*/

記述エラーの発見

  • Adobe BracketsDreamweaverの場合、エラーのある行を赤く明示するため記述途中で発見できます

Google Chrome の場合

  • 要素の検証(コンテクストメニュー)



コンソールの利用

  • alertは値を確認するには便利ですが、毎回ダイアログボックスが表示されるのもわずらわしいものです
  • 以降は、ブラウザの拡張機能である「コンソール」を利用して値を表示します

console.log( '表示する値' );

コンソールでの発見
  • エラーの行数も表示する

f:id:web-design-lesson:20160505232315p:plain

f:id:web-design-lesson:20160505232816p:plain

コメントを記述
/*
タイトルに出力
*/
document.title = 'JavaScriptで書き換え';

console.log( 'JavaScriptで出力' );  //コンソールに出力

JavaScriptを外部ファイル化する

<script src="HTMLドキュメントからのパス"></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部JavaScriptファイルの読み込み</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>


《script.js》

document.title = 'JavaScriptで書き換え';
console.log( 'JavaScriptで出力' );

JavaScript開発においての注意点

  • サーバー側でも入力漏れがあるかどうかチェックする仕組みをつける。
  • たとえばサーバー側のPHPなどのサーバーサイドプログラムで、
    エラーを検知して先に進まないようにする。


JavaScript有効》


JavaScript無効》