Bazele Unui Calculator JavaScript
Încărcat de
ScribdTranslationsBazele Unui Calculator JavaScript
Încărcat de
ScribdTranslationsBazele unui calculator JavaScript
Introdus
JavaScript (JS) este un limbaj de marcare HTML, adică este folosit pentru a schimba proprietăț ile unui HTML (sau
HTM, PHP, CFM etc) fiș ier. Fiș ierul HTML este pagina de bază pe care orice browser web o acceptă. Acest fiș ier de bază
poate fi stilizat pentru atractivitate vizuală folosind Cascading Style Sheets (CSS), dar pentru acest exemplu de bază, vom
rămâi doar la JS ș i HTML. Pentru că JS este un limbaj bazat pe HTML, se află doar în pagina web care îl apelează.
Face ca controlul dinamic al conț inutului paginilor web să fie extrem de uș or, dar nu permite funcț ionarea de sine stătătoare.
aplicaț ii de rulat. Ai nevoie de o pagină web ș i de un browser web pentru a rula JS (nu trebuie confundat
cu Java sau un applet Java).
Este important de menț ionat că unele site-uri (atât interne, cât ș i externe) folosesc Internetul Microsoft.
Server de Servicii de Informatii (IIS) pentru găzduirea tuturor site-urilor web; IIS 6 a fost introdus cu Windows XP
sistem de operare. Ca ș i în cazul majorităț ii software-ului neopen-source care a fost introdus în anii 2000, acest
este un server foarte specific care a fost scris pentru a deservi în principal un singur navigator web. Aceasta nu intervine în
joacă-te cu markup HTML ș i JS de bază, dar acest server nu va suporta protocoale avansate pe partea serverului
cum ar fi HTML5 sau XHTML5.
Software
1. Notepad simplu pentru Windows. Text Edit pentru Mac nu va func ț iona.
2. Editor JavaScript gratuit (Windows)
3. KompoZer (Windows ș i Mac)
Aspect de bază
Pentru calculatoarele JS, ai nevoie de
1. Document HTML de bază
a. Eticheta script în Head pentru a apela codul JS
b. Formular HTML (cu metoda="post")
c. Sec ț iunea de ie ș ire (de preferat folosind DIV-uri, dar pute ț i folosi ș i Tabele)
2. Cod JavaScript
Document HTML de bază
<html>
<head>
Calculator Nou
1. <script type="text/javascript"src="new_calc.js"></script>
<link rel="stylesheet" type="text/css" href="new_calc.css"/>
</cap>
<body>
2. <form name="new_calc" method="post">
3. <input type="text" id="input_1"/>
4. <input type="button" value="Calculaț i" onclick="myCalc()"/>
</form>
5. --
</corpul>
</html>
1.Declare ce fi ș ier va căuta documentul HTML pentru a apela toate fi ș ierele JS
• Trebuie să fie plasat în eticheta <head></head> a fiș ierului HTML
• Ar fi trebuit sătip="text/javascript", dar nu este necesar
• Thenew_calc.jsa spune HTML-ului să caute în acelaș i director (adică, acelaș i
folder) fiș ierul HTML curent se află în
• Dacă fiș ierul se află într-un subdirector, foloseș te/Inside/new_calc.js
• Dacă fiș ierul se află în afara directorului, folosiț i
../Outside/new_calc.js
• Foloseș te cât mai multe../după cum este necesar pentru a „urca” în ierarhia folderelor
2.Declarează un formular care va prelua inputul unui utilizator ș i va ac ț iona asupra acestuia mai târziu
• Trebuie să aibă unicenume(va fi folosit de fiș ierul JS pentru a localiza câmpul de introducere corespunzător)
• Trebuie să aibăpostaltfel fiș ierul JS nu va putea citi inputul
3.Creează un câmp de text de intrare în care utilizatorul poate introduce fie un ș ir, fie un număr
• Nu necesită un tag de închidere
• Necesită unicăinput_1astfel încât fiș ierul JS să poată importa textul
• Pentru un câmp simplu de „text”, nu este necesartip="text", dar este corespunzător să includem în
fă codul neambiguu
4.Creează un buton "trimite" care va determina fi ș ierul JS să se execute
• Trebuie să includă untip="buton"pentru a crea un buton clicabil
• TheCalculeazăCalculează
• ThemyCalc()proprietatea va apela funcț ia JS "myCalc()" odată ce este apăsată
• Numele "myCalc()" trebuie să se potrivească exact cu numele funcț iei din fiș ierul JS
• Trebuie să includi () la sfârș itul numelui funcț iei
5.Creează un singur rând în HTML unde va fi plasată valoarea de ie ș ire a fi ș ierului JS
• Trebuie să aibă un ID unic
• Plasează asta<div>în afara de<form></form>eticheta
Formulare de Introducere
Mai jos este o listă de câmpuri de intrare valide pe care le poț i folosi într-un câmp de formular:
<form> Defineș te un formular HTML pentru introducerea de date de către utilizator
<input /> Defineș te un control de intrare
text Defineste un câmp de introducere pe o linie în care un utilizator poate introduce text.
parolă Defineste un câmp pentru parolă
tip="radio" Utilizatorul selectează DOAR O SINGURĂ opț iune
tip="checkbox" Utilizatorul selectează UNA sau MAI MULTE opț iuni
submit Define un buton de trimitere
Defineste un control de introducere a textului pe mai multe linii
<label> Defineș te o etichetă pentru un element de input
<fieldset> Defineș te o margine în jurul elementelor dintr-un formular
<legend> Defineste o legenda pentru un element fieldset
<select> Defineș te o listă de selecț ie (listă derulantă)
<optgroup> Defineste un grup de optiuni înrudite într-o listă de selecț ie
<opț iune> Defineste o opț iune într-o listă de selecț ie
<buton> Defineste un buton de apel
Fiș ier JavaScript
1. functionmyCalc(){
//Importă/Declară Variabile
2. varin_1 = parseFloat(document.new_calc.input_1.value);
3. varout_1;
a. dacă(validate(in_1) ==false){
alert('Trebuie să introduci un număr valid');
ieș ire;
}
//Calculuri
4. out_1=in_1+5;
//Exportaț i rezultate
5. document.getElementById('output_1').innerHTML=out_1;
}
functionvalidate(x){
adevărat
dacă(x-0!=parseFloat(x)){
y=false;
}
returny;
}
1.Declara ț i func ț ia JS care va importa, calcula ș i afi ș a rezultate
• Trebuie să înceapă cufuncț ie
•
Numele funcț iei trebuie să înceapă cu o literă ș i nu poate include spaț ii
•
Trebuie să includă ()
• Funcț iile care nu primesc nicio variabilă au doar ()
• Funcț iile care primesc variabile vor avea variabile separate prin virgulă
• Funcț iile întregi sunt conț inute între acolade "{" ș i "}"
Importă variabile din formularul HTML
• Declaraț i toate variabilele cuvar
• Numele variabilelor trebuie să înceapă cu o literă ș i nu pot conț ine spaț ii
• Foloseș te un singur = pentru a atribui o valoare unei variabile ș i == pentru a compara două valori într-o expresie Boolean.
condiț ie
• Capacitatea de a declara ș i importa o variabilă într-o singură linie
• parseFloatva converti textul din caseta de text într-un număr real
număr. Dacă utilizatorul introduce o literă, Va fi returnat NaN (nu este un număr).
• documentreferinț ele documentului de apel ș i fiș ierul JS vor căuta apoi toate
dependinț ele din acel document (fiș ierul HTML în cazul nostru)
• .nou_calcse referă lanumeal formei din documentul HTML
• .input_1se referă laintrarede forma
• .valoarepreia valoarea din câmpul de introducere al formularului
• ; este necesar după fiecare linie de cod JS care nu începe cu o funcț ie sau o instrucț iune
bucla or (if, ifelse, for, while, etc.)
3.Declare variabilele viitoare pentru un cod clar ș i o redare mai rapidă.
4. Modifică variabilele de intrare pe baza func ț iilor matematice simple
• Permite următoarele funcț ii aritmetice: +, -, *, ÷, (, )
• Pentru funcț ii matematice mai avansate, trebuie să folosiț i metodele deMatematicăobiect (listat
mai jos).
5. Converte ș te HTML-ul unei diviziuni specificate <div></div>eticheta
• documentreferin ț ele documentului de apel ș i fi ș ierul JS vor căuta apoi toate
dependenț ele din acel document (fisierul HTML în cazul nostru)
• getElementById('output_1')caută documentul HTML pentru a localiza elementul
(capitalizarea este critic importantă)
• .innerHTMLva înlocui HTML-ul din elementul specificat
a. O instruc ț iune if care validează inputul dintr-un câmp de text pentru a se asigura că este un număr ș i că câmpul nu este
gol. Apelează func ț ia JS personalizată prezentată în b.
• Condiț ia booleană trebuie să fie inclusă între paranteze
• validare(in_1)apelează func ț ia de validare definită de utilizator ș i îi transmite în
variabilăîn_1
• ==este operatorul Boolean care compară cele două părț i ale ecuaț iei pentru egalitate
== Egal != Nu este egal
< Mai puț in decât > Mai mare decât
<= Mai puț in sau egal cu >= Mai Mare Decât Sau Egal Cu
• alert('');va afisa o casetă de alertă care necesită ca utilizatorul să facă clic pe OK înainte de a continua
• iesire;va opri executarea ș i va ieș i din funcț ia curentă
MetodeleMatematicaObiect
Obiectul Math permite realizarea unor calcule mai complicate decât simpla aritmetică.
Math.abs(a) Valoarea absolută a lui a
Math.acos(a) Cosinusul arc al unui a
Math.asin(a) Arc sinus de a
Math.atan(a) Arctangentă a
Math.atan2(a,b) Arc tangenta al a/b
Math.ceil(a) Intregul cel mai aproape de a ș i nu mai mic decât a
Math.cos(a) Cosinusul lui a
Math.exp(a) Exponentul lui a
Math.floor(a) Numărul întreg cel mai apropiat ș i care nu depăș eș te a
Math.log(a) Logaritm de baza e
Math.max(a,b) Maximul lui a ș i b
Math.min(a,b) Minimul dintre a ș i b
Math.pow(a,b) A la puterea b
Math.random() Număr pseudorandom în intervalul 0 la 1
Math.round(a) Numărul întreg cel mai apropiat de a
Math.sin(a) Sinele unui
Math.sqrt(a) Rădăcina pătrată a lui a
Math.tan(a) Tangenta unui a
Referinț e
http://www.w3schools.com/
http://stackoverflow.com/
