Internet Technology (AS21)

• == compares two values to see if they are the same
• != compares two values to see if they are not the same
• === is preferable to == as it compares two values to check both the data type and the value are same
• !== is preferable to != as it compares two values to check both the data type and the value are not same

a function without a name. used for code that only needs to run once within a task, rather than repeatedly being called by other parts of the script. 
can also be used as a function expression and stored in a variable or immediately invoked function jus start with (function...)

setTimeout(function() {
console.log('execute later after 1 second')
},1000);

• adding html to a page using innerHTML may make it susceptible to cross-site scripting attacks
• XSS involves an attacker placing malicious code into a site using what is known as untrusted data
• source of untrusted data:
  • user creates a profile
  • multiple contributors to a website
  • data from third-party sites
  • files such as images/videos are uploaded
• XSS can give an attacker access to information in:
  • The DOM (including form data)
  • Website cookies
  • session tokens containing login information of users

Protect against it

1. validate every information that is sent to the server, do not let users submit HTML or JS code
2. validate again on the server-side in case the client-side validation is bypassed by disabling JS
3. save markup and scripts only from trusted sources in the db
4. escape potentially dangerous characters after the data leaves the database
5. innerHTML can be safely used to add markup to a page for own trusted code- but content from any untrusted sources should be escaped and added as text (not markup) using properties like textContent

1. hello = () => {return "Hello World";}
2. hello = () => "Hello World";
3. hello = val => "Hello " + val;

a map holds key-value pairs where the keys can be any datatype. it remembers the original insertion order of the keys and is an iterable object. 

const fruits = new Map();

fruits.set("apples", 500);

fruits.get("apples"); // returns 500

fruits.has("apples"); // returns true if exist

fruits.clear() // removes all elements

const bananas = {name: 'banana'};

fruits.set(bananas, 300);

fruits.get("bananas") // returns undefined (catch the string)

JS classes are templates for JS objects. you can use the keyword class to create a class and always add a method constructor().

a JS class is not an object but a template for JS objects

e.g. class Car {
constructor (name, year) {this.name=name; this.year = year;}} const myCar1 = new Car("Ford", 2014);

• A Promise is a JavaScript object that links "Producing Code" and "Consuming Code“
• "Producing Code" can take some time and "Consuming Code" must wait for the result
• A JavaScript Promise object contains both the producing code and calls to the consuming code
  • let myPromise = new Promise(
    function(myResolve, myReject) { // "Producing Code" (May take some time)
    myResolve(); // when successful
    myReject(); // when error
    });
    // "Consuming Code" (Must wait for a fulfilled Promise)
    myPromise.then(
     function(value) { /* code if successful */ },
    function(error) { /* code if some error */ } );

jquery is a script written in JS. it finds elements using CSS-style selectors and provides jquery methods to work with the elements

a function called jQuery() or $() lets you find one or more elements in the page. 

Similarities

1. jquery selectors perform a similar task to traditional DOM queries, but the syntax is much simpler
2. the jQuery object can be stored in a variable, just like DOM nodes
3. jQuery methods and properties (like DOM methods and properties) can be used to manipulate the DOM nodes that you select

Differences

1. It is cross-browser, and there's no need to write fallback code
2. selecting elements is simpler (because it uses CSS-style syntax) and is more accurate
3. event handling is simpler as it uses one method that works in all major browsers
4. methods affect all the selected elements without the need to loop through each one
5. once you have make a selection, you can apply multiple methods to it

• A CDN is a series of servers spread out around the world
• they are designed to serve static files (such as HTML, CSS, JS, image, audio, videos) very quickly
• the CDN tries to find a server near you , then sends files from that server so the data does not travel as far
• when including jQuery in your pages, you can try to load it from one of these CDNs
• it is a good practice to include a fallback version that is stored on your own servers in case the CDN version does not load

all jQeury methods are included inside a document ready event

this prevents the jQuery code from executing before the document is finished loading

if the jQuery code executes before the page is ready, some action may fail e.g. hiding an element that is not yet created

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

1. Ajax is a technique for loading data into part of a page without having to refresh the entire page
2. The data is often sent in a format called JavaScript Object Notation (or JSON)
3. The ability to load new content into part of a page improves the user experience because the user does not have to wait for an entire page to load if only part of it is being updated
4. Ajax allows you to request data from a server and load it without having to refresh the entire page
5. Ajax has led to the rise in single page applications (SPA)

When a browser comes across a <script> tag, it will typically stop processing the
rest of the page until it has loaded and processed that script. This is known as a
synchronous processing model
➢ With Ajax, the browser can request some data from a server and - once that data
has been requested - continue to load the rest of the page and process the user's
interactions with the page
➢ It is known as an asynchronous (or non-blocking) processing mode

1. the browser requests data from the server
2. browsers implement an object called XMLHttpRequest to handle Ajay requests
3. once a request has been made, the browser does not wait for a response from the server
4. when the server has finished responding to the request, the browser will fire an event
5. this event can be used to trigger a JS function that will process the data and incorporate it into one part of the page

// creates the request object
var xhr = new XMLHttpRequest();
//prepare request, third argument specifies if request is asynchronous or not
xhr.open('GET', 'data/test.json',true);
//send request
xhr.send('search=ardiuino');
xhr.onload= function() {if(shr.status ===200 {//process response}}

JSON is a lightweight data-interchange format

it is self-describing and language independent. it uses JS syntax but the JSON format is text only. 

is a superset of JS - has specific rules about how different types of values can be used. has constructors that are missing in JS and is open source (designed at Microsoft)

via npm npm install typescript --save-dev

• does not run in the browser
• it is transpiled i.e., compiled to create JS code
• the JS code can then be run in the browser or on the server-side inside Node.js
• tsc is the typeScript compiler

• commonly used for single page applications (SPA)
• angularJS is a JS framework
• developed by google
• it can be added to a HTML page with a <script> tag using a CDN

• written in typeScript
• includes:
  • a component-based framework for building scalable web applications
  • a collection of libraries that cover a wide variety of features
  • a suite of developer tools to help develop, build, test, and update the code

• open-source and cross-platform JS runtime environment
• node.js runs the V8 JS engine, the core of Google Chrome, outside of the browser
• node.js allows to write the server-side code in addition to the client-side code in the same language - JS

how it works

1. a node.js app runs in a single process, without creating a new thread for every request
2. node.js performs an I/O operation asynchronously: instead of blocking the thread and wasting CPU cycles waiting, Node.js will resume the operations when the response comes back
3. event loop is responsible for handling simpler tasks and the thread pool manages the heavy tasks

Layers are a way of organizing your code

Tiers are about where your code runs

siehe bild

d

1. presentation 
   1. client
   2. presentation (server/browser)
2. business
3. data access/persistence
   1. integration data source
   2. resources legacy/db

Traditional way

• built
  • service.war
  • application server
  • bins/libs(JVM)
  • operating system
  • infrastructure
• deployment
  • installation
  • configuration of application server
  • deployment and start of archive
• characteristics
  • maintenance of the application server required
  • dependency to application server and its configuration
  • Jave EE Application Servers

Microservice way:

• build
  • service.jar
  • bins/libs (JVM)
  • operating system
  • infrastructure
• deployment
  • just run it. java -jar service.jar
• characteristics
  • easy to deploy
  • fast start-up time
  • self-contained Jar
  • embedded Java Servers: spring boot...

Is a Java based framework for building microservices

• spring-boot - convention over configuration
• simplifies the use of Spring-based technologies
• it builds easier thanks to preconfigured dependencies and auto-configuration
• it ships easier thanks to simple JAR packaging
• runs easier thanks to embedded servers. 

is a build, project management and comprehension tool used primarily for JAva project

important maven elements to understand

1. standard project structure
2. POM(Project Object Model)
3. Workflow
4. Maven Central
5. Build lifecycle

every apache maven project is based on this standard project structure: 

• the sry/main/java directory contains the project source code.
• the sry/test/java directory contains the test source
• the pom.xml file is the project's Project Object Model orPOM

it is the core configuration of the apache maven project

it is a single XML-based configuration file that contains the majority of information required to build a project

it contains

1. project identification
2. project version
3. project description
4. build settings
5. dependencies

@Autowired marks field, a constructor or setter method to be @autowired by spring dependency injection

JSR 330 @Inject annotation is equivalent to spring @autowired

• there are frequent situations when the application requirest o run custom code while starting up
• since @component class is scanned during the application start, a method annotated by @postConstruct will execute after all services are initialized.
• there are several ways to do that in spring. 

@Repository indicates that an annotated class is a repository, which is an abstraction of data access and storage

DAO (Data Access Objects) or Repository classes usually represent the database access layer in an application

•  @Configuration indicates that a class is a configuration class that may contain @Bean definitions.
• The @Bean can then be injected resp. @Autowired somewhere.
• @Bean annotation tells that a method produces a bean to be managed by the Spring container.
• @Bean is a method-level annotation and has an implicit @Scope("singleton") default value.