Въведение в уеб програмиране

HTML 5 logo on an iPhone smartphone with app icons around it in a cloud
Добре дошли в интернет.

Обратно в моя ден (Добре, преди да ми ден), професията на уеб разработчик е ниско едно. Тя се класира по-долу кученце хейтър, но над Янкис фен по скалата на професионална чест. Защото на всички етикети и прозрачност дистанционни изображения ние използвани, ние се гледа като на суровия хакери с никакво чувство за естетика.

Добре, ние все още може да бъде лишена от чувство за естетика, но тъй като в мрежата е развила така има професията на уеб разработчик. Тези дни има безброй инструменти можем да използваме, за да направим добре написана, стандарти на изискванията, и красива (Добре, Може би не, че последният) уеб страници. Повечето от най-големите уебсайтове, които използваме днес (безсрамна щепсел: включително и тази) са изградени с помощта на тези инструменти.

Нашата орляк на инструменти за край на браузъра са ни позволи да се създаде неща в интернет, които са били немислими само 10 Преди години, като безброй социални мрежи твърдят, че са най-добрият начин да ви губя времето, “горещ” технологични компании, които твърдят, че са коренно нещо, което вече е направено, хиляди пъти, и Angry Birds клонинги твърдят, че са само малко по-лошо от оригинала. Всички в интернет. Така че може би тези инструменти не са отишли ​​до най-големия от приложения.

Така че какви са тези невероятни инструменти съм говорят за? Водещи на начина, по който са били (честно казано невероятно) езици, наречени HTML5, CSS3, и JavaScript, което аз прякора 3 конници на webocalypse. Ето един поглед към всяка една:

HTML

HTML (правилно, известен като HyperText Markup Language; можете да видите защо хората, които не искат да изглежда зле, просто използват съкращението) е език, използван да изложи на уеб страници. Щракнете с десния бутон върху тази страница и кликнете “View Source”. Това е HTML, че тази страница използва.

По същество, HTML е един куп тагове, които браузъра интерпретира и излага. Например, разгледаме този HTML код:

<стр.>Аз не знам за вас, но ми харесва натискане на бутони.</стр.>

<ДВУСТАЕН>

<бутон>Натиснете тук, за мен!</бутон>

Този HTML код е текст увити в параграф (на <стр.> тагове започва параграф, на </стр.> тагове завършва с точка.) Има нов ред (на <ДВУСТАЕН>) и след това един бутон можете да кликнете, за да съдържание на сърцето ви. Вашият браузър ще го изложи на екрана за вас.

Така че това е много добре. Но ако имате нищо, но HTML, можете да получите на уеб страница, която изглежда като него дойдоха направо от 1990-. Не е много добра излезе от това десетилетие така или иначе (прически, музика, и т.н.) Но изчакайте! Има още!

CSS

Друг акроним. Лято. CSS означава Cascading Style Sheets, което е малко на погрешно название, тъй като те наистина не каскада (каквото и да означава… това е компютърен код, не водопад!) CSS е Езикът, използван за стил уеб страници. Това, твърде, се интерпретира от браузъра си.

CSS и HTML работят заедно – HTML прави оформлението на страницата, CSS тя дава своя нюх. Представете си, строеж на къща: HTML осигурява бозав, но необходима дървена рамка, CSS добавя неонови цветове и чудат мебели.

CSS е доста ясен език: за определен HTML тагове (като параграф), можете да зададете стойности за класовете, различни по стил модерни. Вашият браузър ще прочете CSS и го прилага за всички съвпадение HTML тагове. Например:

стр. {

цвят: червен;

размер на шрифта: 16PX;

}

Така че всеки абзац (неща в HTML <стр.> тагове) ще има червен шрифт и да бъде 16 пиксела в размер. Ако сте забелязали, това са някои от същите стилове можете да използвате в Microsoft Word и други приложения.

Така че сега вашите уеб страници са изложени и те изглеждат доста. Но тук е нещо: това е всичко, което правят. Те просто седят там и да гледам хубав. Което е страхотно и всички, но потребителите на мрежата искат повече. Те искат фантазия анимации. Те искат изскачащи прозорци (Добре, може би са направили обратно в 2002, но аз отделям.) Те искат бутони, които ще направят неща, когато щракнете върху тях.

За последната една – това е въпрос,. Можете да направите <бутон> в HTML, и ще можете да щракнете върху него цяла седмица, но тя не прави нищо в скоро време. Ако искате бутона, за да, О, аз не знам, преместите слон по екрана и да атакуват нещо, тогава имате нужда от нещо повече.

JavaScript

JavaScript е не акроним, ако се чудите. Нарекоха го JavaScript, защото тя изглеждаше като език на програмиране, наречен Java, което е странно, защото това не е така. Както и да е, JavaScript е подходящ език за програмиране, който причинява всички динамични ефекти виждате в интернет.

Като всеки език за програмиране, JavaScript е серия от команди, които правят променливи и се използват функциите. Прохладното част за JavaScript (добре, както готин като език за програмиране може да бъде) е, че можете да получите достъп до тези HTML елементи (като параграфи и бутони) и CSS стилове (като цвят и размер на шрифта) и да ги промени. Погледнете този код:

параграф може = $("P");

paragraph.css("Цвят","Синя");

Този JavaScript код, ще намерите всички параграфи на страницата – на $ знак казва на браузъра, за да намерите всички съвпадение на елементи, и "P’ означава, че той трябва да избере параграфи (Спомням си <стр.> елемент от HTML?) След това можете да съхранявате параграфите на променлива, и командата на браузъра, за да променят своя цвят, CSS стил син.

Това, което намирам интересна (отново, това е от гледна точка на “WebDev”) е как елегантно трите езика работят заедно. Последната линия на JavaScript взаимодействали с HTML страницата и СГО се използва, за да го оформите. Това не е като тези езици са само различните компоненти на едно и също нещо – те са едни и същи, различни страни на една невероятна машина.

Звучи очарователно? Мисля, че го прави. Това е само част от красотата на мрежата.

Публикуван от

Neel Мехта

Harvard College. Web Developer. Някъде философ. Baseball наркоман.

Една мисъл на тема "Въведение в уеб програмиране”

  1. уау бях изненадан, за да разберете, че и го е написал, добра работа, това е хубаво олово в това за мен, преди да отидете на уеб програмиране пакети Сойер.

Вашият коментар