JavaScript Tehtemärgid e. Operaatorid

JavaScrip keeles kasutatake mitmesuguseid märke aritmeetika tehete kirjutamiseks.

Harjumatule pilgule tundub JavaScript olevat üks suur sigri-migri. Selleks, et skripti kergem lugeda oleks, saame taas appi võtta JavaScript'i. Sellest tuleb lehekülje lõpus juttu.

Ülesande tehte-märk = kasutatakse Javascript muutuja määramiseks.
(muutuja - koht kuhu paigutatakse informatsioon. Näiteks: x=6; v. lenght=77.10;.)

Aritmeetika tehte-märk + kasutatakse väärtuste kokku liitmiseks.

  y=5;
  z=2;
  x=y+z;

Ülal olevas näites väärtus x, muutub pärast script'i rakendumist numer seitsmeks (7).

JavaScript Aritmeetilised Tehted

Aritmneetilisi tehteid kasutatakse kuvamaks aritmeetilisi tulemusi muutujatega või/ja väärtustega.

Anname muutuja ja sellele värtuse y=5:

Tehte-märk	Kirjeldus	Näide	Tulemus
+	Liitmine	x=y+2	x=7
-	Lahutamine	x=y-2	x=3
*	Korrutamine	x=y*2	x=3
/	Jagamine	x=y/2	x=2.5
%	Jagamise jääk	x=y%2	x=1
++	Suurendamine	x=++y	x=6
--	Vähendamine	x=--y	x=4

JavaScript Ülesande Tehte-märgid

Anname muutujad ja nende värtused x=10 ja y=5
Allpool olevas tabelis on need üseande tehte-märgid lahti seletatult:

Tehte-märk	Näide	Sama	Tulemus
=	x=y		x=5
+=	x+=y	x=x+y	x=15
-=	x-=y	x=x-y	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x=x/y	x=2
%=	x%=y	x=x%y	x=0

Tehte-märgi + Kasutamine Grupeerimisel (String)

String s.o. grupp erinevaid karaktereid. Näiteks: 'JavaScript', 'Hello world!', 'http://www.pyramdesign.angelfire.com' või siis lihtsalt '15'.

Tehte-märki + saab kasutada ka muutujate ja teksti väärtuse ühendamiseks gruppi e. "stringi".

Kahe v. enama stringi muutujate kokku ühendamiseks kasutatakse + tehte-märgist.

txt1="Kass kes";
txt2="kõndis katusel";
  txt3=txt1+txt2;

Pärast ülalpool toodud näites lause käivitamist, on muutuja txt3 sisuks "Kass keskõndis katusel".

Selleks, et lisada vahe kahe stringi vahele, tuleb ühte stringi lisada tühik:

txt1="Kass kes  ";
txt2="kõndis katusel";
  txt3=txt1+txt2;

Või siis lisada tühik muutujasse:

txt1="Kass kes";
txt2="kõndis katusel";
  txt3=txt1+"  "txt2;

Pärast ülalpool toodud näites lause käivitamist, on muutuja txt3 sisuks

"Kass kes kõndis katusel".

Stringide ja Numbrite Lisamine

Selline näide:

x=5+5;
 document.write(x);
x="5"+"5";
 document.write(x);
x=5+"5";
 document.write(x);
x="5"+5;
 document.write(x);

Proovi ise.

Pane tähele. Kui lisada number ja string, siis tulemuseks on string.

JavaScript'i kergem loetavus

Tõepoolest, JavaScript'i kood on harjumatule silmale raskesti loetav. Tegelikult on kõik vägaga täpne ja loogiline. Midagi üleliigset pole. Siiski on olemas vahend mis liigendab JavaScript'i koodi osad selliselt, et silmal on kergem eristada skripti erinevaid osi.
Kleebi allpool olevasse lahtrisse mingi suvaline kood ja vajuta "Vaata" nuppu. Ilmub eraldi aken kus kood on muudetud erinevate värvide ja paigutuste abil nö. lugejasõbralikumaks.
Nüüd saab hakata koodi lähemalt uurima ja analüüsima.

Sellise abivahendi loomiseks võta alljärgnev kood ja säilita nimega format.js.

var kw = ['abstract', 'as', 'boolean', 'break', 'byte', 'case', 'catch', 'char', 'class', 'const', 'continue', 'default', 'delete', 'do', 'double', 'else', 'enum', 'export', 'extends', 'false', 'final', 'finally', 'float', 'for', 'function', 'goto', 'if', 'implements', 'import', 'in', 'instanceof', 'int', 'interface', 'long', 'namespace', 'native', 'new', 'null', 'package', 'private', 'protected', 'public', 'return', 'short', 'static', 'super', 'switch', 'synchronized', 'this', 'throw', 'throws', 'transient', 'true', 'try', 'typeof', 'use', 'var', 'void', 'volatile', 'while', 'with']; var ob = ['Anchor', 'anchors', 'Applet', 'applets', 'Area', 'Array', 'Body', 'Button', 'Checkbox', 'Date', 'document', 'FileUpload', 'Form', 'forms', 'Frame', 'frames', 'Hidden', 'History', 'history', 'Image', 'images', 'Layer', 'layers', 'Link', 'links', 'location', 'Math', 'MimeType', 'mimeTypes', 'navigator', 'Number', 'Option', 'options', 'Password', 'Plugin', 'plugins', 'Radio', 'RegExp', 'Reset', 'screen', 'Script', 'Select', 'String', 'Style', 'StyleSheet', 'Submit', 'Text', 'Textarea', 'window']; var sym = '-+*<=>?:&|/!%'; function JSfmt(s) { this.i = this.r = this.lvl = this.pr = 0; this.row = ['']; this.lW = this.nC = this.pC = ''; this.decode = function() { s = s.replace(/(\r\n|\r|\n)/g, '\n'); while (this.i < s.length) { var c = s.charAt(this.i); if (s.length - 1 == this.i) this.nC = ''; else this.nC = s.charAt(this.i + 1); if (/\w/.test(c)) {if (this.lW) this.lW += c; else this.lW = c; this.row[this.r] += c; } else switch (c) { case '\n': break; case ' ': case '\t': this.hl(); this.row[this.r] += ' '; break; case '.': this.hl(); this.row[this.r] += '.'; break; case '{': this.hl(); var currentLine = this.row[this.r]; if (currentLine.length) {var lastChar = currentLine[currentLine.length - 1]; if (lastChar != ' ' && lastChar != '\t') this.row[this.r] += ' {'; else this.row[this.r] += '{';} else this.row[this.r] += '{'; this.lvl++; this.wl(); break; case '}': this.hl(); this.lvl--; this.row[this.r] += '}'; if (';' != this.nC) this.wl(); break; case ';': this.hl(); this.row[this.r] += '; '; if (this.pr == 0) this.wl(); break; case '(': this.pr++; this.hl(); this.row[this.r] += '('; break; case ')': this.pr--; this.hl(); this.row[this.r] += ')'; break; case '"': case "'": this.hl(); var escaped = false; this.row[this.r] += '<span class="literal">' + c; while (this.i < s.length - 1) {this.i++; var ch = s.charAt(this.i); if (ch == '\\') escaped = !escaped; if (ch == '&') ch = '&'; if (ch == '<') ch = '<'; if (ch == '>') ch = '>'; this.row[this.r] += ch; if (c == ch && !escaped) {this.row[this.r] += '<\/span>';break;} if (ch != '\\') escaped = false;} break; case '/': if ('/' == this.nC) {this.row[this.r] += '<span class="comment">//'; this.i++; while (this.i < s.length - 1) {this.i++; var c = s.charAt(this.i); if (c == '&') c = '&'; if (c == '<') c = '<'; if (c == '>') c = '>'; if (c == '\n') { this.row[this.r] += '<\/span>'; this.wl();break;} this.row[this.r] += c;}} else if (this.nC == '*') {this.row[this.r] += '<span class="comment">/*'; this.i++; var c = ''; var prevC = ''; while (this.i < s.length - 1) {this.i++; prevC = c; c = s.charAt(this.i); if (c ==' ' || c == '\t' || c == '\n') {if (c == ' ') {if (this.row[this.r]) this.row[this.r] += ' ';} else if (c == '\t') {if (this.row[this.r]) this.row[this.r] += '   ';} else if (c == '\n') this.wl();} else this.row[this.r] += c; if (c == '/' && prevC == '*') {this.row[this.r] += '<\/span>'; break;}} this.wl();} else if (this.lW) {this.hl(); if (this.nC == '=') this.row[this.r] += ' /'; else this.row[this.r] += ' / ';} else if (this.pC == '*') this.row[this.r] += '/ '; else if (this.pC == ')') this.row[this.r] += ' / ';else {if (this.pC == '=') this.row[this.r] += ' /'; else this.row[this.r] += '/'; while (this.i < s.length - 1) {this.i++; var c = s.charAt(this.i); if (c == '(') this.pr++; if (c == ')') this.pr--; if (c == '\\') escaped = !escaped; this.row[this.r] += c; if (c == ';' && this.pr == 0) {this.wl(); break;} if (c =='/' && this.pr == 0) if (!escaped) break; if (c != '\\') escaped = false;}} break; case ',': this.hl(); this.row[this.r] += ', '; break; case '-': case '+': case '*': case '%': case '<': case '=': case '>': case '?': case ':': case '&': case '|': case '!': this.hl(); if (c == '!' && this.nC != '=') {this.row[this.r] += c; break;} if (c == ':' && this.pC == "'") {this.row[this.r] += c; break;} if (c == '+' || c == '-') if (c == this.nC || c == this.pC) {this.row[this.r] += c; break;} if (sym.indexOf(this.pC) != -1) {if (sym.indexOf(this.nC) != -1) this.row[this.r] += c; else this.row[this.r] += c + ' ';} else {if (sym.indexOf(this.nC) != -1) this.row[this.r] += ' ' + c; else this.row[this.r] += ' ' + c + ' ';} break; default: this.hl(); this.row[this.r] += c; break;} if (!/\w/.test(c)) if (c != ' ' && c != '\t') {this.hl(); this.lW = '';} this.pC = c; this.i++;} return this.row.join('<br />');} this.hl = function() { if (this.lW && kw.indexOf(this.lW) != -1) {this.row[this.r] = this.row[this.r].substr(0,this.row[this.r].lastIndexOf(this.lW)) + '<span class="keyword">' + this.lW + '<\/span>'; this.lW = '';} else if (this.lW && ob.indexOf(this.lW) != -1) {this.row[this.r] = this.row[this.r].substr(0,this.row[this.r].lastIndexOf(this.lW)) + '<span class="object">' + this.lW + '<\/span>'; this.lW = '';}} this.wl = function() {this.row.push(''); this.r++; var i = 0; while (i < this.lvl) {this.row[this.r] += '   '; i++;}} } if (typeof Array.prototype.indexOf == 'undefined') {Array.prototype.indexOf = function(item) {for (var i = 0; i < this.length; i++) {if ((typeof this[i] == typeof item) && (this[i] == item)) {return i;}}return -1;}} function decode() {var jsformat = new JSfmt(document.getElementById('in').value); res(jsformat.decode());} function res(t) {var mh = screen.height-150; var mw = screen.width-20; TheResWin = window.open('','format','height=' + mh + ',width=' + mw + ',toolbar=no,directories=no,status=no,' + 'menubar=no,scrollbars=yes,resizable=yes'); TheResWin.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"\n"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http:\/\/www.w3.org\/1999\/xhtml">\n<head><title>Resultaat<\/title><style type="text/css">#out {font: normal 10pt Courier,"Courier New",monospace; background: #f5f5f5;}\n.keyword {color:#0000ff;}\n.object {color:#ff00ff;}\n.literal {color:#cc9966;}\n.comment {color:#999999;}\n</style><\/head>\n<body ><p align="right"><a href="#" onclick="self.close();return false;">Sulge aken<\/a><\/p><div id="out">'+t+'</div><p align="right"><a href="#" onclick="self.close();return false;">Sulge aken<\/a><\/p><\/body><\/html>'); TheResWin.document.close(); TheResWin.moveTo(0,0); TheResWin.focus();}

Järgmiseks kirjuta Html vorming oma dokumenti, just sinna kuhu sa soovid, et see ilmuks. Vorming ise on selline:

   <form align="center">
<textarea cols="60" rows="10" id="in">
   </textarea><br>
<input type="button" 
value="Vaata" onclick="decode()">
<input type="reset" value="Puhasta">
          </form>

Nüüd kirjuta oma dokumendi "head" sektsiooni alljärgnev kood ning ongi valmis.

<script type="text/javascript" src="format.js">
               </script>

| Koju  | Veebidisain |  Html+Xhtml |  Css |  Javascript |  HTML DOM |  DHTML |  XML |  Sisukord | Mail |
| Windows 7 |