Văn bản cảnh báo và biến trong javascript

Mỗi hoạt động trong mô-đun này sẽ liên quan đến việc viết mã JavaScript. Bạn sẽ bắt đầu bằng cách viết một tập lệnh đơn giản, sau đó dần dần xây dựng tập lệnh đó, bổ sung thêm nhiều chức năng cho tập lệnh đó trong các bài học tiếp theo

Bắt đầu bằng cách mở javascript tệp danh mục đầu tư của bạn. html bằng trình soạn thảo văn bản ưa thích của bạn

Thêm mã JavaScript sau vào phần trên trang web của bạn

  

Đây là một chức năng rất đơn giản. Lưu ý rằng nó trông rất giống với các hàm showTop[] và showBottom[] của PHP đã được giải thích trong tài liệu Beyond HTML mà bạn đã học trong bài học trước. Hầu hết các ngôn ngữ lập trình hoặc viết kịch bản đều giống nhau, bao gồm cả PHP và JavaScript, nhưng có những khác biệt tinh tế trong cú pháp của chúng [các quy tắc về cách viết mã]. Một hàm hữu ích có nguồn gốc từ JavaScript là hàm alert[]. Chức năng này sẽ hiển thị văn bản trong hộp thoại bật lên trên màn hình

Trước khi chức năng này có thể hoạt động, trước tiên chúng ta phải gọi hàm showAlert[]. Các hàm JavaScript được gọi để phản hồi các sự kiện. Khi trang tải hoặc khi người dùng nhấp vào, di chuột qua hoặc tab đến một liên kết cụ thể, đây đều là các sự kiện. Chúng tôi có thể hướng dẫn JavaScript theo dõi các sự kiện này và nếu hoặc khi chúng xảy ra, hãy thực thi chức năng đã chỉ định

Ví dụ: giả sử chúng ta muốn thực thi hàm showAlert[] sau khi phần nội dung của trang web được tải đầy đủ. Một cách để làm điều đó là thêm thuộc tính onload vào phần tử của trang web của chúng tôi, như thế này

Hãy thử thêm phần trên vào trang web của bạn, sau đó tải trang và xem nó có hoạt động không. Nếu không, bạn có thể có một lỗi. Hãy chắc chắn rằng bạn đã nhập chính xác mọi thứ như nó xuất hiện, bao gồm cả cách viết hoa và dấu chấm câu. Các ngôn ngữ lập trình có thể rất kén chọn đối với những lỗi dường như nhỏ. [Bài sau sẽ nói kỹ hơn về debug]. Khi bạn đã làm việc, hãy chuyển sang phần tiếp theo

Biến

Như đã đề cập trong Ngoài HTML, một biến trong ngôn ngữ lập trình hoặc ngôn ngữ kịch bản là một tên tượng trưng đại diện cho một giá trị. Trong ví dụ PHP trước đây của chúng tôi, chúng tôi đã sử dụng biến $thisPage để kiểm soát các tính năng nhất định trong hàm showTop[]. Trong PHP, tên biến phải bắt đầu bằng $, nhưng đó không phải là trường hợp trong JavaScript. Hãy xem ví dụ sau, sử dụng một biến có tên myText để tùy chỉnh văn bản được hiển thị trong hộp cảnh báo

  

Hãy thử sửa đổi tập lệnh showAlert[] của bạn bằng thông báo cảnh báo tùy chỉnh của riêng bạn. Sau đó kiểm tra nó để chắc chắn rằng nó hoạt động

Sử dụng sự kiện title

Cho đến giờ trong bài học này, chúng ta đã gọi hàm showAlert[] khi phần nội dung của trang web được tải. Tuy nhiên, thay vào đó, chúng tôi có thể kích hoạt nó bằng các sự kiện khác. Ví dụ: chúng tôi có thể chỉ hiển thị cảnh báo nếu người dùng nhấp vào nút. Thử cái này

  1. Xóa thuộc tính onload="showAlert[]" khỏi phần tử
  2. Thêm phần tử HTML sau vào bất kỳ đâu trong nội dung trang web của bạn. Hiển thị cảnh báo

Mã mới này thêm một nút vào trang web của bạn. Nút bao gồm thuộc tính title, khiến showAlert[] được gọi khi người dùng nhấp vào nút. Sự kiện title cũng hoạt động cho người dùng bàn phím. Nếu người dùng điều hướng đến nút bằng phím tab, sau đó nhấn enter, điều đó cũng sẽ kích hoạt cảnh báo

Tiếp theo, chúng ta sẽ chú ý đến các chuỗi - đây là những đoạn văn bản được gọi trong lập trình. Trong bài viết này, chúng ta sẽ xem xét tất cả những điều phổ biến mà bạn thực sự nên biết về chuỗi khi học JavaScript, chẳng hạn như tạo chuỗi, thoát dấu ngoặc kép trong chuỗi và nối các chuỗi lại với nhau

điều kiện tiên quyết. Trình độ máy tính cơ bản, hiểu biết cơ bản về HTML và CSS, hiểu biết về JavaScript là gì. Khách quan. Để làm quen với những kiến ​​thức cơ bản về chuỗi trong JavaScript

Từ ngữ rất quan trọng đối với con người — chúng là một phần quan trọng trong cách chúng ta giao tiếp. Vì Web là một phương tiện chủ yếu dựa trên văn bản được thiết kế để cho phép con người giao tiếp và chia sẻ thông tin, nên sẽ rất hữu ích nếu chúng ta có quyền kiểm soát các từ xuất hiện trên đó. HTML cung cấp cấu trúc và ý nghĩa cho văn bản của chúng ta, CSS cho phép chúng ta tạo kiểu chính xác cho văn bản và JavaScript chứa một số tính năng để thao tác chuỗi, tạo lời nhắc và thông báo chào mừng tùy chỉnh, hiển thị nhãn văn bản phù hợp khi cần, sắp xếp các thuật ngữ theo thứ tự mong muốn,

Gần như tất cả các chương trình mà chúng tôi đã cho bạn xem trong khóa học đều liên quan đến một số thao tác chuỗi

Thoạt nhìn, các chuỗi được xử lý tương tự như các số, nhưng khi tìm hiểu sâu hơn, bạn sẽ bắt đầu thấy một số khác biệt đáng chú ý. Hãy bắt đầu bằng cách nhập một số dòng cơ bản vào bảng điều khiển dành cho nhà phát triển trình duyệt để làm quen

  1. Để bắt đầu, hãy nhập các dòng sau

    const string = "The revolution will not be televised.";
    console.log[string];
    

    Giống như chúng ta đã làm với các số, chúng ta đang khai báo một biến, khởi tạo nó bằng một giá trị chuỗi và sau đó trả về giá trị. Sự khác biệt duy nhất ở đây là khi viết một chuỗi, bạn cần bao quanh giá trị bằng dấu ngoặc kép
  2. Nếu bạn không làm điều này hoặc bỏ lỡ một trong các trích dẫn, bạn sẽ gặp lỗi. Hãy thử nhập các dòng sau

    const badString1 = This is a test;
    const badString2 = 'This is a test;
    const badString3 = This is a test';
    

    Những dòng này không hoạt động vì bất kỳ văn bản nào không có dấu ngoặc kép xung quanh nó đều được coi là tên biến, tên thuộc tính, từ dành riêng hoặc tương tự. Nếu trình duyệt không thể tìm thấy nó, thì sẽ xảy ra lỗi [e. g. "Mất tích; tuyên bố trước"]. Nếu trình duyệt có thể thấy vị trí bắt đầu của một chuỗi, nhưng không thể tìm thấy phần cuối của chuỗi, như được chỉ ra bởi trích dẫn thứ 2, thì trình duyệt sẽ báo lỗi [với "chuỗi ký tự chưa kết thúc"]. Nếu chương trình của bạn đưa ra các lỗi như vậy, hãy quay lại và kiểm tra tất cả các chuỗi của bạn để đảm bảo rằng bạn không thiếu dấu ngoặc kép
  3. Cách sau đây sẽ hoạt động nếu trước đó bạn đã xác định biến
    const badString = string;
    console.log[badString];
    
    1 — hãy thử ngay bây giờ

    const badString = string;
    console.log[badString];
    

    const badString = string;
    console.log[badString];
    
    2 hiện được đặt để có cùng giá trị với
    const badString = string;
    console.log[badString];
    
    1

  1. Trong JavaScript, bạn có thể chọn dấu ngoặc đơn hoặc dấu ngoặc kép để bao chuỗi của mình trong. Cả hai điều sau đây sẽ hoạt động tốt

    ________số 8

  2. Có rất ít sự khác biệt giữa hai loại này và bạn sử dụng loại nào là tùy thuộc vào sở thích cá nhân. Tuy nhiên, bạn nên chọn một và gắn bó với nó; . Sau đây sẽ trả về một lỗi

    const badQuotes = 'What on earth?";
    

  3. Trình duyệt sẽ nghĩ rằng chuỗi chưa được đóng vì loại trích dẫn khác mà bạn không sử dụng để chứa chuỗi của mình có thể xuất hiện trong chuỗi. Ví dụ, cả hai đều được

      
    
    0

  4. Tuy nhiên, bạn không thể bao gồm cùng một dấu ngoặc kép bên trong chuỗi nếu nó được sử dụng để chứa chúng. Điều sau đây sẽ xảy ra lỗi vì nó khiến trình duyệt nhầm lẫn về vị trí kết thúc của chuỗi

      
    
    1

    Điều này dẫn chúng ta rất tốt vào chủ đề tiếp theo của chúng ta

Để khắc phục dòng mã sự cố trước đó của chúng tôi, chúng tôi cần thoát khỏi dấu ngoặc kép của sự cố. Thoát ký tự có nghĩa là chúng tôi làm điều gì đó với chúng để đảm bảo rằng chúng được nhận dạng dưới dạng văn bản, không phải là một phần của mã. Trong JavaScript, chúng tôi làm điều này bằng cách đặt dấu gạch chéo ngược ngay trước ký tự. Thử cái này

  
2

Điều này hoạt động tốt. Bạn có thể thoát các ký tự khác theo cách tương tự, e. g.

const badString = string;
console.log[badString];
4, ngoài ra còn có một số mã đặc biệt. Xem để biết thêm chi tiết

Concatenate chỉ có nghĩa là "kết hợp với nhau". Để nối các chuỗi lại với nhau trong JavaScript, bạn có thể sử dụng một loại chuỗi khác, được gọi là mẫu chữ

Mẫu chữ trông giống như một chuỗi bình thường, nhưng thay vì sử dụng dấu ngoặc kép đơn hoặc kép [

const badString = string;
console.log[badString];
5 hoặc
const badString = string;
console.log[badString];
6], bạn sử dụng ký tự backtick [
const badString = string;
console.log[badString];
7]

  
7

Điều này có thể hoạt động giống như một chuỗi bình thường, ngoại trừ bạn có thể bao gồm các biến trong đó, được bao bọc bên trong các ký tự

const badString = string;
console.log[badString];
8 và giá trị của biến sẽ được chèn vào kết quả

  
9

Bạn có thể sử dụng kỹ thuật tương tự để nối hai biến lại với nhau

const badString1 = This is a test;
const badString2 = 'This is a test;
const badString3 = This is a test';
0

Chúng ta hãy xem phép nối đang được sử dụng trong hành động

const badString1 = This is a test;
const badString2 = 'This is a test;
const badString3 = This is a test';
1

const badString1 = This is a test;
const badString2 = 'This is a test;
const badString3 = This is a test';
2

Ở đây chúng tôi đang sử dụng hàm

const badString = string;
console.log[badString];
9, yêu cầu người dùng trả lời câu hỏi thông qua hộp thoại bật lên, sau đó lưu trữ văn bản họ nhập bên trong một biến nhất định — trong trường hợp này là
const sgl = 'Single quotes.';
const dbl = "Double quotes";
console.log[sgl];
console.log[dbl];
0. Sau đó, chúng tôi sử dụng hàm
const sgl = 'Single quotes.';
const dbl = "Double quotes";
console.log[sgl];
console.log[dbl];
1 để hiển thị một cửa sổ bật lên khác chứa chuỗi chèn tên vào thông báo lời chào chung

Bạn cũng có thể nối các chuỗi bằng toán tử

const sgl = 'Single quotes.';
const dbl = "Double quotes";
console.log[sgl];
console.log[dbl];
2

const badString1 = This is a test;
const badString2 = 'This is a test;
const badString3 = This is a test';
3

Tuy nhiên, mẫu chữ thường cung cấp cho bạn mã dễ đọc hơn

const badString1 = This is a test;
const badString2 = 'This is a test;
const badString3 = This is a test';
4

Vậy điều gì sẽ xảy ra khi chúng ta cố gắng kết hợp một chuỗi và một số?

const badString1 = This is a test;
const badString2 = 'This is a test;
const badString3 = This is a test';
5

Bạn có thể mong đợi điều này trả về một lỗi, nhưng nó vẫn hoạt động tốt. Việc cố gắng biểu thị một chuỗi dưới dạng một số không thực sự có ý nghĩa, nhưng việc biểu thị một số dưới dạng một chuỗi thì có, vì vậy trình duyệt sẽ chuyển đổi số thành một chuỗi và nối hai chuỗi đó lại

Nếu bạn có một biến số mà bạn muốn chuyển đổi thành chuỗi nhưng không thay đổi ngược lại hoặc biến chuỗi bạn muốn chuyển đổi thành số nhưng không thay đổi ngược lại, bạn có thể sử dụng hai cấu trúc sau

  • Đối tượng
    const sgl = 'Single quotes.';
    const dbl = "Double quotes";
    console.log[sgl];
    console.log[dbl];
    
    3 chuyển đổi mọi thứ được truyền cho nó thành một số, nếu nó có thể. Hãy thử những điều sau đây

    const badString1 = This is a test;
    const badString2 = 'This is a test;
    const badString3 = This is a test';
    
    6

  • Ngược lại, mỗi số có một phương thức gọi là
    const sgl = 'Single quotes.';
    const dbl = "Double quotes";
    console.log[sgl];
    console.log[dbl];
    
    4 để chuyển đổi nó thành chuỗi tương đương. Thử cái này

    const badString1 = This is a test;
    const badString2 = 'This is a test;
    const badString3 = This is a test';
    
    7

Những cấu trúc này có thể thực sự hữu ích trong một số trường hợp. Ví dụ: nếu người dùng nhập một số vào trường văn bản của biểu mẫu, thì đó là một chuỗi. Tuy nhiên, nếu bạn muốn thêm số này vào một thứ gì đó, thì bạn cần nó phải là một số, vì vậy bạn có thể chuyển nó qua

const sgl = 'Single quotes.';
const dbl = "Double quotes";
console.log[sgl];
console.log[dbl];
5 để xử lý việc này. Chúng tôi đã làm chính xác điều này trong

Bạn có thể bao gồm các biểu thức JavaScript trong chữ mẫu, cũng như các biến đơn giản và kết quả sẽ được đưa vào kết quả

const badString1 = This is a test;
const badString2 = 'This is a test;
const badString3 = This is a test';
8

Chữ mẫu tôn trọng các ngắt dòng trong mã nguồn, vì vậy bạn có thể viết các chuỗi kéo dài nhiều dòng như thế này

const badString1 = This is a test;
const badString2 = 'This is a test;
const badString3 = This is a test';
9

Để có đầu ra tương đương khi sử dụng một chuỗi bình thường, bạn phải bao gồm các ký tự ngắt dòng [

const sgl = 'Single quotes.';
const dbl = "Double quotes";
console.log[sgl];
console.log[dbl];
6] trong chuỗi

const badString = string;
console.log[badString];
0

Xem trang tham khảo văn bản mẫu của chúng tôi để biết thêm ví dụ và chi tiết về các tính năng nâng cao

Vì vậy, đó là những điều cơ bản về chuỗi được trình bày trong JavaScript. Trong bài viết tiếp theo, chúng ta sẽ xây dựng vấn đề này, xem xét một số phương thức tích hợp có sẵn cho các chuỗi trong JavaScript và cách chúng ta có thể sử dụng chúng để thao tác các chuỗi của mình thành dạng chúng ta muốn

Làm cách nào để cảnh báo văn bản trong JavaScript?

Một hàm hữu ích có sẵn trong JavaScript là hàm alert[] . Chức năng này sẽ hiển thị văn bản trong hộp thoại bật lên trên màn hình. Trước khi chức năng này có thể hoạt động, trước tiên chúng ta phải gọi hàm showAlert[]. Các hàm JavaScript được gọi để phản hồi các sự kiện.

Làm cách nào để hiển thị giá trị biến trong hộp cảnh báo trong JavaScript?

Cách hiển thị giá trị biến bằng hộp thoại cảnh báo JavaScript .
const người dùng = [ { tên. "Nathan", }, {tên. "Cúc", }, { tên. "Abby", }, ];
const người dùng = [ { tên. "Nathan", }, { tên. "Cúc", }, { tên. "Abby", }, ];

Làm cách nào để cảnh báo giá trị hai biến trong JavaScript?

Chúng ta cũng có thể khai báo hai biến và sao chép dữ liệu từ biến này sang biến kia. let hello = 'Xin chào thế giới. '; . alert[hello]; // Hello world! alert[tin nhắn]; // Xin chào thế giới.

Tôi có thể tùy chỉnh cảnh báo trong JavaScript không?

Để tạo hộp cảnh báo tùy chỉnh trong JavaScript, bạn có thể sử dụng “thư viện SweetAlert, bao gồm tệp “CDN” để kích hoạt “Swal. fire[]” và thư viện “JQuery”, sẽ tải thư viện JQuery trong dự án, lấy các thuộc tính khác nhau của hộp cảnh báo và áp dụng các chức năng khác nhau trên hộp cảnh báo

Chủ Đề