[Powered by Google Translate] [Семінар: JQUERY]
[Vipul Шехават, Гарвардський університет]
[Це CS50.] [CS50.TV]
Якщо ви прямуєте у себе вдома, ви можете отримати доступ до свого онлайн слайди
перейшовши за цим посиланням.
Це TjjRWj, на bit.ly.
Ви також можете просто піти в URL безпосередньо,
який cloud.cs50.net / ~ vshekhawat, що моє ім'я,
і JQuery.
Я настійно закликаю вас слідувати, якщо ви спостерігаєте у себе вдома,
і якщо ви тут, також, тому що це досить інтерактивної презентації.
>> Отже, сьогодні я збираюся говорити про JQuery, і перше питання,
що JQuery?
Цього року, я знаю, ви, хлопці, не поширюється JavaScript
так само докладно, як у нас в останні роки.
JavaScript є, в першу чергу, саме на стороні клієнта мові
яке використовується для виконання сценаріїв і коду на машині кожного користувача.
Так у вас є сервер, який забезпечує веб-сторінок для людей,
але ви можете робити такі речі, на своїй машині,
запитайте їх машину для відправки запитів на сервер кожні 30 секунд або щось на зразок цього.
Ви можете зробити це за допомогою JavaScript.
JQuery просто надає більше можливостей, на вершині JavaScript
, Що робить додатковий матеріал для вас.
Якщо ви подивитеся на вміст на вершині,
який описує деякі з речей, які ви в змозі зробити.
У загальному і цілому, він був створений у січні 2006 року.
Вперше він був задуманий в серпні 2005 року.
Це було навколо протягом кількох років, і це дійсно частина нового руху Web 2.0
яка зроблена в Інтернет, тому блискучими.
Це найбільш широко використовуваний JavaScript бібліотеки.
За 19600000 сайти використовують його, і використання як і раніше росте
відповідно до builtwith.com, яка, мабуть, протягом останнього року,
тільки що був постійно росте досить лінійно.
Серед топ-10000000 сайтів, є ще -
близько 40% з них в даний час його використання.
Facebook використовує його, багато інших веб-сайтів зараз її використовують.
Ви можете подивитися на ці статистичні дані за своїм розсудом, якщо ви хочете.
А ви могли б сказати, що це законно, бо має підставу і 13 членів ради директорів,
разом з командою з 20 осіб, які працюють на його на регулярній основі.
Так що це дуже широко використовується, вона має. Орг URL, це фантазія,
він має спін-офф за інші речі, так що це велика справа.
>> Чому ви повинні використовувати це? JQuery дуже легкий.
Це означає, що це не величезний файл. Ви можете завантажити
зменшена файлами, яка без всяких пробіл і коментарі, і це тільки 32 КБ.
Так що це легко просто кинути на своїй веб-сторінці
і просто почати використовувати його.
Це також дуже ефективно написано, так що не займає багато -
це не уповільнює ваш сайт багато, коли ви його використовуєте.
Це дозволяє реалізувати те, що було раніше неможливо.
Є деякі аспекти функціональності,
як створення анімації, який зазвичай був би дуже, дуже важко зробити.
Але в JQuery вони насправді дуже проста.
І є деякі речі, які дратують робити,
можливо в JavaScript, як відправка POST запиту,
але, щоб послати запит до сервера, ви повинні написати
п'ять або шість чи сім рядків коду.
Тепер ви можете зробити це в один рядок коду, в одному виклику функції.
Це дійсно спрощує багато речей, які ви робите.
І все спокійні діти використовують його. Під цим я маю на увазі мене.
У мій останній проект в минулому році, яке є news.whrb.org,
яка є для радіостанції, я створив цей блог
в якому знаходиться все показує, що ми зробили, і MP3-файли для них.
Ви можете переглядати минулого показує,
і все це робиться за допомогою JQuery. Ви можете сказати,
Через усі ці анімації, по суті.
Так що якщо у вас є - якщо ви створюєте нове повідомлення,
Ви бачите ці маленькі slideDowns, от і все робиться за допомогою JQuery.
І це зникати - так що такі речі все це робиться використанням JQuery,
і вам не доведеться постійно перезавантажте сторінку переміщатися по сайту.
Інша цікава річ, яка формується за допомогою JQuery це подання.
Я використовую цю відкриту річ вихідним кодом під назвою scrolldeck,
який хтось написав на вершині JQuery.
Якщо ви дійсно подивіться на вихідний код, ви можете бачити, що
вони використовують цей знак долара; знаки долара
використовуються в JQUERY, щоб показати, що функція JQUERY функції.
Так що вони визначенні обгорткою для JQuery
, Що дозволяє робити презентації, як це,
і ви можете бачити, що тут вони в тому числі вихідний файл JQuery,
чого і вам доведеться включати, якщо хочете використовувати JQuery
у вашому власному веб-сайтів.
>> Говорячи про те, як Ви його встановити?
Ви можете просто піти в jQuery.com і завантажте файл,
додати його в веб-каталог і включити його.
Так що просто на вершині, в голові мітку вашого HTML файлу
Вашої основним HTML файл, просто є цей рядок коду
з правильною версією для якої версії JQuery ви використовуєте.
Ви можете завантажити його, перейшовши в jQuery.com,
Натисніть кнопку "Завантажити JQuery", і ви його отримали. Ось і все.
А насправді, ми можемо поглянути на те, що він виглядає.
Якщо ви натиснете на завантажити тут, Jquery це.
Це просто один великий файл JavaScript, що виконує все, що матеріал для вас.
Це зменшена версія, яка не читається взагалі.
Ви також можете подивитися на розвиток версії, який доступний
але все ще дуже, дуже тривалим.
Це багато чого там.
Ви можете перейти за посиланням відбувся версією Google, про нього.
Так що дозволю тобі просто покладатися на Google, щоб забезпечити це.
Вони забезпечують кожен варіант, доступний в будь-який час.
Таким чином, ви, ймовірно, може розраховувати на Google розмістити його для вас.
Або ви можете за посиланням власної останній версії JQuery автора.
У них є URL, який завжди оновлений до останньої версії.
Це JQuery-останнє, і є одна проблема з цим,
який є те, що якщо оновлений JQUERY і деякі з попередніх функціональність
вони стають ретроградірованний або які застаріли,
вона не може - він може почати, щоб не отримати підтримуються.
Так що якщо ви написати сайт за допомогою версії 1.8.2,
до того часу, версії 2.7 виходить
деякі з функцій, які ви написали більше не працюють.
Так що краще просто завантажити файл 32 Кб,
покласти його на веб-сторінку, і він буде працювати вічно.
>> Я збираюся йти вперед і почати говорити про фактичну функціональності JQuery.
Перше, що селектори. Це те, що JQuery була спочатку задумана надати.
І ви можете натиснути на документацію, щоб подивитися на
Робоча документація на селектори Я збираюся бути покриття.
Ідея селекторів, які можна вибрати HTML елементи на сторінці.
Елементів на сторінці є ідентифікатори і класи та інші аспекти виявлення на них.
Там же - вони в різному порядку.
Деякий час вони вкладені одна в одну.
JQuery дозволяє створювати прості запити, які витягують з елементів сторінки.
Тоді ви можете маніпулювати цими елементами використанням JQuery функції,
яка є маніпуляцією розділі ми отримаємо пізніше.
Ви можете змінити HTML, CSS змінити,
Ви також можете додати анімацію і функції, які активуються за певних подій.
Так, наприклад, якщо щось клацнуло, ви хочете, щоб щось сталося,
Ви можете зробити це за допомогою JQuery, а також.
І є величезна кількість способів вибору елементів.
Більшість з них я ніколи не використовував, але є основні,
які є досить важливими.
Селектора елемента, наприклад, якщо ви просто нічого вибору
тобто DIV - Я насправді є код відкритий для цього слайда презентації.
Так, наприклад, ось перший слайд.
Тут ми маємо справ. Якщо ми насправді вибрати всі діви на сторінці,
це буде просто дати нам масив всіх діви, які існують в цьому файлі.
ID селектор дозволяє вибрати все що завгодно з даними ID.
Так що, якщо це, наприклад, ця річ має ID "що"
і якщо б ми зробили це з #, що замість деяких ID,
було б просто повернути масив, який має єдиний елемент і що в тому, що елемент сторінки.
Ми також можемо комбінувати селектори Таким чином, маючи
вибрати тільки речі з ідентифікаторами, які діви.
Так що так. Тільки виберіть діви, які мають цей ID.
Для класу ви просто використовуєте точка, це те ж саме, CSS.
Нащадок також працює, так що якщо у вас є певний клас
і це має вкладені елементи всередині нього - так, наприклад,
є певний клас і він має тега прив'язки на заслання на іншу сторінку,
Ви можете використовувати цей синтаксис для отримання посилання.
Ви також можете вибрати кілька речей відразу, просто розділіть їх комами,
використовувати будь селектор ви хочете, і ви оберете їх все відразу, в одному масиві.
А тут ще і не селектором, так що ви можете вибрати все діви
, Які не мають деякий певний клас.
І це тільки корисний спосіб отримати введення у виборі, як це працює.
Я покажу кілька конкретних прикладів в секунду.
>> Розширений селектори - це лише кілька прикладів.
Існують десятки з них, але якщо ви хочете, щоб вибрати всі теги зображення
протягом деякого елемента, то ви просто робите: зображення.
Якщо ви хочете вибрати парні елементи, наприклад, якщо є 20 з них,
Ви хочете вибрати 0, 2, 4, 6 і так далі,
Ви робите: навіть, або ви також можете зробити: дивно.
Це псевдо-селектори, що означає, що вони насправді обчислити
будь-який інший елемент, а не просто збирається і вибравши всі з них.
Ви також можете - кожен елемент може мати атрибути.
Так, наприклад, клас = центр також атрибут.
Для цього тега прив'язки, HREF, гіпертекстового посилання, є атрибутом також.
Таким чином, ви можете вибрати те, що посилання на конкретну сторінку або просто - це дійсно загальна.
Ви можете вибрати все що завгодно з будь-який атрибут, який ви хочете.
А потім, також, містить атрибут.
Якщо ви, наприклад, хотів, щоб вибрати всі елементи введення
, Які містять слово "прохід" як ім'я з них,
Якщо у сторінки є блок введення тексту
це називається "пароль", що б бути одним із способів ви можете вибрати, що.
І є ще багато. Ви можете піти далі і подивитися на документацію
і побачити конкретні приклади того, як це працює.
>> Наступним важливим моментом є DOM маніпуляції.
Після того як ми вибрати елементи, ми хочемо насправді робити речі з ними.
До цих пір ми не дивилися на це взагалі, але якщо ви подивитеся на документацію,
Там насправді багато, що ми могли зробити.
На даний момент, ми збираємося, щоб вибрати елементи на цій презентації
і маніпулювати їх за допомогою JQuery.
Тому що це реалізується за допомогою JQuery, ми маємо доступ до JQuery бібліотеки,
і ми можемо використовувати ці функції в цьому коді.
Одна корисна річ, що ви можете не знати про те, консоль.
І Google Chrome є те, що я використовую. Ви можете натиснути Alt команди J
або управління ALT J, щоб відкрити консоль.
У Firefox я думаю, що це команда зсуву К або керування перемиканням К.
У Safari ви повинні піти змінити деякі налаштування.
Там на заслання, якщо ви хотіли б це зробити, але я рекомендую отримати Chrome або Firefox.
Так що давайте відкрийте консоль, це тут.
Вона дозволяє в основному тільки робити все що завгодно.
Таким чином, ви можете просто ввести в створюємо змінну з ім'ям х,
х = 5, давайте подивимося, що х + 2.
Ви навіть можете зробити щось на зразок CS + Подивимося, х + 45, які будуть CS50.
Ви можете просто зробити деякі типові речі JavaScript.
Але ви також можете зробити JQuery тут.
>> Отже, давайте подивимося на це першим аспектом тут.
Ми збираємося створити змінну HTML, який є рядком.
Вона має тег абзацу в ньому, що називається новим текстом.
Так що у нас є цей HTML, це деякий новий текст в теги абзацу.
Тепер ми дійсно хочемо, щоб додати його на сторінку.
Я поставив його так, щоб HTML для цього абзацу, цей титул тут, додавання ID.
Якщо ми вибираємо додавання ідентифікатор, а потім додати до нього
HTML змінної я тільки що створив,
вона буде додати, що HTML в кінці, відразу після цього тега абзацу.
Так що якщо ми це зробимо, - ми обрали цей пункт,
і ми назвали додавання функції зі змінним HTML я просто додав,
вона буде додати, що новий текст прямо на сторінці.
Ми можемо також відповідним чином виправити, що означає, він буде направлений, на початку цього елемента.
Таким чином, є певний новий текст на початку і після нього.
Я можу йти вперед і оновити, щоб позбутися від цієї речі я тільки що зробив.
Але це приклад того, як можна використовувати Prepend і додати методи
маніпулювати матеріал на сторінки, додати деякі HTML.
>> Ви також можете змінити класів.
Назад у цьому стилі файл, я створив це для перемоги класу
Текст, який має червоний колір, деякі кольори фону, тексту і тіні.
Це виглядає огидним, але не можу насправді -
цьому пункті, відповідає класу ID.
Так що я можу додати клас для перемоги.
Я можу виконати це в консолі,
і що буде додати, що клас, і тепер він виглядає огидним, як і очікувалося.
CSS автоматично буде застосовуватися до класів, що ви -
якщо є CSS для класу, він автоматично буде застосовуватися
якщо ви зміните класом елемента.
Тоді ми можемо просто видалити його за допомогою Remove Class.
Так що якщо у вас є зумовлені класи, як червоний підкреслюються,
а потім ви хочете застосувати до елементів тих,
Ви не повинні зробити все, CSS стилів кожен раз.
Ви можете просто додати клас до елементу, а потім це автоматично стане -
вона буде автоматично шукати відповідні для цього класу.
Ми також можемо видалити речі, так що я збираюся, щоб вибрати всі діви
на сторінці і видалити їх.
І що це буде виглядати?
Це буде виглядати, як ніби нічого, так що немає насправді нічого не залишилося.
Мій виступ не стало.
Я можу оновити і привести його назад, на щастя,
Тому що це просто ходить раз,
але це приклад видалення, якщо ви хочете, щоб повністю знищити елемент зі сторінки.
>> Ви також можете переписати, і я збираюся, щоб вибрати всі теги абзацу на сторінці
і заходите всередину їх і замінити будь-яким текстом вони мають на них
з тільки слово "тестування".
Якщо ви зробите це, ви заміните кожен абзац на сторінці з цього тестування.
Так. Вони всі замінені тестування.
Ось приклад доступу до тексту і перезапису.
Ви також можете отримати інформацію, і це дійсно здорово для введення.
Якщо у вас є поле введення, що люди набравши речі в,
люди набравши в нього речі,
Тут ми вибираємо вхідні, будь-який вхід тега з типом тексту.
У цьому випадку є тільки одне поле введення в цілу виставу,
тому ми просто виберіть першу, а потім ми викликаємо функцію Val на ньому.
, Який повертає значення, а для введення,
Значення тільки що б не трапилося, щоб бути всередині нього.
Так що, якщо ми зробимо це, він просто повертає рядок матеріал.
І якщо ми називаємо його знову після написання більше матеріалу, вона перетворюється на більше речей.
Ось один відмінний спосіб доступу до елементів поле введення, а потім перевірте,
це адреса електронної пошти, це є припустимою датою, наприклад.
Ви можете просто отримати речі миттєво, як люди набравши його,
а потім перевірити, чи є це дійсно, відправити його назад на сервер, робити все, що хочете з ним.
І це, як ви отримуєте доступ, що знаходиться усередині цих ящиків.
>> Ви також можете змінити CSS безпосередньо, так що замість додавання
класу, який має деякі зумовлені властивості,
ви можете просто додати будь CSS ви хочете що-небудь.
Так давайте виберемо тіло, яке всієї презентації,
і колір є властивістю, яке визначає, які кольори тексту.
Якщо ми змінимо його на червоний, весь текст на сторінці стане червоним.
Ми можемо зробити щось на зразок синій колір фону
там ми йдемо, це красиво.
Ви можете робити все що завгодно з цим.
Використовуючи властивість CSS, ви можете реально змінити, як щось виглядає в будь-який час.
Наступним важливим моментом є ефектів.
Ефекти в основному такі ж речі, як зміна CSS,
але вони насправді забезпечують деяку додаткову анімацію до нього.
Таким чином, замість того, щоб просто показувати або приховувати щось або зміни кольору,
Ви можете фактично зробити його анімованим.
Ось документацію, якщо ви хочете поглянути на велику документацію на нього.
Але я збираюся охопити основні з них.
Є Показ і приховування властивостей.
Показати / приховати номер дійсно відповідає цьому цілу коробку,
так що якщо я приховати це, він просто зникне.
І я можу показати його знову, якщо я хочу, щоб зробити його повернутися.
І він повернувся. Це насправді не зникнуть,
Я фактично не видалити його зі сторінки, я просто встановити властивість CSS видимості в прихованому
так що ви не можете бачити його більше.
Там же ковзати вгору і ковзати вниз, що дозволяє мати такий ефект.
Він ковзає до зникають, а після того, як зникає
Ви можете рухати його вниз, щоб він повернувся. А тепер він повернувся.
Там також це ефект загасання, яке - зникають ID відповідає цій рамки.
Якщо я зникати до неї, то вона буде поступово зникати.
Я можу також зникають його, і він повернеться.
Ви також можете зробити, щоб зникати, який специфічний для функція фейдера.
Ви можете мати його зникати з будь-яким конкретним непрозорість, що ви хочете.
Так що якщо ви зникають так повільно 0,5, це стане половину видимої.
Я можу зробити це піти в 0,1, і назад в 1, щоб зробити його повністю видимим.
Ось тільки анімацію, яке ви можете зробити.
>> Є також перемикач ефектів.
Так що я збираюся, щоб вибрати перемикання ID, який відповідає цій рамки,
і на цій DIV ви можете зателефонувати Toggle; якщо це мабуть він стане невидимим,
якщо це невидиме стане видимим.
Так що я просто назвав цю функцію перемикання в два рази, перший з яких був
те ж, що приховувати, на другий виклик було те ж саме, як шоу.
І ви також можете зробити це за допомогою перемикання зникають,
яка робить те ж саме, за винятком того, фактично зникає.
І те ж саме з гіркою перемикання.
Є прикутий ефекти, а також, що означає,
При виборі елемента і просто зателефонувати купа анімації його методи,
Якщо ви хотіли, щоб зникати, а потім посуньте вниз,
а потім ховати і потім зникають у, він буде робити їх у ряд.
Так зник, повернувся - з деяких причин, шкура не відбулося.
Давайте спробуємо його. Так, так що зник, і потім це зісковзнула.
І є ще багато. Ви можете використовувати функцію анімації
щоб створювати свої власні анімації, яка є досить складною,
але вона дає вам нескінченну розширюваність.
Ви можете зробити будь-який вид анімації ви хочете.
Ви також можете використовувати черзі стояти в черзі декілька анімацій одночасно.
Так що якщо ви хочете, щоб щось купувати на сторінці,
слайд з верхнього правого в нижній лівий, ви можете зробити це,
і просто є купа дій йдуть один за одним.
>> Наступне, що ми збираємося поговорити про події.
Події дозволяють - до цих пір, ми тільки що друкував речі в консолі
і що є одним із способів, щоб це відбулося,
але на реальній сторінці, ви не збираєтеся бути в змозі
робити речі, типу користувача в консолі.
Ви хочете, щоб те, що відбувається автоматично.
Для цього вам потрібно використовувати події, які активують на деяких певних відбувається подія.
Ви можете перевірити документацію для отримання повної інформації.
Отже, давайте подивимося. Ми хочемо, щоб приховати або показати вікно,
але зараз ця кнопка нічого не робить, тому що я не виконав його ще.
Я збираюся піти у фактичних HTML сторінки.
Ось слайд. Там в DIV для слайда.
Він має клас слайда.
Там в тексті. Тепер, є цей прапорець і кнопку скриньки.
Як би ми насправді зробити це зникнути?
Перш за все, давайте напишемо функцію, яка робить текстове вікно ID зникають.
Це синтаксис Funtion, давайте просто називати це hideTheBox.
Вона не приймає ніяких аргументів, тому що немає ніяких аргументів, які повинні бути прийняті.
Ми можемо вибрати поле Ідентифікатор.
Таким чином, використовуючи JQuery вибору, ми можемо вибрати вікно ID,
а потім просто змусити його зникнути.
Давайте зробимо це поступово зникають.
Якщо ми раптом ця функція в реальному консолі,
ми могли б визначити цю функцію, ми можемо називати hideTheBox, і вона працює.
Але ми хочемо, щоб це відбулося, коли кнопка натиснута насправді.
Щоб зробити це, ми повинні використовувати події.
Щоб прив'язати подію до деяких конкретних кнопки або деякі дії відбувається,
ми повинні вибрати елемент, що подія викличе -
або, що ініціюватиме подія, вибачте.
>> Отже, перш за все, давайте виберемо поле Код кнопки
тому що це кнопка, і тепер, для цієї кнопки,
ми хочемо створити анімацію при натисканні.
Тож цю функцію миші.
Вона дозволяє зв'язати іншу функцію до нього.
Ця функція приймає іншу функцію як аргумент
ми можемо передати у функцію hideTheBox,
і щоразу, коли ця кнопка натиснута, ця функція автоматично виконає.
Так що це буде працювати, якщо ми збережемо це, я оновлення,
і - одну секунду, мені дуже шкода.
Дозвольте мені виправити це дійсно швидко.
Добре. Там ми йдемо. Так що тепер поле зникає, коли ми натискаємо на кнопку.
Ми також можемо змінити це просто fadeToggle,
змінити його, щоб приховати або показати вікно,
і це також буде працювати теж, якщо ми оновлюємо.
Ми можемо приховати це, ми також можемо показати це, і що буде продовжувати працювати.
Інша справа, що ми можемо зробити, ми насправді не треба визначити цей hideTheBox функції
перед викликом функції миші.
Так замість визначення функції і виклик hideTheBox,
ми тільки збираємося називати це якщо ця річ кнопки.
Таким чином, ми можемо визначити його анонімно тут,
яка є функцією, яка має JavaScript.
Ви можете визначити функцію; нормально, ми б сказали, функції hideTheBox
з аргументами, але замість цього, ми можемо просто сказати не функціонують аргументів,
почати фігурної дужки, що визначають функції,
близько, що фігурної дужки, а потім просто визначити функцію тут,
протягом перших дужках і останньої дужкою
, Які відповідають аргументам функції миші.
Так що ми передаємо в цій функції, ми можемо скопіювати цей рядок коду прямо тут,
і що буде робити одне і те ж.
А тепер у нас немає цієї випадкової функції fadeTheBox
, Який сидить навколо без жодної видимої причини.
Функція була визначена анонімно, він не має імені.
Це буде виконуватися тільки коли ми натискаємо на кнопку скриньки.
Так освіжаючи, ще раз, ще раз, і ви можете бачити, що він все ще працює.
І от як створювати події.
>> Є багато різних подій, які ми можемо використовувати.
Я збираюся повернутися в режим за допомогою консолі, щоб просто показати вам, як вони працюють.
Ідентифікатори для кожного з цих відповідають кожній коробці.
Так це поле Клацніть ID, на цей раз ідентифікатором ключа, і цей мишу ID.
Ще одна річ, те, що є ця функція дії; а не вводити його кожного разу,
Я насправді пішов вперед і визначив цю функцію дії тут.
Він робить те ж саме, що і hideTheBox функції.
Він отримує цю коробку і або поступово змінюється воно зникає або його дюйма
І саме тому ми можемо використовувати його тут.
Так що, якщо ми натиснемо на цю Клацніть ID, ми хочемо зробити коробку зникати або з'являтися.
Це те ж саме, що і кнопка, яка у нас була в останньому слайді.
Тепер після того, як ми називаємо це, ми можемо натиснути на цю та вікно зникає,
потім клацніть на ньому знову і знову з'явиться вікно.
Це досить просто. Двічі клацніть робить те ж саме,
за винятком того, потрібно подвійне клацання.
Так що якщо ви клацніть на ній і натисніть на неї знову нічого не трапиться,
але якщо ви двічі клацніть швидко, то воно зникне.
Якщо ви двічі клацніть знову, він повернеться.
Так що це досить просто.
Введення з клавіатури трохи дивно, я не думаю, що це насправді працює в цьому прикладі
тому що ключ вниз, ключові і натисканням клавіші та інших ключових дій
НЕ активуєте незалежно від того, який елемент ви пов'язати його з.
Наприклад, навіть якщо я пов'язаний вниз для тіла або щось ще повністю,
то це обійшлося б активувати незалежно від того - це не конкретно.
Я не повинна бути перейшовши за цим і натисніть клавішу, щоб зробити що-небудь зникнути.
Було б бути активовані незалежно від того, елемент, який я в даний час перебуваю дюйма
Так що це насправді не працюють в даному прикладі
тому що він не впізнав мене, як введення внесок у DIV введення з клавіатури.
>> Але якщо ви подивитеся на дії миші,
Перший з них парять, і він може зробити деякі з цих використанням CSS.
Якщо ви використовуєте CSS, ви можете створити його так, щоб при наведенні на щось,
то його зміна стилю.
Але використання JQuery ви можете змінити стилі та інші речі.
Так, наприклад, ми збираємося називати дії, якщо ми наведемо курсор миші цієї дів.
Це означає, що якщо ми навести на неї, то вікно зникне.
Якщо ми будемо рухатися від нього, знову з'явиться вікно.
Якщо ми називаємо це і навести на неї, коробка дійсно зникає,
і як тільки ми йдемо, він повертається.
Якщо ми назвемо цю функцію при наведенні миші на ID,
що відповідає цій рамки, то, якщо ми наведемо курсор миші коробки,
Потім бокс буде насправді зникають - це буття фанк прямо зараз, але -
Якщо ми відійдемо від нього, він знову з'явиться. Зараз це тому з деяких причин.
Введіть миші і функції переміщення миші в чомусь схожі, але трохи відрізняється.
Миша ввести тільки активізується, коли миша входить в коробку, як і очікувалося.
Так що, якщо ви рухаєтеся в цьому, то воно зникне.
Але це не буде знову з'явиться, коли ви йдете, ви будете мати, щоб повернутися на нього для того, щоб повернутися.
Там також функції переміщення миші, яка буде активувати
коли миша навіть присутня в коробці.
Так що будемо просто продовжувати йти, Плавне поява і зникнення.
І це насправді Лісоповал - Це здається, що це просто зникають, і вийде,
але це насправді вхід набагато більше дій, ніж це,
тому, коли ви йдете він буде просто продовжувати йти, тому що увійшли як тисяча з них.
Може, не тисяча. Може бути, п'ять.
Він реєструє більше того.
Справа в тому, всі дії миші, є багато з них.
Ви можете прочитати про інших, але всі вони трохи відрізняються,
і ви можете вибрати ту, вам потрібно
для якої конкретної мети ви намагаєтесь зробити.
>> Наступне, що я хочу поговорити про те, AJAX.
AJAX, я знаю, ми не охопили JavaScript у стільки глибини в цьому році,
так що я просто буду говорити про AJAX взагалі ні на хвилину.
AJAX розшифровується як Asynchronous JavaScript і XML.
Це в основному, наприклад, коли ви на Facebook, і це штовхає вам повідомлення
це тому, що AJAX працює на вашому веб-браузері.
Кожні кілька секунд ваш браузер насправді
збираються сервери Facebook, питаючи їх, у вас є що-небудь нове для мене,
а потім він повертається до вас.
Це дозволяє відправляти запити на сервер
фактично без необхідності завантаження сторінки.
Так що нормально, якщо ви використовуєте тільки PHP і бази даних,
у вас є, щоб оновити сторінку, перш ніж отримати нову інформацію з сервера.
Але використання AJAX, можна потягнути за цю нову інформацію постійно,
або тягнути за нього, коли ви натискаєте на кнопку або що-небудь подібне.
Таким чином, це дозволяє нам посилати запити без перезавантаження сторінки,
і ми можемо використовувати або отримати або подайте запитів.
>> GET запити, наприклад, якщо вам в Google.com
і робити Q = тест. Це дає їм запиту тест.
І це GET запит, тому що це проходить в ці параметри в URL себе.
POST запит, як ніби ви відправляєте їх поштою.
Це, як ви покладете його в лист і відправити його до них,
але вони насправді не побачити вміст. Їх не видно в URL.
Ви не можете безпосередньо ввести його, ви повинні відправити його мало не потайки.
Це на посаді.
Але використання JQuery, ви можете зробити GET і POST запити
набагато легше, ніж ви зазвичай могли просто використанням JavaScript.
Ви можете запитати використанням API, отримуємо запити, і ви також можете перевірити інформацію для входу.
На наступній сторінці, я створив цей, який запитує: "Що у нас на обід?"
використанням Гарвардського їжу API, так що давайте тягнути, що вгору.
Це всього лише приклад того, як можна використовувати JQuery зробити GET запит до API
і отримати інформацію від нього.
Тому ми хочемо, щоб подивитись меню на сьогоднішній день,
і ми хочемо подивитися, що у нас на обід.
Ось URL створити GET запит у JQuery.
Ви використовуєте $. Отримати функцію.
Першим аргументом є URL, так що те, що Ви запиту.
Тоді наступний аргумент є функцією, яка виконується при GET запит виконано.
Таким чином, ви відсилають деякі запит на сервер, чекати його, щоб повернутися.
Коли він повернеться, ви збираєтеся зробити деякі дії з даними, що повернувся з сервера.
Давайте підемо далі і код це також.
Я не закодував це або, навмисне.
Ось що належить зробити. Перш за все, давайте використовувати прив'язку події
так що при натисканні на цю кнопку, ми посилаємо GET запит.
І коли це GET запит повертається з деякими даними,
ми збираємося записати його в цю ID DIV інформація їди.
Перш за все, давайте виберемо ID їжу кнопки.
Коли вона натиснута, ми хочемо, щоб щось зробити.
Давайте просто зробити його анонімним фікція, як і раніше.
Можна обернути ці фігурні дужки,
і коли ця кнопка натиснута, ми хочемо послати GET запит
щоб перевірити, що у нас на обід.
Щоб зробити це, ми можемо просто типу в $. Отримати.
Це JQuery функції, використовуючи знак долара.
Це займе всього пару аргументів. Першим з них є URL,
друга функція зворотного виклику, функції, спричиненої
коли це насправді повертає запит.
Давайте просто побудувати URL в першу чергу.
Ми можемо отримати його з API, що Давид написав.
Рух тут, ми можемо бачити, що це food.cs50.net/api/1.3/menus,
а потім ви просто передаєте в назвах параметрів, які ви хотіли б.
Таким параметром 1 Значення 1.
Схоже, що стандарт дати, дати початку, за замовчуванням сьогодні
Якщо ви нічого не введете, а також дата закінчення за замовчуванням
на сьогодні, якщо ви нічого не введете.
Це те, що ми хочемо. Ми хочемо, щоб просто отримати інформацію на сьогоднішній день.
>> Ми хочемо, щоб формат, який буде в JSON.
Ось тільки довільні, ви можете використовувати будь-яку форму, яку ви хочете.
Ви можете використовувати CSV, JSON, але це нотації об'єктів JavaScript.
Це дуже легко для JavaScript, щоб зрозуміти, що це означає,
і ми можемо надрукувати його більш легко, що шлях.
Отже, давайте просити його в JSON, і запит обіду давай.
Так їжі = обіду. Просто, щоб описати, що URL, ми йдемо сюди.
Там в меню. Першим параметром є вихід = JSON
тому що це те, що ми хочемо, і ви розділите з параметрами і.
Другий параметр - Я не пам'ятаю.
Харчування. І ми хочемо обіду =.
Ви можете перевірити це URL, внісши її в адресний рядок браузера і йти в нього.
Це дасть вам деяке вихід. Це просто купа речей, що у нас на обід.
Саме в цьому форматі потворним. Ми хочемо роздрукувати на нашій сторінці в кращому форматі.
Так URL правильний, Тепер нам потрібно написати функцію
передзвонити при успішному виконанні запиту.
Ця функція буде фактично приймати аргумент. Це буде даних.
Даних є те, що повертається з GET запит після GET запит робиться.
Ми можемо зробити фігурні дужки; тут ми пишемо анонімні функції
, Яка виконує, використовуючи ці дані, коли ми отримуємо інформацію назад.
Так що дані, коли ми набрали в цьому URL,
це те, що дані збирається виглядати. Це збирається бути ця величезна рядок.
Але добре те, JavaScript може розібрати його за допомогою JSON.parse функції.
Тому давайте створимо нову змінну по імені розбору даних.
І аналізувати дані масиву об'єктів.
Кожен об'єкт містить інформацію, таку як - ну, давайте подивимося.
Вона має дати, їжа, категорія, рецепт, всі ці інші речі.
Так що давайте просто роздрукувати ім'я для кожного з них.
Переберемо цілий ряд речей, які ми повернемося з цього,
і просто роздрукувати кожен - виведення назви кожного з них.
Це цикл.
>> JavaScript має корисні синтаксису, де ви можете створити змінну і петля над масивом,
Var і я просто ітератора, щоб замість того, щоб робити Var = 0,
Я був менше, ніж довжина, я + +, ви можете просто зробити УАГ я в аналізованих даних.
У цьому прикладі аналізованих даних (I) відповідатиме поточним елементом
масиву, фактичне об'єкта.
І ми хочемо, щоб отримати ім'я з нього.
Так що давайте просто робити ім'я.
І остання річ, ми збираємося мати деякі JQuery знову.
Насправді додати його в DIV, DIV цю їжу інформація, яка в даний момент порожній.
Так що давайте, що вибрати.
Ми будемо використовувати JQuery і виберіть їжі інформація DIV ID або ID їжі інформація, вибачте.
Ми хочемо додати до цього.
Якщо б ми зробили тест, наприклад, було б просто перезаписати його кожного разу.
Так що ми можемо просто додати це.
Поточного елемента в масиві, ми отримаємо ім'я з нього,
і ми додамо його в кінці ID DIV інформація їди.
А потім просто, щоб зробити її більш чистою,
ми також додаємо рядка так що це не все в одному рядку.
Так що, якщо все піде добре, то має бути добре -
Перш за все, всякий раз, коли ця кнопка натиснута,
він пошле з GET запит до цього URL.
Коли дані повертається від нього, це буде розібрати його,
перетворити його в JSON, петля на весь масив, що представляє, що дані,
а потім додасте ім'я і рядки
до кожного рядка в цьому ID їжі інформацію, яка раніше була порожньою.
Так повертаючись до цієї сторінки буде оновлено,
клік, з'ясувати - вона не працює. Це сумно.
І ось тут приходить дюйма налагодження
Index.html, лінії 1.
Цікаво.
Добре, ну, а не витрачати час, роблячи це, я просто збираюся
підтягнути зробити файл, який у мене є, який є завершеною версією.
Я не впевнений, в чому різниця, але ми можемо просто відкрити це замість цього.
І ми йдемо до AJAX, і це повинно працювати правильно.
Це те, що було на обід сьогодні,
Зокрема, немає порядку, з лапками навколо нього, так що це не найкрасивіша.
Але, очевидно, якщо ви робите це для остаточного проекту,
Ви хотіли, щоб вона виглядала краще.
Але це всього лише простий приклад того, як ви робите GET запиту.
І якщо ми подивимося на реальний код, я припускаю, що, я впевнений,
він як і раніше в значній мірі те ж саме.
Ой, я забув, щоб перетворити його в рядок, от і все.
Ні, він як і раніше не працює. Незважаючи на це, ось фактична завершено код
за те, що це має виглядати,
і він робить те ж саме, що я тільки що реалізовано.
Коли ви натискаєте на кнопку, вона використовує GET JSON для автоматичного розбору даних.
Він приймає дані від нього і перебирає весь масив
і друкує - все, що сьогодні на обід, назва його,
і додає розрив рядка після кожного рядка.
Це, як ви використовуєте функцію GET.
>> Ви також можете використовувати пост, який у мене не було часу
підправити приклад для цього, але ми можемо подивитися на документацію.
Якщо ви подивитеся на jquery.post,
Ви можете бачити, що це майже те ж саме.
У вас є URL, але замість передачі параметрів за допомогою -
просто покласти їх в рядок для URL собі,
ви повинні пройти в цьому змінні дані
що в основному масив, словник, який відображає параметри в значення.
Ви проходите, що в, і що відправляє їх за допомогою POST.
І як тільки ви це, то ви можете мати успіх функцію
який виконується, коли дані повертається.
В іншому випадку, це точно так само. Таким чином, використовуючи POST,
Ви можете використовувати POST, наприклад, якщо у вас є форма введення
Ви дозволяєте людям паролі входу в нього, і відправити ці паролі від
до серверних сценарієм, щоб перевірити в базі даних, чи що користувач є дійсним чи ні.
Ви можете зробити це все з використанням JQuery замість того, щоб оновити сторінку взагалі.
Ось як я реалізував у своєму блозі, що я показав вам раніше.
Якщо ми підемо до кінця портал і вийти з системи, вийти з системи,
Вийти не працює.
Ну, дозвольте мені відкрити його в новому вікні.
Тут є пароль, а я збирався ввести щось випадкове.
Вона не працює, але ви можете бачити, що ми не
насправді потрібно оновити сторінку взагалі.
Коду, якщо ви хочете поглянути на неї,
Все це доступно тут.
Таким чином, код, який я написав минулого року деякий час.
Як ви можете бачити тут, ми посилаємо запит POST.
У мене є файл з ім'ям login.php в задній частині,
яка перевіряє, чи є пароль єдині.
Параметрів ми передаємо тільки за допомогою пароля, відображається на
входу, в цьому полі собі.
І коли дані повернеться, ми перевіряємо.
Якщо дані неправдиві, то говорять, неправильний пароль, перемістіть його вниз,
і просто змусити його зникнути після цього.
В іншому випадку, ми завантажуємо сторінку адміністратора.
І все це було зроблено за допомогою JSON.
У цьому багато рядків коду, ви можете просто передати дані на сервер даних,
перевірка чи є він правильний, перевірте, що авторизація пройшла успішно,
і насправді відповісти на нього, перенаправлення людини на потрібну сторінку
або не даючи їм увійти і говорив їм, що у них був неправильний пароль.
Ось приклад того, як ви могли б використовувати JQuery POST
відправити POST запит до задньої частини,
перевірки, чи є хтось авторизація пройшла успішно.
>> Гаразд, так що всі приклади, які я мав, і все те, що я хотів, щоб покрити.
Такі основні речі, які JQuery дозволяє вам робити:
вибрати елементи, змінювати їх за допомогою DOM маніпуляції,
Ви можете додати ефекти, активізують речі на певні події,
а також робити запити AJAX дуже легко і просто.
Так що спасибі, що прийшли або дивитися,
і якщо у вас є які-небудь питання, просто дайте мені знати. Так?
[Студент] тому, коли ви показали, потрібно було JSON після POST запиту в лапках,
і мені було просто цікаво, що це зробив.
>> Так, я бачу. Питання полягало в тому, що в прикладі, який я тільки що показав,
було слово JSON в лапки -
Я просто потягніть його вгору, знову - навколо поста функції.
Я просто потягнувши його вгору, щоб показати.
Отже, ось цей пост запит, і є ця JSON в лапки.
Це просто визначає, що ми очікуємо вихід бути.
Так, якщо ми передамо в JSON як очікуваний тип даних,
це не вимога, але якщо ми пройдемо його,
то дані будуть автоматично аналізуватися як JSON.
Таким чином, ми не повинні викликати функцію розбору JSON на ньому,
це буде просто відбуватися автоматично.
І якщо ви подивитеся на документацію поштою,
Тобто ця мінлива тип даних, тип даних, очікувані від сервера.
За замовчуванням має обгрунтовані припущення, що може бути не так,
так що ви можете залишити його порожнім, але це всього лише тип даних
в кодуванні, що ви використовуєте, будь то JSON або XML або щось ще.
>> Будь-які інші питання?
Добре. Якщо у Вас є які-небудь питання, не соромтеся, пишіть мені
на vshekhawat@college.harvard.edu,
і слайди і код повинен бути доступні в Інтернеті досить скоро.
Успіхів вам у ваших остаточних проектів, сподіваюся, що ви використовуєте JQuery.
[CS50.TV]