Học lập trình javascript cơ bản – Javascript Mạnh Mẽ Thế Nào
Hi, xin chào tất cả mọi người! Khi làm front-end thì những xử lý tương tác với người dùng thì vô cùng quan trọng, với HTML, CSS thì chưa đủ, bạn còn phải cần đến JavaScript để xử lý những thứ này. Do đó ở bài viết này mình sẽ chia sẻ với các bạn về học lập trình JavaScript cơ bản để các bạn có một chút võ công về JavaScript nhe!
Contents
1. Javascript là gì?
JavaScript là một ngôn ngữ lập trình hoặc ngôn ngữ kịch bản, cho phép xử lý các tương tác ở phía client (người dùng) và hiện nay javascript cũng xử lý được ở phía server. Do đó javascript hiện nay vô cùng mạnh mẽ cho lập trình web.
2. Javascript cơ bản có những gì?
Những gì cơ bản ở các ngôn ngữ lập trình thì với javascript đều có, bời vì bản thân javascript là một ngôn ngữ lập trình. Do đó khi bạn nắm vững các kiến thức cơ bản ở các ngôn ngữ khác thì chắc chắn bạn đừng lo lắng gì khi học javascript cơ bản nữa. Với những bạn mới hoặc mất nền tảng lập trình thì yên tâm, việc học không bao giờ quá muộn các bạn ạ, chỉ cần bạn có nổ lực, cố gắng thì chắc chắn các bạn cũng sẽ thành công.
Javascript cơ bản cũng bao gồm: các kiểu dữ liệu, biến, vòng lặp, hàm, mảng,… Và các bạn đừng lo có một anh trên youtube dạy rất dễ hiểu và chỉ vỏn vẹn 15 phút là xong đó là channel toidicodedao. Các bạn xem javascript cơ bản của ảnh tại đây nhé!
Trang ThachPham cũng viết rất là chi tiết và dễ hiểu luôn, ai hay chơi game chắc cũng rất thích phong cách viết này. https://thachpham.com/web-development/javascript/javascript-co-ban-hanh-trinh-cua-mot-anh-hung.html
3. Javascript DOM
Javascript DOM là dùng javascript để thay đổi cấu trúc DOM(cấu trúc cây) của HTML, CSS. Bạn phải hiểu rằng, javascript chỉ thay đổi, thêm, xóa, sửa cấu trúc HTML, CSS còn việc thay đổi giao diện như thế nào thì vẫn do CSS đảm nhận nhé.
Để có thể thay đổi cấu trúc HTML hay CSS của element nào thì cần phải lấy được element đó, javascript hỗ trợ 2 cách lấy là lấy qua hàm tạo sẵn hoặc lấy qua selector của CSS.
Trang ThachPham cũng viết khá kỹ về này luôn nha. https://thachpham.com/web-development/javascript/dom-trong-javascript-can-ban.html
3.1 Lấy element qua hàm tạo sẵn
- Lấy thông qua id, hàm sẽ trả về một element nên trong tên hàm không có s chỗ element nhé!
document.getElementById('idCuaElement')- Lấy thông qua tên class, hàm sẽ trả về một HTMLCollection (có thể hiểu như mảng nhưng bản chất nó không là mảng) nên trong tên hàm có s chỗ elements.
Để chuyển sang mảng thì sử dụng hàm Array.from(HTMLCollection).
document.getElementsByClassName('tenClass')- Lấy thông qua tên thẻ HTML, hàm cũng trả về HTMLCollection.
document.getElementsByTagName('tenThe');3.2 Lấy element qua selector
document.querySelector('#id');- Lấy element thông qua id hoặc class nếu id thì sử dụng “#” còn class thì sử dụng “.” , hàm này sẽ trả về một element.
Các giá trị id hoặc class có thể được thay thế bằng selector:
document.querySelectorAll("[data-toggle='model']")3.3 Thay đổi thông tin element
- Lấy thông tin:
vd:
<div class="demo" title="the div">DEMO </div>
var a = document.querySelector('.demo');
var a_Attr = a.getAttribute("title");- Thay đổi thông tin:
a.setAttribute("title", "Da Sua");4. Một số ứng dụng của Javascript
Đối với các nhà cung cấp dịch vụ website, để đáp ứng cho sở thích các nhân của nhiều người dùng, họ xây dựng sẵn các kiểu màu sắc khác nhau cho trang web, các hàng chỉ cần bấm vào và custom lại theo cái mình thích, đó là một ứng dụng thực tế của javascript. Cách làm như thế này, người ta tạo những style khác nhau bởi các file css khác nhau và dùng javascript để thay đổi đường link dẫn đến các file này.
Các bạn xem thêm các ứng dụng thực tế tại: video1 và video2
Kết Luận
Trên đây là những chia sẻ của mình về Javascript, cảm ơn các bạn đã xem bài viết của mình. Và nếu có những thắc mắc gì thì đừng ngần ngại để lại comment cho mình biết nhé! À để võ công có thể luyện thành thì chỉ một cách duy nhất là luyện tập, do đó các bạn hãy tìm thêm các bài tập lập trình javascript cơ bản để nâng cao võ công nhé!