javascript
DESCRIPTION
Invatati JavaScript prin exemple simple.TRANSCRIPT
-
1
-
2
JavaScript
Versiune:iunie/2015
Cuprins
CuprinsIntroducerePrimulprogramnJavaScriptJavaScriptpoateschimbaconinutulelementelorhtmlJSpoateschimbaatributelehtmlJSpoateschimbastilulCSSJSpoatevalidadateleUndepotfiplasatescripturileJS?
JSinJSnJSnfiiereexterne
PosibilitiledeafiarealeJSUtilizareawindow.alert()Utilizareadocument.write()UtilizareainnerHTMLUtilizareaconsole.log()
-
3
ComentareacoduluinJSVariabilenJS
OperatoruldeatribuireTipuridedatenJavaScriptOperatorinJSOperatorideatribuirenJSOperatoridecomparaieilogiciPrecedentaoperatorilor
TipuridedatenJSBiblioteciJavaScript
IntroducerenAngularJSExpresiinAngularJS
NumerenAngularJSTextnAngularJSObiectenAngularJSManipularearraysnAngularJSConcluzii:
DirectiveAngularJSLegareadatelornAngularJSRepetareaelementelorHTML
ControllerinAngularJSControllerinfileexterne
FiltrenAngularJSAdugareafiltrelornexpresii
Citireadatelordepeserver$httpTabelenAngularJS
AdugarestyleCSSAdugareafiltruluiorderByAdugareafiltruluiuppercaseAdugareaunuiindexntabel
SQLiAngularJSPHPiMySQLASP.NETcuSQL
Introducere
JavaScriptafostdezvoltatprimadatadecatrefirmaNetscape,cunumeledeLiveScript,unlimbajdescriptcareextindeacapacitatileHTML,oferaoalternativapartialalautilizareaunuinumarmaredescripturiCGIpentruprelucrareainformatiilordinformularesicareadaugadinamisminpaginileweb.
DupalansarealimbajuluiJava,NetscapeainceputsalucrezecufirmaSun,cu
scopuldeacreaunlimbajdescriptcuosintaxasisemanticaasemanatoarecualimbajuluiJava,sidinmotivedemarketingnumelenouluilimbajdescriptafostschimbatin"JavaScript".
-
4
JavaScriptaaparutdinnevoiacalogicasiinteligentasafiesipeparteadeclient,
nudoarpeparteadeserver.Dacatoatalogicaestepeparteadeserver,intreagaprelucrareestefacutalaserver,chiarsipentrulucrurisimple,asacumestevalidareadatelor.Astfel,JavaScriptilinzestreazapeclientsifacecarelatiasafieunadevaratsistemclientserver.
LimbajulHTMLoferaautorilordepaginiWeboanumitaflexibilitate,darstatica.
DocumenteleHTMLnupotinteractionacuutilizatorulnaltmodmaidinamic,dectpuneladispozitiaacestuialegaturilaalteresurse(URLuri).CreareadeCGIuri(CommonGraphicsInterface)[programecareruleazapeserverulWebsicareacceptainformatiiprimitedinpaginadewebsireturneazacodHTML]aduslaimbogatireaposibilitatilordelucru.Astfel,unpasimportantspreinteractivizareafostrealizatdeJavaScript,carepermiteinserareanpaginilewebascripturilorcareseexecutancadrulpaginiiweb,maiexactncadrulbrowseruluiutilizatorului,usurandastfelsitraficuldintreserversiclient.Deexemplu,ntropaginapentrucolectareadedatedelautilizatorsepotadaugascripturiJavaScriptpentruavalidacorectitudineaintroduceriisiapoipentruatrimiteserveruluidoardatecorectespreprocesare.
JavaScriptcontineolistadestuldeampladefunctiisicomenzimenitesaajutela
operatiimatematice,manipularidesiruri,sunete,imagini,obiectesiferestrealebrowserului,linkurileURLsiverificarideintroducerialedatelornformulare.Codulnecesaracestoractiunipoatefiinseratnpaginawebsiexecutatpecalculatorulvizitatorului.
Dupalansareasa,indecembrie1995,JavaScriptsiaatrassprijinulprincipalilor
distribuitoridindomeniu,cumsuntApple,Borland,Informix,Oracle,Sybase,HPsauIBM.Sadezvoltatincontinuare,obtinandrecunoasteremajoritatiibrowserelor.Intelegandimportantascriptinguluiweb,MicrosoftsiadoritsaoferesuportsipentruJavaScript.
NetscapeapreferatsaacordelicentadetehnologiecompanieiMicrosoftinlocsao
vanda,astfelMicrosoftaanalizatJavaScript,sibazandusepedocumentatiapublicaacreatpropriasaimplementare,"Jscript",careesterecunoscutadeMicrosoftInternetExplorer.
Jscript1.0esteaproximativcompatibilcuJavaScript1.1,careesterecunoscutde
NetscapeNavigator.Totusi,versiunileulterioaredeJavaScriptsidiverselediferentespecificeplatformelordeoperareauinceputsadeadestuleproblemeprogramatorilorwebsiastfelNetscape,MicrosoftsialtidistribuitoriaufostdeacordsapredealimbajuluneiorganizatiiinternationaledestandardizareECMAaceastaafinalizatospecificatiedelimbaj,cunoscutacaECMAScript,recunoscutadetotidistribuitorii.DesistandardulECMAesteutil,atatNetscapecatsiMicrosoftaupropriilelorimplementarialelimbajuluisicontinuasaextindalimbajuldincolodestandarduldebaza.
PelangaJscript,MicrosoftaintrodussiunconcurentpentruJavaScript,numit
VBScript,realizatpentruausurapatrundereapewebaprogramatorilorVB.VBScriptesteunsubsetallimbajuluiVisualBasic.CutoateacesteaJavaScriptadevenitcunoscutcalimbajuldescriptingstandardpentruweb.
-
5
Primul program n JavaScript Primul program JavaScript Apasai aici pentru data i timp.
JavaScript poate schimba coninutul elementelor html UnadinmetodelehtmlestegetElementById().nacestexemplumetotacaut
elementulhtml(cuid=demo)ilinlocuetecuSalut!,JavaScript. Schimbarea continutului elementelor html JavaScript poate schimba continutul html Apasati aici!
JS poate schimba atributele html JS poate schimba imaginile Apasati pe imagine pentru a o schimba function changeImage() { var image = document.getElementById('myImage'); if (image.src.mach("bulbon")) { image.src = "pic_bullboff.gif"; }else { image.src = "pic_bulbon.gif"; } }
-
6
JS poate schimba stilul CSS JS poate schimba stilul CSS JS poate schimba stilul unui element HTML function myFunction() { var x = document.getElementById("demo"); x.style.fontSize = "25px"; x.style.color = "red"; } Apasa aici!
JS poate valida datele JS poate valida datele Va rugam introduce-ti un numar intre 1 si 10: Trimite function myFunction() { var x, text; //preia valoarea din campul de input id="numb" x = document.getElementById("numb").value; //daca x nu este numar sau are valoarea mai mica decat 1 sau mai mare de 10 if (isNaN(x) ||x10) { text = "Inputul nu este valid"; } else { text = "Input OK" } document.getElementById("demo").innerHTML = text; }
Unde pot fi plasate scripturile JS? Scripturile JavaScript pot fi plasate ntre tagurile HTML sau . Iar
dup cum ati vzut n exemplele de mai sus codul JS trebuie inclus ntre tagurile . Exemplele de cod mai vechi sunt incluse intre tagurile
-
7
type=text/javascript> . O alt modalitate de plasare a codului JS este in fiiere externe.
JS in function myFunction() { document.getElementById("demo").innerHTML = "AM SCHIMBAT TEXTUL."; } Pagina mea web Acest paragraf va fi modificat. Incearca
JS n >Mihai Cornel's web page JavaScript in elementul "body". Apasa pentru a incerca! function myFunction() { document.getElementById("demo").innerHTML = "JS functioneaza!!!"; }
JS n fiiere externe Fiiereleexterneauctevaavantaje:
separcodulHTMLdecodulJavaScript facecodulHTMLiJavaScriptmaiuordentreinut cretevitezadencrcareapaginilorweb.
Fiierulhtml: JS in fisiere externe Paragraful va fi schimbat Apasa!!! Nota: oFunctie() este scrisa intr-o fila externa
-
8
Fisieruljavascript:
function oFunctie(){ document.getElementById("demo").innerHTML = "Text modificat"; }
Posibilitile de afiare ale JS JSpoateafiadateleprinmaimulteci:
scriereaintrofereastrdealertare,window.alert() scriereanpaginaHTMLprindocument.write() scriereantrunelementalpaginiiHTMLprininnerHTML scriereanconsolabrowserului,utilizndconsole.log().
Utilizarea window.alert() Aceasta pagina conine o fereastra de alerta! Pe care o ve-ti vedea la rulare. window.alert(9 +7);
Utilizarea document.write()
Aceasta pagina utilizeaza document.write() Va fi afisat in pagina document.write(9 + 9);
Stergereapaginiiwebiafiarearezultatuluinpaginagoala:
Aceasta pagina va fi stearsa la apasarea butonului Si va fi afisat rezultatul: Onclick!
-
9
Utilizarea innerHTML Utilizarea innerHTML Acesta a fost cel mai utilizat. document.getElementById("demo").innerHTML = 123 +321;
Utilizarea console.log() ActivareaconsoleibrowseruluisefacecutastaF12.
Afisarea in consola browserului cu console.log() Activarea consolei se face cu tasta F12 console.log(123+456);
Comentarea codului n JS Pentrucomentareauneisingureliniidecadseutilizeazcaracterele//dupaceste
caractereliniadecodvafiignorat.Pentrucomentareamaimultorliniidecodsevautiliza/*sisevancheiacu*/.
Variabile n JS nJSvariabilelesuntcontainerecarestocheazvalori.
JavaScript si variabilele In acest exemplu, x,y, z sunt variabile //acesta este un comentariu pe o linie /* acesta este un comentariu pe mai multe linii */ var x =5 ; var y = 22;
-
10
var z = x +y; document.getElementById("demo").innerHTML = z;
nJSvariabilelesuntidentificateprinnumeunice.Acestenumedeidentificarea
variabilelorpotfi: numecarecontinlitere,numere,liniidesubliniere,etc. trebuiesnceapcuoliter suntcasesensitive(Asiasuntdouvariabilediferite) nupotluacanumecuvintelerezervatelimbajuluiJS.
Operatorul de atribuire nJSsemnul=esteunoperatordeatribuire,nusemnulegaldinmatematic.
Tipuri de date n JavaScript nJSvariabilelepotconinenumeredeexemplu22sitextdeexemplumihaicornel
saumihaicornelambelevariantetextsuntcunoscuteicudenumireadestring.Variabilelesuntcreatecuajutorulcuvntuluicheievar.var numeleDumneavoastra;
Daraceastdeclaraie,demaisus,nuareatribuitniciovaloare,casiatribuiiopovaloareutilizaisemnulegal(=).numeleDumneavoastra = "mihai cornel";
Acestedoudeclaraiipotfifcutentrosinguradeclaraie:var numeleDumneavoastra = "Mihai Cornel";
Pentruaafiaacestedateputemutilizaurmtorulcod: Variabile in JS Crearea unei variabile, atribuirea unei valori si afisarea acesteia. Aceasta pagina a fost scrisa de: var numeleDumneavoastra = "Mihai Cornel"; document.getElementById("demo").innerHTML = numeleDumneavoastra;
-
11
Operatori n JS
Operator Descriere
+ Adunare
Scadere
* nmulire
/ mprire
% Modulo(returneazarestulmpririi)
++ ncrementare
Decrementare
Operatori de atribuire n JS
Operator Exemplu nseamn
= x=y x=y
+= x+=y x=x+y
= x=y x=xy
*= x*=y x=x*y
/= x/=y x=x/y
%= x%=y x=x%y
Operatori de comparaie i logici
Operatori Descriere
== esteegal
=== esteegalideacelaitip
!= estediferit
!== estediferitcavaloareitip
-
12
> maimare
= maimaresauegal
Precedenta operatorilor
Operator Descriere
() paranteze
++ incrementare,decrementare
*/% nmulire,mprire,modulo
+ plus,minus
Tipuri de date n JS VariabilelediJavaScriptpotluacavalorimaimultetipuridedateca:numere,strings,
arrays,objectssialtetipuri:var numar = 16; // Numar var nume = cornel"; // String var masini = ["Saab", "Volvo", "BMW"]; // Array var obiect = {firstName:"John", lastName:"Doe"}; // Object
nprogramareconceptuldedateestefoarteimportant,pentruaoperacuacestedateestenecesarscunoatemctevalucruricadeexempludeclaraia:var masina = 25 + "mihai cornel";
Eibine,cumvainterpretacomputerulacestcod,careadununnumarcuuntext?
Biblioteci JavaScript
Bibliotec Site Utilizare
AngularJS https://angularjs.org/
jQuery https://jquery.com/
Bootstrap http://getbootstrap.com/
Node.js http://getbootstrap.com/
-
13
Ember.js http://emberjs.com/
Introducere n AngularJS AngularJSesteolibrrieJavaScriptcepoatefiadugatnpaginileHTMLprintagul
iareurmtoareaform:
AngularJSextindeHTMLcudirectivelengdirectives:
ngappdefineteoaplicatieAngularJS,inexempluldemaijosaceastdirectivindiccelementulesteproprietarulaplicaieiAngularJS
ngmodelleagvalorileHTMLdininput,select,textareadeaplicaie,nexempluldemaijosvaloareadinestelegatdevariabilaname
ngbindleagdateleaplicaieideHTML,nexempluldemaijosvaloareanameesteatribuit(legat)deelementulHTMLcareafieazvaloarea.
Introduce-ti text in caseta: Nume:
DirectiveleAngularJSsuntatributeHTMLprefixatecung,spreexempludirectiva
nginit,iniiazvariabileledinaplicaieileafieaznHTML. Numele meu este:
DacdoriisvalidaicodulHTMLputeiutilizaprefixuldata:
-
14
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> Numele meu este:
ExpresiilenAngularJSsescriunparantezeduble{{expresie}}idatelevorfi
afiatenloculncareafostscrisexpresia: Acesta este primul calcul in AngularJS: {{15+22}}
ExpresiileAngularJSafieazdatelenHTMLlafelcumofaceidirectivangbind:
Introduce-ti text in caseta de input: Numele: {{nume}}
IntroaplicaieAngularJSdirectivangappdefineteaplicaiaiardirectiva
ngcontrollerdefinetecontrolerulaplicaiei: Incercati sa schimbati numele. Nume: Prenume: Numele complet: {{nume +" "+ prenume}} var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.nume = "Mihai";
-
15
$scope.prenume = "Cornel" });
Definireamoduluiseobineprincodul:var app = angular.module('myApp', []);
Definireacontroleruluiseobineprincodul:app.controller('myCtrl', function ($scope) { $scope.nume = "Mihai"; $scope.prenume = "Cornel" });
Expresii n AngularJS Expresiilesuntscriseintreparantezeduble{{expresie}}acesteaafieazdaten
HTMLasemntorcudirectivangbindisuntafiatenloculundeaufostdeclarate.Acesteapotconinelitere,operatoriivariabile.Numere n AngularJS Pretul Total: {{cantitate*pret}}
Acelaicodutilizndngbind: Pretul Total:
Text n AngularJS
-
16
Nume si prenume: {{nume + " "+prenume}}
Utilizarengbind: Nume si prenume:
Obiecte n AngularJS Prenumele persoanei este: {{persoana.prenume}}
Manipulareobiecteutilizndngbind: Prenumele persoanei este:
Manipulare arrays n AngularJS
-
17
Scorul este: {{scor[3]}}
Arrayscungbind: Scorul este:
Concluzii: DiferenteIntreJavaScriptiAngularJS:
CainJS,expresiiledinAngularJSpotconinetext,operatoriivariabile ExpresiileAngularJSpotfiscriseninteriorulcoduluiHTML,InJSnusepoate ExpresiileAngularJSnupotconine:conditii,loopsiexcepii ExpresiileAngularJSsuportfiltre.
Directive AngularJS DirectiveleAngularJSsuntatributeHTMLprefixatecung:
ngappiniializeazaplicaiaAngularJS nginitiniializeazdateledinaplicaie ngmodelleagvaloriledinHTMLdedateledinaplicaie.
Introduce-ti un nume in caseta input: Prenume: A-ti introdus: {{prenume}}
-
18
Legarea datelor n AngularJS Expresia{{prenume}}dincoduldemaisus,esteuncaztipicdelegareadatelor,
aceastasincronizeazexpresiilecudateleAngularJS,{{prenume}}estesincronizatcungmodel=prenume. Calculator Cantitate: Pret: Pretul este in LEI: {{cantitate*pret}}
Repetarea elementelor HTML Repetarea codului HTML {{x}}
Utilizareangrepeatasupreunuiarraydeobiecte: Repetarea codului HTML {{x.nume+', '+x.tara}}
-
19
AngularJSpoatefifolositcusuccespentruaplicaiiceinteracioneazcubazelededateCRUD(CreateReadUpdateDelete).DirectivangappdefineteelementuldebazaluneiaplicaiiAngularJS,carevafiiniializatlaincarcareapaginiiipoateconectamoduledecod.DirectivanginitdefinetevariabileleiniialealeuneiaplicaiiAngularJS.DirectivangmodelleagvaloriledinHTML(input,select,textarea)ladateleaplicaiei,deasemeneapoatevalidadateleaplicaiei(number,email,required),poateafiastatuspentruaplicaie(invalid,dirty,touched,error)poatelivracodCSSpentruelementeleHTML,poatelipiielementenformeleHTML.DirectivangrepeatcloneazelementeledinHTML.
Controller-i n AngularJS DeregulacontrolleriinAngularJSsuntobiecteJavaScriptcareaucascopcontrolul
datelordinaplicaie. Introduce-ti un nume in caseta input: Nume: Prenume: A-ti introdus numele: {{nume+ " "+prenume}} var app= angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.nume = "Mihai"; $scope.prenume="Cornel"; });
AplicaiaAngularJSestedefinitdengapp=myAppcareruleazninteriorulelementului.Atributulngcontroller=myCtrlesteodirectivcaredefineteuncontroler.FunciamyCtrlesteofuncieJavaScript.AngularJSinvoccontrolerulcuobiectul$scope.Controlerulcreazdouvariabilenumeiprenume,iarngmodelleagcmpuriledeinputcuproprietilecontrolerului. Introduce-ti un nume in caseta input:
-
20
Nume: Prenume: A-ti introdus numele: {{totNumele()}} var app= angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.nume = "Mihai"; $scope.prenume="Cornel"; $scope.totNumele = function () { return $scope.nume +" " +$scope.prenume; } });
Dupcumvedeinexempluldemaisuscontrollerulpoateaveaimetode(functiecaovariabil).
Controller-i n file externe persoanaController.jsvar app= angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.nume = "Mihai"; $scope.prenume="Cornel"; $scope.totNumele = function () { return $scope.nume +" " +$scope.prenume; } });
angular20.html Introduce-ti un nume in caseta input: Nume: Prenume: A-ti introdus numele: {{totNumele()}}
Filtre n AngularJS FiltrelesuntadaugatenAngularJScuajutorulcaracteruluipipe(|).Acesteasunt
folositepentrutransformareadatelor.Filtrelesunt:
-
21
Filtru Descriere
currency formateazunnumr
filter selecteazunitemsaumaimulidintrunarray
lowercase formateaztextulnliteremici
orderBy ordoneazunarraydupoexpresie
uppercase formateaztextuldupliteremari.
Adugarea filtrelor n expresii uppercase
Introduce-ti un nume in caseta input: Nume: Prenume: A-ti introdus numele: {{totNumele()}} Numele este {{ nume | uppercase}} var app= angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.nume = "Mihai"; $scope.prenume="Cornel"; $scope.totNumele = function () { return $scope.nume +" " +$scope.prenume; } });
lowercase
Introduce-ti un nume in caseta input: Nume: Prenume: A-ti introdus numele: {{totNumele()}}
-
22
Numele este {{ nume | uppercase}} Prenumele este {{prenume | lowercase}} var app= angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.nume = "Mihai"; $scope.prenume="Cornel"; $scope.totNumele = function () { return $scope.nume +" " +$scope.prenume; } });
currency
Quantity: Price: Total = {{ (quantity * price) | currency }} var app = angular.module('myApp', []); app.controller('costCtrl', function($scope) { $scope.quantity = 1; $scope.price = 9.99; });
orderBy
Repetarea codului HTML {{x.nume+', '+x.tara}}
-
23
filter
fila.html Filtering input:
{{ (x.name | uppercase) + ', ' + x.country }}
filacontroller.jsangular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'}
]; });
Citirea datelor de pe server $http
Datelesuntpeserverdeexemplu:
http://www.w3schools.com/angular/customers.php{ "records": [ {
"Name" : "Alfreds Futterkiste", "City" : "Berlin",
"Country" : "Germany" }, {
"Name" : "Berglunds snabbkp",
-
24
"City" : "Lule", "Country" : "Sweden"
}, {
"Name" : "Centro comercial Moctezuma", "City" : "Mxico D.F.", "Country" : "Mexico"
}, { "Name" : "Ernst Handel",
"City" : "Graz", "Country" : "Austria"
}, {
"Name" : "FISSA Fabrica Inter. Salchichas S.A.", "City" : "Madrid",
"Country" : "Spain" }, {
"Name" : "Galera del gastrnomo", "City" : "Barcelona",
"Country" : "Spain" }, {
"Name" : "Island Trading", "City" : "Cowes", "Country" : "UK"
}, {
"Name" : "Kniglich Essen", "City" : "Brandenburg", "Country" : "Germany"
}, { "Name" : "Laughing Bacchus Wine Cellars",
"City" : "Vancouver", "Country" : "Canada" }, {
"Name" : "Magazzini Alimentari Riuniti", "City" : "Bergamo",
"Country" : "Italy" }, {
"Name" : "North/South", "City" : "London", "Country" : "UK"
}, { "Name" : "Paris spcialits",
"City" : "Paris", "Country" : "France"
}, {
"Name" : "Rattlesnake Canyon Grocery", "City" : "Albuquerque",
"Country" : "USA" }, {
"Name" : "Simons bistro", "City" : "Kbenhavn",
"Country" : "Denmark" }, {
"Name" : "The Big Cheese",
-
25
"City" : "Portland", "Country" : "USA"
}, {
"Name" : "Vaffeljernet", "City" : "rhus",
"Country" : "Denmark" }, {
"Name" : "Wolski Zajazd", "City" : "Warszawa", "Country" : "Poland"
} ] }
CodulhtmliAngularJSpentrupreluareadatelor:
{{ x.Name + ', ' + x.Country }} var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $http) { $http.get("http://www.w3schools.com/angular/customers.php") .success(function (response) {$scope.names = response.records;}); });
Tabele n AngularJS {{x.Name}} {{x.Country}}
-
26
var app = angular.module('myApp', []); app.controller('clienti', function ($scope, $http) { $http.get("http://www.w3schools.com/angular/customers.php") .success(function(response) {$scope.names = response.records;}); }) ;
Adugare style CSS table, th, td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(even) { background-color: #ffffff; } table tr:nth-child(odd){ background-color: #f1f1f1; } {{x.Name}} {{x.Country}} var app = angular.module('myApp', []); app.controller('clienti', function ($scope, $http) { $http.get("http://www.w3schools.com/angular/customers.php") .success(function(response) {$scope.names = response.records;}); }) ;
Adugarea filtrului orderBy table, th, td { border: 1px solid grey; border-collapse: collapse; padding: 5px;
-
27
} table tr:nth-child(even) { background-color: #ffffff; } table tr:nth-child(odd){ background-color: #f1f1f1; } {{x.Name}} {{x.Country}} var app = angular.module('myApp', []); app.controller('clienti', function ($scope, $http) { $http.get("http://www.w3schools.com/angular/customers.php") .success(function(response) {$scope.names = response.records;}); }) ;
Adugarea filtrului uppercase table, th, td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(even) { background-color: #ffffff; } table tr:nth-child(odd){ background-color: #f1f1f1; } {{x.Name}} {{x.Country | uppercase}} var app = angular.module('myApp', []); app.controller('clienti', function ($scope, $http) { $http.get("http://www.w3schools.com/angular/customers.php") .success(function(response) {$scope.names = response.records;});
-
28
}) ;
Adugarea unui index n tabel table, th, td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(even) { background-color: #ffffff; } table tr:nth-child(odd){ background-color: #f1f1f1; } {{$index + 1}} {{x.Name}} {{x.Country | uppercase}} var app = angular.module('myApp', []); app.controller('clienti', function ($scope, $http) { $http.get("http://www.w3schools.com/angular/customers.php") .success(function(response) {$scope.names = response.records;}); }) ;
SQL i AngularJS Obinereadatelordepeservere.
PHP i MySQL table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px; }
-
29
table tr:nth-child(odd) { background-color: #f1f1f1; } table tr:nth-child(even) { background-color: #ffffff; }
{{ x.Name }} {{ x.Country }}
var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $http) { $http.get("http://www.w3schools.com/angular/customers_mysql.php") .success(function (response) {$scope.names = response.records;}); });
ASP.NET cu SQL table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(odd) { background-color: #f1f1f1; } table tr:nth-child(even) { background-color: #ffffff; }
{{ x.Name }} {{ x.Country }}
-
30
var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $http) { $http.get("http://www.w3schools.com/angular/customers_sql.aspx") .success(function (response) {$scope.names = response.records;}); });
1. CodulpeserverPHPcuMySQL:
2. PHPiMSAccess:
-
31
3. ASP.NET,VBiMSAccess:
4. ASP.net,VBRazoriSQLLite:
@{ Response.AppendHeader("Access-Control-Allow-Origin", "*") Response.AppendHeader("Content-type", "application/json") var db = Database.Open("Northwind"); var query = db.Query("SELECT CompanyName, City, Country FROM Customers"); var outp ="" var c = chr(34) } @foreach(var row in query) { if outp "" then outp = outp + "," outp = outp + "{" + c + "Name" + c + ":" + c + @row.CompanyName + c + "," outp = outp + c + "City" + c + ":" + c + @row.City + c + "," outp = outp + c + "Country" + c + ":" + c + @row.Country + c + "}" } outp ="{" + c + "records" + c + ":[" + outp + "]}" @outp
-
32
HTML DOM n AngularJS Directiva ng-disabled Apasa! Button {{ mySwitch }}
DirectivangdisabledleagbutonulApasa!decheckboxulButton,laincarcarea
paginiibutonulApasa!vafiinactiv.
Directiva ng-show ngshowafiseazcomponentaHTMLcndaceastaestesetattrue.
Sunt vizibil. Nu sunt vizibil.
Directiva ng-hide
-
33
I am not visible. I am visible.
Evenimente n AngularJS
-
34