JavaScript学习记录

爱新觉罗王大锤
91 阅读3分钟

JavaScript是一种脚本编程语言，被广泛应用于Web开发中。它可以在浏览器端或服务器端运行，用于实现用户交互、动态效果、数据验证、前后端通信等功能。

JavaScript的基础概念包括变量、表达式、语句、函数、对象、事件、DOM（文档对象模型）等。

  1. 变量

在JavaScript中，变量可以用来存储各种类型的数据，包括数字、字符串、布尔值、数组、对象等。在声明变量时，需要使用关键字var或let或const，并且给变量赋一个初始值。变量名可以由字母、数字、下划线和美元符号组成，但是不能以数字开头。

// 声明变量
var age = 18;
let name = 'tom';
const PI = 3.14;

在JavaScript中，变量可以重新赋值，并且没有类型限制，因此变量的值可以随时改变。

  1. 表达式

表达式是JavaScript中的计算公式，由操作符、操作数和函数调用组成。常见的操作符包括算术操作符、比较操作符、逻辑操作符等。

// 算术操作符
var a = 2, b = 3;
var c = a + b; // 加法
var d = a - b; // 减法
var e = a * b; // 乘法
var f = a / b; // 除法
var g = a % b; // 取模

// 比较操作符
var h = a < b; // 小于
var i = a > b; // 大于
var j = a <= b; // 小于等于
var k = a >= b; // 大于等于
var l = a == b; // 等于
var m = a != b; // 不等于

// 逻辑操作符
var n = true && false; // 逻辑与
var o = true || false; // 逻辑或
var p = !true; // 逻辑非

除了这些常用的操作符以外，JavaScript还提供了许多其他的操作符来满足不同的需求。

  1. 语句

语句是一组指令，用于控制程序的执行流程。在JavaScript中，主要有以下几种语句：

  • 条件语句：if语句和switch语句，用于根据条件执行不同的代码块。
  • 循环语句：for语句、while语句和do-while语句，用于多次执行相同的代码块。
  • 控制语句：break语句、continue语句和return语句，用于跳出循环、继续下一次循环和返回函数值。
// 条件语句
var score = 85;
if (score >= 90) {
  console.log('优秀');
} else if (score >= 80) {
  console.log('良好');
} else {
  console.log('一般');
}

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

var j = 0;
while (j < 10) {
  console.log(j);
  j++;
}

var k = 0;
do {
  console.log(k);
  k++;
} while (k < 10);

// 控制语句
for (var l = 0; l < 10; l++) {
  if (l == 5) {
    break;
  }
  console.log(l);
}

for (var m = 0; m < 10; m++) {
  if (m == 5) {
    continue;
  }
  console.log(m);
}

function add(a, b) {
  if (a > 0 && b > 0) {
    return a + b;
  } else {
    return -1;
  }
}
  1. 函数

函数是一组可重复使用的代码块，可接受输入参数并返回输出结果。在JavaScript中，函数可以作为变量、参数或返回值来使用，并且函数可以是匿名的。

// 定义函数
function add(a, b) {
  return a + b;
}

// 匿名函数
var add = function(a, b) {
  return a + b;
};

// 参数和返回值
function sum(arr) {
  var result = 0;
  for (var i = 0; i < arr.length; i++) {
    result += arr[i];
  }
  return result;
}

var arr = [1, 2, 3, 4, 5];
var total = sum(arr);
console.log(total);

在JavaScript中，函数也可以作为闭包来使用，闭包是一个拥有独立作用域的函数，可以访问其外部函数的变量。

function outer() {
  var x = 10;
  function inner() {
    console.log(x);
  }
  return inner;
}

var func = outer();
func(); // 输出10

除此之外，JavaScript还提供了一些内置函数，如字符串处理函数、日期处理函数、数学函数等，可以方便地处理各种数据类型和计算需求。

  1. 对象

对象是JavaScript中的数据类型，它可以封装数据和方法，并且可以继承和扩展。在JavaScript中，对象是一个属性的集合，每个属性包括键和值，可以通过点号或方括号语法来访问。

// 定义对象
var person = {
  name: 'Tom',
  age: 18,
  sayHello: function() {
    console.log('Hello, ' + this.name);
  }
};

// 访问属性和方法
console.log(person.name);
console.log(person['age']);
person.sayHello();

除了普通对象以外，JavaScript还支持构造函数和原型链，可以通过它们来创建自定义的对象，并进行继承和重载。

  1. 事件

事件是用户与网页交互时发生的动作，如鼠标点击、键盘输入、窗口关闭等。在JavaScript中，可以通过事件处理函数来响应这些事件。

<!-- HTML代码 -->
<button id="myButton">Click me</button>

// JavaScript代码
var button = document.getElementById('myButton');
button.onclick = function() {
  alert('Hello, world!');
};

除了单个元素的事件处理以外，JavaScript还支持事件委托和事件冒泡，可以简化事件处理和提高效率。

  1. DOM

DOM是文档对象模型的缩写，是一种用于访问和操作HTML和XML文档的API。在JavaScript中，可以使用DOM来动态地修改页面的内容、样式和结构。

<!-- HTML代码 -->
<ul id="myList">
  <li>苹果</li>
  <li>香蕉</li>
  <li>橘子</li>
</ul>

// JavaScript代码
var list = document.getElementById('myList');
var items = list.getElementsByTagName('li');
for (var i = 0; i < items.length; i++) {
  console.log(items[i].innerHTML);
}

除了上述常见的DOM操作以外，JavaScript还支持节点创建、插入、删除、移动、复制等操作，可以实现复杂的页面交互和动画效果。

avatar
文章
阅读
粉丝