WebBrowser वर्गातील html विशेषतांसह मूलभूत ऑपरेशन्स. HTML विशेषतांसह सर्वात सामान्य कार्ये

आम्ही तुमच्या लक्षात आणून देत आहोत नवीन अभ्यासक्रमपासून संघकोडबाय - "स्क्रॅचमधून वेब ऍप्लिकेशन्सचे पेनिट्रेशन टेस्टिंग". सामान्य सिद्धांत, पर्यावरण तयारी, निष्क्रीय फझिंग आणि फिंगरप्रिंटिंग, सक्रिय फझिंग, भेद्यता, पोस्ट शोषण, टूलिंग, सोशल इंजिनियरिंग आणि बरेच काही.

html विशेषतांसह काम करणारे वेबब्राउझर

या लेखात मी अनेक दर्शवू इच्छितो साधे ऑपरेशन्ससह HTML विशेषता mi, जे webBrowser क्लास वापरून करता येते. मला आशा आहे की तुम्ही आधीच या वर्गासह किंवा त्याच नावाच्या नियंत्रणासह कार्य केले आहे आणि आधीच माहित आहे आणि . म्हणून, आम्ही त्वरित लेखाच्या मुख्य विषयाकडे वळतो.

HTML विशेषतांसह सर्वात सामान्य कार्ये

तर, प्रथम, विंडोज फॉर्म्स ऍप्लिकेशन तयार करूया, आणि नंतर फॉर्ममध्ये जोडा: एक बटण, एक वेबब्राउझर (wb) नियंत्रण आणि एक मजकूर बॉक्स, ज्यामध्ये आम्ही दस्तऐवजात होणारे बदल प्रदर्शित करू. त्यानंतर आपण एक लहान, साधे तयार करू HTML पृष्ठ, जे आम्ही खालील उदाहरणांसाठी टेम्पलेट म्हणून वापरू.

सर्व काही मिळविण्यासाठी मी येथे कोड ठेवतो जो कोणत्याही उदाहरणाच्या अगदी सुरुवातीला जोडणे आणि कार्यान्वित करणे आवश्यक आहे. HTML घटक"p" टॅगसह.

HtmlElementCollection परिच्छेद; paragraphs = wb.Document.Body.GetElementsByTagName("p");

कृपया हे देखील लक्षात ठेवा की शोधण्यासाठी, तयार करण्यासाठी, बदलण्यासाठी किंवा जोडण्यासाठी वर्ग विशेषताआपल्याला नेहमी वर्गाचे नाव निर्दिष्ट करणे आवश्यक आहे, आपण याबद्दल अधिक वाचू शकता.

जर तुम्हाला तपासण्याची किंवा खात्री करायची असेल तर HTML दस्तऐवजजर काही बदल प्रत्यक्षात घडले असतील, तर कोणत्याही उदाहरणाच्या अगदी शेवटी एक ओळ जोडा जी तुम्हाला बॉडी टॅगची सामग्री प्रदर्शित करण्यास अनुमती देते.

TextBox1.Text = wb.Document.Body.OuterHtml;

प्रक्रिया:

• टॅग केलेले घटक शोधणे p
• HTML विशेषतावर काही क्रिया असलेला कोड
• टेक्स्टबॉक्समध्ये बदल आउटपुट करत आहे

बरं, आता कामांकडे वळूया.

HTML विशेषता कशी जोडायची

IN वेबब्राउझर वर्गअस्तित्वात आहे सार्वत्रिक पद्धत SetAttribute, ज्यासह तुम्ही हे करू शकता: HTML विशेषता तयार करणे, बदलणे, हटवणे किंवा जोडणे. ही पद्धतदोन पॅरामीटर्स घेते: विशेषता नाव आणि त्याचे मूल्य. चला काही सोपी उदाहरणे पाहू.

"p" टॅग केलेल्या घटकामध्ये वर्ग नावाची नवीन विशेषता जोडणे.

//1. आम्ही p //2 टॅग असलेले सर्व घटक शोधत आहोत. क्लास विशेषता फोरच तयार करा आणि जोडा (परिच्छेदांमध्ये HtmlElement par) ( par.SetAttribute("classname", "one"); ) //3. बॉडी टॅगची सामग्री प्रदर्शित करणे

परिणाम

जर घटकामध्ये आधीपासूनच html विशेषता असेल, परंतु त्याचे नाव तुम्ही जोडू इच्छित असलेल्या विशेषताच्या नावापेक्षा वेगळे असेल, तर या प्रकरणात ते देखील तयार केले जाईल आणि जोडले जाईल. नवीन HTMLविशेषता उदाहरणार्थ, आमच्या टेम्पलेटमध्ये एक छोटासा बदल करूया:

चला वरील कोड पुन्हा चालवू आणि खालील परिणाम मिळवा:

जर, नवीन HTML विशेषता जोडताना, नावे जुळत असतील, तर विद्यमान गुणधर्माचे मूल्य बदलते.

चला समान कोड चालवू आणि परिणाम पाहू.

csharp

HTML विशेषता कशी बदलायची

थोडे आधी सांगितल्याप्रमाणे, HTML विशेषता बदलण्यासाठी, तुम्हाला SetAttribute पद्धत देखील वापरावी लागेल. उदाहरणार्थ, टेम्प्लेटमध्ये पुन्हा एक छोटासा बदल करूया:

आणि मग आपण वर्ग गुणधर्माचे वर्तमान मूल्य बदलतो.

फोरच (परिच्छेदांमध्ये HtmlElement par) ( जर (par.GetAttribute("className") == "one") ( par.SetAttribute("वर्गनाव", "दोन"); ) )

चेक इन करा या उदाहरणातफक्त ते दाखवण्यासाठी वापरले जाते, उदाहरणार्थ, "p" टॅग असलेल्या घटकामध्ये अनेक गुणधर्म असतील आणि तुम्हाला त्यापैकी एक विशिष्ट शोधण्याची आवश्यकता असेल तर ते करणे फायदेशीर ठरेल. या उदाहरणात, चेक वगळला जाऊ शकतो.

जर तुम्हाला विशेषता नाव बदलायचे असेल तर तुम्हाला प्रथम तयार करणे आवश्यक आहे नवीन गुणधर्म, आणि नंतर जुने हटवा किंवा त्याउलट.

HTML विशेषता कशी काढायची

HTML विशेषता काढून टाकण्यासाठी, तुम्हाला दुसरे पॅरामीटर म्हणून SetAttribute पद्धतीमध्ये रिक्त मूल्य पास करणे आवश्यक आहे, उदाहरणार्थ, पुन्हा आम्ही आमचे टेम्पलेट जास्त बदलणार नाही.

फोरच (परिच्छेदातील HtmlElement par) ( par.SetAttribute("संरेखित", "");)

परिणाम:

विशेषता मूल्य कसे मिळवायचे

मिळविण्यासाठी HTML मूल्यविशेषता, तुम्ही GetAttribute पद्धत वापरणे आवश्यक आहे, ज्यामध्ये तुम्ही विशेषता नाव पास करणे आवश्यक आहे. उदाहरणार्थ, टेम्पलेटमध्ये एक छोटासा बदल करूया.

आणि मग आपल्याला विशेषता मूल्य मिळते.

फोरच (परिच्छेदातील HtmlElement par) ( string valueAtr = par.GetAttribute("align"); )

निकाल: डावीकडे.

हे सर्व आहे, जर तुम्हाला काही प्रश्न असतील तर त्यांना टिप्पण्यांमध्ये सोडा.

वास्तविक, फ्लास्कवर वेबसाइट्स कशा लिहिल्या जातात याबद्दल परिचित होण्यासाठी, मी एक छोटा लेख लिहिण्याचा निर्णय घेतला.

मी वापरेन:

* वेब फ्रेमवर्क - फ्लास्क (http://flask.pocoo.org)

* डेटाबेस - mongodb (http://www.mongodb.org)

बहुतेक लोक विंडोज वापरतात ही वस्तुस्थिती लक्षात घेऊन मी सर्व चरणांचे वर्णन करतो.

प्रथम, आमचे वेब फ्रेमवर्क आणि डेटाबेस काय आहेत ते परिभाषित करूया.

हे एक मायक्रोफ्रेमवर्क आहे, याचा अर्थ असा की त्यात अनावश्यक काहीही नाही (ठीक आहे, जवळजवळ काहीही अनावश्यक नाही).

बरं, त्यात खालील गोष्टी आहेत:

* टेम्पलेट इंजिन (जिंजा2)

* राउटर (वर्कझेग)

* अंगभूत डीबगर (मौल्यवान वस्तू)

* तसेच, आणि इतर लहान वस्तू.

हा एक दस्तऐवज-देणारं डेटाबेस आहे. सोपी, विश्वासार्ह, छान क्वेरी भाषेसह आणि पायथनसाठी एक अतिशय सुंदर ड्रायव्हर (C, C#, Java, Ruby, इ. साठी देखील उपलब्ध). तसेच चांगले कार्य करणारी अनुक्रमणिका, जावास्क्रिप्टमधील नकाशा/कमी आणि उत्कृष्ट दस्तऐवजांसह इतर वस्तू (इंग्रजीमध्ये, अर्थातच).

सर्व चांगल्या गोष्टी स्थापित करत आहे

प्रथम, Python2.7 डाउनलोड आणि स्थापित करा (फ्लास्क अद्याप python3 सह कार्य करत नाही). नंतर सेटअप टूल्स (उर्फ easy_install) स्थापित करा, ते येथून डाउनलोड करा. मग आम्ही कमांड लाइन (कन्सोल) लाँच करतो आणि त्या बदल्यात खालील कमांड कार्यान्वित करतो:

easy_install फ्लास्क

फ्लास्क-मोंगोइंजिन सुलभ_स्थापित करा

इतर सर्व अवलंबित्व स्वतःची काळजी घेतील.

आता फक्त mongodb स्थापित करणे बाकी आहे. आम्हाला ते 32 किंवा 64 डाउनलोड करून मिळते बिट आवृत्तीअनुक्रमे (तत्त्वतः, काहीही करेल, परंतु 32-बिटमध्ये 2 गीगाबाइट्सची डेटाबेस आकार मर्यादा आहे)

नंतर ते एका निर्देशिकेत अनपॅक करा (उदाहरणार्थ, D:\mongodb\).

यानंतर आम्ही पुन्हा परत येतो कमांड लाइनआणि हे करा:

mongod.exe --install --logpath "D:\mongodb\mongod.log" --dbpath=D:\mongodb\data\db

नेट स्टार्ट "मोनोग डीबी"

तुमच्याकडे आता मोंगो डीबी नावाची सेवा चालू आहे. आपण ते काढू इच्छित असल्यास, फक्त कन्सोलमध्ये हे लिहा:

mongod.exe --remove

तेच, आता सर्वकाही स्थापित झाले आहे, आम्ही व्यवसायात उतरू शकतो. आम्ही ते शक्य तितक्या सोप्या आणि त्वरीत लिहू, त्यामुळे जवळजवळ सर्व कोड एका फाईलमध्ये असतील (होय, होय, मला माहित आहे की हे चुकीचे आहे, परंतु हे फक्त एक उदाहरण आहे :), टेम्पलेट्सचा अपवाद वगळता.

प्रकल्पाची रचना तयार करणे

कुठेतरी "मायब्लॉग" निर्देशिका तयार करा. त्याच्या आत, "टेम्पलेट" निर्देशिका तयार करा, जिथे आमचे टेम्पलेट तुम्हाला त्रास न देता जगतील.

सर्व काही तयार आहे!

कोड

आता तुमचे आवडते उघडा मजकूर संपादक(कोणीही करेल) आणि प्रारंभ करा.

प्रथम आम्हाला सर्व काही आयात करावे लागेल जे आमच्यासाठी उपयुक्त असेल. हे करूया.

फ्लास्क इंपोर्ट फ्लास्क, render_template, url_for, विनंती

flask.ext.mongoengine वरून MongoEngine आयात करा

चला आमच्या अनुप्रयोगाचे उदाहरण तयार करूया!

ॲप = फ्लास्क(__नाव__)

मग आम्ही डेटाबेस आणि आमच्या अनुप्रयोगाच्या सेटिंग्ज प्रविष्ट करू

app.config["MONGODB_DB"] = "मायब्लॉग"

app.config["MONGODB_HOST"] = "127.0.0.1"

टेम्प्लेट्स डिरेक्टरीमध्ये base.html नावाची फाईल आहे - ती इतर सर्व फाइल्ससाठी बेस दर्शवते. ते, ढोबळमानाने, त्यातून वारशाने मिळालेले आहेत.

हे दोन ब्लॉक्स परिभाषित करते - शीर्षक आणि सामग्री. खालील साध्या वाक्यरचना वापरून फाइलमध्ये ब्लॉक्स कुठेही परिभाषित केले जाऊ शकतात: (% ब्लॉक ब्लॉकनेम %)(% एंडब्लॉक %).

थोडे खोलवर, पोस्ट निर्देशिकेत तीन फाइल्स आहेत (ओहो!):

ते सर्व एकमेकांशी बरेच साम्य आहेत. ते एका ओळीने सुरू होतात - (% "base.html" % वाढवते), जे टेम्प्लेट इंजिनला कळू देते की हा टेम्प्लेट base.html चा विस्तार करतो

ब्लॉकमध्ये (शीर्षक किंवा सामग्री) लिहिण्यासाठी, समान वाक्यरचना वापरली जाते (%% blockName%) येथे तुमचा मजकूर किंवा दुसरे काहीतरी आहे (% endblock%). तुम्ही नवीन ब्लॉक्स परिभाषित करू शकता आणि या फाईलमधून काहीतरी वेगळे करू शकता :)

पण हे सगळे लाड. तुम्हाला आठवत असेल की, render_template कोडवर कॉल करताना, आम्ही ते सर्व पोस्टची यादी (post_list मध्ये) किंवा एक विशिष्ट पोस्ट (post_detail मध्ये) (नावाचे) पॅरामीटर म्हणून पास केली. आमचे टेम्प्लेट इंजिन या वस्तूंचे काय करते ते पाहू.

तर, फाईल templates/posts/list.html पाहू

तिथे काय विशेष आहे? बरं, काहीही नाही, त्याशिवाय हा तुकडा आहे:

येथे आम्ही फक्त सूचित करतो की कोणत्या फंक्शनसाठी आम्हाला लिंक प्राप्त करायची आहे (पोस्ट_तपशीलासाठी) आणि आम्ही पॅरामीटर म्हणून काय पास करू इच्छितो (स्लग = post.slug).

सर्व. templates/posts/detail.html मध्ये तुम्हाला नवीन काहीही सापडणार नाही, कारण ब्लॉकची ही आवृत्ती मध्यम आणि सोपी आहे.

आणि फाईल templates/posts/add.html मध्ये फक्त फॉर्म आहे आणि फॉर्मशिवाय काहीही नाही.

मग आपण काय संपवतो?

परिणामी, आमच्याकडे ब्लॉगसाठी टेम्पलेट आहे. हे लहान आहे, परंतु ते कार्यरत आहे. अद्याप कोणतीही अधिकृतता प्रणाली नाही, कोणतीही सुंदरता नाही, टिप्पणी प्रणाली नाही. होय, काहीही नाही, अगदी सामान्य डिझाइन देखील नाही :). परंतु सर्व काही एका ढिगाऱ्यात टाकले जाते (टेम्पलेट वगळता, तुम्हाला विवेक असणे आवश्यक आहे :) आणि खूप कमी ओळी घेतात (61).

अरे हो, मी ही संपूर्ण गोष्ट कशी सुरू करावी हे लिहायला विसरलो:

पुन्हा कन्सोलवर जा (हाहा, Windowsoids रागावले आहेत, Linuxoids त्यांचे पंख घासत आहेत), प्रकल्प निर्देशिकेवर जा आणि "python main.py" लिहा (किंवा तुमच्या फाईलच्या नावाने main.py बदला.

व्होइला, सर्वकाही कार्य केले पाहिजे.

ब्राउझरमध्ये http://127.0.0.1:5000/ या पत्त्यावर गेल्यास अभिमानास्पद शिलालेख पोस्ट सूचीसह रिक्त पृष्ठ मिळेल. हे ठीक आहे, http://127.0.0.1:5000/posts/add/ वर जा आणि पोस्ट जोडण्याचा प्रयत्न करा.

पुढे, याबद्दल काहीही करण्यास सक्षम होण्यासाठी, ही बदनामी दूर करणे आवश्यक आहे वेगळ्या फायली, अधिकृतता प्रणाली आणि टिप्पण्या संलग्न करा, प्रशासक भाग आणि वापरकर्ता प्रोफाइल जोडा (कदाचित काही oAuth अधिकृतता). परंतु हे सर्व नंतरचे आहे आणि एकाच वेळी नाही.

स्वारस्य असल्यास, प्रथम या राक्षसाकडे काय वळायचे ते लिहा. मी अधिक वेळा लिहिण्याचा प्रयत्न करेन :)

आपले लक्ष दिल्याबद्दल धन्यवाद.

धडा 9. JavaScript: लाड करणे की गरज?

हा प्रश्न अशा प्रकारे उपस्थित केला जात नाही कारण पुस्तकाच्या लेखकाकडे आत्मभोगाच्या विरोधात काहीही आहे. काही समजुतींनुसार, आपले संपूर्ण जग लाड करणे, क्षणभंगुर लहरीपणा, काही शक्तिशाली मनाचा खेळ याशिवाय दुसरे काही नाही. कधीकधी इंटरनेटवर आपल्याला जावास्क्रिप्टमध्ये लिहिलेल्या बऱ्याच मनोरंजक गोष्टी आढळतात, उदाहरणार्थ, टेट्रिसचा खेळ. पण आमच्या पुस्तकाची कामे, विटाप्रमाणे कठोर आणि साधी आहेत, त्यांना काहीतरी वेगळे आवश्यक आहे; वेब पृष्ठे पाहणाऱ्या लोकांच्या फायद्याच्या आणि सोयीच्या दृष्टिकोनातून त्याच्या शैलीसाठी एचटीएमएल स्क्रिप्टच्या समस्यांचे कव्हरेज आवश्यक आहे.

सर्वात महत्वाची स्क्रिप्ट

मागील प्रकरणातील सारण्यांसह आमच्या संघर्षाने html लेखकांच्या सर्वात महत्वाच्या समस्यांपैकी एक उघड केली: आम्ही जे काही लिहितो ते सर्व वापरकर्त्यांद्वारे आदर्श वातावरणात नाही तर विशिष्ट ब्राउझरवर पाहिले जाईल (इंग्रजी ब्राउझर - "ब्राउझर", ब्राउझर) . म्हणजेच, सर्व तपशील - HMTL, CSS - काही विशिष्ट "सरासरी" नियमांचा संच आहे पाहिजेकाम (शिफारशी आहेत). परंतु वेब ब्राउझर डेव्हलपर्सना आम्ही लिहित असलेल्या html टॅगचा अर्थ कसा लावायचा याबद्दल त्यांच्या स्वतःच्या कल्पना आहेत आणि CSS नियम.

म्हणून, कोणतीही वेबसाइट जी त्याच्या पृष्ठांवर सक्रियपणे CSS वापरते ती पृष्ठांमध्ये एक स्क्रिप्ट घालते जी वापरकर्ता कोणत्या ब्राउझरवर पृष्ठ पाहत आहे हे निर्धारित करण्याचा प्रयत्न करते. तथापि, हे नेहमीच समस्येचे निराकरण करत नाही. ब्राउझरचा प्रकार नेमका कसा ठरवावा याबद्दल लोक बर्याच काळापासून वाद घालत आहेत, कारण सर्व पद्धती तितक्याच चांगल्या नसतात आणि काही ब्राउझर देखील काही कारणास्तव इतरांची तोतयागिरी करण्याचा प्रयत्न करतात (चेकिंग स्क्रिप्टला मुद्दाम चुकीची माहिती देतात).

ब्राउझर माहिती कशी मिळवायची ते येथे आहे:

var एजंट = navigator.userAgent.toLowerCase();

document.write(एजंट);

हा कोड browsr01.html फाईलवर लिहा (फाइल omne\js1 फोल्डरमधील CD वर आहे आणि येथे देखील आहे: omne/js1) आणि फाइल ब्राउझरमध्ये उघडा. इंटरनेट एक्सप्लोरर आवृत्ती 5 तुमच्या पृष्ठावर खालील ओळ मुद्रित करेल:

mozilla/4.0 (सुसंगत; msie 5.01; windows nt 5.0) ब्राउझर Mozilla Firefox

- दुसरा:

mozilla/5.0 (windows; u; windows nt 5.0; ru; rv:1.8) gecko/20051111 firefox/1.5 आम्ही दोन पाहत आहोतवेगवेगळ्या ओळी आणि, त्यांच्या सामग्रीचे विश्लेषण केल्यावर, आम्हाला फरक आढळतो. तुम्ही JavaScript मध्ये लिहिलेल्या प्रोग्रामचा वापर करून अंदाजे समान गोष्ट करू शकता: तुम्हाला ते करणे आवश्यक आहेविशेष कार्य विश्लेषण करणे,परिणामी स्ट्रिंग, जी आम्ही एजंट व्हेरिएबलमध्ये जोडली. या फंक्शनला (खरोखर फंक्शन नाही, तर स्ट्रिंग ऑब्जेक्टची पद्धत, परंतु सध्या काही फरक पडत नाही) याला इंडेक्सऑफ() म्हणतात आणि हे असे वापरले जाते: String1.indexOf(String2). “लाइन1” ही ओळ आहे ज्यामध्ये आपल्याला वर्णांचा क्रम शोधण्याची आवश्यकता आहे; "Line2" हा अक्षरांचा क्रम आहे जो आपल्याला "Line1" मध्ये शोधायचा आहे. निवडणे महत्वाचे आहे योग्य शब्दशोधण्यासाठी आपण शोधल्यास, उदाहरणार्थ, शब्द mozilla, नंतर आम्ही फायरफॉक्स मधून IE वेगळे करू शकणार नाही, कारण दोन्ही ओळींमध्ये शोधलेला शब्द आहे. म्हणून, IE ओळखण्यासाठी, आम्ही ब्राउझरच्या नावातील शब्द शोधू msie, आणि Firefox किंवा SeaMonkey ओळखण्यासाठी - शब्द गेको. मूळ स्क्रिप्ट कोडमध्ये खालील ओळी जोडा आणि सेव्ह करा नवीन मजकूर browsr02.html फाइलमध्ये:

जर (agent.indexOf("msie") > -1) document.write("
इंटरनेट एक्सप्लोरर"); जर (agent.indexOf("gecko") > -1) document.write("
गेको");

मध्ये browsr02.html फाईल उघडण्याचा प्रयत्न करा भिन्न ब्राउझरआणि पृष्ठावर काय लिहिले आहे ते पहा.

ब्राउझर ओळख केवळ अतिशय जटिल वेब डिझाइन दुरुस्त करण्यासाठीच नाही तर सामान्यांसाठी देखील आवश्यक आहे, अजिबात क्लिष्ट html लेआउट (पृष्ठावर मजकूर आणि प्रतिमा ठेवणे) नाही. भिन्न ब्राउझर अगदी साधे तुकडा वेगळ्या पद्धतीने प्रदर्शित करू शकतात. समजा आम्ही फ्रेम करण्याचा निर्णय घेतो विशिष्ट आकारया पुस्तकातील एक शीर्षक आणि एक परिच्छेद, आणि प्राथमिक डीबगिंगमध्ये फायरफॉक्सचा वापर केला. काही सोप्या कामानंतर (परिणाम म्हणजे browsr03.html आणि js1.css फाइल्स), या फायरफॉक्समध्ये आम्हाला काय मिळवायचे आहे आणि शांत व्हायचे आहे ते पाहतो:

धडा 1: तुमचे पहिले HTML पृष्ठ तयार करणे

मग आम्ही (फक्त बाबतीत - शेवटी, पृष्ठावर काहीही नव्हते अशा!) आम्ही तीच फाइल इंटरनेट एक्सप्लोररमध्ये उघडतो, आणि अचानक आम्हाला दिसते की आमचे साधी मांडणीदोन परिच्छेदांमधून "कुठेतरी गेले":

धडा 1: तुमचे पहिले HTML पृष्ठ तयार करणे

वेबसाइट तयार करण्यापासून आणि इंटरनेटवर टाकण्यापासून तुम्हाला काय रोखत आहे? या प्रश्नाची बरीचशी उत्तरे आहेत. अधिक तंतोतंत, इंटरनेट पृष्ठ तयार करणे आपल्यासाठी एक आश्चर्यकारकपणे कठीण कार्य का वाटते याची अनेक कारणे आपल्याला सापडतील.

ही फार मोठी समस्या आहे असे वाटत नाही - शीर्षकाने दोन ओळी घेतल्या, परिच्छेदाचा मजकूर थोडासा बदलला... परंतु आम्हाला अस्वस्थ वाटेल: असे दिसून आले की आम्ही आत्मविश्वासाने सामग्री पृष्ठावर ठेवू शकत नाही जसे आम्ही करतो. गरज आहे; शिवाय, अधिक सामग्री असल्यास, पृष्ठाचे स्वरूप लक्षणीय बदलू शकते.

आमचा तुकडा ब्राउझरमध्ये वेगळ्या प्रकारे प्रदर्शित केला जातो कारण इंटरनेट एक्सप्लोरर रुंदीची गणना करतो ब्लॉक घटक एकत्रपॅडिंग व्हॅल्यू आणि बॉर्डर जाडीसह आणि गेको (आणि ऑपेरा) ब्लॉकच्या आकारातून पॅडिंग आणि बॉर्डर वगळतात. js1.css शैली फाइलमध्ये, आम्ही div.b1 विभागाची रुंदी 29em वर सेट केली आणि जेव्हा आम्ही या विभागात सीमा आणि पॅडिंग जोडले, तेव्हा Gecko पुनरावलोकनकर्त्यांनी वापरण्यायोग्य क्षेत्राची रुंदी समान - 29em आणि 1em पॅडिंग जोडली. आणि सीमा जाडी 0.4 em सुमारेविभाग, ज्यामुळे त्याची एकूण रुंदी 2.8em ने वाढते. इंटरनेट एक्सप्लोररने फ्रेम पिळून काढली दिलेली रुंदी 29em, ज्याने प्रत्यक्षात वापरण्यायोग्य क्षेत्राची रुंदी 2.8em ने कमी केली. या ओळी आहेत आणि "चला जाऊया"...

साहजिकच, div.b1 विभागाची रुंदी फ्रेममध्ये जाऊन 2.8em पॅडिंग करून, म्हणजेच 31.8em वर सेट करून ही बाब दुरुस्त केली जाऊ शकते. मग IE मध्ये शीर्षक एका ओळीवर बसेल, आणि उर्वरित मजकूर हेतूप्रमाणे दिसेल. परंतु गेकोमध्ये, विभागाची रुंदी देखील 2.8em ने वाढेल (आणि ते आधीच सामान्य होते) - आणि रेषा पुन्हा "रेंगाळतील". अंदाजे अशा प्रकरणांसाठी, एक उपाय आहे - पृष्ठाशी दुवा साधण्यासाठी स्क्रिप्ट वापरणे भिन्नब्राउझर प्रकारावर अवलंबून CSS फाइल्स. एक नवीन तयार करा शैली फाइल js1.css सारख्याच सामग्रीसह js2.css, नंतर त्यातील div.b1 रुंदी 29em वरून 31.8em वर बदला. तसेच js1.css फाईल (गेको ब्राउझरसाठी) बॉडी फॉन्ट-आकार नियमांमध्ये जोडा :16px- हा IE मधील डीफॉल्ट फॉन्ट आकार आहे, समान आकार इतर ब्राउझरमध्ये असावा (त्यांच्यामधील डीफॉल्ट मूल्य IE मधील मूल्याशी जुळत नाही). मग तयार करा नवीन फाइल browsr03.html प्रमाणेच सामग्रीसह browsr04.html, आणि browsr04.html फाइलमधील स्क्रिप्ट खालीलप्रमाणे बदला:

var एजंट = navigator.userAgent.toLowerCase();

जर (agent.indexOf("gecko") > -1) document.write("");

जर (agent.indexOf("msie") > -1) document.write("");

else document.write(""); ही एक पूर्णपणे कार्यरत स्क्रिप्ट आहे; आपण आपल्या वेबसाइटच्या पृष्ठांवर वापरण्यासाठी आधार म्हणून वापरू शकता.तिला संबंधित CSS फाइलमध्ये सापडलेल्या नियमांनुसार. जेव्हा ब्राउझरला मार्क्स सापडतात ... HTML पृष्ठाच्या मजकुरात, या चिन्हांमधील प्रत्येक गोष्ट त्यामध्ये लिहिलेल्या कमांड म्हणून मानली जाते JavaScript, आणि या आदेशांची अंमलबजावणी करण्याचा प्रयत्न करते.

उदाहरणार्थ, जर आपण स्क्रिप्ट कमांड डॉक्युमेंट डॉक्युमेंट लिहितो. (“हॅलो!”) html मजकूरात (स्क्रिप्टच्या सुरुवातीच्या आणि शेवटच्या संबंधित पदनामांमध्ये), ब्राउझर उघडताना “हॅलो!” हा शब्द प्रदर्शित करेल दस्तऐवज.

तुम्ही ब्राउझरला पेजच्या मजकुरात पेजला लिंक करणारी अदृश्य एंट्री टाकण्यास भाग पाडू शकता. CSS फाइल. ही प्रविष्टी त्याच्या स्वभावानुसार अदृश्य आहे: ब्राउझरला टॅगमध्ये संलग्न मजकूर एक विशिष्ट सूचना म्हणून हाताळण्यासाठी प्रशिक्षित केले जाते जे स्क्रीनवर प्रदर्शित करण्याचा हेतू नाही. स्क्रीनवर अदृश्य असलेली JavaScript कमांड पृष्ठाच्या मजकुरात अदृश्य सूचना समाविष्ट करते - आणि पृष्ठाचे स्वरूप बदलते. हे सोपे आहे.

समाधानाचे सौंदर्य

HMTL, JavaScript, तसेच रशियन भाषेत, तुम्ही समान वस्तूंचे वेगवेगळ्या प्रकारे वर्णन करू शकता. आम्ही या पुस्तकातील शैलीत्मक सूक्ष्मतेमध्ये जाण्याची योजना करत नाही, म्हणून आम्ही "वेगळ्या पद्धतीने" संकल्पना निर्दिष्ट करण्याचा आणि संकुचित करण्याचा प्रयत्न करू. आम्ही ते गृहीत धरू भिन्ननिर्णय प्रामुख्याने दोन प्रवृत्तींमधील संघर्षातून उद्भवतात, दोन नेहमी जागरूक नसलेल्या मानवी आकांक्षा: 1) मानसिक प्रयत्न वाचवणे; २) भौतिक बचत. उदाहरणार्थ, माझ्या डोक्यात (किंवा माझ्या आत्म्यात?) असा संघर्ष सुरू झाला त्याच क्षणी मी या पुस्तकासाठी एक स्क्रिप्ट लिहिली जी मला ब्राउझरवर अवलंबून पृष्ठ डिझाइन बदलण्याची परवानगी देते.

मी पटकथा स्वतःच लिहिली (कारण प्रकाशकाला पुस्तकाच्या मजकुराची घाई होती). पण मग माझा विवेक मला त्रास देऊ लागला आणि मी घाई असूनही स्क्रिप्टमध्ये थोडी सुधारणा करण्याचा निर्णय घेतला. म्हणजेच लहान करा. कारण घाईत विचार करायला वेळ नव्हता, आणि मानसिक प्रयत्न वाचवण्यासाठी मला “साधे”, बाह्यतः स्पष्ट, पण सर्वात इष्टतम मार्गाने लिहावे लागले.

जर तुम्ही browsr04.html फाईलमधील स्क्रिप्ट मजकूर अधिक बारकाईने पाहिला, तर तुम्हाला "document.write("");" ही ओळ लक्षात येईल. जवळजवळ बदल न करता तीन वेळा पुनरावृत्ती होते. या तीन ओळी फाईलच्या नावात फक्त एका संख्येत भिन्न आहेत: js1.css - js2.css. प्रश्न उद्भवतो: स्क्रिप्टच्या शेवटी ही ओळ फक्त एकदाच लिहिणे शक्य आहे का आणि काही चतुर मार्गाने संख्या सादर करणे शक्य आहे जेणेकरुन ती परिस्थितीनुसार रेकॉर्डिंग दरम्यान थेट बदलेल. उत्तर: म्हणूनच व्हेरिएबल्स अस्तित्वात आहेत.

आपल्या स्क्रिप्टच्या सुरुवातीला var हा जादूचा शब्द वापरून व्हेरिएबल घोषित करू i:

var मी; (प्रत्येक "कृती" मध्ये JavaScript स्क्रिप्टचिन्हासह समाप्त करणे आवश्यक आहे; - अर्धविराम).

फाईलवर निकाल मुद्रित करणारी अगदी शेवटची ओळ यासारखी दिसेल:

Document.write("");

+ साइन इन करा या प्रकरणातएका ओळीत मजकूराचे अनेक वेगवेगळे तुकडे जोडते. आम्ही, उदाहरणार्थ, "2 + 2" स्ट्रिंग लिहिल्यास, JavaScript ब्राउझरला "4" प्रदर्शित करण्यास भाग पाडेल ("22" नाही). परंतु आम्ही "js" + 2 + ".css" लिहितो आणि आम्ही "js2.css" ने समाप्त करतो. अवतरण कसे ठेवले जातात याकडे लक्ष द्या. JavaScript मधील सर्व मजकूर स्ट्रिंग अवतरणांमध्ये बंद केल्या पाहिजेत - मग ते दुहेरी किंवा एकल असले तरीही. आम्ही दुहेरीची निवड केली. पण परिणामी ओळीत HTML भाषाआम्हाला कोट्स देखील आवश्यक आहेत आणि जर आम्ही "document.write(" लिहिण्याचा प्रयत्न केला तर