js脚本学习 比较实用的基础

JS脚本学习 比较实用的基础攻略

前言

JavaScript是一种常用的编程语言，广泛用于Web前端和服务器后端开发，现如今几乎所有的网站都离不开JavaScript的支持。本文将介绍JS的一些脚本基础知识，以及一些实用的基础操作方法，旨在帮助初学者快速入门JS。

一、学习资源

1. MDN Web 文档是JS官方文档，包含了JS的语法、API、示例等详细资料。
2. 《JavaScript高级程序设计》是JS的经典入门书籍，全面介绍了JS的语法、核心、DOM、Ajax等内容。

二、JS的基础语法

1.变量

JS中声明变量使用var关键字，例如：

var message = "Hello, world!";

2.数据类型

JS数据类型包括：数字、字符串、对象、布尔值、函数等。

// 数字
var number = 10;

// 字符串
var string = "Hello";

// 对象
var obj = {name: "Tom"};

// 布尔值
var bool = true;

// 函数
function add(num1, num2) {
  return num1 + num2;
}

3.运算符

JS的运算符包括：算术运算符、比较运算符、逻辑运算符等。

// 算术运算符
var a = 3, b = 5;
console.log(a + b); // 8
console.log(a - b); // -2
console.log(a * b); // 15
console.log(a / b); // 0.6

// 比较运算符
console.log(a == b); // false
console.log(a != b); // true
console.log(a > b); // false
console.log(a < b); // true

// 逻辑运算符
var x = true, y = false;
console.log(x && y); // false
console.log(x || y); // true
console.log(!y); // true

4.条件语句

JS的条件语句包括：if语句、switch语句等。

// if语句
var score = 80;
if (score >= 60) {
  console.log("及格");
} else {
  console.log("不及格");
}

// switch语句
var color = "red";
switch (color) {
  case "red":
    console.log("红色");
    break;
  case "green":
    console.log("绿色");
    break;
  case "blue":
    console.log("蓝色");
    break;
  default:
    console.log("未知颜色");
}

5.循环语句

JS的循环语句包括：for循环、while循环等。

// for循环
for (var i = 0; i < 10; i++) {
  console.log(i);
}

// while循环
var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

三、JS的实用操作

1.数组操作

JS中可以用数组来存储数据，以下是一些常用的数组操作。

// 声明数组
var arr = [1, 2, 3, 4, 5];

// 获取数组长度
console.log(arr.length); // 5

// 访问数组元素
console.log(arr[0]); // 1

// 添加元素到数组末尾
arr.push(6);

// 删除数组最后一个元素
arr.pop();

// 数组排序
arr.sort();

// 数组反转
arr.reverse();

// 数组去重
var uniqueArr = [...new Set(arr)];

console.log(arr); // [1, 2, 3, 4, 5]
console.log(uniqueArr); // [1, 2, 3, 4, 5]

2.DOM操作

JS可以通过DOM来操作网页元素，以下是一些实用的DOM操作方法。

// 选择元素
var el = document.querySelector("#myDiv");

// 修改元素内容
el.innerHTML = "Hello, world!";

// 获取元素属性
var value = el.getAttribute("data-value");

// 设置元素属性
el.setAttribute("data-value", "abc");

// 添加样式
el.classList.add("active");

// 移除样式
el.classList.remove("active");

// 监听事件
el.addEventListener("click", function() {
  console.log("click");
});

四、示例说明

示例一：计算阶乘

以下是一个计算阶乘的示例代码。

function factorial(n) {
  if (n == 0 || n == 1) {
    return 1;
  }

  var result = 1;
  for (var i = 1; i <= n; i++) {
    result *= i;
  }

  return result;
}

console.log(factorial(5)); // 120

示例二：生成随机数

以下是一个生成指定范围内的随机数的示例代码。

function random(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

console.log(random(1, 100)); // 57

结论

JS是一种常用的编程语言，掌握其基础知识和实用操作方法对于Web前端和服务器后端开发至关重要。本文介绍了JS的一些基础语法、实用操作方法以及两个示例说明，希望对初学者有所帮助。