JavaScript

JSON

JSON Validator
JavaScript RegEx Tester

Namespaces

var BN = BN || {};
BN.Utilities = {};
BN.Utilities.random = function(from,to){
    return Math.floor(Math.random()*(to-from+1)+from);
};

Data types

Simple Object

1
2
3
4
5
6

var person = {}; 
person.firstName = 'Benny'
person.lastName = 'Neugebauer'; 
 
alert(person.firstName); // Benny
alert(person.lastName); // Neugebauer

Object (in JSON)

1
2
3
4
5
6
7
8
9

var person = 
{
  firstName: 'Benny',
  lastName: 'Neugebauer'
};
 
alert(person.firstName); // Benny
alert(person['firstName']); // Benny
alert(person["firstName"]); // Benny

Object (in JSON with constructor)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var person = 
{
  firstName: '',
  lastName: '',
  constructor: function(firstName, lastName) 
  {  
    this.firstName = firstName;
    this.lastName = lastName;
  }
};
 
person.constructor('Benny', 'Neugebauer');
alert(person.firstName); // Benny
alert(person.lastName); // Neugebauer

Object (with duck typing)

1
2
3
4
5
6
7
8
9
10
11
12

function Person()
{
  this.firstName = '';
  this.lastName = '';
}
 
var benny = new Person();
benny.firstName = 'Benny';
benny.lastName = 'Neugebauer';
 
alert(benny.firstName); // Benny
alert(benny.lastName); // Neugebauer

Object (with prototyping)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

function Person()
{
  this.firstName = '';
  this.lastName = '';
}
 
Person.prototype.setFirstName = function(firstName)
{
  this.firstName = firstName;
};
 
Person.prototype.setLastName = function(lastName)
{
  this.lastName = lastName;
};
 
Person.prototype.getFirstName = function()
{
  return this.firstName;
};
 
Person.prototype.getLastName = function()
{
  return this.lastName;
};
 
var daniel = new Person();
daniel.setFirstName('Daniel');
daniel.setLastName('Päpke');
 
alert(daniel.getFirstName()); // Daniel
alert(daniel.getLastName()); // Päpke

Control statements

switch-case statement

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

var food = 'wieners';
switch(food)
{
  case 'french fries':
    document.write('I eat ');
    document.write(food);
    document.write(' only with ketchup!');
    break;         
  case 'chinese food':
    document.write('I eat ');
    document.write(food);
    document.write(' only with soya sauce!');
    break;
  case 'brat':
  case 'wieners':
    document.write('I eat ');
    document.write(food);
    document.write(' only with mustard!');
    break;
  default:
    document.write('I eat ');
    document.write(food);
    document.write(' only with ketchup!');
}

Data structures

Arrays

Hilfreich: Mastering Javascript Arrays

Array anlegen

1
2

var myArray = new Array(); // oder
var myArray = [];

Arrays kopieren

1
2

firstArray = secondArray.concat(); // oder
firstArray = secondArray.slice(0);

Arrays referenzieren

1

firstArray = secondArray;

foreach-Schleife mit Array

1
2
3
4
5

var myArray = new Array('cat','dog','horse');
for(var index in myArray) 
{
  alert(myArray[index]);
}

Arrays verbinden

1

var array3 = array1.concat(array2); // Merges both arrays

Array-Größe

1
2

var myArray = new Array('cat','dog','horse');
alert(myArray.length); // 3

Array iterieren

1

for each (var item in [1, 2, 3]) alert(item);

Array functions


unshift(element) adds an item to the beginning of an array
push(element) adds an item to the end of an array
shift() gives an item from the beginning of an array
pop() gives an item from the end of an array

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var array = new Array('1','2','3');
var lastItem = array.pop();
alert(lastItem); // 3
 
array.push('4');
lastItem = array.pop();
alert(lastItem); // 4
 
var firstItem = array.shift();
alert(firstItem); // 1
 
array.unshift('0')
firstItem = array.shift();
alert(firstItem); // 0

call & apply

1
2
3
4
5
6
7
8

var text = "Hello World".slice(0, 5);
console.log(text); // Hello
 
var text = "Hello World".slice.call("Benny Neugebauer",0,5);
console.log(text); // Benny
 
var text = "Hello World".slice.apply("Benny Neugebauer",[0,5]);
console.log(text); // Benny

Frameworks

jQuery

Einbinden:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Skeleton:

jQuery(document).ready(function($){ 
});

HTML:

<div id="test"></div>

Change HTML content with JavaScript

Output:

<div id="test"><p>Hello World!</p></div>

With plain JavaScript:

window.document.getElementById('test').innerHTML = '<p>Hello World!</p>';

With jQuery:

$('#test').html('<p>Hello World!</p>');

onClick function with JavaScript

Output:

<div id="test" onclick="javascript:alert('Hello World');"></div>

With plain JavaScript:

window.document.getElementById('test').onclick = function(event)
{
  alert('Hello World!');
}

With jQuery:

$('#test').click(function(){ alert('Hello World!') });

Or (less recommended):

$('#test').attr('onclick', function(){ alert('Hello World!') });

Change background image

Expected Result:

html
{
  background: url("https://www.bennyn.de/image.png");
}

With plain JavaScript:

var html = document.getElementsByTagName('html')[0];
html.style.background = 'url("https://www.bennyn.de/image.png")';
// document.body.style.background = "url(images/bar_bg.png)";

With jQuery:

var html = $('html');
html.css('background':'url("https://www.bennyn.de/image.png")');

Snippets

Testen ob gerade oder ungerade

// 0:true, 1:false
var isEven = (numberOfValues % 2 == 0) ? true : false;

Ein Gedanke zu „JavaScript“

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.