JavaScript 之JS的组成与基本语法

2023年5月17日下午11:24 • JavaScript

下面是详细的“JavaScript 之JS的组成与基本语法”攻略：

JS的组成与基本语法

JS的组成

在研究JS的基本语法之前，必须了解JavaScript的组成。JavaScript由以下3部分组成：

ECMAScript：JavaScript的基础语法部分，包含了核心语言功能和对象。
DOM：Document Object Model，文档对象模型，操作网页内容的API。
BOM：Browser Object Model，浏览器对象模型，操作浏览器窗口的API。

JS的基本语法

注释

在JS中注释有两种风格：单行注释和多行注释。

单行注释以//开头，多行注释以/* */包裹。

示例：

// 这是单行注释

/*
这是
多行
注释
*/

变量

在JS中，使用var关键字来声明变量，变量名可以由字母、数字、下划线和美元符号组成，但不能以数字开头。

示例：

var name = 'John';
var user_id = 123;
var isAdmin = true;

数据类型

JS中有以下几种数据类型：

基本数据类型
String 字符串
Number 数字
Boolean 布尔值
null 空
undefined 未定义
引用数据类型
Object 对象
Array 数组
Function 函数

示例：

var str = 'hello'; // string类型
var num = 12; // number类型
var isAdmin = true; // boolean类型
var obj = {name: 'John', age: 28}; // object类型
var arr = [1, 2, 3]; // array类型

运算符

JS中有以下几种运算符：

算术运算符
+ 加法
- 减法
* 乘法
/ 除法
% 求余数
比较运算符
== 等于
!= 不等于
=== 全等于
!== 不全等于
> 大于
>= 大于等于
< 小于
<= 小于等于
逻辑运算符
&& 逻辑与
|| 逻辑或
! 逻辑非

示例：

var a = 5;
var b = 3;
var c = 2;
var result = (a + b) * c; // 结果为16

var score = 80;
var isPass = score >= 60; // 结果为true

var num1 = 12;
var num2 = '12';
console.log(num1 == num2); // 结果为true
console.log(num1 === num2); // 结果为false

var hasMoney = true;
var isHungry = false;
var canBuyFood = hasMoney && isHungry; // 结果为false

条件语句

JS中的条件语句有以下两种：

if-else语句

var score = 90;
if (score >= 60) {
  console.log('及格了');
} else {
  console.log('没及格');
}

switch语句

var day = 'Monday';
switch(day) {
  case 'Monday':
    console.log('星期一');
    break;
  case 'Tuesday':
    console.log('星期二');
    break;
  default:
    console.log('未知');
}

循环语句

JS中的循环语句有以下两种：

for循环

for (var i = 0; i < 5; i++) {
  console.log(i);
}

while循环

var num = 0;
while (num < 5) {
  console.log(num);
  num++;
}

示例

示例1：计算两个数之和

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>计算器</title>
</head>
<body>
  <input type="text" id="num1">
  <input type="text" id="num2">
  <button onclick="calc()">计算</button>
  <p id="result"></p>
  <script>
    function calc() {
      var num1 = document.getElementById('num1').value;
      var num2 = document.getElementById('num2').value;
      var sum = parseInt(num1) + parseInt(num2);
      document.getElementById('result').innerHTML = '结果为：' + sum;
    }
  </script>
</body>
</html>

示例2：鼠标悬停改变颜色

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>鼠标悬停改变颜色</title>
</head>
<body>
  <div onmouseover="changeColor('red')" onmouseout="changeColor('black')">红色区域</div>
  <div onmouseover="changeColor('blue')" onmouseout="changeColor('black')">蓝色区域</div>
  <script>
    function changeColor(color) {
      event.target.style.color = color;
    }
  </script>
</body>
</html>

以上就是关于“JavaScript 之JS的组成与基本语法”的详细攻略，希望对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript 之JS的组成与基本语法 - Python技术站