Lære javascript fra bunden på russisk. JavaScript for begyndere - Enkle eksempler
Dette er et introduktionskursus til JavaScript for begyndere. Prioritetsmæssigt er dette det tredje emne, som en kompetent webudvikler har brug for at kende. De to første er HTML og CSS, selvfølgelig. Velkommen!
JavaScript-scriptsproget blev udviklet af Brendan Eich i 1995 som en af udvidelserne til Netscape Navigator 2.0-browseren, som de færreste husker. Men selve sproget lever og blomstrer.
I modsætning til HTML og CSS er det allerede et rigtigt programmeringssprog. Vi kan sige, at HTML og CSS bare er blomster, men JavaScript er ligesom bær. De adskiller sig grundlæggende. HTML er simpelthen opmærkningen (eller på anden måde, strukturen af webstedet), og CSS er udseendet af denne opmærkning. Men JavaScript giver dig mulighed for at oprette programmer, der instruerer brugerens computer til at udføre aktive handlinger.
Derfor, hvis du endnu ikke ved selv så simple ting som HTML og CSS, så er det klart for tidligt for dig at tage JavaScript på.
Men der er ingen grund til at være bange. I modsætning til sine storebrødre som Java eller C++, er JavaScript et ret simpelt sprog. Enhver nybegynder webudvikler kan mestre det. Under alle omstændigheder er det slet ikke svært at lære at bruge det.
Programmer, der er skrevet i JavaScript, kaldes scripts eller scripts. Det skal klart forstås, at disse scripts kun udføres på brugerens computer og ikke et sted på netværket. Derfor afhænger de i høj grad af indstillingerne i den samme browser, som brugeren har indstillet. Hvis han bevidst deaktiverede scripts, så vil de simpelthen ikke fungere.
Hvorfor er der brug for JavaScript?
Hvorfor overhovedet bruge scripts på brugersiden? Nøgleordet her er eventhåndtering. En sådan begivenhed kunne for eksempel være et klik på en knap i en dataindsendelsesformular. Til dette formål leveres specielle attributter, der starter med på.
Eksempler på sådanne attributter:
onclick - enkelt museklik;
onmouseover - at placere musemarkøren i det område, der er optaget af et sideelement;
onfocus - fremhæve (fokusering) af et element. For eksempel formular felter, hvor markøren er placeret.
Okay, kan du sige, hvorfor bruge noget JavaScript til at behandle den samme formular? Der er php til dette. Jeg udfyldte, hvad der krævedes, og sendte det til mig selv i fred.
Det er rigtigt, JavaScript behandler ikke dataene, PHP gør det på fjernserveren.
Men hvad nu hvis brugeren ikke udfyldte alt? Hvis du for eksempel savnede obligatoriske felter markeret med en stjerne *. Hvad så? Så vil der flyve en ny side til ham fra serveren, hvorpå det vil blive skrevet, hvilken sucker han er.
Den grundlæggende forskel her er denne: uden at bruge JavaScript, når du indsender en formular, vil anmodningen under alle omstændigheder blive sendt til fjernserveren, selvom formularen er udfyldt forkert eller ufuldstændigt. Og et fejlsvar vil blive modtaget fra serveren. Brugeren skal indtaste alt igen. Og sådan hver gang. Og hvis du bruger JavaScript, vil siden med formularen ikke blive sendt til serveren, før brugeren indtaster de korrekte data.
Det vil sige, at scriptet, som de siger, "uden at forlade kassen," vil tjekke formularen direkte i brugerens browser og vise en besked, hvis den er udfyldt forkert eller utilstrækkeligt. Her fungerer han som tilsynsmyndighed.
Enig i, at dette er meget mere bekvemt, tager mindre tid og selvfølgelig spiser mindre trafik. Og i tilfælde af en mobilforbindelse til webstedet er dette endnu mere betydningsfuldt.
JavaScript-scripts er således praktiske hjælpere, der ikke kun kontrollerer de indtastede data, men også udfører en masse nyttige handlinger på brugerens side. Tag for eksempel de samme rullemenulister eller sammenklappelige vinduer, alle slags skydere og spektakulære billedgallerier, fremhævelse af aktive formularfelter eller værktøjstip på hjemmesider og meget mere.
En avanceret læser vil sige:
Ha! Så alt dette kan gøres ved hjælp af ren CSS3 uden nogen scripts!
Jeg er enig, bortset fra ordet "alt". Alle men ikke alle. Du kan lave alle mulige tricks og tricks ved hjælp af ren CSS3, men CSS kan ikke verificere, at formularen er udfyldt korrekt. Og udover dette er der tusindvis af andre måder at bruge JavaScript-scripts til mere seriøse ting. Ellers ville smarte mennesker ikke proppe JavaScript ind i Bootstrap eller oprette et mega-nyttigt bibliotek af jQuery-scripts.
Sådan inkluderes JavaScript på en hjemmeside
Der er flere muligheder for at forbinde JavaScript på webstedets sider.
1. Lille JavaScript-kode kan indlejres direkte i HTML-tags. For eksempel vil følgende kode vise teksten "Indtast din e-mail" i formularfeltet, som automatisk forsvinder, når markøren placeres der for ikke at forstyrre brugeren:
Som du kan se, er det ikke specifikt angivet nogen steder, at dette er JavaScript, men browsere forstår dette og behandler det i henhold til de skrevne kommandoer.
JavaScript gør dog udstrakt brug af de samme tegn, som bruges i HTML. For eksempel vinkelparenteser eller lige anførselstegn. For at forhindre, at browseren laver en fejl ved fortolkningen af disse tegn, skrives scripts normalt mellem specielle tags:
2. Lidt større JavaScript-script-kode kan tilføjes direkte til den placering på siden, hvor du ønsker, at den skal udløses. Som nævnt ovenfor indrammes det med tags.
Men det er ikke altid praktisk, og i nogle tilfælde er det fyldt.
For eksempel, hvis brugeren har deaktiveret scripts i sin browser, kan siden fryse på dette tidspunkt og ikke indlæses helt. Derfor anbefales det generelt at placere scripts helt nederst på siden, før det afsluttende tag. I dette tilfælde, selvom scriptet ikke virker, indlæses selve siden helt og uden unødvendige forsinkelser.
3. Den mest korrekte måde at forbinde JavaScript-scripts på er at lægge dem i en separat fil med filtypenavnet .js og forbinde dem til siden via et link, som det er tilfældet med et CSS-typografiark placeret i en separat fil. Eksempel:
Dette afslutter vores introduktionsudflugt til JavaScript. Næste gang skriver vi vores første manuskript på dette vidunderlige sprog. Abonner på webrådets blogopdateringer, så du ikke går glip af noget!
JavaScript Syntaks Tutorial
Før du begynder at læse JavaScript-sprogtutorialen, bør du have kendskab til .
Det vil være et stort plus ved at lære JavaScript-syntaks, hvis du allerede er fortrolig med et eller andet programmeringssprog, såsom PHP, C eller Pascal, og også forstår, hvad en variabel, datatype, funktion eller array er.
Men hvis du ikke er fortrolig med programmeringssprog, så er der ingen grund til bekymring; denne JavaScript-tutorial er beregnet til dem, der begynder at lære programmering for første gang.
JavaScript (JavaScript) er et programmeringssprog på klientsiden, der kan bruges til at styre elementer på en HTML-side (HTML-tags) og en webbrowser, få dem til at bevæge sig, reagere på forskellige hændelser (museklik, tastaturtryk) og skabe mange interessante programmer (scripts): test, animation, fotogallerier (for eksempel på VKontakte), spil og meget mere.
Sådan lærer du JavaScriptAt lære JavaScript er normalt opdelt i fire faser:
1. Master JavaScript-syntaks (denne tutorial),
2. Undersøgelse af DOM og BOM,
3. Håndtering af DOM og BOM ved hjælp af JavaScript,
4. At studere forskellige JavaScript-biblioteker. jQuery er det mest populære bibliotek i øjeblikket (en jQuery-tutorial skulle vises på dette websted i slutningen af 2015).
DOM er dokumentobjektmodellen. Takket være DOM-teknologien begynder HTML-sidetags at repræsentere et træ af objekter, og hvert objekt i dette træ har sin egen unikke adresse. JavaScript-sproget kan ved at få adgang til denne adresse få adgang til et eller andet HTML-tag og manipulere det (ændre farve, størrelse, position osv.).
BOM er en browserdokumentmodel. Strukturen er den samme som DOM, kun i stedet for HTML-sideobjekter er der browserobjekter: browservindue, browserskærmstørrelse, browserhistorik, statuslinje osv.
Efter at have studeret DOM og BOM begynder vi at skabe mere eller mindre komplekse JavaScript-scripts, der interagerer med siden og browseren.
Så, efter at være blevet lidt mere komfortable, studerer de noget JavaScript-bibliotek, for eksempel jQuery, takket være hvilket du kan oprette de samme programmer som i JavaScript, men meget hurtigere og mere effektivt.
Nogle webmastere begynder straks at lære jQuery og springer de foregående tre faser over, men jeg anbefaler ikke dette, da du under alle omstændigheder skal forstå JavaScript-syntaks og kende DOM/BOM-objekter, deres egenskaber, metoder og formål.
Hvilke programmer kan du skrive ved hjælp af JavaScript?Du kan bruge det til at lave mange interessante programmer (scripts):
— du kan oprette scripts, der ændrer elementerne på en hjemmeside eller deres placering ved at klikke på en eller anden knap,
- du kan oprette animation,
— manipulere formularer, for eksempel kontrollere brugerindtastede data for korrekthed,
— opret forskellige tests, for eksempel som Unified State Examination (skoleeksamener) og få resultatet med det samme,
— takket være BOM kan du finde ud af karakteristikaene for browseren og computeren for den bruger, der besøgte dit websted, hvilket giver dig mulighed for at oprette forskellige besøgstællere,
— ved at bruge JavaScript kan du endda oprette spil, tegnefilm og mange andre interessante og nyttige programmer.
Formålet med denne JavaScript-bog er at lære dig det grundlæggende i JavaScript-syntaks, at introducere dig til programmering og begreber som variabler, datatyper, operationer, grensætninger, funktioner, sløjfer, arrays, objekter osv. Alt dette findes i andre programmeringssprog, så når først du mestrer JavaScript, vil det være meget nemmere for dig at lære andre sprog, såsom PHP, C++ eller Python.
JavaScript tutorial strukturI JavaScript-selvstudiet vil følgende emner og lektioner blive dækket.
Hej kære læsere. Mens nogen desperat leder efter noget andet at spare på for at bevare deres velvære, investerer smarte mennesker i sig selv. De har længe indset, at viden om teknologi kan tjene gode penge.
Hvordan præcist? Jeg har omkring 100 blogartikler dedikeret til dette. For eksempel "" eller "". Hvad kan vi sige om dem, der planlægger at gøre noget seriøst? Computerfærdigheden blandt befolkningen vokser, og dermed også antallet af undervisningsmaterialer. Tilbage er kun at finde de bedste.
I dag vil vi tale om JavaScript-lektioner for begyndere. Når du kender dette programmeringssprog, kan du allerede lede efter kunder og tjene penge. For nogle vil dette være det næste skridt til succes i it-branchen.
Fra dagens artikel lærer du, hvor du kan lære at kode, få et tip til, hvordan du gør det så effektivt og hurtigt som muligt, eller gratis. Hver person har deres egne prioriteter, så jeg vil forsøge at opfylde alles håb om at finde noget nyttigt i denne publikation.
I modsætning til sædvane vil jeg ikke slå rundt i bushen for længe. Der er meget information. Lad os komme igang.
Gratis JavaScript-kurserDet økonomiske spørgsmål for mange begyndere programmører er af afgørende betydning. Dette er ret logisk. Internettet blev oprindeligt skabt som en videnbase, hvor alle kan finde information af interesse. “Hvorfor skal jeg pludselig betale?” er et helt naturligt spørgsmål.
Svaret på dette er desværre også enkelt – kvalitet. Der er for få talentfulde og uselviske mennesker i vores land, der er klar til at give deres tid gratis, men bliv ikke ked af det.
Heldigvis er der alle mulige former for kampagner, bonusser og kurser skabt for at øge PR for udviklere. Lidt kendte skoler laver materialer, men i første omgang er de af hensyn til feedback og anmeldelser klar til at levere dem gratis. Du skal bare komme til det rigtige sted og finde det bedste tidspunkt for det. Det lykkedes mig at finde en god mulighed, som jeg er glad for at dele med jer nu.
Hvis du ikke ved noget om JS (dette er den verdensomspændende forkortelse for JavaScript), kan jeg foreslå et udvalg af videoer fra YouTube. Dette er et introduktionskursus til læring fra bunden, skabt af onlineskolen Huxlet.
Du kan også få kurset" Grundlæggende om programmering» med opgaver på virksomhedens officielle hjemmeside. De 17 timers træning omfatter 27 lektioner og 21 praktiske øvelser.
Når det grundlæggende er lært, kan du gå videre til næste trin " JS: forberedelse til arbejde" Adgang er også gratis.
Jeg har naturligvis ikke selv taget dette kursus, og jeg kan derfor ikke garantere for kvaliteten og fortælle om eventuelle funktioner ved uddannelsen. Huxlet dukkede op for relativt nylig og positionerer sig som et internationalt team af specialister, der er engageret i at træne folk fra bunden til professionelt niveau.
Engelsksprogede tekster, kurser, referencer til velkendte ressourcer som Lifehacker og Habr inspirerer til tillid. Den største fordel er dog efter min mening, at det er gratis.
Måske lidt senere vil virksomheden være i stand til at bevise sig selv, bevise sin betydning i denne verden, vise niveauet af specialister, den producerer og opnå berømmelse, succes og lignende.
Hvis du ikke ønsker at spilde tid og studere så meget, kan du kun "købe ud" informationen relateret til JS: "JavaScript. Niveau et" og "JavaScript. Niveau to." Sandt nok tror jeg, at jeg i dette tilfælde bliver nødt til at glemme praktikopholdet. Disse oplysninger bør afklares med udviklerne.
Det er i bund og grund det. Jeg ønsker dig alt det bedste. Glem ikke at abonnere på min VKontakte-gruppe for at vide lidt mere om at tjene penge på internettet. Indtil næste gang.
JavaScript kommer i spil, når vi skal udføre nogle handlinger på den klientside, der fik adgang til vores webside.
JavaScript kan ændre en webside uden at kontakte serveren, validere værdierne for brugerinput og udføre andre handlinger.
Denne artikel giver nogle grundlæggende oplysninger til at komme i gang med at bruge JavaScript.
Indsættelse af et script direkte i sidekodenDu kan indsætte JS-kode direkte på siden.
alert("Hej!"); //noget JS-kode her
Flytning af koden til en separat filDu kan lægge JavaScript-koden i en ekstern fil og bruge et link til den på siden
Afslutningsmærket er påkrævet i dette tilfælde.
Det er bedst at indsætte scripts før det afsluttende tag
Variabler VariablenavneVariablenavne kan begynde med et stort bogstav, et lille bogstav, en understregning eller et $-tegn.
Navnet kan indeholde tal, men variabelnavnet kan ikke begynde med et tal.
JavaScript skelner mellem store og små bogstaver: mytext og myText er to forskellige variabler.
Det er bedre at bruge CamelCase til navngivning ved at starte hvert ord i variabelnavnet med et stort bogstav.
Erklæring af variablerJavascript bruger var til at erklære variabler.
Var minTekst; //undefined myText = "Hej!"; advarsel(minTekst);
Umiddelbart efter at have erklæret en variabel, er dens værdi udefineret.
Du kan tildele en værdi til en variabel, når du erklærer den:
Var myText = "Hej!";
Det er også muligt at erklære flere variable i én var:
Var sum = 4 + 5, myText = "Hej!";
Når du tildeler en værdi, kan var udelades, men det er bedre ikke at gøre det.
Variable typerI JavaScript kan du bruge følgende strenge:
Var myText = "Hej!";
hele tal:
Var mitNumber = 10;
Brøktal:
var pi = 3,14;Booleske værdier:
Var er Boolesk = falsk;
JavaScript-syntaksdetaljer KommentarerKommentarer på samme linje er fremhævet med "//". Alt efter disse karakterer betragtes som en kommentar.
Hvis du vil kommentere flere linjer, skal du bruge "/*" for at angive begyndelsen af kommentaren og "*/" for at angive slutningen af kommentaren.
/* her er kommenteret kode og det er også kommentar */
OperatøradskillelseFor at adskille operatører skal du bruge ";"
Det er tilrådeligt, men ikke påkrævet, at bruge blanktegn for at forbedre læsbarheden af tekst.
Arbejde med strenge var str = 4 + 5 + "7"vil give strengværdien "97" i str
Var str2 = "7" + 4 + 5
vil give strengværdien "745" i str2
Faktum er, at værdien af addition beregnes sekventielt - fra venstre mod højre. Når 2 tal tilføjes, er resultatet et tal. Når en streng og et tal tilføjes, opfattes tallet som en streng, og de to strenge kombineres.
Konvertering af en streng til et talFor at konvertere en streng til et tal, brug parseInt() og parseFloat()
Disse funktioner modtager to argumenter. Den første er strengen, der vil blive konverteret til et tal, og den anden er den talsystembase, der vil blive brugt til oversættelsen. For at behandle en streng som et decimaltal, skal du bruge 10 som det andet argument
Var mitNumber = parseInt("345", 10);
JavaScript-funktionerFunktioner i JavaScript erklæres således:
Funktion myFunction() (Nogle JS-kode)
For at returnere en værdi skal du bruge return:
Funktion myMultiplication(paramOne, paramTo) (retur paramOne * paramTo)
Du kan erklære en "anonym" funktion ved at udelade navnet på funktionen.
En funktion kan overføres som en parameter til en anden funktion ved at angive dens navn.
ObjekterAlt i JavaScript er en efterkommer af Object.
Oprettelse af et nyt objekt var person = new Object(); // oprettelse af et personobjekt person.firstname = "Andrew"; // tilføj den første attribut person.lastname = "Peterson";// tilføj den anden attribut person.getFullName = function() (// tilføj metoden returner this.firstname + " " + this.lastname; )For det andet, kortere mulighed for at oprette et objekt
Var person = ( // oprettelse af et personobjekt fornavn: "Andrew", efternavn: "Peterson", getFuldt Navn: function() ( returner dette.fornavn + " " + dette.efternavn; ) )
Arbejde med objektegenskabervar mig = nyt objekt();
me["name"] = "Serg";
me.alder = 33;
Ny måde at optage på
Var arr = ; // Opret et array
Arbejde med arrays i JavaScript Antal elementer i arrayet var length = arr.length; // 3 Tilføjelse af elementer til arrayet - push arr.push("En ny værdi"); Hentning af det sidste element i et array - pop var lastValue = arr.pop(); Kombination af arrays var arr2 = ; var longArray = arr.concat(arr2); // Kombination af to arrays arr og arr2 til en longArray Join - sammenlægning af alle elementer i arrayet var longString = arr.join(":") // "11:Hello!:true" Sammenligning og logiske funktioner i JavaScript Mere eller mindre var er Sand = 6 >= 5; // større end eller lig med Equality var isFalse = 1 == 2; // lig med isTrue = 1 != 2; // ikke lig var alsoTrue = "6" == 6; Identity var notIdentical = "3" === 3 // falsk fordi datatyperne ikke matcher notIdentical = "3" !== 3 // sand fordi datatyperne ikke matcher IF-sætningen hvis (5< 6) { alert("true!"); } else { alert("false!") } Оператор SWITCH var lunch = prompt("What do you want for lunch?","Type your lunch choice here"); switch(lunch){ case "sandwich": console.log("Sure thing! One sandwich, coming up."); break; case "soup": console.log("Got it! Tomato"s my favorite."); break; case "salad": console.log("Sounds good! How about a caesar salad?"); break; case "pie": console.log("Pie"s not a meal!"); break; default: console.log("Huh! I"m not sure what " + lunch + " is. How does a sandwich sound?"); } Логическое AND — && if (1 == 1 && 2 == 2) { alert("true!"); } Логическое OR — || if (1 == 1 || 2 == 3) { alert("true!"); } Логическое NOT — ! if (!(1 == 1)) { alert("false!"); } Циклы FOR for (var i = 0; i < 10; i = i + 1) { alert(i); } var names = [ "Sergey", "Andrey", "Petr" ]; for (var i = 0, len = names.length; i < len; i = i + 1) { alert(names[i]); } WHILE while (true) { // Бесконечный цикл alert("This will never stop!"); } var names = [ "Sergey", "Andrey", "Petr" ]; while (names.length >0) ( alert(navne[i]); ) DO WHILE do ( alert("Dette stopper aldrig!"); ) while (true) (// Infinite loop Lines text = "Blah blah blah blah blah Eric \ bla bla bla Eric bla bla Eric bla bla \ bla bla bla bla bla Eric"; UnderstrengeNogle gange ønsker du ikke at vise hel streng, bare en del af den. I din Gmail-indbakke kan du f.eks. indstille den til at vise de første 50 tegn i hver besked, så du kan se dem. Denne forhåndsvisning er en understreng af den originale streng (hele beskeden).
"noget ord". understreng(x, y) hvor x er hvor du begynder at hakke og y er hvor du afslutter med at hakke den originale streng.
Nummerdelen er lidt mærkelig. For at vælge "han" i "hej", skriver du dette: "hej". understreng(0, 2);
Tænk på, at der er en markør til venstre for hvert tegn, sådan her: 0-h-1-e-2-l-3-l-4-o-5 .
Hvis du hugger ved 0 og igen ved 2, står du tilbage med kun ham.
Flere eksempler:
1. De første 3 bogstaver i "Batman"
"Batman".substring(0,3)
2. Fra 4. til 6. bogstav i "laptop"
"laptop".substring(3,6)
Denne side er begyndelsen på en JavaScript-tutorial for begyndere. For at mestre det, skal du mindst have minimal viden om HTML og CSS. Se HTML og CSS tutorial for begyndere for at få dem (for at lære JavaScript skal du tage mindst 3-4 lektioner minimum).
JavaScript er designet til at køre i browseren sammen med HTML og CSS. Men hvis disse sprog er beregnet til layout af webstedets struktur, så giver JavaScript dig mulighed for at "genoplive" websider - gøre dem lydhøre over for brugerhandlinger eller demonstrere en vis dynamik (f. -menuer nede).
Så lad os uden videre komme i gang med at lære dette unægteligt nyttige sprog.
Sådan kører du JavaScriptDer er to måder at skrive og køre JavaScript på: Den første er, at vi skriver koden direkte på HTML-siden inde i tagget:
Dette er titlen var name = "Dima"; alert("Hej, "+navn);
Tagget kan placeres hvor som helst på siden - både i og i .
Den anden mulighed er, at JavaScript-koden er gemt i en separat fil (som CSS) og er også forbundet ved hjælp af et tag med src-attributten, som angiver stien til filen med scriptet:
Dette er titlen titlen Dette er hovedindholdet på siden.
Fremover vil jeg ikke beskrive hvordan JavaScript hænger sammen, men vil blot skrive HTML-kode i én blok, og JavaScript-kode i en anden.
Finder fejl i kodenSe følgende video, hvor jeg viser, hvordan man arbejder med debuggeren, som viser JavaScript-fejl, og konsollen:
Nogle videoer kan komme foran sig selv, da vi endnu ikke har dækket hele ES6 på dette tidspunkt i selvstudiet. Bare spring disse videoer over og se dem senere.
AJAX- lektion udelukket (lidt materiale), der kommer snart en separat lærebog om Ajax (masser af materiale)