Tìm hiểu cách tạo một trang web phản hồi nhanh và tuyệt vời sẽ hoạt động trên tất cả các thiết bị, PC, máy tính xách tay, máy tính bảng và điện thoại Show Tạo một trang web với CSS FrameworkBạn đã bao giờ nghe nói về Không gian W3Schools chưa? Bắt đầu miễn phí ❯* Không cần thẻ tín dụng Một "Dự thảo bố cục"Luôn luôn khôn ngoan khi vẽ một bản phác thảo bố cục của thiết kế trang trước khi xây dựng một trang web Có "Dự thảo bố cục" sẽ giúp việc tạo trang web dễ dàng hơn rất nhiều Ban nhạcMô tả ban nhạc Mô tả ban nhạc Mô tả ban nhạc Loại tài liệu, thẻ meta và CSSLoại tài liệu phải xác định trang là tài liệu HTML5 Thẻ meta phải xác định bộ ký tự là UTF-8 Thẻ meta chế độ xem sẽ làm cho trang web hoạt động trên tất cả các thiết bị và độ phân giải màn hình W3. CSS sẽ giải quyết tất cả các nhu cầu về kiểu dáng của chúng tôi cũng như tất cả sự khác biệt về thiết bị và trình duyệt Để tìm hiểu thêm về cách tạo kiểu với W3. CSS, vui lòng truy cập W3 của chúng tôi. Hướng dẫn CSS Trang web trống đầu tiên của chúng ta sẽ trông như thế này Tạo nội dung trangBên trong phần tử của trang web của chúng tôi, chúng tôi sẽ sử dụng "Hình ảnh bố cục" và tạo
Yếu tố ngữ nghĩaHTML5 đã giới thiệu một số yếu tố ngữ nghĩa mới. Các yếu tố ngữ nghĩa rất quan trọng để sử dụng vì chúng xác định cấu trúc của trang web và giúp trình đọc màn hình cũng như công cụ tìm kiếm đọc trang chính xác JavaScript là ngôn ngữ lập trình bổ sung tính tương tác cho trang web của bạn. Điều này xảy ra trong trò chơi, trong hành vi phản hồi khi nhấn nút hoặc nhập dữ liệu trên biểu mẫu; . Bài viết này giúp bạn bắt đầu với JavaScript và nâng cao hiểu biết của bạn về những gì có thể JavaScript là ngôn ngữ lập trình mạnh mẽ có thể thêm tính tương tác vào trang web. Nó được phát minh bởi Brendan Eich JavaScript linh hoạt và thân thiện với người mới bắt đầu. Với nhiều kinh nghiệm hơn, bạn sẽ có thể tạo trò chơi, đồ họa 2D và 3D hoạt hình, ứng dụng dựa trên cơ sở dữ liệu toàn diện, v.v. Bản thân JavaScript tương đối nhỏ gọn nhưng rất linh hoạt. Các nhà phát triển đã viết nhiều công cụ khác nhau trên ngôn ngữ JavaScript cốt lõi, mở khóa một lượng lớn chức năng với nỗ lực tối thiểu. Bao gồm các
Nó nằm ngoài phạm vi của bài viết này—như một phần giới thiệu sơ lược về JavaScript—để trình bày chi tiết về sự khác biệt giữa ngôn ngữ JavaScript cốt lõi với các công cụ được liệt kê ở trên. Bạn có thể tìm hiểu thêm trong khu vực học tập JavaScript của MDN, cũng như trong các phần khác của MDN Phần bên dưới giới thiệu một số khía cạnh của ngôn ngữ cốt lõi và cũng mang đến cơ hội chơi với một số tính năng API của trình duyệt. Chúc vui vẻ JavaScript là một trong những công nghệ web hiện đại phổ biến nhất. Khi các kỹ năng JavaScript của bạn phát triển, các trang web của bạn sẽ bước vào một chiều hướng mới của sức mạnh và sự sáng tạo Tuy nhiên, làm quen với JavaScript khó hơn làm quen với HTML và CSS. Bạn có thể phải bắt đầu nhỏ và tiến bộ dần dần. Để bắt đầu, hãy xem cách thêm JavaScript vào trang của bạn để tạo Hello world. ví dụ. (Chào thế giới. là tiêu chuẩn cho các ví dụ lập trình giới thiệu. ) Cảnh báo. Nếu bạn chưa theo dõi phần còn lại của khóa học của chúng tôi, hãy tải xuống mã ví dụ này và sử dụng nó làm điểm bắt đầu
Ghi chú. Lý do hướng dẫn (ở trên) đặt phần tử 0 gần cuối tệp HTML là trình duyệt đọc mã theo thứ tự xuất hiện trong tệpNếu JavaScript tải trước và được cho là ảnh hưởng đến HTML chưa được tải, thì có thể có sự cố. Đặt JavaScript gần cuối trang HTML là một cách để đáp ứng sự phụ thuộc này. Để tìm hiểu thêm về các phương pháp thay thế, xem Văn bản tiêu đề đã thay đổi thành Hello world. sử dụng JavaScript. Bạn đã làm điều này bằng cách sử dụng một hàm có tên là 1 để lấy một tham chiếu đến tiêu đề của bạn, sau đó lưu trữ nó trong một biến có tên là 2. Điều này tương tự như những gì chúng tôi đã làm khi sử dụng bộ chọn CSS. Khi bạn muốn làm gì với một phần tử, bạn cần chọn phần tử đó trướcSau đó, mã đặt giá trị của thuộc tính 4 của biến 2 (đại diện cho nội dung của tiêu đề) thành Hello worldGhi chú. Cả hai tính năng bạn đã sử dụng trong bài tập này đều là một phần của API Mô hình đối tượng tài liệu (DOM), có khả năng thao tác tài liệu Để giúp bạn hiểu rõ hơn về cách JavaScript hoạt động, hãy giải thích một số tính năng cốt lõi của ngôn ngữ này. Cần lưu ý rằng các tính năng này là phổ biến cho tất cả các ngôn ngữ lập trình. Nếu bạn nắm vững những nguyên tắc cơ bản này, bạn cũng sẽ bắt đầu viết mã bằng các ngôn ngữ khác Cảnh báo. Trong bài viết này, hãy thử nhập các dòng mã ví dụ vào bảng điều khiển JavaScript của bạn để xem điều gì sẽ xảy ra. Để biết thêm chi tiết về bảng điều khiển JavaScript, hãy xem Khám phá các công cụ dành cho nhà phát triển trình duyệt Biến là nơi chứa giá trị. Bạn bắt đầu bằng cách khai báo một biến với từ khóa 5, theo sau là tên bạn đặt cho biến
Dấu chấm phẩy ở cuối dòng cho biết vị trí kết thúc câu lệnh. Nó chỉ được yêu cầu khi bạn cần tách các câu lệnh trên một dòng. Tuy nhiên, một số người tin rằng nên có dấu chấm phẩy ở cuối mỗi câu lệnh. Có các quy tắc khác về thời điểm bạn nên và không nên sử dụng dấu chấm phẩy. Để biết thêm chi tiết, hãy xem Hướng dẫn của bạn về dấu chấm phẩy trong JavaScript Bạn có thể đặt tên cho một biến gần như bất cứ thứ gì, nhưng có một số hạn chế. (Nhìn thấy. ) Nếu không chắc chắn, bạn có thể kiểm tra tên biến của mình xem có hợp lệ không JavaScript phân biệt chữ hoa chữ thường. Điều này có nghĩa là 6 không giống như 7. Nếu bạn gặp sự cố trong mã của mình, hãy kiểm tra trường hợpSau khi khai báo một biến, bạn có thể đặt giá trị cho nó
Ngoài ra, bạn có thể thực hiện cả hai thao tác này trên cùng một dòng 9Bạn lấy giá trị bằng cách gọi tên biến 0Sau khi gán giá trị cho biến, bạn có thể thay đổi giá trị đó sau trong mã 1Lưu ý rằng các biến có thể chứa các giá trị có kiểu dữ liệu khác nhau VariableExplanationExampleStringĐây là một chuỗi văn bản được gọi là chuỗi. Để biểu thị rằng giá trị là một chuỗi, hãy đặt nó trong dấu nháy đơn. 8SốĐây là một số. Các số không có dấu ngoặc kép xung quanh chúng. 9BooleanĐây là giá trị Đúng/Sai. Các từ 90 và 91 là từ khóa đặc biệt không cần dấu ngoặc kép. 92ArrayĐây là cấu trúc cho phép bạn lưu trữ nhiều giá trị trong một tham chiếu duy nhất. 93Tham khảo từng thành viên của mảng như thế này. ______194, 95, v.v. Đối tượngĐây có thể là bất cứ thứ gì. Mọi thứ trong JavaScript là một đối tượng và có thể được lưu trữ trong một biến. Hãy ghi nhớ điều này khi bạn học. 96Tất cả các ví dụ trên cũng vậy. Vậy tại sao chúng ta cần các biến? . Nếu các giá trị không thể thay đổi, thì bạn không thể thực hiện bất kỳ điều gì động, chẳng hạn như cá nhân hóa tin nhắn chúc mừng hoặc thay đổi hình ảnh được hiển thị trong thư viện hình ảnh Nhận xét là các đoạn văn bản có thể được thêm vào cùng với mã. Trình duyệt bỏ qua văn bản được đánh dấu là nhận xét. Bạn có thể viết nhận xét bằng JavaScript giống như bạn có thể viết bằng CSS 1Nếu nhận xét của bạn không có dấu ngắt dòng, bạn có thể đặt nó sau hai dấu gạch chéo như thế này 2Một 97 là một ký hiệu toán học tạo ra kết quả dựa trên hai giá trị (hoặc biến). Trong bảng sau, bạn có thể thấy một số toán tử đơn giản nhất, cùng với một số ví dụ để thử trong bảng điều khiển JavaScriptToán tử Giải thích (Các) ký hiệu Ví dụ Cộng Cộng hai số lại với nhau hoặc kết hợp hai chuỗi. 98 99Phép trừ, phép nhân, phép chia Những phép tính này làm những gì bạn mong đợi chúng làm trong môn toán cơ bản. 00, 01, 02 03Bài tập Như bạn đã xem rồi. điều này gán một giá trị cho một biến. 04 8Bình đẳng nghiêm ngặtĐiều này thực hiện kiểm tra để xem liệu hai giá trị có bằng nhau không. Nó trả về kết quả 90/ 91 (Boolean). 08 09Không, Không-không-bằngCái này trả về giá trị logic đối lập với giá trị đứng trước. Nó biến một 90 thành một 91, v.v. Khi nó được sử dụng cùng với toán tử Đẳng thức, toán tử phủ định sẽ kiểm tra xem hai giá trị có bằng nhau không. 12, 13Đối với "Không", biểu thức cơ bản là 90, nhưng phép so sánh trả về 91 vì chúng ta phủ định nó 16"Không bằng" về cơ bản cho cùng một kết quả với cú pháp khác nhau. Ở đây chúng tôi đang kiểm tra "là 6 KHÔNG bằng 3". Điều này trả về_______191 vì 6 IS bằng 3 10Còn rất nhiều nhà khai thác khác để khám phá, nhưng hiện tại như vậy là đủ. Xem Biểu thức và toán tử để biết danh sách đầy đủ Ghi chú. Trộn các loại dữ liệu có thể dẫn đến một số kết quả lạ khi thực hiện phép tính. Hãy cẩn thận rằng bạn đang đề cập đến các biến của mình một cách chính xác và nhận được kết quả như mong đợi. Ví dụ: nhập 11 vào bảng điều khiển của bạn. Tại sao bạn không nhận được kết quả như mong đợi? . Nếu bạn nhập 12, bạn sẽ nhận được tổng của hai sốĐiều kiện là cấu trúc mã được sử dụng để kiểm tra xem một biểu thức có trả về đúng hay không. Một dạng câu điều kiện rất phổ biến là câu lệnh 13. Ví dụ 0Biểu thức bên trong 14 là bài kiểm tra. Điều này sử dụng toán tử đẳng thức nghiêm ngặt (như được mô tả ở trên) để so sánh biến 15 với chuỗi 16 để xem hai biến có bằng nhau không. Nếu phép so sánh này trả về 90, thì khối mã đầu tiên sẽ chạy. Nếu so sánh không đúng, khối mã thứ hai—sau câu lệnh 18—sẽ chạy thay thếChức năng là một cách đóng gói chức năng mà bạn muốn sử dụng lại. Có thể định nghĩa phần thân mã là một hàm thực thi khi bạn gọi tên hàm trong mã của mình. Đây là một giải pháp thay thế tốt để viết đi viết lại cùng một đoạn mã. Bạn đã thấy một số cách sử dụng hàm. Ví dụ 0 1Các chức năng này, 19 và 20, được tích hợp trong trình duyệtNếu bạn nhìn thấy thứ gì đó trông giống tên biến, nhưng theo sau nó là dấu ngoặc đơn— 21 — thì đó có thể là một hàm. Các hàm thường nhận đối số. bit dữ liệu họ cần để thực hiện công việc của họ. Các đối số nằm trong dấu ngoặc đơn, được phân tách bằng dấu phẩy nếu có nhiều hơn một đối sốVí dụ: hàm 22 làm cho hộp bật lên xuất hiện bên trong cửa sổ trình duyệt, nhưng chúng ta cần cung cấp cho nó một chuỗi làm đối số để cho hàm biết thông báo nào sẽ hiển thịBạn cũng có thể xác định các chức năng của riêng mình. Trong ví dụ tiếp theo, chúng ta tạo một hàm đơn giản lấy hai số làm đối số và nhân chúng 2Hãy thử chạy cái này trong bảng điều khiển; . Ví dụ 3Ghi chú. Câu lệnh 23 yêu cầu trình duyệt trả lại biến 24 ra khỏi hàm để nó có sẵn để sử dụng. Điều này là cần thiết vì các biến được xác định bên trong các hàm chỉ khả dụng bên trong các hàm đó. Điều này được gọi là phạm vi biến. (Đọc thêm về. )Tương tác thực sự trên một trang web yêu cầu xử lý sự kiện. Đây là những cấu trúc mã lắng nghe hoạt động trong trình duyệt và chạy mã để phản hồi. Ví dụ rõ ràng nhất là xử lý sự kiện nhấp chuột, được kích hoạt bởi trình duyệt khi bạn nhấp vào thứ gì đó bằng chuột. Để chứng minh điều này, hãy nhập thông tin sau vào bảng điều khiển của bạn, sau đó nhấp vào trang web hiện tại 4Có một số cách để đính kèm trình xử lý sự kiện vào một phần tử. Ở đây chúng tôi chọn phần tử 25. Sau đó, chúng tôi gọi hàm 26 của nó, chuyển vào tên của sự kiện để lắng nghe ( 27) và một hàm để chạy khi sự kiện xảy raHàm chúng ta vừa chuyển tới 26 ở đây được gọi là hàm ẩn danh, vì nó không có tên. Có một cách khác để viết các hàm ẩn danh mà chúng tôi gọi là hàm mũi tên. Hàm mũi tên sử dụng 29 thay vì 00 5Sau khi hoàn thành bài đánh giá cơ bản về JavaScript này (ở trên), hãy thêm một số tính năng mới vào trang web mẫu của chúng ta Trước khi tiếp tục, hãy xóa nội dung hiện tại của tệp 4 của bạn — phần bạn đã thêm trước đó trong phần "Xin chào thế giới. " ví dụ — và lưu tệp trống. Nếu không, mã hiện tại sẽ xung đột với mã mới mà bạn sắp thêmTrong phần này, bạn sẽ học cách sử dụng các tính năng JavaScript và DOM API để luân phiên hiển thị một trong hai hình ảnh. Thay đổi này sẽ xảy ra khi người dùng nhấp vào hình ảnh được hiển thị
Đây là những gì đã xảy ra. Bạn đã lưu trữ tham chiếu đến phần tử 05 của mình trong 06. Tiếp theo, bạn đã đặt thuộc tính trình xử lý sự kiện 07 của nó bằng một hàm không có tên (hàm "ẩn danh"). Vì vậy, mỗi khi phần tử này được nhấp vào
Tiếp theo, hãy thay đổi tiêu đề trang thành thông báo chào mừng được cá nhân hóa khi người dùng truy cập trang lần đầu. Thông báo chào mừng này sẽ tồn tại. Nếu người dùng rời khỏi trang web và quay lại sau, chúng tôi sẽ lưu tin nhắn bằng API lưu trữ web. Chúng tôi cũng sẽ bao gồm một tùy chọn để thay đổi người dùng và do đó, thông báo chào mừng
Khi bạn chạy ví dụ và nhận được hộp thoại nhắc bạn nhập tên người dùng của mình, hãy thử nhấn nút Hủy. Bạn nên kết thúc với một tiêu đề có nội dung Mozilla thật tuyệt, không có giá trị. Điều này xảy ra bởi vì—khi bạn hủy lời nhắc—giá trị được đặt là 24. Null là một giá trị đặc biệt trong JavaScript đề cập đến việc không có giá trịNgoài ra, hãy thử nhấp vào OK mà không cần nhập tên. Bạn nên kết thúc với một tiêu đề có nội dung Mozilla thật tuyệt, vì những lý do khá rõ ràng Để tránh những sự cố này, bạn có thể kiểm tra xem người dùng có nhập tên trống không. Cập nhật hàm 06 của bạn thành cái này 2Trong ngôn ngữ của con người, điều này có nghĩa là. Nếu 14 không có giá trị, hãy chạy lại 06 từ đầu. Nếu nó có một giá trị (nếu câu lệnh trên không đúng), thì hãy lưu giá trị đó vào 11 và đặt nó làm văn bản của tiêu đềNếu bạn đã làm theo tất cả các hướng dẫn trong bài viết này, bạn sẽ nhận được một trang trông giống như hình bên dưới. Bạn cũng có thể xem phiên bản của chúng tôi Nếu gặp khó khăn, bạn có thể so sánh công việc của mình với mã ví dụ đã hoàn thành của chúng tôi trên GitHub Chúng tôi vừa vạch ra bề mặt của JavaScript. Nếu bạn thích chơi và muốn tiến xa hơn, hãy tận dụng các tài nguyên được liệt kê bên dưới Kịch bản phía máy khách động với JavaScript Đi sâu vào JavaScript chi tiết hơn nhiều Học JavaScriptĐây là một nguồn tài nguyên tuyệt vời cho các nhà phát triển web đầy tham vọng. Học JavaScript trong môi trường tương tác, với các bài học ngắn và bài kiểm tra tương tác, được hướng dẫn bởi đánh giá tự động. 40 buổi học đầu tiên miễn phí. Khóa học hoàn chỉnh có sẵn cho một khoản thanh toán nhỏ một lần |