Cách gọi hàm JavaScript từ một tệp HTML khác

Thêm JavaScript vào ứng dụng Web là một cách tuyệt vời để thêm các tính năng bắt chước các tính năng có trong ứng dụng máy khách/máy chủ mà không phải hy sinh tất cả các lợi ích của việc triển khai Web. Oracle Application Express bao gồm nhiều giao diện tích hợp được thiết kế đặc biệt để thêm JavaScript

Hãy nhớ rằng JavaScript không thích hợp để xác thực dữ liệu chuyên sâu. Ví dụ: để xác minh rằng một tên được chứa trong một bảng cơ sở dữ liệu lớn, bạn cần kéo mọi bản ghi xuống máy khách, tạo một tài liệu HTML khổng lồ. Nói chung, các hoạt động phức tạp phù hợp hơn nhiều cho việc xác thực Oracle Application Express phía máy chủ thay vì JavaScript

Hướng dẫn này mô tả một số tình huống sử dụng cho JavaScript và bao gồm chi tiết về cách triển khai chúng trong ứng dụng của bạn

Phần này bao gồm các chủ đề sau

Hiểu cách kết hợp các hàm JavaScript

Có hai vị trí chính để bao gồm các hàm JavaScript

• Trong thuộc tính Tiêu đề HTML của một trang

• Trong tệp

  
  
      #TITLE#
      #HEAD#
      
  
  #FORM_OPEN#
  

  4 được tham chiếu trong mẫu trang

Các chủ đề trong phần này bao gồm

Kết hợp JavaScript trong Thuộc tính tiêu đề HTML

Một cách để đưa JavaScript vào ứng dụng của bạn là thêm nó vào thuộc tính Tiêu đề HTML của trang. Đây là một cách tiếp cận tốt cho các chức năng dành riêng cho một trang cũng như một cách thuận tiện để kiểm tra một chức năng trước khi bạn đưa nó vào tệp

    #TITLE#
    #HEAD#
    

#FORM_OPEN#

4

Bạn có thể thêm các hàm JavaScript vào một trang bằng cách nhập mã vào thuộc tính Tiêu đề HTML trên trang Thuộc tính Trang

Để thêm mã JavaScript vào thuộc tính Tiêu đề HTML

1. Trên trang chủ Không gian làm việc, nhấp vào biểu tượng Trình tạo ứng dụng

2. Chọn một ứng dụng

   Trang chủ Ứng dụng xuất hiện, hiển thị tập hợp các trang của nó

3. Nhấp vào một trang

   Định nghĩa trang cho trang đó xuất hiện

4. Trong phần Trang, nhấp vào biểu tượng Chỉnh sửa thuộc tính trang

   Trang Chỉnh sửa xuất hiện

5. Cuộn xuống phần Tiêu đề HTML

6. Nhập mã vào Tiêu đề HTML và sau đó nhấp vào Áp dụng thay đổi

Ví dụ: thêm đoạn mã sau sẽ kiểm tra chức năng có thể truy cập từ bất kỳ đâu trên trang hiện tại

Bao gồm JavaScript trong một. js được Tham chiếu bởi Mẫu Trang

Trong Oracle Application Express, bạn có thể tham khảo tệp

    #TITLE#
    #HEAD#
    

#FORM_OPEN#

4 trong mẫu trang. Cách tiếp cận này làm cho tất cả JavaScript trong tệp đó có thể truy cập được vào ứng dụng. Đây là cách tiếp cận hiệu quả nhất vì tệp

    #TITLE#
    #HEAD#
    

#FORM_OPEN#

4 tải ở lần xem trang đầu tiên của ứng dụng của bạn và sau đó được trình duyệt lưu vào bộ đệm

Đoạn mã sau trình bày cách bao gồm một. js trong phần tiêu đề của mẫu trang. Lưu ý dòng

    #TITLE#
    #HEAD#
    

#FORM_OPEN#

8 xuất hiện in đậm

    #TITLE#
    #HEAD#
    

#FORM_OPEN#

Giới thiệu về các mục tham chiếu bằng JavaScript

Khi bạn tham chiếu một mục, cách tiếp cận tốt nhất là tham chiếu tên mục như được xác định trong trang. Lưu ý rằng tên mặt hàng khác với nhãn mặt hàng. Tên mục hiển thị trên Định nghĩa trang và nhãn hiển thị trên trang đang chạy. Ví dụ: nếu bạn tạo một mục có tên

    #TITLE#
    #HEAD#
    

#FORM_OPEN#

9 và nhãn là

 
  // Then add the following to the "Form Element Attributes" Attribute of the item:
  onchange="displayValue['P1_FIRST_NAME'];"

0, bạn sẽ tham chiếu mục đó bằng cách sử dụng

    #TITLE#
    #HEAD#
    

#FORM_OPEN#

9

Tham chiếu một mục theo tên mục cho phép bạn sử dụng phương thức JavaScript

 
  // Then add the following to the "Form Element Attributes" Attribute of the item:
  onchange="displayValue['P1_FIRST_NAME'];"

2 để lấy và đặt các thuộc tính và giá trị của mục. Ví dụ sau minh họa cách tham chiếu một mục theo ID và hiển thị giá trị của mục đó trong hộp cảnh báo

________số 8

Gọi JavaScript từ một nút

Gọi JavaScript từ một nút là một cách tuyệt vời để xác nhận yêu cầu. Oracle Application Express sử dụng kỹ thuật này cho thao tác xóa hầu hết các đối tượng. Ví dụ: khi bạn xóa một nút, một thông báo JavaScript sẽ xuất hiện yêu cầu bạn xác nhận yêu cầu của mình. Xem xét ví dụ sau

Ví dụ này tạo một hàm để xác nhận hành động xóa và sau đó gọi hàm đó từ một nút. Lưu ý rằng hàm tùy chọn gửi trang và đặt giá trị của biến nội bộ

 
  // Then add the following to the "Form Element Attributes" Attribute of the item:
  onchange="displayValue['P1_FIRST_NAME'];"

3 thành

 
  // Then add the following to the "Form Element Attributes" Attribute of the item:
  onchange="displayValue['P1_FIRST_NAME'];"

4, do đó thực hiện xóa bằng quy trình thực thi có điều kiện dựa trên giá trị của yêu cầu

Lưu ý khi tạo nút cần chọn Action Redirect to URL without submit page. Sau đó, bạn chỉ định một mục tiêu URL, chẳng hạn như sau

    #TITLE#
    #HEAD#
    

#FORM_OPEN#

5

Thay đổi giá trị của các phần tử biểu mẫu

Trong ví dụ sau, có bốn hộp văn bản trong một vùng. Hộp văn bản thứ tư chứa tổng của ba ô còn lại. Để tính tổng này, bạn thêm một hàm JavaScript vào thuộc tính Tiêu đề HTML rồi gọi hàm đó từ ba mục đầu tiên

Để thêm một chức năng vào thuộc tính Tiêu đề HTML

1. Chuyển đến Định nghĩa trang thích hợp

2. Trong phần Trang, nhấp vào biểu tượng Chỉnh sửa thuộc tính trang

   Trang Chỉnh sửa xuất hiện

3. Trong phần Tiêu đề HTML, hãy nhập thông tin sau

4. Nhấp vào Áp dụng thay đổi

Để gọi hàm từ cả ba mục

1. Chuyển đến Định nghĩa trang thích hợp

2. Cho mỗi mục

   1. Chọn tên mục bằng cách nhấp vào nó

   2. Cuộn xuống phần tử

   3. Trong Thuộc tính phần tử biểu mẫu HTML, hãy nhập

      
      
          #TITLE#
          #HEAD#
          
      
      #FORM_OPEN#
      

      7

   4. Nhấp vào Áp dụng thay đổi

Tạo xác thực JavaScript phía máy khách

Xác thực phía máy khách cung cấp phản hồi ngay lập tức cho người dùng bằng biểu mẫu. Một xác thực JavaScript rất phổ biến là trường không rỗng. Loại xác thực này hoạt động tốt trong tiêu đề trang hơn là trong

    #TITLE#
    #HEAD#
    

#FORM_OPEN#

4 vì nó rất cụ thể cho một trang

Trước khi bắt đầu, bạn cần nhập và cài đặt ứng dụng Đối tượng mẫu OEHR để truy cập các đối tượng cơ sở dữ liệu mẫu cần thiết. Xem "Giới thiệu về việc tải các đối tượng mẫu"

Các chủ đề trong phần này bao gồm

Tạo một Ứng dụng trên Bảng OEHR_EMPLOYEES

Để tạo một ứng dụng mới trên bảng

 
  // Then add the following to the "Form Element Attributes" Attribute of the item:
  onchange="displayValue['P1_FIRST_NAME'];"

6

1. Trên trang chủ Không gian làm việc, nhấp vào Trình tạo ứng dụng

2. Nhấp vào Tạo

3. Đối với Phương thức, chọn Tạo ứng dụng rồi nhấp vào Tiếp theo

4. Đối với Tên, chỉ định như sau

   1. Tên - Nhập

       
        // Then add the following to the "Form Element Attributes" Attribute of the item:
        onchange="displayValue['P1_FIRST_NAME'];"
      

      7

   2. Ứng dụng - Chấp nhận mặc định

   3. Tạo ứng dụng - Chọn từ đầu

   4. Lược đồ - Chọn lược đồ mà bạn đã cài đặt các đối tượng mẫu OEHR

   5. Bấm tiếp

5. Thêm trang chứa báo cáo bằng cách chỉ định thông tin sau trong phần Thêm trang

   1. Chọn Loại Trang - Chọn Báo cáo và Biểu mẫu

   2. Tên bảng - Chọn OEHR_EMPLOYEES

   3. Nhấp vào Thêm trang

   Các trang mới xuất hiện trong danh sách ở đầu trang. Tiếp theo đổi tên trang 2 thành Update Form

6. Để thay đổi tên của trang 2

   1. Trong phần Tạo ứng dụng ở đầu trang, nhấp vào tên trang OEHR_EMPLOYEES cho trang 2 như trong Hình 10-1

      Định nghĩa trang xuất hiện

   2. Trong Tên trang, nhập

       
        // Then add the following to the "Form Element Attributes" Attribute of the item:
        onchange="displayValue['P1_FIRST_NAME'];"
      

      8

   3. Nhấp vào Áp dụng thay đổi

   4. Bấm tiếp

7. Đối với Tab, hãy chấp nhận mặc định, Một cấp độ của tab rồi nhấp vào Tiếp theo

8. Đối với Thành phần được chia sẻ, hãy chấp nhận giá trị mặc định là Không và nhấp vào Tiếp theo

9. Đối với Thuộc tính, hãy chấp nhận các giá trị mặc định cho Lược đồ xác thực, Ngôn ngữ và Tùy chọn ngôn ngữ người dùng có nguồn gốc từ đó và nhấp vào Tiếp theo

10. Đối với Giao diện người dùng, chọn Chủ đề 2 và nhấp vào Tiếp theo

11. Nhấp vào Tạo

    Trang chủ Ứng dụng xuất hiện. Lưu ý ứng dụng mới có ba trang

    • 1 - OEHR_EMPLOYEES

    • 2 - Mẫu cập nhật

    • 101 - Đăng nhập

Để xem ứng dụng

1. Nhấp vào biểu tượng Chạy ứng dụng như trong Hình 10-2

2. Khi được nhắc nhập tên người dùng và mật khẩu, hãy nhập tên người dùng và mật khẩu không gian làm việc của bạn rồi nhấp vào Đăng nhập. Xem "Giới thiệu về xác thực ứng dụng"

   Một báo cáo tiêu chuẩn xuất hiện. Để xem biểu mẫu cập nhật, hãy nhấp vào nút Tạo hoặc biểu tượng Chỉnh sửa

3. Nhấp vào Ứng dụng trên thanh công cụ Nhà phát triển để quay lại trang chủ Ứng dụng

Thêm một chức năng vào thuộc tính tiêu đề HTML

Tiếp theo, bạn cần thêm một hàm vào thuộc tính HTML Header ở trang 2 để hiển thị thông báo khi trường Họ không chứa giá trị

Để thêm một hàm vào thuộc tính Tiêu đề HTML ở trang 2

1. Trên trang chủ Ứng dụng, nhấp vào 2 - Cập nhật biểu mẫu

   Định nghĩa trang cho trang 2 xuất hiện

2. Trong Trang, nhấp vào biểu tượng Chỉnh sửa thuộc tính trang như trong Hình 10-3

   Trang Chỉnh sửa xuất hiện

3. Cuộn xuống Tiêu đề HTML

   Lưu ý rằng Tiêu đề HTML đã chứa tập lệnh. Khi người dùng nhấp vào nút Xóa, tập lệnh này sẽ hiển thị thông báo sau

   2

4. Trong Tiêu đề HTML, cuộn xuống và đặt con trỏ của bạn sau thẻ cuối cùng

5. Sau thẻ cuối cùng, hãy nhập đoạn mã sau

6. Ở đầu trang, nhấp vào Áp dụng thay đổi

   Định nghĩa Trang cho trang 2 - Biểu mẫu Cập nhật xuất hiện

Chỉnh sửa một mục để gọi chức năng

Tiếp theo, bạn cần sửa mục

 
  // Then add the following to the "Form Element Attributes" Attribute of the item:
  onchange="displayValue['P1_FIRST_NAME'];"

9 để gọi hàm

Để chỉnh sửa mục

 
  // Then add the following to the "Form Element Attributes" Attribute of the item:
  onchange="displayValue['P1_FIRST_NAME'];"

9 để gọi hàm

1. Trong Mục, hãy nhấp vào P2_LAST_NAME

2. Cuộn xuống phần tử

3. Trong Thuộc tính phần tử biểu mẫu HTML, hãy nhập thông tin sau

   6

4. Ở đầu trang, nhấp vào Áp dụng thay đổi

   Định nghĩa trang xuất hiện. Tiếp theo, chạy trang

Kiểm tra xác thực bằng cách chạy trang

Tiếp theo, điều hướng đến trang 1 và chạy trang

Để kiểm tra xác nhận

1. Nhập 1 vào trường Trang trên Định nghĩa trang và nhấp vào Đi

   Định nghĩa trang cho trang 1 xuất hiện

2. Nhấp vào biểu tượng Chạy trang ở góc trên bên phải

3. Khi ứng dụng xuất hiện, nhấp vào Tạo

   Form cập nhật xuất hiện

4. Định vị con trỏ của bạn trong trường Họ và sau đó nhấp vào Tạo. Thông báo

   1 xuất hiện như trong Hình 10-4

Kích hoạt và vô hiệu hóa các phần tử biểu mẫu

Mặc dù Oracle Application Express cho phép bạn hiển thị một mục trang theo điều kiện, điều quan trọng cần lưu ý là một trang phải được gửi để đánh giá bất kỳ thay đổi nào trên trang. Ví dụ sau minh họa cách sử dụng JavaScript để tắt phần tử biểu mẫu dựa trên giá trị của phần tử biểu mẫu khác

Đầu tiên, bạn viết một hàm và đặt nó vào thuộc tính HTML Header của trang chứa biểu mẫu cập nhật của bạn. Thứ hai, bạn gọi hàm từ một mục trên trang. Ví dụ sau minh họa cách thêm chức năng JavaScript để ngăn người dùng thêm hoa hồng cho nhân viên không thuộc Phòng kinh doanh [P2_DEPARTMENT_ID = 80]

Các chủ đề trong phần này bao gồm

Thêm một chức năng vào thuộc tính tiêu đề HTML

Để thêm một hàm vào thuộc tính Tiêu đề HTML ở trang 2

1. Chuyển đến Định nghĩa trang cho trang 2

2. Bên dưới Trang, nhấp vào biểu tượng Chỉnh sửa thuộc tính trang

   Trang Chỉnh sửa xuất hiện

3. Cuộn xuống Tiêu đề HTML

4. Trong Tiêu đề HTML, cuộn xuống và đặt con trỏ của bạn sau thẻ cuối cùng

5. Sau thẻ cuối cùng, hãy nhập đoạn mã sau

6. Nhấp vào Áp dụng thay đổi

Chỉnh sửa một mục để gọi chức năng

Bước tiếp theo là chỉnh sửa mục

2 và thêm mã vào thuộc tính HTML Form Element Attributes để gọi hàm

Để chỉnh sửa mục

2 để gọi hàm

1. Trong mục, chọn P2_DEPARTMENT_ID

2. Cuộn xuống phần tử

3. Trong Thuộc tính phần tử biểu mẫu HTML, hãy nhập thông tin sau

   
   
       #TITLE#
       #HEAD#
       
   
   #FORM_OPEN#
   

   1

4. Nhấp vào Áp dụng thay đổi

Thay đổi Mục thành Danh sách Chọn

Để thay đổi

2 để hiển thị dưới dạng danh sách chọn

1. Trong mục, chọn P2_DEPARTMENT_ID

2. Từ danh sách Hiển thị dưới dạng trong phần Tên, chọn Chọn danh sách

3. Cuộn xuống Danh sách giá trị

4. Trong Danh sách giá trị, hãy chỉ định những điều sau

   1. Từ Hiển thị Null, chọn Không

   2. Trong định nghĩa Danh sách giá trị, hãy nhập

      
      
          #TITLE#
          #HEAD#
          
      
      #FORM_OPEN#
      

      2

5. Nhấp vào Áp dụng thay đổi

Mẹo

Để đơn giản, hướng dẫn này yêu cầu bạn tạo danh sách giá trị cấp mục. Tuy nhiên, như một phương pháp hay nhất, hãy xem xét việc tạo một LOV có tên và tham khảo nó

Tạo một cuộc gọi đến chức năng disFormItems

Cuối cùng, bạn cần tạo lệnh gọi hàm

5 sau khi trang được hiển thị để vô hiệu hóa

6 nếu nhân viên được chọn không phải là đại diện Bán hàng. Một nơi tốt để thực hiện lệnh gọi này là từ Thuộc tính nội dung HTML của Trang

Để tạo lời gọi hàm

5

1. Chuyển đến Định nghĩa trang cho trang 2

2. Bên dưới Trang, nhấp vào biểu tượng Chỉnh sửa thuộc tính trang

   Trang Chỉnh sửa xuất hiện

3. Tìm phần Thuộc tính hiển thị

4. Từ Tiêu điểm con trỏ, chọn Không tập trung con trỏ

   Chọn Không tập trung con trỏ ngăn xung đột giữa JavaScript được tạo và JavaScript tùy chỉnh

5. Cuộn xuống phần Thuộc tính cơ thể HTML

6. Trong Thuộc tính nội dung HTML của trang, hãy nhập thông tin sau

   
   
       #TITLE#
       #HEAD#
       
   
   #FORM_OPEN#
   

   3

7. Nhấp vào Áp dụng thay đổi

8. Chạy trang

Hình 10-5 minh họa biểu mẫu đã hoàn thành. Lưu ý rằng ID Phòng ban hiển thị dưới dạng danh sách lựa chọn. Cũng lưu ý rằng trường Hoa hồng Pct không khả dụng do ID Bộ phận là Quản trị

Làm cách nào để gọi một hàm JavaScript từ HTML?

Làm cách nào để gọi một hàm JavaScript từ một trang khác?

Làm cách nào để gọi một hàm JavaScript trong HTML mà không có bất kỳ sự kiện nào?