Once you have the software in place, you can begin writing JavaScript code. To add JavaScript code to an HTML file, create or open an HTML file with your text/HTML editor. A basic HTML file has a docType and some basic HTML tags, such as , and . For example, a basic HTML5 file might look something like what is shown below.
Testing JavaScript [Content goes here]
When you see JavaScript code on the Web, you will sometimes see some JavaScript code between the tags. Or, you may see it in the tags [or even in both places]. To separate JavaScript code from HTML code, you need to enclose it within a set of tags. The opening tag has one required attribute and one optional attribute. The required attribute is the type attribute, while the optional attribute is src [which lets you point to an external script file, covered later in this answer]. The value of the type attribute is set to text/javascript, as shown below.
Your JavaScript code goes here.
As you can see, your JavaScript code is placed between the opening and closing script tags. For example script, you could write a simple string of text directly on the web page, as shown below [placed between the and tags].
As you can see, your JavaScript code is placed between the opening and closing script tags. For example script, you could write a simple string of text directly on the web page, as shown below [placed between the and tags].
document.write["Text written using JavaScript code!"];
Trong ví dụ trên, hàm JavaScript tiêu chuẩn hiển thị văn bản giữa các dấu ngoặc kép trên trang. Nó sẽ giống như ví dụ dưới đây
Một tùy chọn khác để đưa JavaScript vào một trang là tạo tập lệnh trong tệp văn bản bên ngoài. Lưu tập tin đó với một. js, biến nó thành tệp JavaScript. Các. js sau đó được đưa vào trang bằng thuộc tính src của thẻ script mở. Ví dụ: để sử dụng tập lệnh ở trên, hãy đặt mã JavaScript [không có thẻ tập lệnh] vào một tệp văn bản mới, như được hiển thị bên dưới
document.write["Text written using JavaScript code!"];
Sau đó, bạn sẽ lưu tệp với một. tiện ích mở rộng js. Chẳng hạn, bạn có thể lưu nó dưới dạng ghi. js. Sau khi tệp được lưu, bạn có thể gọi nó từ mã HTML thông qua thuộc tính src của thẻ script mở, như minh họa bên dưới để ghi. js
Quy trình trên có tác dụng tương tự như viết mã giữa các thẻ tập lệnh, nhưng sẽ không làm lộn xộn mã HTML bằng JavaScript. Một ưu điểm khác là cùng một tập lệnh có thể được bao gồm trong nhiều trang và việc chỉnh sửa tệp tập lệnh sẽ cập nhật tập lệnh trong mỗi trang sử dụng tệp tập lệnh bên ngoài. Chỉnh sửa tệp tập lệnh rất hữu ích vì nó có thể được thực hiện ở một nơi, thay vì chỉnh sửa mã trên mỗi trang chứa tập lệnh
Giờ đây, bạn đã biết cách thêm mã JavaScript vào một trang web, bạn có thể sử dụng bất kỳ tập lệnh mẫu JavaScript nào hoặc làm theo hướng dẫn hoặc sách JavaScript để tìm hiểu thêm về mã hóa JavaScript
Bạn có biết rằng bạn có thể chuyển đổi bất kỳ văn bản nào thành một tệp và tải xuống ở các định dạng khác nhau như txt, html, css, docs, ppt, v.v. bằng vanilla JavaScript không?
Xin chào các bạn, hôm nay trong blog này, bạn sẽ học cách tạo một dự án đơn giản nhưng hữu ích và đó là cách lưu nội dung trang web dưới dạng tệp bằng HTML CSS & JavaScript. Trước đó, tôi đã chia sẻ một blog về cách Chuyển văn bản thành giọng nói bằng JavaScript và lần này tôi muốn chỉ cho bạn cách chuyển đổi văn bản thành tệp và tải xuống bằng JavaScript. Vì vậy, hãy bắt đầu với dự án
Như bạn đã thấy trong hình ảnh xem trước, trong dự án này, có một hộp văn bản, một hộp nhập liệu, các tùy chọn được chọn và một nút lưu. Khi bạn nhập một số văn bản vào hộp văn bản, chọn định dạng tệp và nhấn nút “lưu”, một tệp mới sẽ được lưu trên máy tính của bạn với văn bản đã nhập trong đó. Tên tệp không bắt buộc và nếu bạn không cung cấp, tệp sẽ được lưu với một tên duy nhất
Nếu bạn tò mò muốn xem bản demo trực tiếp của dự án này thì hãy xem tại đây. Để có bản trình diễn hoặc video hướng dẫn đầy đủ về dự án này [Lưu văn bản dưới dạng tệp], bạn có thể xem video YouTube đã cho
Video hướng dẫn lưu văn bản dưới dạng tệp trong JavaScript
Trong video trên, bạn đã xem bản demo về cách lưu văn bản dưới dạng tệp và cách tôi tạo văn bản đó bằng HTML CSS & JavaScript. Tôi hy vọng bạn đã xem hết video và cũng học được điều gì đó mới từ nó
Nếu bạn thích dự án này và muốn lấy mã nguồn hoặc tệp, bạn có thể dễ dàng lấy chúng từ cuối trang này. Nhưng trước đó, hãy đảm bảo rằng bạn đã xem video và hiểu đúng mã hoặc phương pháp, nếu không sau này bạn có thể bị nhầm lẫn khi triển khai mã đó trong dự án của mình
Bạn có thể thích những dự án này
- Tải xuống bất kỳ tệp nào từ URL
- Hộp nhập thẻ trong JavaScript
- Trình tạo mã QR trong JavaScript
- Thanh trượt phạm vi giá trong JavaScript
Lưu văn bản dưới dạng tệp trong JavaScript [Mã nguồn]
Để tạo dự án này [Save Text As File in JavaScript], trước tiên, bạn cần tạo ba tệp – tệp HTML, CSS & JavaScript và dán từng mã đã cho vào tệp của bạn. Nếu bạn không biết cách tạo các tệp này hoặc phải làm gì hoặc không muốn làm điều đó, bạn có thể tải xuống các tệp mã nguồn của dự án này bằng cách nhấp vào nút tải xuống đã cho ở cuối trang này
Đầu tiên, tạo một tệp HTML có tên index. html và dán mã đã cho vào tệp HTML của bạn. Hãy nhớ rằng, bạn phải tạo một tệp có. phần mở rộng html
Save Text As File JavaScript | CodingNepal
Lorem Ipsum is simply dummy text of the printing and type setting industry. Lorem Ipsuam has been the industries standard dummy texts ever since this 1500s, when an unknown printer took a galley of type and scrambled it to make a type of dollar specimen book. It have survived not only five centuries, but also from the leap into electronic typesetting.
File name
Save as
Text File [.txt]
JS File [.js]
HTML File [.html]
SVG File [.svg]
Doc File [.doc]
PPT File [.ppt]
Save As Text File
Thứ hai, tạo một tệp CSS với tên style. css và dán mã đã cho vào tệp CSS của bạn. Hãy nhớ rằng, bạn phải tạo một tệp có. phần mở rộng css
/* Import Google font - Poppins */
@import url['//fonts.googleapis.com/css2?family=Poppins:[email protected];500;600&display=swap'];
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 10px;
background: #17A2B8;
}
.wrapper{
width: 443px;
border-radius: 7px;
background: #fff;
padding: 30px 25px 40px;
box-shadow: 0 10px 15px rgba[0,0,0,0.05];
}
.wrapper :where[textarea, input, select, button]{
width: 100%;
outline: none;
border: none;
font-size: 17px;
border-radius: 5px;
}
.wrapper :where[textarea, input]::placeholder{
color: #aaa;
}
.wrapper :where[textarea, input]:focus{
box-shadow: 0px 2px 4px rgba[0,0,0,0.08];
}
.wrapper textarea{
height: 270px;
resize: none;
padding: 8px 13px;
font-size: 17.6px;
border: 1px solid #ccc;
}
.wrapper .file-options{
display: flex;
margin-top: 10px;
align-items: center;
justify-content: space-between;
}
.file-options .option{
width: calc[100% / 2 - 8px];
}
.option label{
font-size: 17px;
}
.option :where[input, .select-menu]{
height: 50px;
padding: 0 13px;
margin-top: 6px;
border-radius: 5px;
border: 1px solid #bfbfbf;
}
.option .select-menu select{
height: 50px;
background: none;
}
.wrapper .save-btn{
color: #fff;
cursor: pointer;
opacity: 0.6;
padding: 16px 0;
margin-top: 20px;
pointer-events: none;
background: #17A2B8;
}
.save-btn:hover{
background: #148c9f;
}
textarea:valid ~ .save-btn{
opacity: 1;
pointer-events: auto;
transition: all 0.3s ease;
}
@media screen and [max-width: 475px] {
.wrapper{
padding: 25px 18px 30px;
}
.wrapper :where[textarea, input, select, button, label]{
font-size: 16px!important;
}
.file-options .option{
width: calc[100% / 2 - 5px];
}
.option :where[input, .select-menu]{
padding: 0 10px;
}
.wrapper .save-btn{
padding: 15px 0;
}
}Cuối cùng, tạo một tệp JavaScript có tên script. js bên trong thư mục js và dán mã đã cho vào tệp JavaScript của bạn. Hãy nhớ rằng, bạn phải tạo một tệp có. tiện ích mở rộng js
const textarea = document.querySelector["textarea"],
fileNameInput = document.querySelector[".file-name input"],
selectMenu = document.querySelector[".save-as select"],
saveBtn = document.querySelector[".save-btn"];
selectMenu.addEventListener["change", [] => {
const selectedFormat = selectMenu.options[selectMenu.selectedIndex].text;
saveBtn.innerText = `Save As ${selectedFormat.split[" "][0]} File`;
}];
saveBtn.addEventListener["click", [] => {
const blob = new Blob[[textarea.value], {type: selectMenu.value}];
const fileUrl = URL.createObjectURL[blob];
const link = document.createElement["a"];
link.download = fileNameInput.value;
link.href = fileUrl;
link.click[];
}];Vậy là xong, bây giờ bạn đã tạo thành công một dự án về Cách lưu văn bản dưới dạng tệp trong HTML CSS & JavaScript. Nếu mã của bạn không hoạt động hoặc bạn gặp phải bất kỳ sự cố nào, vui lòng tải xuống các tệp mã nguồn từ nút tải xuống đã cho. Nó miễn phí và một tệp zip sẽ được tải xuống chứa thư mục dự án chứa các tệp mã nguồn