ЈаваСцрипт и ЈКуери познајемо већ неколико година. ЈаваСцрипт је измишљен раније од јКуери-а. Обе су моћне и користе се у веб развоју и користе се у исте сврхе, тј. Да веб страницу учине интерактивном и динамичном. Другим речима, они оживљавају веб странице. Људи се могу запитати зашто, ако се користе у исте сврхе, зашто онда ова два одвојена појма? У овом чланку ЈаваСцрипт вс јКуери сазнаћемо шта је боље од другог у следећем низу:
- ЈаваСцрипт: Моћан језик у веб развоју
- ЈКуери: Библиотека развијена од ЈаваСцрипт-а
- Зашто се креира ЈКуери и које су посебне могућности ЈКуери-а
- Разлика између ЈаваСцрипт-а и ЈКуери-а са примерима
ЈаваСцрипт: Моћан језик у веб развоју
ЈаваСцрипт је скриптни језик који се користи за додавање интерактивности нашим веб страницама. То је једна од три основне технологије уз ХТМЛ и ЦСС које се користе за стварање веб страница. Док ХТМЛ и ЦСС дефинишу структуру веб странице и изглед / стил веб страница, ЈаваСцрипт се користи да веб страницу учини динамичном додавањем интерактивности, што значи да с ЈаваСцриптом можемо додати неки код за клик мишем, прелазак мишем и друго догађаје на веб страници и још много тога.
ЈаваСцрипт подржавају сви веб прегледачи, а веб прегледачи имају уграђени ЈаваСцрипт механизам за препознавање ЈаваСцрипт кода и рад са њим. Дакле, ЈаваСцрипт је углавном клијентски језик. То је један језик који се може користити као процедурални језик, као и објектно оријентисани језик заснован на прототипу. Када користимо примарни ЈаваСцрипт, радимо са процедуралним језиком, док напредни ЈаваСцрипт користи објектно оријентисане концепте.
Кренимо даље са нашим ЈаваСцрипт-ом у односу на јКуери-у и схватимо библиотеку развијену из ЈаваСцрипт-а.
јКуери: Библиотека развијена од ЈаваСцрипт-а
Током година испоставило се да је ЈаваСцрипт моћан језик за веб развој. Постоји много библиотека и оквира који су настали, а који су изграђени на врху ЈаваСцрипт-а. Ове библиотеке и оквири су развијени да би проширили способност ЈаваСцрипт-а, радили пуно ствари с њим и такође олакшали посао програмера.
јКуери је једна таква библиотека ЈаваСцрипт-а која је изграђена од ње. То је најпопуларнија ЈаваСцрипт библиотека коју је изумео Јохн Ресигн, а објављена је јануара 2006. у БарЦамп НИЦ. јКуери је бесплатна, библиотека отвореног кода, лиценцирана под МИТ лиценцом. Ово има моћну карактеристику компатибилности са више прегледача. Лако се може носити са проблемима међу прегледачима са којима се можемо суочити са ЈаваСцрипт-ом. Стога многи програмери користе јКуери како би избегли проблеме компатибилности међу прегледачима.
Ајмо сада са нашим блогом ЈаваСцрипт вс јКуери и видећемо зашто је јКуери створен.
пример логистичке регресије питхон
Зашто се креира јКуери и које су посебне могућности јКуери-а?
У ЈаваСцрипт-у морамо да напишемо пуно кода за основне операције, док се код јКуери-а исте операције могу урадити са једним редом кода. Стога програмерима је лакше радити са јКуери-јем него са ЈаваСцрипт-ом.
- Иако је ЈаваСцрипт основни језик из којег је јКуери настао, јКуери чини руковање догађајима, ДОМ манипулацију, Ајак позива много лакше од ЈаваСцрипт-а. јКуери нам такође омогућава да на нашу веб страницу додамо анимиране ефекте који захтевају пуно муке и редова кода са ЈаваСцрипт-ом.
- јКуери има уграђене додатке за обављање радњи на веб страници. Морамо само укључити или увести додатак на нашу веб страницу да бисмо га користили. Стога нам додаци омогућавају стварање апстракција анимација и интеракција или ефеката.
- Такође можемо направити свој прилагођени додатак помоћу јКуери-а. Ако захтевамо да се анимација изведе на веб страници на одређени начин, можемо развити додатак у складу са захтевом и користити га на нашој веб страници.
- јКуери такође има библиотеку додатака за УИ на високом нивоу. Ова библиотека виџета има читав низ додатака које можемо увести на нашу веб страницу и користити их за стварање усер-фриендли веб страница.
Да схватимо разлику.
ЈаваСцрипт вс јКуери
| Карактеристике | ЈаваСцрипт | јКуери |
| Постојање | ЈаваСцрипт је независан језик и може постојати сам. | јКуери је ЈаваСцрипт библиотека. Не би то било измишљено да ЈаваСцрипт није ту. јКуери је и даље зависан од ЈаваСцрипт-а, јер га треба претворити у ЈаваСцрипт да би га ЈаваСцрипт уграђени претраживач могао протумачити и покренути. |
| Језик | То је високо протумачени скриптни језик на страни клијента. Ово је комбинација ЕЦМА скрипте и ДОМ-а (објектни модел документа) | То је лагана ЈаваСцрипт библиотека. Има само ДОМ |
| Кодирање | ЈаваСцрипт користи више редова кода, јер морамо сами да напишемо код | јКуери користи мање редова кода од ЈаваСцрипт-а за исту функцију као што је код већ написан у његовој библиотеци, само морамо да увежемо библиотеку и користимо одговарајућу функцију / метод библиотеке у нашем коду. |
| Употреба | ЈаваСцрипт код је написан унутар ознаке скрипте на ХТМЛ страници | Морамо да увеземо јКуери са ЦДН-а или са места где се преузима јКуери библиотека да бисмо га користили. јКуери код је такође написан унутар ознаке скрипте на ХТМЛ страници. |
| Анимације | Можемо да правимо анимације у ЈаваСцрипт-у са више линија кода. Анимације се углавном раде манипулисањем стилом ХТМЛ странице. | У јКуери можемо лако додати ефекте анимације са мање редова кода. |
| Лакоћа | ЈаваСцрипт може бити незгодан за програмера, јер му је потребан одређени број редова кода да би се постигла функционалност | јКуери је једноставнији за употребу од ЈаваСцрипт-а са неколико редова кода |
| Компатибилност са више прегледача | У ЈаваСцрипт-у ћемо можда морати да се позабавимо компатибилношћу међу прегледачима писањем додатног кода или заобилазним решењем. | јКуери је компатибилан са више прегледача. Не треба да бринемо о писању заобилазног решења или додатног кода да бисмо наш код учинили компатибилним са прегледачем. |
| Перформансе | Чисти ЈаваСцрипт може бити бржи за одабир / манипулацију ДОМ-ом од јКуери-ја, јер прегледач директно обрађује ЈаваСцрипт. | јКуери мора бити конвертован у ЈаваСцрипт да би се покренуо у прегледачу. |
| Руковање догађајима, интерактивност и позиви Ајака | Све се то може урадити на ЈаваСцрипт-у, али можда ћемо морати да напишемо много редова кода. | Све се то може лако урадити помоћу јКуери-а са мање редова кода. У јКуери-ју је лакше додати интерактивност, анимације и такође вршити ајак позиве јер су функције већ унапред дефинисане у библиотеци. Ми само користимо те функције у нашем коду на траженим местима. |
| Говорност | ЈаваСцрипт је опширан јер за функционалност треба написати више редова кода | јКуери је сажет и користи мање редова кода, понекад само један ред кода. |
| Величина и тежина | Будући да је језик тежи је од јКуери-а | Будући да је библиотека, лагана је. Има минификовану верзију кода што га чини лаганим. |
| Поновна употребљивост и одрживост | ЈаваСцрипт код може бити опширан и стога га је тешко одржавати и поново користити. | Са мање редова кода, јКуери је одрживији јер само морамо позвати предефинисане функције у библиотеци јКуери у нашем коду. Ово нас такође чини да лако поново користимо функције јКуери на различитим местима у коду. |
Идемо даље са разликом између ЈаваСцрипт-а и јКуери-ја са Примером.
ЈаваСцрипт вс јКуери са примерима
Погледајмо примере.
Додавање ЈаваСцрипт-а и јКуери-а у наш ХТМЛ документ
ЈаваСцрипт се додаје директно у ХТМЛ документ унутар ознаке или се спољна ЈаваСцрипт датотека може додати у ХТМЛ документ помоћу атрибута срц.
Написано директно унутар ознаке скрипте:
алерт ('Ово поље за упозорење је позвано са догађајем онлоад')Да бисмо користили јКуери, преузимамо датотеку са њене веб странице и упућујемо на путању преузете датотеке јКуери у атрибут срц ознаке СЦРИПТ или је можемо добити директно са ЦДН-а (мрежа за испоруку садржаја).
Коришћење ЦДН-а :
Хајде да разумемо ДОМ прелазак и манипулацију
ДОМ преокрет и манипулација
У ЈаваСцрипт-у:
ДОМ елемент у ЈаваСцрипт-у можемо одабрати помоћу методе доцумент.гетЕлементБиИд () или помоћу методе доцумент.куериСелецтор ().
вар мидив = доцумент.куериСелецтор (“# див1”)
или
доцумент.гетЕлементБиИд (“# див1”)
У јКуери:
Овде ћемо морати да користимо само симбол $ са бирачем у заградама.
$ (селецтор) $ (“# див1”) - Селектор је ид 'див1' $ („. див1”) - Селектор је класа 'див1' $ („п“) - Селектор је одломак у Хтмл страница
У горњој изјави, $ је знак који се користи за приступ јКуери-у, селектор је ХТМЛ елемент.
Додавање стилова у ЈаваСцрипт:
доцумент.гетЕлементБиИд ('миДив'). стиле.бацкгроундЦолор = '# ФФФ'Додавање стилова у јКуери:
гото наредба ц ++
$ ('# миДив'). цсс ('боја позадине', '# ФФФ')Селектор #миДив односи се на идентификатор „миДив“
Избор и манипулација ДОМ елементима је много сажетији у јКуери-у него у ЈаваСцрипт-у.
Настављамо са руковањем догађајима.
Руковање догађајима
У ЈаваСцрипт-у бирамо ХТМЛ елемент:
доцумент.гетЕлементБиИд ('# буттон1'). аддЕвентЛистенер ('цлицк', миЦаллбацк) фунцтион миЦаллбацк () {цонсоле ('инсиде миЦаллбацк фунцтион')}Овде се метода гетЕлементБиИд () користи за избор елемента према његовом ид-у, а затим користимо методу аддЕвентЛистенер () да бисмо додали слушалац догађаја у догађај. У овом примеру додајемо функцију миЦаллбацк као преслушач догађаја „клик“.
У горњем примеру можемо користити и анонимну функцију:
доцумент.гетЕлементБиИд ('# буттон1'). аддЕвентЛистенер ('клик', функција () {цонсоле.лог ('унутар функције')})ЕвентЛистенер се може уклонити методом ремовеЕвентЛистенер ()
доцумент.гетЕлементБиИд (“# буттон1”). ремовеЕвентЛистенер (“клик”, миЦаллбацк)
У јКуери
јКуери је унапред дефинисао догађаје за готово све ДОМ акције. Конкретни јКуери догађај можемо користити за акцију.
$ („П“). Клик (фунцтион () {// цлицк ацтион})Остали примери су:
$ (“# Буттон1”). Дблцлицк (фунцтион () {// акција за двоструки клик на хтмл елемент са ид ‘буттон1’}ЈКуери ‘он’ метода користи се за додавање једног или више догађаја у ДОМ елемент.
$ (“# Буттон1”). Он (“цлицк”, фунцтион () {// акција овде})Можемо да додамо више догађаја и више обрађивача догађаја помоћу методе он.
$ („Буттон1“). Он ({клик: функција () {// акција овде}, дблцлицк: функција () {// акција овде}})Два или више догађаја могу имати исти руковатељ као доле:
$ (“# Буттон1”). Он (“цлицк дблцлицк”, фунцтион () {// акција овде})Тако видимо да је са мање и сажетим кодом руковање догађајима лакше у јКуери-у него у ЈаваСцрипт-у.
Настављамо са Ајак позивима.
Ајак позива
У ЈаваСцрипт-у
ЈаваСцрипт је користио КСМЛХттпРекуест објекат за слање Ајак захтева серверу. КСМЛХттпРекуест има неколико метода за упућивање Ајак позива. Две уобичајене методе су отворене (метода, УРЛ, асинхронизација, корисник, ПСВ), сенд () и сенд (стринг).
Направимо прво КСМЛХттпРекуест:
шта је лутка у девопу
вар кхттп = нев КСМЛХттпРекуест () Затим користите овај објекат за позивање методе опен: кхттп.опен ('ГЕТ', 'Д: //гетинфо.ткт', труе) кхттп.сенд ()Отворена метода даје захтев за добијање серверу / локацији, тачно наводи да је захтев асинхрони. Ако је вредност нетачна, то значи да је захтев синхронизован.
Слање захтева за објаву:
вар кхттп = нев КСМЛХттпРекуест () Затим користите овај објекат за позивање методе опен и израду захтева за објављивање: кхттп.опен ('ПОСТ', 'Д: //постинфо.ткт', труе) кхттп.сенд ()Да бисмо објавили податке са захтевом, користимо методу сетРекуестХеадер кхттп да дефинишемо врсту података који се шаљу, а метода слања шаље податке у паровима кључ / вредност:
кхттп.сетРекуестХеадер ('Тип садржаја', 'апплицатион / к-ввв-форм-урленцодед') кхттп.сенд ('наме = Рави & презиме = Кумар')У јКуери
јКуери има неколико уграђених метода за упућивање Ајак позива. Овим методама можемо позвати било које податке са сервера и ажурирати део веб странице са подацима. јКуери методе олакшавају Ајак позив.
Метода јКуери лоад (): Ова метода преузима податке из УРЛ-а и учитава их у ХТМЛ бирач.
$ („П“). Учитавање (УРЛ, подаци, повратни позив)
УРЛ је локација која се позива за податке, опционални параметар података су подаци (парови кључ / вредност) које желимо послати заједно са позивом, а опциони параметар 'цаллбацк' је метода коју желимо извршити након учитавања је завршен.
Метода јКуери $ .гет () и $ .пост (): Ова метода преузима податке из УРЛ-а и учитава их у ХТМЛ бирач.
$ .гет (УРЛ, повратни позив)
УРЛ је локација која се позива за податке, а повратни позив је метода коју желимо да извршимо након завршетка учитавања.
$ .пост (УРЛ, подаци, повратни позив)
УРЛ је локација која се позива за податке, подаци су пар кључ / вредност који желимо да пошаљемо позивом, а повратни позив је метода коју желимо да извршимо након завршетка учитавања. Овде су подаци и параметри повратног позива необавезни.
јКуери Ајак позиви су сажетији од ЈаваСцрипт-а. У ЈаваСцрипт-у користимо објекат КСМЛХТТПРекуест, у јКуери-у не морамо да користимо такав објекат.
Настављамо са анимацијом.
Анимација
У ЈаваСцрипт-у
ЈаваСцрипт нема одређену функцију анимације попут функције јКуери анимате (). У ЈаваСцрипт се ефекат анимације углавном постиже манипулисањем стилом елемента или коришћењем ЦСС својстава трансформације, превођења или анимирања. ЈаваСцрипт такође користи методе сетИнтервал (), цлеарИнтервал (), сетТимеоут () и цлеарТимеоут () за ефекте анимације.
сетИнтервал (миАниматион, 4) функција миАниматион () {доцумент.гетЕлементБиИд ('# див1'). стиле.трансформ = 'транслате (100пк, 100пк)' доцумент.гетЕлементБиИд ('# див1'). стиле.трансформ = 'ротате ( 20дег) '}Анимација у ЈаваСцрипт-у углавном се односи на манипулисање ЦСС својствима.
У јКуери
јКуери има много уграђених метода за додавање анимација или ефеката на ХТМЛ елементе. Проверимо неколико њих.
Метода анимате (): Ова метода се користи за додавање анимације елементу.
$ ('# буттон1'). цлицк (фунцтион () {$ ('# див1') .анимате ({хеигхт: '300пк'})})Метода схов (): Ова метода се користи да би елемент био видљив из скривеног стања.
$ ('# буттон1'). цлицк (фунцтион () {$ ('# див1'). схов ()})Метода хиде (): Ова метода се користи за сакривање елемента из видљивог стања.
$ ('# буттон1'). клик (фунцтион () {$ ('# див1'). хиде ()})јКуери има своје методе за стварање анимације и ефеката на веб страници.
Да резимирамо, ЈаваСцрипт је језик за веб развој, јКуери је библиотека која потиче из ЈаваСцрипт-а. ЈаваСцрипт и јКуери имају своју важност у веб развоју.
Сада када знате за ЈаваСцрипт петље, погледајте од Едуреке. Обука за сертификацију за веб развој ће вам помоћи да научите како да креирате импресивне веб локације помоћу ХТМЛ5, ЦСС3, Твиттер Боотстрап 3, јКуери и Гоогле АПИ-ја и примените их на Амазон Симпле Стораге Сервице (С3).
Имате питање за нас? Молимо вас да га спомињете у одељку за коментаре „ЈаваСцрипт вс јКуери“ и јавићемо вам се.