Html và javascript có thể hoạt động cùng nhau không?
|
Nếu bạn đã từng đến thăm một thành phố có thể đi bộ như New York, thì bạn có thể hiểu cách HTML, CSS và JavaScript phối hợp với nhau Show
Khi bạn bắt đầu học phát triển web, bạn thường có thể thử một loạt các thử thách cơ bản về nguyên tắc HTML, CSS và JavaScript. Tuy nhiên, mỗi thử thách diễn ra trong môi trường hộp cát và không kiểm tra bạn trên nhiều ngôn ngữ cùng một lúc Ví dụ: hướng dẫn “Giới thiệu về JavaScript” thường sẽ tập trung vào các nguyên tắc cơ bản như vòng lặp và câu lệnh 'nếu', thay vì sử dụng JavaScript cùng với HTML Sau khi hoàn thành các bài tập sơ bộ này, bạn sẽ đạt đến điểm cần thiết lập trang web đầy đủ đầu tiên của mình. Ngay cả khi đây là trang cá nhân, một trang mà bạn không bao giờ có ý định phát hành, bạn vẫn phải đối mặt với một loạt thách thức mới như
Sau khi suy nghĩ về điều này một lúc, tôi nhận ra rằng những phần này phối hợp với nhau theo cách mà các thành phố vẫn có thể hoạt động, ngay cả khi các doanh nghiệp liên tục chuyển đến hoặc rút lui, hoặc các nhà phát triển bất động sản đang xây dựng lại một số khu vực lân cận Vì vậy, tôi sẽ chỉ cho bạn cách thiết lập môi trường phát triển đầu tiên của mình với ba phần này. Để hiểu được hướng dẫn này, bạn chỉ cần biết những phần cơ bản của HTML, CSS và JavaScript. Ngay cả khi bạn chưa viết bất kỳ mã nào trong đời, bạn vẫn có thể hiểu cách liên kết ba ngôn ngữ Sự khác biệt giữa HTML, CSS và JavaScriptHãy tưởng tượng rằng bạn phụ trách lập kế hoạch bố trí một khu phố mới trong thành phố. Khu phố này sẽ có một số tòa nhà dân cư, một số quán ăn, chi nhánh ngân hàng và trung tâm mua sắm  Điều này có vẻ một chiều. Nói cách khác, mỗi tòa nhà chỉ là một điểm trên bản đồ, không có sắc thái. Nhưng khi bạn tìm hiểu sâu hơn một chút, bạn có thể thấy rằng mỗi tòa nhà thực sự có ba phần mà bạn có thể thay đổi
Điều này tương ứng với ba loại tệp khác nhau mà bạn có thể sử dụng trong trang web đầu tiên của mình Tệp HTML chứa cấu trúc của chính trang đó. Nó giống như cấu trúc của tòa nhà Tệp CSS chứa kiểu dáng của trang. Nó cho phép bạn thay đổi màu sắc, định vị và hơn thế nữa. Nó giống như thiết kế của chính tòa nhà Tệp JavaScript xác định các yếu tố động và tương tác trên trang. Nó xác định điều gì sẽ xảy ra khi người dùng nhấp, di chuột hoặc nhập vào một số phần tử nhất định. Đây là loại giống như chức năng của tòa nhà Hãy lấy ví dụ về một trong những ngôi nhà. Một ngôi nhà có 2 phòng ngủ, 2 phòng tắm và 2 tầng. Đó là HTML của tòa nhà Nó được làm bằng gạch và có một cánh cửa bằng gỗ cứng. Điều đó tương ứng với CSS của tòa nhà Bạn có thể làm gì trong nhà? . Đó là JavaScript của tòa nhà Sử dụng thanh trượt trên hình ảnh tương tác này để xem hai phần hoạt động cùng nhau như thế nào Một ví dụ về thư mục tệp cơ bảnVì mỗi ngôn ngữ trong số ba ngôn ngữ này phục vụ một mục đích khác nhau, các nhà phát triển web thường sử dụng các tệp riêng biệt cho từng ngôn ngữ. Ý tưởng này được gọi là "tách biệt các mối quan tâm" - mỗi tệp nên có một chức năng khác nhau trong toàn bộ trang web Mặc dù về mặt kỹ thuật, bạn có thể bao gồm tất cả mã trong một tệp HTML, nhưng điều đó cuối cùng sẽ dẫn đến mã lặp lại khi bạn phát triển trang web của mình Hãy xem mã cần thiết để tạo một ngôi nhà hoàn chỉnh. Tất cả 3 tệp phải nằm trong cùng một thư mục– một thư mục trên máy tính của bạn. Trong trường hợp này, hãy gọi thư mục là nhà. Trong thư mục nhà của chúng tôi, chúng tôi sẽ có một tệp của mỗi loại. Tôi sẽ gọi chỉ mục tệp HTML chính, kiểu tệp CSS chính và tập lệnh tệp JavaScript chính Bạn có thể sử dụng hình ảnh tương tác này để lật giữa 3 phần của ngôi nhà và hệ thống tệp Bây giờ chúng ta có thể trình bày cách các tệp được liên kết trong mã Tệp HTML của chúng tôi thực sự có ba phần riêng biệt
And the Các tệp CSS và JavaScript chỉ cần sửa đổi HTML. Chúng cần được tham chiếu trong tệp HTML để được tải. Đó là lý do tại sao trong sơ đồ trên, bản thân thư mục giống nhau, nhưng tệp HTML và mã liên kết nó với các tệp khác thì khác Tạo một thư mục tệp với nhiều thư mụcCho đến nay, chúng tôi chỉ đề cập đến một loại tòa nhà tại một thời điểm. Nhưng, đó giống như một trang web chỉ có một trang- rất bất thường. Ngay cả một trang web cá nhân cũng có thể có trang “Giới thiệu”… “trang Danh mục đầu tư”… và các trang khác. Vậy điều gì xảy ra khi có nhiều tòa nhà? Giả sử khu phố của bạn có ngân hàng, trung tâm mua sắm và tiệm bánh pizza. Điều đó giống như một trang web có ba trang. Mỗi cái là một tệp HTML có tệp CSS và tệp JavaScript được liên kết với nó Tuy nhiên, hãy lưu ý cách chúng tôi không sử dụng ba thư mục con trong một thư mục lân cận lớn hơn. Mặc dù chúng tôi chắc chắn có thể làm điều đó, nhưng nhiều nhà phát triển giao diện người dùng muốn tạo một thư mục tập lệnh riêng cho tất cả các tệp JS và một thư mục kiểu cho tất cả các tệp CSS Khi trang web của bạn phát triển, bạn sẽ thấy rằng một số đoạn CSS và JavaScript có thể tái sử dụng và có thể được liên kết với nhiều tệp HTML. Thư mục tập lệnh và kiểu cho phép bạn tổ chức các nỗ lực của mình và giảm mã thừa Trong ví dụ của chúng tôi, bạn có thể đặt một lát bánh pizza béo ngậy ở cả trung tâm thương mại VÀ cửa hàng bánh pizza. Vì vậy, bạn có thể mong đợi rằng cả hai sẽ chia sẻ một tệp JavaScript nhưng cũng có chức năng duy nhất trong các tệp JavaScript riêng lẻ của chúng Dù sao, đây là một cách bố trí tiềm năng của toàn bộ thư mục tập tin Lưu ý cách các tệp và thư mục HTML có cùng mức độ sâu trong thư mục lân cận lớn hơn. Để tham chiếu các tệp nằm trong các thư mục ở cùng cấp độ, bạn cần bắt đầu đường dẫn tệp của mình bằng tên thư mục thay vì tên tệp. Vì vậy, nếu bạn muốn tham khảo ngân hàng. tệp css từ bên trong ngân hàng. html, bạn sẽ sử dụng phong cách/ngân hàng. css dưới dạng đường dẫn tệp Bước tiếp theoĐây mới chỉ là bước khởi đầu trong hành trình hướng tới việc làm cho HTML, CSS và JavaScript hoạt động cùng nhau Nếu bạn muốn hiểu rõ hơn về mối liên hệ giữa CSS và HTML, hãy xem hướng dẫn của tôi về Bộ chọn CSS Và, nếu bạn muốn tìm hiểu về cách sử dụng JavaScript để thay đổi cấu trúc HTML của mình, hãy xem hướng dẫn của tôi về thao tác Mô hình đối tượng tài liệu (DOM) Nhận hướng dẫn mới nhấtBạn có thích hướng dẫn này không? HTML và JavaScript có thể được sử dụng cùng nhau không?Khi làm việc với các tệp cho web, JavaScript cần được tải và chạy cùng với mã đánh dấu HTML . Điều này có thể được thực hiện nội tuyến trong tài liệu HTML hoặc trong một tệp riêng biệt mà trình duyệt sẽ tải xuống cùng với tài liệu HTML.
Tôi có thể kiếm một công việc với HTML CSS và JavaScript không?Tóm lại, bạn chắc chắn có thể tìm việc chỉ bằng HTML và CSS . Và nếu những kỹ năng cơ bản đó không đủ để giúp bạn có được công việc mơ ước, bạn vẫn có thể sử dụng chúng để bắt đầu kiếm tiền trong khi bạn đang xây dựng các kỹ năng khác.
|
