javascriptでプログラミングを行うための注意事項
DESCRIPTION
JavaScriptでプログラミングを行うための注意事項TRANSCRIPT
![Page 1: JavaScriptでプログラミングを行うための注意事項](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559889cd1a28ab61398b47e7/html5/thumbnails/1.jpg)
JavaScriptでプログラミングを 行うための注意事項
![Page 2: JavaScriptでプログラミングを行うための注意事項](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559889cd1a28ab61398b47e7/html5/thumbnails/2.jpg)
環境の設定
• テキストエディタは自由 (Sakura, 秀丸, TeraPad, Dreamweaver等)
• ブラウザはFirefoxかChrome (IEは基本的にNG. Safariも一部HTML5を扱えない部分があるので非推奨)
• ブラウザでJavaScriptを無効にする設定をしている場合は有効にする(次スライドで解説)
![Page 3: JavaScriptでプログラミングを行うための注意事項](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559889cd1a28ab61398b47e7/html5/thumbnails/3.jpg)
Firefoxの場合
左上の「Firefox」 →「オプション」 →「オプション」 →「コンテンツ」 →「JavaScriptを有効
にする」
![Page 4: JavaScriptでプログラミングを行うための注意事項](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559889cd1a28ab61398b47e7/html5/thumbnails/4.jpg)
Chromeの場合 右上のボタン→設定
![Page 5: JavaScriptでプログラミングを行うための注意事項](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559889cd1a28ab61398b47e7/html5/thumbnails/5.jpg)
Chromeの場合 設定→詳細設定を表示
![Page 6: JavaScriptでプログラミングを行うための注意事項](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559889cd1a28ab61398b47e7/html5/thumbnails/6.jpg)
Chromeの場合 プライバシ→コンテンツの設定→ 「すべてのサイトでJavaScriptの実行を許可する」
![Page 7: JavaScriptでプログラミングを行うための注意事項](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559889cd1a28ab61398b47e7/html5/thumbnails/7.jpg)
拡張子と文字コード
• 拡張子は .html を使う →ファイル名をxxxx.htmlのようにする (他に .js を使う方法もある)
• 文字コードは UTF-8 を使う • 各エディタでの設定は次スライドで解説
![Page 8: JavaScriptでプログラミングを行うための注意事項](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559889cd1a28ab61398b47e7/html5/thumbnails/8.jpg)
サクラエディタの場合 ファイル→名前をつけて保存
ここで現在の文字コードが確認できる
![Page 9: JavaScriptでプログラミングを行うための注意事項](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559889cd1a28ab61398b47e7/html5/thumbnails/9.jpg)
サクラエディタの場合 ファイル名→ xxxx.html のように最後に「 .html 」をつける ファイルの種類→「ユーザー指定」を選択
![Page 10: JavaScriptでプログラミングを行うための注意事項](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559889cd1a28ab61398b47e7/html5/thumbnails/10.jpg)
サクラエディタの場合 文字コードセット → UTF-8 を選択
![Page 11: JavaScriptでプログラミングを行うための注意事項](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559889cd1a28ab61398b47e7/html5/thumbnails/11.jpg)
秀丸の場合 ファイル→エンコードの種類→Unicode(UTF-8) →ファイルを読み込みし直す(既に開いている場合) ここで現在の文字コードが確認できる
![Page 12: JavaScriptでプログラミングを行うための注意事項](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559889cd1a28ab61398b47e7/html5/thumbnails/12.jpg)
秀丸の場合 ファイル→名前をつけて保存→ファイルの種類→「HTML文書(*.html)」
![Page 13: JavaScriptでプログラミングを行うための注意事項](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559889cd1a28ab61398b47e7/html5/thumbnails/13.jpg)
TeraPadの場合 ファイル→文字/改行コード指定保存
ここで現在の文字コードが確認できる
![Page 14: JavaScriptでプログラミングを行うための注意事項](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559889cd1a28ab61398b47e7/html5/thumbnails/14.jpg)
TeraPadの場合 文字コード→ 「 UTF-8N 」
![Page 15: JavaScriptでプログラミングを行うための注意事項](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559889cd1a28ab61398b47e7/html5/thumbnails/15.jpg)
TeraPadの場合 ファイル→名前をつけて保存→ファイルの種類→「HTMLファイル」
![Page 16: JavaScriptでプログラミングを行うための注意事項](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559889cd1a28ab61398b47e7/html5/thumbnails/16.jpg)
Dreamweaverの場合 編集→環境設定→新規ドキュメント→エンコーディング初期設定→Unicode(UTF-8)
![Page 17: JavaScriptでプログラミングを行うための注意事項](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559889cd1a28ab61398b47e7/html5/thumbnails/17.jpg)
Dreamweaverの場合 (すでに開いている場合) 修正→ページプロパティ→タイトル/エンコーディング →エンコーディング→Unicode(UTF-8)
![Page 18: JavaScriptでプログラミングを行うための注意事項](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559889cd1a28ab61398b47e7/html5/thumbnails/18.jpg)
HTMLのテンプレート <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScriptサンプル</title> </head> <body> </body> </html>
←ここに追加していきます
![Page 19: JavaScriptでプログラミングを行うための注意事項](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559889cd1a28ab61398b47e7/html5/thumbnails/19.jpg)
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のコードを 記述する
![Page 20: JavaScriptでプログラミングを行うための注意事項](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559889cd1a28ab61398b47e7/html5/thumbnails/20.jpg)
文字化け対策
<meta charset="UTF-8"> を
<meta charset=UTF-8>や<meta chrset="UTF-8"> のように間違ったり
<meta charset=“UTF-8”>のように 二重引用符を全角で書いたりすると
一部のブラウザ(主にIE)はS-JISとして 読み込んでしまうため文字化けを起こします
![Page 21: JavaScriptでプログラミングを行うための注意事項](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559889cd1a28ab61398b47e7/html5/thumbnails/21.jpg)
コメントの利用例 <!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>
![Page 22: JavaScriptでプログラミングを行うための注意事項](https://reader033.vdocuments.mx/reader033/viewer/2022060200/559889cd1a28ab61398b47e7/html5/thumbnails/22.jpg)
インデントの重要性 コードを書く時は普通、可読性向上のために スペースやタブによるインデントをつける。 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>