Benny's Blog
Kategorien:
Navigation: Home » JavaScript

JavaScript

0

21. Oktober 2011

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]);
}

Array-Größe

1
2

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

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

Frameworks

jQuery

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!') });

Change background image

Expected Result:

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

With plain JavaScript:

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

With jQuery:

var html = $('html');
html.css('background':'url("http://www.bennyn.de/image.png")');
Tags:
Nach oben ↑