ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript とその中心概念: Web 開発の初心者ガイド

JavaScript とその中心概念: Web 開発の初心者ガイド

Susan Sarandonオリジナル: 2024-12-23 01:56:35139ブラウズ

JavaScript and Its Core Concepts: A Beginner’s Guide to Web Development

JavaScriptとは何ですか?

JavaScript は、Web サイトをインタラクティブかつ動的にするのに役立つプログラミング言語です。 HTML は Web ページのコンテンツの構造化に使用され、CSS はスタイルの設定に使用されますが、JavaScript によって機能が追加され、Web ページがユーザーのアクションに応答できるようになります。

例:
• ボタンをクリックすると、何かが起こります (メニューが開くなど)。
• スクロールすると、コンテンツが動的に表示されます。
• フォームは送信前に入力内容をチェックします (メール検証など)。

JavaScript の主な機能 (簡略化)

ブラウザで実行: JavaScript は Chrome、Firefox、Safari などのブラウザで直接実行されるため、追加のものをインストールしなくても機能します。
動的: Web ページをリロードせずに (コンテンツまたは外観) 変更できます。
インタラクティブ: クリック、マウスの動き、キーの押下などのイベントに応答します。
高速: ブラウザ内で直接実行されるため、高速に動作します。
どこでも動作: JavaScript はブラウザー (フロントエンド) とサーバー (バックエンド、Node.js を使用) の両方で使用されます。

JavaScript の仕組み (簡略化)

Web ページにアクセスすると:

JavaScript の読み込み: ブラウザーは、HTML および CSS と一緒に JavaScript ファイルを読み込みます。
コードの実行: ブラウザの JavaScript エンジン (Chrome の V8 など) は JavaScript を 1 行ずつ実行します。
ページとの対話: JavaScript は、次のようなページの一部にアクセスして変更できます。

要素の追加または削除。
ページの一部を動的にスタイル設定します。
ユーザーのアクションに基づいてコンテンツを表示または非表示にします。

明確にするための例

ページ上のテキストを変更する
見出しがあり、JavaScript でそのテキストを変更したいとします。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>JavaScript Example</title>
</head>
<body>
  <h1>



<p>Explanation:</p>

The getElementById("heading") selects the 'h1' element.
.innerText = "Hello, JavaScript!"; changes its text.

Button Click Example
You can make a button do something when clicked.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Click Example</title>
</head>
<body>
  <button>



<p>What Happens:</p>

The button listens for a “click.”
When clicked, JavaScript updates the
tag with a message.

Simple Calculator
Let’s create a calculator for adding two numbers.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Simple Calculator</title>
</head>
<body>
  <input type="number">



<p>How It Works:</p>

The user enters numbers in two input fields.
When the “Add” button is clicked, JavaScript calculates the sum and displays it.

Key Concepts in JavaScript

Variables:
Variables store data that can be used later.

Why Use Variables?

Variables help you:

Store Information: Keep data in memory for later use.
Reuse Values: Avoid rewriting the same value multiple times.
Make Code Dynamic: Change variable values to alter program behavior.

let name = "John"; // Storing the value "John" in a variable called name
console.log(name); // Outputs: John

関数:
JavaScript では、関数は
を目的として設計された再利用可能なコードブロックです。特定のタスクを実行します。これらを使用すると、ロジックの一部を作成できます
一度使用すれば何度でも使用できるため、コードの効率が向上し、
整理されました。

function greet(name) {
  return "Hello, " + name;
}

console.log(greet("Alice")); // Output: Hello, Alice
console.log(greet("Bob"));   // Output: Hello, Bob

*イベント: *
JavaScript のイベントはブラウザ内で発生するアクションまたは出来事であり、多くの場合ユーザーによってトリガーされます (ボタンのクリック、入力フィールドへの入力、ウィンドウのサイズ変更など)。 JavaScript はこれらのイベントを「リッスン」し、それに応じて特定のアクションを実行できます。これは、インタラクティブで動的な Web ページを作成するための重要な概念です。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>JavaScript Example</title>
</head>
<body>
  <h1>



<p>Explanation:</p>

The getElementById("heading") selects the 'h1' element.
.innerText = "Hello, JavaScript!"; changes its text.

Button Click Example
You can make a button do something when clicked.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Click Example</title>
</head>
<body>
  <button>



<p>What Happens:</p>

The button listens for a “click.”
When clicked, JavaScript updates the
tag with a message.

Simple Calculator
Let’s create a calculator for adding two numbers.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Simple Calculator</title>
</head>
<body>
  <input type="number">



<p>How It Works:</p>


The user enters numbers in two input fields.
When the “Add” button is clicked, JavaScript calculates the sum and displays it.



  
  
  Key Concepts in JavaScript


Variables:

 Variables store data that can be used later.

Why Use Variables?

Variables help you:


Store Information: Keep data in memory for later use.
Reuse Values: Avoid rewriting the same value multiple times.
Make Code Dynamic: Change variable values to alter program behavior.


let name = "John"; // Storing the value "John" in a variable called name
console.log(name); // Outputs: John



ループ:

 JavaScript では、ループはコードのブロックを複数回繰り返すために使用されます。これらは、配列内の項目を反復処理したり、条件が満たされるまでタスクを実行したりするなど、1 つまたは一連のアクションを複数回実行する場合に役立ちます。

JavaScript にはいくつかのタイプのループがあり、それぞれがさまざまな状況に役立ちます。最も一般的なものを見てみましょう


for ループ:


for ループは最も基本的なループです。コードのブロックを指定された回数繰り返します。



function greet(name) {
  return "Hello, " + name;
}

console.log(greet("Alice")); // Output: Hello, Alice
console.log(greet("Bob"));   // Output: Hello, Bob





while ループ:


while ループは、指定された条件が true である限り実行されます。各反復の前に状態をチェックします。



<button>



<p><strong>Conditions:</strong><br>
 In JavaScript, conditions are used to perform different actions <br>
 based on whether a specified condition evaluates to true or false. <br>
 This helps control the flow of your program, allowing it to make <br>
 decisions.</p>

<p>Why Use Conditions?</p>

<ul>
<li>Decision Making: Execute code based on specific situations.</li>
<li>Dynamic Behavior: React to user input or external data.</li>
<li>Error Handling: Handle unexpected cases gracefully.
</li>
</ul>
<pre class="brush:php;toolbar:false">let age = 20;

if (age >= 18) {
  console.log("You are an adult.");
} else {
  console.log("You are not an adult.");
}





do...while ループ:


do...while ループは while ループに似ていますが、最初は条件が false であっても、コードが少なくとも 1 回実行されることが保証されます。各反復後に状態をチェックします。



// Print numbers 1 to 5
for (let i = 1; i <= 5; i++) {
  console.log(i);
}
// Output: 1, 2, 3, 4, 5





for...in ループ:


for...in ループは、オブジェクト (キー) のプロパティを反復処理するために使用されます。



// Print numbers 1 to 5 using a while loop
let i = 1;
while (i <= 5) {
  console.log(i);
  i++;  // Don't forget to increment i!
}
// Output: 1, 2, 3, 4, 5





for...of ループ:


for...of ループは、反復可能オブジェクト (配列、文字列、その他の反復可能オブジェクトなど) 内の値を反復処理するために使用されます。



// Print numbers 1 to 5 using do...while loop
let i = 1;
do {
  console.log(i);
  i++;
} while (i <= 5);
// Output: 1, 2, 3, 4, 5





  
  
  JavaScript が使用される場所



フロントエンド開発:
React、Angular、Vue.js などの JavaScript フレームワークは、 
インタラクティブなウェブサイトを構築します。
バックエンド開発:
Node.js を使用すると、サーバー上で JavaScript を実行でき、バックエンド ロジックを強化できます。
API:
JavaScript はリモート サーバーからデータを取得します。



  
  
  なぜ JavaScript を学ぶのか?



広く使用されている: ほぼすべての Web サイトで JavaScript が使用されています。
キャリアの機会: Web 開発者にとって不可欠です。
簡単に始められます: JavaScript を作成してテストするにはブラウザーのみが必要です。



  
  
  結論


JavaScript は初心者向けでありながら強力なプログラミング言語です。 

 簡単な例を練習し、重要な概念を理解することで、

 インタラクティブで魅力的な Web を作成する能力を解放できます 

 アプリケーション!


          

            
        以上がJavaScript とその中心概念: Web 開発の初心者ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript firefox css chrome safari html angular String Array Object if for while using JS number this input Access Other

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：フロントエンド開発: フロントエンド開発の技術を習得する次の記事：フロントエンド開発: フロントエンド開発の技術を習得する

続きを見る