├── .gitignore
├── README.md
├── close-tab
├── index.html
└── script.js
├── device-info
├── index.html
├── script.js
└── style.css
└── fake-copy
├── index.html
└── script.js
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | # weird-js
7 | #### Demonstrating some weird features of JavaScript
8 |
9 | ## [Magically Closing a Tab](https://chiroyce1.github.io/weird-js/close-tab/)
10 | This demonstrates how a tab opened by a regular HTML link can be closed automatically. The link will be clicked, and then the click can be prevented by using a simple function called `preventDefault()`
11 | ```js
12 | linkElement.addEventListener("click", (e) => {
13 | e.preventDefault(); // Prevent the link from being clicked
14 | })
15 | ```
16 | and then, opening a new tab (using `window.open`) and closing it after a while. Users might think this is a link that takes them to the new page but it actually is a new `window` object made by JavaScript, when we got input from the user, we cancelled it and used it for another purpose.
17 |
18 | ```js
19 | linkElement.addEventListener("click", (e) => {
20 | e.preventDefault(); // Prevent the user from clicking the link
21 | tab = window.open("https://wikipedia.org"); // Open a new tab
22 | setTimeout(() => tab.close(), 2000); // Close the newly opened tab after 2 seconds
23 | })
24 | ```
25 | Kinda scary but fun at the same time.
26 |
27 | ---
28 |
29 | ## [Faking copying some text](https://chiroyce1.github.io/weird-js/fake-copy/)
30 | This demonstrates how whatever you copy from a website can be modified, when you copy text, `preventDefault()` is called to prevent copying it, and `clipboardData.setData()` is used to modify the contents of the clipboard.
31 |
32 | ```js
33 | element.addEventListener("copy", (e) => {
34 | e.clipboardData.setData("text/plain", "Foo Bar"); // Use the event to copy something into the users clipboard
35 | e.preventDefault(); // Cancel the actual event.
36 | })
37 | ```
38 | This is why you should always be careful when you copy text from a website and paste it somewhere else.
39 |
40 | ---
41 |
42 | ## [Getting device info](https://chiroyce1.github.io/weird-js/device-info/)
43 | JavaScript has access to lots of information regarding your browser and computer, this info is not very sensitive but can be easily used to uniquely identify a user. The `navigator` object contains a lot of info about the user's browser and computer without requiring the user's permission, [here's](https://chiroyce1.github.io/weird-js/device-info/) an example. The most commonly used is `navigator.userAgent`, which returns the userAgent string of a user, which contains the name and version of the user's Operating System and browser.
44 |
45 | ---
46 |
--------------------------------------------------------------------------------
/close-tab/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Magically Close Tabs
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/close-tab/script.js:
--------------------------------------------------------------------------------
1 | linkElement = document.createElement("a");
2 | linkElement.innerText = "Click me, I will open in another tab, wait 2 seconds and see the magic."
3 | linkElement.setAttribute("href", "https://wikipedia.org")
4 | document.body.appendChild(linkElement)
5 |
6 | linkElement.addEventListener("click", (e) => {
7 | e.preventDefault();
8 | tab = window.open("https://wikipedia.org")
9 | setTimeout(() => tab.close(), 2000);
10 | document.write(`Boom! I just closed the tab More info here`)
11 | })
--------------------------------------------------------------------------------
/device-info/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Device Info
8 |
9 |
10 |