js的简单介绍

JavaScript（简称JS）是一种脚本语言，用于向网页添加动态功能，改变页面样式，响应用户事件等。作为一种脚本语言，JavaScript 通常运行在客户端，也就是运行在浏览器端，起到与 HTML、CSS 协同工作的作用，使得网页动态、交互性强。同时，也可以在服务器端运行，如通过Node.js实现。下面就详细介绍一下JS的使用方法和应用案例。

### 使用方法

#### 1. 引入 JS 文件

有两种方式引入 JS 文件：内部引入和外部引入。

- 内部引入：在 HTML 的 `` 或 `` 标签中添加 `

```

- 外部引入：通过 `

```

#### 2. 基础语法

JS 是一种弱类型语言，无需声明变量类型，并且具有良好的灵活性，特别适合用于网页开发。下面简要介绍其基础语法。

- 注释：JS 的注释和 HTML 的注释类似，分为单行注释和多行注释。

```js

// 这是单行注释

/*

这是多行注释

换行还能继续写

*/

```

- 变量：JS 变量的定义和赋值可以同时进行，如下代码。

```js

var a = 1; // 定义变量 a 并赋值为 1

```

- 数据类型：JS 中常见的数据类型有 Number, String, Boolean, Object, Array, Null, Undefined。

```js

var a = 1; // Number 类型

var b = "Hello, World!"; // String 类型

var c = true; // Boolean 类型

var d = {name: "张三", age: 18}; // Object 类型

var e = [1, 2, 3]; // Array 类型

var f = null; // Null 类型

var g; // Undefined 类型

```

- 运算符：JS 也具有基础的算术运算符（`+`, `-`, `*`, `/`），比较运算符（`==`, `===`, `!=`, `!==`, `<`, `<=`, `>`, `>=`），逻辑运算符（`&&`, `||`, `!`）。

```js

var a = 1 + 2; // 返回值为 3

var b = 1 > 2; // 返回值为 false

var c = !true; // 返回值为 false

```

- 函数：函数是 JS 中的重要概念，可以封装重复的代码块，实现代码复用。下面是最基本的函数定义方式。

```js

function funName() {

// 函数体

}

```

- 条件语句：JS 中常见的条件语句包括 `if ... else ...` 和 `switch`

```js

if (condition1) {

// 当条件1满足时执行的代码块

} else if (condition2) {

// 当条件1不满足且条件2满足时执行的代码块

} else {

// 当条件1和条件2都不满足时执行的代码块

}

switch (expression) {

case value1:

// 当 expression 和 value1 相等时执行的代码块

break;

case value2:

// 当 expression 和 value2 相等时执行的代码块

break;

default:

// 当所有值都不匹配时执行的代码块

}

```

#### 3. DOM 操作

JS 最主要的作用是动态改变网页中的元素，通过 JS 对网页元素进行操作，可以实现动态效果，如添加、移除、修改元素，响应用户事件等。这就需要掌握 DOM 操作。下面是 DOM 操作的基本方法。

- 选择元素：通过 `document` 对象可以选择 HTML 页面中的元素。

```js

// 通过 ID 选择元素

var elementById = document.getElementById('myId');

// 通过 class 选择元素

var elementByClass = document.getElementsByClassName('myClass');

// 通过标签名选择元素

var elementByTagName = document.getElementsByTagName('p');

// 获取整个文档对象

var wholeDocument = document.documentElement;

```

- 操作元素：对于选择的元素，JS 可以进行以下操作。

```js

// 获取、修改元素的文本内容

var elementText = elementById.innerHTML; // 获取元素的文本内容

elementById.innerHTML = 'Hello, World!'; // 修改元素的文本内容

// 获取、修改元素的属性

var elementAttribute = elementById.getAttribute('src'); // 获取元素的属性

elementById.setAttribute('src', 'images/myImage.jpg'); // 修改元素的属性

// 添加、删除元素

var newElement = document.createElement('p'); // 创建一个新元素

newElement.innerHTML = 'Hello, New Element!'; // 修改新元素的文本内容

document.body.appendChild(newElement); // 将新元素添加到文档末尾

document.body.removeChild(elementById); // 删除指定元素

```

- 响应事件：JS 可以响应用户事件，如鼠标事件、键盘事件、表单事件等。

```js

// 鼠标事件

elementById.onclick = function() {

// 点击元素执行的代码块

}

// 键盘事件

document.onkeypress = function() {

// 键盘按键按下执行的代码块

}

// 表单事件

elementById.onsubmit = function() {

// 提交表单执行的代码块

}

```

### 应用案例

#### 1. 轮播图

轮播图是网页中经常用到的一个元素，可以用来展示多张图片或内容，通过 JS 可以实现自动轮播，用户手动切换等功能。

代码如下：

HTML

```html

```

CSS

```css

#carousel {

position: relative;

width: 500px;

height: 350px;

}

#carousel > img {

position:absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

opacity: 0;

transition: opacity 1s;

}

#carousel > img.active {

opacity: 1;

}

#carousel > ul {

position: absolute;

bottom: 20px;

left: 50%;

transform: translateX(-50%);

list-style: none;

}

#carousel > ul > li {

display: inline-block;

width: 10px;

height: 10px;

border-radius: 50%;

margin: 0 10px;

background-color: #ccc;

cursor: pointer;

}

#carousel > ul > li.active {

background-color: #f00;

}

```

JS

```js

var index = 0; // 当前显示的轮播图的下标

// 自动轮播

setInterval(function() {

// 显示下一张轮播图

next();

}, 3000);

// 手动切换

var indicators = document.querySelectorAll('#carousel > ul > li');

for (var i = 0; i < indicators.length; i++) {

indicators[i].index = i;

indicators[i].onmouseover = function() {

// 鼠标移到小圆点上时显示对应的轮播图

slideTo(this.index);

};

}

// 显示下一张轮播图

function next() {

index++;

if (index >= 5) {

index = 0;

}

slideTo(index);

}

// 显示上一张轮播图

function prev() {

index--;

if (index < 0) {

index = 4;

}

slideTo(index);

}

// 显示指定下标的轮播图

function slideTo(index) {

// 隐藏当前轮播图

var activeImage = document.querySelector('#carousel > img.active');

activeImage.classList.remove('active');

// 显示指定轮播图

var newImage = document.querySelectorAll('#carousel > img')[index];

newImage.classList.add('active');

// 修改小圆点的状态

var activeIndicator = document.querySelector('#carousel > ul > li.active');

activeIndicator.classList.remove('active');

indicators[index].classList.add('active');

}

```

效果如下：


#### 2. 滚动加载

滚动加载是一种流行的网页功能，可以在用户滚动到页面底部时实现无限加载数据的效果。通过 JS 可以实现该功能。

代码如下：

HTML

```html

```

CSS

```css

#container {

width: 500px;

height: 300px;

border: 1px solid #ccc;

overflow-y: scroll;

}

#list {

list-style: none;

margin: 0;

padding: 0;

}

#list > li {

height: 100px;

line-height: 100px;

text-align: center;

border-bottom: 1px solid #ccc;

}

#loading {

text-align: center;

color: #999;

padding: 10px;

}

```

JS

```js

var page = 1; // 当前页码

var isLoading = false; // 是否正在加载数据

// 滚动事件

var container = document.getElementById('container');

container.onscroll = function() {

// 滚动到底部时加载数据

if (container.scrollTop + container.clientHeight >= container.scrollHeight) {

loadMore();

}

}

// 加载更多数据

function loadMore() {

// 如果正在加载数据，直接返回，避免重复加载

if (isLoading) {

return;

}

isLoading = true;

// 显示 loading 提示

var loading = document.getElementById('loading');

loading.style.display = 'block';

// 模拟异步加载数据

setTimeout(function() {

var ul = document.getElementById('list');

for (var i = 1; i <= 10; i++) {

var li = document.createElement('li');

li.innerHTML = (page * 10) + i;

ul.appendChild(li);

}

// 加载完成，更新页码和状态，并隐藏 loading 提示

isLoading = false;

page++;

loading.style.display = 'none';

}, 1000);

}

```

效果如下：


#### 3. 表单校验

表单校验是常见的网站功能，可以通过 JS 对用户输入的数据进行校验，提高网站的易用性和安全性。

代码如下：

HTML

```html

```

CSS

```css

.error {

color: red;

}

```

JS

```js

// 表单校验

var myForm = document.getElementById('myForm');

myForm.onsubmit = function() {

// 校验用户名

var username = document.getElementById('username').value;

if (!/^[A-Za-z0-9]+$/.test(username)) {

showError('username_error', '用户名只能包含字母和数字');

return false;

}

// 校验密码

var password = document.getElementById('password').value;

if (password.length < 6) {

showError('password_error', '密码长度不能少于6位');

return false;

}

// 校验确认密码

var confirm_password = document.getElementById('confirm_password').value;

if (confirm_password !== password) {

showError('confirm_password_error', '两次密码不一致');

return false;

}

// 校验邮箱

var email = document.getElementById('email').value;

if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(email)) {

showError('email_error', '请输入正确的邮箱');

return false;

}

// 表单校验通过

alert('表单校验通过');

return true;

}

// 显示错误提示信息

function showError(id, message) {

var errorSpan = document.getElementById(id);

errorSpan.innerHTML = message;

}

```

效果如下：


至此，我们就讲述了 JavaScript 的使用方法和三个应用案例。需要注意的是，JS 的应用场景非常广泛，掌握 JS 的基础语法和 DOM 操作是非常重要的，希望本文能够对大家有所帮助。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/