Skip to content

Instantly share code, notes, and snippets.

@patrickjaja
Created September 15, 2015 11:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save patrickjaja/8479c9ca756ecab23240 to your computer and use it in GitHub Desktop.
Save patrickjaja/8479c9ca756ecab23240 to your computer and use it in GitHub Desktop.
Javascript, CSS3, HTML5, Angular Intensivkurs
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output />
<content url="file://$MODULE_DIR$" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
# EditorConfig is awesome: http://EditorConfig.org
# top-most EditorConfig file
root = true
[*]
# Unix-style newlines with a newline ending every file
end_of_line = lf
insert_final_newline = true
# 4 space indentation
indent_style = space
indent_size = 2
# Matches multiple files with brace expansion notation
# Set default charset
charset = utf-8
trim_trailing_whitespace = true
[*.md]
trim_trailing_whitespace = false
{
"preset": "google",
"disallowSpacesInAnonymousFunctionExpression": null,
"validateLineBreaks": "LF",
"validateIndentation": 2,
"excludeFiles": ["node_modules/**"]
}
{
"node": true,
"browser": true,
"esnext": true,
"bitwise": true,
"camelcase": false,
"curly": true,
"eqeqeq": true,
"immed": true,
"indent": 2,
"newcap": true,
"noarg": true,
"quotmark": "single",
"undef": true,
"unused": "vars",
"strict": true,
"laxcomma": true,
"globals": {
"componentHandler": true
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="##TITLE##">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
</title>
<!-- Add to homescreen -->
<link rel="manifest" href="manifest.json">
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="TestApp">
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="TestApp">
<!--<link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">
Tile icon for Win8 (144x144 + tile color)
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#3372DF">
-->
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
<!--
<link rel="canonical" href="http://www.example.com/">
-->
<!-- build:css styles/login.app.min.css -->
<!--<link rel="stylesheet" href="css/style.css">-->
<!-- endbuild -->
<!-- Page styles -->
</head>
</head>
<section id="news" class="page">
<title>News</title>
<div class="page-header">
<header>
<h2></h2>
<address></address>
<time datetime="2015-09-15"></time>
</header>
</div>
<div class="page-content">
<div class="content-nav">
<nav>
<ul class="nav">
<li>
<a href="index.html">Seite 1</a>
</li>
<li>
<a href="seite2.html">Seite 2</a>
</li>
<li>
<a href="seite3.html">Seite 3</a>
</li>
</ul>
</nav>
</div>
<div class="content-main">
<main id="page-main">
<article itemscope="">
<h2>Veranstaltungen</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus
aperiam harum alias officiis assumenda officia quibusdam deleniti
eos cupiditate dolore doloribus!</p>
<figure>
<img src="http://placehold.it/320x240" alt=""/>
<img src="http://placehold.it/320x240" alt=""/>
<figcaption>
<h3>Überschrift zur Bildbeschreibung</h3>
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li>Qui dicta minus molestiae vel beatae natus</li>
</ol>
</figcaption>
</figure>
content goes here ...
</article>
</main>
</div>
</div>
<div class="content-aside">
<aside>
Inhalte die nicht unbedingt wahrgenommen werden müssen.
</aside>
</div>
<div class="page-footer">
<footer>
<address>&copy; <time>2015</time> Companyname</address>
<nav>
<ul>
<li><a href="terms.html">termins</a></li>
</ul>
</nav>
</footer>
</div>
</section>
<template id="table-row-image">
<tr><td><img src="{image}" alt="{alt}"/></td></tr>
</template>
<section id="people" class="page">
<title>People</title>
</section>
<!-- build:js(app/) scripts/login-app.min.js -->
<!--<script src="js/basics.js"></script>-->
<!--<script src="js/constructors.js"></script>-->
<script src="js/module.js"></script>
<!-- endbuild -->
</body>
</html>
//Javascript Basics
//Einfache Objekttypen
var a = 'Textwert';
console.log( typeof a);
var b = 42; // 'number'
var c = true; //false // 'boolean'
var d = ''; // 'string'?
console.log(typeof d);
console.log(d == false);
console.log(d === false);
console.log(b + 108 + a);
console.log(a + b + 108);
console.log(a + (b + 108));
var f;
console.log(f);
if (typeof f === 'undefined') {
console.log('F===undefined 1');
}
if (f === undefined) {
console.log('F=== undefined 2');
}
if (!f) {
console.log('!F undefined 3');
}
var arr = [];
arr = [true, 2, 'drei'];
console.log(arr[0]);
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
delete(arr[1]);
console.log(arr);
arr.splice(1, 1);
console.log(arr);
var obj = {
'key_1' : true,
'key_2' : 2,
'key_3' : 'drei',
'test 1' : 'teeest'
}
console.log(obj);
for (key in obj) {
console.log(key);
console.log(obj[key]);
}
function log(m) {
var m = m || 'default';
if (typeof m === 'undefined') {
m = 'default';
}
}
var add = function (x) {
var erg = x + x;
return erg;
}
var g = add(5);
console.log('Erg:' + g);
var collection = document.querySelectorAll('a[href]');
for (var i = 0; i < collection.length; i++) {
collection[i].addEventListener('click', function (event) {
event.preventDefault();
console.log(event.target.getAttribute('href'));
});
}
var program = function() {
var a = 1;
};
for (var k in window) {
console.log(k);
}
// Immediate function
(function () {
var a = 1;
console.log(a);
})();
var qits = window.qits || {};
// IIFE - Immediate invoked function expression
qits.logger = (function () {
'use strict';
var fn = {};
fn.add = function () {
}
fn.log = function (m) {
console.log(m);
}
return fn;
})();
qits.logger.log('Immediate Test Call');
//Konstruktoren
console.clear();
var arr = new Array();
function Car() {
var color = 'red';
this.color = 'green';
Car.color = 'blue';
this.drive = function () {
console.log('Brumm!');
};
};
Car.prototype.brake = function () {
}
Car.prototype.driver = function () {
console.log('ZTZZZZ');
}
function ElectroCar () {
this.laden = function () {
console.log('laden');
};
}
function Panzer () {
this.schutz = function () {
console.log('SCHUTZ AN');
};
}
function Flugzeug () {
this.fliegen = function () {
console.log('Fliegen AN');
};
}
ElectroCar.prototype = new Flugzeug();
var electroCar = new ElectroCar();
console.log(electroCar.fliegen());
// Instanzenbildung
var myAuto = new Car();
myAuto.drive();
myAuto.driver();
console.log(myAuto.color);
console.log(Car.color);
//class Logger {
// constructor(options) {
// this.model = options.model;
// this.template = options.template;
// }
//
// render() {
// return _.template(this.template, this.model.toObject());
// }
//}
//
//
//
//class LogView extends View {
// render() {
// var compiled = super.render();
// console.log(compiled);
// }
//}
// MODULE SCHREIBEN
var qits = window.qits || {};
qits.http = (function() {
'use strict';
var fn = {};
fn.get = function(url) {
console.log('get HTTP');
fn.xdr(url, 'GET', {}).then(function(response) {
document.querySelector('#page-main').innerHTML = response;
//console.log('OK RESPONSE '+response);
}).catch(function(error) {
document.querySelector('#page-main').innerHTML = 'Seite nicht gefunden.';
});
};
fn.post = function() {
};
/**
* Makes a request
* @param {String} url URL
* @param {String} method Method type (GET/POST)
* @param {String} data Content
*/
fn.xdr = function(url, method, data) {
var promise = function(resolve, reject) {
var xhr = new XMLHttpRequest();
if ('withCredentials' in xhr) {
xhr.open(method, url, true);
} else if (typeof XDomainRequest !== 'undefined') {
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
reject('CORS is not supported')
}
xhr.onload = function() {
resolve(xhr.responseText);
};
xhr.onerror = function() {
reject('XMLHttpRequest error');
};
// IE <= 9 doesn't allow to set Content-type
if (xhr.setRequestHeader) {
xhr.setRequestHeader('Content-type', 'application/json');
}
//do it, wrapped in timeout to fix ie9
setTimeout(function() {
xhr.send(data);
}, 0);
}
return new Promise(promise);
};
fn.onClick = function(event) {
console.log('GEKLICKT');
console.log(event);
var url = event.target.getAttribute('href');
fn.get(url);
event.preventDefault();
};
return fn;
})();
window.addEventListener('load', function() {
var collection = document.querySelectorAll('.nav');
//for (var i = 0; i < collection.length; i++) {
collection[0].addEventListener('click', qits.http.onClick);
//}
});
<div>Seite 2 ist super</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment