Mã JavaScript có hiển thị trong trình duyệt không?

Một cách mà JavaScript thường được sử dụng là ẩn hoặc hiển thị nội dung dựa trên hành vi của người dùng. Ví dụ: người dùng có thể chọn một tùy chọn khi điền vào biểu mẫu trực tuyến và lựa chọn của họ có thể khiến các trường biểu mẫu liên quan khác xuất hiện. Trong bài học này, bạn sẽ sử dụng CSS và Javascript để hiển thị và ẩn đồng hồ mà bạn đã tạo

Kết quả của người học

Khi hoàn thành bài tập này

• bạn sẽ có thể sử dụng CSS để ẩn và hiển thị nội dung
• bạn sẽ có thể sử dụng JavaScript để thay đổi và các thuộc tính CSS của phần tử HTML

Các hoạt động

Thông lệ phổ biến trên web ngày nay là ẩn nội dung khỏi người dùng cho đến khi cần thiết. Trong bài này các bạn sẽ ẩn đồng hồ đi, sau đó thêm link mà nếu click vào sẽ hiện đồng hồ

mở javascript. html trong cả trình soạn thảo văn bản và trình duyệt web của bạn. Chuyển đến biểu định kiểu mà bạn đã tạo cho div#clock trong bài học trước. Thêm thuộc tính sau vào biểu định kiểu

Bây giờ làm mới trang của bạn trong trình duyệt của bạn. Chuyện gì đã xảy ra thế? . Đây là một trong một số cách để ẩn nội dung bằng CSS. Để hiển thị lại phần tử, bạn sẽ thay đổi thuộc tính này thành

Tuy nhiên, trong trường hợp này, chúng tôi chỉ muốn hiển thị phần tử nếu người dùng yêu cầu cụ thể. Vì vậy, chúng tôi sẽ phải thay đổi kiểu động, sử dụng JavaScript, được kích hoạt bởi sự kiện onclick

Đầu tiên, thêm phần tử mà bạn muốn người dùng nhấp vào

Hiển thị đồng hồ

Lưu ý rằng nút này về cơ bản giống như nút bạn đã tạo trong Bài 1 để hiển thị cảnh báo. Có một sự khác biệt quan trọng mặc dù. Nút này có thuộc tính id. Đó là để bạn có thể truy cập nó dễ dàng bằng JavaScript (bạn sẽ hiểu tại sao trong giây lát)

Bây giờ bạn đã có một nút mà khi được nhấp vào sẽ gọi hàm toggleClock(), bạn cần tạo một hàm toggleClock(). Đây là chức năng đó - chỉ cần thêm nó vào phần tập lệnh hiện có ở đầu trang web của bạn

  function toggleClock() {
    // get the clock
    var myClock = document.getElementById('clock');

    // get the current value of the clock's display property
    var displaySetting = myClock.style.display;

    // also get the clock button, so we can change what it says
    var clockButton = document.getElementById('clockButton');

    // now toggle the clock and the button text, depending on current state
    if (displaySetting == 'block') {
      // clock is visible. hide it
      myClock.style.display = 'none';
      // change button text
      clockButton.innerHTML = 'Show clock';
    }
    else {
      // clock is hidden. show it
      myClock.style.display = 'block';
      // change button text
      clockButton.innerHTML = 'Hide clock';
    }
  }

Trong hàm toggleClock() mới này, bạn đang sử dụng JavaScript để truy xuất phần tử đồng hồ, lấy giá trị hiện tại của kiểu hiển thị của nó, sau đó kiểm tra nó. Nếu màn hình hiện đang được đặt thành "khối", đồng hồ sẽ hiển thị, vì vậy bạn thay đổi màn hình thành "không" để ẩn đồng hồ. Nếu đồng hồ đã bị ẩn, bạn thay đổi hiển thị thành "chặn" để hiển thị lại. Trong khi bạn đang chuyển đổi qua lại màn hình của đồng hồ từ "khối" thành "không", bạn cũng đang thay đổi văn bản (HTML bên trong) trên nút đồng hồ, sao cho luân phiên giữa "Hiển thị đồng hồ" và "Ẩn đồng hồ", tùy thuộc vào

Tất cả đã được làm xong?

Kiểm tra trang web của bạn và đảm bảo rằng bạn có thể hiển thị và ẩn đồng hồ bằng nút mới. Ngoài ra, hãy đảm bảo văn bản của nút thay đổi từ "Hiển thị đồng hồ" thành "Ẩn đồng hồ" khi thích hợp. Chia sẻ trang web của bạn với người hướng dẫn của bạn. Nếu tất cả đều ổn, hãy chuyển sang bài học tiếp theo

Ngày nay, hầu hết tất cả các trang web đều chứa JavaScript, một ngôn ngữ lập trình kịch bản chạy trên trình duyệt web của khách truy cập. Nó làm cho các trang web hoạt động cho các mục đích cụ thể và nếu bị tắt vì lý do nào đó, nội dung hoặc chức năng của trang web có thể bị hạn chế hoặc không khả dụng. Tại đây, bạn có thể tìm thấy hướng dẫn về cách bật (kích hoạt) JavaScript trong năm trình duyệt được sử dụng phổ biến nhất

Nếu bạn không đề phòng với mã JavaScript của mình, thì bạn đang tạo điều kiện dễ dàng cho bất kỳ ai muốn sao chép mã đó. Nhưng nếu quy trình lập trình của bạn chỉ cần một cú nhấp chuột, những kẻ tấn công sẽ thích sao chép phần mềm của đối thủ cạnh tranh hơn. Bot và những kẻ bất lương khác đang truy cập internet để lấy thông tin đăng nhập AWS hoặc Azure thường không bận tâm đến mã bị xáo trộn – thông tin đăng nhập của trang web tiếp theo cũng có thể được sử dụng để khai thác bitcoin và có thể được thu hoạch dễ dàng hơn

Làm xáo trộn JavaScript từng rất phức tạp. Tuy nhiên, quá trình này đã trở nên dễ dàng hơn đáng kể trong vài năm qua. Ngày nay, ngay cả các công ty nhỏ cũng có thể và nên bảo vệ mã của họ khỏi những con mắt tò mò. Trong một số trường hợp, việc bảo mật chỉ là một lệnh gọi của Nút. gói js đi

Các bước sau đây giới thiệu một trình mã hóa JavaScript thường được sử dụng và cũng xem xét một số chủ đề khác liên quan đến sự cố hiện tại

• Phần mềm diệt vi-rút tốt nhất (mở trong tab mới)
• 15 công cụ JavaScript cần thiết (mở trong tab mới)

01. kiểm tra phiên bản

Trình mã hóa JavaScript của chúng tôi tồn tại trong môi trường thời gian chạy Node. Hãy để chúng tôi bắt đầu bằng cách kiểm tra các phiên bản được sử dụng. Đầu ra bên dưới cung cấp trạng thái phiên bản được tìm thấy trên máy trạm thực sự của bạn được sử dụng cho các bước sau

tamhan@tamhan-thinkpad:~$ node --version
v8.12.0
tamhan@tamhan-thinkpad:~$ npm --version
6.4.1

02. cài đặt chương trình

Javascript-obfuscator nên được cài đặt vào bộ nhớ cache lắp ráp chung của máy trạm của bạn. Gọi npm với tham số -g và đừng quên cung cấp quyền siêu người dùng – quá trình triển khai thực tế sẽ được thực hiện trong vài giây

tamhan@tamhan-thinkpad:~$ sudo npm install -g 
javascript-obfuscator
[sudo] password for tamhan: 
. . .

+ [email protected]
added 103 packages from 162 contributors 
in 4.4s

03. Tạo một mẫu

Kiểm tra che giấu hoạt động tốt nhất nếu chúng tôi có một số mã 'thực'. Vì vậy, chúng ta hãy bắt đầu với một trang web HTML nhỏ. Nó tải một tệp JavaScript có tên worker. js, khai báo một nút và chứa một đoạn script nội tuyến nhỏ. Khi nó được tải trong trình duyệt, hãy nhấp vào nút để hiển thị hộp văn bản

	 
	
	Click Me! 

04. Thêm một số mã

Người làm việc. js bắt đầu với một biến chuỗi. Chúng là một mục tiêu tấn công cổ điển – nếu ROM được giải mã, trình biên dịch chương trình thường bắt đầu bằng cách tìm kiếm các bảng chứa các chuỗi chuỗi. Hơn nữa, mã hóa được thực hiện bằng cách sử dụng một tập hợp các biến có tên rất 'biết nói'

var myString = "Hello from Future plc"

function doTheTrick(){
	var chiffrat;
	chiffrat = rot13(myString);
	return chiffrat;
}

05. Thực hiện mã hóa

Vì đây không phải là mã hóa 101, chúng ta nên giải quyết bằng một mật mã thay thế tương đối đơn giản. ROT13 không khó nhưng có thể lập trình khá dài dòng. Việc triển khai Dsoares (opens in new tab) đi kèm với một tập hợp các biến 'nói' và cung cấp nhiều thông tin cho bộ làm xáo trộn của chúng ta.

function rot13(str) { 
	var re = new RegExp("[a-z]", "i");
	var min = 'A'.charCodeAt(0);
	var max = 'Z'.charCodeAt(0);
	var factor = 13;
	var result = "";
	str = str.toUpperCase();
  
	for (var i=0; i

06. xáo trộn đầu tiên

Thực hiện chạy che giấu mã rất đơn giản. Gọi javascript-obfuscator và chuyển vào một dấu chấm để yêu cầu chương trình hoạt động trên tất cả các tệp được tìm thấy trong thư mục làm việc hiện tại. Điều này cho thấy kết quả trên máy trạm IBM của tác giả

tamhan@tamhan-thinkpad:~/FutureObfuscate/
code$ javascript-obfuscator .

07. Chuyển hướng đầu ra

Kích hoạt các tệp trực tiếp vào thư mục chứa là không hiệu quả, vì tên phải được thay đổi trước khi chúng có thể được sử dụng. Một cách tốt hơn liên quan đến việc sử dụng tham số đầu ra. Nếu javascript-obfuscator tìm thấy nó, chương trình sẽ tạo một thư mục con trong thư mục làm việc hiện tại và kết quả công việc của nó ở đó

tamhan@tamhan-thinkpad:~/FutureObfuscate/code$
javascript-obfuscator . --output ./obfusca

08. Phân tích kết quả

tamhan@tamhan-thinkpad:~/FutureObfuscate/code$
javascript-obfuscator . --output ./obfusca 
--string-array-encoding base64

tamhan@tamhan-thinkpad:~$ node --version
v8.12.0
tamhan@tamhan-thinkpad:~$ npm --version
6.4.1

tamhan@tamhan-thinkpad:~$ sudo npm install -g 
javascript-obfuscator
[sudo] password for tamhan: 
. . .

+ [email protected]
added 103 packages from 162 contributors 
in 4.4s

tamhan@tamhan-thinkpad:~$ sudo npm install -g 
javascript-obfuscator
[sudo] password for tamhan: 
. . .

+ [email protected]
added 103 packages from 162 contributors 
in 4.4s

tamhan@tamhan-thinkpad:~$ sudo npm install -g 
javascript-obfuscator
[sudo] password for tamhan: 
. . .

+ [email protected]
added 103 packages from 162 contributors 
in 4.4s

tamhan@tamhan-thinkpad:~$ sudo npm install -g 
javascript-obfuscator
[sudo] password for tamhan: 
. . .

+ [email protected]
added 103 packages from 162 contributors 
in 4.4s

tamhan@tamhan-thinkpad:~$ sudo npm install -g 
javascript-obfuscator
[sudo] password for tamhan: 
. . .

+ [email protected]
added 103 packages from 162 contributors 
in 4.4s

tamhan@tamhan-thinkpad:~$ sudo npm install -g 
javascript-obfuscator
[sudo] password for tamhan: 
. . .

+ [email protected]
added 103 packages from 162 contributors 
in 4.4s