JavaScript Basics: Variables, Data Types, Operators, Arrays, Objects, and Functions
Posted on Dec 1, 2023 in Computers
// BASICS// On page script JavaScript code to be executed here
// Include external JS file
// COMMENTS
/* Multi line
comment */
// One line comment
// VARIABLES
vara; // variable
varb=“init”; // string (text)
varc=“Hi”+“”+“Joe”; // = “Hi Joe”
vard=1+2+“3”; // = “33”
vare=[2,3,5,8]; // array
varf=false; // boolean
vara=1,b=2,c=a+b; // one line
// Output
console.log(a); // write to the browser console
document.write(a); // write to the HTML
alert(a); // output in an alert box
confirm(“Really?”); // yes/no dialog, returns true/false depending on user click
prompt(“Your age?”,”0″); // input dialog. Second argument is the initial value
// DATA TYPES
varage=18; // number
varname=“Jane”; // string
varname={first:”Jane”, last:”Doe”}; // object
vartruth=false; // boolean
varsheets=[“HTML”,”CSS”,”JS”]; // array
vara; typeof a; // undefined
vara=null; // value null
// Arithmetic OPERATORS
a * (b + c) // grouping
a != b // not equal
typeof a // type (number, object, function…)
x << 2 x >> 3 // minary shifting
a = b // assignment
a == b // equals
a != b // unequal
a === b // strict equal
a !== b // strict unequal
a < b a > b // less and greater than
a <= b a >= b // less or equal, greater or eq
a += b // a = a + b (works with – * %…)
a && b // logical and
a || b // logical or
a = b + c – d; // addition, substraction
a = b * (c / d); // multiplication, division
x = 100 % 48; // modulo. 100 / 48 remainder = 4
a++; b—; // postfix increment and decrement
///////////////////////////// Arrays /////////////////////////////
vardogs=[“Bulldog”,”Beagle”,”Labrador”];
vardogs=newArray(“Bulldog”,”Beagle”,”Labrador”); // declaration
alert(dogs[1]); // access value at index, first item being [0]
dogs[0] = “Bull Terier”; // change the first item
for (vari=0; i < dogs.length; i++) {// parsing with array.length
console.log(dogs[i]);
}
// Arrays methods
dogs.shift(); // remove first element
dogs.unshift(“Chihuahua”); // add new element to the beginning
dogs.push(‘lol’) // and new element to the end
dogs.splice(2, 0, “Pug”, “Boxer”); // add elements (where, how many to remove, element list)
varanimals=dogs.concat(cats,birds); // join two arrays (dogs followed by cats and birds)
dogs.slice(1,4); // elements from [1] to [4-1]
//////////////////////////////////////////////////////////////////////////////////////
///////////////////////////// OBJECTS ///////////////////////////////////////////////
varstudent={// object name
firstName:”Jane”,// list of properties and values
lastName:”Doe”,
age:18,
height:170,
fullName:function(){// object function
returnthis.firstName+“”+this.lastName;
}
};
student.age = 19; // setting value
student[age]++; // incrementing
name = student.fullName(); // call object function
/////////////////////////////////////////////////////////////////////////////////////
///////////////////////////// Conditional Statements ///////////////////////////////
// IF – ELSE
if ((age >= 14) && (age < 19)) {// logical condition
status=“Eligible.”;// executed if condition is true
} else if ((age >= 20) && (age < 25)) {// else if for a second logical condition
status=“Eligible if previous one is not”;// executed if previous is false & this condition is true
} else {// else block is optional
status=“Not eligible.”;// executed if condition is false
// Switch Statement
varnumber=6;
switch (number) { // input is current day
case 6: // if (day == 6)
text = “Saturday”;
break;
case 0: // if (day == 0)
text = “Sunday”;
break;
default: // else…
text = “Whatever”;
}
///////////////////////////////////////////////////////////////////////////////////
///////////////////////////// LOOPS //////////////////////////////////////////////// For Loop
for (vari=1; i < 11; i++) {// loops from 1 – 10
console.log(i);// prints value on the screen with every loop
}
// While Loop
vari=1; // initialize
while (i < 11) {// enters the cycle if statement is true
console.log(i)// prints value on the screen with every loop
i++;// increment to avoid infinite loop
///////////////////////////////////////////////////////////////////////////////////
// FUNCTIONS
functionaddNumbers(a,b){
returna+b;;
}//call function and give his return value to the variable x
x = addNumbers(1, 2);
// Edit DOM element
document.getElementById(“elementID”).innerHTML = “Hello World!”;
