Een rekenmachine maken met HTML
Er zijn veel manieren om wiskundige berekeningen uit te voeren op een desktopcomputer met behulp van de rekenmachine die is inbegrepen in het systeem, maar een andere manier is om zelf een rekenmachine te bouwen met een eenvoudige HTML-code. Door dit te doen, kunt u niet alleen wiskundige berekeningen in een browser uitvoeren, maar kunt u ook fundamentele dingen leren over de kunst van het coderen.
Inhoud
stappen
Deel 1
Begrijp de code
1
Leer wat elke HTML-functie doet. De code die u gebruikt om de rekenmachine te maken, bestaat uit vele stukjes syntaxis die samenwerken om verschillende elementen van een document te definiëren. Klik hier voor een meer gedetailleerde uitleg over hoe u bekend raakt met dit proces of blijf lezen om te leren wat elke regel van de tekst doet in de code die u gaat gebruiken om deze calculator te maken.
- html: Dit stuk syntaxis vertelt de rest van het document welk soort taal in de code wordt gebruikt. Wanneer u een code maakt, kunt u er een aantal talen voor gebruiken, en het vertelt de rest van het document dat het in de HTML-taal zal zijn.
- hoofd: dit vertelt het document dat alles onder die kop informatie over informatie is, beter bekend als metadata. Het commando wordt gebruikt om stijlelementen van een document te definiëren, zoals titels, koppen, enz. Beschouw die opdracht als een paraplu waaronder de rest van de code is gedefinieerd.
- titel: dit is waar je de titel van je document gaat zetten. Dit kenmerk wordt gebruikt om te definiëren wat de titel van het document zal zijn wanneer het in een HTML-browser wordt geopend.
- body bgcolor = "#": Dit kenmerk stelt de achtergrondkleur van de code en de kleur van het lichaam in. Het getal tussen de aanhalingstekens en dat verschijnt na de "#" komt overeen met a standaard kleur.
- tekst = "": Het woord in deze reeks aanhalingstekens bepaalt de kleur van de tekst in het document.
- vormnaam ="": dit attribuut specificeert de naam van een formulier, dat wordt gebruikt om de structuur te bouwen van wat daarna komt op basis van wat jаvascript kent als de betekenis van de genoemde "formuliernaam". Het te gebruiken "formuliernaam" -attribuut is bijvoorbeeld "calculator" (rekenmachine), waarmee een specifieke structuur voor het document wordt gecreëerd.
- invoertype ="": dat is waar de acties gebeuren. Het kenmerk "input type" vertelt het document welk soort tekst de waarden zijn in de rest van de haakjes. Ze kunnen bijvoorbeeld tekst zijn, een wachtwoord, een knop (zoals in het geval van de rekenmachine) enzovoort.
- waarde ="": Deze opdracht vertelt uw document wat het type invoer bevat dat hierboven is opgegeven. Voor een rekenmachine worden deze weergegeven als cijfers (van 1 tot 9) en bewerkingen (+, -, *, /, =).
- onclick ="": Deze syntaxis beschrijft een gebeurtenis die het document vertelt dat er iets gaat gebeuren wanneer u op die knop klikt. Voor een rekenmachine willen we dat de tekst die op elke knop wordt getoond, begrepen wordt zoals die is. Dus voor de knop "6" moet u document.calculator.ans.value + = `6` tussen de aanhalingstekens schrijven.
- br: Met deze tag wordt een regeleinde in het document gestart, dus alles dat zich na dat label bevindt, wordt weergegeven op de regel onder die regel.
- / vorm, / body en / html: deze opdrachten vertellen uw document dat de overeenkomstige opdrachten die eerder in het document zijn gestart, al zijn voltooid.
Deel 2
Stel de eenvoudige HTML-code in voor een rekenmachine
Kopieer de onderstaande code. Selecteer de tekst in het onderstaande vak door de cursor in de linkerbovenhoek van het vak te houden en naar de rechter benedenhoek van het tekstvak te slepen, zodat alle tekst blauw is. Druk vervolgens op de toetsen "CMD" + "C" (op Mac) of "CTRL" + "C" (op Windows) om de code naar het klembord te kopiëren.
HTML-calculator
Deel 3
Maak de calculator
1
Open een tekstbewerkingsprogramma op uw computer. Er zijn veel programma`s die u kunt gebruiken, maar om redenen van gemak en kwaliteit is het raadzaam om TextEdit of Notepad te gebruiken.
- Op een Mac, klik op het vergrootglas in de rechterbovenhoek van het scherm om "Spotlight Search" te openen. Als je daar bent, typ je Teksteditor en klik je op het programma Teksteditor, dat blauw gemarkeerd moet zijn.
- Open in Windows het menu Start in de linkerbenedenhoek van uw scherm. Typ Kladblok in de zoekbalk en klik op de toepassing Kladblok, die in de resultatenbalk aan de rechterkant verschijnt.
2
Plak de HTML-code van de calculator in het document.
3
Sla het bestand op Om dit te doen, klikt u op de knop Bestand linksboven in het venster en klikt u op "Opslaan als" (op Windows) of "Opslaan" (op Mac) in het vervolgkeuzemenu dat verschijnt.
4
Voeg de HTML-extensie toe aan de bestandsnaam. Typ in het menu `Opslaan als` de naam van uw bestand gevolgd door de extensie `.html` en klik vervolgens op `Opslaan`. Als u bijvoorbeeld de naam "MyFirstCalculator" wilt geven, moet u deze opslaan als "MyFirstCalculator.html".
Deel 4
Gebruik de calculator
1
Zoek het bestand dat u zojuist hebt gemaakt. Hiertoe typt u de naam van uw bestand in de Spotlight-zoekopdracht of in de zoekbalk van het menu Start op uw computer, zoals beschreven in de vorige stap. U hoeft de HTML-extensie niet te schrijven.
2
Klik op het bestand om het te openen. Uw standaardbrowser opent de calculator op een nieuwe pagina.
3
Klik op de knoppen op de rekenmachine om deze te gebruiken. De oplossingen voor uw vergelijkingen verschijnen in de oplossingsbalk.
tips
- U kunt deze calculator ook op een webpagina invoegen als u dat wilt.
- U kunt ook de HTML-stijl gebruiken om de weergave van de rekenmachine te wijzigen.
Delen op sociale netwerken:
Verwant
- Hoe een hyperlink met HTML toe te voegen
- Hoe het handelsmerksymbool in HTML toe te voegen
- Hoe een afbeelding in HTML te centreren
- Hoe maak je een link om `terug naar het begin` te maken
- Hoe maak je een vervolgkeuzelijst in HTML zonder Java
- Hoe te detecteren of jаvascript niet is ingeschakeld
- Hoe een link in HTML te verbergen
- Hoe een achtergrondafbeelding in HTML te herstellen
- Hoe een HTML-linkknop maken
- Hoe maak je een vervangende afbeelding in jаvascript
- Hoe een webpagina hacken met HTML
- Hoe digitale tijd in HTML kan worden weergegeven
- Hoe te programmeren met VBScript
- Hoe Notepad ++ te gebruiken
- Hoe het eenvoudige HTML-formaat te gebruiken
- Hoe metatags te gebruiken
- Tekst en afbeeldingen in HTML uitlijnen
- Hoe HTML-visualisatie te schakelen met jаvascript
- Hoe een tekst in HTML-taal te centreren
- Hoe te reageren in HTML
- Hoe een eenvoudig CCS-stijlblad te maken met behulp van het kladblok