JavaScript是一种常用的编程语言,广泛用于Web前端和服务器后端开发,现如今几乎所有的网站都离不开JavaScript的支持。本文将介绍JS的一些脚本基础知识,以及一些实用的基础操作方法,旨在帮助初学者快速入门JS。
JS脚本学习 比较实用的基础攻略
前言
JavaScript是一种常用的编程语言,广泛用于Web前端和服务器后端开发,现如今几乎所有的网站都离不开JavaScript的支持。本文将介绍JS的一些脚本基础知识,以及一些实用的基础操作方法,旨在帮助初学者快速入门JS。
一、学习资源
- MDN Web 文档是JS官方文档,包含了JS的语法、API、示例等详细资料。
- 《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的一些基础语法、实用操作方法以及两个示例说明,希望对初学者有所帮助。
本文标题为:js脚本学习 比较实用的基础
- 普通js文件里面如何访问vue实例this指针 2022-10-22
- 如何使用整个html表更新数据库(PHP,MySQL) 2023-10-26
- 使用Ajax、json实现京东购物车结算界面的数据交互实例 2023-01-31
- Typescript+Vue大型后台管理系统实战 2023-10-08
- Vue3 使用 element-plus 不生效的原因之一 2023-10-08
- php-如何将MySql DATETIME结果放入类型为datetime-local的HTML输入中 2023-10-26
- JS实现获取剪贴板内容的方法 2023-11-30
- 常用CSS缩写语法总结 2022-10-16
- js清理Word格式示例代码 2023-12-01
- echarts中X轴显示特定个数label并修改样式的方法详 2022-08-31