JavaScriptとは何ですか？どのように機能しますか？

JavaScriptとは何ですか？どのように機能しますか？

JavaScriptは、現代のWeb開発の定番となっています。この強力な言語は、Web開発者が理解するために不可欠なツールに進化しました。





JavaScriptには、従来のプログラミング言語とは異なる特別な機能があります。それが何であるか、それがどのように機能するか、そしてあなたがそれで何ができるかを掘り下げていきます。それを分解しましょう。



JavaScriptとは何ですか？

JavaScriptは、Web用のスクリプト言語です。これはインタプリタ言語です。つまり、CやC ++のようにコードを翻訳するためにコンパイラは必要ありません。 JavaScriptコードはWebブラウザで直接実行されます。





この言語の最新バージョンは、2018年6月にリリースされたECMAScript2018です。

JavaScriptはHTMLおよびCSSと連携して、WebアプリまたはWebページを構築します。 JavaScriptは、Google Chrome、Firefox、Safari、Microsoft Edge、Operaなどの最新のWebブラウザでサポートされています。AndroidおよびiPhone用のほとんどのモバイルブラウザは、JavaScriptもサポートするようになりました。



JavaScriptは、Webページの動的要素を制御します。これはWebブラウザーで機能し、最近ではWebサーバーでも機能します。アプリケーションプログラミングインターフェイス（API）もJavaScriptでサポートされており、より多くの機能を提供します。

Webプログラミングがどのように機能するかを理解すると、JavaScriptがどのように機能するかをすべて理解するのが少し簡単になるので、もっと学びましょう。



Webアプリの構成要素

Webサイトとアプリを構築するコンポーネントには、ハイパーテキストマークアップ言語（HTML）、カスケードスタイルシート（CSS）、JavaScriptの3つがあります。それぞれがWebアプリを作成する役割を持っています。

  • HTML Webページのスケルトンを作成するマークアップ言語です。すべての段落、セクション、画像、見出し、テキストはHTMLで書かれています。コンテンツは、HTMLで記述された順序でWebサイトに表示されます。
  • CSS レイアウトのスタイルと追加の側面を制御します。 CSSは、色、フォント、列、境界線などを作成するWebサイトのデザインを作成するために使用されます。これにより、Webサイトはプレーンテキスト要素からカラフルなデザインになります。
  • 3番目の要素は JavaScript。 HTMLとCSSは構造を作成しますが、そこからは何もしません。 JavaScriptは、アプリに動的なアクティビティを作成します。 JavaScriptでのスクリプトは、ボタンがクリックされたときの機能、パスワードフォームの認証方法、メディアの制御方法を制御するものです。

3つの部分すべてが互いに調和して機能し、本格的なアプリを作成します。 HTMLとCSSに完全に慣れていない場合は、HTMLとCSSについてさらに学ぶことをお勧めします。



低所得世帯のためのクリスマス支援

JavaScriptはどのように機能しますか？

JavaScriptを作成する前に、JavaScriptが内部でどのように機能するかを知ることが重要です。学ぶべき2つの重要な部分があります：Webブラウザがどのように機能するかとドキュメントオブジェクトモデル（DOM）です。

Webブラウザーは、Webページをロードし、HTMLを解析し、コンテンツからドキュメントオブジェクトモデル（DOM）と呼ばれるものを作成します。 DOMは、WebページのライブビューをJavaScriptコードに提示します。

ブラウザは、画像やCSSファイルなど、HTMLにリンクされているすべてのものを取得します。 CSS情報はCSSパーサーから取得されます。

HTMLとCSSは、最初にWebページを作成するためにDOMによってまとめられます。次に、ブラウザのJavaScriptエンジンはJavaScriptファイルとインラインコードをロードしますが、コードをすぐには実行しません。 HTMLとCSSの読み込みが完了するのを待ちます。

これが完了すると、JavaScriptはコードが記述された順序で実行されます。これにより、DOMがJavaScriptコードによって更新され、ブラウザーによってレンダリングされます。

ここでの順序は重要です。 JavaScriptがHTMLとCSSの終了を待たなかった場合、DOM要素を変更することはできません。

JavaScriptで何ができますか？

JavaScriptは、Pythonのような正規言語で実行できるほとんどのことを実行できる本格的なプログラミング言語です。これらには以下が含まれます：

プレミアムでいくらリンクされているか
  • 変数の宣言。
  • 値の保存と取得。
  • 以下を含む関数の定義と呼び出し 矢印関数 。
  • JavaScriptオブジェクトとクラスの定義。
  • 外部モジュールのロードと使用。
  • クリックイベントに応答するイベントハンドラーを作成します。
  • サーバーコードの記述。
  • そして、はるかに。

警告： JavaScriptは非常に強力な言語であるため、マルウェア、ウイルス、およびブラウザーのハッキングを記述して、ユーザーにそれらを与えることも可能です。これらは、ブラウザのCookie、パスワード、クレジットカードを盗むことから、コンピュータにウイルスをダウンロードすることまで多岐にわたります。

JavaScriptの使用

コード例を使用して、JavaScriptの基本をいくつか見てみましょう。

変数の宣言

JavaScriptは動的に型付けされます。つまり、コードで変数の型を宣言する必要はありません。

let num = 5;
let myString = 'Hello';
var interestRate = 0.25;

演算子

添加

12 + 5
>> 17

減算

20 - 8
>> 12

乗算

5 * 2
>> 10

分割

50 / 2
>> 25

係数

45 % 4
>> 1

配列

let myArray = [1,2,4,5];
let stringArray = ['hello','world'];

関数

JavaScriptは関数を書くことができます、これは数字を追加する簡単な関数です。

function addNumbers(num1,num2){
return num1 + num2;
}
>> addNumbers(10,5);
>> 15

ループ

JavaScriptは、反復のループを実行できます。 forループ と whileループ。

for(let i = 0; i <3; i++){
console.log('echo!');
}
>> echo!
>> echo!
>> echo!
let i = 0;
while(i <3) {
console.log('echo!');
i++;
}
>> echo!
>> echo!
>> echo!

コメント

// Writing a comment
/*Writing a multi-line comment
You can use as many lines as you like
to break up text and make comments more readable
*/

Webページ内

WebページにJavaScriptをロードする最も一般的な方法は、 脚本 HTMLタグ。要件に応じて、次のいずれかの方法を使用できます。

  • 次のように、外部JavaScriptファイルをWebページにロードします。
  • javascriptがWebページとは異なるドメインからのものである場合は、次のように完全なURLを指定できます。
  • JavaScriptはHTMLに直接埋め込むことができます。これが
    alert('Page is loaded');

    です

これらのメソッドの他に、JavaScriptコードをオンデマンドでロードする方法があります。実際、実行時に適切な依存関係が解決されたJavaScriptモジュールのロードと実行専用のフレームワークがあります。

これらはより高度なトピックであり、今あなたは基本を学んでいます。

サンプルJavaScriptコードスニペット

これは、Webページでの使用方法を説明するための簡単なJavaScriptコードサンプルです。これらは、DOMで機能するコードの例です。

  • 以下はすべてを選択します 大胆な ドキュメント内の要素と最初の色を赤に設定します。 var elems = document.getElementsByTagName('b');
    elems[0].style.color = 'red';
  • で画像を変更したい img 鬼ごっこ？以下は、のイベントハンドラーを関連付けます クリック ボタンのイベント。
    Change Image
  • 段落のテキストコンテンツを更新します（ NS ） エレメント？をセットする innerHTML 示されている要素のプロパティ：

    Hello World


    Click me

これらのコードサンプルは、WebページでJavaScriptを使用して何ができるかを垣間見ることができます。始めるためのコーディング方法を教えることができるチュートリアルはたくさんあります。これでも、どのWebページでも試すことができます。コンソールを開いて、JavaScriptコードを試してください。

これで、JavaScriptの機能がわかりました

うまくいけば、この紹介がJavaScriptにいくつかの洞察をもたらし、Webプログラミングに興奮するようになるでしょう。あなたはそれをすべて要約することができます 便利なJavaScriptチートシート 。 JavaScriptについて学ぶことはもっとたくさんあります。より快適に感じたら、ドキュメントオブジェクトモデルの使用方法を学んでみませんか？ TypeScriptについて学ぶことにも興味があるかもしれません。

共有 共有 つぶやき Eメール コマンドプロンプトを使用してWindowsPCをクリーンアップする方法

Windows PCのストレージ容量が不足している場合は、これらの高速コマンドプロンプトユーティリティを使用してジャンクを一掃します。

アマゾンの注文がまだ発送されていないのはなぜですか
次を読む 関連トピック
  • テクノロジーの説明
  • プログラミング
  • ウェブ開発
  • JavaScript
  • スクリプティング
著者について アンソニー・グラント（公開された40の記事）

Anthony Grantは、プログラミングとソフトウェアをカバーするフリーランスのライターです。彼は、プログラミング、Excel、ソフトウェア、およびテクノロジーに手を出しているコンピューターサイエンスの専攻です。

アンソニー・グラントのその他の作品

ニュースレターを購読する

ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。

購読するにはここをクリックしてください