IMG-LOGO
×

Tài Liệu Môn Học

Khoá học lập trình HTML/CSS

Nhập Môn HTML

[Video] Giới thiệu về lập trình web - HTML/CSS [Video] Hướng dẫn tạo ra 1 trang web đơn giản nhất - HTML/CSS [Video] Hướng dẫn debug/test/develop trên trình duyệt web -HTML/CSS

Tìm Hiểu Thẻ HTML5

[Video] Formatting Text using Tags - html tags [Video] Creating Hyperlinks and Anchors (phần 1) - html tags [Video] Creating Hyperlinks and Anchors (phần 2) - html tags [Video] Cách dùng thẻ img và map để hiển thị hình ảnh html - HTML/CSS [Video] Tìm hiểu về đường dẫn file (path file) trong HTML/CSS

CSS

[Video] Tìm hiểu thuộc tính trong thẻ html [Video] Giới thiệu CSS & Sử dụng các thuộc tính cơ bản [Video] Hướng dẫn tách biệt CSS và HTML [Video] Xử lý Event trong CSS (:hover, :active, :link, ...) - Lập trinh HTML/CSS

Table & CSS

[Video] Tìm hiểu table trong HTML/CSS - HTML/CSS

Form & CSS

[Video] Thiết kế form trong HTML/CSS/JS [Video] Tìm hiểu tag videos, audio trong HTML/CSS/JS [Video] Bài tập - Thiết kế form gửi email - Lập trình HTML/CSS/JS

Thiết Kế Layout

[Video] Tìm hiểu Frame qua ví dụ quản lý khách sạn HTML/CSS [Video] Hướng dẫn tạo layout bằng thẻ Div căn bản [Video] Hướng dẫn thiết kế layout bằng thẻ div nâng cao (Thiết kế giao diện web gokisoft)




HTML JavaScript

by GokiSoft.Com - 23:06 24/05/2020 2,242 Lượt Xem



JavaScript làm trang HTML thêm phần linh động và tương tác hơn.


ví dụ

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>

<p id="demo"></p>

</body>
</html> 




Thẻ <script> trong HTML


Thẻ <script> được dùng để định nghĩa một script phía người dùng(client-side script) (JavaScript).

Thành phần <script> chứa các câu lệnh script, hoặc trỏ nó đến một tệp script bên ngoài qua thuộc tính  src .

Các cách sử dụng phổ biến của JavaScript là thao tác hình ảnh, xác thực form, và thay đổi nội dung một cách linh động.

Để chọn một thành phần HTML, JavaScript hầu hết sử dụng phương thức document.getElementById().

Đây là một ví dụ về JavaScript viết "Hello JavaScript!" vào một thành phần HTML với id="demo":

ví dụ

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<!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!";
</script> 

</body>
</html>


Tip: Bạn có thể học nhiều hơn về JavaScript trong hướng dẫn JavaScript.





Một JavaScript thường thấy


Đây là một vài ví dụ của JavaScript có thể làm gì:

JavaScript có thể thay đổi nội dung HTML:

document.getElementById("demo").innerHTML = "Hello JavaScript!";
<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<p>JavaScript can change the content of an HTML element:</p>

<button type="button" onclick="myFunction()">Click Me!</button>

<p id="demo">This is a demonstration.</p>

<script>
function myFunction() { 
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

</body>
</html>


JavaScript có thể thay đổi các phong cách HTML:

document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
<!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>


JavaScript có thể thay đổi các thuộc tính HTML:

document.getElementById("image").src = "picture.gif";
<!DOCTYPE html>
<html>
<body>
<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>






Thẻ <noscript> trong HTML


Thẻ <noscript> được dùng để cung cấp một nội dung luân phiên cho người dùng có các script bị vô hiệu hóa trên trình duyệt của họ hoặc có một trình duyệt không hỗ trợ script phía người dùng(client-side):

ví dụ

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

<noscript>Sorry, your browser does not support JavaScript!</noscript>
<!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>






Các thẻ Script trong HTML

HTML Script Tags

ThẻMô tả
<script>Định nghĩa một client-side script
<noscript>được dùng để cung cấp một nội dung luân phiên cho người dùng không hỗ trợ client-side script



Bình luận



Chia sẻ từ lớp học

Phân Loại Bài Viết

Tài Liệu Tham Khảo

Đã sao chép!!!