Net 

Skripti gizlədin. JavaScript istifadə edərək html-də mətn parçasını və ya şəkli necə göstərmək və gizlətmək olar. Bunun üçün nə lazımdır

JavaScript istifadə edərək HTML sənəd elementini göstərmək/gizlətmək üçün ən sadə həll. Prosesin mahiyyətinin və onun xüsusiyyətlərinin ətraflı təsviri.

Adi vasitələrlə sökmək gizlətmək) və ya göstər (İngilis dili) göstərmək) HTML sənəd elementi mümkün deyil. Bu, CSS xassəsindən istifadə etməklə edilir göstərin və ya görmə qabiliyyəti. Aralarındakı fərq ondadır görmə qabiliyyəti, HTML elementini görünməz etsə də, tutduğu yer onunla qalır. Daha tez-tez istifadə edildiyi aydındır göstərin.

ekran (ingilis dilindən) göstərin) elementin sənəddə necə göstərilməsini müəyyən edən çoxməqsədli xüsusiyyətdir.

Mümkün CSS xassə dəyərlərinin siyahısı göstərin, müxtəlif brauzerlər tərəfindən başa düşülən, böyük deyil, lakin bu olduqca kifayətdir.

  • blok - element blok elementi kimi göstərilir. Bu dəyərin SPAN teqi kimi daxili elementlərə tətbiq edilməsi onun bloklar kimi davranmasına səbəb olur, yəni. Sətir fasilələri məzmunun əvvəlində və sonunda baş verir.
  • inline - element inline kimi göstərilir. Bu dəyəri blok elementlərə, məsələn, DIV teqi üçün tətbiq etmək, onun daxili elementlər kimi davranmasına səbəb olur, yəni. onun məzmunu əvvəlki elementin bitdiyi yerdən başlayacaq.
  • list-item - Element blok elementi kimi göstərilir və siyahı markeri əlavə edilir.
  • heç biri - sənəddəki elementi gizlədir. Onun tutduğu yer qorunmur və veb-səhifə elə qurulur ki, sanki element heç vaxt mövcud olmayıb.

Aydındır ki, müəyyən bir HTML elementinin CSS xüsusiyyətini dəyişdirmək üçün skript proqramlaşdırma dilindən istifadə etməlisiniz. Bizim vəziyyətimizdə JavaScript-dir. Amma hər şey qaydasındadır.

İlk addım sənədin HTML elementinə tam olaraq necə daxil olacağına qərar verməkdir. Bunun üçün id atributunun dəyəri əsasında sənədin HTML elementinə keçid qaytaran sənəd obyektinin getElemetById metodundan istifadə edə bilərsiniz. Misal üçün:

document.getElemetById("test")

İndi müvafiq HTML elementinin stil xüsusiyyətlərinə daxil olmalıyıq. Bunun üçün stil xassəsindən istifadə olunur. Misal üçün:

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

CSS xassəsinin dəyərini dəyişdirəcək nəzarət elementi yaratmaq qalır göstərin, bəzi hadisədə, məsələn, onclick (siçan klik). Burada diqqət yetirməyə dəyər ki, tapşırığı həll etmək üçün CSS əmlakının cari dəyərini yoxlamaq lazımdır. göstərin və onu "əksinə" dəyişdirin. Bizim vəziyyətimizdə gizlətmək üçün none, göstərmək üçün isə “boş” dəyərindən istifadə edəcəyik. İkinci halda, biz CSS xassəsini silirik göstərin həm blok, həm də daxili HTML elementləri ilə düzgün işləməyə imkan verəcək müvafiq elementdə.

Aydınlıq üçün aşağıdakı nümunəni verəcəyəm:

funksiya dəyişikliyi(idName) ( if(document.getElementById(idName).style.display=="heç biri") ( document.getElementById(idName).style.display = ""; ) başqa ( document.getElementById(idName) üslubu). .display = "none"; ) false qaytarın; ) Salam Dünya! Dəyişmək

Qeyd edək ki, DIV teqində göstərmək üçün təyin edilmiş stil atributu var:none . Beləliklə? CSS xassəsinin dəyərini təyin etdik göstərin default olaraq heç biri , yəni. HTML elementi əvvəlcə gizlədiləcək.

Təsvir: Bütün səhifə məzmununu bir anda göstərmək istəmədiyiniz vəziyyətlər var. Məsələn, "FAQ" bölməsində yalnız sualların adlarını göstərin. Və əgər insan müəyyən bir sualın cavabı ilə maraqlanırsa, o zaman cavabı aça bilər, baxdıqda isə onu bağlaya bilər. Bu, səhifəni rahat və yığcam edir. Və bunun üçün müəyyən mətni (ümumiyyətlə müəyyən elementləri) açmağa və ya gizlətməyə, yəni JavaScript-də gizli mətn yaratmağa imkan verən sadə JavaScript skripti hazırladım.

Nəticə: Sualın başlığına klikləyin. Yenidən klikləsəniz, cavab yenidən bağlanacaq.

Sual №1

Cavab №1.

Sual № 2

Cavab №2.

JavaScript kodu (teqlər arasına daxil edin):


funksiyanın genişləndirilməsi(id)(
obj = document.getElementById(id);
əgər (obj.style.display=="heç biri") obj.style.display="";
else obj.style.display="heç biri";
}

HTML kodu (teqlər arasına daxil edin):

Sual №1
Cavab №1.
Sual № 2
Cavab №2.

Salam oxucu.
Bu qısa məqalədə onlayn mağaza üçün kateqoriyaları necə düzgün optimallaşdıracağınızı sizə xəbər vermək istəyirik.
Mətni optimallaşdırmağa başlayanda ilk növbədə səhifəni maksimum uyğunluq üçün quraşdırırıq. Bunu necə etmək olar .
Ancaq bu vəziyyətdə tez-tez aşağıdakı problem yaranır - çox mətn əlavə etmək lazımdır və bu saytın dizaynına uyğun gəlmir.
Buna görə də, mətnin bir hissəsini istifadəçilərdən gizlətmək lazımdır, lakin birdən ziyarətçi onu oxumaq istəsə, o zaman asanlıqla aça bilər.

“Rozetka” onlayn hipermarketində maraqlı həll tətbiq edilib. Budur kateqoriyalara bir nümunə:

Bu linkə tıkladığımız zaman səhifəni yenidən yükləmədən tam təsvir açılır. Eyni həlli həyata keçirmək istəyirsinizsə, aşağıda bunun praktikada necə həyata keçirildiyini təsvir edirik.
Bu məqam JavaScript proqramlaşdırma dili sayəsində həll edilə bilər.
JavaScript əvvəlcə veb səhifələri "canlı" etmək üçün yaradılmışdır.
Veb səhifənin mətnində JavaScript skriptlərini quraşdırmaq üçün siz deskriptoru daxil etməlisiniz. JavaScript kodu teqlər arasında yerləşir. Kod həm səhifə başlığının mətnində (teqlər arasında), həm də səhifənin mətnində (teqlər arasında) yerləşdirilə bilər.
Skriptin işləməsi üçün saytın istənilən hissəsində istifadə olunacaq funksiya yaratmalısınız. sh() funksiyasından istifadə edəcəyik


sh();
sh() funksiyası
info = document.getElementById("info");
düymə = document.getElementById("düymə");
əgər (info.style.display == "heç biri") (
info.style.display = "blok";
button.style.display = "heç biri";
}
}

Skriptin işini onun üzərində göstərmək üçün onu bu formada göstərilən yerə qoymaq lazımdır

Daha çox oxu...



GİZLƏNƏCƏK MƏTN

Burada sh() funksiyası çağırılır
Gizli mətni kodda defolt olaraq açmaq üçün displey:none-i display:block olaraq dəyişin

Funksiyanı mətnə ​​tətbiq etdikdən sonra baş verənlərə bir nümunə:

Bu nümunədə, saytı tanıtmaq üçün yazılmış 3000 simvol SEO mətni səhifədə gizlədilib. Linkə kliklədiyiniz zaman “Daha ətraflı...” linkinin özü funksiyada göstərilən style.display xüsusiyyəti sayəsində yox olacaq.
Beləliklə, bu funksiyanı həyata keçirə bilərsiniz. Hər hansı bir sualınız varsa, şərhlərdə soruşun.

Düzünü desəm, heç bir tərtibatçının buna ehtiyacı yoxdur, əsasən istənilən javascript kodunu brauzerdə görmək asandır və buna görə də kodunuzu gizlətmək üçün xüsusi səbəb yoxdur. Bu, belə desək, görünən, gizlədilə bilməyən bir şeydir. Bununla belə, elə uşaqlar var ki, kodunu kiməsə göstərməkdən çox utanırlar, bunun oğurlanması mümkün olmayan əmlak olduğuna inanırlar, məsələn, kitabxanalar. Siz onlayn xidmət yaratmısınız, onun üçün xüsusi olaraq müəyyən əməliyyatları yerinə yetirən güclü kompleks kitabxana yaratmısınız, xidmətinizin, kitabxananızın analoqu yoxdur və təbii ki, skriptinizin hamı tərəfindən asanlıqla görünməsini istəməzdiniz (developer) və oxşar, hətta daha yaxşı etmək üçün nümunənizdən istifadə edə bilər. Əlbəttə ki, daha yaxşı bir şey etməkdə qəbahət yoxdur, bu təkamüldür, amma biznes baxımından bu, yalnız rəqiblərə xeyir verir.Bunun üçün nə lazımdır? Siz sadəcə alqoritmi başa düşməli və onu təkmilləşdirməyə çalışmalısınız və gizli skriptləri necə hazırladığım barədə təcrübənizi mənə deyin. Bizə lazım olan ilk şey tapşırığı real (yerli) serverdə sınamaqdır, mən bunu yerli serverdə Denwer istifadə edərək edəcəm.

a) Sınaq üçün serverdə kataloq yaradın.
Virtual diskə gedirəm, mənim üçün bu, R diskidir, oradakı ev qovluğuna keçin

Skript kataloqu yaradın və içəridə www qovluğu yaradın, sonda əldə edəcəksiniz: home/script/www/ - bundan sonra serveri yeniləməyi unutmayın (Denweri yenidən başladın)

b) index.php faylı yaradın - deyək ki, bu bizim saytın əsas səhifəsidir və burada gizli skriptləri göstərməliyik. Həmçinin bu qovluqda “js” qovluğu yaradın.

Tapşırığımız üçün AJAX sorğuları tələb olunacaq, bunun üçün siz öz rasional funksiyalarınızdan istifadə edə bilərsiniz, lakin layihəniz xüsusi effektlərin, hadisələrin istifadəsini tələb edən ölçüyə çatarsa, kitabxananı birləşdirin və mən əvvəlcədən jQuery-ni bağlayacağam. “js” qovluğunun kökündə » jquery.js əlavə edin.

Sonra eyni qovluqda yeni bir qovluq yaradın, gizlətməyimiz lazım olan skriptlər orada saxlanacaq. Mən bunu "təhlükəsizlik" adlandıracağam:

c) İlkin kodu index.php-ə yazın


Gördüyünüz kimi blok var

PHP serverdə bloklanacaq və daxil olmaq mümkün olmayan skriptlərinizi oxumaq rolunu öz üzərinə götürür.

Ancaq əvvəlcə gizlətmək istədiyimiz skriptlərimizi yaradaq.


d) “Təhlükəsizlik” qovluğunda müvafiq olaraq aşağıdakı məzmunla script1.js və script2.js yaradın:


Bu misal üçün kifayətdir! İndi onlara daxil ola bilməmək üçün bunu serverdə qurmaq lazımdır, bu .htaccess faylı sayəsində edilir.

Htaccess bu serverin istifadəçisi olan tərtibatçı tərəfindən konfiqurasiya edilmiş konfiqurasiya faylıdır.

Htaccess bu məzmuna malikdir:

Sonra, xahişlə:

Bunun kimi bir şey görəcəksiniz:

Beləliklə, təhlükəsizlik qovluğunuz maraqlı gözlərdən gizlənir və əlçatmazdır.

Skriptləri daxil etməyə çalışırsınızsa:

İstənilən halda, fayllarınız icra olunmayacaq, çünki onlar qlobal olaraq server tərəfindən gizlədilir

e) index.php-də PHP proqram blokuna qayıdın

Məsələ burasındadır ki, PHP serverdəki bütün fayllara onların gizli olub-olmamasından asılı olmayaraq, yəni yazsanız:


onda bu halda biz gizli skriptimizin məzmununu görəcəyik.

Bununla belə, skriptimizin məzmunu başqa serverdən görünməyəcək və 500 səhv mesajı qaytarılacaq.Bu, bizim xeyrimizədir, beləliklə, digər saytların gizli fayllarımızı oxumasının qarşısını alır.

f) Yekun nəticə belə olacaq:

İndi bütün bunların necə işlədiyini anlayaq. jQuery “index.php?js=result” serverinə yazı sorğusunu yerinə yetirir (bu, index.php işində boşluqların qarşısını almağa kömək edir), sorğunun serverimizdən olub-olmaması yoxlanılır (strpos() funksiyası və serverimizin ünvanı “HTTP:/ /script” – bu nümunəni nəzərə alaraq), sonra skript POST dəyişənini, yəni gizli skriptimizin ünvanını yoxlayır və mətn nəticəsi yaradır. jQuery done() metodu bu mətn məzmunu şəklində cavab alır və bu mətn artıq işləyən javascript-ə çevrilə bilər, bunu standart cross-brauzer funksiyası eval();

Nəticədə, nəticəmizi əldə edirik; skriptlərimiz brauzer konsolu vasitəsilə statik və ya dinamik şəkildə görünə bilməz, lakin onların işini görmək asandır. Bu skriptləri və onların funksiyalarını yerinə yetirmək asandır. Ancaq bu texnikadan istifadə etmək üçün diqqətlə düşünmək lazımdır, çünki bu vəziyyətdə performans və sürət məsələsi gündəmə gəlir. Eval(code) funksiyası javascript tərtibatçıları arasında pis hesab olunur və onun analoq yeni Function('return ' + code) funksiyasından istifadə etmək tövsiyə olunur, baxmayaraq ki, sonuncu funksiyaları daxili olaraq təyin edə bilməz, yəni dəyişəninizdə funksiya tərifi qeydi varsa. , kod = “funksiya testi() (xəbərdarlıq(1); test();”, onda kod icra olunmayacaq, bu o deməkdir ki, eval() bütün hallar üçün uyğundur, baxmayaraq ki, onun öz nüansları var, hələ də ətraflı oxumaq lazımdır.

Veb səhifələrin brauzerinizdə tam və optimal işləməsi üçün javascript aktiv olmalıdır.

Bunun nə olduğunu və onu necə aktivləşdirəcəyini bu məqalədə sizə xəbər verəcəyik.

Pivot Cədvəli Javascript nədir?

JavaScript-i çoxparadiqmalı dil adlandırmaq olar. Bir çox proqramlaşdırma metodlarını dəstəkləyir. Məsələn, obyekt yönümlü, funksional və imperativ.

Bu tip proqramlaşdırma birbaşa java ilə əlaqəli deyil. Bu proqramlaşdırma dilinin əsas sintaksisi C dili ilə yanaşı, C++ dilidir.

Brauzer veb səhifələrinin əsasını proqramçılar səhifələrə müxtəlif interaktiv elementlər əlavə edən HTML kodu təşkil edir.

Brauzerdə javascript deaktiv edilərsə, interaktiv elementlər işləməyəcək.

Bu tip proqramlaşdırma dili Sun Microsystems və Netscape-in ​​birgə işi sayəsində meydana çıxdı.

Əvvəlcə JavaScript LiveScript adlanırdı, lakin Java dili proqramçılar arasında populyarlaşdıqdan sonra inkişaf şirkətləri onun adını dəyişməyə qərar verdilər.

Netscape-in ​​marketinq departamenti belə bir adın yeni proqramlaşdırma dilinin populyarlığını artıracağına inanırdı və bu, əslində baş verdi.

Nəzərinizə çatdıraq ki, JavaScript birbaşa Java ilə əlaqəli deyil. Bunlar tamamilə fərqli dillərdir.

JavaScript Xüsusiyyətləri

Bu proqramlaşdırma dili çox yönlü olduğuna görə qeyri-məhdud sayda imkanlara malikdir.

Tətbiqin əsas aspektləri smartfonlar üçün mobil proqramlar, saytların və xidmətlərin interaktiv veb səhifələridir.

Yeniliyin böyük hissəsi bu gün dildə istifadə olunan xüsusiyyətləri təmin edən layihəyə qoşulan AJAX şirkəti tərəfindən gətirildi.

Trafikə qənaət etmək və istifadənin asanlığını artırmaq üçün JavaScript sayt və xidmətlərin səhifələrini onlayn istifadəçinin diqqətindən yayınmadan kiçik hissələrdə dəyişmək imkanı verir.

Bu, redaktə edərkən və ya yeni məlumat əlavə edərkən saytın bağlanmasını tələb etmir.

Dəyişikliklər səhifənin yenilənməsi və ya yenidən yüklənməsi tələb olunmadan dərhal baş verir.

JavaScript funksiyası müxtəlif səbəblərdən söndürülə bilər.

Mümkündür ki, əvvəlki istifadəçi onu qəsdən söndürmüş ola bilər, çünki bu, internetə baxmaq üçün tələb olunmur. Bağlanma öz-özünə də baş verə bilər.

Javascript-in söndürülməsi bəzi linklərin açılmasına mane ola bilər. Aşağıda məşhur brauzerlərdə bu funksiyanı aktivləşdirməyin yollarına baxacağıq.

Yandex brauzeri

22 və daha aşağı versiyalarda JavaScript funksiyasını aktivləşdirmək üçün alətlər panelinə keçin və "Parametrlər" menyusunu seçin.

Javascript-i aktivləşdirmək üçün “Məzmun” bölməsinə keçin, burada funksiyanı aktivləşdirmək üçün “JavaScript-dən istifadə et” qutusunu qeyd etməlisiniz.

Funksiyanı söndürmək üçün bu qutunun işarəsini silməlisiniz.

Dəyişiklikləri saxlamaq üçün "OK" düyməsini basın və brauzer səhifəsini yeniləyin.

Dəyişikliklərin qüvvəyə minməsi üçün brauzeri yenidən başlatmağa ehtiyac yoxdur. Aktivləşdirildikdən sonra siz internet səhifələrinə tam baxa və interaktiv xidmətlərdə hərəkətlər edə biləcəksiniz.

Opera versiyaları 10.5-dən 14-ə qədər

Əvvəlcə brauzer parametrlərini açmalıyıq.

Yuxarı sol küncdə "Menyu" düyməsini basın, kontekst menyusunda kursoru "Parametrlər" maddəsinə aparın və "Ümumi parametrlər ..." alt elementini vurun.

Bundan sonra brauzer parametrləri ilə yeni bir pəncərə açılacaqdır.

Bunun içərisində "Qabaqcıl" sekmesini seçməlisiniz.

Nişanın sol menyusunda "Məzmun" maddəsini vurun, bundan sonra "JavaScript-i aktivləşdir" və "Java-nı aktivləşdir" maddələrində iki onay qutusunu yoxlayaraq funksiyanı aktivləşdiririk.

Deaktiv etmək üçün bu onay qutularının işarəsi götürülməlidir.

Opera versiyalarında 10.5-dən 14-ə qədər javascript-in aktivləşdirilməsi və deaktiv edilməsi

Qutuları yoxladıqdan və ya işarəni sildikdən sonra "OK" düyməsini sıxaraq dəyişiklikləri yadda saxlayın.

İndi dəyişikliklərin qüvvəyə minməsi üçün brauzeri yenidən başladın. Bütün javascript funksiyaları sizin üçün əlçatan olacaq.

15 və daha yüksək versiyalar

Opera brauzerinin bu versiyalarında JavaScript-in aktivləşdirilməsi daha sadədir.

Parametrlər pəncərəsini açmaq üçün açıq brauzerdə Alt + P isti düymələr birləşməsini sıxmalısınız. Açılan menyuda "Saytlar" sekmesini açın.

Funksiyanı aktivləşdirmək üçün "JavaScript-in icrasına icazə ver", onu söndürmək üçün isə "JavaScript icrasını qadağan et" qutusunu qoymalısınız.

Bundan sonra dəyişiklikləri saxlamaq və baxdığınız səhifəni F5 düyməsi ilə və ya ünvan çubuğunun sol tərəfindəki müvafiq işarəyə klikləməklə təzələmək üçün “OK” düyməsini sıxmağınız kifayətdir.

Brauzeri yenidən başlatmağa ehtiyac yoxdur.

Safari

Apple mülkiyyət brauzerində JavaScript funksiyasını aktivləşdirmək üçün parametrlərə keçməlisiniz.

Onları açmaq üçün "Safari" düyməsini basmalı və "Parametrlər" i seçməlisiniz.