零碎知识 - 前端开发
1. e.preventDefault()
#
function sendMessage(e) {
e.preventDefault() // Submitting form would refresh the page, so we prevent page reload
const input = document.querySelector('input')
if (input.value) {
ws.send(input.value)
input.value = ""
}
input.focus() // Focus the input after sending the message
}
document.querySelector('form').addEventListener('submit', sendMessage)
Usually used to prevent page reload when submit form.
2. defer
attribute of <script>
#
<head>
<meta charset="UTF-8">
<title>Chat APP</title>
<script defer src="js/app.js"></script>
</head>
<body>
...
A boolean value used to execute the script only after the browser completes the rendering activity.
Note: The
defer
attribute can only be used when JavaScript is externally linked to the HTML file using thesrc
attribute of the<script>
tag.
3. innerHTML
property#
innerHTML is a property of every element. It tells you what is between the starting and ending tags of the element, and it also let you sets the content of the element.
<p class="myp"><a>hello hi ni</a></p>
<script>
const myp = document.querySelector('.myp')
console.log(myp.innerHTML)
</script>
This will print a stirng:
<a>hello hi ni</a>
The innerHTML
property is part of the Document Object Model (DOM) that allows Javascript code to manipulate a website being displayed. Specifically, it allows reading and replacing everything within a given DOM element (HTML tag).
4. Delay function#
function delay(minutes) {
return new Promise(resolve => setTimeout(resolve, minutes * 1000 * 60));
}
// await delay(2)
5. Click copy#
<p id="url-text" style="display: none">{{.SharedUrl}}</p>
<button onclick="copyText()">share</button>
<script>
function copyText() {
const copyText = document.getElementById("url-text");
navigator.clipboard.writeText(copyText.textContent)
.then(() => {
alert("successfully copied");
})
.catch(() => {
alert("something went wrong");
});
}
</script>
6. Relative path#
You can write relative path directly for the endpoint, because the browser know the Origin, when you make HTTP request, it knows where should go.
<form method="post" action="/login">
...
</form>
And it’s ok to write relative path when redirect in Go code:
// Redirect to login page.
http.Redirect(w, r, "/login", http.StatusFound)