JavaScript 及其核心概念：Web 开发初学者指南-js教程-PHP中文网

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

什么是 JavaScript？

JavaScript 是一种编程语言，有助于使网站具有交互性和动态性。 HTML 用于构建网页内容，CSS 用于设计样式，而 JavaScript 则添加功能并允许网页响应用户操作。

例如：
• 单击按钮，就会发生一些事情（例如打开菜单）。
• 您滚动，内容就会动态显示。
• 提交前，表单会检查您的输入（例如电子邮件验证）。

JavaScript 的主要特性（简化）

在浏览器中运行：JavaScript 直接在 Chrome、Firefox 或 Safari 等浏览器中运行，因此无需安装任何额外的东西即可运行。
动态：您可以更改网页（其内容或外观）而无需重新加载。
交互式：它响应点击、鼠标移动或按键等事件。
快速：它运行速度很快，因为它直接在浏览器中运行。
无处不在：JavaScript 可在浏览器（前端）和服务器（后端，使用 Node.js）上使用。

JavaScript 的工作原理（简化）

当您访问网页时：

JavaScript 加载：浏览器加载 JavaScript 文件以及 HTML 和 CSS。
执行代码：浏览器的 JavaScript 引擎（如 Chrome 中的 V8）逐行运行 JavaScript。
与页面交互：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 可以“监听”这些事件并执行特定操作作为响应。这是创建交互式动态网页的关键概念。

<!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 中，循环用于多次重复一段代码。当您想要多次执行一个操作或一系列操作时，它们非常有用，例如迭代数组中的项目或执行任务直到满足条件。

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 循环就会运行。它在每次迭代之前检查条件。



<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。它在每次迭代后检查条件。



// 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？



广泛使用：几乎每个网站都使用 JavaScript。
职业机会：对于网络开发人员至关重要。
易于上手：您只需要一个浏览器即可编写和测试 JavaScript。



  
  
  结论


JavaScript 是一种适合初学者但功能强大的编程语言。 

 通过练习简单的示例并理解关键概念，您

 可以解锁创建交互式和引人入胜的网络的能力

 申请！


          

            
        以上是JavaScript 及其核心概念：Web 开发初学者指南的详细内容。更多信息请关注PHP中文网其他相关文章！