Глава 12JavaScript и Browser
В следващата част на тази книга ще говорим за уеб браузъри. Без уеб браузъри, нямаше да има JavaScript. А дори и да имаше, никой никога нямаше да му обръща внимание.
Уеб технологиите от самото начало са децентрализирани, не само технически но и по начина, по който те се развиват. Различните доставчици на браузъри добавят нова функционалност по специални, а понякога зле обмислени начини, които в крайна сметка се приемат от другите и най-накрая се утвърждават, като стандарт.
Това едновременно е благословия и проклятие. От една страна няма овластевена централна контролна система, но има подобрени различни страни, които работят в свободно сътрудничество (или понякога с открита враждебност). От друга страна случайният начин, по който е разработен уеб означава, че получената система не е точно блестящ пример за вътрешна съгласуваност. В действителност някои части от нея са направо разхвърляни и объркващи.
Мрежи и Интернет
Компютърните мрежи са от около 1950г.насам. Ако свържете с кабели два или повече компютъра и им позволите да изпращат данни назад и напред по тези кабели, можете да направите много прекрасни неща.
Ако свързването на две машини в една сграда ни позволява да правим чудесни неща, то свързването на машините по цялата планета трябва да бъде още по-добре. Технологията за започване на прилагането на тази идея е разработена още през 1980г. и резултата на тази мрежа е наречен Интернет.
Компютъра може да използва тази мрежа да прехвърля битове на друг компютър. За да възникне някаква ефективна комуникация от това прехвърляне, компютрите от двата края трябва да знаят, какво представлява бит. Смисъла на всяка подадена последователност от битове зависи изцяло от вида на нещото, което се опитват да изразят и на механизма за кодиране, който се използва.
Мрежовия протокол описва стила на комуникация по мрежата. Има протоколи за изпращане на електронна поща, за извличане на имейли, за споделяне на файлове или дори за контролиране на компютри, които са били заразени от злонамерен софтуер.
Например един прост чат протокол може да се състои от един компютър, който изпраща битове, които представляват текста “ЧАТ?”, а другата машина да отговари с “OK!” за да потвърди, че е разбрала протокола. След това те могат да пристъпят към изпращане на всеки друг текстови string , прочитат текста изпратен от другия по мрежата и показват, каквото получават на своите екрани.
Повечето протоколи са построени върху други протоколи. Нашият пример за чат протокол третира мрежата, като streamlike устройство, в което можете да поставите битовете и те да достигнат правилната дестинация в правилния ред. Осигуряването на тези неща е вече доста труден технически проблем.
Протоколът за управление на предаването Transmission Control Protocol (ТСР) е протокол, който решава този проблем. Всички устройства с Интернет връзка “говорят” чрез него и повечето комуникации по Интернет са построени върху него.
ТСР връзката работи, както следва: един компютър трябва да чака или ослушва (listening) за други компютри, които да започнат да говорят с него. За да бъде в състояние да слуша различните видове комуникации едновременно на една машина, всеки слушател има редица номера (наречени портове (port)) свързани с него. Повечето протоколи определят, кой порт трябва да се използва по подразбиране. Например, когато искаме да изпратим имейл използвайки протокола SMTP , машината чрез която можем да го изпратим очаква да се слуша на порт 25.
Друг компютър след това може да установи връзка чрез свързване към целевата машина, използвайки правилния номер на порт. Ако целевата машина може да се достигне и слуша на този порт връзката е създадена успешно. Компютърът слушател се нарича сървър (server), а компютъра за свързване се нарича клиент (client).
Такава връзка действа, като двупосочен канал, по които могат да се движат битовете, а машините в двата края поставят данните в него. След като, битовете се прехвърлят успешно те могат да се прочетат отново от машината от другата страна. Това е удобен модел. Може да се каже, че ТСР осигурява абстракция на мрежата.
Мрежата
World Wide Web (да не се бърка Интернет) е набор от протоколи и формати, които ни позволяват да посетим уеб страници в браузъра. Web (част от името) се отнася до факта, че тези страници могат лесно да се свързват една към друга и по този начин са свързани в огромна мрежа, през която потребителите могат да се движат.
За да добавите съдържание към уеб, всичко което трябва да направите е да свържете устройството към Интернет и да слушате на порт 80, като използвате Hypertext Transfer Protocol (HTTP). Този протокол позволява на други компютри да искат документи по мрежата.
Всеки документ в Интернет е кръстен от Uniform Resource Locator (URL), който изглежда така:
./12_browser.html | | | | protocol server path
Първата част казва, че този URL използва http:// протокол (за разлика от кодирания HTTP, който се нарича https://). После идва частта, която идентифицира от кой сървър се иска документа. Последно е string пътя, който идентифицира интересуващия ни конкретен документ (или ресурс).
Всяка машина свързана към Интернет получава уникален IP address, който изглежда нещо като 37.187.37.82. Можете да го използвате директно, като сървър частта на URL. Но списъци с повече или по-малко случайни числа са трудни за запомняне и неудобни за писане, така че можете да регистрирате име на домейн към точката за конкретна машина или набор от машини. Аз регистрирах eloquentjavascript.net към точката на IP адреса на една машина и по този начин мога да използвам името на този домейн да служи, като уеб страница.
Ако изпишете предишния URL в адресната лента на браузъра си, той ще се опита да извлече и покаже документа на този URL. Първо вашия браузър трябва да разбере, към какво се отнася адреса на eloquentjavascript.net. След това с помощта на HTTP протокола ще направи връзка към сървъра на този адрес и да пита за ресурс /12_browser.html.
Ще разгледаме по-отблизо HTTP протокола в Глава 17.
HTML
HTML е съкращение на Hypertext Markup Language, което е формата на документа използван за уеб страници. Един HTML документ съдържа текст, като tags (етикети), които дават структура на текста описващ неща, като връзки, параграфи и позиции.
Един прост HTML документ изглежда така:
<html> <head> <title>My home page</title> </head> <body> <h1>My home page</h1> <p>Hello, I am Marijn and this is my home page.</p> <p>I also wrote a book! Read it <a href="http://eloquentjavascript.net">here</a>.</p> </body> </html>
Текстове обвити в ъглови скоби (<
и >)предоставят информация за структурата на документа. Другият текст е просто обикновен текст.
Документа започва с <!doctype html>, който казва на браузъра да го тълкува, като модерен HTML, за разлика от различните версии, които са били в употреба в миналото
HTML документа има head (глава) и body (тяло). Главата съдържа информация за документа, а тялото самия документ. В този случай, първо декларираме титлата на този документ title ''My home page'', а след това заглавието със <h1>, което означава „заглавие 1”, а от <h2> до <h6> още второстепенни заглавия и два параграфа <p>.
Таговете идват в няколко форми. Един елемент, като тяло, параграф или линк, започват с отварящ таг, като <p>и завършват със затварящ </p>. Някои отварящи тагове, например като този за връзка (<a>), съдържат допълнителна информация под формата на name="value". Те се наричат attributes (атрибути). В този случай съдържа местоположението на връзката href="http://eloquentjavascript.net", където href се отнася за “hypertext reference”.
Някои видове тагове не прилагат нищо и следователно не трябва да бъдат затваряни. Ето един пример: <img src="http://example.com/image.jpg">, който ще покаже изображение намерено на този източник URL.
За да включим ъглови скоби в текста на документ, въпреки че те имат специално значение в HTML, трябва да бъде въведена още една форма на специална нотация. Обикновената отваряща ъглова скоба се изписва така: (< - “по-малко от”), а затварящата се изписва така: (> - “по-голямо от”). В HTML характера амперсанд (&) последван от дума и точка и запетая (;) се нарича entity и ще бъде заменен от характера, който го кодира.
Това е аналогично на начина, по който се използват обратно наклонените черти в strings на JavaScript. Тъй като, този механизъм използва характера със специално значение амперсанд (&), той също се нуждае да бъде ескейпнат с &. Вътре в атрибута, където е обвит с двойни кавички, " може да се използва за да се вмъкне действителен цитат характер.
HTML анализира синтактични грешки по изключително толерантен начин. Когато липсват етикети, където трябва да има, браузърът ги възстановява. Начинът, по който се прави е стандартизиран и може да разчитате на всички съвременни браузъри да го правят по един и същи начин.
Следният документ ще се третира точно, както онзи показан по-рано:
<title>My home page</title> <h1>My home page</h1> <p>Hello, I am Marijn and this is my home page. <p>I also wrote a book! Read it <a href=http://eloquentjavascript.net>here</a>.
Таговете <html>, <head> и <body> липсват напълно. Браузърът знае, че <title> принадлежи на head, а <h1> на body. Освен това не съм затворил параграфите изрично, тъй като с откриване на нов параграф или се слага край на документа или ще ги затвори мълчаливо. Кавичките около линка за връзка също са изчезнали.
Тази книга обикновено ще пропуска таговете <html>, <head> и <body> от примерите, за да ги държи кратки и елементарни. Но ще затваря тагове и ще слага кавички около атрибутите.
Също обикновено ще се пропуска и DOCTYPE. Но това не трябва да се разглежда, като насърчаване и вие да пропускате декларацията DOCTYPE. Браузърите често правят смешни неща, когато ги забравяме. Трябва да си мислите, че DOCTYPE присъства в примерите дори ако не е реално показан в текста.
HTML и JavaScript
В контекста на тази книга най-важният HTML таг е <script>. Този маркер ни позволява да включим парче JavaScript в документа
<h1>Testing alert</h1> <script>alert("hello!");</script>
Този скрипт ще заработи веднага след, като се срещне <script> тага от браузъра, когато чете HTML. На страницата показана по-рано ще се появи един alert диалогов прозорец, когато се отвори.
Включването на големи програми директно в HTML документа често е непрактично. На тага <script> може да бъде даден src атрибут, който да добави скрипт файл (текстов файл,съдържащ програма на JavaScript ) от URL.
<h1>Testing alert</h1> <script src="code/hello.js"></script>
Файлътcode/hello.js съдържа същата проста програма alert("hello!"). Когато HTML страницата реферира различни URL адреси, като част от себе си, например файл с изображение или скрипт - уеб браузъра ще ги изтегли незабавно и ще ги включи в страницата.
Маркерът скрипт трябва винаги да се затваря със </script> дори ако се отнася до скрипт файл, който не съдържа код. Ако сте пропуснали това останалата част от страницата ще се тълкува, като част от скрипта.
Някои атрибути също могат да съдържат програми на JavaScript. Тага <button>, който се използва за бутон има onclick атрибут, чието съдържание ще се стартира, когато бутона се натисне.
<button onclick="alert('Boom!');">DO NOT PRESS</button>
Имайте в предвид, че трябва да се използват единични кавички за string в onclick атрибута, защото двойните кавички вече са използвани за да цитираме целия атрибут. Може също да се използва ", но това ще направи програмата по-трудна за четене.
В пясъчника
Изпълняващи програми свалени от Интернет са потенциално опасни. Вие не знаете много за хората, които стоят зад повечето сайтове, които посещавате и това не означава непременно добре. Изпълняващи програми от хора, които не познавате добре, могат да заразят вашия компютър с вируси, да откраднат данни и да хакнат сметките ви.
Но атракцията на мрежата е, че можете да сърфирате без да се доверявате непременно на всички страници, които посещавате. Ето защо браузърите сериозно разграничават нещата, които програмите на JavaScript могат да направят: те не могат да разглеждат файлове на вашият компютър или да променят нещо свързано с уеб страницата вградено вътре.
Изолирането на средата за програмиране по този начин, се нарича виртуална среда, като идеята е програмата безобидно да играе в пясъчника. Но трябва да си представим този конкретен вид пясъчник, като ограден с дебели стоманени пръти, което го прави малко по различен от типична детска площадка с пясък.
Трудната част на тестовата среда е да позволява на програмите достатъчно пространство за да бъде полезна, но в същото време да ги ограничава да не правят нищо опасно. Много полезна функционалност, като например общуването с други сървъри или четене на съдържанието на copy-paste clipboard, също могат да бъдат използвани за да се направят засягащи личната неприкосновенност неща.
Винаги сега и тогава, някой идва с нов начин за заобикаляне на ограниченията на браузъра и прави нещо вредно, вариращо от изтичане на незначително количество лична информация до вземане на контрола върху цялата машина, където браузърът продължава да работи. Разработчиците на браузъра реагират чрез фиксиране на дупката и всичко е добре отново, до като открият следващия проблем с надеждата да е явен, а не тайно използван от някое правителство или мафия.
Съвместимост и войната на браузърите
В ранните етапи на мрежата, браузър наречен Mosaic доминира на пазара. След няколко години, балансът е изместен към Netscape, който след това до голяма степен е бил изместен от Internet Explorer на Microsoft. Във всеки един момент, когато един единствен браузър е доминиращ, този браузър се е чувствал в правото си едностранно да измисля нови функции за уеб. И тъй като повечето потребители използвали същия браузър, уеб сайтовете просто започват и те да използват тези нови функции - да не говорим за другите браузъри.
Това е тъмната епоха на съвместимост, често наричана война на браузърите. Уеб разработчиците бяха оставени не с един единствен Уеб, а с две или три несъвместими платформи. За да направим нещата по-лоши, браузърите които се използват около 2003г. са били пълни с бъгове и разбира се бъговете са различни за всеки браузър. Живота бил много труден за хората, които пишели уеб страници.
Morzilla Firefox е с не стопанска цел, издънка на Netscape и оспори хегемонията на Internet Explorer в края на 2000г. Тъй като, от Microsoft не били особено заинтересовани от оставането им като конкурент по онова време, Firefox отнемат доста голямо парче от пазарния дял. Почти по същото време Google представят своя Chrome браузър и Safari на Apple също излиза на пазара, което води до ситуация, където има четири основни играча, а не един.
Новите играчи имат по-сериозно отношение към стандарти и добри инженерни практики, водещи до по-малко и по-малко бъгове на съвместимост. Microsoft виждайки, че пазарния им дял се руши правят завой и приемат тези нагласи. Ако си започнал да учиш уеб разработки днес си късметлия. Най-новите версии на основните браузъри се държат доста равномерно и имат относително малко бъгове.
С това не може да се каже, че ситуацията е перфектна, все още не. Някои от хората, които използват Интернет по техни причини или корпоративна политика, останаха с много стари браузъри. Тези браузъри измират, като цяло и писането на уеб-сайтове, които да работят на тях изисква много тайнствени знания за техните недостатъци и странности. Тази книга не е за тези странности. Вместо това, тя има за цел да ви представи съвременния, нормален стил на уеб програмиране.