Сховати скрипт. Як показати і приховати фрагмент тексту або картинку в HTML за допомогою JavaScript. Що для цього потрібно

01.09.2023

Найпростіше рішення, що дозволяє показати/приховати HTML-елемент документа, використовуючи JavaScript. Детальний опис суті процесу та його особливостей.

Звичайними засобами зрити (англ. hide) чи показати (англ. show) HTML-елемент документа неможливо. Для цього використовується CSS-властивість displayабо visibility. Відмінність між ними полягає в тому, що visibility, хоч і робить HTML-елемент невидимим, але місце, яке він займає, залишається за ним. Зрозуміло, що набагато частіше використовується саме display.

display (з анг. відображення) – багатоцільова властивість, яка визначає, як елемент повинен відображатися у документі.

Список можливих значень CSS-властивості display, що розуміються різними браузерами, невеликий, але й цього цілком достатньо.

block – елемент показується як блоковий. Застосування цього значення вбудованих елементів, наприклад тега SPAN , змушує його вести подібно до блоків, тобто. відбувається перенесення рядків на початку та наприкінці вмісту.
inline – елемент відображається як вбудований. Застосування цього значення блокових елементів, наприклад тега DIV , змушує його вести подібно до вбудованим, тобто. його вміст починатиметься з того місця, де закінчився попередній елемент.
list-item — елемент виводиться як блоковий та додається маркер списку.
none – приховує елемент у документі. Займане ним місце не резервується і web-сторінка формується так, як елемента і не було.

Зрозуміло, що для того, щоб змінити CSS-властивість того чи іншого HTML-елемента, необхідно використовувати скриптову мову програмування. У нашому випадку це є JavaScript. Але все по порядку.

Насамперед треба визначитися, як саме звернутися до HTML-елементу документа. Для цього можна скористатися методом getElemetById об'єкта document, який повертає посилання на HTML-елемент документа за значенням атрибута id. Наприклад:

document.getElemetById("test")

Тепер потрібно отримати доступ до властивостей стилю відповідного HTML-елемента. Для цього використовується властивість style. Наприклад:

document.getElemetById("test").style.display

Залишається лише створити елемент управління, який виконував зміну значення CSS-властивості display, за якоюсь подією, наприклад onclick (клік мишею). Тут варто звернути увагу на той факт, що для вирішення поставленого завдання потрібно перевіряти поточне значення CSS-властивості displayі міняти його на «протилежне». У нашому випадку, для приховання будемо використовувати значення none , а для відображення «порожньо» . У другому випадку ми прибираємо CSS-властивість displayу відповідному елементі, що дозволить коректно працювати як з блочними так і HTML-елементами, що вбудовуються.

Для наочності наведу такий приклад:

function change(idName) ( if(document.getElementById(idName).style.display=="none") ( document.getElementById(idName).style.display = ""; ) else ( document.getElementById(idName).style .display = "none";) return false;) Hi World! Change

Зауважте, що тег DIV має атрибут style зі значенням display:none . Таким чином? ми задаємо значення CSS-властивості displayза умовчанням рівне none, тобто. HTML-елемент спочатку буде прихований.

Опис: Бувають ситуації, коли не хочеться виводити весь контент сторінки одразу. Наприклад, у розділі "FAQ" вивести лише назви питань. А якщо людину зацікавить відповідь на певне питання, то вона може відкрити відповідь, а коли перегляне, то й закрити. Це створює зручність сторінки та її компактність. І для цього я підготував простенький скрипт на JavaScript, що дозволяє відкрити або приховати певний текст (загалом, певні елементи), тобто зробити прихований текст на JavaScript.

Результат: Клацніть мишею за назвою питання. Якщо Ви натисніть ще раз, то відповідь знову закриється.

Питання №1

Відповідь №1.

Питання №2

Відповідь №2.

Код JavaScript (вставляти між тегами та ):

function expandit(id)(
obj = document.getElementById(id);
if (obj.style.display=="none") obj.style.display="";
else obj.style.display="none";
}

Код HTML (вставляти між тегами та ):

Питання №1
Відповідь №1.
Питання №2
Відповідь №2.

Здрастуйте, читачу.
У цій невеликій статті хочемо розповісти Вам, як правильно оптимізувати категорії для інтернет-магазину.
Коли ми починаємо оптимізувати текст, то спочатку налаштовуємо сторінку на максимальну релевантність. Як це зробити .
Але в цій ситуації часто виникає наступна проблема – потрібно дописати занадто багато тексту, а це ніяк не в'яжеться з дизайном сайту.
Тому потрібно приховати частину тексту від користувачів, але якщо раптом відвідувач захоче прочитати його, то щоб він міг його легко відкрити.

Цікаве рішення реалізовано в інтернет-гіпермаркеті "Розетка". Ось наприклад категорії:

Коли ми натискаємо на це посилання, то відкривається повний опис без перезавантаження сторінки. Якщо Ви хочете реалізувати таке ж рішення, то нижче розказано, як це реалізується на практиці.
Цей момент можна вирішити завдяки мові JavaScript.
JavaScript спочатку створювався для того, щоб зробити web-сторінки «живими».
Щоб встановити текст скрипти JavaScript, потрібно ввести дескриптор . Код JavaScript розташований між тегами. Код можна розміщувати як у тілі заголовка сторінки (між тегами), так і в тілі сторінки (між тегами).
Для роботи скрипта треба створити функцію, яка буде використовуватися в будь-якій частині сайту. Використовуватимемо функцію function sh()

sh();
function sh() (
info = document.getElementById("info");
button = document.getElementById("button");
if (info.style.display == "none") (
info.style.display = "block";
button.style.display = "none";
}
}

Для відображення роботи скрипта на нього потрібно поставити у вказане місце у такому вигляді

Детальніше...

ТЕКСТ ЯКИЙ БУДЕ прихований

Тут викликається функція sh()
Щоб за замовчуванням прихований текст був відкритим у коді, змінюємо display:none на display:block

Ось приклад того, що вийшло після того, як застосували функцію до тексту:

У цьому прикладі на сторінці було приховано 3000 символів SEO-тексту, прописаних для просування сайту. При натисканні посилання посилання «Докладніше…» зникне завдяки властивості style.display вказаній у функції.
Таким чином Ви можете реалізувати цей функціонал. Якщо у Вас залишилися питання, то ставте їх у коментарях.

Чесно кажучи, ніякому розробнику це не потрібно, в основному будь-який JavaScript код легко подивитися в браузері, і тому особливих причин приховувати свій код немає. Це, так би мовити, мабуть, те, що не можна приховати. Однак, є хлопці, які дуже соромляться показувати свій код будь-кому, вважаючи, що це власність, яку не можна вкрасти, скажімо, бібліотеки. Ви створили онлайн-сервіс, спеціально до нього створили потужну складну бібліотеку, яка виконує певні операції, аналогів вашого сервісу, вашої бібліотеки немає, і, природно, вам не хотілося б, щоб ваш скрипт легко бачив кожен (розробник) і міг на прикладі вашого зробити подібний, ще кращий. Звичайно, немає нічого поганого в тому, щоб робити щось краще, це еволюція, але з погляду бізнесу конкурентам це тільки на руку. Що для цього потрібно? Вам потрібно лише зрозуміти алгоритм і спробувати покращити його, а мені переказати свій досвід того, як я робив приховані скрипти. Перше, що нам потрібно — це протестувати завдання на реальному (локальному) сервері, я робитиму це за допомогою Denwer на локальному сервері.

а) Для тестування створіть каталог на сервері.
Я заходжу на віртуальний диск, у мене це диск R, там же зайдіть у папку

Створіть директорію script, а всередині створіть папку www, в результаті у вас вийде: home/script/www/ - після цього обов'язково оновіть сервер (Restart Denwer)

б) Створюємо файл index.php – припустимо, це наша головна сторінка сайту, і тут нам потрібно виводити приховані скрипти. Також створіть папку «js» у цьому каталозі.

Для нашого завдання, будуть потрібні AJAX-запити, для цього ви можете використовувати свої раціональні функції, але якщо ваш проект буде розростатися до розмірів, який вимагатиме застосування особливих ефектів, подій, підключіть бібліотеку, а я підключу заздалегідь jQuery, тому в корінь папки «js » додайте jquery.js.

Потім у цій же папці створіть нову папку, в ній зберігатимуться скрипти, які нам потрібно буде приховувати. Я назву її «security»:

в) Набираємо попередній код у index.php

Як ви бачите, є блок

PHP бере на себе роль зчитування ваших скриптів, які будуть заблоковані на сервері, і до них не можна буде звернутися.

Але спочатку давайте створимо наші скрипти, які хочемо сховати.

г) У папці «security» створіть script1.js і script2.js, з таким вмістом, відповідно:

Для прикладу достатньо цього! Тепер, щоб до них не можна було звернутися, необхідно встановити це на сервері, це робиться завдяки файлу.htaccess.

Htaccess – це конфігураційний файл, що налаштовується розробником, користувачем даного сервера.

Htaccess має такий вміст:

Після чого, на запит:

Ви побачите таке:

Тим самим ваша папка security прихована від сторонніх очей, вона є недоступною.

Якщо ви спробуєте підключити скрипти:

То в будь-якому випадку ваші файли не будуть виконуватися, оскільки вони глобально приховані сервером

д) Повертаємось до програмного php-блоку в index.php

Суть у тому, що PHP має доступ до всіх файлів на сервері, незалежно, приховані вони чи ні, тобто якщо ви пропишете:

то в даному випадку ми з вами побачимо вміст нашого прихованого скрипту.

Однак з іншого сервера вміст нашого скрипту не можна буде побачити, і буде повернено повідомлення про помилку 500. Це нам на руку, таким чином інші сайти не зможуть зчитувати наші приховані файли.

е) Ось як виглядатиме кінцевий результат:

А тепер розуміємось, як це все працює. jQuery виконує post-запит (це допомагає уникнути дірок у роботі index.php) на сервер «index.php?js=result», там іде перевірка, якщо запит із нашого сервера (функція strpos() та адреса нашого сервера «HTTP:/ /script» – з урахуванням цього прикладу), то скрипт перевіряє POST-змінну, тобто адресу нашого прихованого скрипту, і видає текстовий результат. jQuery метод done() отримує відповідь у вигляді цього текстового вмісту, а вже цей текст можна перетворити на робочий javascript, це робить стандартна кроссбраузерная функція eval();

У результаті Ми отримуємо свій результат, наші скрипти не можна побачити статично чи динамічно через консоль браузера, але легко побачити їхню роботу. Дані скрипти та його функції легко виконуються. Однак потрібно добре подумати, щоб застосовувати дану техніку, тому що в даному випадку порушується питання продуктивності, швидкодії. Функція eval(code) серед розробників javascript вважається злом, і рекомендується використовувати її аналог new Function('return' + code), правда останнє не вміє виконувати визначення функцій усередині, тобто якщо у вашій змінній буде запис визначення функції, code = “function test() (alert(1);); test();”, то код не буде виконаний, а значить eval() підходить на всі випадки життя, щоправда має свої нюанси, про які ще потрібно додатково почитати.

Для повноцінної та оптимальної роботи веб-сторінок у браузері необхідно, щоб у ньому було активовано JavaScript.

Що це таке та як його включити, ми розповімо у цій статті.

Що таке javascript?

ЯваСкрипт можна назвати мультипарадигмальною мовою. Він має підтримку багатьох способів програмування. Наприклад, об'єктно-орієнтоване, функціональне та імперативне.

Цей вид програмування не пов'язаний безпосередньо з java. Основним синтаксисом цієї мови програмування є мова Сі, і навіть Сі++.

Основою веб-сторінок браузерів є HTML-код, за допомогою якого програмісти додаю різні інтерактивні елементи на сторінки.

Якщо JavaScript в браузері вимкнено, інтерактивні елементи не працюватимуть.

З'явився цей вид мови програмування завдяки спільній роботі компаній Sun Microsystems та Netscape.

Спочатку ЯваСкрипт мав назву LiveScript, але після того, як мова Java стала популярною серед програмістів, компаніями-розробниками було прийнято рішення перейменувати її.

Маркетинговий відділ компанії Netscape визнав, що така назва збільшить популярність нової мови програмування, що, власне, і сталося.

Нагадаємо, що ЯваСкрипт не має прямого відношення до Java. Це абсолютно різні мови.

Можливості JavaScript

Ця мова програмування є необмежену кількість можливостей за рахунок своєї універсальності.

Основними аспектами застосування є мобільні програми для смартфонів, інтерактивні веб-сторінки сайтів та сервісів.

Більшість нововведень принесло приєднання до проекту компанії AJAX, яка надала можливості, що використовуються в мові на сьогоднішній день.

Для економії трафіку та збільшення зручності використання, ЯваСкрипт надає можливість змінювати сторінки сайтів та сервісів невеликими частинами непомітно для користувача онлайн.

Це не вимагає відключення сайту на час редагування або додавання нової інформації.

Зміни відбуваються одразу, не вимагаючи оновлення або перезавантаження сторінки.

Функція ЯваСкрипт може бути вимкнена з різних причин.

Можливо, попередній користувач навмисно міг його вимкнути, оскільки він не був потрібний для перегляду веб-сторінок. Також відключення могло статися самостійно.

Відключення JavaScript може спричинити відмову у відкритті деяких посилань. Трохи нижче ми розглянемо способи включення цієї функції у популярних браузерах.

Яндекс.Браузер

Щоб активувати функцію ЯваСкрипт у версії 22 і нижче, перейдіть на панель інструментів і виберіть пункт меню «Установки» .

Для включення javascript переходимо до розділу «Вміст», в якому для активації функції потрібно поставити галочку в рядку «Використовувати JavaScript».

Для відключення функції потрібно зняти цю галочку.

Для збереження змін натискаємо кнопку «ОК» та оновлюємо сторінку браузера.

Щоб зміни набули чинності, перезапускати браузер не потрібно. Після активації ви зможете повноцінно переглядати веб-сторінки та здійснювати дії на інтерактивних сервісах.

Opera Версії від 10,5 до 14

В першу чергу нам потрібно буде відкрити налаштування браузера.

У лівому верхньому куті натискаємо кнопку «Меню», в контекстному меню наводимо курсор на пункт «Налаштування» і тиснемо на підпункт «Загальні налаштування…».

Після цього відкриється нове вікно з налаштуваннями браузера.

У ньому необхідно вибрати вкладку "Додатково".

У лівому меню вкладки натискаємо на пункт "Вміст", після чого активуємо функцію, поставивши дві галочки на пункти "Включити JavaScript" та "Включити Java".

Для деактивації ці галочки потрібно зняти.

Активація та деактивація javascript в Opera версії від 10,5 до 14

Після того, як ви поставили або зняли галочки, зберігаємо зміни натисканням кнопки "ОК".

Тепер перезапускаємо браузер для того, щоб зміни набули чинності. Вам будуть доступні всі функції JavaScript.

Версії від 15 і вище

У даних версіях браузера Опера активація ЯваСкрипт набагато простіша.

Щоб відкрити вікно налаштувань, необхідно у відкритому браузері натиснути поєднання «гарячих» клавіш Alt+P. У меню відкриваємо вкладку «Сайти» .

Для активації функції потрібно встановити "прапорець" на пункт "Дозволити виконання JavaScript", для деактивації - "Заборонити виконання JavaScript".

Після цього достатньо натиснути кнопку «ОК» для збереження змін і оновити сторінку, що переглядається, клавішею F5 або натисканням відповідного значка зліва на адресному рядку.

Перезапускати браузер не потрібно.

Safari

Щоб увімкнути функцію ЯваСкрипт у фірмовому браузері Apple, потрібно перейти в налаштування.

Щоб їх відкрити, потрібно натиснути кнопку Safari і вибрати пункт Налаштування.