当先锋百科网

首页 1 2 3 4 5 6 7

JavaScript是一种用于网站制作的脚本语言。在网页应用中,JavaScript 可以用来创建动态效果,实现某些特定功能,或检查表单输入等等。JavaScript可以运行在浏览器端(客户端),也可以运行在服务器端(服务端),因此十分具有灵活性,被广泛应用于网页制作和Web应用开发中。

在web应用中,JavaScript应用的范围非常广泛,例如,可以利用JavaScript编写拖拽、标签页、自动完成、地图等等。下面举几个JavaScript应用的例子。

1、轮播图

// HTML结构部分
1
2
3
4
// JavaScript部分 var container = document.querySelector('.slider-container'); var items = document.querySelectorAll('.slider-item'); var len = items.length; var index = 0; // 当前显示的图片的下标 setInterval(function () { index++; if (index === len) { index = 0; } container.style.left = -index * 100 + '%'; }, 3000);

2、动态加载数据

// HTML结构部分
    // JavaScript部分 var list = document.querySelector('.list'); // 模拟请求数据 var data = [ { name: '小明', age: 18 }, { name: '小红', age: 19 }, { name: '小刚', age: 20 }, ]; for (var i = 0, len = data.length; i< len; i++) { var item = document.createElement('li'); item.innerHTML = '姓名:' + data[i].name + ',年龄:' + data[i].age; list.appendChild(item); }

3、表单验证

// HTML结构部分
// JavaScript部分 var form = document.querySelector('form'); var usernameInput = form.querySelector('input[name="username"]'); var passwordInput = form.querySelector('input[name="password"]'); form.addEventListener('submit', function (event) { event.preventDefault(); // 阻止表单默认提交 var errors = []; if (!usernameInput.value) { errors.push('用户名不能为空'); } if (!passwordInput.value) { errors.push('密码不能为空'); } if (errors.length) { form.querySelectorAll('.error').forEach(function (errorEl, index) { errorEl.innerHTML = errors[index] || ''; }); } else { alert('提交表单'); } });

以上是JavaScript应用的一些例子,通过JavaScript编写可以使得网页在交互性上更加丰富和便捷。