webattack.pl - JavaScript

JavaScript - operatory

operatory

operatory arytmetyczne
operatory bitowe
operatory przypisania
operatory porównania
operatory logiczne
operatory jednoargumentowe
kolejność wykonywania operatorów

operatory arytmetyczne

przykłady dla y = 2

Operator	Nazwa działania	Równanie	Wynik
+	Dodawanie	x = y + 2	y = 2	x = 4
-	Odejmowanie	x = y - 2	y = 2	x = 0
*	Mnożenie	x = y * 2	y = 2	x = 4
/	Dzielenie	x = y / 2	y = 2	x = 1
%	Modulo czyli reszta z dzielenia	x = y % 2	y = 2	x = 0
**	Potęgowanie	x = y ** y	y = 2	x = 4
++	Inkrementacja (zwiększenie wartości o 1)	x = ++y	y = 3	x = 3
++	Inkrementacja (zwiększenie wartości o 1)	x = y++	y = 3	x = 2
	i++ i = i+1 i+= 1 i = i+2 i+=2 i = i+3 i+=3
--	Dekrementacja (zmniejszenie wartości o 1)	x = --y	y = 1	x = 1
--	Dekrementacja (zmniejszenie wartości o 1)	x = y--	y = 1	x = 2
	i-- i = i-1 i-=1 i = i-2 i-=2 i = i-3 i-=3

Operatory +, -, , /, % są dwuargumentowe.

Operatory ++ i -- są jednoargumentowe.

forma przedrostkowa ++x (zwiększa wartość zmiennej x przed jej wykorzystaniem)
forma przyrostkowa x++ (zwiększa wartość zmiennej x po jej wykorzystaniu)


<script type="text/javascript">

var a = 4;

var b = 2;

document.write("a = " + a + "<br />");

document.write("b = " + b + "<br />");

document.write("a + b = " +(a + b) + "<br />");

document.write("a – b = " +(a - b) + "<br />");

document.write("a * b = " +(a * b) + "<br />");

document.write("a / b = " +(a / b) + "<br />");

document.write("a % b = " +(a % b) + "<br />");

document.write("b % a = " +(b % a) + "<br />");

document.write("a ** b = " +(a ** b) + "<br />");

</script>

wynik skryptu


<script type="text/javascript">

var c = 4;

var d = 2;

var e = c++;

var f = d--;

document.write("c = " + c + "<br />");

document.write("d = " + d + "<br />");

document.write("e = " + e + "<br />");

document.write("f = " + f + "<br />");

</script>

wynik skryptu


<script type="text/javascript">

var k = 4;

var l = 2;

var m = ++k;

var n = --l;

document.write("k = " + k + "<br />");

document.write("l = " + l + "<br />");

document.write("m = " + m + "<br />");

document.write("n = " + n + "<br />");

</script>

wynik skryptu

operatory bitowe

&	a & b	iloczyn bitowy AND (Tylko 1 oraz 1 daje wynik 1, reszta 0)
\|	a \| b	suma bitowa OR (1 gdziekolwiek daje wynik 1, 0 oraz 0 dają wynik 0)
^	a ^ b	różnica bitowaXOR (Zwraca 1 na pozycji, na której tylko jeden z argumentów jest jedynką, 1 i 1 oraz 0 i 0 dają 0)
~	~ a	negacja bitowa NOT [Odwraca(neguje) bity podanego argumentu]
<<	a << b	Przesunięcie bitowe w lewo (przesuwa bity w a o b bitów w lewo wstawiając zera z prawej strony)
>>	a >> b	Przesunięcie bitowe w prawo (przesuwa bity w a o b bitów w prawo usuwając nadmiarowe bity z prawej strony)
>>>	a >>> b	przesunięcie bitowe w prawo z wypełnieniem zerami. Zero-fill right shift (Przesuwa bity w a o b bitów w prawo usuwając nadmiarowe bity z prawej strony i dodając zera z lewej)

x	1	1	1	1
y	1	0	1	0
&	1	0	1	0

x	1	1	1	1
y	1	0	1	0
\|	1	1	1	1

x	1	1	1	1
y	1	0	1	0
^	0	1	0	1

x	0	0	0	0	1	1	1	1
~	0	0	0	0	0	0	0	0

y	0	0	0	0	1	0	1	0
~	0	0	0	0	0	1	0	1

x	0	0	0	0	1	1	1	1
<<2	0	0	1	1	1	1	0	0

x	0	0	0	0	1	1	1	1
>>2	0	0	0	0	0	0	1	1

operatory przypisania

przykłady dla x = 6 i y = 3:

Operator	Przykład	Równoznaczne z	Wynik
=	x = y	x = y	x = 3
+=	x += y	x = x + y	x = 9
-=	x -= y	x = x - y	x = 3
*=	x *= y	x = x * y	x = 18
/=	x /= y	x = x / y	x = 2
%=	x %= y	x = x % y	x = 0
&=	x &= y	x = x & y
\|=	x \|= y	x = x \| y
^=	x ^= y	x = x ^ y
<<=	x <<= y	x = x << y
>>=	x >>= y	x = x >> y
>>>=	x >>>= y	x = x >>> y

operatory porównania

Operator	Opis	Równanie	Zwróci
==	równe	6 == 6	true
		6 == '6'	true
		6 == 4	false
		6 == '4'	false
!=	różne	6 != 4	true
		6 != '4'	true
		6 != 6	false
		6 != '6'	false
===	identyczny z (równa wartość i taki sam typ danych)	6 === 6	true
		6 === '6'	false
		6 === 4	false
		6 === '4'	false
!==	nieidentyczny z (różne wartości lub różny typ danych)	6 !== 4	true
		6 != '4'	true
		6 != 6	false
		6 != '6'	true
>	większe od	6 > 10	false
<	mniejsze od	6 < 10	true
>=	większe bądź równe od	6 >= 10	false
<=	mniejsze bądź równe od	6 <= 10	true


<script type="text/javascript">

document.write("6 == 6 " + (6 == 6) + "<br />");

document.write("6 == '6' " + (6 == '6') + "<br />");

document.write("6 == 4 " + (6 == 4) + "<br />");

document.write("6 == '4' " + (6 == '4') + "<br /><br />");



document.write("6 != 4 " + (6 != 4) + "<br />");

document.write("6 != '4' " + (6 != '4') + "<br />");

document.write("6 != 6 " + (6 != 6) + "<br />");

document.write("6 != '6' " + (6 != '6') + "<br /><br />");



document.write("6 === 6 " + (6 === 6) + "<br />");

document.write("6 === '6' " + (6 === '6') + "<br />");

document.write("6 === 4 " + (6 === 4) + "<br />");

document.write("6 === '4' " + (6 === '4') + "<br /><br />");



document.write("6 !== 4 " + (6 !== 4) + "<br />");

document.write("6 !== '4' " + (6 !== '4') + "<br />");

document.write("6 !== 6 " + (6 !== 6) + "<br />");

document.write("6 !== '6' " + (6 !== '6') + "<br /><br />");



document.write("6 > 10 " + (6 > 10) + "<br />");

document.write("6 < 10 " + (6 < 10) + "<br />");

document.write("6 >= 10 " + (6 >= 10) + "<br />");

document.write("6 <= 10 " + (6 <= 10) + "<br />");

</script>

wynik skryptu

operatory logiczne

Operator	Opis	Przykład dla x=2 i y = 10	wynik
&&	iloczyn logiczny AND (i)	(x < 5 && y > 5)	prawda
\|\|	suma logiczna OR (lub)	(x < 5 \|\| y > 5)	prawda
^	XOR (jeden z, ale nie dwa równocześnie)	(x < 5 ^ y > 5)	fałsz
!	negacja logiczna NOT (negacja)	!(x === y) !(x !== y)	prawda (negujemy fałsz) fałsz (negujemy prawdę)

iloczyn logiczny


<script type="text/javascript">

document.write("true && true = " + (true && true) + "<br />");

document.write("true && false = " + (true && false) + "<br />");

document.write("false && true = " + (false && true) + "<br />");

document.write("false && false = " + (false && false) + "<br />");

</script>

wynik skryptu

suma logiczna


<script type="text/javascript">

document.write("true || true = " + (true || true) + "<br />");

document.write("true || false = " + (true || false) + "<br />");

document.write("false || true = " + (false || true) + "<br />");

document.write("false || false = " + (false || false) + "<br />");

</script>

wynik skryptu

XOR


<script type="text/javascript">

document.write("true ^ true = " + (true ^ true) + "<br />");

document.write("true ^ false = " + (true ^ false) + "<br />");

document.write("false ^ true = " + (false ^ true) + "<br />");

document.write("false ^ false = " + (false ^ false) + "<br />");

</script>

wynik skryptu

negacja logiczna


<script type="text/javascript">

document.write("!true = " + !true + "<br />");

document.write("!false = " + !false + "<br />");

</script>

wynik skryptu

operatory jednoargumentowe

Operator	Opis
+	stara się przekonwertować jakąś wartość na liczbę
-	stara tara się przekonwertować jakąś wartość na liczbę z odwrotną wartością
!	negacja logiczna NOT (odwraca wartość logiczną)
!!	podwójna negacja logiczna !!'hello' robi to samo co Boolean('hello') czyli sprawdza czy jej wartość logiczna jest true czy false


<script type="text/javascript">

document.write(2 + ' typ danych: ' + typeof 2 + '<br />');

document.write('2' + ' typ danych: ' + typeof '2' + '<br />');

document.write('-2' + ' typ danych: ' + typeof '-2' + '<br />');

document.write(['2'] + ' typ danych: ' + typeof ['2'] + '<br />');

document.write(['2', '4'] + ' typ danych: ' + typeof ['2', '4'] + '<br />');

document.write('cześć' + ' typ danych: ' + typeof 'cześć' + '<br />');

</script>

wynik skryptu


<script type="text/javascript">

document.write(+2 + ' typ danych: ' + typeof +2 + '<br />');

document.write(+'2' + ' typ danych: ' + typeof +'2' + '<br />');

document.write(+'-2' + ' typ danych: ' + typeof +'-2' + '<br />');

document.write(+['2'] + ' typ danych: ' + typeof +['2'] + '<br />');

document.write(+['2', '4'] + ' typ danych: ' + typeof +['2', '4'] + '<br />');

document.write(+'cześć' + ' typ danych: ' + typeof +'cześć' + '<br />');

</script>

wynik skryptu


<script type="text/javascript">

document.write(-2 + ' typ danych: ' + typeof -2 + '<br />');

document.write(-'2' + ' typ danych: ' + typeof -'2' + '<br />');

document.write(-'-2' + ' typ danych: ' + typeof -'-2' + '<br />');

document.write(-['2'] + ' typ danych: ' + typeof -['2'] + '<br />');

document.write(-['2', '4'] + ' typ danych: ' + typeof -['2', '4'] + '<br />');

document.write(-'cześć' + ' typ danych: ' + typeof -'cześć' + '<br />');

</script>

wynik skryptu


<script type="text/javascript">

document.write(true + ' typ danych: ' + typeof true + '<br />');

document.write(!true + ' typ danych: ' + typeof !true + '<br />');

document.write(!!true + ' typ danych: ' + typeof !!true + '<br />');

</script>

wynik skryptu


<script type="text/javascript">

document.write(false + ' typ danych: ' + typeof false + '<br />');

document.write(!false + ' typ danych: ' + typeof !false + '<br />');

document.write(!!false + ' typ danych: ' + typeof !!false + '<br />');

</script>

wynik skryptu


<script type="text/javascript">

document.write(0 + ' typ danych: ' + typeof 0 + '<br />');

document.write(!0 + ' typ danych: ' + typeof !0 + '<br />');

document.write(!!0 + ' typ danych: ' + typeof !!0 + '<br />');

</script>

wynik skryptu


<script type="text/javascript">

document.write(1 + ' typ danych: ' + typeof 1 + '<br />');

document.write(!1 + ' typ danych: ' + typeof !1 + '<br />');

document.write(!!1 + ' typ danych: ' + typeof !!1 + '<br />');

</script>

wynik skryptu


<script type="text/javascript">

document.write('cześć' + ' typ danych: ' + typeof 'cześć' + '<br />');

document.write(!'cześć' + ' typ danych: ' + typeof !'cześć' + '<br />');

document.write(!!'cześć' + ' typ danych: ' + typeof !!'cześć' + '<br />');

</script>

wynik skryptu


<script type="text/javascript">

document.write("!true = " + !true + "<br />");

document.write("!false = " + !false + "<br />");

document.write("!0 = " + !0 + "<br />");

document.write("!1 = " + !1 + "<br />");

document.write("!'0' = " + !'0' + "<br />");

document.write("!'1' = " + !'1' + "<br />");

document.write("!['2'] = " + !['2'] + "<br />");

document.write("!['2', '4'] = " + !['2', '4'] + "<br />");

document.write("!'cześć' = " + !'cześć' + "<br />");

document.write("!'' = " + !'' + "<br />");

document.write("!' ' = " + !' ' + "<br />");

</script>

wynik skryptu


<script type="text/javascript">

document.write("!!true = " + !!true + "<br />");

document.write("!!false = " + !!false + "<br />");

document.write("!!0 = " + !!0 + "<br />");

document.write("!!1 = " + !!1 + "<br />");

document.write("!!'0' = " + !!'0' + "<br />");

document.write("!!'1' = " + !!'1' + "<br />");

document.write("!!['2'] = " + !!['2'] + "<br />");

document.write("!!['2', '4'] = " + !!['2', '4'] + "<br />");

document.write("!!'cześć' = " + !!'cześć' + "<br />");

document.write("!!'' = " + !!'' + "<br />");

document.write("!!' ' = " + !!' ' + "<br />");

</script>

wynik skryptu


<input type="number" id="number1" />

<input type="number" id="number2" />

<button>dodaj liczby</button>


<p id="wynik">&nbsp;</p>


<script type="text/javascript">

document.querySelector('button').addEventListener('click', addNumbers);



function addNumbers() {

	    const number1 = +document.querySelector('#number1').value;

	    const number2 = +document.querySelector('#number2').value;

	    const result = number1 + number2;

	    document.getElementById('wynik').innerHTML = result;

}

</script>

wynik skryptu

ten zapis traktuje liczby jak stringi:
+document.querySelector('#number1').value;

string na liczbę możemy zamienić na kilka sposobów:
+document.querySelector('#number1').value;
Number(document.querySelector('#number1').value);
parseInt(document.querySelector('#number1').value);

kolejność wykonywania operatorów

Lp.	Nazwa operatora	Symbol operatora
1	indeks tablicy wywołanie funkcji	[] ()
2	inkrementacja dekrementacja ustalenie znaku negacja bitowa negacja logiczna utworzenie obiektu ustalenie typu zmiennej usunięcie składowej	++ -- + - ~ ! new typeof delete
3	mnożenie dzielenie modulo (reszta z dzielenia)	* / %
4	dodawanie odejmowanie	+ -
5	przesunięcie bitowe w lewo przesunięcie bitowe w prawo przesunięcie bitowe w prawo z wypełnieniem zerami	<< >> >>>
6	większe większe lub równe mniejsze lub równe mniejsze	> >= <= <
7	równe różne	== !=
8	iloczyn bitowy	&
9	bitowa różnica symetryczna	^
10	suma bitowa	\|
11	iloczyn logiczny	&&
12	suma logiczna	\|\|
13	warunkowy	? :
14	operatory przypisania	= += -= *= /= %= &= ^= \|= <<= >>= >>>=
15	rozdzielanie wyrażeń	,

wartości truthy i falsy

truthy

Wartości truthy traktowane są jak wartości true lub jak liczba 1.

var x = true;	wartość boolowska true
var x = 'true';	wartość true zapisana w postaci ciągu tekstowego
var x = 'false';	wartość false zapisana w postaci ciągu tekstowego
var x = 1;	liczba inna niż zero
var x = '1';	jeden zapisane w postaci ciągu tekstowego
var x = '0';	zero zapisane w postaci ciągu tekstowego
var x = 'samolot';	ciąg tekstowy
var x = 10 / 5;	obliczenia na liczbach
tablica
obiekt

falsy

Wartości falsy traktowane są jak wartości false lub jak liczba 0.

var y = false;	wartość boolowska false
var y = 0;	liczba zero
var y = '';	pusta wartość
var y = 10 / 'score';	wartość NaN
var y;	zmienna, której nie przypisano wartości

sprawdzanie równości i istnienia

false
0
''

wyrażenie	wynik
false == 0	true
false === 0	false
false == ''	true
false === ''	false
0 == ''	true
0 === ''	false

null jest uznawane za falsy i jest równe null
undefined jest uznawane za falsy i jest równe undefined

wyrażenie	wynik
undefined == null	true
undefined === null	false
undefined == false	false
undefined == 0	false
null == false	false
null == 0	false

NaN jest uznawana za falsy ale nie odpowiada żadnej innej, nie jest nawet odpowiednikiem samej siebie.
NaN to niezidentyfikowana liczba, dlatego nie można porównać ze sobą dwóch niezidentyfikowanych liczb.

wyrażenie	wynik
NaN == null	false
Nan == NaN	false (nie można porównać ze sobą dwóch niezidentyfikowanych wartości)

przerwanie obliczania wartości

Znalezienie wartości true powoduje przerwanie sprawdzania kolejnych opcji.
Dlatego doświadczeni programiści często:

kod, który najprawdopodobniej zwróci wartość true, umieszczają jako pierwszy w operacjach OR
kod, który najprawdopodobniej zwróci wartość false umieszczają jako pierwszy w operacjach AND
opcje wymagające największej mocy obliczeniowej umieszczają na końcu, na wypadek, gdyby wartością zwrotną było true i nie zachodziła by potrzeba przeprowadzania wymagających obliczeń.


<div id="answer77"></div>

var artistX = 'Pablo Picasso'

var artistY = (artistX || 'nieznany artysta');

document.write('artistX: ' + artistX + "<br />" + "artistY: " + artistY);

</script>

wynik skryptu
artistX: Pablo Picasso
artistY: Pablo Picasso


<div id="answer77"></div>

var artistX = '';

var artistY = (artistX || 'nieznany artysta');

document.write('artistX: ' + artistX + "<br />" + "artistY: " + artistY);

</script>

wynik skryptu
artistX:
artistY: nieznany artysta


<div id="answer77"></div>

var artistX = '';

var artistY = (artistX || {});

document.write('artistX: ' + artistX + "<br />" + "artistY: " + artistY);

</script>

wynik skryptu
artistX:
artistY: [object Object]


<div id="answer77"></div>

valueA = 0;

valueB = 1;

valueC = 2;

if (valueA || valueB || valueC) {

	    document.write('Jeżeli którakolwiek ze zmiennych ma wartość uznawaną za truthy to nastąpi wykonanie kodu znajdującego się w poleceniu if.');

}

</script>

wynik skryptu
Jeżeli którakolwiek ze zmiennych ma wartość uznawaną za truthy to nastąpi wykonanie kodu znajdującego się w poleceniu if.