Let's Learn Javascript

First let's get you squared away with a browser.

It is very likely you either have Google Chrome or Mozilla Firefox as an installed browser. The browser you use is your preference. It's all about comfort and what you like. Don't feel constrained by those two options. There are plenty of different broswers to choose from.


For Google Chrome: Download



For Mozilla Firefox: Download:

JavaScript in a Web Page and Essential Syntax

Applying JavaScript to a web document is very easy


The preferred way to add JavaScript to an HTML page




//
This tells the interpreter to not run this code on the line it resides
this is for a one line comment.

/*
This indicates the beginning of a multiline comment. IF your comment doesn't fit on one line or you are a return key fan-- use this.

*/
This tells the interpreter that it can began reading JavaScript after.

Curly braces ({ and }) are used to indicate a block of code. They ensure that all the lines inside the braces are treated as one block. You will see more of these when I discuss structures such as if or for, as well as functions.
;
A semicolon or a newline defines the end of a statement, and a statement is a single command. Semicolons are in fact optional but you should use them after every statement.

-------
//you should always add comments to your code.
//notice how I used the two ' // ' (forward slashes) that tells the browser 
//that this is a comment. You can see it in your HTML but not on your webpage.
-------

Javascript Arithmetic Operators

OperatorDescriptionExample
+Addition10+20 = 30
-Subtraction20-10 = 10
*Multiplication10*20 = 200
/Division 20/10 = 2
%Modulus (Remainder)20%10 = 0
++Incrementvar a=10; a++; Now a = 11
--Decrementvar a=10; a--; Now a = 9

JavaScript Logical Operators

OperatorDescriptionExample
&&Logical AND(10==20 && 20==33) = false
||Logical OR(10==20 || 20==33) = false
!Logical Not!(10==20) = true

JavaScript Special Operators

OperatorDescription
(?:)Conditional Operator returns value based on the condition. It is like if-else.
,Comma Operator allows multiple expressions to be evaluated as single statement.
deleteDelete Operator deletes a property from the object.
inIn Operator checks if object has the given property
instanceofchecks if the object is an instance of given type
newcreates an instance (object)
typeofchecks the type of object.
voidit discards the expression's return value.
yieldchecks what is returned in a generator by the generator's iterator.

Variables

If you want to hold onto a piece of information to be used later, this is called a variable .
Remember taking Algebra and saying "I'll never use this" there are always examples where a word or letter represents a value: 5 + x = 10

A variable is used as: [ 'this' means 'that'. ]

for example:

'c' = 'a' + 'b';

or

'x' = 'y';

In Javascript we use what we call operators. They are symbols that tell the JavaScript what to do with the variables, methods, functions etc..

Functions

We will define a Simple function

Functions hold arguments, statements and methods. They are little directions that tell the JavaScript what to do.

Look at JavaScript as if it were building blocks.

for example:



FunctionsCan(hold, arguments){

var a = "That control ";

var dom ="the way your Document Object Model works

console.log( dom + " " + a) };


A Simple function looks like this.

The Script Tag

JavaScript is and interpreted language. The instructions are passed thorugh the browser in plain text
The text is interpreted sequentially. JavaScript opens up the possibilities of the cool stuff your webpage
has the potential to do.

To tell the browser "Hey, I'm JavaScript! Here is what to do!
it needs to be in inside of the <script> HTML Element.
Here is and example:

                                    
//this is the script tag to place your JavaScript in.
<script>type="text/javascript">
...some JS statements...
</script>

Lets tekk the console to do something?

By using a variable and making a statment we can say hello to the world !


                              
var a = "hello world"; // this was a test variable
console.log(a);

Let's try to have the conbsole say our your name!

we will be using multiple variables now.


                                
var a = "hello world";
console.log(a);
                                  
a = "Welcome Back";
                                  
console.log(a);
                                  
var myName = "Laurence";
                                  
console.log(myName);
                                  
myName = "John";
                                  
console.log(myName);
                                

                            

Boolean Function


                               
                                  
let message;
console.log(message);
message = null;
if(true){
    let message = "updated message";
    console.log(message);
}
console.log(message);
 /* save my name to a variable using the = operator */
 var myName = "tim";
 
 /* adding a variable to a string */
  alert(myName + ", this is me");
 
 /* adding numbers together */
 alert(100 + 50); // should alert 150
 
 /* concatenating strings together */
 alert("100" + "50" + ", adding strings together"); // should alert 10050