Mastering Javascript operatorsJAVASCRIPT OPERATORSBITWISE OPERATORS AND WHAT THEY DOUSING TRACE TABLES TO PREDICT OUTPUT

Did you know?

It was developed as a language in just 10 days!

JavaScript was originally developed by Brendan Eich, while he was working for Netscape Communications Corporation

Although it was developed under the name Mocha, the language was officially called LiveScript when it first shipped in beta releases of Netscape Navigator 2.0 in September 1995, but it was renamed JavaScript

Eich also co-founded the Mozilla project, with a website at mozilla.org.

Game development and Javascript

The game is pure JavaScript & XHTML. There is a nice use of CSS sprites in this particular game implementation.

Game development and Javascript

A RPG engine written in Javascript that has items to be picked, monsters & more.

Game development and Javascript

…and of course there is MINECRAFT. You might be interested in the following link if you’re interested in programming in Minecrafthttps://github.com/walterhiggins/ScriptCraft/blob/master/docs/YoungPersonsGuideToProgrammingMinecraft.md

Predict the output

?Moose Y OUTPUT

3 2

2 2

That was easy enough – let’s try another one

Using trace tables

Trace tables help you to predict the output using a structured method

The first thing you need to do is list all the variables in the columns

Trace the code and fill in the values for the variables as you go along

a b c output

1 2 3

3

Making a note of key terms

Line 6 contains an operation, namely that c is being given the new value of a+b

In this case, a and b are the operands, in other words the values being operated on

The plus sign (+) is the operator

X * Y

X and Y are the?

And the * is the:

operands

operator

Predict the output

?Moose Y X

3 2 4

6 Output = 6

Again, quite straightforward. A harder one now.

Here we are using MOD. Predict output!Moose Goose Output

10 6

Moose = 10 MOD 6

10 MOD 6 basically checks to see if 6 goes into 10 and gives the remainder.

In this case Moose = 4 (the remainder is 4)

Output = 4

Try another MOD prediction:Moose Goose Output

32 8

Moose = 32 MOD 8

32 MOD 8 checks to see if 8 goes into 32 and gives the remainder.

In this case there is no remainder because 8 goes perfectly into 32

Output = 0

Use of the = assignment operatorMoose Goose Output

3 5

5 3

3 3

It would be useful for you to note that the = sign can also be used in a different way (as a checking for equivalence (comparison). In this case however, it is an assignment operator

What’s happening here?Try this yourself and you’ll notice something peculiar

3

The aim of the program is to produce an output of moose ONLY if moose = goose (they are not equal in this case)

You’ll notice the output for this program is 3 (which isn’t what you expect). What is the problem?

The wrong operator was used! In JavaScript the “ = = “ is the equal to operator

Notice the double equals sign!

Working with bitwise operators

You may need a pen to work this one out!

?Moose Y Output?

3 2

?

We need to know what the <<= operator does.

Predict the output

We know that in “Moose+y”, the + operator is adding the value of Moose to y

What does the <<= operator do to y?

The left shift operator <<=

Moose Y Output?

3 2

?1. The binary value of moose is being shifted to the left by y (shifting in zeroes from the right)

2. The operator is called the left shift bitwise operator

The left shift operator <<=

Moose Y Output?

3 2

Shifts moose in binary representation y (< y) bits to the left, shifting in zeroes from the right.

The left shift operator <<=

Moose Y Output?

3 2

First convert Moose (3) to Binary

The Binary for Decimal 3 = 011

Now, apply the left shift of y. y = 2 so add 2 zeroes on from the right, to move the number along to the left

The left shift operator <<=

The Binary for Decimal 3 = 011

Left shift 2 gives you: 01100

Find out what the new value is in Binary!

01100 = 12!

Change the inputs: Predict the output

The Binary for Moose =1 or 01 or 000001

Left shift moose binary value = 01 by y (y = 1)

01 add one zero to the right which will shift it to the left

That gives you 010.

010 in Binary is 2

The output is 2!

JavaScript's OperatorsLet’s start with the blatantly obvious operators.

See if you can guess what each one does.

Note that the + operator can also be used as a string operator (used to concatenate two strings together) p+ig = pig

?

?

?

?

?

?

?

JavaScript's Assignment Operators

?

?

?

?

?

?

?

Comparison and logical operators

?

?

?

?

?

?

?

?

JavaScript's Bitwise operators #1

Operator Usage Description

Bitwise AND a & b

Returns a one in each bit position for which the corresponding bits of both operands are ones.

Bitwise OR a | b

Returns a one in each bit position for which the corresponding bits of either or both operands are ones.

Bitwise And

Bitwise OR

JavaScript's Bitwise operators #2

Bitwise XOR a ^ b

Returns a one in each bit position for which the corresponding bits of either but not both operands are ones.

Bitwise NOT ~ a Inverts the bits of its operand.

Left shift a << b

Shifts a in binary representation b (< 32) bits to the left, shifting in zeroes from the right.

Bitwise XOR

Bitwise NOT

Left Shift

JavaScript's Bitwise operators #3

Sign-propagating right shift

a >> b

Shifts a in binary representation b (< 32) bits to the right, discarding bits shifted off.

Zero-fill right shift a >>> b

Shifts a in binary representation b (< 32) bits to the right, discarding bits shifted off, and shifting in zeroes from the left.

Sign propagating right shift

Zero fill right shift

Try it yourself: Task

Use the operators given to create your own programs. Screenshot your results with a trace table and explanation of the operator’s function.

Here we have used Dreamweaver and the SPLIT, LIVE view