Java сценарийін бағдарламалау тілі сабақтары. Жаңадан бастаушыларға арналған JavaScript - қарапайым мысалдар

Алты аптада толық стек JavaScript-тен бейімделген: оқу бағдарламасына арналған нұсқаулық

Веб-әзірлеу - ең қарапайым, сондықтан жаңадан бастаған бағдарламашылар арасында танымал салалардың бірі. Жұмыс істеу үшін кез келген адам жеткілікті. мәтіндік редакторжәне браузерде алгоритмдерді тереңдетілген деңгейде оқып-үйренудің қажеті жоқ, бағдарлама жазудың әрбір кезеңінің нәтижесі анық - жалпы алғанда, көптеген артықшылықтар бар. Веб-әзірлеу контекстіндегі негізгі дағды JavaScript білімі болып табылады.

Қазір JavaScript өте жылдам дамып келеді, сондықтан тілді үйрену кезінде шатасу оңай. Назарларыңызға ұсынамыз оқу жоспары JavaScript және оған қатысты технологиялардың барлық қажетті аспектілерін қамтитын ыңғайлы құрылыммен.

Неліктен JavaScript?

Тілдің ашықтығын атап өткен жөн - әдетте бір-бірімен бәсекелесетін компаниялар JavaScript әзірлеу үшін ынтымақтасады. Тіл өте икемді және объектіге бағытталған және функционалдық тәсілдерді жақтаушыларға сәйкес келеді. Кітапханалар мен фреймворктердің үлкен саны тапсырманың кез келген түрін шешуді жеңілдетеді, ал Node.js серверлік платформасы тілді браузерде ғана емес, сонымен қатар консольде де пайдалануға мүмкіндік береді. Сіз тіпті жұмыс үстелін жаза аласыз және мобильді қосымшалар: біріншісі - Electron құрылымын пайдалану, ал екіншісі - NativeScript немесе React Native.

Негіздер

Алдымен сіз JavaScript-тің негізгі түсініктерін, веб-әзірлеуді және жалпы бағдарламалауды үйренуіңіз керек:

• объектілі-бағытталған АЖ – конструкторлар мен зауыттар, мұрагерлік;
• функционалдық JS - жоғары ретті функциялар, тұйықталулар, рекурсиялар;
• Жасмин сынағының техникалық сипаттамалары;
• HTML, CSS және jQuery негіздері.

git

Git - әзірлеушілер үшін маңызды құрал, сондықтан оны мүмкіндігінше ертерек бастау керек. Міне, сізге қажет негізгі дағдылар:

• каталогтарда файлдарды құру және жылжыту;
• Git-те инициализация және орындау;
• GitHub ішінде репозиторийлерді орнату.

Алгоритмдер және деректер құрылымдары

Содан кейін алгоритмдерді (атап айтқанда, алгоритмдердің күрделілігі туралы түсінікті), сондай-ақ негізгі деректер құрылымдарын: байланыстырылған тізімдерді, кезектерді, стектерді, екілік іздеу ағаштарын және хэш кестелерін оқу керек. Бұл сізге көмектеседі.

Backend

Node.js

10 жыл бұрын JavaScript тек алдыңғы қатарды әзірлеу үшін пайдаланылуы мүмкін еді. Енді Node.js арқасында бәрі бір «майданмен» шектелмейді. Түйін жай ғана серверлік JS кодын орындау ортасы болып табылады, сондықтан сізге жаңа синтаксисті үйренудің қажеті жоқ, бірақ файлдарды импорттау және экспорттау, кодты модульдерге бөлу және npm пакет менеджерін пайдалану қажет.

Серверлер, HTTP, Express.js

Түйінді үйренгеннен кейін серверлер мен маршруттауды түсіну және серверлерді өңдеумен танысуды жалғастырған жөн. Сіз HTTP-ге назар аудара отырып, порттар мен протоколдардан бастай аласыз, содан кейін сұрауларды өңдеуге арналған Түйін кітапханасы Экспресске ауыса аласыз.

Асинхронды JavaScript

Деректер базалары, схемалар, модельдер және ORM

Мәліметтер базасы веб-әзірлеудің маңызды элементтерінің бірі болып табылады. Қолданбаңызға бет жаңартылған кезде жоғалмаған кез келген деректерді жүктеу немесе сақтау қажет болса, дерекқорды пайдалануға тура келеді. Реляциялық және реляциялық емес мәліметтер қорын ажыратуды және қарым-қатынас түрлерін түсінуді үйрену керек. Содан кейін әртүрлі адамдармен танысыңыз. ORM-мен жұмыс істеу мүмкіндігі де артық болмайды.

Алғы жақ

HTML және CSS

HTML және CSS кез келген веб-әзірлеуші ​​үшін негіздердің негізі болып табылады. Оларды жақсы білудің қажеті жоқ, бірақ сіз оларды түсінуіңіз керек. Сондай-ақ, CSS-ті қалыпты кодқа ұқсату үшін кейбір танымал кітапхананы (мысалы, Bootstrap) және Sass сияқты CSS препроцессорын үйренуге болады. HTML-мен жұмыс істеуді жеңілдету үшін сіз pug сияқты танымал үлгілеу қозғалтқыштарының бірін таңдай аласыз.

jQuery және DOM манипуляциясы

Беттің көрінісі мен көрінісін жасау HTML анықтамасыжәне CSS, сіз DOM файлын басқару үшін jQuery кітапханасын пайдаланасыз. Көптеген адамдар jQuery пайдасыз және жақын арада Angular және React-пен ауыстырылады деп ойлайды, бірақ ол өте танымал және сондықтан білуге ​​тұрарлық. Сонымен қатар, бір күні сіз React микроскопымен шегелерді соғу ыңғайсыз жағдайға тап боласыз, содан кейін жеңіл jQuery көмекке келеді.

Chrome әзірлеуші ​​құралдары

Көптеген мүмкіндіктерді беретін Chrome құралдарын елемеу кешірілмес еді. Олардың көмегімен сіз DOM элементтерін тексере аласыз, консоль арқылы жөндеуге, маршруттарды бақылауға және т.б. болады. C әдеттегі тапсырмаларды орындауды жеңілдететін Chrome консолінің бірнеше ыңғайлы мүмкіндіктерін сипаттайды.

AJAX

Қолданбаңыз әрбір дерекқор әрекетінен кейін беттерді қайта жүктемейтінін қаласаңыз, сізге міндетті түрде AJAX қажет - ол өңдік асинхронды HTTP сұрауларын жібереді, жауаптары дисплейдің бір бөлігін ғана жаңартады. .ajax әдісі арқылы jQuery арқылы AJAX-пен жұмыс істеуге болады.

Жетілдірілген тақырыптар

Тестке негізделген даму

Немесе TDD - бағдарламалық жасақтаманы әзірлеу көптеген шағын циклдарға бөлінген әзірлеу әдісі: алдымен қажетті өзгерісті қамтитын сынақтар жазылады, содан кейін осы сынақтардан өтетін код жазылады. Осыдан кейін код қайта өңделеді, қажет болған жағдайда жаңа сынақтар жазылады. Кейбір сынақтардан код бөлімі өтпесе, ол түзетіледі.

Веб-розеткалар

Бұл тақырыпқа ерекше назар аудару керек, себебі бұл өте пайдалы. WebSocket протоколы, HTTP протоколынан айырмашылығы, бұл технологияны бірегей ететін екі бағытты деректер ағынымен жұмыс істеуге мүмкіндік береді. Ең көп тараған енгізу - socket.io кітапханасы - оны түсіну және алынған дағдыларды іс жүзінде қолдану сізге көп ойыншы браузер ойынын жасауға көмектеседі.

ES6, Babel, Webpack

Дәл қазір ES6 (ES2015) негізгі стандарт болып табылады, бірақ ES2016 қазірдің өзінде қабылданған, ал ES2017 әзірленуде, сондықтан сіз әрқашан жаңартулардан хабардар болып, оларды пайдалануыңыз керек. Үйлесімділік мәселелері тек бірнеше құралдармен шешіледі:

• Babel - ES6 кодын (ES2016 қолдауы жақын арада шығады) барлық браузерлер қолдайтын ES5 кодын құрастырады. Ол тіпті JSX/React құрамдастарын құрастырады, бұл оны кез келген веб-әзірлеуші ​​үшін таптырмас етеді;
• Webpack барлық бастапқы файлдарды (суреттер, қаріптер, стиль кестелері, JS файлдары, т.б.) бір тәуелділік графигіне жинайды. Кішкентай қолданбаларды жасау кезінде бұл көмектеспейді, бірақ React-пен жұмыс істегенде оның көмегі баға жетпес.

React және Redux

React - құрылысқа арналған кітапхана пайдаланушы интерфейстері. Оны Facebook 2013 жылы жасап, әзірлеушілер арасында тез танымал болды. React қалай жұмыс істейтінін және оның не үшін қажет екенін түсіну үшін оқып, содан кейін бөлшектеу керек. React тек алдыңғы қатарлы әзірлеу үшін ғана емес: Facebook ұялы телефонға (React Native) және VR әзірлеуге (React VR) арналған фреймворк нұсқаларын шығарды.

Redux - әдетте React-пен бірге қолданылатын болжамды күй контейнері. Модульділігіне байланысты оны кодты қысқарту үшін пайдалануға болады. Әсіресе ойындар сияқты нақты уақыттағы көп ойыншы қолданбаларында пайдалы.

Аутентификация, сеанстар, cookie файлдары

Сондай-ақ, қолданбалардың пайдаланушылармен қалай әрекеттесетінін, жүйеге кіруді өңдеуді түсінуіңіз керек тіркелгіжәне одан шығу, артықшылықтар беру. Сеанс кезінде пайдаланушының жеке басын бақылау үшін cookie файлдары пайдаланылады - шағын мәтіндік файлдар, HTTP сұрауына жауап ретінде сервер браузерге жібереді. Дерекқор мен авторизация беттері арасындағы байланысты қамтамасыз ету үшін экспресс-сеанс кітапханасын пайдалануға болады.

Веб қауіпсіздігі

Және, ең соңында, қауіпсіздікке назар аудару керек. Шабуыл әдістерін де, олардан қалай қорғану керектігін де зерттеу маңызды.

JavaScript синтаксисінің оқулығы

Оқымас бұрын JavaScript оқулығы, сізде білім болуы керек.

Оқуда үлкен плюс болады JavaScript синтаксисі, егер сіз PHP, C немесе Паскаль сияқты кейбір бағдарламалау тілімен бұрыннан таныс болсаңыз және айнымалы, деректер түрі, функция немесе массивтің не екенін түсінсеңіз.

Дегенмен, егер сіз бағдарламалау тілдерімен таныс болмасаңыз, онда сіз алаңдамауыңыз керек, бұл javascript оқулығыБұл бағдарламалауды алғаш рет үйреніп жатқандарға арналған.

JavaScript (JavaScript) HTML бетінің (HTML тегтері) және веб-браузердің элементтерін басқаруға, оларды жылжытуға, әртүрлі оқиғаларға жауап беруге (тінтуірді басу, пернетақтаны басу), мәтіндер жинағын жасауға болатын клиенттік бағдарламалау тілі болып табылады. қызықты бағдарламалар(сценарийлер): тесттер, анимация, фотогалереялар (мысалы, Вконтактедегідей), ойындар және т.б.

JavaScript қалай үйренеді

зерттеу JavaScript тілі, әдетте төрт кезеңге бөлінеді:
1. JavaScript синтаксисін меңгеру (бұл оқулық),
2. Оқу DOMжәне БОМ,
3. JavaScript көмегімен DOM және BOM басқару,
4. Әртүрлі JavaScript кітапханаларын үйрену. jQuery- ең танымал осы сәткітапхана (jQuery оқулығы осы сайтта, 2015 жылдың аяғында).

DOM - бұл объектінің моделіқұжат. DOM технологиясының арқасында HTML бетінің тегтері нысандар ағашына ұқсай бастайды және бұл ағаштағы әрбір нысанның өзінің бірегей адресі болады. JavaScript тілі осы мекенжайға сілтеме жасай отырып, осы немесе басқа HTML тегіне қол жеткізе алады және оны басқара алады (түсін, өлшемін, орнын және т.б. өзгерту).

BOM — браузер құжатының үлгісі. Құрылымы DOM-пен бірдей, бірақ HTML бет объектілерінің орнына браузер объектілері бар: браузер терезесі, браузер экранының өлшемдері, шолу журналы, күй жолағы және т.б.

DOM және BOM үйренгеннен кейін олар бетпен және браузермен әрекеттесетін азды-көпті күрделі JavaScript сценарийлерін жасай бастайды.

Содан кейін, аздап үйренгеннен кейін, олар jQuery сияқты кейбір JavaScript кітапханасын үйренеді, соның арқасында JavaScript-тегі сияқты бағдарламаларды әлдеқайда жылдам және тиімдірек жасауға болады.

Кейбір веб-шеберлер алдыңғы үш қадамды өткізіп жіберіп, jQuery тілін үйренуге бірден кіріседі, бірақ мен оны ұсынбаймын, өйткені бәрібір JavaScript синтаксисін түсіну және DOM/BOM нысандарын, олардың қасиеттерін, әдістерін және мақсаттарын білу керек.

JavaScript көмегімен қандай программаларды жазуға болады

Көмегімен сіз көптеген қызықты бағдарламаларды (сценарийлерді) жасай аласыз:
- белгілі бір түймені басу арқылы сайт бетінің элементтерін немесе олардың орнын өзгертетін сценарийлер жасай аласыз,
- сіз анимация жасай аласыз,
- пішіндерді өңдеу, мысалы, пайдаланушы енгізген деректердің дұрыстығын тексеру,
- әртүрлі тесттер жасаңыз, мысалы, емтихан түрі (мектеп емтихандары) және нәтижені дереу алыңыз,
- BOM арқасында сіз өзіңіздің сайтыңызға кірген пайдаланушының браузері мен компьютерінің сипаттамаларын біле аласыз, бұл әртүрлі хит есептегіштерін жасауға мүмкіндік береді,
- JavaScript көмегімен сіз тіпті ойындарды, мультфильмдерді және басқа да көптеген қызықты және пайдалы бағдарламаларды жасай аласыз.

Бұл JavaScript оқулығының мақсаты қандай?

Мұның мақсаты JavaScript кітаптарысені тәрбиелеу JavaScript синтаксисінің негіздері, айнымалылар, деректер типтері, операциялар, тармақ операторлары, функциялар, циклдар, массивтер, объектілер және т.б. сияқты бағдарламалау және түсініктерді енгізу. Мұның бәрі басқа бағдарламалау тілдерінде кездеседі, сондықтан JavaScript-ті меңгергеннен кейін сізге PHP, C++ немесе Python сияқты басқа тілдерді үйрену оңайырақ болады.

JavaScript оқу құралының құрылымы

В JavaScript оқулығы, келесі тақырыптар мен сабақтар өтеді.

Бұл бетте басы бар JavaScript оқулығыжаңадан бастаушылар үшін. Оны меңгеру үшін HTML және CSS-те кем дегенде минималды білім болуы керек. Жаңадан бастаушыларға арналған HTML және CSS оқулығын қарап шығыңыз (JavaScript үйрену үшін кем дегенде 3-4 сабақты аяқтау керек).

JavaScript HTML және CSS-пен бірге браузерде жұмыс істеуге арналған. Бірақ, егер бұл тілдер сайт құрылымын орналастыруға арналған болса, онда JavaScript веб-беттерді «жандандыруға» мүмкіндік береді - оларды пайдаланушы әрекеттеріне жауап береді немесе кейбір динамизмді көрсетеді (мысалы, блоктағы суреттерді өзгерту немесе әдемі). біркелкі ашылмалы мәзірлер).

Ендеше, көп ұзамай, осы сөзсіз пайдалы тілді үйренуге кірісейік.

JavaScript қалай іске қосылады

JavaScript жазудың және іске қосудың екі жолы бар: біріншісі - кодты тікелей ішіне жазамыз HTML бетітегтің ішінде