前端秘法番外篇----学完Web API,前端才能算真正的入门

简介: 前端秘法番外篇----学完Web API,前端才能算真正的入门



一.引言

众所周知,JS的世界有三大组成部分,ECAMscript掌管语法规则,DOM与HTML文档的解析息息相关,BOM则掌管着浏览器的操作

而API呢,其实就是实现某些功能的内置函数,是维护一方世界的神器

Web API 是一种通过网络(如互联网)访问的应用程序编程接口。它允许不同的应用程序之间进行通信和数据交换。

一般来说,Web API 由一个服务器提供,客户端应用程序(例如网页、移动应用或其他软件)可以通过发送 HTTP 请求来访问这些 API。服务器会响应这些请求,并返回相应的数据或执行相应的操作。

Web API 通常使用标准的 HTTP 方法(如 GET、POST、PUT、DELETE 等)来定义不同的操作。例如,GET 请求用于获取数据,POST 请求用于创建新的资源,PUT 请求用于更新现有资源,DELETE 请求用于删除资源。

通过使用 Web API,开发人员可以方便地整合不同的系统和服务,实现数据共享和功能扩展。它提供了一种松耦合的方式,使得客户端应用程序无需了解服务器端的具体实现细节,只需按照 API 的规范进行请求即可。

Web API 可以使用各种编程语言和框架来实现,常见的技术包括 REST(Representational State Transfer)风格的 API 设计、JSON 或 XML 作为数据格式等。这样可以确保 API 的互操作性和可扩展性。

总的来说,Web API 为开发人员提供了一种便捷的方式,使他们能够利用其他系统提供的数据和功能,从而构建更强大、更集成的应用程序

二.元素的获取和事件

1.获取元素

元素的获取需要调用querySelector/querySelectorAll(获取同属于某一类的所有元素)

let btn = document.querySelector('.btn');

console.dir(btn);

这里我是获取了一个button元素,并将其所有的属性打印出来了

2.各种事件

2.1点击事件

let btn = document.querySelector('.btn');

btn.onclick = function(){

   alert('执行成功!');

}

这里我注册了一个点击事件,并绑定了一个回调函数

2.2键盘事件

主要将三种keydown, keypress, keyup

let txt = document.querySelector('.txt');

txt.onkeydown = function(event){

   let a = event.keyCode;

   console.log(String.fromCharCode(a));

}

这里我们注册了一个键盘点击事件,并绑定了一个回调函数,通过event全局变量得到用户输入数据的编码值,在通过fromCharCode将其转换为字符,但我们不难发现,它是不区分大小写的

let txt = document.querySelector('.txt');

txt.onkeypress = function(event){

   let a = event.keyCode;

   console.log(String.fromCharCode(a));

}

利用keypress可以区分大小写,但是它并不能检测所有的按键信息,所以在实际开发中,我们要检测用户是否按下了某个键,最好用keydown

let txt = document.querySelector('.txt');

txt.onkeyup = function(event){

   console.log('按键松开/抬起');

}

这个是用来检测用户按下某键后是否松开

三.获取&修改操作

1.获取修改元素属性

获取元素属性后可以用console.dir打印

修改元素属性可以使用innerHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <span>这是未修改前的内容</span>
</body>
<script src = "JScode/JS01.js">
</script>
</html>

let sp = document.querySelector('span');
console.log(sp.innerHTML);
sp.innerHTML = "这是修改后的内容";
console.log(sp.innerHTML);
sp.innerHTML = "<h3>这是修改后的页面结构</h3>";

2.修改表单属性

2.1暂停播放键的转换

let btn = document.querySelector('input');
btn.onclick = function(){
    if(btn.value === '播放'){
        btn.value = '暂停';
    }else{
        btn.value = '播放';
    }
}

2.2计数器的实现

let txt = document.querySelector('.txt');
let btn1 = document.querySelector('.add');
let btn2 = document.querySelector('.min');
btn1.onclick = function(){
    txt.value = parseInt(txt.value) + 1;
}
btn2.onclick = function(){
    txt.value = parseInt(txt.value) - 1;
}

2.3全选的实现

let selectorAll = document.querySelector('.selectorAll');

let selector = document.querySelectorAll('.selector');

selectorAll.onclick = function(){

   if(selectorAll.checked){

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

           selector[i].checked = true;

       }

   }

   else{

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

           selector[i].checked = false;

       }

   }

}

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

   selector[i].onclick = function(){

       selectorAll.checked = isCheckedAll(selector);

   }

}

function isCheckedAll(selector){

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

       if(selector[i].checked === false){

           return false;

       }

   }

   return true;

}

3.样式操作

通过WebAPI我们不仅可以修改页面结构,还能修改页面样式,也就是css

3.1行内样式操作

let test = document.querySelector('div');
test.onclick = function(){
    let size = parseInt(this.style.fontSize);
    size += 3;
    this.style.fontSize = size + "px";
}

3.2类名样式操作

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <title>Document</title>

   <style>

       .light{

           background-color: aliceblue;

           color: black;

           width: 100%;

           height: 100%;

       }

       .dark{

           background-color: rgb(48, 46, 46);

           color: aliceblue;

           width: 100%;

           height: 100%;

       }

       html, body{

           width: 100%;

           height: 100%;

       }

   </style>

</head>

<body>

   <div class="light" οnclick="isChange()">

       Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas quibusdam culpa iste fugiat corrupti, commodi, sit voluptatibus illum debitis officiis ex voluptatum voluptatem. Expedita, omnis. Assumenda debitis quas accusamus aliquid.

       Voluptatibus, odio vel dolor illum magnam minus quod, commodi optio quisquam dignissimos necessitatibus id, ab culpa nemo ullam vero? Est modi tempora repudiandae sint dolores sapiente amet quae suscipit necessitatibus.

       Dolor quae cumque corporis dolore. Provident nobis obcaecati necessitatibus aperiam, possimus doloremque nam odio laudantium ipsum placeat quaerat architecto eveniet voluptates excepturi autem cumque? Nobis similique fugit excepturi voluptatum reprehenderit!

       Molestias excepturi asperiores labore reprehenderit deserunt magnam deleniti quis distinctio aperiam atque soluta odit sapiente debitis accusamus dolorum possimus, sint temporibus tenetur consectetur facilis dolorem similique provident. Consequuntur, excepturi ipsum.

       Velit pariatur a soluta aliquam tenetur minima alias, maxime eos perferendis, debitis nobis. Atque quaerat qui vero deserunt. Quasi, libero vitae. Iure non quaerat laborum. Sit autem at aliquam cum!

       Praesentium repellat corrupti quae saepe suscipit, dolor iste? Et dolores aliquid laborum dolor. Commodi, sequi labore corporis unde nam accusamus excepturi error laborum alias ex accusantium reiciendis at? Mollitia, voluptatem.

       Autem ullam beatae sequi sed, perferendis minus molestiae quisquam at deleniti aliquam reprehenderit obcaecati fugit dolorem suscipit tenetur placeat velit doloribus, magni cum, iusto quo consequuntur? Illum ipsum eligendi asperiores.

       Distinctio deserunt debitis sequi et! Ad, accusantium magni quaerat iure eos nostrum quidem mollitia sunt, eum assumenda ullam soluta non voluptatem atque? Odio voluptates atque eius! Ipsam aliquid iure sed!

       Ratione esse veritatis tenetur sapiente nobis at a quas pariatur quaerat numquam ipsa, sed porro quisquam laudantium officiis, quibusdam minus facere eum reprehenderit eligendi totam fugiat magnam. At, dolor voluptatum?

       Quos atque ducimus sint aut pariatur in aliquid molestias deserunt itaque culpa. Enim vel dolore beatae temporibus consectetur molestias dolores facere provident nesciunt, ipsa possimus, modi dignissimos facilis fugiat porro.

       Cum delectus asperiores expedita consectetur nulla placeat, qui cumque necessitatibus earum nobis sed, neque accusamus vero quis nesciunt eum eos odio, esse accusantium facere unde! Inventore sint perferendis a eveniet?

       Quis error porro ea, maxime architecto, quaerat alias doloribus vel facilis saepe quia. Voluptatibus perspiciatis maxime dolores eveniet, possimus eius sit ipsam a quibusdam sequi nemo. Optio molestiae rerum repudiandae!

       Omnis temporibus pariatur neque deserunt, debitis deleniti vel fugit architecto amet libero nemo laborum vitae obcaecati eius odit mollitia expedita quis praesentium, qui error ipsam suscipit eos quam. Fuga, corporis?

       Quis similique voluptatum placeat accusantium, alias consectetur odio dignissimos at velit est temporibus reiciendis! Blanditiis eum nam laboriosam eius labore aut doloremque voluptatem unde consequatur atque inventore amet, neque aperiam.

   </div>

</body>

<script>

   function isChange(){

       let element = document.querySelector('div');

       if(element.className === 'light'){

           element.className = 'dark';

       }else{

           element.className = 'light';

       }

   }

</script>

</html>

四.节点

1.创建节点

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <title>Document</title>

</head>

<body>

 

</body>

<script>

   let element = document.createElement('h3');

   element.innerHTML = "this is a node";

</script>

</html>

2.插入节点

<script>
    let element = document.createElement('h3');
    element.innerHTML = "this is a node";
    let div = document.querySelector('div');
    div.appendChild(element);
</script>

<body>
    <div>
        <p class="p1">标签1</p>
        <p class="p2">标签2</p>
        <p class="p3">标签3</p>
        <p class="p4">标签4</p>
    </div>
</body>
<script>
    let element = document.createElement('p');
    element.innerHTML = "新标签";
    let div = document.querySelector('div');
    div.insertBefore(element, document.querySelector('.p2'));
</script>

第二个参数如果改为null,则效果等同于appendChild

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <title>Document</title>

</head>

<body>

   <div>

       <p class="p1">标签1</p>

       <p class="p2">标签2</p>

       <p class="p3">标签3</p>

       <p class="p4">标签4</p>

   </div>

</body>

<script>

   let element = document.createElement('p');

   element.innerHTML = "新标签";

   let div = document.querySelector('div');

   div.insertBefore(element, document.querySelector('.p2'));

   div.insertBefore(element, document.querySelector('.p3'));

</script>

</html>

需要注意的是,如果一个节点重复插入两次,则只对最后一次生效

3.删除节点

用removeChild即可,注意删除节点的本质是将该节点移出DOM树,而不是销毁它,后续如果需要还可以将它加回来

相关文章
|
13天前
|
编解码 前端开发 JavaScript
构建高效响应式Web界面:现代前端框架的比较
【4月更文挑战第9天】在移动设备和多样屏幕尺寸盛行的时代,构建能够适应不同视口的响应式Web界面变得至关重要。本文深入探讨了几种流行的前端框架——Bootstrap、Foundation和Tailwind CSS,分析它们在创建响应式设计中的优势与局限。通过对比这些框架的栅格系统、组件库和定制化能力,开发者可以更好地理解如何选择合适的工具来优化前端开发流程,并最终实现高性能、跨平台兼容的用户界面。
|
14天前
|
前端开发 JavaScript 关系型数据库
从前端到后端:构建现代化Web应用的技术探索
在当今互联网时代,Web应用的开发已成为了各行各业不可或缺的一部分。从前端到后端,这篇文章将带你深入探索如何构建现代化的Web应用。我们将介绍多种技术,包括前端开发、后端开发以及各种编程语言(如Java、Python、C、PHP、Go)和数据库,帮助你了解如何利用这些技术构建出高效、安全和可扩展的Web应用。
|
15天前
|
编解码 前端开发 JavaScript
Web 前端开发中的最佳实践
本文将介绍 Web 前端开发中的最佳实践,包括代码组织、性能优化、响应式设计和用户体验等方面。通过遵循这些实践,开发人员可以提高开发效率,优化用户体验,并减少潜在的问题和错误。
|
7天前
|
域名解析 Linux PHP
[CTF]ctfshow web入门
[CTF]ctfshow web入门
13 0
|
7天前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
16 1
|
7天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
17 1
|
8天前
|
前端开发 JavaScript vr&ar
前端新技术探索:WebAssembly、Web Components与WebVR/AR
【4月更文挑战第12天】WebAssembly、Web Components和WebVR/AR正重塑Web应用的未来。WebAssembly允许C/C++等语言在Web上高效运行,提供接近原生的性能,如游戏引擎。Web Components通过Custom Elements和Shadow DOM实现可复用的自定义UI组件,提升模块化开发。WebVR/AR(现WebXR)则让VR/AR体验无需额外应用,直接在浏览器中实现。掌握这些技术对前端开发者至关重要。
14 3
|
12天前
|
JavaScript 前端开发 API
游戏开发入门:Python后端与Vue前端的协同工作方式
【4月更文挑战第11天】使用Python后端(Flask或Django)和Vue.js前端开发游戏变得流行,能提高开发效率和可维护性。本文指导如何构建这样的项目,包括设置环境、创建虚拟环境、搭建后端API及前端Vue组件,强调前后端协作和API接口的重要性。这种架构促进团队合作,提升代码质量和游戏体验。
|
29天前
|
机器学习/深度学习 前端开发 算法
利用机器学习优化Web前端性能的探索与实践
本文将介绍如何利用机器学习技术来优化Web前端性能,探讨机器学习在前端开发中的应用,以及通过实际案例展示机器学习算法对前端性能优化的效果。通过结合前端技术和机器学习,提升Web应用的用户体验和性能表现。
|
19天前
|
监控 JavaScript 前端开发
《理解 WebSocket:Java Web 开发的实时通信技术》
【4月更文挑战第4天】WebSocket是Java Web实时通信的关键技术,提供双向持久连接,实现低延迟、高效率的实时交互。适用于聊天应用、在线游戏、数据监控和即时通知。开发涉及服务器端实现、客户端连接及数据协议定义,注意安全、错误处理、性能和兼容性。随着实时应用需求增加,WebSocket在Java Web开发中的地位将更加重要。