Javascript: Difference between revisions

From Objectif Client Inc
Jump to navigation Jump to search
Line 25: Line 25:


   <script>
   <script>
       alert('your javascript here!');
       alert('your javascript directely here! or in a separate file');
   </script>
   </script>


   <script src="js/app.js"></script>   
   <script src="js/app.js" charset="utf-8"></script>   
</body>
</body>
</html>
</html>

Revision as of 18:55, 29 October 2017

Basic

alert/prompt/confirm

alert('Windows Popup text');
prompt('Windows Popup Text and return value entered');
confirm('Display ok and Cancel button and return true or false');

Html Tag

<!DOCTYPE html>
<html>
<head>
   <title>Java script Demo</title>
</head>
<body>
   <h1>Titre niveau 1</h1>

   <script>
      alert('your javascript directely here! or in a separate file');
   </script>

   <script src="js/app.js" charset="utf-8"></script>  
</body>
</html>

Variables

var myVariable;
var myVariable = 10;
var myVariable = "some string"; var myVariable = 'some string'; var myVariable = 'it \'s easy';
var myBolean = 10 > 1;
var myOppositeBolean = !myBolean;
var myArray =['PHP','C++','Ruby','JS']

Comparison

  • Less: <
  • Greater: >
  • equal (value): ==
  • equal (value and type: ===
  • not equal: !=
  • undefined: == 'undefined'
  • function type of variable
alert(typeof myVariable);

Condition

Logic

  • and: &&
  • or: ||

if

var cond1 = 1 > 2 &&  2 > 3;
var cond2 = 1 < 2 | 10 > 1;
var myVariable2 = 0

if(typeof myVariable = 'undefined') {
   alert('This variable has not been declared');
}

if(myVariable2) {
   alert('This variable is empty');
}

if(cond1) {
   alert('cond1 is true');
} else if(cond2) {
   alert ('cond2 is true');
} else {
   alert('cond1 and cond2 are false');
}

switch / case

switch(value) {
   case 'val1':
      alert(' = val1');
   break;

   case 'val2':
      alert(' = val2');
   break;

   default:
      alert('None of previous case')
}

?

alert(( 10 > 1) ? 'true' : 'false');

Loop

while

var myNumber = 1;

while (myNumber <= 10) {
   console.log(myNumber);
   myNumber++;
}

while (true) {
   console.log(myNumber);

   if(myNumber ==10 {
      break;
   }   

   myNumber++;
}

do

do {
   myNumber = parseInt(prompt('Enter a number:'));
} while (isNaN(myNnumber));

   console.log(myNumber);

for

for {var myNumber = 0; myNumber < 30; myNumber++) {
   console.log(myNumber);
}

Basic validation

var number = parseInt(prompt('Enter a number'));

while(isNaN(number)) {
   number = parseInt(prompt('This is not a number: Retry:'));
}

Array

var myArray =['PHP','C++','Ruby','JS']

/* Display the first array value */
alert(myArray[0]);

/* Number of array */
alert(myArray.length);

for(var i =0; i < myAray.length; i++) {
   console.log('Index: '+i+': value ='+myArray[i]);
}

/* change an array value*/
myArray[2]='C#';

/* Add more array */
myArray.push('HTML', 'CSS');

/* Remove last array */
myArray.pop();

/* Remove first array */
myArray.shift();

/* Search in an Array return -1 if not found*/
var promptText = prompt('enter a programmation language');
alter(myArray.indexOf(promptText));

/* Remove from a specific index (remove 2 array from index 1)*/
myArray.splice(1,2);

/* Replace an array value of a specific index (remove 2 array from index 1 and add 2 value from index 1*/
myArray.splice(1,2, 'C#' ,'Java');

/* Concatain all array values within variables with a separator */
myCsv = myArray.join(';');

/* Transform a strin in array */
myCsv ='Cobol;RPG;VB;C';
myArray = myCsv.split(';');

Function

function functionName(parm1, parm2) {
   var result = Number(parm1) + Number(parm2);
   result +- 30
   return result;
}

alert (functionName(10,20);

var myFunction = function(params){
                        myHello = 'Hello'; 
                      };

alert(myFunction());

Object

/* name is an object inside user */
var user = {
   name: {
      first: 'Jules',
      last: 'Cesar'
   }, 
   age: 45,
   sex: 'M'
};

console.log(user);
console.log(user.name);
console.log(user.name.first);