Cafedev chia sẻ về JavaScript làm cho các trang HTML năng động và tương tác hơn.
Ví dụ:
Nội dung chính
My First JavaScript of cafedev
<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript of cafedev</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
1. Thẻ <script> trong HTML
Thẻ <script> trong HTML được sử dụng để xác định tập lệnh phía máy khách (JavaScript).
Thẻ <script> chứa các câu lệnh script hoặc nó trỏ đến tệp script bên ngoài thông qua thuộc tính src.
Sử dụng phổ biến cho JavaScript là thao tác hình ảnh, xác thực mẫu và thay đổi động của nội dung.
Để chọn một phần tử HTML, JavaScript thường sử dụng phương thức document.getEuityById().
Ví dụ JavaScript này viết “Hello JavaScript!” thành một phần tử HTML với id = “demo”:
<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->
<!DOCTYPE html>
<html>
<body>
<h2>Use JavaScript to Change Text</h2>
<p>This example writes "Hello JavaScript!" into an HTML element with id="demo":</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript vs Cafedev!";
</script>
</body>
</html>
Mẹo: Bạn có thể tìm hiểu thêm về series tự học JavaScript.
2. Ví dụ về sử dụng Javascript
Ví dụ: JavaScript có thể thay đổi kiểu:
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<script>
function myFunction() {
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
}
</script>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>Ví dụ: JavaScript có thể thay đổi các thuộc tính:
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p>Here, a JavaScript changes the value of the src (source) attribute of an image.</p>
<script>
function light(sw) {
var pic;
if (sw == 0) {
pic = "pic_bulboff.gif"
} else {
pic = "pic_bulbon.gif"
}
document.getElementById('myImage').src = pic;
}
</script>
<img id="myImage" src="pic_bulboff.gif" width="100" height="180">
<p>
<button type="button" onclick="light(1)">Light On</button>
<button type="button" onclick="light(0)">Light Off</button>
</p>
</body>
</html>3. Thẻ <noscript> trong HTML
Thẻ <noscript> trong HTML xác định một nội dung thay thế sẽ được hiển thị cho người dùng đã vô hiệu hóa tập lệnh trong trình duyệt của họ hoặc có trình duyệt không hỗ trợ tập lệnh:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>A browser without support for JavaScript will show the text written inside the noscript element.</p>
</body>
</html>
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
