Tìm hiểu một số cách sử dụng hàng đầu cho JavaScript, khi chúng tôi khám phá lý do tại sao nó lại là ngôn ngữ lập trình phổ biến và đa dạng như vậy
Chia sẻ bài đăng này
Nếu bạn muốn hiểu rõ về lập trình trên internet, thì việc thông thạo JavaScript chắc chắn sẽ rất đáng giá. Cùng với HTML và CSS, nó là nền tảng cho cách thức hoạt động của các trang web hiện đại — và nó có thể làm được nhiều hơn thế nữa, bên cạnh đó
Trong bài viết này, chúng ta sẽ xem xét kỹ hơn một số cách sử dụng JavaScript cũng như lý do tại sao nó lại là ngôn ngữ lập trình phổ biến và linh hoạt như vậy
Mục lục
- JavaScript – cơ bản
- JavaScript là gì?
- Tại sao JavaScript lại phổ biến đến vậy?
- Tại sao học JavaScript?
- Một số điều cần thiết về JavaScript là gì?
- JavaScript được sử dụng như thế nào trong thiết kế web?
- HTML là gì?
- CSS là gì?
- JavaScript được sử dụng để làm gì?
- 1. Ứng dụng di động
- 2. bản đồ tương tác
- 3. thực tế ảo
- 4. hệ thống đặt phòng
- 5. Trò chơi
- 6. Ảnh động
- 7. Trực quan hóa dữ liệu
- Cách lập trình với JavaScript
- Mất bao lâu để học JavaScript?
- Tôi có thể học với một khóa học lập trình không?
- Khóa học JavaScript full-stack kéo dài bao lâu?
- suy nghĩ cuối cùng
JavaScript – cơ bản
Trước khi chúng tôi đi vào chi tiết về những gì bạn có thể làm với JavaScript, hãy tìm hiểu một số điều cơ bản. Nếu bạn đang muốn học một ngôn ngữ lập trình, những điều cơ bản này có thể giúp bạn hiểu tại sao JavaScript có thể là một lựa chọn tuyệt vời.
JavaScript là gì?
JavaScript xuất hiện vào đầu những năm 90 khi Internet Explorer và Netscape Navigator là những trình duyệt phổ biến nhất. Một nhân viên của Netscape tên là Brendan Eich đã phát triển một ngôn ngữ lập trình cho phép trình duyệt phản hồi các lệnh từ người dùng. Anh ấy gọi nó là LiveScript
Tập lệnh được đổi tên để lấy lại danh tiếng của Java, một ngôn ngữ lập trình phổ biến khác nổi bật vào thời điểm đó. Tuy nhiên, nó cần một plugin đặc biệt riêng để chạy
Vậy, sự khác biệt giữa Java và JavaScript là gì? . Java có xu hướng được sử dụng nhiều hơn trong các máy chủ hơn là trên các máy khách như điện thoại, máy tính để bàn và máy tính xách tay. JavaScript được chạy trên trình duyệt internet, như Chrome hoặc Firefox. Điều quan trọng là chúng không bị nhầm lẫn
Tại sao JavaScript lại phổ biến đến vậy?
Chỉ số TIOBE xếp Javascript là ngôn ngữ lập trình phổ biến thứ bảy, chỉ đứng sau PHP và Visual Basic. Nó thích hợp hơn một chút so với Python, C và Java, nhưng nó cung cấp một số lợi thế chính khiến nó trở nên khác biệt. Hãy xem xét một số điều đáng chú ý hơn
JavaScript là một ngôn ngữ lập trình chúng ta có thể sử dụng để làm cho một trang web tương tác. Khi chúng tôi tìm kiếm thứ gì đó trên Google hoặc nhấp vào một liên kết, trang web của chúng tôi sẽ thay đổi — đó là điều mà JavaScript cho phép chúng tôi thực hiện
Đầu tiên, chúng ta sẽ sử dụng Sublime để tạo chỉ mục. html với thông tin soạn sẵn thông thường và chúng tôi cũng sẽ tạo một nút nhanh ở đây trong thẻ body của chúng tôi
Chúng tôi sẽ xem trang và có nút của chúng tôi
Sau đó, chúng ta sẽ tạo một thư mục js và đặt một tệp có tên là script. js bên trong nó - tên này là quy ước. Tiếp theo, chúng tôi sẽ liên kết tệp JS này với mã của chúng tôi giống như chúng tôi đã làm cho khung CSS và bootstrap trong các hướng dẫn trước. Nó sẽ đi vào bên trong thẻ đầu của chúng tôi
Và bây giờ chúng ta có JavaScript. Hiện tại sẽ không có gì khác biệt, nhưng chúng tôi đã thiết lập và sẵn sàng viết mã. Bây giờ, giả sử chúng ta muốn tạo bất ngờ cho bạn của mình bằng một tin nhắn ẩn. Khi họ tải màn hình lần đầu tiên, chỉ có nút Bấm vào đây sẽ xuất hiện, nhưng nếu họ bấm vào nút này, thông báo ẩn sẽ tự hiển thị. Vì vậy, trước tiên, hãy tạo thông báo ẩn này và chúng tôi sẽ thêm một chút CSS để ẩn thông báo lúc đầu…
Bây giờ làm mới trang, chúng tôi thấy rằng mặc dù chúng tôi đã viết phần tử này bằng mã nhưng nó bị ẩn vì chúng tôi đặt thuộc tính hiển thị thành không
Tất cả những gì chúng tôi cần làm là viết JavaScript để khi chúng tôi nhấp vào nút, thông báo sẽ hiển thị, vì vậy chúng tôi sẽ chuyển đến tập lệnh của bạn. js và viết hàm. Để tạo một chức năng, chúng tôi sẽ viết chức năng từ khóa và sau đó là tên của chức năng - ở đây, đó là RevealMessage. Nếu chúng ta cần thêm các tham số vào hàm, thì chúng ta sẽ đặt các tham số đó vào giữa các dấu ngoặc đơn, nhưng chúng ta không cần phải lo lắng về điều đó ngay bây giờ vì vậy chúng ta sẽ không đặt bất cứ thứ gì vào bên trong. Sau đó, chúng ta có thể thêm phần thân của hàm — nó sẽ thực sự làm gì khi được gọi là RevealMessage[]. Bên trong chức năng của chúng tôi, chúng tôi sẽ truy cập tài liệu biến [còn gọi là tài liệu HTML của chúng tôi] và sau đó lấy phần tử có id hiddenMessage [đoạn văn chúng tôi đã tạo trước đó]. Tiếp theo, chúng ta sẽ truy cập vào kiểu của phần tử này, hay nói cách khác là CSS và đặt thuộc tính hiển thị của nó thành giá trị 'khối'
Bây giờ, chúng tôi có chức năng này RevealMessage, nhưng nó chưa được kết nối với nút. Quay trở lại HTML của chúng tôi, chúng tôi sẽ thêm thuộc tính title vào nút của chúng tôi và cung cấp cho nó giá trị của RevealMessage. Về cơ bản, điều này nói rằng hãy chạy chức năng RevealMessage khi nhấp vào nút này
Đang làm mới trang, hãy kiểm tra điều này. Khi chúng tôi nhấp vào nút, thông báo được hiển thị
Chúng tôi chỉ sử dụng JavaScript để thao tác giá trị của thuộc tính hiển thị, nhưng điều này có thể hoạt động với hầu hết mọi thuộc tính trong CSS. Chúng tôi có thể sử dụng JavaScript để thay đổi hình ảnh hoặc màu nền hoặc bất kỳ thứ gì dựa trên hành động của người dùng
Mặc dù điều này có vẻ thú vị, nhưng Thao tác CSS không phải là điều duy nhất mà JavaScript có thể làm. Chúng tôi cũng có thể thêm bộ đếm ngược cho kỳ nghỉ này để mỗi lần người dùng nhấn nút đếm ngược, ngày nghỉ sẽ đến gần hơn. Quay trở lại mã, chúng tôi sẽ thêm một nút có id CountDownButton và hành động title CountDown[]
Tiếp theo, chúng ta sẽ tạo một div và đặt các thuộc tính style và id này từ đoạn văn trên div để thông báo và bộ đếm ngược đều bị ẩn
Chuyển sang JavaScript để làm cho bộ đếm ngược hoạt động, chúng ta sẽ viết hàm từ khóa và đặt tên cho hàm là đếm ngược. Một lần nữa, chúng tôi sẽ không cung cấp cho nó tham số nào và chuyển sang triển khai phương thức của chúng tôi. Chúng ta sẽ tạo một biến với từ khóa var và đặt tên là currentVal. Giá trị của nó sẽ là văn bản của phần tử có id CountDownButton, giá trị này có thể được truy xuất bằng thuộc tính InternalHTML. Sau đó, chúng ta sẽ có một biến khác gọi là newVal và cung cấp cho nó giá trị của currentVal trừ đi 1 — đây là cách chúng ta đếm ngược. Tiếp theo, chúng ta sẽ đặt văn bản của CountDownButton thành giá trị mới bằng cách lấy nó bằng hàm getElementById và đặt thuộc tính innerHTML của nó thành newVal
Thao tác này sẽ cho chúng tôi đếm ngược và làm mới trang… Chúng tôi có nút đếm ngược
Tuy nhiên, bạn có thể nhận thấy rằng đôi khi bộ đếm ngược của chúng tôi xuống dưới 0. Để ngăn chặn điều này, chúng ta có thể thêm một thứ gọi là câu lệnh if. Về cơ bản, chúng tôi sẽ nói rằng giá trị mới mặc định cho nút bằng 0, nhưng nếu giá trị hiện tại của nút là 1 hoặc cao hơn, thì chúng tôi sẽ trừ [đếm ngược] một và để giá trị đó là giá trị mới cho nút. Nếu không, giá trị của nút sẽ bằng 0, giá trị mặc định
Làm mới trang, bây giờ chúng tôi có bộ đếm ngược hợp lý và không xuống dưới 0
Đó là phần giới thiệu về JavaScript và cách nó có thể làm cho trang web của bạn tương tác. Ở đây, chúng tôi đã viết vanilla JavaScript, nghĩa là chúng tôi không sử dụng thêm bất kỳ thư viện nào trong mã của mình. Tuần tới, chúng ta sẽ tìm hiểu về thư viện JavaScript có tên là jQuery và cách thư viện này có thể giúp chúng ta làm mọi việc dễ dàng hơn một chút. Hẹn gặp lại