プログラミングのすすめ 第三歩 JavaScript

【paters】

プログラミングのすすめ　第三歩　は、JavaScript です。JavaScript の一番の特徴は、Webブラウザー上で実行できることです。特別なプログラミング環境を用意する必要はなく、Microsoft Edge,Google Chrome,Mozilla Firefox,Safari 等々　ほとんどのWeb ブラウザーで動きます。

会員数は国内最大級の180万人を突破！【paters】

コマンド・プロンプトから実行するJavaScript
Webブラウザーで実行するJavaScript　テキスト出力　document.write()
その他のテキスト出力方法 console.log()
HTML innerText 変更によるテキスト出力
HTML 外のJavaScript ファイル .js の実行方法
日本語の文字化けの原因

コマンド・プロンプトから実行するJavaScript

線香ギフト贈答用日本香堂宇野千代の線香特撰淡墨の桜 8小箱塗箱入お線香お供え喪中見舞い喪中はがきお歳暮新盆見舞い初盆お盆お供え物お中元お彼岸進物線香供物微煙老舗サイトのラブサーチ[18歳以上]

それでは、最初の一歩は　Hello World！　を表示するJavaScriptのプログラムを作って行きましょう。JavaScript のプログラミングを補完してくれるエディタもありますが、まず最初は、notepad を立ち上げてプログラムを記述して行きます。

Windows の左下の窓に notepad とキーインし改行してください。

Notepad が立ち上がりますので、 WScript.Echo(“Hello, world!”); と記述して　js_hw.js という名前で保存して下さい。

JavaScript ファイルの拡張子は、js です。

それでは、このJavaScript　ファイルを実行してみましょう。

コマンド・プロンプト　を立ち上げて下さい。

保存した js_hw.js があるディレクトリーに移動して、js_hw.js とタイプして実行してください。小さい Window がポップアップして Hello,world! と表示されました。最初の JavaScript は　Webブラウザーで実行するものではなく、Windows コマンド・プロンプトから実行するものでした。

Webブラウザーで実行するJavaScript　テキスト出力　document.write()

マッチングなしでメッセージ可能ハッピーメール(18禁)

それでは、次はWebブラウザーで実行されるJavaScriptを作って行きましょう。

何でもお使いのエディターを立ち上げて次のコードを記述してください。

<!DOCTYPE html>
<html>
   <head>
   </head>
<script>
document.write("Hello World!");
</script>
<body>
</body>
</html>

このコードを JS_HelloW.html のファイル名で保存して下さい。

ファイル・エクスプローラを立ち上げて下さい。

保存したディレクトリーを表示し、JS_HelloW.html をダブル・クリックして開いて下さい。

既定のWebブラウザーが立ち上がり結果が表示されます。私の場合は、既定ブラウザーは、Microsoft Edge です。

document.write() は、Ｗｅｂページにテキストを出力するものでした。JavaScriptでは、この他にもテキストを出力する方法がいくつかあります。そちらを試して行きましょう。

その他のテキスト出力方法 console.log()

先ほどの JS_HelloW.html の内容を以下に書き換えて下さい。

<!DOCTYPE html>
<html>
   <head>
   </head>
<script>
Console.log(”Hello World!");
</script>
<body>
</body>
</html>

document.write()　を Console.log() に変更しました。

先ほど、Microsoft Edge が立ち上がって Hello World! が表示されている状態の筈です。そのEdgeで開発者ツールのコンソールを表示します。

右上の・・・　–> その他のツール　–> 開発者ツール　の順にクリックします。

右側の半分にコンソールが表示されます。左上のリロードマークをクリックして JS_HelloW.html をリロードして下さい。

こんどはコンソールの方にHello World! と出ました。このように Console.log() は、コンソールの方にテキストを出力します。

コンソールには、JavaScriptでのエラー内容も出力されます。JavaScript を作ってテストをする時は、コンソールを表示しておけばデバッグの助けになります。

ここまで、JavaScript　をコマンド・プロンプトで実行する方法、html ファイルの <script>タグに記述して、Webブラウザーで実行する方法、Webページにテキストを出力する方法、コンソールにテキストを出力する方法についてご紹介しました。

HTML innerText 変更によるテキスト出力

会員数は国内最大級の180万人を突破！【paters】

次はJavaScriptの出力関数を使わずに、HTMLのinnerTextを変更するやり方でメッセージを表示する方法について見て行きたいと思います。

次のコードを記述して下さい。

<!DOCTYPE html>
<html>

<body>
    <p id="messageArea">no message</p>
</body>
<script>
    var Element = document.getElementById("messageArea");
    Element.innerText = "Hello World!";
</script>
</html>

記述したコードを JS_HelloW_innerText.html のファイル名で保存して下さい。

コードをひとつづつご説明します。

<body>
<p id=”messageArea”>no message</p>
</body>

<body>タグで囲まれたエリアが Webページの表示エリアです。<p id=”messageArea”>no message</p> これで Webページに一つのパラグラフを設置しています。このパラグラフに “messageArea” というIDを設定しています。このパラグラフの要素の innerText は、このまま何も変更しなければ no message です。

試しに、上記のコードの <script> の中をコメントアウトして、この html を Edge で読み込んでみましょう。

<script>
   //var Element = document.getElementById("messageArea"); 
   //Element.innerText = "Hello World!";
</script>

コメントアウトするには、先頭に // を記述して下さい。

JavaScript で何も変更しなければ no message と表示されます。

<script>
   var Element = document.getElementById("messageArea"); 
   Element.innerText = "Hello World!";
</script>

それでは、それぞれのコードについて見て行きましょう。

var Element = document.getElementById(“messageArea”);

ネットでDocument.getElementByIdを検索してみました。

Document.getElementById()
Document の getElementById() メソッドは、 id プロパティが指定された文字列に一致する要素を表す Element オブジェクトを返します。要素の ID は指定されていれば固有であることが求められているため、特定の要素にすばやくアクセスするには便利な方法です。

なかなか難しい表現で、すぐには理解できないですね。要するに、この場合　”messageArea” と ID が付けられたエリアの要素を返します。”no message” と表示されている要素です。

Element.innerText = “Hello World!”;

その要素の innerText を “Hello World!” に替えます。

要素のinnerText “no message” を “Hello World!” に替えたので、 Hello World! と表示されます。

いかがでしたでしょうか。HTMLのinnerTextを変更するやり方でメッセージを表示する方法についてご紹介しました。

HTML 外のJavaScript ファイル .js の実行方法

イククルはコチラ!（18禁）会員数は国内最大級の180万人を突破！【paters】

今までJavaScript を HTML ファイルに <script> タグを使って記述して実行する方法をご紹介してきましたが、次はHTMLには Scriptコードを記述せず、拡張子 .js の JavaScript ファイルを別に作って置いて、HTML からその .js を実行するやり方を見て行きます。

エディターで次のJavaScriptコードを記述して下さい。

var Element = document.getElementById("messageArea"); 
Element.innerText = "Hello World!  Change_innerText.js を実行しました";

このコードを Change_innerText.js というファイル名で保存して下さい。

JS_HelloW_innerText.html の内容を次のように変更してください。

<!DOCTYPE html>
<html>

<body>
 <p id="messageArea">no message</p>
 <script src="Change_innerText.js"></script>
</body>
</html>

それでは、Webブラウザーで JS_HelloW_innerText.html を読み込んで下さい。

日本語の “を実行しました”　の部分が文字化けしています。

日本語の文字化けの原因

これは、“Hello World! Change_innerText.js を実行しました”;　を記述した　Change_innerText.js を UTF-8 (BOM付)　以外のエンコード(文字コード)で保存してしまったためです。UTF-8 (BOM付) で保存しなおして下さい。各エディタでのUTF-8(BOM付)での保存の仕方を次に明示しておきます。