何ですか Javaスクリプト？Hello Worldの例を含む紹介

何ですか Javaスクリプト？

Javaスクリプトは、ウェブページに動作を追加する高水準プログラミング言語です。ウェブの3つのコア技術の1つです。HTMLは構造を提供し、CSSは外観を提供し、 Javaスクリプトがインタラクションを提供します。検索ボックスに入力すると候補が表示されたり、写真カルーセルがスライドしたり、サインアップフォームに入力漏れの警告が表示されたりするたびに、 Javaスクリプトがバックグラウンドでその処理を行っています。

下の図は、スクリプトが通常のウェブページのマークアップとどのように並んで配置されるかを示しています。

その生涯のほとんどにおいて JavaScriptは、ブラウザ内でのみ実行されるため、クライアントサイドスクリプト言語として説明されていました。しかし、その説明は今では不完全です。2009年にNode.jsが登場して以来、同じ言語はWebサーバー、コマンドラインユーティリティ、デスクトップアプリケーション、モバイルアプリにも使用されています。今日では、より正確な説明は次のようになります。 Javaスクリプト言語は汎用的な言語であり、ブラウザにおいて非常に強い存在感を示している。

その言語を特徴づける要素は以下のとおりです。

• 動的型付け: 変数は、今は数値を格納していても、少し後には文字列を格納している可能性があるため、プログラムの実行中に型チェックが行われます。
• 解釈およびジャストインタイムコンパイル： ChromeのV8やNode.jsなどのエンジンは、高速化のために頻繁に実行されるコードを機械語にコンパイルします。
• マルチパラダイム： 命令型、関数型、オブジェクト指向型のすべてのスタイルがサポートされています。
• イベント主導型: コードは上から下へ実行されて停止するのではなく、クリック、キーストローク、タイマー、ネットワーク応答に反応します。ping.
• イベントループを備えたシングルスレッド： ネットワーク呼び出しのような処理の遅い作業は、ページをフリーズさせるのではなく、キューに格納されます。

の歴史 Javaスクリプト

ブレンダン・アイクが Java1995年にNetscape Communicationsでスクリプトを作成し、約10日間で最初の動作プロトタイプを作成した。社内ではプロジェクトは モカNetscape Navigator 2.0 ベータ版に同梱されていました。 ライブスクリプト 1995年9月に改名され、 Javaスクリプト 1995年12月、NetscapeとSun Microsystems（所有していた会社）とのマーケティング契約の一環として Java 当時の。

その名称変更こそが、多くの初心者が今でもそう考えている唯一の理由である。 JavaScript は軽量版です Javaこの2つの言語は、設計、所有権、実行時において関連性がありません。Netscapeは1996年にこの言語をEcma Internationalに提出し、ECMA-262規格の初版は1997年6月に発行されました。以下の表は、古いコードを読む際に最も重要なマイルストーンを示しています。

年間リリースサイクルのため、2015年以前に書かれたコードは現代のコードとは明らかに異なって見える。古いチュートリアルでは var どこでも、現在のコードでは let (NAIST) と const を特定いたします。 変数を宣言する Javaスクリプト.

何ですか Javaスクリプトの用途は？

Javaスクリプト言語はもはや小さなページ上の工夫に留まらない。同じ構文が今や4つの異なる場所で使われており、それが開発者調査で最も広く使われている言語の一つとして常に上位にランクインする理由である。

ゲーム、データ視覚化、ブラウザ拡張機能、小規模なハードウェアプロジェクトもすべてこれに依存しています。初心者にとって、その実用的な結果は単純です。構文に費やす労力は、後々のサーバー作業、モバイル作業、テスト自動化に直接つながります。言語が実際の問題にどのように適用されるかを確認したい場合は、一連の作業に取り組んでください。 実用的 Javaスクリプトコードの例 基本が身についたら。

実行方法 Javaスクリプト？

Javaスクリプトは単独では実行されません。ホスト環境が必要です。 Javaスクリプト エンジンChromeとEdgeはV8を使用しています。 Firefox SpiderMonkeyを使用し、Safariは JavaScriptCore。ブラウザがHTMLページをダウンロードし、スクリプトを見つけると、そのスクリプトをエンジンに渡します。エンジンはスクリプトを解析、コンパイル、実行します。

2番目のホスト環境はNode.jsで、ブラウザの外側に同じV8エンジンを組み込んでいます。このようにして、同じ言語がサーバー上またはターミナルで実行されます。実用的な利点は、 Javaスクリプトは 最新のブラウザはすべてそれをサポートしています。 on Windows、Linux、および macOSそのため、訪問者がどのブラウザを使用しているかを気にする必要はほとんどありません。これは、Internet Explorerでしか動作しなかったVBScriptよりも明らかに改善されています。 Windows そして現在では、Internet Explorer自体とともに非推奨となっています。

必要なツール

コードを記述するにはテキストエディタが必要で、結果を表示するにはブラウザが必要です。 Notepad++, Visual Studio Code, Sublime Text、また、使い慣れたエディタであればどれでも構いませんが、構文ハイライトと括弧のマッチング機能を備えたエディタを使えば、デバッグの手間を大幅に省けます。最新のブラウザであればどれでも動作します。 Google Chrome, Firefox, Microsoft EdgeまたはSafari。この2つ以外に、購入したりインストールしたりする必要のあるものは何もありません。

シンプルな Javaスクリプトプログラム

あなたが保つなら JavaHTMLドキュメント自体の中にスクリプトを記述する場合、すべてのコードは<script>タグで囲む必要があります。 <script> タグと閉じタグ </script> タグ。これは、ブラウザがコードを周囲のマークアップから区別する方法です。古いページも設定されています。 type 属性、次のように記述されます <script type="text/javascript">これは、VBScript のような競合するクライアントサイド言語が存在していた時代には必要でした。現代のページでは、HTML5 がこれを扱うため、これを省略しています。 text/javascript デフォルト設定です。以下の2つのバージョンは機能的に同一であり、どちらも有効です。

ハローワールドの例

従来の最初のプログラムはメッセージを表示します。次のマークアップをファイルに配置してください。 hello.html そしてブラウザで開きます。

<html>
<head>
	<title>My First JavaScript code!!!</title>
	<script type="text/javascript">
		alert("Hello World!");
	</script>
</head>
<body>
</body>
</html>

出力：

A browser dialog box opens containing the text:

Hello World!

注意： type="text/javascript" HTML5では不要です。以下のコードも全く同じように動作します。

<html>
<head>
	<title>My First JavaScript code!!!</title>
	<script>
		alert("Hello World!");
	</script>
</head>
<body>
</body>
</html>

出力：

A browser dialog box opens containing the text:

Hello World!

ページが数行を超えると、スクリプトを独自の .js ファイルはマークアップの可読性を維持し、ブラウザがコードをキャッシュできるようにします。違いについては、この比較で詳しく説明します。 内部と外部 Javaスクリプト.

初めてのスクリプトの書き方と実行方法

実行するための3つの実際的な方法があります Javaスクリプトは3種類あり、それぞれ異なる状況に適しているため、初心者は3種類すべてを試してみるべきです。

1. ブラウザのコンソール。 これは最速のオプションで、ファイルは一切必要ありません。任意のウェブページを開き、 F12 （またはCtrl+Shift+I オン Windows Linux では、Cmd+Option+I で macOS）、およびを選択します 領事 タブキーを押します。一行入力してEnterキーを押すと、結果がすぐに表示されます。単一の式をテストしたり、関数の戻り値を確認したりするのに最適な場所です。

// Type each line into the browser console and press Enter
console.log(2 + 2);
console.log("Guru" + 99);
console.log(Math.max(4, 12, 7));
console.log(typeof "hello");

出力：

4
Guru99
12
string

2行目に注目してください。文字列に数字99を追加すると「Guru” は文字列を生成します “Guruエラーではなく99なので、 Javaスクリプトは数値を自動的にテキストに変換します。この動作は便利ですが、初心者が陥りやすい典型的なバグの原因でもあります。

2. HTMLファイル。 これは、上に示した「Hello World」の例です。フォームの値を読み取ったり、要素を変更したりするなど、コードがページ自体にアクセスする必要がある場合はいつでも使用してください。

3. ターミナルからNode.jsを起動します。 Node.jsをインストールし、コードをファイルに保存します。 .js 拡張機能を実行してから、 node first-script.js何もレンダリングされないので console.log これがあなたの出力チャネルになります。これは、HTMLを使わずに純粋な言語機能を練習したい場合に最適な方法です。

// first-script.js
const language = "JavaScript";
const createdBy = "Brendan Eich";
const releaseYear = 1995;

console.log(language + " was created by " + createdBy + " in " + releaseYear + ".");

const usedFor = ["Interactive web pages", "Server apps with Node.js", "Mobile apps"];

usedFor.forEach(function (item, index) {
  console.log(index + 1 + ". " + item);
});

出力：

JavaScript was created by Brendan Eich in 1995.
1. Interactive web pages
2. Server apps with Node.js
3. Mobile apps

この短いスクリプトは、あなたが頻繁に目にするであろう３つのアイデアをすでに使用しています。定数は次のように宣言されます。 const、 配列 値のリストを保持し、コールバック関数が渡されます。 forEach同じループを書き換える for ステートメントは、学習した後に役立つ練習です ループ Javaスクリプト.

Javaスクリプト対 Java

これらの名前はプログラミング史上最大の失敗であり、それらが引き起こす混乱を早めに解消しておく価値がある。 JavaScriptは、1995年にマーケティング上の理由からLiveScriptから改名されました。 Java はウェブ上で最も話題になった技術だった。この2つの言語は、異なる企業に所属する異なる人々によって、異なる問題解決のために設計された。

唯一の共通点は、どちらもC言語から波括弧構文を借用している点です。一方を学んでも他方は学べませんが、共通の構文のおかげで後者の言語が少し読みやすくなります。ping あなたに訴えます、 TypeScript 静的型レイヤーを上に追加します Java平文にコンパイルされるスクリプト Javaスクリプト、そしてその違いはここに記載されています TypeScript (NAIST) と Javaスクリプト比較.

基本が整ったので、次の自然なステップは 相互作用的 Java脚本練習をタップし、その後、 変数とデータ型、続いて アレイ (NAIST) と loops。 その後、 オブジェクト指向 Javaスクリプト オブジェクト、プロトタイプ、クラスがどのように組み合わさるかを説明し、 文字列のフォーマット 本書では、ほぼすべてのスクリプトで使用するテキスト処理について解説します。

よくあるご質問