Kategorie: JavaScript

JavaScript Probleme,Tipps und Tricks

Kategorien
JavaScript

Funktionale Programmierung mit JavaScript

JavaScript ist keine funktionale Programmiersprache, aber die wichtigsten Prinzipien der funktionalen Programmierung lassen sich trotzdem beim Programmieren an einigen Stellen anwenden.

Diese Prinzipien sind u.a.:

  1. Funktionen haben Inputs und Outputs, aber keine Nebenwirkungen. Sie bearbeiten keine Daten, die ihnen nicht explizit übergeben wurden
  2. Variablen werden nicht verändert (Immortabilität)
  3. Funktionen höherer Ordnung dienen zur Schachtelung von Funktionen. Als Input (Parameter) von Funktionen werden wiederum Funktionen verwendet

An den folgende Beispielen und sehr praktischen Array Methoden soll der Unterschied zwischen funktionaler und nicht funktionaler Programmierung gezeigt werden:

forEach

Die Array methode forEach ermöglicht es funktional über ein Array zu iterieren, ohne eine sich verändernde Variable i zu verwenden.

// Beispiel alle Einträge in companies auf der Konsole ausgeben

//nicht funktional
for(let i = 0; i < companies.length; i++) {
   console.log(companies[i]);
}

//funktional
companies.forEach(function(company) {
  console.log(company);
});

filter

Die Array Methode filter entfernt Einträge aus einem Array, die nicht der übergebenen Bedingung entsprechen und gibt diese zurück. Man beachte, dass das ursprüngliche Array nicht verändert wird und die filter Mezhode selbst ein Funktion höherer Ordnung ist, weil als Parameter eine Funktion übergeben wird.

Weiterlesen „Funktionale Programmierung mit JavaScript“
Kategorien
angular

Protractor Konfiguration Headless Chrome und Firefox

Um Selenium Tests in Firefox und Chrome im Headless Modus auszuführen mit Protractor, kann man folgende Konfiguraton verwenden in der protractor.conf:

exports.config = {
....
  multiCapabilities: [
    {
      browserName: 'chrome',
      chromeOptions: {
        'args': ['--headless']
      },
    },
    {
      browserName: 'firefox',
      firefoxOptions: {
        args: ['--headless']
      },
      'moz:firefoxOptions': {
        args: ['--headless']
      }
    },
  ],
...
};
Kategorien
angular

Angular ngx-translate TranslateLoader ohne http Modul

Um eine Kompatibilität mit alten Browsern, wie dem Firefox Version <= 5 zu erreichen, kann man das angular http Modul nicht verwenden. Das ngx-translate Module bneötigt einen Loader, der die richtige Sprache lädt per Ajax Request. Dies läst sich auch mit dem XMLHttpRequest und einem Observalbe lösen:

import {Injectable} from '@angular/core';
import {TranslateLoader} from '@ngx-translate/core';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class LanguageLoader implements TranslateLoader {

  getTranslation(lang: string): Observable<any> {
    return Observable.create(function (observer) {
    let url = `./assets/i18n/${lang}.json?=` + new Date().getTime();
    let xhr = new XMLHttpRequest();

      xhr.onreadystatechange = function () {
        if (xhr.readyState == XMLHttpRequest.DONE || xhr.readyState == 4) {
              let response = JSON.parse(xhr.responseText);
              observer.next(response);
              observer.complete();
        }
      }
      xhr.open('GET', url, true);
      xhr.send(null);
    });
  }
}

In der app.module.ts kann man dann den Loader wie folgt einbinden:

TranslateModule.forRoot({
  loader: {provide: TranslateLoader, useClass: LanguageLoader}
})
Kategorien
angular

Angular 2 HTTP Request nochmals ausführen mit rxjs und retry()

Bei einem Fehlgeschlagenen Request kann man sehr komfortabel nochmals anfragen mit der Methode retry():

import 'rxjs/add/operator/retry';

...

const result = this.http.get(url)
.retry(2);
Kategorien
JavaScript

Javascript Debuging auf der Konsole mit console.table()

Die neue Javascript Methode console.table() ist sehr hilfgreich, um Objekte und Arrays auf der Konsole darzustellen.

Beispiel:

var data = [
        {"id": "Open"},
        {"id": "OpenNew", "label": "Open New"},
        null,
        {"id": "ZoomIn", "label": "Zoom In"},
        {"id": "ZoomOut", "label": "Zoom Out"},
        {"id": "OriginalView", "label": "Original View"},
        null,
        {"id": "Quality"},
        {"id": "Pause"},
        {"id": "Mute"},
        null,
        {"id": "Find", "label": "Find..."},
        {"id": "FindAgain", "label": "Find Again"},
        {"id": "Copy"},
        {"id": "CopyAgain", "label": "Copy Again"},
        {"id": "CopySVG", "label": "Copy SVG"},
        {"id": "ViewSVG", "label": "View SVG"},
        {"id": "ViewSource", "label": "View Source"},
        {"id": "SaveAs", "label": "Save As"},
        null,
        {"id": "Help"},
        {"id": "About", "label": "About Adobe CVG Viewer..."}
    ];

console.table(data);

Erzeugt im Chrome die folgende Ausgabe in den Developer Tools:

console-table

 

Kategorien
angular Apache Webserver

Angular 5 URL ohne index.html

Bei einer Angular Anwendung muss man standardmäßig die index.html aufrufen, damit die Anwendung startet auf einem Apache Webserver. Damit dies auch ohne /index.html nur mit der Domain allein (www.foo.de) funktioneirt, muss man folgendes einstellen:

1. Erstellen einer .htaccess Datei in  src/.htaccess mit dem Inhalt:

DirectoryIndex index.html

2. Ändern der Base Url in der src/index.html

<base href="">

3. ggf. hinzufügen der .htaccess zum Build Prozess in der .angular-cli.json

"apps": [
  {
    "assets": [
      "assets",
      "favicon.ico",
      ".htaccess"
    ],

 

Kategorien
angular

Angular deutsche Lokalisierung konfigurieren

Um Angular ab Version2  die deutsche Sprache für Fehlermeldugen und auch das Datums-Format zu konfigurieren, muss man in der app.modules.ts folgendes einstellen:

...
import { LOCALE_ID} from '@angular/core';
import localeDe from '@angular/common/locales/de';
import localeDeExtra from '@angular/common/locales/extra/de';
import { registerLocaleData } from '@angular/common';
registerLocaleData(localeDe, localeDeExtra);

@NgModule({
 providers: [
 { provide: LOCALE_ID, useValue: 'de' },
 ]
})
Kategorien
JavaScript React Native

React Native für hybride native Apps

Ein sehr interssante Möglichkeit um native Apps für Android und iOS zu schreiben bietet React Native von Facebook, damit wird zwar in Javascript und react.js gecodet, aber es werden damit native Funktionen benutzt wie bei Titanium und im Gegensatz zu Phonegap.

Sicherlich eine höchst interessante Alternative zu Titanium und Phonegap.

Kategorien
JavaScript jQuery

Javascript disable all readonly Dropdowns and send via Form

Readonly select-Tags are not allowed in HTML until now, but can be used.

An alternative would be to use the disabled=true attribute, but this will not send the select value on form submission.

An easy solution would be to disable the selection with Javascript and leave it readonly:

$( document ).ready(function() {
    $('select[readonly="readonly"]').css('pointer-events','none');
});

The only problem is, that you can still tab throw the form and select elements with your keyboard but the mouse can not select element from the dropdown.

Kategorien
JavaScript

Animationen erstellen mit Javascript

Kleine Animation, wie das verschwinden eines div-Blockes, kann man in Javascript sehr einfach mit der Funktion setTimeout() erstellen.

Die Logik ist dabei immer dieselbe:

Für jeden Bewegungsframe wird mittels der  setTimeout-Funktion zu einem bestimmten Zeitpunkt die Größe oder Posiition des Objektes verändert, so dass am Ende aneinandergereiht eine Animation herauskommt für das menschliche Auge.

Bsp:
[inline]

Click me

[script type=“text/javascript“]//

[/script]
[/inline]

Weiterlesen „Animationen erstellen mit Javascript“