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的一些笔记,喜欢就点赞收藏吧!!!

你可能感兴趣的:(javascript,开发语言,ecmascript)