javascriptでプログラミングを行うための注意事項
Post on 05-Jul-2015
787 Views
Preview:
DESCRIPTION
TRANSCRIPT
JavaScriptでプログラミングを 行うための注意事項
環境の設定
• テキストエディタは自由 (Sakura, 秀丸, TeraPad, Dreamweaver等）
• ブラウザはFirefoxかChrome (IEは基本的にNG. Safariも一部HTML5を扱えない部分があるので非推奨）
• ブラウザでJavaScriptを無効にする設定をしている場合は有効にする（次スライドで解説）
Firefoxの場合
左上の「Firefox」 →「オプション」 →「オプション」 →「コンテンツ」 →「JavaScriptを有効
にする」
Chromeの場合 右上のボタン→設定
Chromeの場合 設定→詳細設定を表示
Chromeの場合 プライバシ→コンテンツの設定→ 「すべてのサイトでJavaScriptの実行を許可する」
拡張子と文字コード
• 拡張子は .html を使う →ファイル名をxxxx.htmlのようにする （他に .js を使う方法もある）
• 文字コードは UTF-8 を使う • 各エディタでの設定は次スライドで解説
サクラエディタの場合 ファイル→名前をつけて保存
ここで現在の文字コードが確認できる
サクラエディタの場合 ファイル名→ xxxx.html のように最後に「 .html 」をつける ファイルの種類→「ユーザー指定」を選択
サクラエディタの場合 文字コードセット → UTF-8 を選択
秀丸の場合 ファイル→エンコードの種類→Unicode(UTF-8） →ファイルを読み込みし直す（既に開いている場合） ここで現在の文字コードが確認できる
秀丸の場合 ファイル→名前をつけて保存→ファイルの種類→「HTML文書(*.ｈｔｍｌ)」
TeraPadの場合 ファイル→文字/改行コード指定保存
ここで現在の文字コードが確認できる
TeraPadの場合 文字コード→ 「 UTF-8N 」
TeraPadの場合 ファイル→名前をつけて保存→ファイルの種類→「HTMLファイル」
Dreamweaverの場合 編集→環境設定→新規ドキュメント→エンコーディング初期設定→Unicode(UTF-8）
Dreamweaverの場合 （すでに開いている場合） 修正→ページプロパティ→タイトル/エンコーディング →エンコーディング→Unicode(UTF-8）
HTMLのテンプレート <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScriptサンプル</title> </head> <body> </body> </html>
←ここに追加していきます
HTMLのテンプレート <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScriptサンプル</title> </head> <body> <script type="text/javascript"> alert("ようこそJavaScriptの世界へ"); </script> </body> </html>
<script type="text/javascript"> と</script>の間にJavaScriptのコードを 記述する
文字化け対策
<meta charset="UTF-8"> を
<meta charset=UTF-8>や<meta chrset="UTF-8"> のように間違ったり
<meta charset=“UTF-8”>のように 二重引用符を全角で書いたりすると
一部のブラウザ（主にIE）はS-JISとして 読み込んでしまうため文字化けを起こします
コメントの利用例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScriptサンプル</title> </head> <body> <script type="text/javascript"> /* sample6.html バージョン1.0 ダイアログボックスに計算結果を表示する 最終変更日：2012年10月5日 Sugawara */ alert(4 + 5);//足し算をします alert(10 - 2);//引き算した結果の8が表示されます </script> </body> </html>
インデントの重要性 コードを書く時は普通、可読性向上のために スペースやタブによるインデントをつける。 HTML/JavaScriptではスペースとタブの両方が使えるがここでは”半角スペース2つ”を原則的に利用する。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScriptサンプル</title> </head> <body> <h1>JavaScript入門</h1> <script type="text/javascript"> alert("ようこそJavaScriptの世界へ); </script> </body> </html>
top related