Chuyên mục Học nhanh Javascript cùng Minacode

Giới thiệu đôi nét về Javascript và những điều Javascript có thể làm trong lập trình web - #1

Đăng bởi: Minacode|Cập nhật:16-01-2024

Ok anh em, Đây sẽ là bài viết đầu tiên trong chuỗi bài viết liên quan đến chủ đề học nhanh Javascript cùng Minacode. Bài viết này mình sẽ giới thiệu đôi nét về Javascript và những điều mà Javascript có thể làm trong lập trình web nhé! Nào Let's go thôi.

Đối nét về Javascipt

  • + JavaScript là một trong những ngôn ngữ lập trình phổ biến nhất thế giới.
  • + JavaScript là ngôn ngữ lập trình của Web.
  • + JavaScript tương đối dễ học.
<!DOCTYPE html>
<html>
<body>

<h2>Minacode|JavaScript</h2>

<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Bạn hãy click vào tôi để biết hôm nay ngày mấy.</button>

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

</body>
</html>

Mình vừa tạo một function đơn giản để có thể lấy ngày hiện tại. Ta có:

Các phiên bản JavaScript

  • + JavaScript gốc ES1 ES2 ES3 (1997-1999)
  • + Bản sửa đổi chính đầu tiên ES5 (2009)
  • + Bản sửa đổi thứ hai ES6 (2015)
  • +Bổ sung hàng năm (2016, 2017 ... 2021, 2022)

Tại sao nên học JavaScript?

JavaScript là một trong 3 ngôn ngữ mà tất cả các nhà phát triển web phải học bên cạch Html và Css:

JavaScript có thể làm được những gì

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

Một trong nhiều phương thức Html của JavaScript là getElementById(). Ví dụ bên dưới "tìm" một phần tử HTML (với id="demo") và thay đổi nội dung phần tử (innerHTML) thành "Xin chào Minacode":

<!DOCTYPE html>
<html>
<body>

<h2>Minacode|JavaScript</h2>

<p id="demo">JavaScript có thể thay đổi nôi dung của Html.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello Minacode!"'>Click Tôi!</button>

</body>
</html>

Ta có:

JavaScript có thể thay đổi giá trị thuộc tính Css

<!DOCTYPE html>
<html>
<body>

<h2>Miancode|JavaScript</h2>

<p>JavaScript có thể thay đổi thuộc tính Css< p>

<button onclick="document.getElementById('myh1').style.color='red'">Chuyển màu đỏ</button>

<h1 id="myh1">MINACODE</h1>

<button onclick="document.getElementById('myh1').style.color='green'">Chuyển màu xanh</button>

</body>
</html>

JavaScript có thể ẩn hay hiện các phần tử Html

Việc ẩn các phần tử Html có thể được thực hiện bằng cách thay đổi thuộc tính display:

document.getElementById("demo").style.display = "none";
document.getElementById("demo").style.display = "block";

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

Trong ví dụ dưới đây, mình dùng JavaScript để thay đổi giá trị thuộc tính (src) của thẻ <img>:

<!DOCTYPE html>
<html>
<body>

<h2>Minacode|JavaScript</h2>

<p>JavaScript có thể thay đổi thuộc tính src của thẻ img.</p>


<button onclick="document.getElementById('myImage').src='https://minacode.net/public/storage/images/1704697069-1.png'">Ảnh 1</button>

<img id="myImage" src="https://minacode.net/public/frontend/images/minacode.png" style="width:100px">

<button onclick="document.getElementById('myImage').src='https://minacode.net/public/storage/images/1702377445-G%C3%93C%20T%C3%8DCH%20H%E1%BB%A2P-min.png'">Ảnh 2</button>

</body>
</html>

Ta có:

Bạn có biết không?

JavaScript và Java là những ngôn ngữ hoàn toàn khác nhau, cả về ý tưởng lẫn thiết kế. JavaScript được phát minh bởi Brendan Eich vào năm 1995 và trở thành tiêu chuẩn ECMA vào năm 1997.

ECMA-262 là tên chính thức của tiêu chuẩn. ECMAScript là tên chính thức của ngôn ngữ.

>>Còn tiếp nhé>>

Để Lại Ý Kiến Của bạn!
Bài Viết Chuyên Mục


Khóa Học Miễn Phí

IvyModa

FullStack

Chi tiết

Tạo tính năng CRUD với Livewire Laravel

FullStack

Chi tiết

Php-MySqli-DataBase Cơ Bản

FullStack

Chi tiết
Về MinaCode
Đọc Thơ Nhân Kỷ Niệm 10 Năm Thành Lập MB Nam Đà Nẵng

Banker To Coder

Hi All,


Nguyên đây! MinaCode là website mình tạo ra với mong muốn chia sẻ chút kiến thức liên quan đến lập trình FullStack.

Ngôn ngữ lập trình chủ yếu được sử dụng là Htm, Css, Javascript, Php cùng một số thư viện như Jquery, Fontawesome... Phía Frontend và Farmework Laravel phía Backend.

Mình chưa bao giờ tham gia bất cứ một trường lớp nào về lập trình. Tất cả kiến thức mình chia sẻ đều là trên tình thần tự học. Do đó:

+ MinaCode phù hợp với những tay ngang, xem lập trình như là một kỹ năng bổ trợ trong công việc hay là một kênh kiếm thêm thu nhập từ những very mini projects.

+ MinaCode không phù hợp với những bạn đang được đào tạo bài bản, chính quy.

Mình tin rằng, Trong tương lai không xa. Lập trình sẽ trở nên một kỹ năng không thể thiếu đối với các bạn trẻ.

Cuối cùng thì Ngôn ngữ lập trình không quan trọng bằng Tư duy lập trình. Mình chúc các bạn sẽ có được những kiến thức bổ ích với MinaCode.

--Ngô Sỹ Nguyên--

Coming Soon