Cách chạy html và javascript trong mã studio trực quan
1. Mở hoặc tạo tệp HTML trong Visual Studio Code. Show
Bản tóm tắt này có giúp ích gì cho bạn không? Có Không Cảm ơn tất cả các tác giả đã tạo ra một trang đã được đọc 117.830 lần Trong bài viết này, chúng ta sẽ thực hiện các bước cần thiết để tải xuống trình soạn thảo văn bản phổ biến có tên là Visual Studio Code, còn được gọi là “VS Code”. ” Đến cuối bài viết, bạn sẽ có thể tạo một thư mục trong Visual Studio Code chứa tài liệu HTML mà bạn có thể mở trong trình duyệt web của mình I. Giới thiệu'trình soạn thảo văn bản' là gì?Trình soạn thảo văn bản, còn được gọi là trình soạn thảo mã, là ứng dụng được các nhà phát triển sử dụng để viết mã. Họ có thể đánh dấu và định dạng mã của bạn để dễ đọc và dễ hiểu hơn. Nếu bạn đã sử dụng Codecademy, bạn đã quen thuộc với trình soạn thảo văn bản. Đó là khu vực bạn viết mã của mình vào Sử dụng trình soạn thảo văn bản là một phần của việc tạo “môi trường phát triển” của bạn, bộ công cụ mà bạn sử dụng để làm việc trên các dự án mã hóa. Nó sẽ cho phép bạn áp dụng những gì bạn đã học được trên Codecademy vào thực tế khi bạn làm việc với các dự án trên máy tính của mình. Điều này không chỉ giới thiệu cho bạn các công cụ thường được sử dụng bởi các nhà phát triển chuyên nghiệp mà còn có nghĩa là bạn đã trưởng thành với tư cách là một nhà phát triển và sẵn sàng bắt đầu làm việc của riêng mình—bạn làm rất tốt Cụ thể để viết mã, trình soạn thảo văn bản cung cấp một số lợi thế
Bạn cũng có thể đã đọc hoặc nghe nói về IDE, hoặc “trình soạn thảo phát triển tích hợp. ” Một IDE cho phép bạn không chỉ chỉnh sửa mà còn biên dịch và gỡ lỗi mã của bạn thông qua một ứng dụng hoặc giao diện. Mặc dù trình soạn thảo văn bản mà chúng tôi khuyên dùng không được coi là IDE, nhưng nó có nhiều tính năng giống IDE giúp cuộc sống của nhà phát triển trở nên dễ dàng hơn mà không cần nhiều tài nguyên mà IDE thường yêu cầu. Tốt nhất của cả hai thế giới Chọn một trình soạn thảo văn bảnCó một số trình soạn thảo văn bản để lựa chọn. Ví dụ: Visual Studio Code là một trong những trình soạn thảo văn bản phổ biến nhất được các nhà phát triển sử dụng. (Đó là Visual Studio Code chứ không phải Visual Studio, hơi khác một chút. Chúng tôi muốn cái trước, cái có 'Mã' trong tên. ) Các trình soạn thảo văn bản phổ biến khác mà bạn có thể đã nghe nói đến là Atom và Sublime Text Bất kỳ trình soạn thảo văn bản nào được đề cập đều tuyệt vời để phát triển nhưng để làm mọi thứ dễ dàng hơn, chúng tôi khuyên bạn nên bắt đầu với Visual Studio Code. Một số lợi ích của trình soạn thảo này là
Khi bạn tiến xa hơn trong sự nghiệp viết mã của mình, bạn có thể thử các trình chỉnh sửa mã khác để xem tính năng nào hoạt động tốt nhất với quy trình phát triển cá nhân của bạn II. Cài đặt mã Visual StudioNhư vậy là chúng ta đã chọn xong trình soạn thảo văn bản, bây giờ chúng ta chỉ cần cài đặt nó vào máy tính của mình Video hướng dẫnĐối với những người học trực quan, video này hướng dẫn chi tiết cách tải xuống và cài đặt Visual Studio Code. Hướng dẫn bằng văn bản dưới đây Các bước cài đặtQuá trình cài đặt cho các máy tính chạy macOS, Windows và Linux, (cụ thể là Ubuntu và Debian), sẽ rất giống nhau và việc sử dụng Visual Studio Code trên tất cả chúng sẽ giống nhau
Vậy là xong, bạn đã cài đặt thành công trình soạn thảo văn bản của mình và sẵn sàng bắt đầu viết mã III. Luyện tập. Sử dụng Visual Studio Code để bắt đầu một dự án ngoài nền tảngKhi bạn chuyển qua các bài học và lộ trình khác nhau ở đây trên Codecademy, bạn có thể thấy mình cần tạo một dự án trên máy tính của riêng mình chứ không phải trên môi trường học tập Codecademy. Điều này có thể phức tạp, nhưng đó là một bước thú vị báo hiệu rằng bạn đã sẵn sàng làm việc độc lập Để làm điều này, chúng tôi sẽ cần sử dụng trình soạn thảo văn bản mà chúng tôi đã cài đặt ở trên. Hãy dành một chút thời gian để dùng thử Visual Studio Code 'thư mục phát triển' là gì?Trước khi sử dụng trình soạn thảo văn bản của bạn, điều quan trọng là phải thiết lập một hệ thống tệp có tổ chức. Khi số lượng và quy mô dự án của bạn tăng lên, việc biết nơi lưu dự án mới và tìm dự án cũ ngày càng trở nên quan trọng. Hầu hết các nhà phát triển lưu trữ các dự án của họ trong một thư mục dễ tìm, (bạn có thể quen gọi là 'thư mục'). Tại Codecademy, chúng tôi khuyên bạn nên đặt tên cho thư mục này là dự án. Nó sẽ lưu trữ tất cả các dự án mã hóa của bạn. Bất cứ khi nào bạn tạo một dự án mới, dù nhỏ đến đâu, bạn phải luôn tạo một thư mục mới bên trong thư mục dự án của mình. Bạn sẽ thấy rằng các dự án một tệp có thể nhanh chóng chuyển thành các dự án lớn, nhiều thư mục Luyện tập. Hãy làm một dự ánDưới đây là các bước bạn cần thực hiện để tạo một thư mục mới cho tất cả các dự án lập trình của mình. Bạn cũng sẽ học cách tải một thư mục dự án mới vào Visual Studio Code và tạo dự án HTML “hello world” đầu tiên của bạn Chúng tôi khuyên bạn nên xem video trên rồi làm theo các bước được viết bên dưới 1. Tạo một thư mục phát triểnĐiều hướng đến một thư mục bằng trình quản lý tệp của bạn hoặc thiết bị đầu cuối. Hãy chắc chắn rằng đó là một thư mục bạn truy cập thường xuyên và sẽ ghi nhớ. Tạo một thư mục mới có tên là dự án người dùng Mac. Đây có thể là tài khoản Người dùng của bạn hoặc thư mục “Trang chủ” người dùng Windows. Bạn có thể muốn lưu cái này vào ổ C của mình người dùng Linux. Bạn có thể muốn lưu cái này trong thư mục Người dùng của mình bên trong thư mục “Trang chủ” Trong thư mục dự án, tạo một thư mục mới có tên HelloWorld. Mọi thứ bạn thêm vào thư mục này sẽ là một phần của dự án HelloWorld của bạn 2. Mở mã Visual Studio3. Mở thư mục phát triển của bạnNhấp vào biểu tượng 'Explorer' trên menu bên trái và nhấp vào nút 'Open Folder' và chọn thư mục phát triển của bạn. Thao tác này sẽ khởi chạy trình quản lý tệp của bạn Điều hướng đến thư mục HelloWorld và chọn Mở. Thư mục sẽ mở trong ngăn bên của Visual Studio Code. Tại thời điểm này, không nên có bất kỳ nội dung nào trong thư mục. Chúng tôi sẽ thêm một tệp trong bước tiếp theo 4. thêm một tập tinTrước khi bạn tìm hiểu cách thêm tệp vào thư mục dự án, điều quan trọng là phải hiểu mục đích của phần mở rộng tệp. Phần mở rộng tệp là hậu tố của tên tệp (3 hoặc 4 ký tự cuối cùng trong tên tệp, trước dấu chấm) và mô tả loại nội dung mà tệp chứa. Ví dụ: phần mở rộng tệp HTML là. html và nó yêu cầu trình duyệt (và các ứng dụng khác) diễn giải nội dung của tệp dưới dạng tài liệu HTML. Khi Visual Studio Code tải thư mục dự án, bạn có thể thêm tệp. Các bước bên dưới mô tả cách thêm tệp. Đừng lo lắng về việc làm điều này trên máy tính của riêng bạn. Chúng ta sẽ đến đó tiếp theo Trong khung Visual Studio Code Explorer, nhấp vào tên thư mục phát triển của bạn. Bạn sẽ thấy bốn biểu tượng xuất hiện bên phải tên thư mục. Nhấp vào biểu tượng 'Tệp mới'. Nhập tên tệp mới với phần mở rộng tệp thích hợp của nó ( ví dụ:. html,. css,. csv). Điều quan trọng là bạn phải bao gồm phần mở rộng tệp chính xác, để các chương trình như linters biết cách diễn giải nội dung của nó. Nhấn Enter khi hoàn tất 5. Bắt đầu mã hóaSao chép và dán mã HTML soạn sẵn sau
|