JavaScript debugging on the console with console.table()

The new JavaScript method Console.table() is very hilfgreich, to represent objects and arrays on the console.

Example:

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

Produces the following output in the developer tools in the chrome:

console-table

 

Angular 5 URL without index.html

At an angular application you must call by default the index.html, Thus starts the application on an Apache Web server. This also without / index.html with the domain alone only (www.foo.de) funktioneirt, do you set this:

1. Create a .htaccess file in src/.htaccess with the content:

DirectoryIndex index.html

2. Change the base URL in the src/index.html

<base href="">

3. GGF. Add .htaccess to the build process in the .angular cli.json

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

 

Configure angular German localization

To configure the German language for Fehlermeldugen and also the date format angular from Version2, do one the following set in the app.modules.ts:

...
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' },
 ]
})

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.

Create animations with JavaScript

Small animation, like that disappear a div block, can setTimeout JavaScript very easy with the function() create.The logic is always the same:For each movement frame the size or Posiition of object is changed using the setTimeout function at a certain time, so that at the end of strung together an animation comes out for the human eye.Bsp:
Click me
continue reading....

TinyMCE focus and blur events JavaScript

You can treat as follows the TinyMCE focus and blur events with JavaScript:
        <script type="text/javascript">
            $( window ).load(function() {
                tinyMCE.dom.Event.add(tinyMCE.getInstanceById("foo_id").getWin(), "focus", function(){
                    console.log("focus");
                });
                tinyMCE.dom.Event.add(tinyMCE.getInstanceById("foo_id").getWin(), "blur", function(){
                    console.log("blur");
                });
            });
        </script>

Bing maps API tutorial

Embedding Bing maps on the Web page is very similar to how Google maps. The free annual use is at 10 millions requests per year, must then be paid as first you need a key, the free using a Windows ID account (e.g.. via Hotmail account) can request and automatically gets here.Microsoft offers 5 various libraries with modular functionality to, said Map control Library is the most important for Web Developer with JavaScript. U.a. There is a library for Windows apps store and also interesting a rest service for geocoding requests (also reverse geocoding) and route calculation. It gives an overview of all libraries here.For starters, you can quickly test a map with the following code and its key:
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=de-DE"></script>
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
<script type="text/javascript">
        var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
            {credentials: "key_here",
                center: new Microsoft.Maps.Location(45.5, -122.5),
                mapTypeId: Microsoft.Maps.MapTypeId.road,
                zoom: 7});

</script>
or cleaner than JavaScript class:
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=de-DE"></script>
<script type="text/javascript" src="bing.js"></script>
<div id='bingmapsDiv' style="position:relative; width:400px; height:400px;"></div>
<script type="text/javascript">
var bingMaps = new BingMaps("bingmapsDiv");
</script>
and with the Bing.js Class:
function BingMaps(mapId){
    this.mapId = mapId;
    this.key = "my_key";
    this.initMap = function(){
        var map = new Microsoft.Maps.Map(document.getElementById(this.mapId),
            {credentials: this.key,
                center: new Microsoft.Maps.Location(45.5, -122.5),
                mapTypeId: Microsoft.Maps.MapTypeId.road,
                zoom: 7});
    }
    this.initMap();
}
  

PHP functions in JS use php.js

If you do not miss it: High level functions, which one of the simplest work be removed in JavaScript. From PHP is always used slim, write readable code, also thanks to the many built-in helper functions, as e.g.. for String processing:
  • strncmp
  • strpbrk
  • strpos
  • strrchr
  • strrev
  • strripos
  • strrpos
  • strspn
  • strstr
  • strtok
  • strtolower
  • strtoupper
  • strtr
This is possible through a JavaScript library called time long PHP.js, almost all PHP functions has ported to JavaScript and PHP programmer certainly is a good help.