Trong bài viết ngày hôm nay chúng ta cùng tìm hiểu về thẻ a trong HTML nhé , cùng khám phá bài này nhé .

1 Thẻ a trong HTML là gì ?

Thẻ a trong html được dùng để tạo link, tức là các đường dẫn của một website nào đó trên internet.
Cú pháp của thẻ a như sau:

<a href="https://nodemy.vn">nodemy.vn</a>

Ví dụ ta tạo liên kết có nội dung “ Học lập trình tại Nodemy “ trỏ đến đường dẫn nodemy.vn chúng ta làm như sau .

<a href="https://nodemy.vn">Học lập trình tại Nodemy</a>

2 Các thuộc tính của thẻ a

Thuộc tính title của thẻ a

Thuộc tính title dùng để mô tả ý nghĩa của đường liên kết. Khi bạn hover chuột vào link thì sẽ xuất hiện một dòng chữ, đó chính là nội dung mà ta đã đặt vào thuộc tính title.
Ví dụ :

<a href="https://nodemy.vn" title="học lập trình  thực chiến">Nodemy lập trình thực chiến </a>

Thuộc tính rel của thẻ a

Nếu người bình thường thì sẽ ít quan tâm đến thuộc tính này. Nhưng nếu bạn là dân SEO thì sẽ cần chú ý đấy.
Thuộc tính rel dùng để khai báo cho các công cụ search engine biết là có dò đường link này hay không. Nó có hai giá trị như sau:
• follow là có dò
• nofollow là không dò
Ví dụ: Khai báo cho các bot search không dò vào đường link ở ví dụ trên.

<a href="https://nodemy.vn" rel="nofollow">Nodemy lập trình thực chiến</a>

Thuộc tính target của thẻ a

Khi bạn click vào link thì trình duyệt sẽ chuyển hướng đến trang đích ngay lập tức và ngay trên tab hiện tại. Nếu bạn muốn chuyển đến một tab khác thì có thể sử dụng thuộc tính target.
• _blank thì nó sẽ chuyên link trên tab mới
• _self thì nó sẽ chuyển link trên tab hiện tại (giá trị mặc định)
• _parent thì nó sẽ chuyển link tới tab mở tab hiện tại. Ta còn hay gọi là tab cha của tab hiện tại
• _top thì nó sẽ nhảy tới tab hiện tại và thường dùng trong iframe khi muốn thoát khỏi iframe và chạy tới trang gốc luôn.

Thuộc tính download của thẻ a

Nếu bạn muốn khi click vào đường link, thay vì truy cập vào link đó thì trình duyệt sẽ tải nội dung của đường link đó về thì hãy khai báo thuộc tính download nhé.

<a href="https://nodemy.vn" download>Nodemy lập trình thực chiến</a>

3. Giá trị href # của thẻ a trong HTML
Khi bạn khai báo một thẻ a mà không muốn trỏ đến một liên kết nào thì hãy thiết lập giá trị href="#" nhé.

<a href="#">học javascript</a>

Ngoài ra, nếu bạn muốn khi click vào thẻ a thì trình duyệt sẽ di chuyển đến một vị trí nào đó trong trang web thì hãy làm theo cách sau.

Bước 1: Đặt ID cho vị trí bạn cần di chuyển đến. Giả sử đó là thẻ div, và mình sẽ đặt id cho nó như sau:

<div id="moveto"></div>

Bước 2: Khi click vào thẻ a thì sẽ nhảy tới thẻ div#moveto, ta sẽ thiết lập như sau:

<a href="#moveto" >Đi tới div#moveto</a>

4. Các trạng thái của thẻ a trong HTML
Thẻ a gồm có 4 trạng thái chính đó là:
• link: Chưa có hành động nào trên link
• visited: Đã click vào link và đi đến trang đích
• hover: Di chuyển qua link
• active: Link đã được active

Nguồn tham khảo : freetuts.net.

Display inline là gì ? Display Block là gì ? Display inline-block là gì ? Sự khác biệt Display Inline ,Display Block và Display inline-block là gì ? …. Đừng lo lắng trong bài viết ngày hôm nay mình sẽ giải đáp cho các bạn câu trả lời cho những câu hỏi trên nhé . Không vòng vo nữa chúng ta cùng khám phá bài viết này nào !

Display inline

Với display Inline thì các item sẽ nằm trên cùng một dòng, ví dụ như <span> . Nếu các items vượt quá độ dài của dòng thì item sẽ xuống dòng mới .

Các item có kiểu display này không thể set width và height.
Các inline item sẽ chỉ có thể điều chỉnh margin và padding left and right (top và bottom thì không thể).

Display: block

Khác với kiểu display: inline thì các item có kiểu display: block luôn được xuống dòng và chiếm toàn bộ width nếu width không được set. Ví dụ sẽ là div :

Các item có kiểu display: block sẽ set được width, height, margin, padding đầy đủ 4 hướng (top, bottom, right, left).

Display: inline-block

Kiểu display: inline-block sẽ được sắp xếp giống với kiểu display: inline, nghĩa là các items sẽ được xếp cùng nhau trên một dòng . Tuy nhiên các items sẽ có thuộc tính của display: block như là có set width, height, margin, padding đủ 4 hướng.
Để hiểu hơn chúng ta có ví dụ sau :

Trong bài viết ngày hôm nay cùng tìm hiểu về Tất tần tật về các đơn vị trong CSS , hi vọng bài viết này sẽ giúp ich cho các bạn trong quá trình học CSS , lựa chọn đơn vị khi Responsive cho trang Web của mình nhe .

Đơn vị tương đối và tuyệt đối

Trong CSS các đơn vị được chia làm 2 phần :
1 Đơn vị tuyệt đối
2 Đơn vị tương đối

Đơn vị tương đối

Đơn vị tương đối (Relative Units ) : là các đơn vị được tính theo một cách tương đôi dựa trên các phần tử khác (Phần tử cha hoặc Root ) . Các đơn vị này có tính tương thích cao cho nhiều thiêt bị khác nhau .
Đơn vị em và rem
em là đơn vị mà giá trị của nó được tính dựa trên tỉ lệ so với phần tử cha của nó hoặc chính nó thông qua giá trị của thuộc tính font-size.
rem (root em) tương tự như em, nhưng đơn giản là nó sẽ tỉ lệ theo thuộc tính font-size của phần tử root <html>

Đơn vị vh vw và % trong CSS

vw (view width) sẽ tính theo tỉ lệ chiều rộng khung nhìn thiết bị của bạn. 1 vw = 1/100 chiều rộng view-port. Ví dụ: màn hình của bạn có chiều rộng 1100px thì 1vw = 11px
vh (view height) tương tự vw, vh sẽ tỉ lệ theo chiều cao của khung nhìn thiết bị.
% : đơn vị phần trăm sẽ tỉ lệ theo phần tử cha trực tiếp của nó.

Đơn vị vmin và vmax

2 đơn vị này tương tự như vw và vh. Điểm khác biệt là nó sẽ không tỉ lệ theo 1 hướng mà là cả 2, tuỳ thuộc vào độ lớn của chiều cao và chiều rộng màn hình.

Cụ thể: 1 vmin = 1 vw hoặc 1 vh (Lấy cái nhỏ hơn).
VD: màn hình của bạn có kích thước là 840×640 thì 1 vmin = 6.4px, nếu màn hình của bạn là 360×480 thì 1 vmin = 3.6px
1 vmax = 1 vw hoặc 1 vh (Lấy cái lớn hơn).
VD: màn hình của bạn có kích thước là 840×640 thì 1 vmin = 8.4px, nếu màn hình của bạn là 360×480 thì 1 vmin = 4.8px

Đơn vị ex và ch

2 đơn vị thường ít sử dụng các bạn co thể đọc để tham khảo thêm nhé .

ch là đơn vị được tính theo chiều rộng của ký tự “0”. Với những font chữ là monospace thì các ký tự đều có cùng 1 chiều rộng.
ex theo định nghĩa thì nó liên quan đến chiều cao của ký tự “x” của font chữ hiện tại (rất ít khi sử dụng) .

Đơn vị tuyệt đối

Đơn vị tuyệt đối (Absolute Units) : Là các đơn vị cố định ,không bị ảnh hưởng bởi các thành phần khác .

Với các đơn vị tuyệt đối thì giá trị của nó được cố định và không bị ảnh hưởng bởi bất kỳ thành phần nào khác.

Các đơn vị này chỉ nên sử dụng với những thành phần đã được xác định chính xác kích thước và không bị biến thiên bởi các thành phần khác. Hoặc các thuộc tính có kích thước nhỏ, không cần quá chính xác như

border: solid 1px;

Thuộc tính hay được sử dụng nhất là px hoặc pt.
• cm – centimeters
• mm – millimeters
• in – inches (1in = 96px = 2.54cm)
• pt – points (1pt = 1/72 of 1in)
• px – pixels (1px = 1/96th of 1in)
• pc – picas (1pt = 1/72 of 1in)

Trong bài viết ngày hôm nay mình sẽ chia sẻ đến các bạn , Mẹo hay Cách tạo các khối cơ bản với CSS Cực kỳ đơn giản , Chúng ta cùng khám phá bài viết này nhé !

1 Tạo Hình Vuông với CSS

.Vuong{
            background-color: green;
            width: 100px;
            height: 100px;
 }

2 Tạo hình chữ Nhật với CSS

.ChuNhat{
            background-color: green;
            width: 200px;
            height: 100px;
 }

3 Tạo hinh tròn với CSS

.Tron{
            background-color: green;
            width: 200px;
            height: 200px;
            border-radius: 50%;
}

4 Tạo hinh elip với CSS

.elip{
            background-color: green;
            width: 200px;
            height: 100px;
            border-radius: 100px/50px;
}

5 Tạo hình Tam giác đều với CSS

.tamGiacDeu{
            width: 0;
            height: 0;
             border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid green;
 }

6 Tạo hình tam giác Vuông với CSS

.TamGiacVuong{
            width: 0;
  height: 0;
  border-bottom: 100px solid green;
  border-left: 100px solid transparent;
}

7 Tạo hình thang với CSS

.HinhThang{
            border-bottom: 100px solid green;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  height: 0;
  width: 100px;
}

8 Tao hình bình hành với CSS

.HinhBinhHanh{
            
            width: 150px;
  height: 100px;
  transform: skew(20deg);
  background: green;
  }

Sự kiện Click đúp chuột trong Javascript là gì ? Khi nào nên sử dụng sự kiện click đúp trong Javascript ? Cách sử dụng của sự kiện click đúp chuột như thế nào ? …Đừng lo lắng trong bài viết ngày hôm nay chúng ta cùng tìm hiểu câu trả lời cho những câu hỏi trên nhé .

1 Sự kiện nhấp đúp chuột trong Javascript .
Sự kiện nhấp đúp chuột hay ondbclick trong Javascript là sự kiện khi chúng ta muốn bắt hành động nhấp đôi chuột,( nhấp chuột trái hai lần vào một thẻ HTML nào đó ) thì sử dụng sự kiện ondbclick.
Sự kiện này xuất hiện rất nhiều đối đối với các bạn sử dụng hệ điều hành windows , cụ thể như khi bạn muốn mở một file hay một folder thì bạn phải click đúp chuột trái hai lần.

2 Cú pháp của sự kiện ondbclick trong Javascript

Chúng ta có hai cách để bắt sự kiện ondbclick trong javascript, thứ nhất là thông qua thuộc tính ondbclick của các thẻ HTML, thứ hai là sử dụng mã javascript. Cụ thể như sau.

Cách 1: Gắn trực tiếp trên thẻ HTML

<element ondbclick="event_function()"></element>

Trong đó element là thẻ HTML bạn cần bắt sự kiện dbclick, event_function là tên của hàm sẽ được gọi khi xảy ra sự kiện nhấn đúp chuột.
Ví dụ: Hiển thị một thông báo khi người dùng nhấn đúp chuột.

<input type="button" value="Click me" ondbclick="showMessage()"/>
<script>
    function showMessage(){
        alert('Sự kiện dbclick xảy ra!');
    }
</script>

Cách 2: Sử dụng mã javascript để thêm sự kiện
Sử dụng thuộc tính ondblclick để thêm sự kiện.

VÍ dụ :

<input type="button" id="btn" value="Click me"/>
<script>
    var obj = document.getElementById('btn');
    obj.ondblclick = function(){
        alert('Bạn đã đúp chuột vào thẻ input này');
    };
</script>

Hoặc sử dụng hàm addEventListener.
Ví dụ :

<input type="button" id="btn" value="Click me"/>
<script>
    var obj = document.getElementById('btn');
    obj.addEventListener('dblclick', function(){
        alert('Bạn đã đúp chuột vào thẻ input này');
    });
</script>

Tài liệu tham khảo : https://freetuts.net/

Trong bài viết ngày hôm nay chúng ta cùng tìm hiểu về cách thay đổi CSS bằng Javascript nhé . Vậy thay đổi CSS bằng Javascript như thế nào ? chúng ta cùng tìm hiểu câu trả lời cho câu hỏi trên nhé .

1 Cách thay đổi CSS bằng JS .

Các thẻ html đều có thuộc tính style, nhưng ta không thể sử dụng DOM HTML để thiết lập hay xóa bỏ CSS được mà phải thông qua một đối tượng biệt khác, đó là style. Đối tượng style này sẽ chứa tất cả các thuộc tính của CSS .Chúng ta có hai thao tác chính đó là thiết lập CSS và lấy giá trị CSS hiện tại.
Cú pháp :

document.getElementById("object").style.cssName = 'something';

Cú pháp lấy giá trị CSS bằng Javascript:

document.getElementById("object").style.cssName;

Với Trường hợp thuộc tính có dấu gạch ngang như: font-size, line-height, margin-bottom thì thì nó sẽ có tên là fontSize, lineHeight, marginBottom ,nghĩa là sẽ bỏ đi dấu gạch ngang và viết hoa ký tự đầu tiên của chữ thứ hai. Ví dụ :

document.getElementById("object").style.fontSize = 'something';
document.getElementById("object").style.lineHeight = 'something';
document.getElementById("object").style.marginBottom = 'something';

Để hiểu hơn chúng ta có ví dụ sau :

Viết chương trình đăng nhập và validate thông tin username, password. Nếu người dùng không nhập username hoặc mật khẩu thì hiển thị thông báo trong một thẻ div và chữ màu đỏ, ngược lại thì thông báo validate thành công và chữ màu xanh

Với bài này bạn cần phải sử dụng thêm DOM Element để lấy giá trị của các ô input, đồng thời sử dụng DOM HTML để thay đổi nội dung của tin nhắn, và sử dụng DOM CSS để thay đổi màu sắc.

<html>
    <body>
        <script language="javascript">
          function validate()
          {
            // Lấy giá trị input
             var username = document.getElementById("username").value;
             var password = document.getElementById("password").value;
             
            // Lấy đối tượng message
            var message = document.getElementById("message");
             
            // Validate
            if (username == "" || password == ""){
                message.innerHTML = "Bạn chưa nhập đầy đủ thông tin!";
                message.style.color = "red";
            }
             
            else{
                message.innerHTML = "Chúc mừng ban, validate thành công!";
                message.style.color = "blue";
            }
             
          }
        </script>
        Username: <input type="text" value="" id="username" /> <br/>
        Username: <input type="password" value="" id="password" /> <br/>
        <div id="message"></div>
        <input type="button" value="Login" onclick="validate()"/>
    </body>
</html>

Tài liệu tham khảo : freetuts.net

Bài viết ngày hôm nay chúng ta cùng tìm hiểu về innerHTML trong Javascript , một thuộc tính cực kỳ thông dụng trong Javascript .

1 Tác dụng của innerHTML trong Javascript

Tác dụng của thuộc tính innerHTML là lấy nội dung và thiết lập nội dung cho một node HTML nào đó ,Nếu bạn sử dụng jQuery thì có phương thức $(node).html() .

2. Cú pháp innerHTML trong javascript

Cú pháp của innerHTML như sau:

// lấy nội dung
let content = node.innerHTML;
 
// Gán nội dung
node.innerHTML = newContent;

Trong đó:
• newContent chính là nội dung bạn muốn gán vào node
• node chính là đối tượng cần lấy hoặc cần gán nội dung.

3. Cách dùng innerHTML trong javascript
Ví dụ innerHTML javascript:
Giả sử ta có đoạn code HTML như sau.

<div id="node">
    Học JS tại Nodemy.vn 
</div>

Để lấy nội dung hoặc gán nội dung vào thẻ này thì ta sẽ sử dụng thuộc tính innerHTML.

let node = document.getElementById('node');
// lấy nội dung
let content = node.innerHTML;
 
// Gán nội dung
node.innerHTML = "Học JS Node tại Nodemy.vn";

Tài liệu tham khảo :

Trong bài viết ngày hôm nay chúng ta cùng tìm hiểu về DOM Element Javascript cách để truy xuất đến các tài liệu trong HTML .Khi nhắc đến DOM Element Javascript gồm các hàm sau : getElementById,
getElementsByTagName, getElementsByClass và querySelectorAll .

1 Sử dụng getElementById để tìm theo ID

var element = document.getElementById('idname');

Ví dụ :

// Lấy thẻ input
var element = document.getElementById('website');
 
// Lấy giá trị của thẻ input
document.write(element.value);

2. Sử dụng getElementsByTagName để tìm theo tên thẻ html
Tên thẻ HTML chính là tên các thẻ như p, a, div, ... Và ta sẽ truy xuất tới nó bằng cú pháp sau:

var element = document.getElementsByTagName('tagname');

// Lấy thẻ input
var element = document.getElementsByTagName('input');
 
// Lấy giá trị của thẻ input
document.write(element[0].value);

Trong một trang web có thể có nhiều thẻ HTML giống nhau (ví dụ có hai thẻ div) nên hàm getElementsByTagName() sẽ trả về một mảng các object (xem bài mảng trong javascript) chứ không phải là một object nữa. Vì mình muốn lấy thẻ input thứ nhất và nó là phần tử đầu tiên trong mảng nên nhập số 0 vào.

3. Sử dụng getElementsByClassName để tìm theo tên class
Để tìm các thẻ HTML có class nào đó thì ta dùng cú pháp sau:
var element = document.getElementsByClassName('input');
Tương tự như tìm theo tên thẻ HTML, thì tìm theo tên class sẽ trả về một mảng các object nên bạn sẽ phải sử dụng cú pháp truy xuất mảng để chọn đúng đối tượng muốn lấy.

Ví dụ :

// Lấy thẻ input
var element = document.getElementsByClassName('website');
 
// Lấy giá trị của thẻ input
document.write(element[0].value);

4. Sử dụng querySelectorAll để tìm theo CSS selector

Khi chọn các thẻ HTML theo class thì thường sẽ trả về hàng loạt các kết quả nên đôi khi sẽ có những kết quả mà ta không muốn lấy. Chính vì vậy javascript DOM có một phương thức kết hợp với CSS Selector để truy vấn có độ chính xác cao hơn, đó chính là hàm querySelectorAll.
Và đây là cú pháp sử dụng:

var element = document.querySelectorAll("selector css");

Ví dụ:

<html>
  <body>
    <input type="text" value="thẻ không cần lấy" class="website"/>
    <div>
        <input type="text" value="Thẻ Cần Lấy" class="website"/>
        <input type="text" value="thẻ không cần lấy"/>
    </div>
  </body>
</html>

Làm thế nào có thể chọn đúng một thẻ input nằm trong thẻ div và có class="website"?

Trước tiên ta quay lại chút với CSS Selector đã nhé. Trong CSS để chọn thẻ input nằm trong thẻ div và có class="website" thì cú pháp là:
div input.website
Chỉ cần đưa css selector này vào hàm querySelectorAll là ta có được kết quả cần lấy.

var element = document.querySelectorAll("div input.website");

Và có một lưu ý tương tự là kết quả sẽ trả về một mảng các Objects.

Nguồn tài liệu tham khảo : freetuts.net

Trong bài viết ngày hôm nay chúng ta cùng tìm hiểu về cách lấy nội dung và cách thay đổi thuộc tính thẻ HTML nhé . Cùng khám phá bài viết này nhé .

1 Cách lấy nội dung trong thẻ HTML bằng JS

Để lấy nội dung bên trong một thẻ HTML thì chúng ta sử dụng cú pháp như sau:

document.getElementById("content").innerHTML

Trong đó innerHTML chính là thuộc tính của đối tượng html, công dụng của nó là dùng để lấy hoặc gán giá trị cho một thẻ html.
Để thay đổi nội dung cho một thẻ HTML thì ta dùng cú pháp sau:

document.getElementById("content").innerHTML = "<h1>Nội dung</h1>";

Để hiểu hơn chúng ta có ví dụ sau :
Viết chương trình thay đổi nội dung bên trong của một thẻ div, và lấy nội dung bên trong của thẻ div đó.

<html>
  <body>
    <script language="javascript">
      // Hàm thiết lập nội dung cho thẻ div#content
      function set_content()
      {
        document.getElementById("content").innerHTML = "<h1>Nội dung đã được thay đổi</h1>";  
      }
       
      // Hàm lấy nội dung cho thẻ div#content
      function get_content()
      {
        var html = document.getElementById("content").innerHTML;
        alert("Nội dung cần lấy là: " + html);        
      }
       
    </script>
    <div id="content">Nội dung của thẻ DIV</div>
    <input type="button" value="Lấy nội dung" id="get_content" onclick="get_content()" />
    <input type="button" value="Thay đổi nội dung" id="set_content" onclick="set_content()" />
  </body>
</html>

2 Thay đổi thuộc tính thẻ html bằng Javascript

Để thay đổi giá trị của thuộc tính HTML thì ta sử dụng cú pháp như sau:

document.getElementById("element").attributeName = "new value";

Để lấy giá trị của thuộc tính HTML ta sử dụng cú pháp sau:

document.getElementById("element").attributeName;

Trong đó attributeName là tên của thuộc tính mà bạn cần xử lý. Tùy vào mỗi thẻ html mà có các thuộc tính khác nhau. Dưới đây là danh sách các thuộc tính thường dùng nhất.

Từ đây có thể suy ra rằng trong Javascript để thiết lập (set) và lấy (get) thì sử dụng chung một cú pháp, chỉ khác nhau ở chỗ gán bằng và không có gán bằng.

Để hiểu hơn chúng ta có ví dụ sau :

Xây dựng chương trình khi click vào một button thì chuyển nó thành textbox, và tiếp tục click vào textbox thì sẽ đổi thành button .

<html>
    <body>
        <script language="javascript">
          function change()
          {
             // Lấy đối tượng
             var object = document.getElementById("object");
          
             // lấy thuộc tính type
             var type = object.type;
         
             // kiểm tra thuộc tính type và thay đổi
            if (type == "button"){
           
               object.type = 'text';
            }
            else{
                object.type = "button";
            }
         
          }
        </script>
        <input type="button" value="CLick me" onclick="change()" id="object" />
    </body>
</html>

Trong bài viết ngày hôm nay cúng ta cùng tìm hiểu về phép chia lấy phần dư và chia phần nguyên trong Javascript nhé . Cùng tìm hiểu bài viết này nhé .

Phép chia lấy phần dư :

Để chia lấy phần dư chúng ta sử dụng toán tử % . Để hiểu hơn chúng ta có ví dụ sau :

var chiaPhanDu2 = 7 % 2;
 
console.log(chiaPhanDu2); // Kết quả là 3

Ngoài ra chúng ta cũng có thể dùng toán tử % để kiểm tra một số có thể chia hết cho một số khác hay không .

Ví dụ :

if (S % 3 == 0){
    console.log(S + " chia het cho 3");
}

Phép chia lấy phần nguyên

Để chia lấy phần nguyên ta sử dụng phương thức Math.floor, đây là hàm dùng để làm tròn một số xuống cận dưới, tức là mọi số nó sẽ được làm tròn bỏ đi giá trị sau dấu phẩy động.

Math.floor(3); // Kết quả: 3
Math.floor(3.1); // Kết quả: 3
Math.floor(3.5); // Kết quả: 3
Math.floor(3.8); // Kết quả: 3

Ngoài ra chúng ta cũng thể sử dụng công thức sau để làm tròn :
Gọi a là số bị chia, b là số chia, thì phần nguyên của a chia b sẽ là:

var phan_nguyen = (a - (a % b));

Ví dụ: Lấy phần nguyên của phép 23 / 4.
```
var phan_nguyen = (23 - (23 % 4));

Trong bài viết ngày hôm nay chúng ta cùng tìm hiểu về thẻ a trong HTML nhé , cùng khám phá bài này nhé .

1 Thẻ a trong HTML là gì ?

Thẻ a trong html được dùng để tạo link, tức là các đường dẫn của một website nào đó trên internet.
Cú pháp của thẻ a như sau:

<a href="https://nodemy.vn">nodemy.vn</a>

Ví dụ ta tạo liên kết có nội dung “ Học lập trình tại Nodemy “ trỏ đến đường dẫn nodemy.vn chúng ta làm như sau .

<a href="https://nodemy.vn">Học lập trình tại Nodemy</a>

2 Các thuộc tính của thẻ a

Thuộc tính title của thẻ a

Thuộc tính title dùng để mô tả ý nghĩa của đường liên kết. Khi bạn hover chuột vào link thì sẽ xuất hiện một dòng chữ, đó chính là nội dung mà ta đã đặt vào thuộc tính title.
Ví dụ :

<a href="https://nodemy.vn" title="học lập trình  thực chiến">Nodemy lập trình thực chiến </a>

Thuộc tính rel của thẻ a

Nếu người bình thường thì sẽ ít quan tâm đến thuộc tính này. Nhưng nếu bạn là dân SEO thì sẽ cần chú ý đấy.
Thuộc tính rel dùng để khai báo cho các công cụ search engine biết là có dò đường link này hay không. Nó có hai giá trị như sau:
• follow là có dò
• nofollow là không dò
Ví dụ: Khai báo cho các bot search không dò vào đường link ở ví dụ trên.

<a href="https://nodemy.vn" rel="nofollow">Nodemy lập trình thực chiến</a>

Thuộc tính target của thẻ a

Khi bạn click vào link thì trình duyệt sẽ chuyển hướng đến trang đích ngay lập tức và ngay trên tab hiện tại. Nếu bạn muốn chuyển đến một tab khác thì có thể sử dụng thuộc tính target.
• _blank thì nó sẽ chuyên link trên tab mới
• _self thì nó sẽ chuyển link trên tab hiện tại (giá trị mặc định)
• _parent thì nó sẽ chuyển link tới tab mở tab hiện tại. Ta còn hay gọi là tab cha của tab hiện tại
• _top thì nó sẽ nhảy tới tab hiện tại và thường dùng trong iframe khi muốn thoát khỏi iframe và chạy tới trang gốc luôn.

Thuộc tính download của thẻ a

Nếu bạn muốn khi click vào đường link, thay vì truy cập vào link đó thì trình duyệt sẽ tải nội dung của đường link đó về thì hãy khai báo thuộc tính download nhé.

<a href="https://nodemy.vn" download>Nodemy lập trình thực chiến</a>

3. Giá trị href # của thẻ a trong HTML
Khi bạn khai báo một thẻ a mà không muốn trỏ đến một liên kết nào thì hãy thiết lập giá trị href="#" nhé.

<a href="#">học javascript</a>

Ngoài ra, nếu bạn muốn khi click vào thẻ a thì trình duyệt sẽ di chuyển đến một vị trí nào đó trong trang web thì hãy làm theo cách sau.

Bước 1: Đặt ID cho vị trí bạn cần di chuyển đến. Giả sử đó là thẻ div, và mình sẽ đặt id cho nó như sau:

<div id="moveto"></div>

Bước 2: Khi click vào thẻ a thì sẽ nhảy tới thẻ div#moveto, ta sẽ thiết lập như sau:

<a href="#moveto" >Đi tới div#moveto</a>

4. Các trạng thái của thẻ a trong HTML
Thẻ a gồm có 4 trạng thái chính đó là:
• link: Chưa có hành động nào trên link
• visited: Đã click vào link và đi đến trang đích
• hover: Di chuyển qua link
• active: Link đã được active

Nguồn tham khảo : freetuts.net.

Phương thức string.charAt() trong Javascript là gì ? Tác dụng của hàm string.charAt() như thế nào ? … trong bài viết ngày hôm nay chúng ta cùng khám phá câu trả lời cho những câu hỏi trên nhé .

Phương thức string.charAt() trong Javascript là gì ?

Phương thức string.charAt() có chức năng tìm kiếm kí tự ở một vị trí nào đó trong chuỗi, vị trí tìm kiếm đó sẽ do người dùng xác định.
Lưu ý rằng vị trí của một chuỗi sẽ bắt đầu từ vị trí 0, vị trí thứ 2 có chỉ số là 1 .... vị trí cuối cùng là string.length -1.

Cú pháp

Cú pháp:

string.charAt(index)

Trong đó:
index là vị trí muốn tìm kiếm trong chuỗi.

Cách sử dụng :

Ví dụ: sử dụng phương thức string.charAt() để tìm kiếm các kí tự ở vị trí mong muốn.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>Học lập trình miễn phí tại freetuts.net</h1>
  
        <button onclick="myFunction()">Run</button>
  
        <p id="demo"></p>
  
        <script>
            function myFunction() {
                var str = "nodemy.vn";
                var content = '';
                content = content + 'Vị trí đầu tiên - ' + str.charAt(0) + '<br>';
                content = content + 'Vị trí thứ 2 - ' + str.charAt(1) + '<br>';
                content = content + 'Vị trí thứ 3 - ' + str.charAt(2) + '<br>';
                content = content + 'Vị trí thứ 4 - ' + str.charAt(3) + '<br>';
                document.getElementById("demo").innerHTML = content;
            }
        </script>
    </body>
</html>

Kết quả :

Vị trí đầu tiên - F
Vị trí thứ 2 - r
Vị trí thứ 3 - e
Vị trí thứ 4 - e

Ví dụ 2: Sử dụng kết hợp với string.length để tìm các kí tự ở cuối chuỗi.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>Học lập trình thực chiến tại nodemy.vn</h1>
  
        <button onclick="myFunction()">Run</button>
  
        <p id="demo"></p>
  
        <script>
            function myFunction() {
                var str = "Freetuts.net";
                var content = '';
                var len = str.length;
                content = content + 'Vị trí đầu tiên - ' + str.charAt(0) + '<br>';
                content = content + 'Vị trí thứ 2 - ' + str.charAt(1) + '<br>';
                content = content + 'Vị trí kế cuối - ' + str.charAt(len-2) + '<br>';
                content = content + 'Vị trí cuối cùng - ' + str.charAt(len-1) + '<br>';
                document.getElementById("demo").innerHTML = content;
            }
        </script>
    </body>
</html>

Kết quả :

Vị trí đầu tiên - F
Vị trí thứ 2 - r
Vị trí kế cuối - e
Vị trí cuối cùng - t

Sự kiện onmouseout trong Javascript là gì ? Tác dụng của sự kiện onmouseout trong Javascript như thế nào ? … trong bài viết ngày hôm nay chúng ta cùng tìm câu trả lời cho các câu hỏi trên nhé .

1 Sự kiện onmouseout trong Javascript là gì ?
Sự kiện onmouseout là sự kiện khi người dùng di chuyển con trỏ chuột ra ngoài phạm vi hiển thị của thẻ HTML .
2 Thêm sự kiện onmouseout như thế nào ?
Để thêm sự kiện onmouseout vào một thẻ HTML nào đó thì ta có một số cách như sau:

Cách 1 : Thêm trực tiếp vào thẻ HTML

<input type="button" onmouseout="callMouseOutEvent()" value="Di chuyển vào đây"/>
<script>
    function callMouseOutEvent(){
        alert('Bạn đã di chuyển chuột ra ngoài thẻ input');
    }
</script>

Cách 2 : Gắn hàm vào sự kiện onmouseout bằng mã Javascript

<input type="button" id="btn" value="Di chuyển vào đây"/>
<script>
    var obj = document.getElementById('btn');
    obj.onmouseout = function(){
        alert('Bạn đã di chuyển chuột ra ngoài thẻ input');
    };
</script>

Hoặc chún ta có thể sử dụng addEventListener.

<input type="button" id="btn" value="Di chuyển vào đây"/>
<script>
    var obj = document.getElementById('btn');
    obj.addEventListener('mouseout', function(){
        alert('Bạn đã di chuyển chuột ra ngoài thẻ input');
    });
</script>

Date trong Javascript là gì ? Tác dụng của đối tượng date trong Javascript ? Các phương thức của Date trong Javascript ? … trong bài viết ngày hôm nay chúng ta cùng tìm hiểu về đối tượng date trong Javascript nhé , cùng khám phá bài viết này nào !

Date trong Javascript là gì ?

-Đối tượng date trong javascript là nơi xử lý các vấn đề về thời gian.
Khởi tạo :

• Theo thời gian hiện tại :

new Date();

• Khởi tạo ngày giờ từ giá trị time millisecond:

new Date(milliseconds);

Trong đó: milliseconds là thời gian chúng ta muốn khởi tạo đơn vị mili giây.

• Khởi tạo ngày giờ từ một dateString:

new Date(dateString);

Trong đó: dateString có dạng "tháng ngày, năm giờ:phút:giây" trong đó tháng là tên tiếng anh.
Ví dụ : September 08 , 2022 12:00:00

• Khởi tạo ngày giờ từ một date string dạng atrribute:

new Date(year, month, day, hours, minutes, seconds, milliseconds)

Trong đó:
• year là năm.
• month là tháng.
• hours là giờ.
• minutes là phút.
• seconds là giây.
• milliseconds là mili giây.

Các phương thức của Date trong Javascript

Các phương thức get dữ liệu

• getDate() trả về ngày trong tháng (1 - 31).
• getDay() trả về ngày trong tuần (0-6), với chủ nhật là 0, thứ 2 là 1, thứ 3 là 2 ,...
• getMonth() trả về tháng trong năm (0 - 11).
• getFullYear() trả về năm dạng đầy đủ (YYYY).
• getHours() trả về số giờ dạng 24h (0 - 23).
• getMinutes() trả về phút trong giờ (0 - 59).
• getSeconds() trả về số giây trong phút (0 - 59).
• getMilliSeconds() trả về tích tắc trong giây (0 - 999).
• getTime() Trả về thời gian dạng mili giây.

Các phương thức set :
• setDate(x) thiết lập ngày trong tháng (1 - 31).
• setMonth(x) thiết lập tháng trong năm (0 - 11).
• setFullYear(x) thiết lập năm dạng đầy đủ (YYYY).
• setHours(x) thiết lập số giờ dạng 24h (0 - 23).
• setMinutes(x) thiết lập phút trong giờ (0 - 59).
• setSeconds(x) thiết lập số giây trong phút (0 - 59).
• setMilliSeconds(x) thiết lập tích tắc trong giây (0 - 999).
• setTime(x) thiết lập thời gian dạng mili giây.

Ví dụ 1 :

function get() {
            var date = new Date(2017,04,06,12,08,05,150);
            document.getElementById('result').innerText = date;
     }
// Sat May 06 2017 12:08:05 GMT+0700 (Giờ Đông Dương)

Ví dụ 2 :

function get() {
            var date = new Date();
            var data = 'Ngày trong tháng: ' + date.getDate() + '<br />';
            data += 'Ngày trong tuần: ' + date.getDay() + '<br />';
            data += 'Tháng trong năm: ' + date.getMonth() + '<br />';
            data += 'Năm đầy đủ: ' + date.getFullYear() + '<br />';
            data += 'Giờ: ' + date.getHours() + '<br />';
            data += 'Phút: ' + date.getMinutes() + '<br />';
            data += 'Giây: ' + date.getSeconds() + '<br />';
            data += 'Mili Giây: ' + date.getMilliseconds() + '<br />';
            data += 'Time dạng mili giây: ' + date.getTime() + '<br />';
            document.getElementById('result').innerHTML = data;
        }
//Ngày trong tháng: 10
//Ngày trong tuần: 2
//Tháng trong năm: 4
//Năm đầy đủ: 2022
//Giờ: 11
//Phút: 51
//Giây: 20
//Mili Giây: 518
//Time dạng mili giây: 1652158280518

Ví dụ 3 :

function set() {
            var date = new Date();
            date.setDate(06);
            date.setMonth(04);
            date.setFullYear(2017);
            date.setHours(15);
            date.setMinutes(05);
            date.setSeconds(5);
            date.setMilliseconds(120);
        }
        function get() {
            set();
            var date = new Date();
            var data = 'Ngày trong tháng: ' + date.getDate() + '<br />';
            data += 'Ngày trong tuần: ' + date.getDay() + '<br />';
            data += 'Tháng trong năm: ' + date.getMonth() + '<br />';
            data += 'Năm đầy đủ: ' + date.getFullYear() + '<br />';
            data += 'Giờ: ' + date.getHours() + '<br />';
            data += 'Phút: ' + date.getMinutes() + '<br />';
            data += 'Giây: ' + date.getSeconds() + '<br />';
            data += 'Mili Giây: ' + date.getMilliseconds() + '<br />';
            document.getElementById('result').innerHTML = data;
        }
//Kết quả  
//Ngày trong tháng: 10
//Ngày trong tuần: 2
//Tháng trong năm: 4
//Năm đầy đủ: 2022
//Giờ: 11
//Phút: 56
//Giây: 38
//Mili Giây: 985