Javascript là gì

JavaScript là gì?

JavaScript là ngôn ngữ lập trình cho phép triển khai những chức năng phức tạp trên website. Như hiển thị các cập nhật nội dung kịp thời, tương tác với bản đồ, hoạt cảnh 2D/3D...Những hoạt động này đều có sự tham gia của JS. Đây là mảnh ghép thứ 3 trong tiêu chuẩn công nghệ về website, hai trong số đó là HTML và CSS.

Ba lớp ngôn ngữ được xếp chồng lên nhau một cách phù hợp. Hãy xem ví dụ dưới đây mô tả một đoạn văn bản đơn giản.

Bạn có thể đánh dấu văn bản bằng HTML

Sau đó thêm một vài đoạn CSS giúp tăng tính thẩm mỹ cho đoạn văn:

Và cuối cùng, chúng ta có thể áp dụng JavaScript vào đoạn văn để tăng tính tương tác.

JavaScript có thể làm được gì?

Sau khi tìm hiểu được, JavaScript la gi. Hãy cùng Brandinfo tìm hiểu JS có thể làm được gì.

Bên trong ngôn ngữ JavaScript bao gồm một vài tính năng lập trình phổ biến cho phép bạn thực hiện một vài sau:

• Lưu trữ các giá trị (thông tin) trong các biến(variables).Như ở ví dụ bên trên, chúng tôi yêu cầu nhập một tên mới sau đó lưu trữ tên vừa nhập trong một biến gọi là name
• Thao tác trên đoạn văn bản (còn gọi là chuỗi - strings trong lập trình). Trong ví dụ trên, chúng tôi lấy chuỗi "Player 1:" và đưa nó vào biến name để tạo đoạn văn bản hoàn chỉnh là ''Player 1: Chris".
• Chạy code phản hồi lại những sự kiện đang xảy ra trên trang web. Chúng tôi đã dùng một sự kiện click trong ví dụ bên trên để phát hiện sự kiện nhấp chuột vào nút nhấn và chạy code tương ứng để cập nhật đoạn văn bản.
• Và... nhiều hơn thế nữa!

Tuy nhiên điều thú vị hơn nữa là các lớp tính năng (functionality) được xây dựng trên lõi của ngôn ngữ JavaScript. Cái được gọi là Giao Diện Lập Trình Ứng Dụng (Application Programming Interfaces-APIs) thêm cho bạn siêu sức mạnh để sử dụng trong code JavaScript.

APIs là gì?

APIs là các bộ code được dựng sẵn cho phép một nhà phát triển (developer) triển khai các chương trình mà nếu thiếu nó sẽ khó hoặc bất khả thi khi triển khai. Chúng hoạt động trong lập trình tương tự như những bộ nội thất làm sẵn cho việc xây nhà. Sẽ dễ dàng hơn nhiều nếu lắp ráp một kệ sách với gỗ đã gia công theo thiết kế và ốc vít có sẵn hơn là tự tìm nguyên liệu gỗ, tự gia công theo kích cỡ đã thiết kết, tìm ốc vít đúng cỡ rồi lắp ráp thành một kệ sách.

APIs thường được chia thành hai loại:

Browser APIs (APIs Trình Duyệt)

Được tích hợp sẵn trong trình duyệt web, có khả năng phơi bày dữ liệu từ môi trường máy tính xung quanh hoặc làm những điều phức tạp hữu ích.

Ví dụ:

• DOM (Document Object Model) cho phép bạn điều khiển HTML và CSS, tạo mới, loại bỏ và thay đổi HTML áp dụng các định dạng (style) mới vào trang của bạn một cách linh hoạt vv... Mỗi khi bạn nhìn thấy một cửa sổ bật lên (popup window) trên một trang hoặc một vài nội dung mới được hiển thị (như chúng ta được thấy trong ví dụ đơn giản ở trên) chẳng hạn, đó là các hoạt động điển hình của DOM.
• Geolocation API tiếp nhận thông tin địa lí. Đây là cách Google Maps tìm vị trí của bạn và định vị nó trên bản đồ.
• Canvas và WebGL APIs cho phép bạn tạo hoạt cảnh đồ họa 2D và 3D. Các lập trình viên đang sáng tạo những thứ hay ho nhờ sử dụng các công nghệ web này.
• Audio and Video APIs như HTML Media Element và WebRTC cho phép bạn làm những điều thú vị với đa phương tiện (multimedia) như chạy âm thanh (audio) và video ngay trong trang web hoặc thu video từ webcam và hiển thị nó trên máy tính của người khác  (try our simple Snapshot demo to get the idea).

Các API của bên thứ ba 

Không được tích hợp vào trình duyệt theo mặc định và bạn thường phải lấy mã và thông tin của chúng từ một nơi nào đó trên Web.

Ví dụ:

• Các Twitter API cho phép bạn làm những việc như hiển thị các tweet mới nhất của bạn trên trang web.
• Các API của Google Maps và OpenStreetMap API cho phép bạn tùy chỉnh nhúng bản đồ vào trang web của bạn.

Bạn sẽ không thể xây dựng Facebook, Google Maps hoặc Instagram tiếp theo sau khi nghiên cứu JavaScript trong 24 giờ, có rất nhiều điều cơ bản cần đề cập trước tiên. Và đó là lý do tại sao bạn ở đây - hãy tiếp tục nào!

JavaScript đang làm gì trên website của bạn?

Ở đây chúng ta sẽ bắt đầu thực sự xem xét một số mã, hãy khám phá những gì thực sự xảy ra khi bạn chạy một số Java Script trong trang của mình.

Hãy tóm tắt ngắn gọn câu chuyện về những gì sẽ xảy ra khi bạn tải một trang web trong trình duyệt. Khi bạn tải một trang web trong trình duyệt của mình, bạn đang chạy mã của mình (HTML, CSS và Java Script) bên trong môi trường thực thi (tab trình duyệt). Điều này giống như một nhà máy lấy nguyên liệu thô (mã) và xuất ra sản phẩm (trang web).

JavaScript được thực thi bởi công cụ JavaScript của trình duyệt, sau khi HTML và CSS đã được tập hợp và đặt lại với nhau thành một trang web. Điều này đảm bảo rằng cấu trúc và kiểu của trang đã có sẵn vào thời điểm JavaScript bắt đầu chạy.

Đây là một điều tốt, vì cách sử dụng JavaScrip rất phổ biến là tự động sửa đổi HTML và CSS để cập nhật giao diện người dùng, thông qua API mô hình đối tượng tài liệu (như đã đề cập ở trên). Nếu JavaScript được tải và cố gắng chạy trước khi HTML và CSS thì lỗi sẽ xảy ra.

Bảo mật trình duyệt

Mỗi tab trình duyệt là nhóm riêng biệt để chạy mã trong (các nhóm này được gọi là "môi trường thực thi" trong thuật ngữ kỹ thuật), điều này có nghĩa là trong hầu hết các trường hợp, mã trong mỗi tab được chạy hoàn toàn riêng biệt. Tức là mã trong một tab này không thể trực tiếp ảnh hưởng đến mã trong tab khác hoặc trên trang web khác. Đây là một biện pháp bảo mật tốt.

Lệnh chạy JavaScript

Khi trình duyệt gặp một khối JavaScript, nó thường chạy nó theo thứ tự, từ trên xuống dưới. Điều này có nghĩa là bạn cần phải cẩn thận xem bạn sắp xếp mọi thứ theo thứ tự nào.

Ví dụ: hãy quay lại khối JavaScript mà chúng ta đã thấy trong ví dụ đầu tiên:

Ở đây chúng tôi đang chọn một đoạn văn bản (dòng 1), sau đó gắn một trình xử lý sự kiện vào nó (dòng 3) để khi đoạn văn được nhấp vào, updateName () khối mã (dòng 5–8) sẽ được chạy. Khối updateName () mã (các loại khối mã có thể tái sử dụng này được gọi là "hàm") yêu cầu người dùng đặt tên mới, sau đó chèn tên đó vào đoạn văn bản để cập nhật màn hình.

Nếu bạn đã hoán đổi thứ tự của hai dòng mã đầu tiên, nó sẽ không hoạt động nữa. Thay vào đó, bạn sẽ gặp lỗi được trả về trong bảng điều khiển dành cho nhà phát triển của trình duyệt TypeError: para is underfined. Điều này có nghĩa là para đối tượng chưa tồn tại, vì vậy sẽ không thể thêm trình nghe sự kiện vào nó.

Mã được thông dịch so với mã đã biên dịch

Bạn có thể nghe thấy các thuật ngữ được giải thích và biên dịch trong ngữ cảnh lập trình. Trong các ngôn ngữ thông dịch, mã được chạy từ trên xuống dưới và kết quả của việc chạy mã được trả về ngay lập tức. Bạn không phải chuyển đổi mã thành một dạng khác trước khi trình duyệt chạy nó.

Mặt khác, các ngôn ngữ biên dịch được chuyển đổi (biên dịch) thành một dạng khác trước khi chúng được chạy bởi máy tính. Ví dụ, C / C ++ được biên dịch thành hợp ngữ sau đó được chạy bởi máy tính.

JavaScript là một ngôn ngữ lập trình thông dịch nhẹ. Cả hai cách tiếp cận đều có những ưu điểm khác nhau mà chúng ta sẽ không thảo luận trong bài viết này.

Mã phím máy chủ so với phím máy khách

Bạn cũng có thể nghe thấy thuật ngữ server-side và client-side code, đặc biệt là trong bối cảnh phát triển web. Mã phía máy khách là mã được chạy trên máy tính của người dùng, khi một trang web được xem mã phía máy khách của trang được tải xuống, sau đó chạy và hiển thị bởi trình duyệt. Trong bài viết này, chúng tôi đang nói rõ ràng về JavaScript phía máy khách .

Mặt khác, mã phía máy chủ được chạy trên máy chủ, sau đó kết quả của nó được tải xuống và hiển thị trong trình duyệt. Ví dụ về các ngôn ngữ web phía máy chủ phổ biến bao gồm PHP, Python, Ruby, ASP.NET và ... JavaScript! JavaScript cũng có thể được sử dụng làm ngôn ngữ phía máy chủ, ví dụ như trong môi trường Node.js phổ biến, bạn có thể tìm hiểu thêm về JavaScript phía máy chủ trong Trang web động này.

Mã động so với mã tĩnh

Từ động được sử dụng để mô tả cả JavaScript phía máy khách và ngôn ngữ phía máy chủ, nó đề cập đến khả năng cập nhật hiển thị của trang web/ ứng dụng để hiển thị những thứ khác nhau trong các trường hợp khác nhau, tạo nội dung mới theo yêu cầu. Mã phía máy chủ tự động tạo nội dung mới trên máy chủ.

Ví dụ:

• Kéo dữ liệu từ cơ sở dữ liệu, trong khi JavaScript phía máy khách tự động tạo nội dung mới bên trong trình duyệt trên máy khác.
• Tạo bảng HTML mới, điền vào nó bằng dữ liệu được yêu cầu từ máy chủ , sau đó hiển thị bảng trong một trang web được hiển thị cho người dùng. 

Ý nghĩa hơi khác nhau trong hai ngữ cảnh, nhưng có liên quan cả hai cách tiếp cận (phía máy chủ và phía máy khách) thường hoạt động cùng nhau.

Một trang web không có nội dung cập nhật động được gọi là tĩnh, tức là nó chỉ hiển thị nội dung cùng một lúc.

Thêm JavaScript vào HTML như thế nào?

JavaScript được áp dụng cho trang HTML của bạn theo cách tương tự như CSS. Trong khi CSS sử dụng <link> các phần tử để áp dụng các biểu định kiểu bên ngoài và <style> các phần tử để áp dụng các biểu định kiểu nội bộ vào HTML, thì JavaScript chỉ cần một người bạn trong thế giới HTML là phần tử -<script>. Hãy tìm hiểu cách thức hoạt động của nó.

Internal JavaScript

1. Trước hết, hãy tạo một bản sao cục bộ của tệp mẫu apply-javascript.html. Lưu nó trong một thư mục bạn dễ nhận diện.
2. Mở tệp trong trình duyệt web và trong trình soạn thảo văn bản của bạn. Bạn sẽ thấy rằng HTML tạo ra một trang web đơn giản có chứa một nút có thể nhấp được.
3. Tiếp theo, hãy chuyển đến trình soạn thảo văn bản và thêm nội dung sau vào đầu ngay trước thẻ đóng </head>của bạn :

4. Bây giờ, bạn sẽ thêm một số JavaScript vào bên trong phần tử <script> của mình để làm cho trang hoạt động thú vị hơn, thêm đoạn mã sau ngay dưới dòng "// JavaScript go here":

5. Lưu tệp của bạn và làm mới trình duyệt. Bây giờ bạn sẽ thấy rằng khi bạn nhấp vào nút, một đoạn văn mới được tạo và đặt bên dưới.

Lưu ý : Nếu thao tác của bạn dường như không hoạt động, hãy thực hiện lại các bước và kiểm tra xem bạn đã làm đúng mọi thứ chưa. Bạn đã lưu bản sao cục bộ của mã bắt đầu dưới dạng file .html chưa? Bạn đã thêm phần tử <script> của mình ngay trước thẻ đóng</head>? Bạn đã nhập đúng JavaScript như được hiển thị chưa? JavaScript phân biệt chữ hoa chữ thường, vì vậy bạn cần nhập cú pháp chính xác như hình minh họa, nếu không nó có thể không hoạt động.

External JavaScript

Điều này rất hiệu quả, nhưng nếu chúng ta muốn đưa JavaScript của mình vào một tệp bên ngoài thì sao? Hãy cùng khám phá điều này ngay bây giờ.

1. Đầu tiên, tạo một tệp mới trong cùng thư mục với tệp HTML mẫu của bạn. Gọi nó script.js- đảm bảo rằng nó có phần mở rộng tên tệp .js, vì đó là cách nó được nhận dạng là JavaScript.
2. Thay thế phần tử <script> hiện tại của bạn bằng phần tử sau:

3. Bên trong script.js-, thêm tập lệnh sau:

4. Lưu và làm mới trình duyệt của bạn, và bạn sẽ thấy điều tương tự! Nó hoạt động giống nhau, nhưng bây giờ chúng tôi đã có JavaScript của mình trong một tệp bên ngoài. Điều này nói chung là một điều tốt về mặt tổ chức mã của bạn và làm cho nó có thể tái sử dụng trên nhiều tệp HTML. Thêm vào đó, HTML dễ đọc hơn mà không có một lượng lớn tập lệnh được đổ vào đó.

Lời kết

Giống như với HTML và CSS, bạn có thể viết các nhận xét vào mã JavaScript của bạn, mã này sẽ bị trình duyệt bỏ qua và tồn tại đơn giản để cung cấp hướng dẫn cho các nhà phát triển về cách mã hoạt động. 

>>Website là gì?