[Powered by Google Translate] [Viikko 9] [David J. Malan - Harvardin yliopisto] [Tämä on CS50. - CS50.TV] Selvä. Tervetuloa takaisin. Tämä on CS50, ja tämä on alku viikon 9. Tänään keskitytään erityisesti suunnitteluun, ei enää yhteydessä C mutta yhteydessä PHP ja vähän SQL ja vähän JavaScript, erityisesti kohti loppua sekä PSET 7 ja myös oman opinnäytetyön. Itse asiassa, jos olet tuolloin lopullisessa projektissa jossa oletettavasti on tunti tai niin sitten olet ainakin aloittanut pohtimaan lopulliseen projektin ja olet ajatellut haluat tehdä yhteistyötä 1 tai 2 luokkatoverit, Jos sinulla on ongelmia yhteyden kanssa sanoi luokkatoverit, vapaasti täyttää lomakkeen osoitteessa cs50.net/partners/form. Se vain kysyy, kuka olet, mitä projekti olet ajatellut, missä asut vain logistisista syistä. Ja sitten jos haluat pitää silmällä yli ensi viikolla tai niin laskentataulukon URL siellä, voit nähdä vain luku-versiota Google doc jossa olemme tiedonkeruumenettely. Joten jos haluat työskennellä jonkun kanssa, kaikin keinoin rohkeasti tavoittaa ihmisiä kautta, että mekanismi. Mutta suurin osa ihmiset tekevät työtä yksin. Se on täysin kunnossa. Joten älä tunne, että tämä on mitenkään pakollista. Perjantaina se oli vain minä ja muutama joukkue täällä, tyhjä teatteri suurimmaksi osaksi. Siellä oli 3 turisteja istumaan siellä, joten se oli hieman hankala. Mistä puhuimme oli tietokannat ja puhuimme PSET 7 vähän. Ja jos et satut kiinni että video ihan vielä, se on hienoa. Yritän määritellä mitään ehtoja, että me muuten itsestäänselvyytenä perustuu perjantain luento. 

Mutta tänään aiomme yrittää saada sinut kohtaan ei vain pysty tekemään jotain PSET 7 mutta todella ymmärtää missä mennään alla huppu, erityisesti joitakin abstraktioita, että käyttöön vuonna functions.php tiedosto tehdä elämää vähän helpompaa, mutta niin, että lopulta ymmärrät niin, että kun apupyörät irtoa muutaman viikon voi edelleen hengissä todellisessa maailmassa ja tehdä tätä kamaa ilman CS50 kehyksen alla sinua. Tämä $ _SESSION, niille teistä, jotka ovat tuttuja tai jotka jo kiinni video perjantaina, mitä SESSION tehkäämme in PHP-pohjainen web-sovellus? Tämä on superglobal muuttuja, joka tarkoittaa että se on hengeltään samanlaisia ​​GET ja POST ja muutamat muut, mutta mikä tämä juttu hyödyllinen? 

Mitä ISTUNTO käytetään? Joo. [Opiskelija] Logging in Anteeksi? [Opiskelija] Logging in Logging in Todellakin. Vuonna PSET 7 käytämme tämän istunnon superglobal helpottaa sisäänkirjautumista Ja mitä mukavaa tästä superglobal on, että se on assosiatiivinen array. Assosiatiivisia array, Recall, on vain erilaisia ​​mutta jonka indeksit ei enää tarvitse olla numeroita kuten 012. Ne voivat olla numeroita tai ne voivat olla jopa merkkijonoja. Joten jos olet sukeltanut PSET 7 vielä, ehkä muistavat, että säilytät avain nimeltä tunnus sisällä tämän assosiatiivisia array jonka arvo on jotain 123 - mitä tällä hetkellä kirjautuneen käyttäjän tunnus on. Motivaatio on se, että senkin jälkeen, kun käyttäjä on vieraillut localhost tai verkkosivuilla yleisemmin ja sitten he ovat kirjautuneena sisään, vaikka ne eivät osoita linkkiä tai palata minun verkkosivuilla 5 minuuttia tai jopa tunti tai jopa päivä, mutta he jättävät selainikkunan auki, tätä kautta superglobal voin muistaa, että he ovat kirjautuneet sisään 

Toisin sanoen, se antaa minulle mahdollisuuden tallentaa hieman pitkäaikaisen mitä haluan siitä käyttäjälle. Ja voit ajatella sitä todella niin inkarnaatio ostoskorin. Paikoissa, kuten Amazon ilmeisesti voit laittaa asiat oikeisiin ostoskoriin, mutta HTTP-protokollaa, joka antaa virtaa Web, on kansalaisuudeton siinä mielessä, että kun käyt sivustolla, suurimmaksi osaksi sinulla ei ole joitakin vakio verkkoyhteys välillä selaimen ja palvelimen. Heti olet ladannut HTML ja JPEG sekä GIF ja kaikki, yhteys menee pois ja sinulla on vain kopio HTML ja vaikka mitä palvelimelta. Mutta jos palvelin haluaa muistaa jotain sinusta, taakka on palvelin todella tallentaa nämä tiedot. Ja niin sinä ohjelmoija, joka on valvoa palvelimen voi laittaa melkein mitä haluat sisällä tämän superglobal assosiatiivisia array ja se on siellä seuraavan kerran, kun käyttäjä tulee takaisin, onko se minuutin tai jopa päiviä myöhemmin, elleivät he sulkevat selainikkunan jolloin SESSION häviää. Joten se lyhytaikainen varastointi, se ei pysyviä, ja se on tarkoitus mennä pois heti käyttäjä sulkee selaimensa - ei vain kyseisen välilehden, usein koko selaimen, siten tehokkaasti kirjautumassa käyttäjän ulos. Joten miten tämä asia on tosiasiallisesti toteutettu? Otetaanpa vilkaista yksinkertainen esimerkki tutustuimme perjantaina. Niille tunne, se oli niin yksinkertaista kuin tämä. Tämä on web-sivu, jonka ainoana tarkoituksena elämässä on kertoa kuinka monta kertaa olen käynyt tällä sivulla. Tämä on ensimmäinen kerta täällä maanantaina, että kävin sen, niin se sanoo 0 kertaa. 

Mutta jos aloitan uudelleenlastauksen tämän sivun, sanotaan 1 kerran, 2, 3, 4, 5, ja tämä lopulta vain pitää counting ylös, ylös, ylös, ylös, ylös joka kerta olen itse valitse Reload sitä. Joten miten tämä työ? Anna minun mennä sisälle tämän tiedoston nimeltä counter.php. Yläosa on kaikki sininen kommentteja, mutta mielenkiintoinen osa on täällä. On line 13 me kutsumme tätä toimintoa session_start, ja se on kirjaimellisesti kaiken sinun ei tarvitse tehdä, jos haluat saada tätä erityistä superglobal nimeltään $ _SESSION. Tämä tekee siitä kaiken mahdollisen, ja näemme hetken miten tämä kaikki on mahdollista. Linjassa 16 huomaa, mitä olen tekemässä. Jos avain, jota kutsutaan vasta - toisin sanoen, indeksin arvo - "laskuri" sisällä on tämän array kutsutaan istuntoon, niin mitä teen sen kanssa linjan alla? Mikä on line 18 tekee? 

[Äänetön opiskelija vastausta] Mikä tuo on? [Opiskelija] tallentaminen arvoa. Hyvä. Se tallennetaan arvo, joka on koolla juuri nyt uuden paikallisen väliaikainen muuttuja, $ Laskuri pieniksi. Huomaa, että PHP on jo nyt hieman laiska tässä. Ilmoitus meillä ei ole mitään mainintaa int tai float tai merkkijono tai jotain sellaista koska PHP on heikosti kirjoitettu, jolloin sinun ei tarvitse määrittää tyypin muuttuja, ja tässä tapauksessa täällä en ole edes ilmoittanut sitä vielä. Olen julistaa sisällä näitä aaltosulkeita ja toisin kuin C, tämä on todella kunnossa. Ei ole väliä kuinka syvästi sisäkkäisiä muuttujan ilmoitus on PHP - sisällä kihara ahdin, sisällä kihara ahdin ja vastaavat - se on sillä hetkellä olemassa jäljellä ohjelman parempaan tai huonompaan. Joten se tulee heti maailmanlaajuinen heti määrittelevät sen teemme täällä. 

Muuten, jos en löydä että siellä mitään SESSION superglobal, Olen ilmeisesti alustetaan tämän muuttujan laskuri 0, Näin vain olettaen käyttäjä ei ole koskaan ollut täällä ennen. Ja sitten tämä tietysti on inkrementoimalla laskuri miten? Olen päivittää arvon, joka on sisällä tämän assosiatiivisia array asettamalla se sama mikä laskuri hetkellä on + 1. Jos minä selaa täällä HTML sivun, se on oikeastaan ​​aika yksinkertainen. Kaikki olen itse tämän sivun, "Olet käynyt tässä sivustossa niin-ja-niin ajat." Ja tämä on PHP rakennelma. Jos et <? = Tämä vastaa käytännössä mitä toimintoa? On todella vastaa jotain printf, jonka olemme nähneet monta kertaa C, vaikka kuten ehkä tiedätte jo vuodesta spec PSET 7, Tulosta on myös toiminto, joka vain tulostaa jotain pois, se ei oikeastaan ​​käytä muotoa koodeja, ja voit itse sanoa kaiku samoin. He kaikki koskaan niin hieman erilainen, vaikka nettovaikutus on lopulta sama. Joten tämä käyttö yhtäsuuruusmerkki on vain eräänlainen tyylikäs tapa tehdä se lyhyemmin kuin ehkä muuten pysty. Niin, että kaikki tämän sivuston ei. Se tulostaa laskurin arvo. Miten tämä kaikki todella tapahtuu? Saatat muistaa viikko sitten aloimme etsiä alla huppu miten web-sivu toimii tällä Inspector välilehti. 

Chrome on tämä niin Mac-versio, Windows-versio, ja jopa Linux-versio, ja Firefox ja IE on samanlainen mekanismeissa sinulla sisäänrakennettu debuggeri sisällä selaimen. Katsotaanpa katsomaan seuraavaa. Meillä koko joukko välilehtien täällä, ja muistuttavat, että semmanpuoleisimmat on Elements, ja ei väliä kuinka godawful HTML-ja JavaScript on sivu, muistuttaa, että Elements välilehdellä voit itse selata HTML hierarkkisesti ja mukava ja siististi. Joten jos yrität oppia verkkosivuilla kuten Google tai Facebook tai oikeastaan ​​minkä tahansa sivuston, ymmärtää, että olet todennäköisesti paremmassa asemassa katsot lähdekoodin tällä tavalla sen sijaan, että ovat katsoneet raaka-lähde, joka voi olla sekaisin, kuten olemme nähneet erityisesti Googlen sivuilla. Joten jos vaan klikkaa Verkko-välilehteen täällä, Katsotaan mitä tapahtuu kun käyt tällä sivulla. Ensinnäkin haluan tyhjentää välimuistin. Aion mennä Asetukset Chrome ja siirry History ja sitten Poista kaikki selaustiedot. Saatat olla tottunut tähän muihin tarkoituksiin, [naurua] mutta kun se tulee kehittää sivustoja, se on todella hyödyllinen - jos naurat tiedät. [Naurua] Se on oikeastaan ​​todella hyödyllisiä, kun kehitetään sivustot, koska todellisuus on asioita, kuten evästeet ja asioita, kuten välimuistissa HTML-tiedostoja, välimuistissa JavaScript-tiedostot voi todella tulla iso päänsärky, koska jos jostain syystä selain päättää välimuistiin joitakin tiedoston ja silti olet tehnyt muutoksia, että tiedosto palvelimelle mutta selain ei ole oikeastaan ​​ymmärtänyt, että tiedosto on muuttunut ja siksi ei oikeastaan ​​ladata sen uudelleen, vaikka napsautat Päivitä-painiketta, yksi vuorenvarma tapoja vain varmista vika ei koodin kanssa, se kanssa käyttäytymistä selaimen, on mennä tänne selaimessasi ja vain tyhjentää koko historian, niin että ei ole mitään epäselvyyttä. 

Ja sitten jos todella haluat olla vainoharhainen, sulje selain, käynnistä se, ja varmista kaikki toimii odotetulla tavalla. Eli lyhyesti sanottuna, välimuistin tyhjentäminen on hyvä kun teet kehitystä. Joten tässä meillä on Verkko-välilehti. Olen aiemmin ollut vieraillut sivuilla 9 kertaa, mutta anna minun mennä eteenpäin nyt ja osoita Päivitä. Ja olen takaisin alas 0. Katsotaanpa todella nähdä, miten se on, että tämä istunto superglobal pannaan täytäntöön. Aion klikkaa 1 HTTP-pyynnön, joka tehtiin, ja tämä virheenkorjaus ikkuna antaa minun kurkistaa tuon. Näen tässä vain palvelimen vastausta, joka ei ole kiinnostava. Olen nähnyt tämän monin tavoin. Mutta mitä teknisesti mielenkiintoisia ovat otsikot. Jos minä selaa täällä ja keskittyä pyyntö otsikot ja napsauta Lähdekoodi, mitä aion nähdä on kirjaimellisesti HTTP pyyntö että vain meni minun selaimen palvelimelle, GET on tärkeä sana ja sitten / counter.php on tiedoston nimi, HTTP/1.1 vain olemalla versio HTTP että minun selain käyttää. Tämä linja tässä hieman muistutus selaimella palvelimeen mitä palvelimen nimi on että se haluaa puhua. Ja sitten loput tästä on joskus mielenkiintoinen, mutta ei asiaa juuri nyt. 

Tämä on vain eräänlainen uteliaisuus. Cryptic vaikka tämä merkkijono on aina selaimesi vierailee sivustolla se ilmoittaa palvelimelle, mitä selainta käytät ja mitä käyttöjärjestelmää käytät ja mitä versiota siitä. Joten jos olet koskaan miettinyt kuinka sivustot kuten CNN ja vaikka mitä mitä prosenttiosuudet ovat Mac-käyttäjät Webissä, PC-käyttäjät, IE: n käyttäjät, Chromen käyttäjät ja vastaavat, se johtuu meidän kaikkien selainten kertovat jokainen sivusto siellä mitä me olemme. Se ei välttämättä sisällä henkilötietoja, mutta se ei kerro palvelimelle, mitä IP-osoite on ja mitä selaimen ja käyttöjärjestelmän käytät. Niin, että jos tämä tieto on. Mutta mitä enemmän mielenkiintoista nyt kun on näitä istuntoja on vastaus otsikon. Saanen napsauta Lähdekoodi vieressä vasteen. Mitä mielenkiintoista tässä on muutamia asioita. 1, tulimme takaisin tilakoodin 200. Emme koskaan näe tämän tilakoodin koska se tarkoittaa, että kaikki on hyvin. Se tarkoittaa kirjaimellisesti kunnossa toisin kuin jotain muuta. Mikä numero joskus nähdä se paha? [Opiskelija] 404. 404, tiedostoa ei löytynyt, 403 saatat törmää jo, joka on kielletty, mikä tarkoittaa olet unohtanut chmod jotain, todennäköisesti. Ja siellä nippu muita. 

Tänne, tämä on vähän hullu. Oikeastaan ​​kirjoitin tämän tiedoston muutama minuutti sitten liittämällä se osaksi gedit. Miksi tämä sivu päättyy vuonna 1981 ennen siellä todella oli Web? Mitä siellä tapahtuu? 

[Äänetön opiskelija vastausta] aikaleima. Mutta miksi? Se on jokseenkin mielivaltainen, mutta se on todella hyödyllinen. Mitä tämä sanoo minun selain on tämän PHP tiedosto olet juuri pyytänyt jo päättynyt. Itse asiassa se päättyi 30 vuotta sitten. Mutta mitä se oikeastaan ​​tarkoittaa? Se vain tarkoittaa, kun käyttäjä seuraavan kerran vierailee tämän sivun, joko uudelleenlastaus tai kirjoittamalla URL-osoitteen osoiteriville, varmista, että olet mennä ja noutaa uuden kopion. Tämä on eräänlainen esimerkki välimuistin selättäminen, tyhmä sana, joka tarkoittaa vain yrittää hillitä selaimet alkaen todella välimuistiin HTML, joka on lähetetty palvelimelta niin että et vahingossa osui reload ja sitten nähdä saman tiedoston versio. Sinä todella haluavat palvelin lähettää uuden kopion. Niin, että se on 1981 tarkoittaa vain sitä, että se mitä laite valitsemalla mielivaltainen päivää aikaisemmin. Mutta todellinen mehukas linja on nyt tämä. Jo ennen 50 olet luultavasti hämärästi tuttu evästeet. Mitä nyt, etenkin niiden vähemmän mukavaa tai siltä väliltä, Mikä on evästeen ymmärtämään juuri nyt vaikka olemme aikeissa tehdä ymmärrystä enemmän teknistä? Mikä eväste? Joo. [Opiskelija] Tietoa käyttäjälle, kuin jos he ovat kirjoittaneet heidän käyttäjätunnus tai jotain. 

Hyvä. Se tietoja käyttäjän, ovatko he kirjoitetaan heidän käyttäjätunnus jo. Evästeet ovat tapa, jolla palvelimia voi muistaa jotain käyttäjä. Ja mitä eväste oikeastaan ​​on on tekstitiedosto tai jokin sarja tavuja joka on istuttanut palvelimen sisällä selaimen, ja sisältä että tiedoston tai joukossa tavua on jonkinlainen tunniste. Ehkä se on kirjaimellisesti käyttäjätunnuksesi, mutta usein se on jotain enemmän arvoituksellinen näyttäviä näin asia tässä - bo8dal3ct ja niin edelleen - tämä on todella iso aakkosnumeerinen merkkijono joka on oikeastaan ​​vain tarkoitus olla yksilöllinen tunniste sinulle. Tai voit ajatella sitä tavallaan virtuaalisen käden leima. Jos menet johonkin klubin tai huvipuisto, muistaa, että olet todellisuudessa maksanut ja mennyt, ne laittaa pieni punainen tarra käteen jonkinlaisia, ja joka muistuttaa ihmisiä tiskillä, että olet jo maksanut ja voit tulla ja mennä kuten haluat. Evästeet ovat hieman samanlainen hengeltään että. Ensimmäistä kertaa kävin tällä sivustolla, kuten juuri tein tyhjentämisen jälkeen välimuistin, web-palvelin, laite tässä tapauksessa laittaa leima käteni jonka nimi on PHPSESSID, session ID, joiden arvo on tämä todella pitkä aakkosnumeerinen merkkijono. 

Niin, että nyt tavallaan emblazoned käteni niin että seuraavan kerran osuin reload tai manuaalisesti käydä tätä URL selaimessa, selaimeni määritelmän HTTP aikoo esittää käteen leiman uudestaan ​​ja uudestaan ​​ja uudestaan. Joten vaikka palvelin ei välttämättä tiedä, kuka olen, he ainakin tietävät, että olen sama käyttäjä tai ainakin tarkemmin, sama selain. Ja niin tämä on lopulta kuinka SESSION superglobal toteutetaan. Palvelin ei ole aavistustakaan kuka olet, kun olet uudelleen verkkosivuilla toisen tai kolmannen kerran jos esität tämän käden leima. Ja heti kun esittää että käden leima, Web-palvelin olennaisesti menee vähän tietokantaan oman ja tarkastukset, okei, olen juuri nähnyt käden leima käyttäjän bo8dal3ct ja niin edelleen. Haluan nähdä, mitä tietoa ohjelmoija on tallennettu sisäpuolelle superglobal tästä käyttäjästä, ja sitten haluan varmistaa, että tiedot ovat jälleen sisällä SESSION superglobal niin että ohjelmoija voi uudelleen käyttää tietojen vaikka se oli asetettu joitakin minuutteja tai tunteja sitten. Eli toisin sanoen, evästeet, joka sai huono rap jonkin aikaa koska epävarmuus selaimissa ja he voivat todella rikkoa yksityisyyttä ja kaikki tämä, he todella ovat erinomainen apuväline, koska ilman niitä olisit jatkuvasti olla kirjautumalla jokaisen Facebook-sivulla osoitteessa tai jokainen Gmail sähköpostin lukea, jos selain ei ole jotenkin muistaa että olet jo todennettu. 

Joten tällä tavalla evästeet lähetetään edestakaisin koko johto. Toinen uteliaisuus evästeistä, etenkin täällä, että tämä on täysin suojaamattomana. Ei ole salausta täällä mitään, ja todellakin olen HTTP tällä hetkellä. Yksi meidän suosikkeja hetkiä CS50, joka on nyt 2 vuotta sitten, oli noin aika työkalu nimeltään Firesheep tuli ulos. Tämä oli ilmainen pala ohjelmisto, joka tehtiin tietoturvatutkija koska herätys yhteisön sanoa kuinka atrociously täytäntöön tietyt todentamismenetelmiä Webissä olivat. Joten jonkin aikaa, Facebook oli lähes kokonaan HTTP, no HTTPS. Ja vaikka sinulla ei ole aavistustakaan kuinka Crypto toimii S on turvallinen niin se tarkoittaa, että on ainakin joitakin salattuja. Facebook ei salata käyttäjänimet ja salasanat, mutta heti kun katsoin sinun pokes tai viestejä tai uutissyöte, kaikki tämä on salaamaton. Niin oli Gmail asti vain vuosi tai 2 sitten. Aina olet kirjautunut sisään, kyllä, he käyttivät turvallisen salauksen mutta sen jälkeen he eivät. Ja miksi se voisi olla? Miksi ei vain käyttää salausta koko ajan käytössä jutuissa? Mikä tuo on? Taisin kuulla jotain. [Opiskelija] Speed. Nopeus, eikö? On olemassa tapoja kiertää tämän. Mutta jos vain sellainen ajatella loogisesti, jos salaat jotain, sinun täytyy tehdä ainakin hieman enemmän työtä. Vuonna PSET 2, kun toteutetaan Caesar tai Vigenere tai jopa Crack, vain tulostus merkkijono on suhteellisen helppoa. Salaaminen ja sitten tulostaa merkkijonon minimaalisesti vaatii hieman enemmän työtä. 

 Super suositut sivustot, kuten Google ja Facebook, Jos sinun täytyy tehdä enemmän työtä jokaiselle käyttäjälle jokaisen sivun he käyvät, että vain vie enemmän CPU aikaa. Ja jos tarvitset enemmän CPU aikaa, ehkä enemmän palvelimia, mikä tarkoittaa saatat tarvita enemmän rahaa. Ja niin monta vuotta tämä vain todella ollut parhaita käytäntöjä. Ihmiset käyttävät SSL-salausta vain, jos ne tarvitaan. Mutta kävikin, ja koska tämä kaveri kanssa Firesheep tehnyt erittäin selväksi, kun te, jotka ovat tällä hetkellä Facebookissa juuri nyt - Uteliaisuudesta, katsotaanpa jos sinulla fess ylös. Jos olet Facebookissa nyt joissakin välilehdellä, vaikka se ei ole vastaavasti etusijalle, on URL HTTP tai HTTPS? [Useita opiskelijoita] S. S? [Naurua] Okei. Jokainen HTTP? Vain 1? Okei. Joten kaikki voimme hakata että kaveri Facebook-tili nyt. Suurimmaksi osaksi tämä on tullut käytössä oletuksena ainakin joitakin sivustoja. Ja pitkän tarinan lyhyesti, jos web-liikennettä ei ole salattu, ei ainoastaan ​​HTML mennä edestakaisin WiFis salaamaton, joten älä asiat kuten evästeitä mennä edestakaisin koko ilma ilman minkäänlaista salausta. Joten jos sinulla on vain vähän ohjelmointia taju tai hieman Googling taitojen löytää ilmainen ohjelmisto, joka tekee tämän, sinun täytyy tehdä, on istua Starbucks tai istua lentokentällä missä on yleensä salaamaton WiFi ja vain katsella avainsanoja kuten Set-Cookie: tai PHPSESSID koska jos sinulla on tekninen taju vain katsella WiFi kaikkien bittien että virtaus koko ilmaa tätä mallia, voit sanoa, että kaveri PHPSESSID sattuu olemaan bo8dal ja niin edelleen. Ja sitten taas jos olet tarpeeksi teknisesti taju tai on oikea työkalu, voit vain uudelleen oman selaimen ryhtyä esittämään, että käsi leima ja Facebook.com, ja Facebook on juuri menossa oletetaan, että olet se kaveri koska kaikki tietävät ole kuka olet, mutta sinulla on tämä yksilöllinen tunniste. Joten jos varastaa että yksilöllinen tunniste ja esittää sen web-palvelimen oman, he ovat vain menossa näyttämään, että henkilön uutissyöte tai kyseisen henkilön viestejä tai pokes. 

Ja haluaisin Googlelle nyt miten aktivoida HTTPS Facebook ehkä. Mutta se on todellakin niin yksinkertaista. Ja niin Facebook ja Google ja vastaavat ovat saaneet todella hyvä tässä, mutta pitää silmällä sitäkin mitään verkkosivustoja, jotka eivät käytä HTTP ja on jonkinlainen arkaluonteisia tietoja niistä, onko se taloudellista tai henkilökohtaista tai vastaavaa. Jos he eivät käytä tätä, hyvin mahdollisesti voi evästeet näin hyvin helppo varastaa ja sitten taotut, ja juuri sitä Firesheep teki. Sinulla ei tarvitse olla ohjelmoija. Kaikki mitä oli tehtävä oli on Internet-yhteys, lataa tämä ilmainen työkalu, ja mitä se tekisi on olet kirjautunut sisään ja sitten se näyttää Facebook-nimet kaikkien vuonna Sanders, tässä nimenomaisessa esittelyä, ympärilläsi ja kaikki mitä oli tehtävä oli napsauttamalla niiden nimeä ja ohjelmistojen automatisoitu prosessi ja haistaa että evästeen, sen esittämistä Facebook kuin oma, ja voila, olet kirjautunut sisään Joten tämä on taas niitä "älä tee tätä" virallisesti. Jos sinulla on oma kotiverkko ja haluat korjailla, kaikin keinoin, mutta ymmärtää tämä ei läpäise linjan yliopiston ympäristössä. 

Mutta tavoitteena tässä on oikeastaan ​​korostaa ei miten tämä mutta miten puolustautua tällaisia ​​asioita. Ja triviaali ratkaisua, vaikka se itse on puutteellinen, on todella vähentää käyttöä sivustoissa, jotka eivät käytä HTTPS jatkuvasti. Joten sivustot kuten Facebook ja Google yhä olla valintaruudut jossa voit valita sisään tällaista asiaa, ja pankit ovat joutuneet tämän vuosia samoista syistä. Joten hieman pelko tekijä, jos voimme. Mutta siinä se pähkinänkuoressa. Näin palvelin muistaa, kuka olet. Ja heti kun he muistavat kuka olet, he voivat muistaa mitään sinusta että ohjelmoija on tallennettu sisällä tämän erityisen superglobal nimeltään $ _SESSION. Ja PSET 7 käytämme sitä triviaalisti vain muistaa int- eli yksilöllinen tunnus, että käyttäjä, joka on kirjautunut sisään, jotta tiedämme he ovat olleet siellä ennen. Kaikki kysymykset sitten istuntoja tai evästeitä tai vastaavia? Firesheep ei toimi niin hyvin enää, ja sinun täytyy laittaa tietokoneesi erityinen siveetön tilassa niin olet todella kuuntelevat liikenteen lisäksi itsellenne. Joten jos olet parhaillaan ladata Firesheep, ymmärtää se ei ole aivan niin helppoa koska se kerran oli osoittaa. Selvä. Ja älä tee sitä Sanders. Tee se kotona. Tietokannat. Yksi asioista, teimme PSET 7 erittäin harkitusti oli annamme sinulle mallitietokannan taulukon käyttäjille että on joitakin käyttäjätunnuksia, jotkut käyttäjätunnukset ja jotkut salattuja salasanoja siinä. Ja kuten näet, jos et ole jo, sinun täytyy muuttaa taulukon hieman. Olet menossa tarvitse lisätä joitakin välimuisti kullekin käyttäjien kyseisessä taulukossa, ja olet menossa on lisätä toisen historiaa pöytä, salkut pöytä, tai ehkä kutsua sitä jotain muuta. Mutta mitä ajatella miten tämä, katsotaanpa avata tämän työkalun joita käytimme perjantaina, mutta jos tunne, laite tulee työkalulla kutsutaan phpMyAdmin joka on sattumalta kirjoitettu PHP, mutta sen tarkoitus elämässä, kun olen kirjaudu sisään täällä jharvard kanssa karmiininpunainen, on antaa minulle käyttäjäystävällinen tapa tarkastella ja muuttaa tietokannasta. 

Tietokannan että olen käynnissä laite on nimeltään MySQL. Tämä on erittäin suosittu, ja se on ilmainen avoimen lähdekoodin tietokanta, joka on ihanan helppo käyttää, erityisesti etupäät näin. Mitä tämä työkalu sallii minun tehdä, esimerkiksi, on penkoa pöytiä. Anna minun mennä eteenpäin ja tehdä tätä. Perjantaina teimme taulukon nimeltä opiskelijoita että oli super yksinkertainen. Se oli 3 sarakkeet - id, nimi ja sähköpostiosoite - ja minä manuaalisesti lisätty pari riviä kuten David ja Mike tässä nimenomaisessa esimerkissä. Otetaanpa tähän hieman pidemmälle, ja oletetaan, että haluamme muistaa enemmän kuin vain nimi ja sähköpostiosoite noin käyttäjälle. Saanen napsauttamalla Rakenne täällä ylhäällä. Ja vielä, PSET opastaa tarvittaviin toimiin tässä joten älä huolestu, jos osa tästä on vähän nopeasti. Sitten aion klikkaa tästä. Aion lisätä useita sarakkeita jälkeen sähköpostin koska haluan lisätä jotain talon. Unohdin tallentaa opiskelijan talossa. Saanen valitset Siirry, ja nyt meillä on tässä muodossa on valitettavasti hieman laaja vasemmalta oikealle, mutta aion soittaa nimeä alan talo, ja sitten tyypin I on nyt valittava. Joten on lyhyt jutella eri MySQL koska taas PHP on heikosti kirjoitettu ja se tavallaan pelaa vilunkia tyyppejä, tietokantaan, erityisesti se on erittäin tärkeää itse käyttää kirjoittamalla eduksesi koska yksi niistä asioista MySQL ja muut tietokantaan moottoreita voi tehdä sinulle on varmistaa, että et laita pöytälaatikkoyrityksiä tiedot tietokantaan. Tämä on tavallaan ilmainen virheentarkistusta käytössäsi. 

Talon emme tietenkään halua sitä olla int, joka on 32-bittinen arvo MySQL. Teimme puhua lyhyesti perjantaina noin varchar, joka tarkoittaa muuttuvan pituuden char. Mikä tämä on? Näin voit määrittää, että haluat tämän olla merkkijono jonkinlaisia. Et todellakaan tiedä etukäteen, kuinka kauan se on, niin me mielivaltaisesti sanoa talon nimi voi olla 255 merkkiä, mutta voisit mennä 32, 64 - mikä tahansa numero oikeasti. Mutta etu käyttää varchar yli kentän nimeltään char on mitä? Vain intuitiivisesti jos en selaa täällä, huomaat siellä nieriää ja siellä varchar. Varchar on vaihteleva pituus char, char on kiinteä pituus char. Joten perustua vain tätä määritelmää, mikä on hyödyksi tai haitaksi jokainen? Toisin sanoen, joka välittää eroa, tai miksi sinun pitäisi hoitaa? 

Joo. [Opiskelija] Varchar on enemmän joustavuutta, mutta vie enemmän muistia. Hyvä. Varchar vie enemmän - Katsotaan. En ole varma, jos olen kuullut oikein. Voitteko sanoa vielä kerran? [Opiskelija] sanoin varchar luultavasti on enemmän joustavuutta, mutta se vie enemmän muistia. Mielenkiintoista. Okei. Varchar luultavasti antaa sinulle enemmän joustavuutta, mutta vie enemmän muistia. Jälkimmäinen ei ole välttämättä totta. Se riippuu asiayhteydestä, mutta Palataan siihen. 

[Äänetön opiskelija vastausta] Aivan. Se on oikeastaan ​​niin, että char on yleensä käyttää enemmän muistia koska char, kuten C, on kuin merkkijono, se joukko merkkejä. Joten jos sanot char alalla pituus 255, tietokanta on kirjaimellisesti aio antaa teille 255 merkkiä. Ja jos talo päätyy MATHER ja 6 merkkiä yhteensä, tuhlaat yli 200 merkkiä. 

Joten varchar tehokkaasti käyttää vain niin monta merkkiä kuin on tarpeen enintään määrään. Mutta hinnan maksat on itse asiassa suorituskykyä, mahdollisesti. Jos tiedät etukäteen että kaikki jouset tulevat olemaan 8 merkkiä - Esimerkiksi Oletetaan, että tarvitset salasanat pituus 8 - ylösalaisin käyttää char kentän yhteydessä, mutta ei usein, on määrittää kiinteän pituuden jotain salasanaa koska nyt tietokantaan voi olla jopa älykkäämpiä. Jos se tietää, että jokainen char kenttä, joka merkkijono sarakkeessa on sama pituus, saat takaisin piirre random access. Voit hypätä noin kesken eri char kentät tietokannan taulukkoon koska ajattelevat tietokannan rivejä ja sarakkeita. Joten jos jokainen jouset on sama pituus, tiedät, että ensimmäinen on tavu 0, seuraava on tavu 8 ja sitten 16 ja sitten 24 ja niin edelleen. Eli jos kaikki jouset ovat samanpituiset, voit hypätä noin paljon tehokkaammin. Niin, että voi olla hyötyä suorituskyvyn, mutta tyypillisesti sinulla ei ole ylellisyyttä tietää etukäteen, joten varchar on tie. Tässä toinen yksityiskohta, että vaikka Facebook törmäsi lopulta. Ints ovat suuria, ja me tavallaan käyttää niitä oletuksena tahansa haluamme numero, mutta se on vain 32 bittiä. 

Ja vaikka Facebook ei aivan ole 4000000000 käyttäjiä nyt, siellä on varmasti joitakin ihmisiä siellä useita tilejä tai tilejä, jotka on avattu ja suljettu, ja niin Facebook itse uskon muutama vuosi sitten oli siirtyminen int on, kuten on osuvasti sanottu, bigint, joka on vain 64 bittiä sijaan. Joten tämäkin on suunnittelu päätös. Sinun olisi uskomattoman onnekas jos opinnäytetyö muuttuu käynnistyksen, on 4 miljardia euroa ja 1 käyttäjien, antaa tai ottaa, jolloin käytetään ints ehkä hieman lyhytnäköistä. Mutta todellisuudessa, käyttäjät pöytä on todennäköisesti hieno ints. Mutta jotain PSET 7, kuten teidän historia pöytä, saatat olla tuhansia, miljoonia käyttäjiä, jos kehittyä etrade.com. Joten taas et ehkä yli 4 miljardia käyttäjää, niille käyttäjille sinulla on ehkä enemmän kuin 4 miljardia maksutapahtumaa ajan - ostaa ja myy sekä asioita niiden historiasta. Joten jos et ennakoida - jälleen, nämä ovat hyviä ongelmista on, jos sinulla on paljon tietoa - jos et ennakoida tietoja ylittää koko int- menossa jotain bigint on suuntaa ei usein riitä hyväksynyt suunnittelijat koska ihmiset luku ei tule olemaan ongelma, mutta se on tämä helppo valita jotain suurempaa kuin se. Desimaali käytämme vuonna PSET 7, jossa määritellään kiinteä tarkkuus joten voit välttää kysymyksiä, joihin kellukkeet ja tuplaa ja realia ja vastaavat. 

Ja sitten on joitakin muita kenttiä täällä. Me heiluttaa käsiämme niitä jossain määrin. Mutta ajoista kaikilla on määrätty muodossa MySQL, ja etu tallentaa päivämäärät koska päivät eikä varchars tarkoittaa, että tietokanta voi todella muotoile ne eri formaatteja, onko Yhdysvaltojen muodossa tai eurooppalainen malli tms. - mutta haluat - paljon tehokkaammin kuin jos se olisi vain joitakin yleisiä varchar. Ja sitten on joitakin muita binary, varbinary, läiskä. Nämä ovat binääri suuria esineitä, ja voit myös tallentaa binaaridataa sekä geometriset tiedot tietokantaan. Mutta meille me yleensä välitä ints ja varchars ja vastaavat. Lopetetaan tätä esimerkiksi talon. Talo Aion mielivaltaisesti sanoa on 255 merkkiä. Sitten oletusarvo voisimme tehdä tämän. Voisimme oletuksena laittaa kaikille Mather Talo, esimerkiksi. Näin voisimme määrittää, että tietokanta olisi huolehdittava siitä, että joku on aina arvo. Mutta jätän sen olla. Itse asiassa, ihmiset, jotka elävät kampuksella eikä talossa, Ehkä olen itse haluan täsmentää, että oletusarvo talo on NULL, ja sitten minun täytyy tarkistaa tämä valintaruutu ja kertoa tietokanta on okei, jos käyttäjän talo on NULL. 

Tämäkin on toinen puolustusmekanismi voit ottaa käyttöön joten sinun ei tarvitse edes laittaa sen omaan PHP välttämättä. Tietokanta varmistaa, että asiat ovat tai eivät ole NULL. Ja sitten lopuksi, attribuutit. Mikään näistä ovat todella merkitystä. Binary, allekirjoittamaton - mikään näistä on merkitystä varchar. Index. Onko kukaan tiedä tai muista tai on arvaus siitä, mitä indeksi on jotain kuten talon? Tämäkin on todella tärkeä ja suhteellisen helppo malli päätös. Niille, jotka eivät vielä ole nähneet sitä, perjantaina puhuimme lyhyesti ensisijaisia ​​avaimia. Tietokantaan taulukon, perusavain on kenttä tai sarake joka yksilöi Taulukon rivit. Joten tässä taulukossa olemme tunnukset, meillä on nimet ja sähköpostit. Mikä näistä on paras ehdokas olla perusavain, jonka tehtävänä on tunnistaa rivit? Luultavasti tunnus. Ilmeisesti voisimme myös käyttää mitä vaikka? Ehkä voisit käyttää sähköpostia, koska teoriassa se on ainutlaatuinen ellei ihmiset jakavat sähköpostitilejä. Mutta tosiasia on, että jos käytät numeerinen tunnus, kuten 1234, se on vain 32 bittiä, kun taas sähköpostiosoitteen voisi olla näin monta tavua tai näin monta tavua. Joten tehokkuuden tunnistenimien, se on yleensä hyviä käytäntöjä vain käyttää int vaikka sinulla on joitakin merkkijono ehdokas että voisit todennäköisesti käyttää. 

Saat jotain talon, tämän ei pitäisi olla perusavain koska silloin vain 1 henkilö voisi elää Mather ja 1 henkilö Currier ja vastaavat. Samoin ei pitäisi olla ainutlaatuinen. Erotus ensiö-ja ainutlaatuinen, että siinä tapauksessa nykyiseen taulukon ID olisi ensisijainen, mutta sähköposti ei ole ensisijainen syystä juuri mainitsimme - suorituskyky - mutta se olisi silti olla yksilöllinen. Joten voit silti valvoa ainutlaatuisuutta tekemättä väitettä että se on erittäin tärkeä ensisijainen kenttä. Mutta tämä on varsin hyödyllistä: Index. Jos tiedät jo etukäteen opinnäytetyö, sillä PSET 7 tai yleisesti että tämän alan talo tulee olemaan jotain etsiä paljon käyttäen valitsemalla avainsanan tai jotain muuta, voit ennaltaehkäisevästi kertoa tietokantaan työtä sen taika ja varmista, että se luo muistiin mitään fancy tietorakenteet tarpeen nopeuttamaan hakuja perustuu talon. Ehkä se käyttää hash-taulukko, ehkä se käyttää linkitetty lista. Todellisuudessa, sillä on taipumus käyttää puu, usein rakennetta kutsutaan B-puu - ei binääripuu, mutta B-puu - mikä on erittäin laaja puu että saatat nähdä luokassa kuin CS124, tietorakenteiden luokkaa. Mutta lyhyt, sinun ei tarvitse huolehtia siitä, että käytettäessä Smart tietokantaohjelmisto. Voit vain kertoa sen, "Index tällä alalla niin voin hakea sen tehokkaammin." 

Jos jätät tämän pois ja yrität etsiä kaikille tietokannassa asuva Mather, se hajauttaa osaksi lineaarista hakua. Ja jos sinulla 6000 undergrads kaikki elävät joissakin talossa, aiot etsiä koko taulukosta löytää Matherites, katsoo, että jos sanot indeksi, toivottavasti se on jotain lähellä logaritmista haku löytää tuollaiset opiskelijoita. Tämä on vain ilmainen ominaisuus päälle, vaikka se ei tullut hintaan jonkin verran tilaa. Lopuksi, automaattinen kasvu, tämä AI kenttä, mikä tarkoittaa vain, jos se on int ja et halua välitä kasvattaa itse joka kerta on uusi käyttäjä, tarkista, että ja jokainen käyttäjä, joka saa lisätään automaattisesti saa uuden tunnuksen. Katsotaanpa valitse Tallenna, ja nyt etsitään vikaa tällä grafiikalla. Jos menen Selata, huomaa, että molemmat Mike ja taloni on NULL. Voin käyttää phpMyAdmin muokata manuaalisesti. Voin mennä tänne ja kirjoita Mather ja paina sitten Enter- ja nyt huomaa pöytä on erilainen. Mutta huomaa, että voisin tehdä jotain muutakin. Daavidin tunnus on 1, joten phpMyAdmin taas on vain hallinnollinen väline; tämä ei ole jotain käyttäjät eivät ikinä nähdä. Joten jos olen sen sijaan napsauttamalla SQL-välilehti ylös - ja jälleen PSET 7 esittelee sinulle enemmän nämä kyselyt - Voin itse suorittaa SQL Structured Query Language komento UPDATE käyttäjät SET house = 'Pfoho' WHERE id = 1. Nämä SQL-kyselyjä ovat kauniisti tarpeeksi, melko luettavissa vasemmalta oikealle. Päivitä käyttäjien taulukon, aseta kentän nimeltään talon Pfoho jos käyttäjän tunnus on 1. Tai voisin jopa tehdä missä email = 'malan@harvard.edu'. Niin kauan kuin joka yksilöi minulle, että toimisi yhtä hyvin. Mutta tunnus on yleensä parempaa suorituskykyä, joten Tehdään se. Mennään sitten Go. Okei, lecture.users ei ole olemassa. Mikä on minun virhe? Mikä pöydän todella kutsutaan täällä? Sitä kutsutaan opiskelijoita vain koska sitähän me teimme täällä ylhäällä vasemmalla. Sitä kutsutaan opiskelijoita, eikä käyttäjiä. Joten valitse Siirry nyt. 1 rivi vaikuttaa. Haku kesti 0,01 sekuntia. Jos minä klikkaa Selaa nyt, nyt Malan asuu Pfoho. Joten se on toinen maku SQL, mutta PSET opastaa vähän enemmän siitä. 

On typerää päätöstä olen jo tehnyt täällä. Väitän, että tämä Tietokannan suunnittelu on tehotonta koska useammat ihmiset minun lisätä opiskelijoiden taulukkoon, enemmän meistä aloitan lisäämällä enemmän TF aloitan lisäämällä, aiomme alkaa nähdä, mitä irtisanomisia tässä taulukossa? 

Joo. [Opiskelija] Seeing että se on opiskelijoiden, käytämme samaa [kuulumattomissa] Sama - Aivan, aivan. Joten jos 400 ihmistä asuu Mather, antaa tai ottaa, Lopulta tämä taulukko tulee olemaan 400 riviä, jotka sanovat "Mather," "Mather," "Mather", "Mather", "Mather." Me tuhlaamme kaikki nämä tavut, ja siellä on pari takeaways siellä. 1, siellä hullu nurkkaan silloin, jos joku maksaa paljon rahaa ja nimeää Mather, meillä on nyt muuttamassa koko tietokannan taulukkoon. Se ei tule tapahtumaan usein, vaikka Pfoho oli kerran kutsutaan Pohjois House 15 vuotta sitten, niin se tapahtuu. Mutta ei siinä kaikki, että pakottavia. Houkuttelevampia kuin nurkkaan tapaus kuin että tarvitsee päivittää tietoja irtotavarana sillä tietokanta on miksi tallentamiseen MATHER uudestaan ​​ja uudestaan ​​ja uudestaan ​​ja uudestaan? Se on paljon merkkiä, 6 merkkiä. Emmekö vieläkin paremmin, varsinkin Pforzheimer? Voimme varmasti tehdä paremmin kuin moni merkkiä. Miksi ei vain yhdistä yksilöllinen tunniste jokaisen talon ja myymälä että jokaiselle käyttäjälle? Joten kokeile tätä. Sen sijaan vain käyttää opiskelijoiden taulukkoa, anna minun mennä jopa minun luento tietokantaan täällä ylhäällä vasemmalla. Huomaa tässä sanotaan Luo taulukko. Saanen luoda uuden taulukon nimeltä taloja. Sarakkeiden määrä tulee olemaan 2. Enter. Nyt minulla on 2 kenttää. Aion kutsua tätä nimeä, ja se tulee olemaan varchar pituuden 255, 

mutta se on melko mielivaltainen. Sanon tämän tänne sopimuksin. Joten laita ID tänne. Annetaan jokaisen talon yksilöllinen tunniste. Annetaan jokaisen talon nimi. Katsotaanpa täsmennetään, että tunniste on allekirjoittamaton vain sopimuksen mukaan käyttää vain positiivisia lukuja. Mennään eteenpäin ja antaa tämän automaattisen lisäyksen kenttä nyt. Ja me tarvitsemme jotain muuta? Mennään eteenpäin ja valitse Tallenna. Nyt minulla on toisessa taulukossa. Ilmoitus koska syrjään tämä on hieman kryptinen SQL-komennon että sinulla olisi pitänyt kirjoittaa käsin, jos et käytä hallinnollista työkalua kuten phpMyAdmin. Joten toinen syy käytämme sitä. Se on ihanan hyödyllistä tavallaan pedagogisesti koska voit napsauttaa ympäri ja selvittää, miten asiat toimivat vain hieman kopioimalla mitä phpMyAdmin teki. Mutta luoda taulukko-komento on mitä juuri teloitettiin, ja tässä on minun taulukossa. Anna minun mennä eteenpäin nyt ja käyttää raaka SQL sijaan pelkistettyjen klikkaamalla Lisää-välilehden. Anna minun tehdä INSERT INTO taloja, ja aion sanoa nimeä talon tulee olemaan arvo "Mather". Siinä kaikki. Tämä syntaksi on hieman arvoituksellinen. Tämä on nimi kenttien haluamme lisätä. Nämä ovat arvoja haluamme lisätä noihin kenttiin. Minäpä valitse Siirry. 1 krs lisätty kesti 0,02 sekuntia. Saanen napsauta Selaa nyt. 

Ilmoitus jos valitset Selaa, siellä Mather, jonka tunnus on automaation numero 1. Anna minun tehdä toinen. Sallikaa minun mennä SQL-välilehti. INSERT INTO taloa. Nimen talon tulee olla arvo Pfoho ja niin edelleen. Go. Ja voin jatkaa tätä uudestaan ​​ja uudestaan ​​ja uudestaan. Tai jos kyllästyt käyttäen phpMyAdmin, voit vain käyttää Lisää-välilehden ja ei tarvitse kirjoittaa raaka SQL. Voit vain paukuttaa sitä nopeammin kirjoittamalla esimerkiksi Currier, Enter, ja nyt jos valitset Selaa, siellä Currier jossa tunnus on 3. Joten tämä on mitä me tarkoitamme automaattinen lisäys. Mutta nyt meidän täytyy korjata jotain opiskelijoita. Opiskelijoiden mitä tietotyyppi talon kentän nyt? Sen pitäisi olla int, eikö? Joten tavoite tässä on tekijä, sillä muuten tunnetaan normalisoida, taulukot joten emme säilytä tietoja tarpeettomasti missään minun taulukoita. Ja vielä, polku olimme täällä aikoo sanoa Mather, Mather, Mather, Mather, Pfoho, Pfoho, Pfoho, Pfoho, joka on erittäin tarpeeton kannalta tuhlausta, että merkkiä. Joten anna minun mennä eteenpäin ja muuttaa klikkaamalla rakenne, ja anna minun mennä eteenpäin ja ruksata talon kenttään, valitse Muuta ja nyt aion vaihtaa tämän olevan int. 255 ei ole enää merkitystä. Anna minun mennä eteenpäin ja sanoa, että on hienoa, jos se on vielä NULL. Tallenna. Nyt pöytä opiskelijat on muutettu onnistuneesti, ja huomaa taas talo on int. Kuten syrjään, sivuuttaa Suluissa kun se tulee ints. 

Tämä on legacy-syistä. Aikoinaan kun ei ole graafisia, voit sen sijaan oli komentoriviltä ympäristön, 10 ja 11 on määritelty, kuinka monta merkkiä pitäisi näkyä vuonna pääteikkunassa todella näyttää kentät. Sillä ei ole mitään tekemistä bittipituuden varsinaisen kentän, niin me vain sivuuttaa se nyt. Nyt minun täytyy mennä tähän taulukkoon. Ja jos David asuu Mather, talon pitäisi olla 0, joka on oletusarvo int arvo lähimpänä NULL. Hänen pitäisi asua talossa 1. Oletetaan mielivaltaisesti sanoa, että Mike asuu Pfoho, joten talon numero 2. Nyt minun pöydässäni näyttää hieman arvoituksellisesti. Mutta pitävät tehokkuutta. Olen nyt käyttäen vain 32 bittiä tunnistaa talon, mikä tarkoittaa, että on vain 1 kanoninen määritelmä taloni Mather ja Pfoho ja se on talojen taulukossa. Joten jos haluan nyt jälleen näitä taulukoita, ajattele sitä tällä tavalla. Täällä minulla on opiskelijoita pöytä, ja oikealla puolella on olemassa näitä numeroita, 1 ja 2. 1 on Mather, 2 on Pfoho. Meillä on samat arvot tässä toisessa taulukossa, joka on nimeltään talot, 1 ja 2 ja 3 ne 3 taloa. Mitä me nyt haluamme tehdä, on olla kyky koodin, PHP ja SQL- tavallaan jälleen näistä taulukoista, joissa jos nämä ovat opiskelijoita ja nämä ovat taloja, haluamme jotenkin yhdistää niin, että 1 linjojen kanssa 1, 2 riviä kanssa 2, ja jotta voimme selvittää, missä David ja missä Mike ja missä kaikki muutkin asuu. Voit tehdä tämän voimme suorittaa SQL-kyselyn kuten seuraavat. SELECT * FROM opiskelijoiden JOIN taloja - Ja nyt, mitä kenttiä haluamme liittyä päälle? Joten students.house = houses.id. 

Hieman arvoituksellinen, mutta tämä osa tarkoittaa kirjaimellisesti luoda uuden tilapäinen taulukko se tulos liittyä opiskelijoiden ja taloja. Ja miten haluat yhdistää vinkkejä sormiani täällä? Aseta opiskelijoiden talon kenttään sama talot "-kenttään. Ja jos minä nyt valitset Siirry, palaan mitä toivoin. David on Mather, Mike on Pfoho, ja näen myös yksilölliset tunnisteet. Mutta kohta on nyt minulla täydellinen taulukko. Ja niin takeaway täällä PSET 7 tai oikeastaan ​​opinnäytetyön: Jos huomaat, että olet tallentamatta tieto tarpeettomasti, onko se talo, ehkä se kaupunki, osavaltio ja ZIP jossa ZIP voi yleensä, mutta ei aina voida käyttää, koska yksilöllinen tunniste, älä mene läpi harjoituksen henkisesti ja sitten jotain phpMyAdmin factoring, että yhteiset tiedot, koska varsinkin sivustosi saa enemmän myös käytetään ja enemmän suosittu, näin varmistat, että kaikki on huippunopea, antamalla tietokantaan niin monta vinkkejä, ainutlaatuisuus kuin mahdollista. Se oli paljon. Kysyttävää? Selvä. Otetaanpa 5 minuutin tauko siellä ja koota. Selvä. Seuraavassa on esimerkki siitä, että on käytetty joitakin vuosia sitten kun otin CS161, joka on käyttöjärjestelmien luokassa college joka on tunnettu siitä, hämmästyttävä, mutta hullu paljon työtä, ja se keskittyy todella joitakin matalan tason ongelmia, joita syntyy käyttöjärjestelmissä ja myös jopa maailman tietokannoista. 

Tarina, joka kertoi minun professori, Margo Seltzer, että vuosi oli seuraava. Oletetaan, että sinulla on vähän asuntolan jääkaappi sinulle ja kämppäkaveri ja molemmat pidät maitoa. Joten tulet kotiin luokan yksi päivä, kämppis ei ole vielä olemassa, avaat jääkaapin, ja tajuat, "Oh damn, olemme ulkona maitoa." Joten sinä suljet jääkaappi, kävelet kadun CVS ja saada yhä pitkän linjan ostamaan maitoa CVS. Samalla sinun kämppäkaveri tulee kotiin hänen luokka, tulee huoneeseen, avaa jääkaapin todella haluavat maitoa, avaa jääkaappi ja "Hitto, ei maitoa." Joten hän sulkee jääkaappi, kävelee ulos ovesta, ja menee ABP tai muualla kuin CVS missä olet aio törmäävät toisiinsa mennä hakemaan maitoa. Tietenkin muutamaa minuuttia myöhemmin, molemmat saat takaisin kotiin ja nyt sinulla on kaksi kertaa niin paljon maitoa kuin sinä itse halusi. Ja on maitoa, nyt se tulee mennä huonosti, koska pidät maitoa mutta et todella maitoa, niin nyt sinulla on liikaa maitoa, joten se tulee hapan. Tämä on kauhea, kauhea tilanne. Mitä olisi voinut ratkaista tämän ahdinko olisit ensimmäinen kämppis kotona? Kyllä. [Opiskelija] Sinun olisi pitänyt jättää huomautuksen. [Naurua] Hyvä. Sinun olisi pitänyt jättää huomautuksen. Sinun olisi pitänyt laittaa Post-it note tms. sanomalla, "Gone maidon" ja sitten teidän kämppäkaveri käsitteellisesti olisi lukittu pois todella tekee niin. Tai voit mennä 1 askel eteenpäin. Voisit kirjaimellisesti lukita jääkaapin jonkinlainen Lukko, ja nyt sinun kämppäkaveri tulee kirjaimellisesti lukitaan ulos jääkaappi. Jos me yleistämään takaisin ohjelmoinnin, voit melkein ajatella jääkaapin jonkinlaisena muuttujan tai struct, jonkinlaisen säiliön tietoja. Ongelmana pohjimmiltaan tässä on, että molemmat teistä saivat tarkastaa tai lukea tilan tämän tietorakenteen, mutta näytettiin eri aikoina ja silti molemmat teitte päätöksen perustuu maailman tilaa noita eri ajankohtina. Joten jos olisitte lukittu jääkaappi, olisit ainakin välttää kämppis saamasta voinut tarkastaa maailman tilasta, joten hän ei olisi voinut tehdä saman päätöksen. Joten tietokantoja, kuten on käynyt ilmi, on tämä ongelma jatkuvasti. 

Katsotaan jos voimme rakentaa skenaario. Oletetaan, että olet tavallaan pahis ja menet Bank of America tai yksi muista paikoista neliö, joka on pari pankkiautomaatit vierekkäin, ja jotenkin tajunnut, miten kahtena Pankkiautomaattikortti - eivät kaikki, että kova. Se on vain magneettinauha. Ja niin, mitä haluat yrittää tehdä, on pelata tätä peliä jolloin laitat 1 kortin 1 kone, toinen kortti toiseen koneeseen, ja te pohjimmiltaan haluat yrittää nostaa rahaa samanaikaisesti, koska kuvitella, että tarina menee seuraavasti. Kone vasemmalla vie kortin ja PIN- ja sitten sanot, "Anna minulle 100 dollaria." ATM on ohjelmoitu ensin tehdä valitsemalla sen tietokantaan tai vastaava - mitä tietokantaa se käyttää - nähdä tämä käyttäjä on ainakin 100 dollaria hänen tilille? Jos näin on, niin sylkemään 100 dollaria ja vähentää 100 dollaria niiden tasapaino. Mutta tietysti jos on useampia koneita täällä tai useita tapoja tarkastaa tilaa että maailman pankkiholviin, kuinka paljon rahaa sinulla on, Oletetaan, että vain sattumalta koneen vasemmalla ja oikealla molemmat kysymään tuollaista suunnilleen samaan hetkellä. 

Ja tämä voi varmasti tapahtua. Pankkiautomaatit ovat tietokoneita näinä päivinä. Eli jos koneen vasemmalla sanoo: "Kyllä, olet vähintään $ 100," välin koneen oikealla sanoo: "Kyllä, olet vähintään $ 100," Sitten molemmat edetä loppuun ohjelmiaan ja todella sylkemään 100 dollaria ja sanoa: "Aiemmin sinulla oli 200 dollaria." "Haluan päivittää muuttujan nyt 100 dollaria jäljellä tilille." Mutta jos molemmat ovat tarkistaneet tilisi saldo ja totesi, että se on 200 dollaria ja molemmat tee matematiikka ja sanovat 200-100, koneet ovat mahdollisesti sylkäistä kaksi 100 dollaria laskut kunkin koneen mutta he vain päivittänyt summa tilin saldo on 100 dollaria. Toisin sanoen, olet ottanut 200 dollaria, mutta koska ne tarkastanut maailman tilasta samanaikaisesti ja sitten tehdään päätös perustuu tähän arvoon, he eivät tee matematiikkaa lopulta oikein. Joten pankin tilanne on myös todella haluat olla jonkinlainen lockout niin että heti kun olet tarkistanut tila joidenkin muuttujan se on todella tärkeää, kuten tilisi saldon, älä anna kenenkään muun tehdä päätöksiä, jotka perustuvat että kunnes olet valmis tekemässä juttusi, jos tässä tapauksessa olet ATM vasemmalla. Lukitse kaikki muut pois. Voit todella saavuttaa tämä vaikutus on pari eri tavoin. 

Yksinkertaisin tapa MySQL on rivi SQL jotka annoimme sinulle vuonna Harjoitus erittely, joka näyttää täsmälleen samalta kuin tämä. Sisällyttävät taulukkoon - mikä sen nimi - id, symboli, ja osake Osakkeiden lukumäärä, seuraavat arvot, esimerkiksi. Jos et ole lukenut spec vielä, tämä on esimerkki, johon miten edetä ostaa 10 osaketta tämän penniäkään varastossa presidentti Skroob, jonka käyttäjätunnus sattuu olemaan numero 7? Tämä kertoo INSERT INTO taulukko seuraavasti id, symboli, ja osakkeiden lukumäärä 7, "DVN.V", ja 10. Mutta - mutta, mutta, mutta - toinen rivi on tärkeä. Rinnakkaismääritysten KEY UPDATE osaketta = Osakkeiden + VALUES (osakkeet). Joten täysin arvoituksellinen näköinen ensisilmäyksellä. Mutta se, että tämä SQL kysely, vaikka se kietoutuu päälle 2 riviä, on 1 pitkä kysely, se tarkoittaa että se on atomi siinä mielessä, että tämä kysely joko suoritetaan kaikki yhdessä tai ei lainkaan. Ja määritelmä MySQL, se miten ne pannaan täytäntöön tämän kyselyn. Se on määritelmän käyttöohjeessa taattu suorittaa kaikki kerralla tai ei lainkaan. Motivaatio tähän on seuraava. Jos tässä tapauksessa yrität ostaa 10 osakkeella, se on tavallaan sama juttu kuin maitoa, se on tavallaan sama juttu kuin ATM. 

Jos teet virheen, ei tällä syntaksia vaan valitaan tietokannasta kuinka monta osaketta tämän penniäkään varastossa ei presidentti Skroob on, ja kai hänellä on 10 osaketta, ja sitten jotkut sekunnin murto myöhemmin voit sitten tehdä UPDATE lausunto, joka on toinen lausuma SQL joka sanoo mennä eteenpäin ja lisätä 10 enemmän osakkeita Hänen nykyinen 10 siten, että ihannetapauksessa koko on 20, Ongelma johtuu siitä, että nykypäivän tietokantajärjestelmät ja koska nykypäivän tietokoneet sinulla on useita prosessorit, useita sydämiä - Toisin sanoen, tietokoneet voivat kirjaimellisesti tehdä useita asioita samanaikaisesti - ei ole mitään takeita, että SELECT ja teidän UPDATE tässä tapauksessa tulee tapahtumaan peräkkäin. Joten huono skenaario olisi et SELECT kuinka monta osaketta tämän penniäkään varastossa ei Skroob on, ja sitten vain sattumalta toisen tietokannan kysely suoritetaan - Ehkä sen Skroob toisessa selainikkunassa yrittää ostaa 10 osaketta toisessa ikkunassa kokonaan, aivan kuten ATM - ja olettaa, että toinen kysely joutuu välillä SELECT ja UPDATE. Se voisi olla, että Skroob nyt menettää osan osakkeista koska toinen prosessi tarkastus tilaa hänen maailmansa, tai hän saa enemmän osakkeita kuin hänen olisi pitänyt. Emme aio mennä tiedot mitä nuo erityisesti juonen olisi, mutta kohta on, jos sinulla on tarkistaa muuttujien arvo ja sitten tehdä päätös, jos on vaara, että joku muu tekee jotain välillä 2 lausunnot, kuten voi tapahtua moniprosessorijärjestelmät vuonna multicore järjestelmissä, tietokoneet kyky tehdä useita asioita samanaikaisesti, pahoja asioita voi tapahtua kuten pankkitilit on veloitettu virheellisesti, ostavat kaksi kertaa niin paljon maitoa, tai tässä tapauksessa väärä osakkeiden lukumäärä. Mutta on helpompi tapa ajatella tätä. 

On käynyt ilmi, että SQL tukee myös, jos määrittelet taulukon oikein, jotain kutsutaan liiketoimet, jotka väitän todella vieläkin helpompi ymmärtää kuin tämä, mutta se ei ole 1-liner, joten se on oikeastaan ​​hieman enemmän mukana. On kirjaimellisesti lausuma SQL kutsutaan START TRANSACTION. Aivan kuten siellä SELECT, UPDATE, INSERT, DELETE ja JOIN sekä joukko muita, olemassa avainsanoja, kuten START TRANSACTION. Ja mitä sitten tehdä osana PSET 7 - sinun ei tarvitse tehdä tätä PSET 7, se on nimenomaan poissuljettu koska ei ole tarpeen, mutta lopullinen hankkeille voi olla hyödyllistä - Jos soitat kyselyn START TRANSACTION ja sitten toinen kysely ja sitten toisen kyselyn, ja sitten toinen, toinen, ja toinen, nämä kyselyt eivät tosiasiassa panna täytäntöön ennen kuin soitat SQL COMMIT, jolloin, oliko se 2 lausuntoja tai 20 lausuntoja, ne kaikki toteutetaan kerralla, mikä tarkoittaa, ettei kukaan muu voi vahingossa ostaa liikaa maitoa tai pankkikortilla liikaa rahaa tai ostaa liikaa osakkeita, koska kaikki kyselyt tulee suorittaa takaisin takaisin takaisin takaisin. Ja tämä on erittäin tärkeä, varsinkin kun teet jotain tällaista. Tämä on mielivaltainen esimerkki, joka kertoo Katsotaan päivittää pankkitilille asettamalla tasapaino sama saldo - 1000 dollaria, jos tilinumero on 2. Ja sitten toinen lause nyt mennään tallettaa että 1000 dollaria jonkun toisen tilille, jonka tilinumero on 1. 

Toisin sanoen, tämä on täydellinen esimerkki siitä, missä haluat varmistaa että molemmat näistä lausunnoista tapahtuu tai ei ollenkaan koska muuten asiakas on menossa ruuvattu ja aiot viedä rahansa eikä tallettaa muualle, tai pankki on menossa ruuvattu minne olet menossa tallettaa rahaa mutta ei itse asiassa vähennä sitä käyttäjän tililtä. Joten haluat molemmat suorittaa yhdessä. Näin tulee maailmaan liiketoimiin. Niin, että jotain pitää takaraivossa, ei niinkään varten vain opinnäytetyö, mutta jos haluat ottaa opinnäytetyö jonnekin, Jos haluat käynnistää jonkin yrityksen ympärille, Jos haluat ratkaista joitakin opiskelijan ryhmän ongelma kampuksella ja oikeastaan ​​elää, aktiivinen sivusto, nämä ovat tavallaan hienovaraisia ​​vikoja, jotka voivat syntyä jos et ole aivan miettiä, mitä voi tapahtua, jos 2 henkilöä yrittävät käyttää verkkosivuilla osoitteessa kirjaimellisesti samalla hetkellä, jolloin niiden kyselyt muuten saada toisiinsa. 

Valmis noin JavaScript, teaser sen? Tämä on meidän viimeinen kieli lukukauden. Selvä. Onneksi JavaScript näyttää hyvin, hyvin, hyvin samankaltainen 2 kieltä, C-ja PHP- olemme tähän mennessä tehneet. Ei ole JavaScript PSET 7, mutta se on uskomattoman hyödyllinen työkalu kun se tulee tehdä web-pohjainen opinnäytetyöt tai oikeastaan ​​vain Web-ohjelmointi yleisemmin. Joten nopean yleiskatsauksen jotain kutsutaan DOM. Täällä on erittäin yksinkertainen web-sivu, joka oikeastaan ​​vain sanoo hei, maailma sekä otsikko ja runko. Koska syvennys on viittaa jonkin aikaa, on todellakin hierarkia verkkosivuille. Voisin tehdä tämä sama pätkä HTML puu, Muistelen meidän keskusteluja tietorakenteita C seuraavasti. Minulla on joitakin erityisiä juurisolmun nimeltään asiakirjan solmu, ja näemme analogia tämän Javascriptin vain hetken. Ensimmäinen lapsi ja ainoa lapsi, joka tässä tapauksessa on HTML tagi. Ei ole suoraa kartoitus DOCTYPE. Se erityinen asia, joten meidän pitäisi vain sivuuttaa sitä, kun se tulee tähän DOM, Tämän Document Object Model puu. Huomaa, että HTML tag, joka olen kuvattu mielivaltaisesti suorakaide, on 2 lasta: pää ja vartalo. 

Nämä ovat vastaavasti piirretty suorakaide. On mielekästä kuvallisesti että pää on vasemmalla puolella rungon. Tästä seuraa, että pää tulee ensin puussa. Joten siellä oikeastaan ​​tilaus puuhun kun piirtää sen näin, vaikka muodot ja vaikka mitä ovat mielivaltaisia. Head puolestaan ​​on yksi lapsi nimeltään otsikko, ja otsikko todella on oma lapsi, joka on "Hello, world", jonka olen tarkoituksella tehnyt kuin soikea täällä tehdä hieman eri suorakulmion. Nämä suorakulmioita ovat elementtejä, kun taas hei, maailma on todella tekstiä solmu. Niin se on solmu puussa, mutta se on eri tyyppinen solmun joten piirsin sen mielivaltaisesti eri tavalla. Samoin ei runko on lapsi nimeltä Hei, maailmassa samoin, joten eri solmu vaikka he sattumalta sama teksti, mutta olen laatinut sen käyttämällä samaa muotoa. Joten kuka välittää? No, mitä kivaa HTML on, että se ei ole tämän hierarkkinen luonne. Ja mitä kivaa JavaScript ja erityisesti kirjastot, jotka ovat vapaasti käytettävissä ja suosittuja, kuten jQuery, voit navigoida puurakenteessa niin hämmästyttävän helposti. Mikä tahansa tavaraa teimme C osoittimet ja liikkumisesta puita ja recursing on solmuja vasen lapsi oikea lapsi, yhtäkkiä voimme tavallaan itsestäänselvyys olevan hämmästyttävän valaisevaa, jos ei vähän turhauttavaa mutta ei läheskään tehokas tapa edetä ohjelmointia. Ja niin nämä korkeamman tason kielillä, kuten JavaScript pystymme navigoida tätä puuta paljon enemmän intuitiivisesti. 

Ja todellakin syntaksin tulee olemaan varsin tuttuja. Jos et ole koskaan nähnyt JavaScript aikaisemmin, tämä on todella mukava viite Mozilla-ihmiset, ihmiset jotka tekevät Firefox, joten rohkeasti selata että milloin sinulle sopii. Mitä löydät - ja nämä diat ovat samat, mitä käytimme toinen päivä - Samoin tärkein on mennyt. Joten kun kirjoitat ohjelmaa JavaScript ei ole tärkein ominaisuus. Sinä vain kirjoittamaan koodia. Mutta keskeinen ero JavaScript ja C PHP on, että kun C-ja PHP toistaiseksi on toteutettu palvelimen puolella jonka laitteen tässä tapauksessa tai yleisemmin palvelin, JavaScript suunnittelun yleensä suorittaa selaimessa. Toisin sanoen, saatat kirjoittaa JavaScript-koodia, koska olemme aikeissa, palvelimella on laite, mutta lisäät sen joukkoon HTML muun CSS- keskuudessa GIF ja teidän PNGs ja teidän JPEG niin että kun käyttäjä vierailee Web-sivu, jos käytät JavaScript, että JavaScript-koodi tulee palvelimelta selain, ja se on selain, joka todella toteuttaa sitä. Joten tämä on mielekäs vaikuttaa jopa tekijänoikeuksista. Se on tavallaan typerä edes ajatella suojata IP kun se tulee JavaScript-koodia koska luonteeltaan kielen se saa suorittaa yleensä selaimen puolella. 

Voit sekoittaa sitä, mikä tarkoittaa, että voit tehdä sen näyttämään hullu ja ruma ilman välilyöntejä, kamala muuttujien nimet, jotta vaikeuttaa ihmisten varastaa IP- mutta tärkeintä on, että se on toteutettu selaimen puolella. Vaikka niin syrjään JavaScript voidaan käyttää palvelimen puolella, yleisin käyttötapa nyt on vielä selaimen. Ja tässä mitä se näyttää. Tässä on if-else if-else rakentaa aivan kuten C, kuten PHP. Tässä on Boolen lauseke, kun "tai" 2 asioita yhdessä. Täällä on kun "ja" 2 asioita yhdessä. Tässä on kytkin ilmoitus, joka on samanlainen kuin PHP että voit kytkeä erilaisia ​​arvoja. Silmukat Samoin on silmukoita täällä, jotka ovat rakenteeltaan identtisen mitä olemme nähneet. Vaikka silmukat, meillä tehdä samalla silmukoita. Muuttujat, koskaan niin hieman erilainen. Et julistaa muuttujia kuin teet PHP ja C mutta samalla on JavaScript heikosti kirjoitettu. Et määrittää int tai float tai merkkijono tai mitään sellaista yleensä. Voit määrittää var. Sinun ei tarvitse määrittää var, mutta sillä on seurauksia, jos et ole. Yleensä jos jätät pois var, voit vahingossa luoda globaali muuttuja sijaan paikallista. Saanen siis ehdottaa, että melkein aina vain sanoa var ja sitten muuttujan nimi. Se ei ole tyyppiä, se on vain var muuttuvan. Tämä olisi esimerkiksi onko se 123 tai "Hello, world". Taulukot ovat läsnä ja syntaktisesti samanlainen PHP. Sanon var numerot ja sitten käytän Hakasulkeissa jälleen julistaa muuttuja joiden tyyppi on matriisi, jossa on nämä erityisesti numerot siinä pilkulla erotettuina. Ja sitten lopuksi, tämä on vain yksi, joka todella näyttää erilaiselta. Muistutan, että PHP olisimme ottaneet käyttöön assosiatiivisia array opiskelija kuten Zamyla että voisi näyttää tältä, jos muuttuja on nimeltään opiskelija. Hakasulkeissa tarkoitetaan tässä tulee array. 

Se, että en käytä numeerisia indeksejä mutta jouset - id, house, ja nimi - tarkoittaa, että tämä on assosiatiivinen array, ja nämä nuolet yhtäsuuruusmerkki ja kulmikas kiinnike tarkoittaa, että avain on "id", arvo on 1; avain on "talo", arvo on Winthrop House; avain on "nimi", arvo on Zamyla Chan. Joten on 3 avaimet sisällä tämän assosiatiivisia array, joilla kullakin on oma arvonsa. Olemme nähneet, että PSET 7, tai voit pian, JavaScript sama idea, mutta se tulee näyttää tältä. Joten var opiskelija - ei dollarimerkki eikä mainintaa tyyppiä vielä, mutta var - vastaa ja avaa aaltosulkeita koska JavaScript kun olet avain arvo-pareja, voit itse käyttää jotain kutsutaan objekti. Ja niille teistä, jotka eivät ottaa APCS tms. saattavat muistaa esineitä Java tai vastaavia kielillä. JavaScript ei ole Java ensinnäkin. Se oli tahallinen design päätöstä vuotta sitten pölliä jotain muuta, joka oli suosittu, sen nimi, vaikka se ei ole olennaista suhteessa Java itse. JavaScript on esineitä, ja voit luoda ne tavalla kihara ahdin merkintää. Esineet JavaScript ovat melko vastaavat assosiatiiviset taulukot PHP kun se tulee tallentaa dataa sisällä niitä. 

Mutta vieläkin voimakkaammin JavaScript voit liittää helposti toiminnot sisällä kohteen, ja vaikka voit tehdä muilla kielillä, se on melko yleinen paradigma, kuten näemme. Lyhyesti sanottuna tämä objekti edustaa opiskelija, joka on erityisen Zamyla, ja se on samanlainen käsitteellisesti, vain syntaktisesti poikkeaa tästä. Katsotaanpa itse käyttää JavaScript-tiedoston. On käynyt ilmi, siellä komentosarjatunnus. Olemme nähneet tyyli tag ja olemme nähneet muita HTML. Komentosarjatunnus todella sisältää joitakin JavaScript-koodia. Päästä minut sisään laitteeseen, jossa meillä on joitakin lähdekoodi valmiita. En ole lähettänyt sitä vielä sivustolla, mutta minä teen sen jälkeen luokassa. Katsotaanpa avata tämä, blink.html. 1990-luvulla oli kirjaimellisesti HTML tagi nimeltään vilkkuvat tag, ja tämä oli yksi ihanan overused tagit Internetissä jolloin haluat käydä joitakin 1990 tyyli sivun ja alkaa nähdä tekstin vilkkua sinua tällaisena, tulokset marquis tunnisteen, joka oli teksti menee näin. Yksi pari kertaa, jos maailma on todella sovittu web standardi, kaikki kautta linjan tappoi vilkkuvat tag joitakin vuosia sitten. Mutta voimme elvyttää sitä JavaScriptiä osoitus valtaa teillä kun voit kirjoittaa ohjelma sisällä verkkosivun. Katsotaanpa ensin ohittaa uusia juttuja ja keskittyä vain vanha. 

Tässä on vanhaa kamaa tässä esimerkissä. Minulla HTML tag, pää tag, ja otsikko tag. Sitten on body täällä div, joka muistaa on vain suorakulmainen jako sivun että olen antanut yksilöllinen tunnus mielivaltaisesti of "tervehdys" on, juuri niin minulla on tapa ainutlaatuisesti viitataan siihen, että on hyvin yksinkertainen teksti: Hei, maailma. Nyt haluaisin siirtyä ylös tämän tiedoston ja nähdä mitä uutta. Ensimmäinen asia, joka on uuden ajan alkuun on komentosarjatunnus, ja sisällä komentosarjatunnus ilmoituksen olen ilmoittanut toimintoa. Julistaa toiminnon JavaScript, melko samanlainen PHP, te kirjaimellisesti kirjoittaa funktion sitten funktion nimi, sulkeita ja ehkä joitakin perusteluja, jos se vie mitään. Sitten olen sain kihara ahdin kuten tavallista, ja nyt meillä on hieman uuden koodin, mutta katsotaanpa, mitä tämä tarkoittaa. Joten var div, tämä tarkoittaa vain antaa minulle muuttuja nimeltä div. Voisin ovat kutsuneet sitä foo, mutta halusin tulla kutsutuksi div syistä, jotka on selvästi toinen. Sitten se kääntyy ulos JavaScript - ja tämä on JavaScript-koodia upotettu Web-sivu - on erityinen globaali muuttuja tapaisena nimeltään asiakirjan. JavaScript on itse asiassa olio. Emme aio mennä yksityiskohtaisesti 50, mitä se tarkoittaa, mutta nyt tiedän, että kohde on melko paljon kuin struct. Kuten näimme paluumatkalla kun yksi varhaisimmista ongelman asettaa jos panemme paljon tietoa struct, Samoin on dokumentoida erityinen struct mukana selain, mukana tahansa sivulta. Se ei ole jotain olen luonut. Inside tämän asiakirjan rakenteen, vaikka et ole ainoastaan ​​tietoja mutta sinulla on myös toimintoja. 

Ja aina kun on tehtävä sisällä rakenteen sisällä esine, sitä kutsutaan menetelmää. Mutta se on sama asia. Menetelmä on toiminto, joka sattuu olemaan sisällä jotain muuta. Joten tämä tarkoittaa, että tämä erityinen globaali muuttuja nimeltä asiakirja on toiminto nimeltään getElementById että kirjaimellisesti tekee sen. Se saa sinut elementin DOM, Document Object Model puu, jonka tunnus on tässä tapauksessa tervehdys. Toisin sanoen, kaikki, että aika kuluu tietorakenteiden tulee pelata tässä. Tämä kuva DOM että meillä oli hetki sitten, vaikka sivu on hieman erilainen, jos olisin div tässä kuvassa, Mitä document.getElementById palaisi minulle voitaisiin todella osoitin suorakulmioon, puussa, viittaus suorakulmion puussa. Niin, että mitä se tarkoittaa todella soittaa yhtä näistä toiminnoista. Tässä tapauksessa taas se div. Se ei ole elin tai otsikko. Joten mitä minä tee tätä div nyt olen sen sisällä tämän muuttujan nimeltään div. On käynyt ilmi JavaScript sinulla on mahdollisuus nipistää CSS sivusi dynaamisesti. Tähän asti kaikki CSS olemme tehneet, joskin rajallisesti, on tyyliattribuuttien tai jos muuten olemme CSS? Olen sellainen pilaantunut, että yksi. Tyyliin tag tiedoston alkuun. Tai kolmas sija on ollut? 

Ulkoisen tiedoston, jotain. Css. Joten ne ovat 3 paikkaa olemme tehneet CSS toistaiseksi, mutta saalis on meillä kova koodattu kaiken. Päätit kun sukelsi PSET 7, päätimme ennen luennoimaan mitä CSS olisivat. Mutta jos haluat muuttaa CSS, voit itse tehdä kun olet todellinen ohjelmointikieli. CSS, HTML - ei ohjelmointikieliä. JavaScript on. Joten näyttää siltä, ​​että heti kun on yksi niistä suorakulmioita puusta kutsutaan DOM, se on itse joitakin tietoja sen sisälle. Joten div, että olen vain tarttui puusta on mitä me kutsumme omaisuutta sen sisällä kutsutaan tyyli, ja tyyli omaisuus on itse kiinteistön nimeltään näkyvyyttä. Haluaisin tietää tämän vain katsomalla CSS käyttöohje. On käynyt ilmi, siellä näkyvyys CSS ominaisuus, että mitä se sanoo. Se tekee jotain näkyvissä vai ei, näkyvä tai ei. Ja miten se tehdään tämä. Pyydän ohjelmallisesti jos näkyvyyttä div on piilotettu, Mitä voin vaihtaa sen? Näkyvä. If näkyvyyttä sivusta ei ole piilotettu, loogisesti en tee sitä piilossa. Minulla ei ole aavistustakaan, miksi se on näkyvissä ja piilossa eikä näkyviä ja näkymättömiä. Tämä oli huono suunnittelu päätös varrella. Mutta ne ovatkin vastakohtia CSS: näkyviä ja piilossa. Kaikki tämä ei se tarkoittaa muuttaa CSS minun tiedoston päälle ja pois, päälle ja pois päältä kyseiselle div. Mutta jälleen kerran, tämä on toiminto nimeltään vilkkua. Kun on vilkkuvat toiminto nimeltään? On käynyt ilmi, että on olemassa muu erityinen globaali muuttuja nimeltään ikkunassa hengeltään samanlaisia ​​asiakirjaan, mutta että asiakirjassa mainitaan sivuillesi, kuten DOM puu, HTML-te lähetetään palvelimesta, ikkuna viittaa kromi ympärillä, osoiteriville, otsikkopalkissa, ja kaikki jutut noin web-sivulla. 

Ja käy ilmi, että ikkunasta objekti on erityinen tehtävä sen sisällä kutsutaan setInterval että mitä se sanoo. Se asettaa aikaväli - tässä tapauksessa jokaisessa 500 millisekuntia - ja arvata, mitä se aikoo tehdä joka 500 millisekunnin? Se tulee suorittaa tämän tehtävän vilkkuvat. Ja mitä mukavaa täällä on, että olisimme voineet tehdä tämän C vaikka emme koskaan tehnyt. C tekee jotain kutsutaan funktio-osoittimia, jossa voit kulkea toimintoja ympäri argumentteina. Vastaavasti JavaScript voit siirtää nimen funktion toisen funktion. Ja huomaa, mitä olen tekemässä. En tee tätä. Jos laitan sulkuihin jälkeen vilkkuvat, se tarkoittaisi kutsua vilkkuvat toiminto. Jos minä jätä heitä, se tarkoittaa, että tässä on vilkkuvat toiminto jotta setInterval voi kutsua jokaisen 500 millisekuntia. Joten lopputulos, kamalaa kuin se onkin, että jos menen localhost ja mene blink.html, Minulla on nyt tämä tapahtuisi uudestaan ​​ja uudestaan. Ja jos minä todella Tarkasta Element, katsotaanpa jos voimme nähdä tämän. Saanen Tarkasta Element, haluan selaa vain vähän, anna minun valita Elements tänne, ja huomaa DOM sisällä Chromen tarkastajan. Se kirjaimellisesti muuttuu edestakaisin jokaisen 500 millisekuntia. Jos menemme ystävämme Nate, Jos olet joskus miettinyt, miten tämä toimii, samanlainen idea välein, mutta Nate on todella tekee erittäin tehokas käyttö väri tässä nimenomaisessa asiassa. Mitä muuta voimme todella tehdä tämän? Katsotaanpa avata toinen esimerkki ja kokeilla jotain se ohjelmallisesti vieläkin enemmän hyötyä kuin tehdä asioita vilkkuvat. Anna minun mennä meidän muotoihin hakemistoon tänään ja mennä form0. Tämä oli rumin mahdollinen muodossa, että voisin keksiä, ja haluan vain näyttää teille, mitä se näyttää selaimessa. 

Sallikaa minun mennä localhost / lomakkeet, ja tämä on form0. Tämä on erittäin ruma HTML-muodossa, joka on muutamia kenttiä sähköpostin, salasanan, salasana, ja sitten vähän valintaruutu hyväksyä joitakin ehtoja. Saalis on, jos käyn tämän lomakkeen enkä halua antaa teille sähköpostiosoitteen, En halua hyväksyä ehdot ehkä voin napsauttaa Rekisteröidy ja se antaa minulle läpi muutenkin. Tämä tapahtuu esittää tyhmä PHP tiedosto nimeltä dump.php. Kaikki se on tulostaa sisältöä $ _GET vain diagnostisiin tarkoituksiin. Se oli mitä esitti käyttäjä juuri nyt. Mutta oletetaan me todella haluamme vahvistaa käyttäjän lomakkeen lähettäminen. Sallikaa minun mennä version 1. Tämä on form1.html. Se näyttää esteettisesti yhtä paha, mutta huomaa kuinka fancy se on. Jos minä Napsauta Register ilman yhteistyötä, saan huusi. "Sinun on annettava sähköpostiosoite." Selvä. Joten anna minun kokeilla sitä. Niin malan@harvard.edu. En tarvitse salasanaa. Rekisteröidy. "Sinun on annettava salasana." Selvä. Joten annan salasanan karmiininpunainen. Rekisteröidy. "Salasanat eivät täsmää." Minun täytyy nyt kirjoittaa karmiininpunainen täällä. Olen vahingossa tarkistanut että. Rekisteröidy. "Sinun täytyy hyväksyä ehdot." Selvä. Hyväksyn siellä. Rekisteröidy. Ja nyt se näyttää minulle diagnostiikkalähtö tuolla. 

Joten mitä juuri tapahtui? Meillä on ollut tämä kyky vahvistaa muotoon huomautuksia. Itse asiassa, jos teit sukeltaa PSET 7, siellä anteeksi toiminto jonka avulla on melko helppo huutaa käyttäjälle viestin ruudulla. Käytän hieman erilainen mekanismi, hälytys-toiminto, joka ei ole funktio, joka on hymyili kun sillä se tekee erittäin ruma käyttäjän viestejä. Mutta katsotaanpa, mitä teen täällä. Tämä on form1.html, ja huomaat, että minulla on joitakin melko tuttuja syntaksi: body, muoto tag, toiminta määrite, menetelmä määrite. Mutta huomaa olen antanut minun muodossa yksilöllinen tunnus mukavuussyistä. Sitten olen saanut sähköpostia kenttä, jonka tyyppi on teksti, salasana-kenttään, jonka tyyppi on unohtunut, vahvistus kenttä jonka tyyppi on salasana, ja sitten valintaruutu, jonka nimi on sopimus täällä, tyyppi on valintaruutu. Ja sitten minulla lähetä-painiketta. Mutta huomaa yläosassa mitä enemmän minulla on. Ensinnäkin, on olemassa toinen käyttö komentosarjatunnus. Jos sinulla on JavaScript-koodia toiseen tiedostoon, aivan kuten CSS voit sisällyttää sen. Ja sinä, että käsikirjoitus lähde, ja sitten huomaa olen yhdistää ilmeisesti että googleapis.com erittäin pitkää polkua, mutta jonka tiedoston nimi päättyy jquery.min minimi. js. jQuery on erittäin suosittu kirjasto JavaScriptiä vain tekee JavaScript kaikki käyttäjäystävällisempi käyttää. Se tehokkaasti tullut de facto-standardi. Joten vaikka mitä aiot nähdä ei ole puhdasta JavaScript sinänsä, se on kirjaston päälle JavaScript paljon kuin CS50 kirjasto on kerros päälle matalan tason C-koodia, todellisuus on lähes kaikki Internetistä käyttää sitä. Joten nämä eivät ole apupyörät. Tämä on vain paras harjoitella näinä päivinä. Nyt huomaa alla on oma komentosarjatunnus, ja huomaa mitä olen tehnyt täällä. On käynyt ilmi, että jQuery tekee jotain hieman fancy. JavaScript on dollarin merkkejä, mutta ne ovat merkityksettömiä. 

Ne ovat kuin kirjain A tai B tai C. jQuery on yksinkertaisesti hyväksynyt yleissopimuksen tai sellainen vedonneet siihen että $ on heidän erityinen symboli. Niin pian kuin lataat tämän maailmanlaajuisen JavaScript-tiedosto täällä kanssa komentosarjatunnus, sinulla on mahdollisuus saada erityinen globaali muuttuja, joka on nimeltään $. Se on oikeammin kutsutaan jQuery, mutta se ei näytä läheskään yhtä seksikäs kuin $. Mutta $ ei ole erityistä merkitystä. PHP sillä oli erityinen merkitys. Sinun piti olla se edessä muuttujan. Tämä on vain seksikäs asia, että he ottivat. Mitä täällä tapahtuu? Ilmoitus olen ohimennen jQuery toiminnon minun globaali muuttuja asiakirja ja sitten soitan. valmis. Mitä jQuery lähinnä se on sen avulla voit ottaa joitakin vanilja JavaScript asioita kuten asiakirja objekti, ikkuna objekti, ja jos ohitat sen ja jQuery toiminto - ja jälleen oltava selkeitä, tämä on toiminto nimeltään jQuery - Mitä se on se palautuu sinulle erikoisversio asiakirjan että on enemmän toimintoja liittyy siihen. Joten raaka JavaScript ei ole valmis funktio, mutta jos ohitat asiakirjan jQuery toimintoa, se palaa teille erityinen versio Document Object että on enemmän fancy ominaisuuksia. Ja siksi ihmiset pitävät siitä. Se vain helpottaa asioita tehdä, koska aiomme nähdä. Mitä tämä rivi koodia tarkoittaa? Tämä koodirivi tarkoittaa tässä, kun asiakirja on valmis - Toisin sanoen, kun selain on lukenut tämän tiedoston ylhäältä alas - mennä eteenpäin ja suorittaa seuraavan toiminnon. Mikä on todella mielenkiintoista JavaScript - ja PHP on tämä myös - on anonyymi toiminnot. JavaScript voit ilmoittaa toiminnoista, joilla ei ole nimeä, mutta niillä on ruumis. Huomaa mitä täällä tapahtuu. 

Tämä on toiminto nimeltään valmis, ja se tarkoittaa vain sitä tee seuraavat kun koko web-sivu on valmis, kun se kaikki on lukea palvelimelta. Mitä haluat tehdä? Haluan suorittaa kimpale koodia. Huomaa, että emme halua suorittaa tämän koodin heti. Jos minä pois tämä, tämä merkitsisi välittömästi aloittaa suorittamalla nämä riviä koodia. Mutta se, että sanon ei, ei, ei, kääri tämän nimettömän funktion näin keinot eivät suorita sitä vielä, kutsuvat sitä lopulta. Näimme tämän hetki sitten edellisessä muodossa esimerkki. Mitä toiminto ei kutsumme lopulta 500 millisekuntia myöhemmin? Blink. Joten sama ajatus. Jälleen, vaikka tämä näyttää hieman outo, ota nyt uskoon että julistaa nimettömänä toiminto, joka kutsutaan lopulta voit yksinkertaisesti kirjoittaa function () { Joten mitä koodi aiomme toteuttaa lopulta? Seuraavat. Tämäkin näyttää vähän uutta, mutta tämä tarkoittaa tässä jQuery toiminto, ja tämä nyt on oikotie. Tämä pätkä HTML alareunassa näytön tietysti on joitakin puu edustus. Se ei ole tätä. Tämä sivu on kiinnostavampi kuin tämä Hello, world esimerkki. Mutta on joitakin puu, joka vastaa tätä HTML. Olisi kipua niskassa on toteuttaa jonkinlainen rekursiivinen funktio alkavan juurisolmusta ja sitten löytää solmu, jonka tunnus on rekisteröinnin. Joten mitä jQuery tekee super helppo meille on kirjaimellisesti tätä. Mennä eteenpäin ja saada minulle mitä div tai missä muodossa tahansa, mitä tahansa HTML-elementti on tunnus rekisteröintiä. Tämä vastaa document.getElementById ("rekisteröinti"). 

Miksi ihmiset, kuten jQuery? Koska se on lyhyempi kirjoittaa. Mutta sitä se on. Se on sama idea. Hanki minulle tag jonka tunnus on rekisteröinnin. Ja kun se tag, joka sattuu olemaan muodossa, toimitetaan, mennä eteenpäin ja suorittaa tämän koodin. Joten ottaa yksi tarkastella nyt kuinka pärjäämme muodossa validointi. Syntaksi on tosin kryptinen aluksi, mutta mitä on tekeillä? Jos tätä linjaa koodi on totta, aion huutaa käyttäjää antamaan hänen sähköpostiosoitteeseen. Joten mitä tämä rivi koodia? $ Tarkoittaa jQuery. Nyt huomaa tätä. Tämä on ikään kuin CSS. Jos olet sukeltanut CSS vielä, tiedät, että tämä tarkoittaa elementtiä, jonka tunnus on rekisteröinnin. Tila tarkoittaa löytää lapsi tai jälkeläinen rekisteröinnistä, jonka nimi on panos. Ja sitten tämä asia hakasuluissa on pieni suodatin. Ja vaikka tämä näyttää arvoituksellisesti, tämä tarkoittaa vain mennä lomake, jonka tunnus on rekisteröinnin, Siirry syöttöosassa sisällä siinä, jonka nimi on sähköposti, ja sitten saat sen arvo, riippumatta sen arvo sattuu olemaan - asdf jos siinä on kaikki mitä koneella tai malan@harvard.edu jos se mitä olen kirjoittanut. Joten jos arvon lomakkeen sähköpostiosoite kenttään == mitään, huutaa käyttäjä. If arvo salasana-kenttään == mitään, huutaa käyttäjä. 

If arvo salasana kenttä ei ole yhtä suuri kuin arvo vahvistuksen kentän, joka oli muu elementti, huuda käyttäjälle. Ja sitten lopuksi - ja tämäkin on joitakin uusia syntaksi omia, mutta kun on nähnyt, se on ainakin hieman järkevämpi - if lomake, jonka tunnus on rekisteröinnin on syöttöosassa jonka nimi on sopimus ja se tarkastetaan, mennä eteenpäin ja huutaa käyttäjä. Olen siis täysin myöntää tämä on täysin ylivoimainen ensi silmäyksellä. Se on paljon uusia syntaksin. Mutta kaikki jQuery seuraa tällaisia ​​kuvioita. Ja rehellisesti, en edes tiedä tätä olemassa vasta muutama minuutti sitten. Googlasin "Miten tarkistaa, onko valintaruutu on valittuna jQuery?" ja tämä on syntaksi, koska siellä on erilaisia ​​tapoja tehdä se todellisia raaka JavaScript-koodia. Niin ensimmäinen sivu Harjoitus 7 painottaa, PSET 7 on hyvin harjoitus bootstrapping itse missä olemme edellyttäen, toivottavasti, käsitteellinen kehys, jonka torjumiseksi PSET. 

Mutta kuten usein käy web design, se on sinun todella penkoa, sisällyttää koodinpätkää ja esimerkkejä Web niin kauan kuin siteerata niitä kohden ehdot että ensimmäisen levyn, ja ymmärtää, että oppiminen HTML, CSS, JavaScript ja jopa SQL on todellakin tarkoitus olla tämän kotona harjoituksen alamme ottaa nämä apupyörät pois. Ja huomannut liian on niin paljon enemmän asioita voit tehdä selaimella. Sisällä useimmat näistä elementeistä on muitakin asioita kutsutaan tapahtumankäsittelijät. Ja vaikka me vain katseli niitä kutsutaan onsubmit ja onready, voit tehdä asioita, kuten onkeydown, onkeyup, kuten kun käyttäjä koskettaa avain, voit kuunnella tästä ja ylös. Gmail on pikanäppäimiä. Miten Google toteuttaa pikanäppäimet kuten C säveltää? He kuuntelevat tapahtumiin, kuten niitä kutsutaan, kuten onkeypress tai onkeyup ja onkeydown. Jos olet joskus leijui hiiri joidenkin valikon ja yhtäkkiä, voila, valikko tai graafisen väri muuttuu, miten he tekevät sen? Sen sijaan kuunnella onready tai onsubmit voit kuunnella onmouseover tai onmouseout. 

Eli lyhyesti sanottuna, näitä hyvin yksinkertaisia ​​perusasioita, että olemme alkaneet naarmuta tänään ja me sukeltaa edelleen keskiviikkona, sinulla on yhä, valta toteuttaa erilaisia ​​asioita, jotka olet jo tuttu. Joten päättyä siihen, ja jatkamme tätä keskiviikkona. 

[CS50.TV]