JavaScript基础知识点详解：让你轻松掌握语言基础

一：JS是什么意思

Javascript简称js，js是一种脚本语言，是不需要进行编译的，也是浏览器中的一部分，经常用在web客户端脚本语言，主要是用来给html增加动态功能。

二：js有什么用

一般情况下，html页面主要是用于静态内容的显示，但是在实际中，页面很少的静态的，现在是网站都会有一些表单和幻灯片，这些都是使用js来进行交互，其实还有一些语言在可以编写脚本，实际上都是js。

js主要是用web的开发，可以给网站添加各种各样的动态效果，让网页更加美观。

三：js的组成部分

js的组成是有三部分组成，包括基本的语法和文档对象模型，以及浏览器对象模型。

数据类型

JavaScript中的数据类型包括基本类型和引用类型。其中基本类型有：

• 数字(Number)：整数、小数，还可以使用科学计数法。

• 字符串(String)：一串字符，用单引号或双引号括起来。

• 布尔值(Boolean)：true和false两个值。

• null：表示空对象引用。

• undefined：表示未定义的值。

引用类型有：

• 数组(Array)：一组数据的集合，可以包含各种类型的数据。

• 对象(Object)：包含属性和方法的数据结构。

• 函数(Function)：封装了一段可重用的代码块

// 数字：整数、小数，还可以使用科学计数法。
let num1 = 10; // 整数
let num2 = 3.14; // 小数
let num3 = 5e5; // 科学计数法表示的500000

// 字符串：一串字符，用单引号或双引号括起来。
let str1 = 'Hello'; // 使用单引号表示字符串
let str2 = "World"; // 使用双引号表示字符串

// 布尔值：true和false两个值。
let bool1 = true; // true表示真
let bool2 = false; // false表示假

// null：表示空对象引用。
let nullValue = null;

// undefined：表示未定义的值。
let undefValue;

// 数组：一组数据的集合，可以包含各种类型的数据。
let arr1 = [1, 'two', true, null]; // 数组里面可以包含各种类型的数据
let arr2 = new Array(1, 2, 3); // 使用new关键字创建数组

// 对象：包含属性和方法的数据结构。
let obj1 = {name: 'Tom', age: 18}; // 使用{}表示对象
let obj2 = new Object(); // 使用new关键字创建对象
obj2.name = 'Jerry'; // 给对象添加属性

// 函数：封装了一段可重用的代码块。
function add(a, b) { // 定义一个加法函数
  return a + b;
}
let result = add(1, 2); // 调用函数并得到结果
 

一下是给大家出的一些练习题：

好的，以下是几个JavaScript练习题：

1. 编写一个函数，接受两个数字参数，并将它们相加。

2. 编写一个函数，接受一个字符串参数，并反转该字符串。

3. 编写一个函数，接受一个数字参数，并返回该数字的阶乘。

4. 编写一个函数，接受一个数组参数，并返回该数组中的最大值和最小值。

5. 编写一个函数，接受一个字符串参数，并检查该字符串是否为回文字符串（即正序和倒序都一样）。

6. 编写一个函数，接受两个参数，分别为一个字符串和一个正整数。函数将字符串重复n次后返回。

7. 编写一个函数，接受一个数组参数，去除该数组中的重复项，并返回一个新的数组。

8. 编写一个函数，接受一个数字参数n，生成一个长度为n的斐波那契数列数组。

希望这些练习题能够帮助你提升JavaScript编程能力，加油！

变量和常量

在JavaScript中，可以使用var、let和const关键字来声明变量和常量。其中：

• var：在函数作用域内有效，可以被重复声明，可以修改。

• let：在块级作用域内有效，不能被重复声明，可以修改。

• const：在块级作用域内有效，不能被重复声明，不能修改。

// 定义一个名为 message 的变量
let message = 'Hello World';

// 打印 message 变量的值
console.log(message);

// 修改 message 变量的值
message = 'Hello JavaScript';

// 再次打印 message 变量的值
console.log(message);
 

// 定义一个名为 PI 的常量
const PI = 3.141592653589793;

// 打印 PI 常量的值
console.log(PI);

// 尝试修改 PI 常量的值（会报错）
// PI = 3.14;
 

给大家出两个练习题：

1. 编写一个JavaScript程序，要求用户输入两个数字，并输出它们的和、差、积、商（保留两位小数）。提示：需要使用prompt()函数来获取用户输入。

2. 编写一个JavaScript程序，要求用户输入一个年份，判断该年份是否为闰年。如果是闰年，则输出“该年是闰年”；否则，输出“该年不是闰年”。提示：公历年份是4的倍数的，且不是100的倍数，为闰年。（如2008年是闰年，1900年不是闰年；公历年份是400的倍数的，是闰年。（如2000年是闰年））

运算符

JavaScript中的运算符包括算术运算符、比较运算符、逻辑运算符、位运算符等。其中：

• 算术运算符：加、减、乘、除、求余等。

• 比较运算符：大于、小于、等于、不等于等。

• 逻辑运算符：与、或、非等。

• 位运算符：按位与、按位或、按位异或、按位取反等。

// 赋值运算符 let a = 10; // 将10赋值给变量a let b = a; // 将变量a的值赋值给变量b

// 算术运算符 let c = a + b;

// 将变量a和变量b的值相加，结果赋值给变量c let d = a - b;

// 将变量a和变量b的值相减，结果赋值给变量d let e = a * b;

// 将变量a和变量b的值相乘，结果赋值给变量e let f = a / b;

// 将变量a和变量b的值相除，结果赋值给变量f let g = a % b;

// 将变量a除以变量b的余数，结果赋值给变量g

// 比较运算符 let h = a < b;

// 判断变量a是否小于变量b，结果赋值给变量h let i = a > b;

// 判断变量a是否大于变量b，结果赋值给变量i let j = a <= b;

// 判断变量a是否小于等于变量b，结果赋值给变量j let k = a >= b;

// 判断变量a是否大于等于变量b，结果赋值给变量k let l = a == b;

// 判断变量a和变量b的值是否相等，结果赋值给变量l let m = a != b;

// 判断变量a和变量b的值是否不相等，结果赋值给变量m let n = a === b;

// 判断变量a和变量b的值和数据类型是否完全相等，结果赋值给变量n let o = a !== b;

// 判断变量a和变量b的值和数据类型是否不完全相等，结果赋值给变量o

// 逻辑运算符 let p = true;

// 声明一个布尔类型变量p，值为true let q = false;

// 声明一个布尔类型变量q，值为false let r = p && q;

// 判断p和q的值，如果都为true则结果为true，否则为false，结果赋值给变量r let s = p || q;

// 判断p和q的值，如果其中一个为true则结果为true，否则为false，结果赋值给变量s let t = !p;

// 取反操作，如果p的值为true则结果为false，反之亦然，结果赋值给变量t

// 三元运算符（条件运算符） let u = a < b ? "a小于b" : "a不小于b";

// 判断a是否小于b，如果是则结果为"a小于b"，否则为"a不小于b"，结果赋值给变量u

// 赋值运算符 let a = 10;

// 将10赋值给变量a let b = a;

// 将变量a的值赋值给变量b

// 算术运算符 let c = a + b;

// 将变量a和变量b的值相加，结果赋值给变量c let d = a - b;

// 将变量a和变量b的值相减，结果赋值给变量d let e = a * b;

// 将变量a和变量b的值相乘，结果赋值给变量e let f = a / b;

// 将变量a和变量b的值相除，结果赋值给变量f let g = a % b;

// 将变量a除以变量b的余数，结果赋值给变量g

// 比较运算符 let h = a < b; // 判断变量a是否小于变量b，结果赋值给变量h let i = a > b;

// 判断变量a是否大于变量b，结果赋值给变量i let j = a <= b;

// 判断变量a是否小于等于变量b，结果赋值给变量j let k = a >= b;

// 判断变量a是否大于等于变量b，结果赋值给变量k let l = a == b;

// 判断变量a和变量b的值是否相等，结果赋值给变量l let m = a != b;

// 判断变量a和变量b的值是否不相等，结果赋值给变量m let n = a === b;

// 判断变量a和变量b的值和数据类型是否完全相等，结果赋值给变量n let o = a !== b;

// 判断变量a和变量b的值和数据类型是否不完全相等，结果赋值给变量o

// 逻辑运算符 let p = true; // 声明一个布尔类型变量p，值为true let q = false;

// 声明一个布尔类型变量q，值为false let r = p && q;

// 判断p和q的值，如果都为true则结果为true，否则为false，结果赋值给变量r let s = p || q;

// 判断p和q的值，如果其中一个为true则结果为true，否则为false，结果赋值给变量s let t = !p;

// 取反操作，如果p的值为true则结果为false，反之亦然，结果赋值给变量t

// 三元运算符（条件运算符） let u = a < b ? "a小于b" : "a不小于b";

// 判断a是否小于b，如果是则结果为"a小于b"，否则为"a不小于b"，结果赋值给变量u

条件语句和循环语句

条件语句用于根据不同的情况执行不同的代码块。在JavaScript中，可以使用if、else if、else、switch等关键字来实现条件语句。

循环语句用于重复执行相同的代码块。在JavaScript中，可以使用for、while、do…while等关键字来实现循环语句。

函数

函数是封装了一段可重用的代码块，可以接受输入参数并返回输出结果。在JavaScript中，可以使用function关键字来定义函数。函数可以作为变量、对象的属性、数组的元素等来使用。

数组和对象

数组是一组数据的集合，可以包含各种类型的数据。在JavaScript中，可以使用[]或new Array()来创建数组。

对象是包含属性和方法的数据结构。在JavaScript中，可以使用{}或new Object()来创建对象。对象的属性可以使用.或[]来访问，方法可以使用函数来实现。

以下是举例说明：

1. 编写一个程序，输入一个整数，如果这个整数是偶数，则输出“这个整数是偶数”，否则输出“这个整数是奇数”。

2. 编写一个程序，输入一个字符串，如果这个字符串的长度大于等于5，则输出这个字符串的前5个字符，否则输出整个字符串。

3. 编写一个程序，输入一个年份，判断这个年份是否是闰年。若是，则输出“这个年份是闰年”，否则输出“这个年份不是闰年”。

4. 编写一个程序，输入两个整数，分别表示一个数的上限和下限。然后计算出这两个数之间所有奇数的和并输出。

5. 编写一个程序，输入一个整数n，计算出n的阶乘并输出。

6. 编写一个程序，输入一个整数n，计算出n的前n项和并输出。

7. 编写一个程序，输入一个字符串，判断这个字符串是不是回文字符串（正序和倒序的结果都相同）。若是，则输出“这个字符串是回文字符串”，否则输出“这个字符串不是回文字符串”。

8. 编写一个程序，输入一个字符串和一个字符，计算这个字符在字符串中出现的次数并输出。

9. 编写一个程序，输入一个整数n，输出从1到n的所有质数。

10. 编写一个程序，输入一个字符串和一个整数n，将这个字符串循环左移n位后输出。例如，字符串“123456”循环左移2位后变成“345612”。

// 条件语句 - if语句
let age = 18;
if (age >= 18) { // 判断变量age是否大于等于18
  console.log("已成年"); // 如果条件成立则输出"已成年"
} else {
  console.log("未成年"); // 如果条件不成立则输出"未成年"
}

// 条件语句 - switch语句
let fruit = "apple";
switch (fruit) { // 判断变量fruit的值
  case "apple":
    console.log("苹果"); // 如果fruit的值是"apple"，则输出"苹果"
    break; // 跳出switch语句
  case "banana":
    console.log("香蕉"); // 如果fruit的值是"banana"，则输出"香蕉"
    break; // 跳出switch语句
  default:
    console.log("未知"); // 如果fruit的值不是"apple"或"banana"，则输出"未知"
    break; // 跳出switch语句
}

// 循环语句 - for循环
for (let i = 0; i < 5; i++) { // 初始化i为0，每次循环i加1，当i小于5时继续循环
  console.log(i); // 输出i的值
}

// 循环语句 - while循环
let j = 0;
while (j < 5) { // 当j小于5时继续循环
  console.log(j); // 输出j的值
  j++; // j加1
}

// 循环语句 - do...while循环
let k = 0;
do {
  console.log(k); // 输出k的值
  k++; // k加1
} while (k < 5); // 当k小于5时继续循环

以下是关于 条件语句和循环语句练习题：

DOM和事件

DOM(Document Object Model)是指文档对象模型，它是一种用于表示HTML文档的标准，提供了一种访问文档元素的方式。在JavaScript中，可以使用document对象来操作DOM元素。

事件是指用户或浏览器发生的动作或状态变化，例如：点击按钮、滚动页面等。在JavaScript中，可以使用addEventListener()函数来给DOM元素添加事件监听器。

// 获取DOM元素
let btn = document.getElementById("myBtn"); // 通过id获取按钮元素

// 修改DOM元素属性
btn.style.backgroundColor = "red"; // 修改按钮背景色为红色

// 添加事件监听器
btn.addEventListener("click", function() { // 给按钮添加click事件监听器
  console.log("点击了按钮"); // 当按钮被点击时输出日志
});

// 移除事件监听器
btn.removeEventListener("click", function() {
  console.log("点击了按钮");
});

// 阻止事件默认行为
let link = document.getElementById("myLink"); // 通过id获取链接元素
link.addEventListener("click", function(event) { // 给链接添加click事件监听器
  event.preventDefault(); // 阻止链接的默认行为
  console.log("点击了链接"); // 当链接被点击时输出日志
});

// 事件冒泡
let div1 = document.getElementById("div1"); // 通过id获取div1元素
let div2 = document.getElementById("div2"); // 通过id获取div2元素
div1.addEventListener("click", function(event) { // 给div1添加click事件监听器
  console.log("点击了div1"); // 当div1被点击时输出日志
});
div2.addEventListener("click", function(event) { // 给div2添加click事件监听器
  console.log("点击了div2"); // 当div2被点击时输出日志
});
// 点击div2时会触发div1和div2的click事件监听器，事件会从div2开始向上冒泡，最终到达document对象

1. 编写一个程序，当鼠标进入一个div元素时，将这个元素的背景颜色改变为红色；当鼠标离开此元素时，将背景颜色改变为白色。

2. 编写一个程序，当用户在文本框中输入内容时，将此内容显示在页面其他区域中。

3. 编写一个程序，当用户在文本框中输入内容并点击按钮时，将此内容添加到页面中。

4. 编写一个程序，当用户在下拉框中选择不同的选项时，将此选项的值显示在页面其他区域中。

5. 编写一个程序，创建一个按钮，在用户点击此按钮时，将一个新的div元素添加到页面中。

6. 编写一个程序，创建一个按钮和一个文本框，在用户点击按钮时，将文本框中的内容作为新的段落添加到页面中。

7. 编写一个程序，创建一个列表，当用户点击列表中的某一项时，将此项的文本内容显示在页面其他区域中。

8. 编写一个程序，创建一个按钮和一个文本框，在用户点击按钮时，将文本框中的内容作为查询字符串发送到一个API，然后将返回的结果显示在页面中。

9. 编写一个程序，创建一个按钮和一个文本框，在用户点击按钮时，将文本框中的内容作为查询字符串发送到一个API，然后将返回的结果作为音频文件播放。

10. 编写一个程序，创建一个按钮和一个文本框，在用户点击按钮时，将文本框中的内容作为查询字符串发送到一个API，然后将返回的结果作为图片显示在页面中。

以上就是JavaScript基础知识点的全部内容了。希望对你有所帮助！

还有整理的一些笔记和视频要的私信我！（很多关于js基础练习题）

！！！还有我会陆续跟新关于jsAPL的一些笔记，喜欢就点赞收藏吧！！！