【前端动手玩创意】看来要使用那招了吗？fetch你的email出来(15)

目录

【前端动手玩创意】等待的转圈圈效果 (1)

【前端动手玩创意】google五星评分的星星(2)

【前端动手玩创意】CSS-3D卡片翻转效果(3) (今天难度颇高，想挑战再进来！)

【前端动手玩创意】一句CSS做出好看的hero section！(4)

【前端动手玩创意】创造一个Skill bar(5)

【前端动手玩创意】遮蔽广告(D卡未登入)脚本、自定义新增名单(6)

【前端动手玩创意】前端canvas截图的招式！竟然有三招，可存成SVG或PNG (7)

【前端动手玩创意】让你的PDF档案更难被抓取(8)

【前端动手玩创意】哇操！你敢信？花式写todo-list，body里面一行都没有也能搞？(9)

【前端动手玩创意】卡片製作，才不是！是卡片製作器！(10)

【前端动手玩创意】太屌了吧！？用Class(类)製作Jquery的效果！(11)

【前端动手玩创意】置顶按钮，老梗经典｜带你的网页搭电梯(12)

【前端动手玩创意】动态生成的艺术｜小心，乱改DOM你可能会被打脸。(13)

【前端动手玩创意】侧边超质感选单｜帮你的网页多一点质感好吗？(14)

前情提要

最近逛了一个不错的论坛，上面主要是交换技能，实在是一个很棒的网站。
身为人体工程师，
看到好看的人体就想要解剖，而身为前端工程师想要看一下网页前端也很正常。

因此我们使用开发者工具，不需要学咒术，只要按下F12或是右键检查就可以了。
这就是前端的EZ PZ。(简单)
所以我们今天要做的事情，不是自己写html写东西写出来，而是观察人家大师的作品，
去学习人家使用色彩与线条以及光影等等的技术。

效果图

分析完人家的网页，我们也需要动手操作一些东西，否则就不叫做动手玩创意了。
而使用我们今天会学到的东西以后，我们的骇客任务最终结果：

也就是说我们自己透过程式码，让原本不属于网页上的email栏位变出来了！
这不是魔法也不是魔术，真的就是前端动手玩创意的趣味。

先做个声明，此教学纯粹作为示範用途，我也很贴心的帮这些email打马赛克了。
请各位前端超派小高手，好好学习就好了、切勿以身试法、做出坏事。
我们超派但是很乖，乖乖学前端，懂？

观念学习-我在唱什么?我在干什么?原来我是你的猪大哥

你会学到什么:ajax fetch API 动态生成 json 开发者工具

看到这篇文章基本上有福了（？）
虽然我喜欢吃草莓大福、不喜欢蝙蝠，更不是人夫，但。

你有福了。

不是发福，可能会是幸福，因为这篇文章会讲到全网路都没有写的中文教学：开发者工具使用。
为什么我说都没有人教学呢，因为你真的google不到，关于AJAX以及f12的使用奥义，
基本上除非你会使用凝，否则很难练起来。

除此之外，我们今天主打的是ajax fetch API 动态生成 json这些观念，
算是比较中阶的课程唷！
废话结束我们继续观察F12的作用。

开发者工具network的监看

点到network这边可以看看网页都call了什么东西，我们发现移动卷轴到最底端，
会呼叫资料再把内容渲染出来。

点左边的graphql看一下他的response

再来点到response就可以看到，原来网页的画面不是写死的html欸？哦天！
原来这些内容都储存到data里面才被用JS呼叫出来、渲染。
想知道这样子的技巧可以複习:
认识 data model 与 render function

这边不赘述，但我稍微截图让各位知道这个观念，data render也就是前端的牛顿定理。

【前端动手玩创意】动态生成的艺术｜小心，乱改DOM你可能会被打脸。

到此一油后，我们可以干嘛？

知道原来有email这则资讯，只是没有渲染出来，
虽然没有薪水，但我们可以帮偷懒的网页开发者做这份工作。
(开玩笑的啦！这是不好的示範，别乱学。)

也就是效果图里面告诉你的，我已经使用天能法，倒述让你看到结果了。

观念笔记

回顾我们一路走来学到的技术

我似乎"曾经"在昨天还是前天发表的文章提到一件事。

我只能说这篇是自从「备份IT帮发文、一眼全览」最强的JS教学文章！超派，真的不骗( ﾒ∀・)有些人喜欢看前端小试身手，有些人喜欢前端动手玩创意；其实这两个系列的本质都是JS的教学，是可以互相连接的，但也有很多不同的重心。这个系列就是以脚本为主，重点在于创意与发想，打到使用者痛点。【前端动手玩创意】则是以建构网站为起点，任何元素与概念都会变成网页上的一部分，算是比较基础工的建立。

来自:前端小试身手(8)--教你写出「思想审查警卫」，过滤垃圾杂讯的利器！

【前端小试身手】系列一直都是很猛的脚本。的确我没有说谎，「思想警卫脚本」真的很强！
这也是为什么我这篇是来一个【前端动手玩创意】，
因为今天这篇文章的强度，几乎是再度的，辗压任何一篇！Ꮚ･ꈊ･Ꮚ

毕竟我们今天把人家网站都解剖了。
就像是把妹最高的艺术就是娶回家一般。

首先要捲动

// 滚动事件window.addEventListener('scroll', function() {  if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {    // 当滚动到底部时执行emailFind函数    emailFind();  }});

我们设计当触发到捲动底部的时候，就执行我们的emailFind();
也就是call API去得到data。

找资料

要怎么知道email这个data怎么call出来？人家又没有给你API，这时候开发者工具的威力就来了。

刚刚我们是看response的部分，现在我们往左边选，
点到payload就可以看到发送出去的参数。
这边看到原来使用userID是一个方法，那么我们就必须找到userId是什么。

稍微观察了一下网站，狠辛苦地找了老半天，发现原来网址上就有userID。

不过这样是不够的，我们在首页上并没有这样子的资讯。
因此我又继续做名侦探柯北，好好调查。

终于发现有个破绽！

也就是说，每个使用者的大头贴，
都是使用存放在这个网站上的图，而这些图片都用id作为网址的一部份去标记。
于是我们可以针对img去做字串撷取，就能拿到其userID，也就能够当作fetch的参数，
去把email打出来。

使用forEach技术 以及indexOf等字串撷取

// emailFind函数function emailFind() {  // 获取所有的img标签  const imgElements = document.querySelectorAll('img');  // 遍历每个img标签  因为里面有id  imgElements.forEach((img) => {    if (img.getAttribute('alt') === 'user') {      // 要确认是使用者的图片 不是其他的      const src = img.getAttribute('src');      const startIndex = src.lastIndexOf('/') + 1; // 获取最后一个/后的位置      const endIndex = src.indexOf('-', startIndex); // 获取-的位置      if (startIndex !== -1 && endIndex !== -1) {        let extractedString = src.substring(startIndex, endIndex);  // 去除"user%2F"        extractedString = extractedString.replace('user%2F', '');        // 检查h1元素是否已存在        const existingH1Element = img.parentElement.parentElement.parentElement.querySelector('h5');        if (!existingH1Element) {          // 创建h1元素          const h1Element = document.createElement('h5');          h1Element.textContent = extractedString;          // 将h1元素插入到img的父元素的父元素的父元素中          const parentElement = img.parentElement.parentElement.parentElement;          parentElement.appendChild(h1Element);          const email = extractedString; // 获取                    ........后续待补

这边我们所谓的email还只是userID而已，接下来重头戏就是继续写一个Fetch。

叫资料call API的fetch部分

    // 发送Fetch请求，获取最终的email          fetch("网站的网址", {            headers: {              "accept": "*/*",              "accept-language": "zh-TW,zh;q=0.9,en-US;q=0.8,en;q=0.7,zh-CN;q=0.6",              "content-type": "application/json",              "sec-ch-ua": "\"Chromium\";v=\"118\", \"Google Chrome\";v=\"118\", \"Not=A?Brand\";v=\"99\"",              "sec-ch-ua-mobile": "?0",              "sec-ch-ua-platform": "\"Windows\"",              "sec-fetch-dest": "empty",              "sec-fetch-mode": "cors",              "sec-fetch-site": "same-site",            },            referrer: "网站的网址",            referrerPolicy: "strict-origin-when-cross-origin",            body: JSON.stringify({              operationName: "getUserPosts",              variables: {                userId: email // 把ID参数给他套入进去              },              query: `fragment PostFields on Post {                id                type                teach                learn                course                goal                location                desc                offer                tags                datetime                author {                  id                  name                  position                  photo                  email                  __typename                }                likeCount                liked                commentCount                __typename              }              query getUserPosts($userId: ID!) {                getUserPosts(userId: $userId) {                  ...PostFields                  __typename                }              }`,            }),            method: "POST",            mode: "cors",            credentials: "include",          })          .then(async (res) => res.json())        .then((data) => {          let finalEmail = data.data.getUserPosts[0].author.email;          if (finalEmail.includes('@privaterelay.appleid.com')) {            finalEmail = '隐藏信箱不显示';          }          h1Element.textContent = finalEmail;          });        }      }    }  });}

这边先解说什么是"隐藏信箱不显示"，也就是apple登入提供隐藏信箱的选项，
当你用苹果当作第三方登入，可以好好保护你的信箱。
现在就发现十分有用呢。ฅ^•ﻌ•^ฅ
伟灾苹果。

然后重点是这个fetch怎么写的？其实不用写，使用开发者工具的好处之一就是舒服。
直接複製使用就好了。

这真的是你网路上搜寻10年都很难看到的技巧教学，
更何况是拿来做这么有趣的练习（？）。

最终成果:流程複习

各位可以看到我备注虽然是写h1 但其实后来製造的是h5标籤(前者太大了)
而这个脚本的作用
就是每次捲动到底部就会触发 网页会call资料出来渲染 我们也会透过forEach逐一针对
img里的userID去当作参数 call资料出来 并把email这个创建于h5后
一起渲染出来

于是就像是我最初效果截图的 email全部被叫出来
就像是原本就在网页上一般⁽⁽٩(๑˃̶͈̀ ᗨ ˂̶͈́)۶⁾⁾

心得

越强的文章，心得越少。

因为力气都已经花光了XD

总之此文章仅是做教学用途，现在我的两个系列JS教学，都已经来到中阶部分。
初学者别担心，往后未来还是有很多基础的内容！
而且就像是各种武侠小说里强调的，一拳一脚最强的其实就是来自每天的微小练习，
因此不要怕太简单、简单的东西累积起来就很强；
也不要害怕难关，难关也只是简单的东西，累积起来(ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

接下来【前端动手玩创意】还会继续更新，目前已经来到15了，
也许有一天会到达100吧！
那时候，
还请你也好好跟上嘿！ヾ(◎´・ω・｀)ノ