programming python

Lập trình web cs50 với python và javascript note

Bài 4 - Lập Trình Web Với Python Và JavaScript Của CS50

Được tải lên bởi

Marquette BeP

0 xếp hạng0% thấy tài liệu này hữu ích [0 phiếu bầu]

90 lượt xem27 trang

thông tin tài liệu

nhấp để mở rộng thông tin tài liệu

bản quyền

định dạng có sẵn

PDF, TXT hoặc đọc trực tuyến từ Scribd

Chia sẻ tài liệu này

Chia sẻ hoặc nhúng tài liệu

Chia sẻ lựa chọn

Chia sẻ trên Facebook, mở ra một cửa sổ mới
Facebook
Chia sẻ trên Twitter, mở ra một cửa sổ mới
Twitter
Chia sẻ trên LinkedIn, mở ra một cửa sổ mới
LinkedIn
Chia sẻ với Email, mở ứng dụng thư khách
E-mail
Sao chép đường dẫn
Sao chép đường dẫn

Bạn có thấy tài liệu này hữu ích không?

0%0% thấy tài liệu này hữu ích, Hãy đánh dấu tài liệu này là hữu ích

0%0% nhận thấy tài liệu này không hữu ích, Hãy đánh dấu tài liệu này là không hữu ích

Nội dung này có phù hợp không?

Báo cáo tài liệu này

Tải ngay

LưuLưu Bài giảng 4 - Lập trình web CS50 với Python và. Để Sau

0 xếp hạng0% thấy tài liệu này hữu ích [0 phiếu bầu]

90 lượt xem27 trang

Bài 4 - Lập Trình Web Với Python Và JavaScript Của CS50

Được tải lên bởi

Marquette BeP

Mô tả đầy đủ

LưuLưu Bài giảng 4 - Lập trình web CS50 với Python và. Để Sau

0%0% thấy tài liệu này hữu ích, Hãy đánh dấu tài liệu này là hữu ích

0%0% nhận thấy tài liệu này không hữu ích, Hãy đánh dấu tài liệu này là không hữu ích

Nhúng

Đăng lại

Tải ngay

Chuyển đến trang

Bạn đang ở trang 1trong tổng số 27

Tìm kiếm bên trong tài liệu

Bạn đang đọc bản xem trước miễn phí
Các trang 7 đến 15 are not shown in this preview.

Mua phiên bản đầy đủ

Bạn đang đọc bản xem trước miễn phí
Trang 20 đến 25 are not shown in this preview.

Mua phiên bản đầy đủ

Thưởng cho sự tò mò của bạn

Mọi thứ bạn muốn đọc

Bất cứ lúc nào. bất cứ nơi nào. Bất kỳ thiết bị

Không cam kết. Hủy bỏ bất cứ lúc nào

Chia sẻ tài liệu này

Chia sẻ hoặc nhúng tài liệu

Chia sẻ lựa chọn

Chia sẻ trên Facebook, mở ra một cửa sổ mới
Chia sẻ trên Twitter, mở ra một cửa sổ mới
Chia sẻ trên LinkedIn, mở ra một cửa sổ mới
Chia sẻ với Email, mở ứng dụng thư khách
Sao chép đường dẫn

điều hướng nhanh

Nhà
Sách
sách nói
Các tài liệu
, tích cực

Nếu bạn đã theo dõi blog này và/hoặc kênh Youtube của tôi, bạn sẽ biết tôi hâm mộ khóa học gốc của CS50 như thế nào — Giới thiệu về Khoa học Máy tính

Sau khi kết thúc khóa học đó, tôi rất vui khi thấy rằng họ có nhiều khóa học tiếp theo khác như Giới thiệu về Trí tuệ nhân tạo với Python của CS50 cũng vậy…

CS50’s Web Programming with Python and JavaScript là một khóa học vững chắc dành cho các kỹ sư CNTT hoặc phần mềm để ôn lại kiến thức cơ bản về lập trình web do HarvardX cung cấp. Tất nhiên, chúng ta vẫn phải dành thời gian để làm rõ các khái niệm sau khi hoàn thành lớp học

Nhớ lại rằng trong hầu hết các tương tác trực tuyến, chúng tôi có một khách hàng/người dùng gửi Yêu cầu HTTP đến máy chủ, máy chủ này sẽ gửi lại Phản hồi HTTP. Tất cả mã Python mà chúng tôi đã viết cho đến nay bằng Django đều đang chạy trên máy chủ. JavaScript sẽ cho phép chúng tôi chạy mã ở phía máy khách, nghĩa là không cần tương tác với máy chủ trong khi nó đang chạy, cho phép các trang web của chúng tôi trở nên tương tác hơn nhiều

Để thêm một số JavaScript vào trang của chúng tôi, chúng tôi có thể thêm một cặp

let heading = document.querySelector['h1'];

let heading = document.querySelector['h1'];

Sự kiện

Một tính năng của JavaScript giúp nó hữu ích cho lập trình web là nó hỗ trợ Lập trình hướng sự kiện. Lập trình hướng sự kiện là một mô hình lập trình xoay quanh việc phát hiện các sự kiện và các hành động nên được thực hiện khi một sự kiện được phát hiện

Một sự kiện có thể là hầu hết mọi thứ bao gồm nút được nhấp, con trỏ được di chuyển, phản hồi được nhập hoặc trang được tải. Mọi thứ người dùng làm để tương tác với một trang web đều có thể được coi là một sự kiện. Trong JavaScript, chúng tôi sử dụng Trình xử lý sự kiện chờ một số sự kiện nhất định xảy ra và sau đó thực thi một số mã

Hãy bắt đầu bằng cách biến JavaScript của chúng ta ở trên thành một hàm có tên là

let heading = document.querySelector['h1'];

function hello[] {
    alert['Hello, world!']
}

Bây giờ, hãy bắt đầu chạy chức năng này bất cứ khi nào một nút được nhấp vào. Để làm điều này, chúng tôi sẽ tạo một nút HTML trong trang của chúng tôi với thuộc tính

let heading = document.querySelector['h1'];

3, cung cấp hướng dẫn cho trình duyệt về những gì sẽ xảy ra khi nút được nhấp vào

Click Here

Những thay đổi này cho phép chúng tôi đợi để chạy các phần của mã JavaScript cho đến khi một sự kiện nhất định xảy ra

Biến

JavaScript là ngôn ngữ lập trình giống như Python, C hoặc bất kỳ ngôn ngữ nào khác mà bạn đã từng làm việc trước đây, nghĩa là nó có nhiều tính năng giống như các ngôn ngữ khác bao gồm cả các biến. Có ba từ khóa chúng ta có thể sử dụng để gán giá trị trong JavaScript

```
let heading = document.querySelector['h1'];
```
4. được sử dụng để xác định một biến trên toàn cầu

```
let heading = document.querySelector['h1'];
```
5. được sử dụng để xác định một biến bị giới hạn phạm vi đối với khối hiện tại, chẳng hạn như hàm hoặc vòng lặp

```
let heading = document.querySelector['h1'];
```
6. được sử dụng để xác định một giá trị sẽ không thay đổi

Để biết ví dụ về cách chúng ta có thể sử dụng biến, hãy xem trang theo dõi bộ đếm



    
        Count
        
    
    
        Hello!
        Count

let heading = document.querySelector['h1'];

Ngoài việc cho phép chúng tôi hiển thị thông báo thông qua cảnh báo, JavaScript còn cho phép chúng tôi thay đổi các thành phần trên trang. Để làm được điều này, trước tiên chúng ta phải giới thiệu một chức năng có tên là

let heading = document.querySelector['h1'];

8. Hàm này tìm kiếm và trả về các phần tử của DOM. Ví dụ: chúng tôi sẽ sử dụng

let heading = document.querySelector['h1'];

để trích xuất một tiêu đề. Sau đó, để thao tác với phần tử mà chúng tôi đã tìm thấy gần đây, chúng tôi có thể thay đổi thuộc tính

let heading = document.querySelector['h1'];

9 của nó

let heading = document.querySelector['h1'];

Cũng giống như trong Python, chúng ta cũng có thể tận dụng các điều kiện trong JavaScript. Ví dụ: giả sử thay vì luôn thay đổi tiêu đề của chúng tôi thành

let heading = document.querySelector['h1'];

40, chúng tôi muốn chuyển đổi qua lại giữa

let heading = document.querySelector['h1'];

1 và

let heading = document.querySelector['h1'];

40. Trang của chúng tôi sau đó có thể trông giống như trang bên dưới. Lưu ý rằng trong JavaScript, chúng tôi sử dụng

let heading = document.querySelector['h1'];

43 để so sánh mạnh hơn giữa hai mục, đồng thời kiểm tra xem các đối tượng có cùng loại không. Chúng tôi thường muốn sử dụng

let heading = document.querySelector['h1'];

43 bất cứ khi nào có thể

let heading = document.querySelector['h1'];

Thao tác DOM

Hãy sử dụng ý tưởng thao tác DOM này để cải thiện trang truy cập của chúng ta

let heading = document.querySelector['h1'];

Chúng tôi có thể làm cho trang này trở nên thú vị hơn nữa bằng cách hiển thị cảnh báo mỗi khi bộ đếm đạt đến bội số của mười. Trong cảnh báo này, chúng tôi sẽ muốn định dạng một chuỗi để tùy chỉnh thông báo, điều mà trong JavaScript chúng tôi có thể thực hiện bằng cách sử dụng các ký tự mẫu. Chữ mẫu yêu cầu phải có dấu gạch ngược [________ 145] xung quanh toàn bộ biểu thức và dấu ngoặc nhọn $ và xung quanh bất kỳ thay thế nào. Ví dụ: hãy thay đổi hàm đếm của chúng tôi

let heading = document.querySelector['h1'];

Bây giờ, hãy xem xét một số cách mà chúng ta có thể cải thiện thiết kế của trang này. Đầu tiên, giống như chúng tôi cố gắng tránh tạo kiểu nội tuyến bằng CSS, chúng tôi muốn tránh JavaScript nội tuyến càng nhiều càng tốt. Chúng ta có thể làm điều này trong ví dụ phản bác của mình bằng cách thêm một dòng lệnh thay đổi thuộc tính

let heading = document.querySelector['h1'];

3 của một nút trên trang và xóa thuộc tính

let heading = document.querySelector['h1'];

3 khỏi trong thẻ

let heading = document.querySelector['h1'];

let heading = document.querySelector['h1'];

Một điều cần lưu ý về những gì chúng tôi vừa thực hiện là chúng tôi không gọi hàm

let heading = document.querySelector['h1'];

49 bằng cách thêm dấu ngoặc đơn sau đó, mà thay vào đó chỉ đặt tên cho hàm. Điều này xác định rằng chúng tôi chỉ muốn gọi chức năng này khi nhấp vào nút. Điều này hoạt động vì, giống như Python, JavaScript hỗ trợ lập trình chức năng, do đó, các chức năng có thể được coi là giá trị của chính chúng

Tuy nhiên, chỉ thay đổi ở trên là không đủ, như chúng ta có thể thấy bằng cách kiểm tra trang và xem bảng điều khiển của trình duyệt

Lỗi này xuất hiện vì khi JavaScript tìm kiếm một phần tử bằng cách sử dụng

let heading = document.querySelector['h1'];

00, nó không tìm thấy gì. Điều này là do phải mất một chút thời gian để tải trang và mã JavaScript của chúng tôi đã chạy trước khi nút được hiển thị. Để giải thích cho điều này, chúng ta có thể chỉ định mã đó sẽ chỉ chạy sau khi trang được tải bằng hàm addEventListener. Hàm này có hai đối số

Một sự kiện để lắng nghe [ví dụ:.
```
let heading = document.querySelector['h1'];
```
01]
Một chức năng để chạy khi sự kiện được phát hiện [ví dụ:.
```
let heading = document.querySelector['h1'];
```
2 từ phía trên]

Chúng tôi có thể sử dụng chức năng để chỉ chạy mã sau khi tất cả nội dung đã được tải

function hello[] {
    alert['Hello, world!']
}

Trong ví dụ trên, chúng tôi đã sử dụng một hàm ẩn danh, đây là một hàm không bao giờ được đặt tên. Đặt tất cả những thứ này lại với nhau, JavaScript của chúng ta bây giờ trông như thế này

Click Here

Một cách khác mà chúng tôi có thể cải thiện thiết kế của mình là di chuyển JavaScript của chúng tôi vào một tệp riêng biệt. Cách chúng tôi làm điều này rất giống với cách chúng tôi đặt CSS của mình vào một tệp riêng để tạo kiểu

Viết tất cả mã JavaScript của bạn vào một tệp riêng biệt kết thúc bằng
```
let heading = document.querySelector['h1'];
```
03, có thể là
```
let heading = document.querySelector['h1'];
```
04
Thêm thuộc tính
```
let heading = document.querySelector['h1'];
```
05 vào
```
let heading = document.querySelector['h1'];
```
06
Và một tệp tên là
```
let heading = document.querySelector['h1'];
```
07 trông như thế này
```
Click Here
```
1
Có JavaScript trong một tệp riêng biệt rất hữu ích vì một số lý do
- Kháng cáo hình ảnh. Các tệp HTML và JavaScript riêng lẻ của chúng tôi trở nên dễ đọc hơn
- Truy cập giữa các tệp HTML. Bây giờ chúng ta có thể có nhiều tệp HTML chia sẻ cùng một JavaScript
- Sự hợp tác. Bây giờ chúng ta có thể dễ dàng có một người làm việc trên JavaScript trong khi người khác làm việc trên HTML
- nhập khẩu. Chúng tôi có thể nhập các thư viện JavaScript mà người khác đã viết. Ví dụ: Bootstrap có thư viện JavaScript riêng mà bạn có thể đưa vào để làm cho trang web của mình tương tác hơn
Hãy bắt đầu với một ví dụ khác về trang có thể tương tác hơn một chút. Dưới đây, chúng tôi sẽ tạo một trang nơi người dùng có thể nhập tên của họ để nhận lời chào tùy chỉnh
```
Click Here
```
2
Một số lưu ý về trang trên
- Chúng tôi sử dụng trường
```
let heading = document.querySelector['h1'];
```
  08 trong đầu vào
```
let heading = document.querySelector['h1'];
```
  09 để chỉ ra rằng con trỏ sẽ được đặt bên trong đầu vào đó ngay khi trang được tải
- Chúng tôi sử dụng
```
let heading = document.querySelector['h1'];
```
  10 bên trong
```
let heading = document.querySelector['h1'];
```
  8 để tìm phần tử có
```
let heading = document.querySelector['h1'];
```
  12 của
```
let heading = document.querySelector['h1'];
```
  09. Chúng ta có thể sử dụng tất cả các bộ chọn giống nhau trong chức năng này như trong CSS
- Chúng tôi sử dụng thuộc tính
```
let heading = document.querySelector['h1'];
```
  14 của trường nhập liệu để tìm nội dung hiện đang được nhập vào
Chúng tôi có thể làm nhiều việc hơn là chỉ thêm HTML vào trang của mình bằng JavaScript, chúng tôi cũng có thể thay đổi kiểu dáng của trang. Trong trang bên dưới, chúng tôi sử dụng các nút để thay đổi màu của tiêu đề
```
Click Here
```
3

Một số lưu ý trên trang trên
- Chúng tôi thay đổi kiểu của một phần tử bằng thuộc tính
```
let heading = document.querySelector['h1'];
```
  15
- Chúng tôi sử dụng thuộc tính
```
let heading = document.querySelector['h1'];
```
  16 để gán dữ liệu cho một phần tử HTML. Sau này, chúng tôi có thể truy cập dữ liệu đó bằng JavaScript bằng cách sử dụng thuộc tính
```
let heading = document.querySelector['h1'];
```
  17 của phần tử
- Chúng tôi sử dụng hàm
```
let heading = document.querySelector['h1'];
```
  18 để lấy Danh sách nút [tương tự như danh sách Python hoặc mảng JavaScript] với tất cả các phần tử khớp với truy vấn
- Hàm forEach trong JavaScript nhận một hàm khác và áp dụng hàm đó cho từng thành phần trong danh sách hoặc mảng
Bảng điều khiển JavaScript
Bảng điều khiển là một công cụ hữu ích để kiểm tra các đoạn mã nhỏ và gỡ lỗi. Bạn có thể viết và chạy mã JavaScript trong bảng điều khiển, có thể tìm thấy mã này bằng cách kiểm tra phần tử trong trình duyệt web của bạn rồi nhấp vào
```
let heading = document.querySelector['h1'];
```
19. [Quy trình chính xác có thể thay đổi từ trình duyệt này sang trình duyệt khác. ] Một công cụ hữu ích để gỡ lỗi là in ra bàn điều khiển, bạn có thể thực hiện việc này bằng cách sử dụng hàm
```
let heading = document.querySelector['h1'];
```
30. Ví dụ, trong trang
```
let heading = document.querySelector['h1'];
```
31 ở trên, tôi có thể thêm dòng sau
```
Click Here
```
4
Điều này mang lại cho chúng tôi điều này trong bảng điều khiển
Hàm mũi tên
Ngoài ký hiệu hàm truyền thống mà chúng ta đã thấy, giờ đây JavaScript cung cấp cho chúng ta khả năng sử dụng Hàm mũi tên khi chúng ta có đầu vào [hoặc dấu ngoặc đơn khi không có đầu vào] theo sau là
```
let heading = document.querySelector['h1'];
```
32, sau đó là một số mã sẽ được chạy. Ví dụ: chúng ta có thể thay đổi tập lệnh ở trên để sử dụng chức năng mũi tên ẩn danh
```
Click Here
```
5
Chúng ta cũng có thể đặt tên cho các hàm sử dụng mũi tên, như trong phần viết lại hàm đếm này
```
Click Here
```
6
Để có ý tưởng về một số sự kiện khác mà chúng tôi có thể sử dụng, hãy xem cách chúng tôi có thể triển khai trình chuyển đổi màu của mình bằng menu thả xuống thay vì ba nút riêng biệt. Chúng tôi có thể phát hiện các thay đổi trong phần tử
```
let heading = document.querySelector['h1'];
```
33 bằng thuộc tính
```
let heading = document.querySelector['h1'];
```
34. Trong JavaScript, đây là một từ khóa thay đổi dựa trên ngữ cảnh mà nó được sử dụng. Trong trường hợp xử lý sự kiện,
```
let heading = document.querySelector['h1'];
```
35 đề cập đến đối tượng đã kích hoạt sự kiện
```
Click Here
```
7
Có nhiều sự kiện khác mà chúng tôi có thể phát hiện trong JavaScript bao gồm những sự kiện phổ biến bên dưới
- ```
let heading = document.querySelector['h1'];
```
  3
- ```
let heading = document.querySelector['h1'];
```
  37
- ```
let heading = document.querySelector['h1'];
```
  38
- ```
let heading = document.querySelector['h1'];
```
  39
- ```
let heading = document.querySelector['h1'];
```
  70
- ```
let heading = document.querySelector['h1'];
```
  71
- …
Những việc cần làm
Để tổng hợp một số điều chúng ta đã học được trong bài giảng này, hãy bắt tay vào tạo một danh sách TODO hoàn toàn bằng JavaScript. Chúng ta sẽ bắt đầu bằng cách viết bố cục HTML của trang. Lưu ý bên dưới cách chúng tôi để lại khoảng trống cho một danh sách không có thứ tự, nhưng chúng tôi chưa thêm bất kỳ thứ gì vào danh sách đó. Cũng lưu ý rằng chúng tôi thêm một liên kết đến
```
let heading = document.querySelector['h1'];
```
72 nơi chúng tôi sẽ viết JavaScript của mình
```
Click Here
```
8
Bây giờ, đây là mã của chúng tôi mà chúng tôi có thể giữ trong
```
let heading = document.querySelector['h1'];
```
72. Một vài lưu ý về những gì bạn sẽ thấy bên dưới
- Mã này hơi khác so với mã trong bài giảng. Ở đây, chúng tôi chỉ truy vấn nút gửi và trường tác vụ nhập một lần ngay từ đầu và lưu trữ hai giá trị đó trong các biến
```
let heading = document.querySelector['h1'];
```
  74 và
```
let heading = document.querySelector['h1'];
```
  75
- Chúng ta có thể bật/tắt một nút bằng cách đặt thuộc tính
```
let heading = document.querySelector['h1'];
```
  76 của nó thành
```
let heading = document.querySelector['h1'];
```
  77/
```
let heading = document.querySelector['h1'];
```
  78
- Trong JavaScript, chúng tôi sử dụng
```
let heading = document.querySelector['h1'];
```
  79 để tìm độ dài của các đối tượng như chuỗi và mảng
- Ở cuối tập lệnh, chúng tôi thêm dòng
```
function hello[] {
    alert['Hello, world!']
}
```
  20. Điều này ngăn việc gửi biểu mẫu mặc định liên quan đến việc tải lại trang hiện tại hoặc chuyển hướng đến một trang mới
- Trong JavaScript, chúng ta có thể tạo các phần tử HTML bằng cách sử dụng hàm createElement. Sau đó, chúng ta có thể thêm các phần tử đó vào DOM bằng cách sử dụng hàm
```
function hello[] {
    alert['Hello, world!']
}
```
  21
```
Click Here
```
9
khoảng thời gian
Ngoài việc chỉ định các chức năng chạy khi một sự kiện được kích hoạt, chúng ta cũng có thể đặt các chức năng chạy sau một khoảng thời gian đã đặt. Ví dụ: hãy quay lại tập lệnh của trang bộ đếm của chúng tôi và thêm một khoảng thời gian để ngay cả khi người dùng không nhấp vào bất kỳ thứ gì, bộ đếm sẽ tăng lên sau mỗi giây. Để làm điều này, chúng ta sử dụng hàm setInterval, hàm này nhận đối số là một hàm sẽ chạy và thời gian [tính bằng mili giây] giữa các lần chạy hàm
```
    
        Count
        
    
    
        Hello!
        Count
    
```
0
Lưu trữ cục bộ
Một điều cần lưu ý về tất cả các trang web của chúng tôi cho đến nay là mỗi khi chúng tôi tải lại trang, tất cả thông tin của chúng tôi đều bị mất. Màu tiêu đề trở lại màu đen, bộ đếm trở về 0 và tất cả các tác vụ bị xóa. Đôi khi đây là những gì chúng tôi dự định, nhưng những lúc khác, chúng tôi muốn có thể lưu trữ thông tin mà chúng tôi có thể sử dụng khi người dùng quay lại trang web
Một cách chúng tôi có thể thực hiện việc này là sử dụng Bộ nhớ cục bộ hoặc lưu trữ thông tin trên trình duyệt web của người dùng mà chúng tôi có thể truy cập sau này. Thông tin này được lưu trữ dưới dạng một tập hợp các cặp khóa-giá trị, gần giống như một từ điển Python. Để sử dụng bộ nhớ cục bộ, chúng tôi sẽ sử dụng hai chức năng chính
- ```
function hello[] {
    alert['Hello, world!']
}
```
  22. Hàm này tìm kiếm một mục trong bộ nhớ cục bộ bằng một khóa nhất định và trả về giá trị được liên kết với khóa đó
- ```
function hello[] {
    alert['Hello, world!']
}
```
  23. Hàm này thiết lập và mục nhập trong bộ nhớ cục bộ, liên kết khóa với một giá trị mới
Hãy xem cách chúng ta có thể sử dụng các chức năng mới này để cập nhật bộ đếm của mình. Trong đoạn mã dưới đây,
```
    
        Count
        
    
    
        Hello!
        Count
    
```
1
API
Đối tượng JavaScript
Đối tượng JavaScript rất giống với từ điển Python, vì nó cho phép chúng ta lưu trữ các cặp khóa-giá trị. Ví dụ: tôi có thể tạo Đối tượng JavaScript đại diện cho Harry Potter
```
    
        Count
        
    
    
        Hello!
        Count
    
```
2
Sau đó, tôi có thể truy cập hoặc thay đổi các phần của đối tượng này bằng ký hiệu dấu ngoặc hoặc dấu chấm
Một cách mà các Đối tượng JavaScript thực sự hữu ích là truyền dữ liệu từ trang này sang trang khác, đặc biệt khi sử dụng API
API, hoặc Giao diện lập trình ứng dụng, là một dạng giao tiếp có cấu trúc giữa hai ứng dụng khác nhau
Ví dụ: chúng tôi có thể muốn ứng dụng của mình nhận thông tin từ Google Maps, Amazon hoặc một số dịch vụ thời tiết. Chúng ta có thể làm điều này bằng cách thực hiện các cuộc gọi đến API của dịch vụ, API này sẽ trả về dữ liệu có cấu trúc cho chúng ta, thường ở dạng JSON [Ký hiệu đối tượng JavaScript]. Ví dụ: một chuyến bay ở dạng JSON có thể trông như thế này
```
    
        Count
        
    
    
        Hello!
        Count
    
```
3
Các giá trị trong JSON không nhất thiết phải là các chuỗi và số như trong ví dụ trên. Chúng tôi cũng có thể lưu trữ danh sách hoặc thậm chí các Đối tượng JavaScript khác
```
    
        Count
        
    
    
        Hello!
        Count
    
```
4
Thu đổi ngoại tệ
Để cho biết cách chúng ta có thể sử dụng API trong các ứng dụng của mình, hãy bắt tay vào xây dựng một ứng dụng nơi chúng ta có thể tìm thấy tỷ giá hối đoái giữa hai loại tiền tệ. Trong suốt bài tập, chúng ta sẽ sử dụng API tỷ giá hối đoái của Ngân hàng Trung ương Châu Âu. Bằng cách truy cập trang web của họ, bạn sẽ thấy tài liệu của API, đây thường là nơi tốt để bắt đầu khi bạn muốn sử dụng API. Chúng tôi có thể kiểm tra api này bằng cách truy cập URL. https. //api. tỷ giá hối đoái. io/mới nhất?base=USD. Khi bạn truy cập trang này, bạn sẽ thấy tỷ giá hối đoái giữa U. S. Đô la và nhiều loại tiền tệ khác, được viết dưới dạng JSON. Bạn cũng có thể thay đổi tham số GET trong URL từ
```
function hello[] {
    alert['Hello, world!']
}
```
24 thành bất kỳ mã tiền tệ nào khác để thay đổi tỷ giá bạn nhận được
Hãy cùng xem cách triển khai API này vào một ứng dụng bằng cách tạo một tệp HTML mới có tên là
```
function hello[] {
    alert['Hello, world!']
}
```
25 và liên kết nó với một tệp JavaScript nhưng để trống phần thân
```
    
        Count
        
    
    
        Hello!
        Count
    
```
5
Bây giờ, chúng tôi sẽ sử dụng một thứ gọi là AJAX hoặc JavaScript và XML không đồng bộ, cho phép chúng tôi truy cập thông tin từ các trang bên ngoài ngay cả sau khi trang của chúng tôi đã được tải. Để thực hiện việc này, chúng tôi sẽ sử dụng chức năng tìm nạp cho phép chúng tôi gửi yêu cầu HTTP. Hàm
```
function hello[] {
    alert['Hello, world!']
}
```
26 trả về một lời hứa. Chúng ta sẽ không nói chi tiết về lời hứa ở đây, nhưng chúng ta có thể nghĩ về nó như một giá trị sẽ đến vào một thời điểm nào đó, nhưng không nhất thiết phải ngay lập tức. Chúng tôi xử lý các lời hứa bằng cách cung cấp cho chúng một thuộc tính
```
function hello[] {
    alert['Hello, world!']
}
```
27 mô tả những gì nên làm khi chúng tôi nhận được một
```
function hello[] {
    alert['Hello, world!']
}
```
28. Đoạn mã bên dưới sẽ ghi phản hồi của chúng tôi vào bảng điều khiển
```
    
        Count
        
    
    
        Hello!
        Count
    
```
6
Một điểm quan trọng về đoạn mã trên là đối số của
```
function hello[] {
    alert['Hello, world!']
}
```
27 luôn là một hàm. Mặc dù có vẻ như chúng ta đang tạo các biến
```
function hello[] {
    alert['Hello, world!']
}
```
28 và và
```
Click Here
```
01, nhưng các biến đó chỉ là tham số của hai hàm ẩn danh
Thay vì chỉ ghi nhật ký dữ liệu này, chúng ta có thể sử dụng JavaScript để hiển thị thông báo trên màn hình, như trong đoạn mã dưới đây
```
    
        Count
        
    
    
        Hello!
        Count
    
```
7
Bây giờ, hãy làm cho trang web tương tác hơn một chút bằng cách cho phép người dùng chọn loại tiền tệ mà họ muốn xem. Chúng tôi sẽ bắt đầu bằng cách thay đổi HTML của mình để cho phép người dùng nhập một loại tiền tệ
```
    
        Count
        
    
    
        Hello!
        Count
    
```
8
Bây giờ, chúng tôi sẽ thực hiện một số thay đổi đối với JavaScript của mình để nó chỉ thay đổi khi biểu mẫu được gửi và do đó, nó sẽ tính đến đầu vào của người dùng. Chúng tôi cũng sẽ thêm một số lỗi kiểm tra ở đây
```
    
        Count
        
    
    
        Hello!
        Count
    
```
9
Đó là tất cả cho bài giảng này. Lần tới, chúng tôi sẽ nghiên cứu sử dụng JavaScript để tạo giao diện người dùng hấp dẫn hơn nữa

Lập trình Web với Python và JavaScript của CS50 có tốt không?

Nếu bạn đã hoàn thành CS50 và muốn học phát triển web, thì Khóa học lập trình web với Python và Javascript của CS50 là một khóa học tuyệt vời sẽ .

Lập trình Web với Python và JavaScript của CS50 có miễn phí không?

Ngay cả khi bạn không phải là sinh viên của Harvard, bạn có thể “tham gia” khóa học này miễn phí thông qua OpenCourseWare bằng cách thực hiện theo cách của bạn trong chín tuần tài liệu của khóa học< . Nếu bạn muốn gửi sáu dự án của khóa học để nhận phản hồi, hãy đảm bảo tạo một tài khoản edX, nếu bạn chưa có. . If you'd like to submit the course's six projects for feedback, be sure to create an edX account, if you haven't already.

CS50 có dạy JavaScript không?

Thay vì chỉ dạy một ngôn ngữ, CS50 giới thiệu cho sinh viên một loạt các ngôn ngữ lập trình “thủ tục”, mỗi ngôn ngữ xây dựng khái niệm dựa trên ngôn ngữ khác, trong đó có Scratch, C, Python, . .

Tôi có nên dùng CS50 để phát triển web không?

Tất nhiên, bạn nên . CS50 là khóa học giới thiệu về lập trình và khoa học máy tính tốt nhất hiện có. Nó giới thiệu cho bạn nhiều chủ đề khác nhau, bao gồm cả phát triển web, cả front-end và back-end, trong vài tuần cuối cùng của khóa học.

Được tải lên bởi

thông tin tài liệu

bản quyền

định dạng có sẵn

Chia sẻ tài liệu này

Chia sẻ hoặc nhúng tài liệu

Chia sẻ lựa chọn

Bạn có thấy tài liệu này hữu ích không?

Nội dung này có phù hợp không?

Được tải lên bởi

Thưởng cho sự tò mò của bạn

Chia sẻ tài liệu này

Chia sẻ hoặc nhúng tài liệu

Chia sẻ lựa chọn

điều hướng nhanh

Sự kiện

Biến

let heading = document.querySelector['h1']; 7

Thao tác DOM

Bảng điều khiển JavaScript

Hàm mũi tên

Những việc cần làm

khoảng thời gian

Lưu trữ cục bộ

API

Đối tượng JavaScript

Thu đổi ngoại tệ

Lập trình Web với Python và JavaScript của CS50 có tốt không?

Lập trình Web với Python và JavaScript của CS50 có miễn phí không?

CS50 có dạy JavaScript không?

Tôi có nên dùng CS50 để phát triển web không?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề

`let heading = document.querySelector['h1'];`
7