://sbfl.net/blog/2017/12/14/javascript-programming-1/
javascript
作成環境(IDE)として ＡＴＯＭ（無料） をインストール日本語化して使ってみます。
ＰＣででＤＬ後インストールと日本語化
本家 ＤＬ サイト https://atom.io/
atomDL1.png
1.37.0 (2019-06-02現在バージョン）
インストールのままだと、英語で、動作テスト環境が含まれていないようなので
拡張機能としてatom起動画面より日本語化のために
settings＞packages＞
検索窓に japanese menu （エンターキー）
atomDL0 package jmenu1.png
をinstall
次に動作テスト環境（ブラウザ表示テスト環境）を提供するために
atom-live-server という機能を追加インストールするようです。
設定＞パッケージ＞コミュニティパッケージ＞atom-live-server2.3.0
atomDL2 package.png
atomDL3 package.png
一応プログラムを終了させるて
スタートから再起動後作成作業練習
作業練習は実行結果をわかりやすくするため
別サイト
https://ja.javascript.info/hello-world
の内容でやってみました。
それとデータの保存場所を確保するために
atom を立ち上げてprojectというatom専用の入れ物を作ります。
ファイル＞プロジェクトフォルダの追加をクリック
今回フォルダ名はjsprogramming として外付けＵＳＢメモリの中に作成しました。
ファイル名はtest1.html としてプログラムコピペ後このjsprogrammingのフォルダの中に保存しました。
内容はコピペで （アラートを表示する内容のようです）↓
5 atomDL4 test code1.png
プログラムを動作させてみます。 タブのtest1.html をクリックするだけです。
6 atomDL5 test code2.png
https://ja.javascript.info/alert-prompt-confirm
対話関係のプログラムテスト： : alert, prompt, confirm
書式
alert(message);
例:
alert("Hello");
書式
result = prompt(title[, default]);
例:
let age = prompt('How old are you?', 100); //let 変数宣言 age変数名
alert(`You are ${age} years old!`); // You are 100 years old! 入力データ${…} の中にラップ
書式
result = confirm(question);
例:
let isBoss = confirm("Are you the boss?");
alert( isBoss ); // true OKが押された場合
フォルダー jsprogramming
ファイル名 test_alert.html
test_prompt.html
test_confirm.html
何かの具合で動作テスト環境が少し変えてしまったようで、再度動作環境考察
メニュー＞パッケージ(P)>atom-live-server>start server ←ここではない
7 atom test code3.png （↓ここではない）
メニュー＞packages>atom-live-server>start server ←こちら で動作
8 atom test code3.png （↓こっちのほう）
で新規ウインドウが表示される
テストプログラム名が並んで表示されているので動作テスト開始（クリック）
9 atom test code3.png
alert
10 atom test code3alert1 .png
ok クリック
10 atom test code3alert2 .png
動作テスト完了alert
prompt
11 atom test code3.png
ok クリック
12 atom test code3 prompt2 .png
ok クリック
13 atom test code3 prompt3 .png
動作テスト完了prompt
ブラウザの戻るボタンをクリックするとlisting directory/ 127.0.0.1.3000 に戻ります。
test1.html
14 atom test code3 test1 .png
ok クリック
15 atom test code3 test1-2 .png
動作テスト完了test1.html
confirm
16 atom test code3 confirm1 .png
ファイル(F)>新規ファイル(N)
17 atom test code3 test2 .png
ところが何も反応しない＾＾；
そこでProjectペインの中で右クリック 新規ファイル Ａ をクリック
18 atom test code3 test3 .png
入力枠が表示される
19 atom test code3 test4 .png
test_confirm.htm
を入力後 キーボードよりエンターキー
Projectペインにファイル名test_confirm.htm が追加され
コード入力画面に入力プロンプトが青色点滅
20 atom test code3 confirm5 .png
test1.html のコード
<!DOCTYPE HTML>
<html>
<body>
<p>Before the script...</p>
<script>
alert( 'Hello, world!' );
</script>
<p>...After the script.</p>
</body>
21 atom test code3 confirm6 .png
<!DOCTYPE HTML>
<html>
<body>
<p>Before the script...</p>
<script>
let isBoss = confirm("Are you the boss?");
alert( isBoss ); // true OKが押された場合
</script>
<p>...After the script.</p>
</body>
22 atom test code3 confirm7 .png
コードを保存します。
保存操作をし忘れることもありで、保存されていないことの確認ｗ
23 atom test code3 confirm8 .png
保存されていない確認画面
24 atom test code3 confirm9w .png
ファイル(F)＞保存(S)クリック
25 atom test code3 confirm10 .png
再度メモ帳から開きなおすと
コードが記述され保存されている。
26 atom test code3 confirm11 .png
一度メニューバー＞Packages から終了させて
27 atom test code3 confirm12 .png
start serverクリックで再起動させる
28 atom test code3 confirm13 .png
test_comfirm.htm をクリックして動作させる
29 atom test code3 confirm14 .png
動作中
30 atom test code3 confirm15 .png
ok クリック
31 atom test code3 confirm16 .png
ok クリック
32 atom test code3 confirm17 .png
せっかくなので このまま アメブロに仕込んでみます。ｗ
<script>
alert( 'Hello, world!' );
</script>
を入れて動作確認
このままだとさすがにただのテキスト文にされてしまう。
容追加中 2019/06/16 14：58工事中～
Continue