Javascript: Difference between revisions

From Objectif Client Inc
Jump to navigation Jump to search
 
(51 intermediate revisions by the same user not shown)
Line 1: Line 1:
== Basic ==
== Basic ==


=== Alert/prompt ===
<div class="toccolours mw-collapsible mw-collapsed">
=== alert/prompt/confirm ===
<div class="mw-collapsible-content">
<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">
alert('Windows Popup text');
alert('Windows Popup text');
prompt('Windows Popup Text and entry line');
prompt('Windows Popup Text and return value entered');
confirm('Display ok and Cancel button and return true or false');
</syntaxhighlight>
</syntaxhighlight>
</div>
</div>


<div class="toccolours mw-collapsible mw-collapsed">
=== Html Tag ===
=== Html Tag ===
<div class="mw-collapsible-content">
<syntaxhighlight lang="html5">
<syntaxhighlight lang="html5">
<!DOCTYPE html>
<!DOCTYPE html>
Line 18: 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>
</html>
</syntaxhighlight>
</div>
</div>


</syntaxhighlight>
<div class="toccolours mw-collapsible mw-collapsed">


=== Variables ===
=== Variables ===
<div class="mw-collapsible-content">
<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">
var myVariable;
var myVariable;
var myVariable = 10;
var myVariable = 10;
var myVariable = "some string"; var myVariable = 'some string'; var myVariable = 'it \'s easy';
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']
</syntaxhighlight>
</syntaxhighlight>
</div>
</div>
<div class="toccolours mw-collapsible mw-collapsed">


=== Comparison ===
=== Comparison ===
<div class="mw-collapsible-content">
* Less: <
* Less: <
* Greater: >
* Greater: >
Line 38: Line 59:
* equal (value and type: ===
* equal (value and type: ===
* not equal: !=
* not equal: !=
* undefined:  == 'undefined'
* function type of variable
* function type of variable
<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">
alert(typeof myVariable);
alert(typeof myVariable);
</syntaxhighlight>
</syntaxhighlight>
</div>
</div>


<div class="toccolours mw-collapsible mw-collapsed">
=== Condition ===
=== Condition ===
<div class="mw-collapsible-content">
==== Logic ====
* and: &&
* and: &&
* or: ||
* or: ||
==== if ====
<syntaxhighlight lang="javascript">
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');
}
</syntaxhighlight>
==== switch / case ====
<syntaxhighlight lang="javascript">
switch(value) {
  case 'val1':
      alert(' = val1');
  break;
  case 'val2':
      alert(' = val2');
  break;
  default:
      alert('None of previous case')
}
</syntaxhighlight>
==== ? ====
<syntaxhighlight lang="javascript">
alert(( 10 > 1) ? 'true' : 'false');
</syntaxhighlight>
</div>
</div>
<div class="toccolours mw-collapsible mw-collapsed">
=== Loop ===
<div class="mw-collapsible-content">
==== while ====
<syntaxhighlight lang="javascript">
var myNumber = 1;
while (myNumber <= 10) {
  console.log(myNumber);
  myNumber++;
}
while (true) {
  console.log(myNumber);
  if(myNumber ==10 {
      break;
  } 
  myNumber++;
}
</syntaxhighlight>
==== do ====
<syntaxhighlight lang="javascript">
do {
  myNumber = parseInt(prompt('Enter a number:'));
} while (isNaN(myNnumber));
  console.log(myNumber);
</syntaxhighlight>
==== for ====
<syntaxhighlight lang="javascript">
for {var myNumber = 0; myNumber < 30; myNumber++) {
  console.log(myNumber);
}
</syntaxhighlight>
</div>
</div>
<div class="toccolours mw-collapsible mw-collapsed">
=== Basic validation ===
<div class="mw-collapsible-content">
<syntaxhighlight lang="javascript">
var number = parseInt(prompt('Enter a number'));
while(isNaN(number)) {
  number = parseInt(prompt('This is not a number: Retry:'));
}
</syntaxhighlight>
</div>
</div>
<div class="toccolours mw-collapsible mw-collapsed">
=== Array ===
<div class="mw-collapsible-content">
<syntaxhighlight lang="javascript">
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(';');
</syntaxhighlight>
</div>
</div>
<div class="toccolours mw-collapsible mw-collapsed">
=== Function ===
<div class="mw-collapsible-content">
<syntaxhighlight lang="javascript">
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());
</syntaxhighlight>
</div>
</div>
<div class="toccolours mw-collapsible mw-collapsed">
=== Object ===
<div class="mw-collapsible-content">
<syntaxhighlight lang="javascript">
/* 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);
/* Object constructor */
function User(name, age, sex) {
  this.name = name;
  this.age =age;
  this.sex = sex;
}
function Car(brand, y, own) {
  this.brand = brand;
  this.year = y;
  this.owner = own;
  this.textInformation = function() {
      alert(this.owner.name + ' own a ' + this.brand + ' of ' + this.year);
  };
}
var myUser = new User("Jean-Paul",50,"M");
console.log(myUser);
var myCar = new Car('BMW', 2018, myUser);
console.log(myCar);
myCar.textInformation();
myUser.name = "Sean";
console.log(myCar);
</syntaxhighlight>
</div>
</div>
<div class="toccolours mw-collapsible mw-collapsed">
=== getElement ===
<div class="mw-collapsible-content">
* index.html
<syntaxhighlight lang="html5">
<html>
    <head>
            <meta charset="UTF-8">
      <title>Java script Demo</title>
    </head>
    <body>
      <h1 id="titre">Récupérer des éléments Html</h1>
            <p id="paragraph">My Paragraph</p>
            <p id="paragraph2">My second Paragraph</p>
            <p id="paragraph3">My third Paragraph</p>
            <form>
                <input name="dataEntry" type="text" value="Entry 01">
                <input name="dataEntry" type="text" value="Entry 02">
            </form>
            <div id="demo">
                <p class="list">Selection 01</p>
            </div>
                <p class="list">Selection 02</p>
      <script src="js/app.js" ></script> 
    </body>
</html>
</syntaxhighlight>
* app.js
<syntaxhighlight lang="javascript">
/* getElementById */
var titre = document.getElementById("titre");
alert(titre.innerHTML);
console.log(titre);
/* getElementsByTagName */
var paragraphs = document.getElementsByTagName('p');
console.log("paragraphs:"+paragraphs);
for (var i=0; i < paragraphs.length; i++) {
    console.log(paragraphs[i].innerHTML);
}
/* getElementsByName */
var dataEntry = document.getElementsByName('dataEntry');
console.log("dataEntry: "+dataEntry);
for (var i=0; i < dataEntry.length; i++) {
    console.log(dataEntry[i].value);
}
/* querySelector */
var selection = document.querySelector(".list");
console.log("selection: "+selection);
console.log("selection.innerHTML: "+selection.innerHTML);
/* querySelectorAll */
var selectionAll = document.querySelectorAll(".list");
console.log("selectionAll: "+selectionAll);
for (var i=0; i < selectionAll.length; i++) {
    console.log("selectionAll[i].innerHTML: "+selectionAll[i].innerHTML);
}
var selectionAll2 = document.querySelectorAll("#demo .list");
console.log("selectionAll2: "+selectionAll2);
for (var i=0; i < selectionAll2.length; i++) {
    console.log("selectionAll2[i].innerHTML: "+selectionAll2[i].innerHTML);
}
</syntaxhighlight>
</div>
</div>
<div class="toccolours mw-collapsible mw-collapsed">
=== Change Html Element ===
<div class="mw-collapsible-content">
* index.html
<syntaxhighlight lang="html5">
<html>
    <head>
            <meta charset="UTF-8">
      <title>Java script Demo</title>
    </head>
    <body>
      <h1 id="titre">Récupérer des éléments Html</h1>
            <p id="paragraph">My Paragraph</p>
            <p id="paragraph2">My second Paragraph</p>
            <p id="paragraph3">My third Paragraph</p>
            <form>
                <input name="dataEntry" type="text" value="Entry 01">
                <input name="dataEntry" type="text" value="Entry 02">
            </form>
            <div id="demo">
                <p class="list">Selection 01</p>
            </div>
                <p class="list">Selection 02</p>
      <script src="js/app.js" ></script> 
    </body>
</html>
</syntaxhighlight>
* app.js
<syntaxhighlight lang="javascript">
/* Retrieve object */
var question = document.getElementById("question");
console.log(question.innerHTML);
var entry = prompt('What is your name ?')
question.innerHTML = 'Your ' + question.innerHTML + " is " + entry + '?';
/* Override Image */
var image = document.getElementById("image");
console.log(image.getAttribute('src'));
console.log(image.src);
console.log(image.getAttribute('class'));
console.log(image.className);
var srcImage =image.src;
var paragraph = document.getElementById("src-image");
paragraph.innerHTML += srcImage;
/* New Image */
image.src ='images/cat2.jpg';
srcImage =image.src;
paragraph.innerHTML = 'Image Source: ' + srcImage;
image.className = 'big borders';
console.log(image.classList);
image.classList.add('transition')
image.classList.remove('borders')
if(image.classList.contains('borders')) {
    console.log('somthing not planned here...');
} else {
    console.log('class borders has been removed !');
}
</syntaxhighlight>
</div>
</div>

Latest revision as of 14:30, 5 November 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);

/* Object constructor */
function User(name, age, sex) {
   this.name = name;
   this.age =age;
   this.sex = sex;
}

function Car(brand, y, own) {
   this.brand = brand;
   this.year = y;
   this.owner = own;

   this.textInformation = function() {
      alert(this.owner.name + ' own a ' + this.brand + ' of ' + this.year);
   };
}

var myUser = new User("Jean-Paul",50,"M");
console.log(myUser);

var myCar = new Car('BMW', 2018, myUser);
console.log(myCar);

myCar.textInformation();

myUser.name = "Sean";
console.log(myCar);

getElement

  • index.html
<html>
    <head>
            <meta charset="UTF-8">
       <title>Java script Demo</title>
    </head>
    <body>
       <h1 id="titre">Récupérer des éléments Html</h1>
            <p id="paragraph">My Paragraph</p>
            <p id="paragraph2">My second Paragraph</p>
            <p id="paragraph3">My third Paragraph</p>

            <form>
                <input name="dataEntry" type="text" value="Entry 01">
                <input name="dataEntry" type="text" value="Entry 02">
            </form>

            <div id="demo">
                <p class="list">Selection 01</p>
            </div>
                <p class="list">Selection 02</p>

       <script src="js/app.js" ></script>  
    </body>
</html>
  • app.js
/* getElementById */
var titre = document.getElementById("titre");
alert(titre.innerHTML);
console.log(titre);

/* getElementsByTagName */
var paragraphs = document.getElementsByTagName('p');
console.log("paragraphs:"+paragraphs);

for (var i=0; i < paragraphs.length; i++) {
    console.log(paragraphs[i].innerHTML);
}

/* getElementsByName */
var dataEntry = document.getElementsByName('dataEntry');
console.log("dataEntry: "+dataEntry);

for (var i=0; i < dataEntry.length; i++) {
    console.log(dataEntry[i].value);
}

/* querySelector */
var selection = document.querySelector(".list");
console.log("selection: "+selection);
console.log("selection.innerHTML: "+selection.innerHTML);

/* querySelectorAll */
var selectionAll = document.querySelectorAll(".list");
console.log("selectionAll: "+selectionAll);

for (var i=0; i < selectionAll.length; i++) {
    console.log("selectionAll[i].innerHTML: "+selectionAll[i].innerHTML);
}

var selectionAll2 = document.querySelectorAll("#demo .list");
console.log("selectionAll2: "+selectionAll2);

for (var i=0; i < selectionAll2.length; i++) {
    console.log("selectionAll2[i].innerHTML: "+selectionAll2[i].innerHTML);
}

Change Html Element

  • index.html
<html>
    <head>
            <meta charset="UTF-8">
       <title>Java script Demo</title>
    </head>
    <body>
       <h1 id="titre">Récupérer des éléments Html</h1>
            <p id="paragraph">My Paragraph</p>
            <p id="paragraph2">My second Paragraph</p>
            <p id="paragraph3">My third Paragraph</p>

            <form>
                <input name="dataEntry" type="text" value="Entry 01">
                <input name="dataEntry" type="text" value="Entry 02">
            </form>

            <div id="demo">
                <p class="list">Selection 01</p>
            </div>
                <p class="list">Selection 02</p>

       <script src="js/app.js" ></script>  
    </body>
</html>
  • app.js
/* Retrieve object */
var question = document.getElementById("question");
console.log(question.innerHTML);

var entry = prompt('What is your name ?')
question.innerHTML = 'Your ' + question.innerHTML + " is " + entry + '?';

/* Override Image */
var image = document.getElementById("image");
console.log(image.getAttribute('src'));
console.log(image.src);
console.log(image.getAttribute('class'));
console.log(image.className);

var srcImage =image.src;

var paragraph = document.getElementById("src-image");
paragraph.innerHTML += srcImage;

/* New Image */
image.src ='images/cat2.jpg';

srcImage =image.src;
paragraph.innerHTML = 'Image Source: ' + srcImage;

image.className = 'big borders';
console.log(image.classList);

image.classList.add('transition')
image.classList.remove('borders')

if(image.classList.contains('borders')) {
    console.log('somthing not planned here...');
} else {
    console.log('class borders has been removed !');
}
Retrieved from "http://wiki.objclt.ca/wiki/index.php?title=Javascript&oldid=940"